-
-
Notifications
You must be signed in to change notification settings - Fork 9.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[BUG] Svelte custom-elements not working #14381
Comments
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 |
@j3rem1e I know that. This is why the loader options, just need to be used for non What is an workaround to use following config, and still get the correct code (seen in the screenshot above)
|
I am not speaking about the |
@j3rem1e ok. is there also an option to change the naming in the code preview of storybook docs in the UI. |
@j3rem1e can not make it work with your suggested way. How to use svelte custom-elements? Do you have an doc or example? |
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
Closing this issue. Please re-open if you think there's still more to do. |
@shilman, @j3rem1e actually I think you had a typo in the issue number. How is the tag name of the code section in docs generated? Talking about UPDATE: It is generated based on the Filename.. How can I override that tag name?! |
@alexanderniebuhr Did you find a solution to this problem? |
Describe the bug
If using svelte with custom-element, you have to set
customElement: true
inmain.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 notABC.stories.svelte
To Reproduce
Check repo, no story found, even setup. If you set
customElement: false
inmain.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 )
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:
svelte-society/recipes-mvp#41 (comment)
The text was updated successfully, but these errors were encountered: