[Bug]: Syncfusion components not rendering implicitly (CSF3)
#23,867 opened on Aug 17, 2023
Repository metrics
- Stars
- (89,909 stars)
- PR merge metrics
- (PR metrics pending)
Description
Describe the bug
Upon updating from SB 7.0 to SB 7.1, all Syncfusion component stories that were using implicit rendering didn't work anymore. Stories that had a template in the render function continued working fine (as well as our own components, that also continue working with implicit rendering). As you can see in this Chromatic build: https://www.chromatic.com/build?appId=62eccae33003c44cf082239d&number=1116, most components are failing. Note that the build only fails on build-storybook. start-storybook works fine, so local development is not affected.
I am trying to create a reproduction but wasn't successful yet (the Storybook + Syncfusion combo is a little difficult to set up). I will continue trying this, but in the meantime I am providing some code snippets of working and failing stories.
A typical Syncfusion component story will look like this:
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'
}
};
Note that ButtonComponent is a Syncfusion component and we are rendering implicitly. This worked fine in SB 7.0, but not in SB 7.1 or higher.
After playing around a little, I found some workarounds.
Workaround 1: Including a template and 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'
}
};
Workaround 2: Creating a demo Angular Component (simple TS and HTML file) as wrapper which is then loaded into the story instead of the component itself, so something like this:
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'
}
};
... and the HTML just contains what I have in the template in workaround 1.
Workaround 1 is what we'll go with for now, but it would be nice to be able to use the implicit rendering again as it's super convenient. I will also try to provide a reproduction in the meantime and keep you updated here. If you need any additional info or file contents, please let me know.
Thanks!
To Reproduce
No response
System
Environment Info:
System:
OS: Windows 10 10.0.22621
CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11850H @ 2.50GHz
Binaries:
Node: 18.16.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.15 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 9.5.1 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.22621.1992.0), Chromium (115.0.1901.203)
npmPackages:
@storybook/addon-a11y: ^7.1.0 => 7.3.0
@storybook/addon-actions: ^7.1.0 => 7.3.0
@storybook/addon-essentials: ^7.1.0 => 7.3.0
@storybook/addon-interactions: ^7.1.0 => 7.3.0
@storybook/addon-links: ^7.1.0 => 7.3.0
@storybook/addon-mdx-gfm: ^7.1.0 => 7.3.0
@storybook/addon-storyshots: ^7.1.0 => 7.3.0
@storybook/addon-storysource: ^7.1.0 => 7.3.0
@storybook/addons: ^7.1.0 => 7.3.0
@storybook/angular: ^7.1.0 => 7.3.0
@storybook/blocks: ^7.1.0 => 7.3.0
@storybook/components: ^7.1.0 => 7.3.0
@storybook/core-server: ^7.1.0 => 7.3.0
@storybook/manager-api: ^7.1.0 => 7.3.0
@storybook/source-loader: ^7.1.0 => 7.3.0
@storybook/test-runner: ^0.10.0 => 0.10.0
@storybook/testing-library: ^0.1.0 => 0.1.0
@storybook/theming: ^7.1.0 => 7.3.0
Additional context
No response