mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[REF] initial prototype of owl 2
This commit is contained in:
Géry Debongnie
committed by
Aaron Bohy
Aaron Bohy
parent
c06049076a
commit
e746574a1d
@@ -0,0 +1,155 @@
|
||||
import type { Setter } from "./block_compiler";
|
||||
|
||||
const { setAttribute, removeAttribute } = Element.prototype;
|
||||
const tokenList = DOMTokenList.prototype;
|
||||
const tokenListAdd = tokenList.add;
|
||||
const tokenListRemove = tokenList.remove;
|
||||
const isArray = Array.isArray;
|
||||
const { split, trim } = String.prototype;
|
||||
const wordRegexp = /\s+/;
|
||||
|
||||
/**
|
||||
* We regroup here all code related to updating attributes in a very loose sense:
|
||||
* attributes, properties and classs are all managed by the functions in this
|
||||
* file.
|
||||
*/
|
||||
|
||||
export function createAttrUpdater(attr: string): Setter<HTMLElement> {
|
||||
return function (this: HTMLElement, value: any) {
|
||||
if (value !== false) {
|
||||
setAttribute.call(this, attr, value === true ? "" : value);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export function attrsSetter(this: HTMLElement, attrs: any) {
|
||||
if (isArray(attrs)) {
|
||||
setAttribute.call(this, attrs[0], attrs[1]);
|
||||
} else {
|
||||
for (let k in attrs) {
|
||||
setAttribute.call(this, k, attrs[k]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function attrsUpdater(this: HTMLElement, attrs: any, oldAttrs: any) {
|
||||
if (isArray(attrs)) {
|
||||
const name = attrs[0];
|
||||
const val = attrs[1];
|
||||
if (name === oldAttrs[0]) {
|
||||
if (val === oldAttrs[1]) {
|
||||
return;
|
||||
}
|
||||
setAttribute.call(this, name, val);
|
||||
} else {
|
||||
removeAttribute.call(this, oldAttrs[0]);
|
||||
setAttribute.call(this, name, val);
|
||||
}
|
||||
} else {
|
||||
for (let k in oldAttrs) {
|
||||
if (!(k in attrs)) {
|
||||
removeAttribute.call(this, k);
|
||||
}
|
||||
}
|
||||
for (let k in attrs) {
|
||||
const val = attrs[k];
|
||||
if (val !== oldAttrs[k]) {
|
||||
setAttribute.call(this, k, val);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function toClassObj(expr: string | number | { [c: string]: any }) {
|
||||
const result: { [c: string]: any } = {};
|
||||
switch (typeof expr) {
|
||||
case "string":
|
||||
// we transform here a list of classes into an object:
|
||||
// 'hey you' becomes {hey: true, you: true}
|
||||
const str = trim.call(expr);
|
||||
if (!str) {
|
||||
return {};
|
||||
}
|
||||
let words = split.call(str, wordRegexp);
|
||||
for (let i = 0, l = words.length; i < l; i++) {
|
||||
result[words[i]] = true;
|
||||
}
|
||||
return result;
|
||||
case "object":
|
||||
// this is already an object but we may need to split keys:
|
||||
// {'a': true, 'b c': true} should become {a: true, b: true, c: true}
|
||||
for (let key in expr as any) {
|
||||
const value = (expr as any)[key];
|
||||
if (value) {
|
||||
const words = split.call(key, wordRegexp);
|
||||
for (let word of words) {
|
||||
result[word] = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
|
||||
case "undefined":
|
||||
return {};
|
||||
case "number":
|
||||
return { [expr as number]: true };
|
||||
default:
|
||||
return { [expr as any]: true };
|
||||
}
|
||||
}
|
||||
|
||||
export function setClass(this: HTMLElement, val: any) {
|
||||
val = val === "" ? {} : toClassObj(val);
|
||||
// add classes
|
||||
const cl = this.classList;
|
||||
for (let c in val) {
|
||||
tokenListAdd.call(cl, c);
|
||||
}
|
||||
}
|
||||
|
||||
export function updateClass(this: HTMLElement, val: any, oldVal: any) {
|
||||
oldVal = oldVal === "" ? {} : toClassObj(oldVal);
|
||||
val = val === "" ? {} : toClassObj(val);
|
||||
const cl = this.classList;
|
||||
// remove classes
|
||||
for (let c in oldVal) {
|
||||
if (!(c in val)) {
|
||||
tokenListRemove.call(cl, c);
|
||||
}
|
||||
}
|
||||
// add classes
|
||||
for (let c in val) {
|
||||
if (!(c in oldVal)) {
|
||||
tokenListAdd.call(cl, c);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function makePropSetter(name: string): Setter<HTMLElement> {
|
||||
return function setProp(this: HTMLElement, value: any) {
|
||||
(this as any)[name] = value;
|
||||
};
|
||||
}
|
||||
|
||||
export function isProp(tag: string, key: string): boolean {
|
||||
switch (tag) {
|
||||
case "input":
|
||||
return (
|
||||
key === "checked" ||
|
||||
key === "indeterminate" ||
|
||||
key === "value" ||
|
||||
key === "readonly" ||
|
||||
key === "disabled"
|
||||
);
|
||||
case "option":
|
||||
return key === "selected" || key === "disabled";
|
||||
case "textarea":
|
||||
return key === "readonly" || key === "disabled";
|
||||
break;
|
||||
case "button":
|
||||
case "select":
|
||||
case "optgroup":
|
||||
return key === "disabled";
|
||||
}
|
||||
return false;
|
||||
}
|
||||
@@ -0,0 +1,602 @@
|
||||
import {
|
||||
attrsSetter,
|
||||
attrsUpdater,
|
||||
createAttrUpdater,
|
||||
isProp,
|
||||
makePropSetter,
|
||||
setClass,
|
||||
updateClass,
|
||||
} from "./attributes";
|
||||
import { config } from "./config";
|
||||
import { createEventHandler } from "./events";
|
||||
import type { VNode } from "./index";
|
||||
import { VMulti } from "./multi";
|
||||
import { toText } from "./text";
|
||||
|
||||
const getDescriptor = (o: any, p: any) => Object.getOwnPropertyDescriptor(o, p)!;
|
||||
const nodeProto = Node.prototype;
|
||||
const elementProto = Element.prototype;
|
||||
const characterDataProto = CharacterData.prototype;
|
||||
|
||||
const characterDataSetData = getDescriptor(characterDataProto, "data").set!;
|
||||
const nodeGetFirstChild = getDescriptor(nodeProto, "firstChild").get!;
|
||||
const nodeGetNextSibling = getDescriptor(nodeProto, "nextSibling").get!;
|
||||
|
||||
const NO_OP = () => {};
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Main compiler code
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
type BlockType = (data?: any[], children?: VNode[]) => VNode;
|
||||
|
||||
const cache: { [key: string]: BlockType } = {};
|
||||
|
||||
/**
|
||||
* Compiling blocks is a multi-step process:
|
||||
*
|
||||
* 1. build an IntermediateTree from the HTML element. This intermediate tree
|
||||
* is a binary tree structure that encode dynamic info sub nodes, and the
|
||||
* path required to reach them
|
||||
* 2. process the tree to build a block context, which is an object that aggregate
|
||||
* all dynamic info in a list, and also, all ref indexes.
|
||||
* 3. process the context to build appropriate builder/setter functions
|
||||
* 4. make a dynamic block class, which will efficiently collect references and
|
||||
* create/update dynamic locations/children
|
||||
*
|
||||
* @param str
|
||||
* @returns a new block type, that can build concrete blocks
|
||||
*/
|
||||
export function createBlock(str: string): BlockType {
|
||||
if (str in cache) {
|
||||
return cache[str];
|
||||
}
|
||||
|
||||
// step 0: prepare html base element
|
||||
const doc = new DOMParser().parseFromString(`<t>${str}</t>`, "text/xml");
|
||||
const node = doc.firstChild!.firstChild!;
|
||||
if (config.shouldNormalizeDom) {
|
||||
normalizeNode(node as any);
|
||||
}
|
||||
|
||||
// step 1: prepare intermediate tree
|
||||
const tree = buildTree(node);
|
||||
|
||||
// step 2: prepare block context
|
||||
const context = buildContext(tree);
|
||||
|
||||
// step 3: build the final block class
|
||||
const template = tree.el as HTMLElement;
|
||||
const Block = buildBlock(template, context);
|
||||
cache[str] = Block;
|
||||
return Block;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Helper
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
function normalizeNode(node: HTMLElement | Text) {
|
||||
if (node.nodeType === Node.TEXT_NODE) {
|
||||
if (!/\S/.test((node as Text).textContent!)) {
|
||||
(node as Text).remove();
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (node.nodeType === Node.ELEMENT_NODE) {
|
||||
if ((node as HTMLElement).tagName === "pre") {
|
||||
return;
|
||||
}
|
||||
}
|
||||
for (let i = node.childNodes.length - 1; i >= 0; --i) {
|
||||
normalizeNode(node.childNodes.item(i) as any);
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// building a intermediate tree
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
interface DynamicInfo {
|
||||
idx: number;
|
||||
refIdx?: number;
|
||||
type: "text" | "child" | "handler" | "attribute" | "attributes" | "ref";
|
||||
isOnlyChild?: boolean;
|
||||
name?: string;
|
||||
tag?: string;
|
||||
event?: string;
|
||||
}
|
||||
|
||||
interface IntermediateTree {
|
||||
parent: IntermediateTree | null;
|
||||
firstChild: IntermediateTree | null;
|
||||
nextSibling: IntermediateTree | null;
|
||||
el: Node;
|
||||
info: DynamicInfo[];
|
||||
forceRef?: boolean;
|
||||
refIdx?: number;
|
||||
refN: number;
|
||||
}
|
||||
|
||||
function buildTree(
|
||||
node: Node,
|
||||
parent: IntermediateTree | null = null,
|
||||
domParentTree: IntermediateTree | null = null
|
||||
): IntermediateTree {
|
||||
switch (node.nodeType) {
|
||||
case 1: {
|
||||
// HTMLElement
|
||||
let isActive = false;
|
||||
const tagName = (node as Element).tagName;
|
||||
let el: Node | undefined = undefined;
|
||||
const info: DynamicInfo[] = [];
|
||||
if (tagName.startsWith("block-text-")) {
|
||||
const index = parseInt(tagName.slice(11), 10);
|
||||
info.push({ type: "text", idx: index });
|
||||
el = document.createTextNode("");
|
||||
isActive = true;
|
||||
}
|
||||
if (tagName.startsWith("block-child-")) {
|
||||
domParentTree!.forceRef = true;
|
||||
const index = parseInt(tagName.slice(12), 10);
|
||||
info.push({ type: "child", idx: index });
|
||||
el = document.createTextNode("");
|
||||
isActive = true;
|
||||
}
|
||||
if (!el) {
|
||||
el = document.createElement(tagName);
|
||||
}
|
||||
if (el instanceof HTMLElement) {
|
||||
const attrs = (node as Element).attributes;
|
||||
for (let i = 0; i < attrs.length; i++) {
|
||||
const attrName = attrs[i].name;
|
||||
const attrValue = attrs[i].value;
|
||||
if (attrName.startsWith("block-handler-")) {
|
||||
isActive = true;
|
||||
const idx = parseInt(attrName.slice(14), 10);
|
||||
info.push({
|
||||
type: "handler",
|
||||
idx,
|
||||
event: attrValue,
|
||||
});
|
||||
} else if (attrName.startsWith("block-attribute-")) {
|
||||
isActive = true;
|
||||
const idx = parseInt(attrName.slice(16), 10);
|
||||
info.push({
|
||||
type: "attribute",
|
||||
idx,
|
||||
name: attrValue,
|
||||
tag: tagName,
|
||||
});
|
||||
} else if (attrName === "block-attributes") {
|
||||
isActive = true;
|
||||
info.push({
|
||||
type: "attributes",
|
||||
idx: parseInt(attrValue, 10),
|
||||
});
|
||||
} else if (attrName === "block-ref") {
|
||||
isActive = true;
|
||||
info.push({
|
||||
type: "ref",
|
||||
idx: parseInt(attrValue, 10),
|
||||
});
|
||||
} else {
|
||||
el.setAttribute(attrs[i].name, attrValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const tree: IntermediateTree = {
|
||||
parent,
|
||||
firstChild: null,
|
||||
nextSibling: null,
|
||||
el,
|
||||
info,
|
||||
refN: isActive ? 1 : 0,
|
||||
};
|
||||
|
||||
if (node.firstChild) {
|
||||
const childNode = node.childNodes[0];
|
||||
if (
|
||||
node.childNodes.length === 1 &&
|
||||
childNode.nodeType === 1 &&
|
||||
(childNode as Element).tagName.startsWith("block-child-")
|
||||
) {
|
||||
const tagName = (childNode as Element).tagName;
|
||||
const index = parseInt(tagName.slice(12), 10);
|
||||
info.push({ idx: index, type: "child", isOnlyChild: true });
|
||||
isActive = true;
|
||||
tree.refN = 1;
|
||||
} else {
|
||||
tree.firstChild = buildTree(node.firstChild, tree, tree);
|
||||
el.appendChild(tree.firstChild.el);
|
||||
let curNode: Node | null = node.firstChild;
|
||||
let curTree: IntermediateTree | null = tree.firstChild;
|
||||
while ((curNode = curNode.nextSibling)) {
|
||||
curTree.nextSibling = buildTree(curNode, curTree, tree);
|
||||
el.appendChild(curTree.nextSibling.el);
|
||||
curTree = curTree.nextSibling;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (isActive) {
|
||||
let cur: IntermediateTree | null = tree;
|
||||
while ((cur = cur.parent)) {
|
||||
cur.refN++;
|
||||
}
|
||||
}
|
||||
return tree;
|
||||
}
|
||||
case 3:
|
||||
case 8: {
|
||||
// text node or comment node
|
||||
const el =
|
||||
node.nodeType === 3
|
||||
? document.createTextNode(node.textContent!)
|
||||
: document.createComment(node.textContent!);
|
||||
return {
|
||||
parent: parent,
|
||||
firstChild: null,
|
||||
nextSibling: null,
|
||||
el,
|
||||
info: [],
|
||||
refN: 0,
|
||||
};
|
||||
}
|
||||
}
|
||||
throw new Error("boom");
|
||||
}
|
||||
|
||||
function parentTree(tree: IntermediateTree): IntermediateTree | null {
|
||||
let parent = tree.parent;
|
||||
while (parent && parent.nextSibling === tree) {
|
||||
tree = parent;
|
||||
parent = parent.parent;
|
||||
}
|
||||
return parent;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Building a block context
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
interface RefCollector {
|
||||
idx: number;
|
||||
prevIdx: number;
|
||||
getVal: Function;
|
||||
}
|
||||
|
||||
export type Setter<T = any> = (this: T, value: any) => void;
|
||||
export type Updater<T = any> = (this: T, value: any, oldVal: any) => void;
|
||||
|
||||
interface Location {
|
||||
refIdx: number;
|
||||
setData: Setter;
|
||||
updateData: Updater;
|
||||
}
|
||||
|
||||
interface IndexedLocation extends Location {
|
||||
idx: number;
|
||||
}
|
||||
|
||||
interface Child {
|
||||
parentRefIdx: number;
|
||||
afterRefIdx?: number;
|
||||
isOnlyChild?: boolean;
|
||||
}
|
||||
|
||||
interface BlockCtx {
|
||||
refN: number;
|
||||
collectors: RefCollector[];
|
||||
locations: IndexedLocation[];
|
||||
children: Child[];
|
||||
cbRefs: number[];
|
||||
}
|
||||
|
||||
function buildContext(
|
||||
tree: IntermediateTree,
|
||||
ctx?: BlockCtx,
|
||||
fromIdx?: number,
|
||||
toIdx?: number
|
||||
): BlockCtx {
|
||||
if (!ctx) {
|
||||
const children = new Array(tree.info.filter((v) => v.type === "child").length);
|
||||
ctx = { collectors: [], locations: [], children, cbRefs: [], refN: tree.refN };
|
||||
fromIdx = 0;
|
||||
toIdx = tree.refN - 1;
|
||||
}
|
||||
if (tree.refN) {
|
||||
const initialIdx = fromIdx!;
|
||||
const isRef = tree.forceRef || tree.info.length > 0;
|
||||
const firstChild = tree.firstChild ? tree.firstChild.refN : 0;
|
||||
const nextSibling = tree.nextSibling ? tree.nextSibling.refN : 0;
|
||||
|
||||
//node
|
||||
if (isRef) {
|
||||
for (let info of tree.info) {
|
||||
info.refIdx = initialIdx!;
|
||||
}
|
||||
tree.refIdx = initialIdx!;
|
||||
updateCtx(ctx, tree);
|
||||
fromIdx!++;
|
||||
}
|
||||
|
||||
// right
|
||||
if (nextSibling) {
|
||||
const idx = fromIdx! + firstChild;
|
||||
ctx.collectors.push({ idx, prevIdx: initialIdx, getVal: nodeGetNextSibling });
|
||||
buildContext(tree.nextSibling!, ctx, idx, toIdx);
|
||||
}
|
||||
|
||||
// left
|
||||
if (firstChild) {
|
||||
ctx.collectors.push({ idx: fromIdx!, prevIdx: initialIdx, getVal: nodeGetFirstChild });
|
||||
buildContext(tree.firstChild!, ctx, fromIdx!, toIdx! - nextSibling);
|
||||
}
|
||||
}
|
||||
|
||||
return ctx;
|
||||
}
|
||||
|
||||
function updateCtx(ctx: BlockCtx, tree: IntermediateTree) {
|
||||
for (let info of tree.info) {
|
||||
switch (info.type) {
|
||||
case "text":
|
||||
ctx.locations.push({
|
||||
idx: info.idx,
|
||||
refIdx: info.refIdx!,
|
||||
setData: setText,
|
||||
updateData: setText,
|
||||
});
|
||||
break;
|
||||
case "child":
|
||||
if (info.isOnlyChild) {
|
||||
// tree is the parentnode here
|
||||
ctx.children[info.idx] = {
|
||||
parentRefIdx: info.refIdx!,
|
||||
isOnlyChild: true,
|
||||
};
|
||||
} else {
|
||||
// tree is the anchor text node
|
||||
ctx.children[info.idx] = {
|
||||
parentRefIdx: parentTree(tree)!.refIdx!,
|
||||
afterRefIdx: info.refIdx!,
|
||||
};
|
||||
}
|
||||
break;
|
||||
case "attribute": {
|
||||
const refIdx = info.refIdx!;
|
||||
let updater: any;
|
||||
let setter: any;
|
||||
if (isProp(info.tag!, info.name!)) {
|
||||
const setProp = makePropSetter(info.name!);
|
||||
setter = setProp;
|
||||
updater = setProp;
|
||||
} else if (info.name === "class") {
|
||||
setter = setClass;
|
||||
updater = updateClass;
|
||||
} else {
|
||||
setter = createAttrUpdater(info.name!);
|
||||
updater = setter;
|
||||
}
|
||||
ctx.locations.push({
|
||||
idx: info.idx,
|
||||
refIdx,
|
||||
setData: setter,
|
||||
updateData: updater,
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "attributes":
|
||||
ctx.locations.push({
|
||||
idx: info.idx,
|
||||
refIdx: info.refIdx!,
|
||||
setData: attrsSetter,
|
||||
updateData: attrsUpdater,
|
||||
});
|
||||
break;
|
||||
case "handler": {
|
||||
const setupHandler = createEventHandler(info.event!);
|
||||
ctx.locations.push({
|
||||
idx: info.idx,
|
||||
refIdx: info.refIdx!,
|
||||
setData: setupHandler,
|
||||
updateData: setupHandler,
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "ref":
|
||||
ctx.cbRefs.push(info.idx);
|
||||
ctx.locations.push({
|
||||
idx: info.idx,
|
||||
refIdx: info.refIdx!,
|
||||
setData: setRef,
|
||||
updateData: NO_OP,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
// -----------------------------------------------------------------------------
|
||||
// building the concrete block class
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
function buildBlock(template: HTMLElement, ctx: BlockCtx): BlockType {
|
||||
let B = createBlockClass(template, ctx);
|
||||
|
||||
if (ctx.cbRefs.length) {
|
||||
const refs = ctx.cbRefs;
|
||||
B = class extends B {
|
||||
remove() {
|
||||
super.remove();
|
||||
for (let ref of refs) {
|
||||
let fn = (this as any).data[ref];
|
||||
fn(null);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
if (ctx.children.length) {
|
||||
B = class extends B {
|
||||
children: (VNode | undefined)[] | undefined;
|
||||
constructor(data?: any[], children?: VNode[]) {
|
||||
super(data);
|
||||
this.children = children;
|
||||
}
|
||||
};
|
||||
B.prototype.beforeRemove = VMulti.prototype.beforeRemove;
|
||||
return (data?: any[], children: (VNode | undefined)[] = []) => new B(data, children);
|
||||
}
|
||||
|
||||
return (data?: any[]) => new B(data);
|
||||
}
|
||||
|
||||
type Constructor<T> = new (...args: any[]) => T;
|
||||
type BlockClass = Constructor<VNode<any>>;
|
||||
|
||||
function createBlockClass(template: HTMLElement, ctx: BlockCtx): BlockClass {
|
||||
const { refN, collectors, children } = ctx;
|
||||
const colN = collectors.length;
|
||||
ctx.locations.sort((a, b) => a.idx - b.idx);
|
||||
const locations: Location[] = ctx.locations.map((loc) => ({
|
||||
refIdx: loc.refIdx,
|
||||
setData: loc.setData,
|
||||
updateData: loc.updateData,
|
||||
}));
|
||||
const locN = locations.length;
|
||||
const childN = children.length;
|
||||
const childrenLocs = children;
|
||||
const isDynamic = refN > 0;
|
||||
|
||||
// these values are defined here to make them faster to lookup in the class
|
||||
// block scope
|
||||
const nodeCloneNode = nodeProto.cloneNode;
|
||||
const nodeInsertBefore = nodeProto.insertBefore;
|
||||
const elementRemove = elementProto.remove;
|
||||
|
||||
return class Block {
|
||||
el: HTMLElement | undefined;
|
||||
refs: Node[] | undefined;
|
||||
data: any[] | undefined;
|
||||
parentEl?: HTMLElement | undefined;
|
||||
children?: (VNode | undefined)[];
|
||||
|
||||
constructor(data?: any[]) {
|
||||
this.data = data;
|
||||
}
|
||||
|
||||
beforeRemove() {}
|
||||
|
||||
remove() {
|
||||
elementRemove.call(this.el);
|
||||
}
|
||||
|
||||
firstNode(): Node {
|
||||
return this.el!;
|
||||
}
|
||||
|
||||
moveBefore(other: Block | null, afterNode: Node | null) {
|
||||
const target = other ? other.el! : afterNode;
|
||||
nodeInsertBefore.call(this.parentEl, this.el!, target);
|
||||
}
|
||||
|
||||
mount(parent: HTMLElement, afterNode: Node | null) {
|
||||
const el = nodeCloneNode.call(template, true);
|
||||
nodeInsertBefore.call(parent, el, afterNode);
|
||||
if (isDynamic) {
|
||||
// collecting references
|
||||
const refs: Node[] = new Array(refN);
|
||||
this.refs = refs;
|
||||
refs[0] = el;
|
||||
for (let i = 0; i < colN; i++) {
|
||||
const w = collectors[i];
|
||||
refs[w.idx] = w.getVal.call(refs[w.prevIdx]);
|
||||
}
|
||||
|
||||
// applying data to all update points
|
||||
if (locN) {
|
||||
const data = this.data!;
|
||||
for (let i = 0; i < locN; i++) {
|
||||
const loc = locations[i];
|
||||
loc.setData.call(refs[loc.refIdx], data[i]);
|
||||
}
|
||||
}
|
||||
|
||||
// preparing all children
|
||||
if (childN) {
|
||||
const children = this.children;
|
||||
for (let i = 0; i < childN; i++) {
|
||||
const child = children![i];
|
||||
if (child) {
|
||||
const loc = childrenLocs[i];
|
||||
const afterNode = loc.afterRefIdx ? refs[loc.afterRefIdx] : null;
|
||||
child.isOnlyChild = loc.isOnlyChild;
|
||||
child.mount(refs[loc.parentRefIdx] as any, afterNode);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
this.el = el as HTMLElement;
|
||||
this.parentEl = parent;
|
||||
}
|
||||
patch(other: Block, withBeforeRemove: boolean) {
|
||||
if (this === other) {
|
||||
return;
|
||||
}
|
||||
const refs = this.refs!;
|
||||
// update texts/attributes/
|
||||
if (locN) {
|
||||
const data1 = this.data!;
|
||||
const data2 = other.data!;
|
||||
for (let i = 0; i < locN; i++) {
|
||||
const val1 = data1[i];
|
||||
const val2 = data2[i];
|
||||
if (val1 !== val2) {
|
||||
const loc = locations[i];
|
||||
loc.updateData.call(refs[loc.refIdx], val2, val1);
|
||||
}
|
||||
}
|
||||
this.data = data2;
|
||||
}
|
||||
|
||||
// update children
|
||||
if (childN) {
|
||||
let children1 = this.children;
|
||||
const children2 = other.children;
|
||||
for (let i = 0; i < childN; i++) {
|
||||
const child1 = children1![i];
|
||||
const child2 = children2![i];
|
||||
if (child1) {
|
||||
if (child2) {
|
||||
child1.patch(child2, withBeforeRemove);
|
||||
} else {
|
||||
if (withBeforeRemove) {
|
||||
child1.beforeRemove();
|
||||
}
|
||||
child1.remove();
|
||||
children1![i] = undefined;
|
||||
}
|
||||
} else if (child2) {
|
||||
const loc = childrenLocs[i];
|
||||
const afterNode = loc.afterRefIdx ? refs[loc.afterRefIdx] : null;
|
||||
child2.mount(refs[loc.parentRefIdx] as any, afterNode);
|
||||
children1![i] = child2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
toString() {
|
||||
const div = document.createElement("div");
|
||||
this.mount(div, null);
|
||||
return div.innerHTML;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function setText(this: Text, value: any) {
|
||||
characterDataSetData.call(this, toText(value));
|
||||
}
|
||||
|
||||
function setRef(this: HTMLElement, fn: any) {
|
||||
fn(this);
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
export const config = {
|
||||
// whether or not blockdom should normalize DOM whenever a block is created.
|
||||
// Normalizing dom mean removing empty text nodes (or containing only spaces)
|
||||
shouldNormalizeDom: true,
|
||||
|
||||
// this is the main event handler. Every event handler registered with blockdom
|
||||
// will go through this function, giving it the data registered in the block
|
||||
// and the event
|
||||
mainEventHandler: (data: any, ev: Event) => {
|
||||
if (typeof data === "function") {
|
||||
data(ev);
|
||||
} else if (Array.isArray(data)) {
|
||||
data[0](data[1], ev);
|
||||
}
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,32 @@
|
||||
import { config } from "./config";
|
||||
|
||||
export function createEventHandler(event: string) {
|
||||
setupSyntheticEvent(event);
|
||||
const key = `__event__${event}`;
|
||||
return function setupHandler(this: HTMLElement, data: any) {
|
||||
(this as any)[key] = data;
|
||||
};
|
||||
}
|
||||
|
||||
function nativeToSyntheticEvent(event: Event, name: string) {
|
||||
const eventKey = `__event__${name}`;
|
||||
let dom = event.target;
|
||||
while (dom !== null) {
|
||||
const data = (dom as any)[eventKey];
|
||||
if (data) {
|
||||
config.mainEventHandler(data, event);
|
||||
return;
|
||||
}
|
||||
dom = (dom as any).parentNode;
|
||||
}
|
||||
}
|
||||
|
||||
const CONFIGURED_SYNTHETIC_EVENTS: { [event: string]: boolean } = {};
|
||||
|
||||
function setupSyntheticEvent(name: string) {
|
||||
if (CONFIGURED_SYNTHETIC_EVENTS[name]) {
|
||||
return;
|
||||
}
|
||||
document.addEventListener(name, (event) => nativeToSyntheticEvent(event, name));
|
||||
CONFIGURED_SYNTHETIC_EVENTS[name] = true;
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
import type { VNode } from "./index";
|
||||
|
||||
const nodeProto = Node.prototype;
|
||||
|
||||
const nodeInsertBefore = nodeProto.insertBefore;
|
||||
const nodeRemoveChild = nodeProto.removeChild;
|
||||
|
||||
class VHtml {
|
||||
html: string;
|
||||
parentEl?: HTMLElement | undefined;
|
||||
content: ChildNode[] = [];
|
||||
|
||||
constructor(html: string) {
|
||||
this.html = html;
|
||||
}
|
||||
|
||||
mount(parent: HTMLElement, afterNode: Node | null) {
|
||||
this.parentEl = parent;
|
||||
const template = document.createElement("template");
|
||||
template.innerHTML = this.html;
|
||||
this.content = [...(template.content.childNodes as any)];
|
||||
for (let elem of this.content) {
|
||||
nodeInsertBefore.call(parent, elem, afterNode);
|
||||
}
|
||||
if (!this.content.length) {
|
||||
const textNode = document.createTextNode("");
|
||||
this.content.push(textNode);
|
||||
nodeInsertBefore.call(parent, textNode, afterNode);
|
||||
}
|
||||
}
|
||||
|
||||
moveBefore(other: VHtml | null, afterNode: Node | null) {
|
||||
const target = other ? other.content[0] : afterNode;
|
||||
const parent = this.parentEl;
|
||||
for (let elem of this.content) {
|
||||
nodeInsertBefore.call(parent, elem, target);
|
||||
}
|
||||
}
|
||||
|
||||
patch(other: VHtml) {
|
||||
if (this === other) {
|
||||
return;
|
||||
}
|
||||
const html2 = other.html;
|
||||
if (this.html !== html2) {
|
||||
const parent = this.parentEl;
|
||||
// insert new html in front of current
|
||||
const afterNode = this.content[0];
|
||||
const template = document.createElement("template");
|
||||
template.innerHTML = html2;
|
||||
const content = [...(template.content.childNodes as any)];
|
||||
for (let elem of content) {
|
||||
nodeInsertBefore.call(parent, elem, afterNode);
|
||||
}
|
||||
if (!content.length) {
|
||||
const textNode = document.createTextNode("");
|
||||
content.push(textNode);
|
||||
nodeInsertBefore.call(parent, textNode, afterNode);
|
||||
}
|
||||
|
||||
// remove current content
|
||||
this.remove();
|
||||
this.content = content;
|
||||
}
|
||||
}
|
||||
|
||||
beforeRemove() {}
|
||||
|
||||
remove() {
|
||||
const parent = this.parentEl;
|
||||
for (let elem of this.content) {
|
||||
nodeRemoveChild.call(parent, elem);
|
||||
}
|
||||
}
|
||||
|
||||
firstNode(): Node {
|
||||
return this.content[0]!;
|
||||
}
|
||||
|
||||
toString() {
|
||||
return this.html;
|
||||
}
|
||||
}
|
||||
|
||||
export function html(str: string): VNode<VHtml> {
|
||||
return new VHtml(str);
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
export { config } from "./config";
|
||||
|
||||
export { toggler } from "./toggler";
|
||||
export { createBlock } from "./block_compiler";
|
||||
export { list } from "./list";
|
||||
export { multi } from "./multi";
|
||||
export { text } from "./text";
|
||||
export { html } from "./html";
|
||||
|
||||
export interface VNode<T = any> {
|
||||
mount(parent: HTMLElement, afterNode: Node | null): void;
|
||||
moveBefore(other: T | null, afterNode: Node | null): void;
|
||||
patch(other: T, withBeforeRemove: boolean): void;
|
||||
beforeRemove(): void;
|
||||
remove(): void;
|
||||
firstNode(): Node | undefined;
|
||||
|
||||
el?: undefined | HTMLElement | Text;
|
||||
parentEl?: undefined | HTMLElement;
|
||||
isOnlyChild?: boolean | undefined;
|
||||
key?: any;
|
||||
}
|
||||
|
||||
export type BDom = VNode<any>;
|
||||
|
||||
export function mount(vnode: VNode, fixture: HTMLElement) {
|
||||
vnode.mount(fixture, null);
|
||||
}
|
||||
|
||||
export function patch(vnode1: VNode, vnode2: VNode, withBeforeRemove: boolean = false) {
|
||||
vnode1.patch(vnode2, withBeforeRemove);
|
||||
}
|
||||
|
||||
export function remove(vnode: VNode, withBeforeRemove: boolean = false) {
|
||||
if (withBeforeRemove) {
|
||||
vnode.beforeRemove();
|
||||
}
|
||||
vnode.remove();
|
||||
}
|
||||
|
||||
export function withKey(vnode: VNode, key: any) {
|
||||
vnode.key = key;
|
||||
return vnode;
|
||||
}
|
||||
@@ -0,0 +1,240 @@
|
||||
import type { VNode } from "./index";
|
||||
|
||||
const getDescriptor = (o: any, p: any) => Object.getOwnPropertyDescriptor(o, p)!;
|
||||
const nodeProto = Node.prototype;
|
||||
|
||||
const nodeInsertBefore = nodeProto.insertBefore;
|
||||
const nodeAppendChild = nodeProto.appendChild;
|
||||
const nodeRemoveChild = nodeProto.removeChild;
|
||||
const nodeSetTextContent = getDescriptor(nodeProto, "textContent").set!;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// List Node
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
class VList {
|
||||
children: VNode[];
|
||||
anchor: Node | undefined;
|
||||
parentEl?: HTMLElement | undefined;
|
||||
isOnlyChild?: boolean | undefined;
|
||||
|
||||
constructor(children: VNode[]) {
|
||||
this.children = children;
|
||||
}
|
||||
|
||||
mount(parent: HTMLElement, afterNode: Node | null) {
|
||||
const children = this.children;
|
||||
const _anchor = document.createTextNode("");
|
||||
this.anchor = _anchor;
|
||||
nodeInsertBefore.call(parent, _anchor, afterNode);
|
||||
const l = children.length;
|
||||
if (l) {
|
||||
const mount = children[0].mount;
|
||||
for (let i = 0; i < l; i++) {
|
||||
mount.call(children[i], parent, _anchor);
|
||||
}
|
||||
}
|
||||
|
||||
this.parentEl = parent;
|
||||
}
|
||||
|
||||
moveBefore(other: VList | null, afterNode: Node | null) {
|
||||
if (other) {
|
||||
const next = other!.children[0];
|
||||
afterNode = (next ? next.firstNode() : other!.anchor) || null;
|
||||
}
|
||||
const children = this.children;
|
||||
for (let i = 0, l = children.length; i < l; i++) {
|
||||
children[i].moveBefore(null, afterNode);
|
||||
}
|
||||
this.parentEl!.insertBefore(this.anchor!, afterNode);
|
||||
}
|
||||
|
||||
patch(other: VList, withBeforeRemove: boolean) {
|
||||
if (this === other) {
|
||||
return;
|
||||
}
|
||||
const ch1 = this.children;
|
||||
const ch2: VNode[] = other.children;
|
||||
if (ch2.length === 0 && ch1.length === 0) {
|
||||
return;
|
||||
}
|
||||
this.children = ch2;
|
||||
const proto = ch2[0] || ch1[0];
|
||||
const {
|
||||
mount: cMount,
|
||||
patch: cPatch,
|
||||
remove: cRemove,
|
||||
beforeRemove,
|
||||
moveBefore: cMoveBefore,
|
||||
firstNode: cFirstNode,
|
||||
} = proto;
|
||||
|
||||
const _anchor = this.anchor!;
|
||||
const isOnlyChild = this.isOnlyChild;
|
||||
const parent = this.parentEl!;
|
||||
|
||||
// fast path: no new child => only remove
|
||||
if (ch2.length === 0 && isOnlyChild) {
|
||||
if (withBeforeRemove) {
|
||||
for (let i = 0, l = ch1.length; i < l; i++) {
|
||||
beforeRemove.call(ch1[i]);
|
||||
}
|
||||
}
|
||||
|
||||
nodeSetTextContent.call(parent, "");
|
||||
nodeAppendChild.call(parent, _anchor);
|
||||
return;
|
||||
}
|
||||
|
||||
let startIdx1 = 0;
|
||||
let startIdx2 = 0;
|
||||
let startVn1 = ch1[0];
|
||||
let startVn2 = ch2[0];
|
||||
|
||||
let endIdx1 = ch1.length - 1;
|
||||
let endIdx2 = ch2.length - 1;
|
||||
let endVn1 = ch1[endIdx1];
|
||||
let endVn2 = ch2[endIdx2];
|
||||
|
||||
let mapping: any = undefined;
|
||||
// let noFullRemove = this.hasNoComponent;
|
||||
|
||||
while (startIdx1 <= endIdx1 && startIdx2 <= endIdx2) {
|
||||
// -------------------------------------------------------------------
|
||||
if (startVn1 === null) {
|
||||
startVn1 = ch1[++startIdx1];
|
||||
continue;
|
||||
}
|
||||
// -------------------------------------------------------------------
|
||||
if (endVn1 === null) {
|
||||
endVn1 = ch1[--endIdx1];
|
||||
continue;
|
||||
}
|
||||
// -------------------------------------------------------------------
|
||||
let startKey1 = startVn1.key;
|
||||
let startKey2 = startVn2.key;
|
||||
if (startKey1 === startKey2) {
|
||||
cPatch.call(startVn1, startVn2, withBeforeRemove);
|
||||
ch2[startIdx2] = startVn1;
|
||||
startVn1 = ch1[++startIdx1];
|
||||
startVn2 = ch2[++startIdx2];
|
||||
continue;
|
||||
}
|
||||
// -------------------------------------------------------------------
|
||||
let endKey1 = endVn1.key;
|
||||
let endKey2 = endVn2.key;
|
||||
if (endKey1 === endKey2) {
|
||||
cPatch.call(endVn1, endVn2, withBeforeRemove);
|
||||
ch2[endIdx2] = endVn1;
|
||||
endVn1 = ch1[--endIdx1];
|
||||
endVn2 = ch2[--endIdx2];
|
||||
continue;
|
||||
}
|
||||
// -------------------------------------------------------------------
|
||||
if (startKey1 === endKey2) {
|
||||
// bnode moved right
|
||||
cPatch.call(startVn1, endVn2, withBeforeRemove);
|
||||
ch2[endIdx2] = startVn1;
|
||||
const nextChild = ch2[endIdx2 + 1];
|
||||
cMoveBefore.call(startVn1, nextChild, _anchor);
|
||||
startVn1 = ch1[++startIdx1];
|
||||
endVn2 = ch2[--endIdx2];
|
||||
continue;
|
||||
}
|
||||
// -------------------------------------------------------------------
|
||||
if (endKey1 === startKey2) {
|
||||
// bnode moved left
|
||||
cPatch.call(endVn1, startVn2, withBeforeRemove);
|
||||
ch2[startIdx2] = endVn1;
|
||||
const nextChild = ch1[startIdx1];
|
||||
cMoveBefore.call(endVn1, nextChild, _anchor);
|
||||
endVn1 = ch1[--endIdx1];
|
||||
startVn2 = ch2[++startIdx2];
|
||||
continue;
|
||||
}
|
||||
// -------------------------------------------------------------------
|
||||
mapping = mapping || createMapping(ch1, startIdx1, endIdx1);
|
||||
let idxInOld = mapping[startKey2];
|
||||
if (idxInOld === undefined) {
|
||||
cMount.call(startVn2, parent, cFirstNode.call(startVn1) || null);
|
||||
} else {
|
||||
const elmToMove = ch1[idxInOld];
|
||||
cMoveBefore.call(elmToMove, startVn1, null);
|
||||
cPatch.call(elmToMove, startVn2, withBeforeRemove);
|
||||
ch2[startIdx2] = elmToMove;
|
||||
ch1[idxInOld] = null as any;
|
||||
}
|
||||
startVn2 = ch2[++startIdx2];
|
||||
}
|
||||
// ---------------------------------------------------------------------
|
||||
if (startIdx1 <= endIdx1 || startIdx2 <= endIdx2) {
|
||||
if (startIdx1 > endIdx1) {
|
||||
const nextChild = ch2[endIdx2 + 1];
|
||||
const anchor = nextChild ? cFirstNode.call(nextChild) || null : _anchor;
|
||||
for (let i = startIdx2; i <= endIdx2; i++) {
|
||||
cMount.call(ch2[i], parent, anchor);
|
||||
}
|
||||
} else {
|
||||
for (let i = startIdx1; i <= endIdx1; i++) {
|
||||
let ch = ch1[i];
|
||||
if (ch) {
|
||||
if (withBeforeRemove) {
|
||||
beforeRemove.call(ch);
|
||||
}
|
||||
cRemove.call(ch);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
beforeRemove() {
|
||||
const children = this.children;
|
||||
const l = children.length;
|
||||
if (l) {
|
||||
const beforeRemove = children[0].beforeRemove;
|
||||
for (let i = 0; i < l; i++) {
|
||||
beforeRemove.call(children[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
remove() {
|
||||
const { parentEl, anchor } = this;
|
||||
if (this.isOnlyChild) {
|
||||
nodeSetTextContent.call(parentEl, "");
|
||||
} else {
|
||||
const children = this.children;
|
||||
const l = children.length;
|
||||
if (l) {
|
||||
const remove = children[0].remove;
|
||||
for (let i = 0; i < l; i++) {
|
||||
remove.call(children[i]);
|
||||
}
|
||||
}
|
||||
nodeRemoveChild.call(parentEl, anchor!);
|
||||
}
|
||||
}
|
||||
|
||||
firstNode(): Node | undefined {
|
||||
const child = this.children[0];
|
||||
return child ? child.firstNode() : undefined;
|
||||
}
|
||||
|
||||
toString(): string {
|
||||
return this.children.map((c) => c!.toString()).join("");
|
||||
}
|
||||
}
|
||||
|
||||
export function list(children: VNode[]): VNode<VList> {
|
||||
return new VList(children);
|
||||
}
|
||||
|
||||
function createMapping(ch1: any[], startIdx1: number, endIdx2: number): { [key: string]: any } {
|
||||
let mapping: any = {};
|
||||
for (let i = startIdx1; i <= endIdx2; i++) {
|
||||
mapping[ch1[i].key] = i;
|
||||
}
|
||||
return mapping;
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
import type { VNode } from "./index";
|
||||
|
||||
const getDescriptor = (o: any, p: any) => Object.getOwnPropertyDescriptor(o, p)!;
|
||||
const nodeProto = Node.prototype;
|
||||
const nodeInsertBefore = nodeProto.insertBefore;
|
||||
const nodeSetTextContent = getDescriptor(nodeProto, "textContent").set!;
|
||||
const nodeRemoveChild = nodeProto.removeChild;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Multi NODE
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
export class VMulti {
|
||||
children: (VNode | undefined)[];
|
||||
anchors?: Node[] | undefined;
|
||||
parentEl?: HTMLElement | undefined;
|
||||
isOnlyChild?: boolean | undefined;
|
||||
|
||||
constructor(children: (VNode | undefined)[]) {
|
||||
this.children = children;
|
||||
}
|
||||
|
||||
mount(parent: HTMLElement, afterNode: Node | null) {
|
||||
const children = this.children;
|
||||
const l = children.length;
|
||||
const anchors = new Array(l);
|
||||
for (let i = 0; i < l; i++) {
|
||||
let child = children[i];
|
||||
if (child) {
|
||||
child.mount(parent, afterNode);
|
||||
} else {
|
||||
const childAnchor = document.createTextNode("");
|
||||
anchors[i] = childAnchor;
|
||||
nodeInsertBefore.call(parent, childAnchor, afterNode);
|
||||
}
|
||||
}
|
||||
this.anchors = anchors;
|
||||
this.parentEl = parent;
|
||||
}
|
||||
|
||||
moveBefore(other: VMulti | null, afterNode: Node | null) {
|
||||
if (other) {
|
||||
const next = other!.children[0];
|
||||
afterNode = (next ? next.firstNode() : other!.anchors![0]) || null;
|
||||
}
|
||||
const children = this.children;
|
||||
const parent = this.parentEl;
|
||||
const anchors = this.anchors;
|
||||
for (let i = 0, l = children.length; i < l; i++) {
|
||||
let child = children[i];
|
||||
if (child) {
|
||||
child.moveBefore(null, afterNode);
|
||||
} else {
|
||||
const anchor = anchors![i];
|
||||
nodeInsertBefore.call(parent, anchor, afterNode);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
patch(other: VMulti, withBeforeRemove: boolean) {
|
||||
if (this === other) {
|
||||
return;
|
||||
}
|
||||
const children1 = this.children;
|
||||
const children2 = other.children;
|
||||
const anchors = this.anchors!;
|
||||
const parentEl = this.parentEl!;
|
||||
for (let i = 0, l = children1.length; i < l; i++) {
|
||||
const vn1 = children1[i];
|
||||
const vn2 = children2[i];
|
||||
if (vn1) {
|
||||
if (vn2) {
|
||||
vn1.patch(vn2, withBeforeRemove);
|
||||
} else {
|
||||
const afterNode = vn1.firstNode()!;
|
||||
const anchor = document.createTextNode("");
|
||||
anchors[i] = anchor;
|
||||
nodeInsertBefore.call(parentEl, anchor, afterNode);
|
||||
if (withBeforeRemove) {
|
||||
vn1.beforeRemove();
|
||||
}
|
||||
vn1.remove();
|
||||
children1[i] = undefined;
|
||||
}
|
||||
} else if (vn2) {
|
||||
children1[i] = vn2;
|
||||
const anchor = anchors[i];
|
||||
vn2.mount(parentEl, anchor);
|
||||
nodeRemoveChild.call(parentEl, anchor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
beforeRemove() {
|
||||
const children = this.children;
|
||||
for (let i = 0, l = children.length; i < l; i++) {
|
||||
const child = children[i];
|
||||
if (child) {
|
||||
child.beforeRemove();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
remove() {
|
||||
const parentEl = this.parentEl;
|
||||
if (this.isOnlyChild) {
|
||||
nodeSetTextContent.call(parentEl, "");
|
||||
} else {
|
||||
const children = this.children;
|
||||
const anchors = this.anchors;
|
||||
for (let i = 0, l = children.length; i < l; i++) {
|
||||
const child = children[i];
|
||||
if (child) {
|
||||
child.remove();
|
||||
} else {
|
||||
nodeRemoveChild.call(parentEl, anchors![i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
firstNode(): Node | undefined {
|
||||
const child = this.children[0];
|
||||
return child ? child.firstNode() : this.anchors![0];
|
||||
}
|
||||
|
||||
toString(): string {
|
||||
return this.children.map((c) => c!.toString()).join("");
|
||||
}
|
||||
}
|
||||
|
||||
export function multi(children: (VNode | undefined)[]): VNode<VMulti> {
|
||||
return new VMulti(children);
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
import type { VNode } from "./index";
|
||||
|
||||
const getDescriptor = (o: any, p: any) => Object.getOwnPropertyDescriptor(o, p)!;
|
||||
const nodeProto = Node.prototype;
|
||||
const characterDataProto = CharacterData.prototype;
|
||||
|
||||
const nodeInsertBefore = nodeProto.insertBefore;
|
||||
const characterDataSetData = getDescriptor(characterDataProto, "data").set!;
|
||||
const nodeRemoveChild = nodeProto.removeChild;
|
||||
|
||||
class VText {
|
||||
text: string;
|
||||
parentEl?: HTMLElement | undefined;
|
||||
el?: Text;
|
||||
|
||||
constructor(text: string) {
|
||||
this.text = text;
|
||||
}
|
||||
|
||||
mount(parent: HTMLElement, afterNode: Node | null) {
|
||||
this.parentEl = parent;
|
||||
const node = document.createTextNode(toText(this.text));
|
||||
nodeInsertBefore.call(parent, node, afterNode);
|
||||
this.el = node;
|
||||
}
|
||||
|
||||
moveBefore(other: VText | null, afterNode: Node | null) {
|
||||
const target = other ? other.el! : afterNode;
|
||||
nodeInsertBefore.call(this.parentEl, this.el!, target);
|
||||
}
|
||||
|
||||
patch(other: VText) {
|
||||
const text2 = other.text;
|
||||
if (this.text !== text2) {
|
||||
characterDataSetData.call(this.el!, toText(text2));
|
||||
this.text = text2;
|
||||
}
|
||||
}
|
||||
|
||||
beforeRemove() {}
|
||||
|
||||
remove() {
|
||||
nodeRemoveChild.call(this.parentEl, this.el!);
|
||||
}
|
||||
|
||||
firstNode(): Node {
|
||||
return this.el!;
|
||||
}
|
||||
|
||||
toString() {
|
||||
return this.text;
|
||||
}
|
||||
}
|
||||
|
||||
export function text(str: string): VNode<VText> {
|
||||
return new VText(str);
|
||||
}
|
||||
|
||||
export function toText(value: any): string {
|
||||
switch (typeof value) {
|
||||
case "string":
|
||||
return value;
|
||||
case "number":
|
||||
return String(value);
|
||||
case "boolean":
|
||||
return value ? "true" : "false";
|
||||
default:
|
||||
return value || "";
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import type { VNode } from "./index";
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Toggler node
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
class VToggler {
|
||||
key: string;
|
||||
child: VNode;
|
||||
|
||||
parentEl?: HTMLElement | undefined;
|
||||
|
||||
constructor(key: string, child: VNode) {
|
||||
this.key = key;
|
||||
this.child = child;
|
||||
}
|
||||
|
||||
mount(parent: HTMLElement, afterNode: Node | null) {
|
||||
this.parentEl = parent;
|
||||
this.child.mount(parent, afterNode);
|
||||
}
|
||||
|
||||
moveBefore(other: VToggler | null, afterNode: Node | null) {
|
||||
this.child.moveBefore(other ? other.child : null, afterNode);
|
||||
}
|
||||
|
||||
patch(other: VToggler, withBeforeRemove: boolean) {
|
||||
if (this === other) {
|
||||
return;
|
||||
}
|
||||
let child1 = this.child;
|
||||
let child2 = other.child;
|
||||
if (this.key === other.key) {
|
||||
child1.patch(child2, withBeforeRemove);
|
||||
} else {
|
||||
child2.mount(this.parentEl!, child1.firstNode()!);
|
||||
if (withBeforeRemove) {
|
||||
child1.beforeRemove();
|
||||
}
|
||||
child1.remove();
|
||||
this.child = child2;
|
||||
this.key = other.key;
|
||||
}
|
||||
}
|
||||
|
||||
beforeRemove() {}
|
||||
|
||||
remove() {
|
||||
this.child.remove();
|
||||
}
|
||||
|
||||
firstNode(): Node | undefined {
|
||||
return this.child.firstNode();
|
||||
}
|
||||
|
||||
toString(): string {
|
||||
return this.child.toString();
|
||||
}
|
||||
}
|
||||
|
||||
export function toggler(key: string, child: VNode): VNode<VToggler> {
|
||||
return new VToggler(key, child);
|
||||
}
|
||||
Reference in New Issue
Block a user