DEV Community: Etienne

Svelte x 11ty

Etienne — Fri, 13 Nov 2020 21:58:37 +0000

tldr

repo: https://github.com/gobeli/11ty-svelte
demo: https://gobeli.github.io/11ty-svelte (have a look at the network tab and see the prerendered markup)

Intro

Back in June I wrote a post about prerendering svelte components. You can check it out here. The article gives a basic overview of how you would go about prerendering a svelte app. The approach used is not really sophisticated and integrated easily with existing sites / static site generators (SSGs).

Recently I have become quite fond of eleventy and have used it for some projects, that is why I would like to expand on the previous post by giving an example of integrating svelte prerendering in an 11ty website.

Why though?

Static websites and SSGs are awesome, but often times parts of our websites are dynamic and need a bit of JavaScript. Svelte is great at integrating into an existing site and does not require the whole app to be written in it. For SEO and performance purposes, it's a good idea to prerender the dynamic parts of your website and not just build them at runtime in the browser.

Let's get into it

Overview

We will be writing our 11ty website with the Nunjucks templating language and leveraging shortcodes and other eleventy features to create our demo site.

Furthermore we will use rollup to generate the code for the prerendering as well as the client side bundle.

Creating the Site

The site we will create is pretty basic, there will be a single index.html and one svelte component which will be included in the index page.

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    <main>
      <h1>Svelte x 11ty</h1>
      {% svelte "Test.svelte" %}
    </main>
    <script async defer src="scripts/index.js"></script>
  </body>
</html>

I have already added a svelte shortcode in here, which is not yet defined as well as a script which we also need to implement.

The Svelte Component

Our svelte component is quite simple, it takes a name and makes it editable via an input:

<script>
  export let name = 'Etienne';
</script>
<input type="text" bind:value={name}> My name is {name}

Shortcode for Prerendering

Shortcodes can be used to create reusable content within an eleventy site. This is perfect for reusable svelte components. The shortcode will take the name of a svelte file as well as optional props for the component. It will then create an SSR bundle of the component and immediately invoke it to return the static html.

First let's create a function to render the component out as html. The components markup itself is not enough since the client side bundle needs to have a root which it can use to hydrate the component. We also make sure, that the static props are passed down to the template via a data-attribute:

function renderComponent(component, filename, props) {
  return `
    <div class="svelte--${filename}" data-props='${JSON.stringify(props || {})}'>
      ${component.render(props).html}
    </div>
  `
}

Next, let's create the actual shortcode used within the index.html:

const path = require('path')
const rollup = require('rollup');
const svelte = require('rollup-plugin-svelte');

module.exports = async function svelteShortcode(filename, props) {
  // find the component which is requested
  const input = path.join(process.cwd(), 'src', 'content', 'scripts', 'components', filename);

  // create the rollup ssr build
  const build = await rollup
      .rollup({
        input,
        plugins: [
          svelte({
            generate: 'ssr',
            hydratable: true,
            css: false,
          }),
        ],
        external: [/^svelte/],
      });

  // generate the bundle
  const { output: [ main ] } = await build.generate({
    format: 'cjs',
    exports: 'named',
  })

  if (main.facadeModuleId) {
    const Component = requireFromString(main.code, main.facadeModuleId).default;
    return renderComponent(Component, filename, props);
  }
}

