Store a custom site for every user ( dynamic content ) Svelte

Question

I'm building an e-commerce marketplace with Firebase and Svelte where every user can create their store. Not every store will look the same. The users will structure their site using pre-made components and behind the scenes, it might look something like this:

<Header logo="" name"".../>
<FAQ questions=.../>
<ProductList .../>
<ContactForm .../>
<Footer .../>

or like:

<Header logo="" name"".../>
<Video link="".../>
<ProductList .../>
<MailingList .../>
<Footer .../>

And yes, I know about <svelte:component this={...}/> for dynamic components.

But how should I store the sites? Should I just keep the full ".svelte" file in a field of the store's document in the database, then on the client side just create every component with the technique I talked about above? This seems pretty inefficient and heavy in the long run. What's the standard way of doing it?

Thanks.

Answer 1

I would probably store the structure as JSON to decouple it from the implementation, e.g.

[
  { type: "header", name: "Maru Store" },
  { type: "video", link: "..." },
  { type: "product-list" },
  { type: "mailing-list" },
  { type: "footer" }
]

(Quite possibly with additional containers for layout purposes, e.g. vertical/horizontal/grid.)

Then a generic component can resolve this.

{#if descriptor.type == 'header'}
  <Header name={descriptor.name} />
{:else if ...}
  ...
{/if}

If e.g. a layout container is found, {#each} can be used with <svelte:self> for recursion.

This should not be that impactful for a few components. The DB query result can also be cached to prevent round trips.