CloudCannon/bookshop

Support svelte components in Bookshop Astro

Opened this issue · 4 comments

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!

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 commented

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!

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 commented

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 🙂