# Runtime

## Why the starter looks like this

The **live file** runs strict, inside a block, deferred. A preview adds the draft to `<head>`
later, at the top level, not strict. seamble.com runs the live file in a mount with
`data-demo` and no Squarespace page. The IIFE, `"use strict"`, the `readyState` check, the
`:not([data-sb-state])` guard (the script can run twice on one page) and try/catch per mount
make all of these behave the same. Code outside that shape can work in a preview and break
live, or the reverse.

## Find mounts by id

Warning `no-mount`: the JS never mentions `data-seamble-id` or the component id. The mount is
the only element that is reliably yours; a class, name or position breaks when two
components of one kind share a page.

## One classic script

Warning `module-syntax`: the JS has `import` or `export` statements. They, a top-level
`return`, TypeScript and JSX are syntax errors, which stop the whole live file, Seamble's
loader included: the component vanishes, the page stops reporting to Seamble, and its preview
links stop loading. A syntax error in a draft only breaks the draft.

## Render into the mount

Warning `document-write`: the JS calls `document.write`. The script runs after the page is
parsed, where `document.write` is ignored during load and replaces the whole page afterwards.

## Settings

Constants in the JS are the settings: you change them, and the owner never re-pastes.

Use a `data-*` attribute on the mount only when two mounts of one component need different
values. The owner has to type it into the Code Block, so always fall back to the constant:

```js
const end = new Date(el.dataset.date || DATE); // <div data-seamble-id="…" data-date="…">
```

Read any children the owner put in the mount before replacing them.

## Libraries

Write it yourself when you can. Otherwise load a UMD build, pinned to an exact version, with
`integrity`, once per page, and show a fallback if it fails:

```js
function loadScript(src, integrity) {
  const all = (window.__sbScripts ||= {});
  return (all[src] ||= new Promise((ok, fail) => {
    const s = Object.assign(document.createElement("script"), { src, onload: ok });
    if (integrity) Object.assign(s, { integrity, crossOrigin: "anonymous" });
    s.onerror = () => fail(new Error(`could not load ${src}`));
    document.head.append(s);
  }));
}
```