The requireFromString function is used to immediately require the rollup generated code from memory. (See https://stackoverflow.com/questions/17581830/load-node-js-module-from-string-in-memory).

Make sure to add the shortcode in your .eleventyconfig.js as an NunjucksAsyncShortcode: config.addNunjucksAsyncShortcode('svelte', svelte);

Now, if we run npx eleventy we can already see how the component is rendered into the final output:

<div class="svelte--Test.svelte" data-props='{}'>
  <input type="text" value="Etienne"> My name is Etienne
</div>

To see the props in action just add your own name as the second parameter of the shortcode in the index.html, like this: {% svelte "Test.svelte", { name: 'not Etienne' } %} and the output will be:

<div class="svelte--Test.svelte" data-props='{"name":"not Etienne"}'>
  <input type="text" value="not Etienne"> My name is not Etienne
</div>

Hydrate

So far so good, but half of the fun of svelte is it's dynamic capabilities within the browser, so let's make sure we can hydrate the markup which we already have.

To do that we will first create an entry point for the client side code. Let's create a new JS file and within it a function which gets the wrapper around the svelte components by their class and hydrates them:

function registerComponent (component, name) {
document.querySelectorAll(`.${CSS.escape(name)}`).forEach($el => {
    // parse the props given from the dataset
    const props = JSON.parse($el.dataset.props);
    new component({
      target: $el,
      props,
      hydrate: true
    })
  })
}

The CSS.escape is needed, because we have a . in our class name.

To register a component just use the function and pass the css class to it:

import Test from './components/Test.svelte';

registerComponent(Test, 'svelte--Test.svelte');

Awesome, only one more step to go: We need to compile the client side code for it to run in the browser. To do that, let's create a new eleventy JavaScript page, it's not going to be an actual html page but a JavaScript bundle.

Within the page similarly to the shortcode we will create a rollup bundle, but this time, it will be compiled for client side use and return the JS code and not the rendered html:

const rollup = require('rollup');
const svelte = require('rollup-plugin-svelte');
const nodeResolve = require('@rollup/plugin-node-resolve');
const path = require('path')


module.exports = class Scripts {
  data () {
    return {
      permalink: '/scripts/index.js',
      eleventyExcludeFromCollections: true,
    }
  }

  async render () {
    const build = await rollup.rollup({
      input: path.join(process.cwd(), 'src', 'content', 'scripts', 'index.js'),
      plugins: [
        svelte({
          hydratable: true,
        }),
        nodeResolve.default({
          browser: true,
          dedupe: ['svelte'],
        }),
      ]
    });

    const { output: [ main ] } = await build.generate({
      format: 'iife',
    });

    if (main.facadeModuleId) {
      return main.code;
    }
  }
}

Et voila, your component is hydrated and the app is fully functional.

Next steps

Here are some ideas to expand on this simple prototype:

Use terser to minify the client side bundle in production
Handle css used within the svelte component
Handle content which is written into the head from the components
Make the directory of your svelte component configurable

Photo by Sigmund on Unsplash

Svelte Prerendering

Etienne — Tue, 02 Jun 2020 14:24:11 +0000

tldr (repo)

https://github.com/gobeli/svelte-prerender

Why Prerendering?

Prerendering is a process in which an application (usually a SPA or otherwise statically generated site) is rendered as HTML during build time. The static HTML is then shipped to the user along with JavaScript to "hydrate" the HTML. Hydrate meaning attaching itself to the DOM elements which are already there.

This is done in production builds, mainly for SEO and performance purposes.

Prerendering with Svelte

The svelte compiler is able to output code which can be used for ssr (server side rendering), the same output is useful for prerendering. Instead of creating a web server and using the ssr output there, we can create a script to evaluate the ssr code to HTML during build-time. This script can look something like this:

import { existsSync, promises as fs } from 'fs'
import { join } from 'path'

import App from '../src/app/App.svelte'

async function main() {
  const templatePath = join(process.cwd(), 'src', 'index.template')
  const publicPath = join(process.cwd(), 'public')

  const template = await fs.readFile(templatePath)
  const app = App.render()

  if (!existsSync(publicPath)) {
    await fs.mkdir(publicPath)
  }

  await fs.writeFile(
    join(publicPath, 'index.html'),
    template.toString().replace('%svelte.head%', app.head).replace('%svelte.html%', app.html)
  )
}

main()

A few things are still required for this to work:

A bundler to ensure we can import .svelte files in our node script
A HTML template to render the App into

Bundling the prerender-script

To bundle the prerender-script we are using rollup. We don't really need the output of the bundling process but would like to run the output immediately, that's why we are using the @rollup/plugin-run to execute the bundle.

import run from '@rollup/plugin-run'
import svelte from 'rollup-plugin-svelte'

export default {
  input: 'bin/prerender.js',
  output: {
    format: 'cjs',
    file: 'bin/dist/prerender.js',
  },
  plugins: [
    svelte({
      dev: false,
      generate: 'ssr',
      hydratable: true,
      css: function (css) {
        css.write('public/_dist_/main.css')
      },
    }),
    run(),
  ],
}

Notice, that we are using the svelte compiler option "generate" to ensure we generate ssr code.

HTML template

The HTML template is pretty simple, it provides a skeleton with placeholders for the prerendered app:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>A Prerendered Svelte App</title>
    <link rel="stylesheet" href="/_dist_/main.css" />
    %svelte.head%
  </head>
  <body>
    <div id="app">
      %svelte.html%
    </div>
    <script type="module" src="/_dist_/client.js"></script>
  </body>
</html>

Prerendered app

If we run the script a index.html file is created with the prerendered app:

...
    <div id="app">
      <div class="svelte-tzjjzo"><h1>A Svelte App</h1></div>
    </div>
...

Client side bundling

In this example the client side bundling is done with snowpack/parcel. It is important to use the hydratable svelte compiler option for the build of the client code, since we want the client code to hydrate the HTML and not overwrite it. Furthermore we can safely disable the css option, since we are writing the css out during prerendering:

["@snowpack/plugin-svelte", { "hydratable": true, "css": false }]

Photo by Daniel McCullough on Unsplash

Random Transforms Using CSS Variables

Etienne — Tue, 12 May 2020 12:50:20 +0000

CSS variables are fun! They can be used in many different ways, one thing which they are widely used for, is theming. Enabling themes which can be switched back and forth became a whole lot easier with them (as seen on this site ;). I have also published a JS utility, which you can check out here, for this purpose.

But there are even more use cases. We will have a look at using CSS variables deeper down the DOM tree, to transform pseudo elements randomly. Full disclosure I found out about this by looking into how Wes Bos styles the links on his website :D.

Pseudo Elements

We will specifically focus on the :before and :after pseudo elements, which are often used to style an element in ways which are not possible with just one element. Let's assume we have a heading which is also a link to another page (as seen on many blogs). We can give the heading a neat looking border using pseudo elements:



.heading::before {
  content: '';
  background-color: #c1dfc4;
  height: 5px;
  width: 100%;
  position: absolute;
  bottom: 5px;
  left: 0;
  z-index: -1;
  transition: all 0.2s ease-in;
  transform: rotate(-3deg) skewX(-20deg);
}

.heading:hover::before {
  transform: none;
}

Which could look like this:

CSS Variables

Using CSS variables we can not only set variables at the root of our page but deeper down the DOM tree. We could for instance set variables on the heading class:



.heading {
  --rotation: -3deg;
  --skew: -20deg;
}

And then use those variables inside the before pseudo element:



transform: rotate(var(--rotation)) skewX(var(--skew));

Random Transforms

If we put all of this inside a reusable component, in our example using Svelte, we can randomly generate the transforms used on the heading (the following component is abbreviated):



<script>
  const rand = (min, max) => Math.floor(Math.random() * (max - min)) + min
  const style = `
    --rotation: -${rand(1, 5)}deg;
    --skew: -${rand(10, 25)}deg;
  `
  export let href
</script>
<a {href} {style}>
  <slot></slot>
</a>

To see it live in action have a look at this REPL.

Svelte Lazy Image

Etienne — Sat, 09 May 2020 09:01:48 +0000

I recently decided to lazy load images on a Sapper powered website to optimize the initial loading time. I did this by using a placeholder URL and as soon as the image is visible to the user, replacing this placeholder URL with the real deal. Similar to the gatsby-image-approach (obviously not as sophisticated). Let me take you through the process :)

