Astro bookshop:live with components in subdirectory

[oliverlynch]

Hello, for the sites that I'm building I am trying to use git submodules to share components between projects. This places my component files and layouts in a subdirectory within the src directory e.g. src/mws-astro/components. The bookshop config directory is inside the subdirectory adjacent to the components. I am running into an issue where bookshop doesn't recognise the bookshop:live directive within the page layout and so doesn't add the comments for live editing, or any of the databindings for the components.

The component browser still seems to work fine, and bookshop seems to be finding the component files.

I've forked the sendit-astro-template repository as an example, and although it uses an older version of astro & bookshop I can reproduce the issue on the latest version. Files in standard places Files in subdirectory

Both versions build correctly (npm run bookshopbuild), however when the files are in a subdirectory bookshop reports No live editing connected as no pages contained Bookshop components and does not add live editing bindings to the site.

This could just be a configuration issue on my end but I couldn't figure out what I need to change. I tried creating an npm package instead of using submodules but I ran into many other issues and edge cases with resolving paths. I would be interested if there is any advice or other method of managing bookshop components between multiple sites.

[Tate-CC]

Hi @oliverlynch 👋

The problem here is that the Astro Bookshop plugin, uses Astro's conventional file structure to make some assumptions on how certain files should be processed. This means that the src/components and src/layouts directories are "special" for the purposes of building live rendering into your site.

I'll have a look to see if we can safely relax those assumptions so that any nested components or layouts directory nested in src are processed the same as those at the root. But in the meantime you could work around this issue by either

• Nesting your submodule's components and layouts directories inside a src directory of it's own. So for example, your submodule would now look like src/mws-astro/src/components.
• Or, you could nest the entire submodule within your top level components directory. Which would look like src/components/mws-astro.

As for sharing Bookshop components between multiple sites, I think our approach is generally the same as yours. Typically we'll package the component library and then install that as a dependency on the sites that want to use those components. In the case of Astro, so long as your package contains a bookshop directory and the special src/components and src/layouts directories it should be picked up by the build process.

[oliverlynch]

The first work-around worked perfectly, live editing is working again. Thanks for the help 👍