Svelte support - Githubissues

benmccann commented 2 years ago

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 commented 2 years ago

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 https://github.com/svelte-add/svelte-add/issues/221

jerrythomas commented 2 years ago

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

Akryum commented 2 years ago

Now that https://github.com/histoire-dev/histoire/issues/87 is done, I can work on adding support for more frameworks :)

nanokeshtw commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

oneezy commented 2 years ago

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

Akryum commented 2 years ago

It's coming together https://github.com/histoire-dev/histoire/commit/3357c46892466144e0d163b120ee4842822dbcb8

Akryum commented 2 years ago

Vue 2.7 support is pushed, meaning Histoire now fully supports multiple frameworks! https://github.com/histoire-dev/histoire/commit/e54694ae00b178bf046661252037baf1c9b8b05a

Akryum commented 2 years ago

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

oneezy commented 2 years ago

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

dominikg commented 2 years ago

@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 commented 2 years ago

@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 commented 2 years ago

@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. https://github.com/histoire-dev/histoire/blob/8a2e8bbad77a264a2edba6ec19af0686dba7415a/packages/histoire/src/node/builtin-plugins/tailwind-tokens.ts#L83

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

The tailwind plugin no longer rely on @vitejs/plugin-vue: https://github.com/histoire-dev/histoire/commit/39a2f353376d07b0d13ed0f92a98c59747db48a5

Akryum commented 2 years ago

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 commented 2 years ago

that's awesome @Akryum !

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

oneezy commented 2 years ago

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 commented 2 years ago

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

oneezy commented 2 years ago

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