Slim document object model based on the DOM & CSSOM.
npm install slim-domSlim 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
``typescript
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
`typescript
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
`typescript`
type VMObject = {
source: VMObjectSource;
type: string;
};
##### Node
`typescript`
type Node = {
} & VMObjct;
##### ParentNode
`typescript`
type ParentNode = {
childNodes: Node[]
} & Node;
##### Element
`typescript
type Attribute = {
key: string;
value?: string;
} & VMObject;
type Element = {
shadow?: ParentNode;
attributes: Attribute[];
} & ParentNode;
`
##### Document
Shape:
`typescript`
type Document = {
} & Element;
#### StyleSheet
`typescript`
type StyleSheet = {
rules: StyleRule[]
};
#### StyleRule
`typescript
type StyleRule = {
}
`
#### MediaRule
TODO
#### UnknownRule
TODO
####
#### API
##### querySelector(element, query);
##### querySelectorAll(element, query);
##### getStyleSheets(element)
##### getElementSlots(element)
#### Reversed tag names
##### slot
##### style`