You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The connection between how Fractal conceives of templates and how Svelte thinks
of the world in components has some small friction for which this library
provides some workarounds.
Context data & properties
Context data from the styleguide is passed to components as properties.
For static generation, knowing the root path is important for generating links
to assets properly.
As we can't use a handlebars helper such as {{ path "filename" }}, a similar
tool is injected into the Svelte context. To use it, fetch it from the context:
Assuming you've configured public/ as your static assets path with
fractal.web.set("static.path", __dirname + "/public");, this will link to the
asset in public/assets/some-image.png.
Layout Template & Generated HTML
The overall HTML output is wrapped in an <html> element with an html5 doctype.
Layouts are handled as svelte components, which provide a <body>:
layout.svelte:
<script>
importSomeComponentfrom"./some-component.svelte";import { getContext } from"svelte";const { assetPath } =getContext("fractal");
</script>
<svelte:head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<linkrel="stylesheet"href={assetPath("/css/app.css")} />
<scriptdefertype="module"src={assetPath("/js/app.js")}></script>
<title>Preview</title>
</svelte:head>
<body>
<SomeComponent />
<p>Lorem ipsum dolor sit amet miss Bacon sic amundiam</p>
<slot />
<p>Lorem ipsum dolor sit amet miss Bacon sic amundiam</p>
</body>
The component being previewed is inserted into the default slot in the component.
About
An adapter for fractal styleguide (1.x) to use svelte templates
