search

phenixdigital / phoenix_storybook

A pluggable storybook for your Phoenix components.
MIT License
642 stars 49 forks source link

splitting storybook js #466

Open ferrine opened 3 weeks ago

ferrine commented 3 weeks ago

https://github.com/phenixdigital/phoenix_storybook/blob/e9a4110016ef4e895b11ad6022436cf0fedd0ddf/lib/phoenix_storybook/templates/layout/root.html.heex#L23

Hi, I am using esbuild with splitting and polyfills and have issues with js loading in the storybook. Is there an advice how to do that?

cblavier commented 1 week ago

Hey Maxim, I didn't understand what you wanted to achieve. Can you please explain or show it with a sample repo?

ferrine commented 1 week ago

I am developing webcomponents based component library and asset size to attach is >5mb. Yet, there is a dynamic loader for these webcomponents, so only required are loaded on the web page. However, it is not possible to leverage the dynamic loader unless you load js as a module.

So far phoenix_components have the only way to load assets as type="text/javascript", what would help to support this case is make type a parameter ("module" or "text/javascript"), so user will choose the best suited option.

The complication I got is these lines of code went out of sync with the socket initialization.

(function () {
  window.storybook = { Hooks, Params, Uploaders };
})();

I do not have the repo published yet, I did not gain a good shape yet.

In a nutshell, I have this dictionary and DOMObserver that calls imports on demand

export const componentImports: ComponentMappings = {
  'my-accordion': () => import(".../accordion/index.js"),
  'my-button': () => import(".../button/index.js"),
  ...