naver / storybook-addon-preview

Storybook Addon Preview can show user selected knobs in various framework code in Storybook
https://naver.github.io/egjs-infinitegrid/storybook/
MIT License
66 stars 10 forks source link

Silent faillure in built storybook #47

Open ryuran opened 1 year ago

ryuran commented 1 year ago

Hello,

I have some silent fails when the template is a function. From this try/catch :

https://github.com/naver/storybook-addon-preview/blob/master/src/PreviewPanel.tsx#L66-L70

        try {
            text = template(nextProps, globals);
        } catch (e) {
            text = "";
        }

It happen only on built storybook. When it's served for dev it doesn't happen. I suspect Terser/Babel or something else to alter the function making it unable to be stringified properly.

I didn't identified why some functions fails and some others not. It seems to fail more often for direct return arrow function :

template: (args) => /* html */ `
  <ce-avatar
    size="${args.size}"
    ${args.color ? `color='${args.color}'` : ''}
    ${args.type === 'picture' ? `src="assets/images/avatars/29.jpg"` : ''}
    ${args.type === 'initials' ? `initials="${args.initials}"` : ''}
  ></ce-avatar>
`,
ryuran commented 1 year ago

Workaround: avoid arrow function and prefer anonymous function

template: function (args) { 
  return /* html */ `
    <ce-avatar
      size="${args.size}"
      ${args.color ? `color='${args.color}'` : ''}
      ${args.type === 'picture' ? `src="assets/images/avatars/29.jpg"` : ''}
      ${args.type === 'initials' ? `initials="${args.initials}"` : ''}
    ></ce-avatar>
  `;
},