[BUG] Svelte custom-elements not working

[alexanderniebuhr]

Describe the bug If using svelte with custom-element, you have to set customElement: true in main.js. This breaks the UI of Storybook, if using svelte CSF configs. (since loader is in this repo, I open issue here). Svelte CSF configs, do also have .svelte ending, so are picked up by svelte loader, and compiled with customElement: true, which is wrong. They should not. Setting in main.js for svelte compiler should only match acutal components and not ABC.stories.svelte

To Reproduce Check repo, no story found, even setup. If you set customElement: false in main.js. it works. But then custom-element cannot be shown correctly. https://github.com/alexanderniebuhr/playground-storybook

Expected behavior svelte component as custom-element, and svelte story as normal svelte. Then I want to have the option to use the component as such: ( this is necessary, so that the code preview of storybook shows 'f-button' correctly, and copy & paste does work )

<script>
  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
  import "./Button.svelte";
</script>

<Meta
  title="Example/Button"

  !!!! IMPORTANT !!!!
  component="f-button"

  argTypes={{
    label: { control: "text" },
    primary: { control: "boolean" },
    backgroundColor: { control: "color" },
    size: {
      control: { type: "select", options: ["small", "medium", "large"] },
    },
    onClick: { action: "onClick" },
  }}
/>

<Template let:args>

   !!!! IMPORTANT !!!!
  <f-button {...args} on:click={args.onClick} />

</Template>

<Story
  name="Primary"
  args={{
    primary: true,
    label: "Button",
  }}
/>

System System: OS: Windows 10 10.0.21343 CPU: (24) x64 AMD Ryzen 9 3900XT 12-Core Processor Binaries: Node: 15.12.0 - C:\Program Files\nodejs\node.EXE npm: 7.6.0 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Spartan (44.21343.1000.0), Chromium (89.0.774.63) npmPackages: @storybook/addon-actions: ^6.2.0-rc.11 => 6.2.0-rc.11 @storybook/addon-essentials: ^6.2.0-rc.11 => 6.2.0-rc.11 @storybook/addon-links: ^6.2.0-rc.11 => 6.2.0-rc.11 @storybook/addon-svelte-csf: ^1.0.0 => 1.0.0 @storybook/svelte: ^6.2.0-rc.11 => 6.2.0-rc.11

Additional context it might be a good way not to build stories.svelte files with svelte options loader, suggested here: https://github.com/svelte-society/recipes-mvp/issues/41#issue-638005462

[alexanderniebuhr]

UPDATE: this is the code part I am talking, where I need to show the tag defined in component with

<svelte:options tag="f-button" />

[j3rem1e]

As a workaround, you can add your own svelte-loader which compiles to custom element only your components. You can't compile to custom-element <Meta/> or others internals svelte classes.

[alexanderniebuhr]

@j3rem1e I know that. This is why the loader options, just need to be used for non stories.svelte files..

What is an workaround to use following config, and still get the correct code (seen in the screenshot above)

"svelteOptions": {
    "loader": {
      compilerOptions: {
        customElement: false
      }
    }
  }

[j3rem1e]

I am not speaking about the svelteOptions.loader but about a custom webpackFinal which creates another instance of the svelte-loader with another set of test rules targeting the components you want to compile into custom element. Juste like the recipe you linked.

[alexanderniebuhr]

@j3rem1e ok.

is there also an option to change the naming in the code preview of storybook docs in the UI. like importing it old way, but instead of showing Button giving it a setting to show f-button as tag?

[alexanderniebuhr]

@j3rem1e can not make it work with your suggested way. How to use svelte custom-elements? Do you have an doc or example?

[shilman]

Ooh-la-la!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-alpha.22 containing PR #14855 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[alexanderniebuhr]

@shilman, @j3rem1e actually I think you had a typo in the issue number. However I might have some better news for you.. It seems to work better now, not fixed yet.. . maybe you can help me with that directly

How is the tag name of the code section in docs generated? Talking about <Button type="primary"/>, I never said it should be called Button

UPDATE: It is generated based on the Filename.. How can I override that tag name?!

[JacobWeinbren]

@alexanderniebuhr Did you find a solution to this problem?