pagez

elements

The element layer: one @name.html file, read into its parts, rendered at build time and run in the browser (elements.md). Nothing here imports the rest of Pagez. Its tests are in tests/elements/.

  • 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. The package's entry, src/index.ts, exports 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 the elements' code that reaches the browser.
  • errors.ts is a mistake in a file, which names it.

Code

  • 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 a page, a frame or an element file, as opposed to a bug in Pagez. Every failure a user can cause is one of these, and it names the file and says what to change.

  • 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 (elements.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.

  • 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 (a frame.html), an element file and an element's output.

  • 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 elements.md, and render.test.ts holds a case for each.

  • runtime.ts

    All of the elements' code that reaches the browser: define, which makes an element's setup a custom element (elements.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 (elements.md).