JavaScript
JavaScript runs in two places on Pagelove, and this section is split to match:
- Client — the
pagelove.mjsbrowser library: schemas, templates, two-way data binding, declarative commands, web components, and real-time mutation streaming, so you can build complete apps with minimal application JavaScript. - Server — JavaScript that runs inside
dombase-jsduring composition and validation: schema bindings (default/@read/@write/@validate) and the DOM API those bindings use to traverse and build markup.
The rest of this page is the client library. For the server side, see Server-side JavaScript below.
Loading the library (client)
Most pages need only two script tags:
<script type="module" src="https://pagelove.github.io/beta-js/pagelove/sse.mjs"></script>
<script type="module" src="https://pagelove.github.io/beta-js/pagelove.mjs"></script>Loading pagelove.mjs auto-instantiates a Pagelove instance bound to <main> when the page has one, so most pages need no application JavaScript. See The Pagelove class for auto-start details and how to construct instances explicitly.
The five files
| File | Purpose |
|---|---|
pagelove.mjs |
Main entry point. Discovers schema instances and templates in HTML, renders views, binds changes bidirectionally, and routes declarative commands. |
pagelove/component.mjs |
Base class for custom elements. Provides PageloveComponent, default binders, mixin registry, and built-in Draggable/Resizable/Stackable mixins. |
pagelove/primitives.mjs |
Low-level HTTP client. PLDocument and PLElement handle range-addressed requests and selector generation. Used internally by pagelove.mjs. |
pagelove/sse.mjs |
Server-Sent Events mutation streamer. Opens an event stream on import and feeds mutations into the view. |
pagelove/debug.mjs |
Bitwise debug channels for module-level logging. Gated by a bitmask applied at import time. |
What's documented on each page
HTML patterns you write:
- Schema instances in HTML — the
<article itemscope itemtype id>shape. - Schema definitions in HTML — declaring schemas with properties, inheritance, and client-side defaults.
- HTML bindings —
data-bind,data-bind-attr, anddata-bind-<htmlattr>. - Declarative commands —
--create-instanceand--remove-instancebuttons. - Web Components — auto-defined custom elements and the mixin registry.
JavaScript API:
- The Pagelove class — constructor config, public methods, the auto-start behavior.
Real-time:
- Server-Sent Events — live mutation streaming.
Lower layer:
- Primitives — the low-level HTTP client. Most apps don't touch it directly.
Utility:
- Debug channels — bitwise debug mask and gated logging.
Server-side JavaScript
The same language authors server-side schema logic, evaluated by dombase-js during composition and validation:
- JavaScript in schemas — ES modules in a property's
default,@read,@write, or@validateslot (the JavaScript peer of Sessel resolvers). - JavaScript DOM API — the WHATWG-style DOM subset (
document,querySelector,createElement,classList, …) those bindings use to read and build markup.
Composition-time JavaScript expression bindings (j: attributes) also run server-side; they live with the other page-composition bindings under Composing pages.