Standalone Counter Example

Components can be mounted to a DOM node on a separately rendered html page using JavaScript, even if the page was not initially rendered by Sprocket.

For example:

import { connect } from 'sprocket-js';

window.addEventListener('DOMContentLoaded', () => {
  const csrfToken = document
    .querySelector('meta[name=csrf-token]')
    ?.getAttribute('content');

  if (csrfToken) {
    connect('/counter/connect', {
      csrfToken,
      targetEl: document.getElementById('counter') as Element,
      initialProps: { initial: '100' },
    });
  } else {
    console.error('Missing CSRF token');
  }
});
        

This example is being rendered by a Gleam webserver and therefore it can do a first-paint render of a counter component on the server, and then mount the component to the DOM node on the client.

100

But it could also be rendered solely using JavaScript on the client without a first-paint using any other webserver or static file server.

If you reload the page, you'll notice the second counter above is not rendered until the JavaScript has loaded which means there is a delay before the counter appears. If your webserver is written in Gleam you can avoid this delay by doing a first-paint render of the component on the server, but it is not required.

Return to Docs