Slim document object model based on the DOM & CSSOM.

Goals

• Subset of the DOM, but without mutability
• Should be runnable over a network (web workers, AWS lambda, Node)
• POJO data types
• Ability to target other rendering engines (Canvas, Browserstack)

Basic example

const * as sdvm from "sdvm";
const * as pc from "paperclip";

// document is a POJO object. VM provided by language libraries
const document = await pc.loadVMDocument("./entry.pc");

const mount = document.createElement("div");
let renderResult = sdvm.renderers.dom.render(document, mount);

// later on...
const document2 = await pc.loadVMDocument("./entry.pc");

const diffs = sdvm.diffDocument(document, document2);
let renderResult = sdvm.renderers.dom.patch(diffs, mount);

const computedInfo = sdvm.renderers.dom.computeInfo(renderResult); // { rects: {}, computedStyles: {} }

const elementRect = getClientRect(element.hash, computedInfo);

Types

VMSource

type Position = {
  line: number;
  character: number;
  offset: number;
};

type Range = {
  start: Position;
  end: Position;
};

type VMObjectSource = {
  uri: string; // source file of object source
  kind: any; // kind of source object - usually expression type
  range: Range; // where the object is in the source file
};

VMObject

type VMObject = {
  source: VMObjectSource;
  type: string;
};

Node

type Node = {
} & VMObjct;

ParentNode

type ParentNode = {
  childNodes: Node[]
} & Node;

Element

type Attribute = {
  key: string;
  value?: string;
} & VMObject;

type Element = {
  shadow?: ParentNode;
  attributes: Attribute[];
} & ParentNode;

Document

Shape:

type Document =  {
  
} & Element;

StyleSheet

type StyleSheet = {
  rules: StyleRule[]
};

StyleRule

type StyleRule = {

}

MediaRule

TODO

UnknownRule

TODO

API

querySelector(element, query);

querySelectorAll(element, query);

getStyleSheets(element)

getElementSlots(element)

Reversed tag names

slot

style