Svelte support

[Akryum]

No description provided.

[benmccann]

We've just released a major change to SvelteKit with the goal of better supporting tools in the Vite ecosystem like Histoire, Storybook, and Vitest by requiring users to have a vite.config.js. Hopefully it should be pretty straightforward to get a SvelteKit example working now.

[oneezy]

Would love to see this come to life! Svelte ecosystem desperately needs a way to demo components
@Akryum and @benmccann

I created an issue over at @babichjacob 's svelte-add repo also to shine some more light on this
svelte-add/svelte-add#221

[jerrythomas]

Are there any instructions on how svelte support can be added to histoire?

[Akryum]

Now that #87 is done, I can work on adding support for more frameworks :)

[nanokeshtw]

Do we have an eta on this? I would love to help however I can. Would love to start working with Histoire on svelte projects!

[oneezy]

Now that #87 is done, I can work on adding support for more frameworks :)

@Akryum I'm also down to help get this setup

[Akryum]

I'm currently writing the code necessary to handle multiple frameworks and bed testing it with Vue 2.7

[oneezy]

Great. let us know when you need some beta testing 😉

[Akryum]

It's coming together 3357c46

[Akryum]

Vue 2.7 support is pushed, meaning Histoire now fully supports multiple frameworks!
e54694a

[Akryum]

Unresolved question is the builtin tailwind plugin that generates a Tailwind.story.vue story with Vue syntax... 🧠

[oneezy]

@babichjacob is one of the maintainers of svelte-add tailwind .. he might have some ideas on this

[dominikg]

@Akryum did you check out unocss + preset-wind as a replacement for tailwind? It understands tailwinds css but doesn't require extra setup for postcss and supports vue, svelte and others out of the box.

https://github.com/unocss/unocss

[Akryum]

@dominikg I'm not sure it's related to adding Svelte support, you are free to use any CSS framework you want in your Histoire project.

[Akryum]

@oneezy The unresolved question I mentionned is about the auto-generated story for Tailwind design tokens such as this which is using Vue 3 story syntax.

histoire/packages/histoire/src/node/builtin-plugins/tailwind-tokens.ts

Line 83 in 8a2e8bb

const storyTemplate = (tailwindConfig: any) => `<script>

Potential solutions I see:

• Write a different version for every possible framework (nope)
• Have a system to use the bundled version of Vue from the main UI in the story, but we would need to pre-bundle the generated component somehow (we need to not depend on vue and @vite/plugin-vue being available in the user project)
• Be able to write the story in vanilla JS without any rendering framework?

[dominikg]

Sounded like you were looking for a way to support tailwind in multiple formats, but if it is 'just' about adding a default story if the project already has a tailwind setup that's not needed.

Write a different version for every possible framework (nope)

It is effort, but could be provided via separate packages and possibly by third parties

Have a system to use the bundled version of Vue from the main UI in the story, but we would need to pre-bundle the generated component somehow (we need to not depend on vue and @vite/plugin-vue being available in the user project)

That would be a lot of extra for an optional feature and the end result would be very different. Projects that otherwise do not depend on vue don't need the extra weight just for a tailwind preview

Be able to write the story in vanilla JS without any rendering framework?

Yes, a vanilla js + html story could work

All things considered i'd see this generated tailwind story as an optional feature only suitable for some projects that use tailwind. Depending on the actual config / implementation, the generated story could as well be useless as the project doesn't work that way.

So if this thing is the only blocker for svelte support i'd vote for disabling it and release it without a generated tailwind story.

[Akryum]

That would be a lot of extra for an optional feature and the end result would be very different. Projects that otherwise do not depend on vue don't need the extra weight just for a tailwind preview

The dependency is already there for the main Histoire UI

[Akryum]

The tailwind plugin no longer rely on @vitejs/plugin-vue: 39a2f35

[Akryum]

[Akryum]

[Akryum]

The tailwind tokens are now using the pre-bundled version of Vue that comes with the main UI, so no need to install vue nor @vitejs/plugin-vue in the svelte project (even indirectly):

[oneezy]

that's awesome @Akryum !

Going to give this a test run when I have some time

[oneezy]

just tried to give it a go and ran into this ERR_MODULE_NOT_FOUND error

(could be me just unfamiliar with histoire setup process..but pretty sure I did everything right)

pnpm i
cd ../examples/svelte3
pnpm story:dev

$ pnpm story:dev

> histoire-example-svelte3@0.0.1 story:dev C:\Users\oneezy\Desktop\www\7.Testing\histoire\examples\svelte3        
> histoire dev

node:internal/errors:464
    ErrorCaptureStackTrace(err);
    ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'C:\Users\oneezy\Desktop\www\7.Testing\histoire\packages\histoire\dist\node\bin.js' imported from C:\Users\oneezy\Desktop\www\7.Testing\histoire\packages\histoire\bin.mjs
    at new NodeError (node:internal/errors:371:5)
    at finalizeResolution (node:internal/modules/esm/resolve:416:11)
    at moduleResolve (node:internal/modules/esm/resolve:932:10)
    at defaultResolve (node:internal/modules/esm/resolve:1044:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}
- ELIFECYCLE  Command failed with exit code 1.

[Akryum]

You need to build the repo first, see the contributing guide

[oneezy]

Well, it's trying but pnpm run build is erroring out.
Probably not the right place to be discussing all this but just to follow up:

my setup

• Windows 11
• node v16.13.2
• pnpm 7.9.0
• git bash

packages/histoire-plugin-svelte build$ rimraf dist && vite build && pnpm run build:types
│ vite v3.0.5 building for production...
│ ✓ 0 modules transformed.
│ Entry module cannot be external (src/client/index.ts).
│ error during build:
│ Error: Entry module cannot be external (src/client/index.ts).
│     at error (file:///C:/Users/oneezy/Desktop/www/7.Testing/histoire/node_modules/.pnpm/rollup@2.77.2/node_modules/rollup/dist/es/shared
│     at ModuleLoader.loadEntryModule (file:///C:/Users/oneezy/Desktop/www/7.Testing/histoire/node_modules/.pnpm/rollup@2.77.2/node_module
│     at async Promise.all (index 0)
└─ Failed in 1s

[Akryum]

Windows 11

Explains it all 😅

[Akryum]

Should be fixed on the branch

[oneezy]

Went ahead and made a demo repo for anyone who wants to try histoire + svelte

https://github.com/oneezy/histoire-svelte

Note: I forced it to only install histoire 0.10.0 until bug in 0.10.1 is fixed (see #239)

[swyxio]

made one too https://github.com/sw-yx/sveltekit-monorepo - with monorepo

[oneezy]

made one too https://github.com/sw-yx/sveltekit-monorepo - with monorepo

yo @sw-yx !
I actually have a monorepo with this as an option as well. Some of it was even based off your swyx-kit

Give it a spin if you like,
https://github.com/oneezy/monorepo