描述bug

在使用Lit和Storybook组合时，使用Lit @Property装饰器定义的带连字符的属性名(例如：not-interactive),会破坏Storybook控件。在这个PR中，我这样定义非交互属性：

@property({ type: Boolean, reflect: true, attribute: 'not-interactive' }) notInteractive = false;

添加属性属性会在第一次激活后破坏控件：
not.working.mov
当我移除属性属性时，这个问题就解决了。虽然属性名不是很理想：

@property({ type: Boolean, reflect: true }) notInteractive = false;

working.mov

复现链接

https://github.com/solid-design-system/solid

复现步骤

导航到顶部链接
安装pnpm(不是npm)
安装依赖项('pnpm i')
导航到packages/components并运行开发服务器('pnpm dev')
在Storybook上导航到'dialog'组件并测试'no-close-button'属性
在((packages/components/components/)中找到dialog.ts文件，从@Property装饰器中删除属性属性。这个版本应该可以工作。

系统

Storybook Environment Info:
(node:99778) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)

  System:
    OS: macOS 14.5
    CPU: (8) arm64 Apple M1
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.6.2 - /opt/homebrew/bin/node
    npm: 10.2.4 - /opt/homebrew/bin/npm
    pnpm: 8.15.4 - /opt/homebrew/bin/pnpm <----- active
  Browsers:
    Chrome: 126.0.6478.183
    Safari: 17.5
  npmPackages:
    @storybook/addon-essentials: ^8.1.10 => 8.1.10 
    @storybook/addon-interactions: ^8.1.10 => 8.1.10 
    @storybook/addon-links: ^8.1.10 => 8.1.10 
    @storybook/addon-mdx-gfm: ^8.1.10 => 8.1.10 
    @storybook/addons: ^7.5.3 => 7.6.17 
    @storybook/blocks: ^8.1.10 => 8.1.10 
    @storybook/test: ^8.1.10 => 8.1.10 
    @storybook/theming: ^8.1.10 => 8.1.10 
    @storybook/web-components: ^8.1.10 => 8.1.10 
    @storybook/web-components-vite: ^8.1.10 => 8.1.10 
    chromatic: ^11.5.4 => 11.5.4 
    storybook: ^8.1.10 => 8.1.10 
    storybook-addon-designs: 6.3.1 => 6.3.1

附加上下文

无响应*

const parseAttributeName = (name) => name.replace(/-([a-z])/g, (g) => g[1].toUpperCase()); const BooleanControl = ({ name, ...props }) => { const parsedName = parseAttributeName(name); // existing logic };

1条答案

按热度按时间

6l7fqoea1#

免责声明

由于此信息是自动生成的，可能存在不准确的情况。
要解决Lit组件中带有连字符的属性名问题，请按照以下步骤操作：

更新布尔控件:
修改 /code/lib/blocks/src/controls/Boolean.tsx 以处理带有连字符的属性名。
确保控件正确解析并将带连字符的名称Map到其相应的属性。
更新对象控件:
类似地修改 /code/lib/blocks/src/controls/Object.tsx 以处理带有连字符的属性名。
确保控件正确解析并将带连字符的名称Map到其相应的属性。
测试更改:
在 /code/lib/blocks/src/controls/Boolean.stories.tsx 和 /code/lib/blocks/src/controls/Object.stories.tsx 中添加测试用例以验证控件是否能与带有连字符的属性名一起工作。

示例在 Boolean.tsx 中的修改：

参考文献

/code/lib/blocks/src/controls/Boolean.stories.tsx
/code/lib/blocks/src/controls/Object.stories.tsx
/code/addons/controls
/code/addons/controls/src

关于Greptile

此响应为您提供研究起点，而非精确解决方案。
帮助我们改进！如果这有帮助，请留下一个👍，如果无关紧要，请留下一个👎。

赞(0）回复(0）举报 4个月前

storybook [Bug]:布尔控件在Lit中使用连字符(-)时会中断