@aller/svelte-components

We need a project that can host our svelte components. We would like to server side render the components, and this is mostly just testing what the best approach to doing that would be

Run

• yarn
• yarn dev
• localhost:3000/render/example

Overview

So far this works by making webpack create three different bundles. One for the server, one for modern browsers and one for legacy browsers.

• The server bundle is used to server side render the svelte component. The bundle is created by targeting the main .svelte file directly
• The modern and legacy bundle are used clientside. These bundles are created by targeting each components main .js file. The legacy bundle is transpiled and polyfilled to support IE11

The server will respond with styled markup and a script tag that will download the bundle. Once the bundle is downloaded, the component will hydrate and become interactive

Structure

As a result of the pattern above, each svelte components needs to be placed within it's own folder in /src. The components folder should contain a .svelte and .js file with the same name as the component folder. The .js file's target also needs to inlude the name of the component target: document.getElementById("svelte-app-NAME_OF_COMPONENT"). Copy /src/example for a starting point

IE11 Support

We create two differende bundles for the client because we would like to avoid serving a heavily transpiled and polyfilled bundle to browser's that does not need it. We include the modern bundle with a script type="module" tag and the legacy bundle with a script nomodule tag. Modern browsers that support ES2015+ will download the modern bundle and ignore the legacy bundle. Legacy browsers that does not support type="module" will download and execute the legacy bundle. Some might download the modern bundle as well, but not execute it. More information about this approach