sitez

elementz

The element layer: one @name.html file, read into its parts, rendered at build time and run in the browser (elementz.md). Nothing here imports the rest of Sitez, so the folder can become a package of its own once a second host, such as Pagez, wants it. Sitez is its host, and gives it modules through Vite and data from data/.

The package builds index.ts with its types (dist/elementz/).

  • index.ts is the sitez import, html, which only build code imports. An element's browser <script> imports nothing from Sitez.

The host imports the rest.

  • file.ts reads an element file into its parts, checks it, and writes each part as a module.
  • style.ts checks that an element's CSS starts with its tag.
  • elements.ts renders the elements in a piece of HTML, inside-out, each in its tag and with its content in its slot.
  • html.ts is the template value that html makes, and render.ts turns it into HTML.
  • markup.ts finds the tags in a piece of HTML, for the element file, the host's frame and an element's output.
  • runtime.ts is define, all of elementz that reaches the browser.
  • errors.ts is a mistake in a file, which names it.

Code

  • elements.test.ts

    What an element does in a frame and in another element's output, which is what it does in text. Elements render innermost first, their content goes in their slot or its fallback shows, and what an element writes is read for elements too. Each failure names the file that wrote the tag. The host here imports each template module from a data URL, where Sitez loads it through Vite.

  • elements.ts

    An element is the same everywhere (rule 5). One in text, in the host's frame or in another element's output renders the same way. This file renders the last two, and a host's text calls renderElement for each element its Markz wrote.

  • errors.ts

    A mistake in the site, as opposed to a bug in Sitez. Every failure a user can cause is one of these, and it names the file and says what to change. elementz throws it for an element file, and Sitez re-exports it as SiteError for every other file (src/errors.ts).

  • file.test.ts

    An element file read into its parts, each part as a module on the file's own lines, and every check that needs only the file, each failing with the line.

  • file.ts

    @name.html, read into its parts: a <template> the build writes, with an optional <script> first in it, a top-level <style> that ships, and a top-level <script> that runs in the browser (elementz.md). Where a part sits says when it runs.

  • html.ts

    What html makes. It records its strings and values and renders nothing, and render.ts turns it into a string. html exists only at build time, and an element's browser <script> that imports it fails.

  • index.ts

    What an element's template script or a module imports at build time. html records a template for the build's renderer. It is the package's one name. An element's browser <script> imports nothing from here, since it works on the page's DOM (rule 6), and the build fails one that tries.

  • markup.test.ts

    Where the tags are, with their attributes, and what isn't a tag: a comment, text in a script, a < in a value. Offsets let a caller replace a value without rewriting the rest.

  • markup.ts

    Where the tags are in a piece of HTML, with their attributes. HTML is read in three places, which are the host's frame (Sitez's code/index.html), an element file and an element's output. It isn't an HTML parser and checks no nesting. It finds each start and end tag the way the HTML tokenizer would, so a < in a comment, in an attribute's value, or in a <script>, <style>, <textarea> or <title> is text. Everything else, such as which elements close which, is the browser's.

  • render.test.ts

    One row for each place a value can go, with what the build writes there, then the templates the build refuses. A rule in elementz.md's html section has its case here. The tables are left unformatted, since oxfmt would reflow the HTML inside them, and each row is exact.

  • render.ts

    Turns a template value into an HTML string. Each place a value can go means what the HTML tokenizer makes of it there. The rules are in elementz.md, and render.test.ts holds a case for each.

  • runtime.test.ts

    define in happy-dom: setup runs once per connection with a fresh signal, and a disconnect aborts it and calls the cleanup setup returned. The source the host writes into its script (String(define)) defines elements too.

  • runtime.ts

    All of elementz that reaches the browser: define, which makes an element's setup a custom element (elementz.md). Each connection gets a fresh AbortController. A disconnect aborts its signal and calls the cleanup setup returned, so a listener given the signal goes with the element. A reconnect runs setup again.

  • style.ts

    Every top-level selector in an element's <style> starts with its tag, so its CSS can't reach the rest of the page by accident (elementz.md). Rules inside @media, @supports, @container, @layer and @scope are at the top too, and are checked. Other at-rules, such as @keyframes and @font-face, hold no selectors for the page and are left alone. A selector nested inside a rule is the rule's, so it's never checked.