1. Detect when the image is visible

The first step is to make sure we can detect when an element (in our case an img) is first visible to the user. This can be achieved with the Intersection Observer API. This API is really useful to detect intersections between an element and its ancestor or in our case the top-level viewport.

To prevent instantiating a new IntersectionObserver for each image we will write an intersection service. To do that, let's define a variable in which the observer will be saved and a Map which we will use to keep track of all the elements in the observer:

let observer
const elements = new Map()

Next we make sure this same IntersectionObserver is always used:

const getObserver = () => {
  if (!observer) {
    observer = initObserver()
  }
  return observer
}

The initObserver function is referenced in the previous snippet, but not yet implemented, let's do that:

const initObserver = () => {
  return new IntersectionObserver((entries, observer) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const lazy = entry.target
        observer.unobserve(lazy)
        if (elements.has(lazy)) {
          elements.get(lazy)()
          elements.delete(lazy)
        }
      }
    })
  })
}

The new observer watches intersections with each of it's targets which we will add soon. As soon as an intersection is detected (entry.isIntersecting) we don't need to observe the element anymore, since the real image URL is loaded. Then if we find the element in our map tracking the elements (which we normally should) we call the function saved in the map and delete the entry, since we don't use it anymore.

To observe an element we use the only function exported from this service: observe:

export const observe = (element) => {
  const obs = getObserver()
  return new Promise((resolve) => {
    elements.set(element, resolve)
    obs.observe(element)
  })
}

The observe function returns a promise which is resolved as soon as the element is intersecting with the viewport (is visible).

2. Svelte Component

The next step is to implement a svelte component using this service to replace a placeholder URL with the real source. This is fairly simple:

<script>
  import { onMount } from 'svelte'
  import { observe } from './intersection.service'

  let image, source

  onMount(async () => {
    source = placeholder
    await observe(image)
    source = src
  })

  export let src, placeholder, alt
</script>

<img src={source} {alt} bind:this={image} {...$$restProps} />

On mounting we set the image source to the placeholder and as soon as the image is visible we swap the sources. The ...$$restProps is there to make sure, things like styles and other attributes get applied to the img.

3. Use it

The final usage is pretty simple:

<Image
    alt="clouds"
    style="width: 100%"
    src="https://images.unsplash.com/photo-1587476821668-7e1391103e49?w=1600"
    placeholder="https://images.unsplash.com/photo-1587476821668-7e1391103e49?w=16" />

4. Next steps

To make sure this can be used in all browsers you are supporting you might need to add an intersection observer polyfill
Furthermore we could optimize this approach by automatically compress images during bundling and using them as the placeholders.