描述问题
我正在使用stencilJs(webcomponents)storybook,并从6.5升级到7.0。我发现了一个问题,其他人也在discord上报告过,在使用webcomponents时,在.stories文件的元部分导入组件会导致以下错误。Error: Provided component needs to be a string. e.g. component: "my-element"
根据我的理解,当时并不支持,即使在当前的文档中,似乎两年后仍然只在文档中使用了字符串'web-component'。然而,这在我们有20+个属性的组件中造成了问题,因为我们必须在其中定义所有的属性,否则它们就不会出现在控件面板中。
另外想知道,如果不支持的话,子组件字段是否也不受支持?
谢谢
https://discord.com/channels/486522875931656193/490822506916347904/910471981625909250
重现问题
我没有可以分享的重现问题,因为仓库是私有的,但我会分享故事
main.js
const config = {
stories: [{ directory: '../src/components', files: '**/*.stories.@(js|jsx|ts|tsx|mdx)' }],
addons: ['@storybook/addon-links',
'@storybook/addon-docs',
'@storybook/addon-controls',
'@storybook/addon-essentials',
'@storybook/addon-postcss',
'@storybook/addon-a11y',
'storybook-addon-designs',
'@storybook/addon-mdx-gfm'],
staticDirs: ['../node_modules/.storybook-static-dir'],
typescript: {
reactDocgen: 'react-docgen-typescript',
reactDocgenTypescriptOptions: {
compilerOptions: {
allowSyntheticDefaultImports: false,
esModuleInterop: false,
},
propFilter: () => true,
},
},
webpackFinal: async (config, {
configType
}) => {
config.module.rules.push({
test: /\.(ts|tsx|js|jsx)$/,
use: [{
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', { loose: true }],
["@babel/preset-typescript",
{
"isTSX": true,
"isJSX": true,
"allExtensions": true
},
],
["@babel/preset-react"]
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"@babel/plugin-transform-runtime",
"@babel/plugin-transform-object-assign",
["@babel/plugin-proposal-class-properties", { "loose": true }],
["@babel/plugin-transform-private-methods", { "loose": true }],
["@babel/plugin-transform-private-property-in-object", { "loose": true }]
],
},
}
],
});
return config;
},
framework: {
name: '@storybook/web-components-webpack5',
options: {
builder: { lazyCompilation: true },
}
},
docs: {
autodocs: 'tag'
},
features: {
storyStoreV7: true,
legacyDecoratorFileOrder: true,
breakingChangesV7: true,
},
};
export default config;
story
import type { Meta, StoryObj } from '@storybook/web-components';
import { CelAccordion } from './cel-accordion';
const meta:Meta = {
title: 'UI Components/Accordion',
// component: 'cel-accordion',
component: CelAccordion,
// subcomponents: {CelAccordionItem}
// design: accordionFigmaDesigns
// },
args: { caretRight: true },
// argTypes: { itemList: { type: 'object', description: 'Determines list of items that the accordion will render.' } },
};
export default meta;
type Story = StoryObj;
export const primary: Story = {
args: {
headerLabel: 'random label',
itemList: mockItemList,
},
};
系统信息
System:
OS: macOS 13.3.1
CPU: (8) arm64 Apple M1
Binaries:
Node: 16.14.2 - /usr/local/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 9.6.4 - /opt/homebrew/bin/npm
Browsers:
Chrome: 109.0.5414.87
Safari: 16.4
npmPackages:
@storybook/addon-a11y: ^7.1.0-alpha.41 => 7.1.0-alpha.41
@storybook/addon-actions: ^7.1.0-alpha.41 => 7.1.0-alpha.41
@storybook/addon-docs: ^7.1.0-alpha.41 => 7.1.0-alpha.41
@storybook/addon-essentials: ^7.1.0-alpha.41 => 7.1.0-alpha.41
@storybook/addon-links: ^7.1.0-alpha.41 => 7.1.0-alpha.41
@storybook/addon-mdx-gfm: ^7.0.24 => 7.0.24
@storybook/addon-notes: ^6.0.0-alpha.6 => 6.0.0-alpha.6
@storybook/addon-postcss: ^2.0.0 => 2.0.0
@storybook/addon-viewport: ^7.1.0-alpha.41 => 7.1.0-alpha.41
@storybook/blocks: ^7.0.23 => 7.0.23
@storybook/storybook-deployer: ^2.8.16 => 2.8.16
@storybook/theming: ^7.1.0-alpha.41 => 7.1.0-alpha.41
@storybook/web-components: ^7.1.0-alpha.41 => 7.1.0-alpha.41
@storybook/web-components-webpack5: ^7.1.0-alpha.41 => 7.1.0-alpha.41
其他上下文
- 无响应*
1条答案
按热度按时间zdwk9cvp1#
对不起,这里回复得有点慢。
据我所知,您需要提供一个字符串,即您的网页组件的名称(就像在HTML中调用它的标签一样,所以如果将其命名为
my-component
,则字符串为<my-component />
)。至于获取所有不同属性的文档,我们使用Custom Elements Manifest来填充这些字段的创建文档。https://github.com/storybookjs/storybook/blob/next/code/addons/docs/web-components/README.md#installation