Support svelte components in Bookshop Astro

[silveltman]

I just found out that you guys added support for Sveltekit, awesome!

This got me thinking, is there a way to use Bookshop in an Astro project with svelte components? This would be so awesome!

[silveltman]

Maybe even simpler, using bookshop in a regular Vite project instead of Astro.

Why I'm asking: I'm planning on building a component library to use in several client projects. I want to build these component in an isolated environment.

I love that bookshop allows me to set the component's config and default content in a yaml file. Since this the isolated component library behaves most similar to the actual website this way (where I have all content in the frontmatter of markdown pages).

Hope I explained my situation clearly here. Any tips on the best way to achieve this?

Thanks! :)

Edit: Ended up making a sveltekit component libary project, using there docs and the bookshop sveltekit docs. Moved the component-library from the root into src/lib. This will do for now.

Still curious to hear your thought on the concept of using bookshop as a isolated component libary. And also on using this in Astro projects, maybe even with live rendering.

[bglw]

It's an area I'm keen to look at!

It sounds like where you have landed is what my initial suggestion would have been, creating the Bookshop directory in a place that Astro can find it and referencing components from there, with the ability to generate structures etc. through the Bookshop packages.

There are some plans to look into first-class Bookshop Astro support through the Svelte engine (and likely React+etc engines to come), which would then support live rendering on a SSG Astro site. Nothing yet to report here but I'll check back in once I start poking at that!

[silveltman]

Thanks Liam!

First class Astro support would be amazing. I'm also looking into a different approach to my need: making a template repo on github and syncing that to the "child" repo's via Github Actions, like this: https://github.com/marketplace/actions/actions-template-sync

This way would give me more flexibility in terms of editing components on a per-project basis. If I land on this solution, than the first class Astro support for Bookshop would be even better.

If there's something I can help you guys with in term of this Astro support, please let me know!

[bglw]

Hey Sil 👋

The first cut of Astro support is out in 3.6.0, though at launch it only covers Astro and JSX files. I'll leave this issue open as a reference to supporting Svelte-in-Astro specifically 🙂