allLayouts

Description

The allLayouts variable is a default prop loaded by the Plenti generator automatically. It holds class constructors for every svelte template on your site. This is allows you to dynamically load any component without having to import it explicitly or worry about SSR issues when generating HTML fallbacks.

Understanding Component Signatures

Each entry in allLayouts is saved as a "component signature" to ensure uniqueness. The component signature for a template is simply its path with any forward slashes "/" or periods "." converted into underscores "_". For example layouts/components/grid.svelte would become layouts_components_grid_svelte. The signatures are absolute, not relative, so they should always start with "layouts" and end with "svelte".

Accessing templates in allLayouts

To access a particular template in the allLayouts object, use the component signature with either dot notation (e.g. allLayouts.layouts_components_grid_svelte or bracket notationallLayouts["layouts_components_grid_svelte"]. It's common to use variables provided from your JSON data source to target a particular component, so you'd use bracket notation for that: allLayouts[someVariable] (where "someVariable" is equal to a component signature).

Dynamic components

Svelte has dynamic components that allows you to load templates without explicitly importing them. Combine this with the allLayouts magic prop and you can have a content driven component architecture where you can add/remove/rearrange components without touching your Svelte templates and it will have complete SSR builds so you still get HTML fallbacks for every component.

Given a content source that looks like this:

{
  "components": [
    {"name": "ball"},
    {"name": "block"}
  ]
}
You could dynamically load the components like this: