@jxsuite/schema

JSON Schema 2020-12 meta-schema generator for Jx documents.

Overview

@jxsuite/schema generates three validator schemas that cover every Jx source file type. The component schema is derived at generation time from web standards data, ensuring it stays current with browser capabilities.

Installation

bun add @jxsuite/schema

Generated schemas

| File | $id | Validates | | --------------------- | --------------------------------------- | ------------------------------- | | schema.json | https://jxsuite.com/schema/v1 | Components, pages, and layouts | | project-schema.json | https://jxsuite.com/schema/project/v1 | project.json config files | | class-schema.json | https://jxsuite.com/schema/class/v1 | .class.json class definitions |

Regenerating schemas

bun run schema

This re-fetches the latest @webref/css, @webref/elements, and @webref/idl data and writes all three files.

API

import {
  generateSchema,
  generateProjectSchema,
  generateClassSchema,
  validateDocument,
} from "@jxsuite/schema";

const schema = await generateSchema(); // component meta-schema object
const valid = await validateDocument(doc); // validate a Jx document

Documents as data

Two subpaths let any host edit and write a Jx document the way Studio does, with no DOM, no reactive store and no yjs:

• @jxsuite/schema/doc-ops is the document-op vocabulary. A JxDocOp (set-key, insert-child, remove-child, set-child, move-child) is a value-carrying mutation addressed by JxPath. applyDocOpToDoc(doc, op) applies one to a plain tree; inverseOf(doc, op) computes the op that undoes it, against the document as it stands before the op, in the coordinates of the document after it; applyDocOpsWithInverse(doc, ops) applies a sequence and answers each forward/inverse pair. Studio's history, the canvas iframe's shadow document and the collab bridge all replay through this one implementation, and @jxsuite/collab/ops re-exports it. Undoing an insert or move into a node that had no children leaves children: [] behind, as Studio's history always has.
• @jxsuite/schema/json-layout is the layout-preserving JSON serializer behind every save. parseJsonDocument(text) answers the document and the facts about its text the formatter keeps; serializeJson(document, layout) writes it back with those honoured, so a one-value edit is a one-line diff.

Component schema coverage

• tagName: all standard HTML element names from @webref/elements
• Element properties: all DOM IDL properties from @webref/idl
• style: all CSSOM camelCase properties from @webref/css
• Event handlers: all EventHandler names (onclick, oninput, …)
• state shapes: naked value, typed value, computed, function, external class
• Built-in $prototype values: Request, LocalStorage, SessionStorage, Cookie, IndexedDB, Array, Set, Map, Blob, ReadableStream, URLSearchParams, FormData

VSCode / editor integration

Add the $schema field to any Jx file to get autocomplete and validation in any JSON Schema-aware editor:

{ "$schema": "https://jxsuite.com/schema/v1" }

Dependencies

| Package | Purpose | | ------------------ | ----------------------------- | | @webref/css | CSS property definitions | | @webref/elements | HTML element definitions | | @webref/idl | Web IDL interface definitions |

License

MIT