storybook [Bug]: Syncfusion组件未隐式渲染(CSF3)

fd3cxomn  于 3个月前  发布在  其他
关注(0)|答案(2)|浏览(69)

描述错误

在从SB 7.0升级到SB 7.1后,所有使用隐式渲染的Syncfusion组件故事都不再工作。在渲染函数中有模板的故事仍然可以正常工作(以及我们自己的组件,它们也可以与隐式渲染一起正常工作)。如您在Chromatic构建中看到的:https://www.chromatic.com/build?appId=62eccae33003c44cf082239d&number=1116 ,大多数组件都失败了。请注意,仅在build-storybook上构建失败。start-storybook运行正常,因此本地开发不受影响。
我正在尝试创建一个复现示例,但尚未成功(Storybook + Syncfusion组合设置起来有点困难)。我会继续尝试这个,但在此期间,我将提供一些工作和失败故事的代码片段。
一个典型的Syncfusion组件故事看起来像这样:

import { Meta, StoryObj } from '@storybook/angular';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';

const meta: Meta<ButtonComponent> = {
  component: ButtonComponent,
  title: 'Standard Components/Button'
};

export default meta;
type Story = StoryObj<ButtonComponent>;

export const Button: Story = {
  args: {
    content: 'Button',
    cssClass: 'e-primary'
  }
};

请注意,ButtonComponent是一个Syncfusion组件,我们正在隐式渲染。这在SB 7.0中可以正常工作,但在SB 7.1或更高版本中不行。
经过一些尝试,我找到了一些解决方法。
解决方法1:包含模板和moduleMetadata:

export const Button: Story = {
  render: (args: any) => ({
    props: args,
    moduleMetadata: {
      declarations: [ButtonComponent]
    },
    template: `<button ejs-button cssClass='${args['cssClass']}'>${args['content']}</button>`
  }),

  args: {
    content: 'Button',
    cssClass: 'e-primary'
  }
};

解决方法2:创建一个演示Angular组件(简单的TS和HTML文件)作为 Package 器,然后将其加载到故事中,而不是组件本身,如下所示:

import { Meta, StoryObj } from '@storybook/angular';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';
import { ButtonDemoComponent } from './button-demo.component.ts';

const meta: Meta<ButtonComponent> = {
  component: ButtonDemoComponent,
  title: 'Standard Components/Button'
};

export default meta;
type Story = StoryObj<ButtonComponent>;

export const Button: Story = {
  args: {
    content: 'Button',
    cssClass: 'e-primary'
  }
};

...而HTML文件只包含解决方法1中的模板内容。
解决方法1是我们目前会采用的,但如果能再次使用隐式渲染就太好了,因为它非常方便。同时,我会尝试提供一个复现示例并随时更新这里。如果您需要任何其他信息或文件内容,请告知我。
谢谢!

重现问题

  • 无响应*

系统环境

  • 无响应*

其他相关信息

  • 无响应*
bmvo0sr5

bmvo0sr51#

我们在7.1版本中为Angular的Storybook做的一次改变是,在构建storybook时将prod模式默认设置为true。你可以尝试禁用它,看看是否能解决你的问题。参见#23489

tmb3ates

tmb3ates2#

同样的问题也与kendo组件有关。参见#24636
启用/禁用生产模式不会改变这个问题。

相关问题