mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[REF] reorganize file structure
in order to separate compiler/ and runtime/ code
This commit is contained in:
Géry Debongnie
committed by
Sam Degueldre
Sam Degueldre
parent
e4b810c027
commit
22a79cdedd
@@ -0,0 +1,127 @@
|
||||
import { Component, ComponentConstructor } from "./component";
|
||||
import { ComponentNode } from "./component_node";
|
||||
import { MountOptions } from "./fibers";
|
||||
import { Scheduler } from "./scheduler";
|
||||
import { TemplateSet, TemplateSetConfig } from "./template_set";
|
||||
import { nodeErrorHandlers } from "./error_handling";
|
||||
import { validateTarget } from "./utils";
|
||||
import { validateProps } from "./template_helpers";
|
||||
|
||||
// reimplement dev mode stuff see last change in 0f7a8289a6fb8387c3c1af41c6664b2a8448758f
|
||||
|
||||
export interface Env {
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
export interface AppConfig<P, E> extends TemplateSetConfig {
|
||||
props?: P;
|
||||
env?: E;
|
||||
test?: boolean;
|
||||
warnIfNoStaticProps?: boolean;
|
||||
}
|
||||
|
||||
let hasBeenLogged = false;
|
||||
|
||||
export const DEV_MSG = () => {
|
||||
const hash = (window as any).owl ? (window as any).owl.__info__.hash : "master";
|
||||
|
||||
return `Owl is running in 'dev' mode.
|
||||
|
||||
This is not suitable for production use.
|
||||
See https://github.com/odoo/owl/blob/${hash}/doc/reference/app.md#configuration for more information.`;
|
||||
};
|
||||
|
||||
export class App<
|
||||
T extends abstract new (...args: any) => any = any,
|
||||
P extends object = any,
|
||||
E = any
|
||||
> extends TemplateSet {
|
||||
static validateTarget = validateTarget;
|
||||
|
||||
Root: ComponentConstructor<P, E>;
|
||||
props: P;
|
||||
env: E;
|
||||
scheduler = new Scheduler();
|
||||
root: ComponentNode<P, E> | null = null;
|
||||
warnIfNoStaticProps: boolean;
|
||||
|
||||
constructor(Root: ComponentConstructor<P, E>, config: AppConfig<P, E> = {}) {
|
||||
super(config);
|
||||
this.Root = Root;
|
||||
if (config.test) {
|
||||
this.dev = true;
|
||||
}
|
||||
this.warnIfNoStaticProps = config.warnIfNoStaticProps || false;
|
||||
if (this.dev && !config.test && !hasBeenLogged) {
|
||||
console.info(DEV_MSG());
|
||||
hasBeenLogged = true;
|
||||
}
|
||||
const env = config.env || {};
|
||||
const descrs = Object.getOwnPropertyDescriptors(env);
|
||||
this.env = Object.freeze(Object.create(Object.getPrototypeOf(env), descrs));
|
||||
this.props = config.props || ({} as P);
|
||||
}
|
||||
|
||||
mount(target: HTMLElement, options?: MountOptions): Promise<Component<P, E> & InstanceType<T>> {
|
||||
App.validateTarget(target);
|
||||
if (this.dev) {
|
||||
validateProps(this.Root, this.props, { __owl__: { app: this } });
|
||||
}
|
||||
const node = this.makeNode(this.Root, this.props);
|
||||
const prom = this.mountNode(node, target, options);
|
||||
this.root = node;
|
||||
return prom;
|
||||
}
|
||||
|
||||
makeNode(Component: ComponentConstructor, props: any): ComponentNode {
|
||||
return new ComponentNode(Component, props, this, null, null);
|
||||
}
|
||||
|
||||
mountNode(node: ComponentNode, target: HTMLElement, options?: MountOptions) {
|
||||
const promise: any = new Promise((resolve, reject) => {
|
||||
let isResolved = false;
|
||||
// manually set a onMounted callback.
|
||||
// that way, we are independant from the current node.
|
||||
node.mounted.push(() => {
|
||||
resolve(node.component);
|
||||
isResolved = true;
|
||||
});
|
||||
|
||||
// Manually add the last resort error handler on the node
|
||||
let handlers = nodeErrorHandlers.get(node);
|
||||
if (!handlers) {
|
||||
handlers = [];
|
||||
nodeErrorHandlers.set(node, handlers);
|
||||
}
|
||||
handlers.unshift((e) => {
|
||||
if (isResolved) {
|
||||
console.error(e);
|
||||
} else {
|
||||
reject(e);
|
||||
}
|
||||
throw e;
|
||||
});
|
||||
});
|
||||
node.mountComponent(target, options);
|
||||
return promise;
|
||||
}
|
||||
|
||||
destroy() {
|
||||
if (this.root) {
|
||||
this.scheduler.flush();
|
||||
this.root.destroy();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export async function mount<
|
||||
T extends abstract new (...args: any) => any = any,
|
||||
P extends object = any,
|
||||
E = any
|
||||
>(
|
||||
C: T & ComponentConstructor<P, E>,
|
||||
target: HTMLElement,
|
||||
config: AppConfig<P, E> & MountOptions = {}
|
||||
): Promise<Component<P, E> & InstanceType<T>> {
|
||||
return new App(C, config).mount(target, config);
|
||||
}
|
||||
@@ -0,0 +1,168 @@
|
||||
import type { Setter } from "./block_compiler";
|
||||
|
||||
const { setAttribute: elemSetAttribute, 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.
|
||||
*/
|
||||
|
||||
function setAttribute(this: HTMLElement, key: string, value: any) {
|
||||
switch (value) {
|
||||
case false:
|
||||
case undefined:
|
||||
removeAttribute.call(this, key);
|
||||
break;
|
||||
case true:
|
||||
elemSetAttribute.call(this, key, "");
|
||||
break;
|
||||
default:
|
||||
elemSetAttribute.call(this, key, value);
|
||||
}
|
||||
}
|
||||
|
||||
export function createAttrUpdater(attr: string): Setter<HTMLElement> {
|
||||
return function (this: HTMLElement, value: any) {
|
||||
setAttribute.call(this, attr, 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) {
|
||||
// support 0, fallback to empty string for other falsy values
|
||||
(this as any)[name] = value === 0 ? 0 : 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 === "value" || key === "readonly" || key === "disabled";
|
||||
case "select":
|
||||
return key === "value" || key === "disabled";
|
||||
case "button":
|
||||
case "optgroup":
|
||||
return key === "disabled";
|
||||
}
|
||||
return false;
|
||||
}
|
||||
@@ -0,0 +1,628 @@
|
||||
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[];
|
||||
isRef?: boolean;
|
||||
refIdx?: number;
|
||||
refN: number;
|
||||
currentNS: string | null;
|
||||
}
|
||||
|
||||
function buildTree(
|
||||
node: Node,
|
||||
parent: IntermediateTree | null = null,
|
||||
domParentTree: IntermediateTree | null = null
|
||||
): IntermediateTree {
|
||||
switch (node.nodeType) {
|
||||
case Node.ELEMENT_NODE: {
|
||||
// HTMLElement
|
||||
let currentNS = domParentTree && domParentTree.currentNS;
|
||||
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("");
|
||||
}
|
||||
if (tagName.startsWith("block-child-")) {
|
||||
if (!domParentTree!.isRef) {
|
||||
addRef(domParentTree!);
|
||||
}
|
||||
const index = parseInt(tagName.slice(12), 10);
|
||||
info.push({ type: "child", idx: index });
|
||||
el = document.createTextNode("");
|
||||
}
|
||||
const attrs = (node as Element).attributes;
|
||||
const ns = attrs.getNamedItem("block-ns");
|
||||
if (ns) {
|
||||
attrs.removeNamedItem("block-ns");
|
||||
currentNS = ns.value;
|
||||
}
|
||||
if (!el) {
|
||||
el = currentNS
|
||||
? document.createElementNS(currentNS, tagName)
|
||||
: document.createElement(tagName);
|
||||
}
|
||||
if (el instanceof Element) {
|
||||
for (let i = 0; i < attrs.length; i++) {
|
||||
const attrName = attrs[i].name;
|
||||
const attrValue = attrs[i].value;
|
||||
if (attrName.startsWith("block-handler-")) {
|
||||
const idx = parseInt(attrName.slice(14), 10);
|
||||
info.push({
|
||||
type: "handler",
|
||||
idx,
|
||||
event: attrValue,
|
||||
});
|
||||
} else if (attrName.startsWith("block-attribute-")) {
|
||||
const idx = parseInt(attrName.slice(16), 10);
|
||||
info.push({
|
||||
type: "attribute",
|
||||
idx,
|
||||
name: attrValue,
|
||||
tag: tagName,
|
||||
});
|
||||
} else if (attrName === "block-attributes") {
|
||||
info.push({
|
||||
type: "attributes",
|
||||
idx: parseInt(attrValue, 10),
|
||||
});
|
||||
} else if (attrName === "block-ref") {
|
||||
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: 0,
|
||||
currentNS,
|
||||
};
|
||||
|
||||
if (node.firstChild) {
|
||||
const childNode = node.childNodes[0];
|
||||
if (
|
||||
node.childNodes.length === 1 &&
|
||||
childNode.nodeType === Node.ELEMENT_NODE &&
|
||||
(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 });
|
||||
} 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 (tree.info.length) {
|
||||
addRef(tree);
|
||||
}
|
||||
return tree;
|
||||
}
|
||||
case Node.TEXT_NODE:
|
||||
case Node.COMMENT_NODE: {
|
||||
// text node or comment node
|
||||
const el =
|
||||
node.nodeType === Node.TEXT_NODE
|
||||
? document.createTextNode(node.textContent!)
|
||||
: document.createComment(node.textContent!);
|
||||
return {
|
||||
parent: parent,
|
||||
firstChild: null,
|
||||
nextSibling: null,
|
||||
el,
|
||||
info: [],
|
||||
refN: 0,
|
||||
currentNS: null,
|
||||
};
|
||||
}
|
||||
}
|
||||
throw new Error("boom");
|
||||
}
|
||||
|
||||
function addRef(tree: IntermediateTree) {
|
||||
tree.isRef = true;
|
||||
do {
|
||||
tree.refN++;
|
||||
} while ((tree = tree.parent as any));
|
||||
}
|
||||
|
||||
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[];
|
||||
refList: (() => void)[][];
|
||||
}
|
||||
|
||||
function buildContext(tree: IntermediateTree, ctx?: BlockCtx, fromIdx?: number): BlockCtx {
|
||||
if (!ctx) {
|
||||
const children = new Array(tree.info.filter((v) => v.type === "child").length);
|
||||
ctx = { collectors: [], locations: [], children, cbRefs: [], refN: tree.refN, refList: [] };
|
||||
fromIdx = 0;
|
||||
}
|
||||
if (tree.refN) {
|
||||
const initialIdx = fromIdx!;
|
||||
const isRef = tree.isRef;
|
||||
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);
|
||||
}
|
||||
|
||||
// left
|
||||
if (firstChild) {
|
||||
ctx.collectors.push({ idx: fromIdx!, prevIdx: initialIdx, getVal: nodeGetFirstChild });
|
||||
buildContext(tree.firstChild!, ctx, fromIdx!);
|
||||
}
|
||||
}
|
||||
|
||||
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 { setup, update } = createEventHandler(info.event!);
|
||||
ctx.locations.push({
|
||||
idx: info.idx,
|
||||
refIdx: info.refIdx!,
|
||||
setData: setup,
|
||||
updateData: update,
|
||||
});
|
||||
break;
|
||||
}
|
||||
case "ref":
|
||||
const index = ctx.cbRefs.push(info.idx) - 1;
|
||||
ctx.locations.push({
|
||||
idx: info.idx,
|
||||
refIdx: info.refIdx!,
|
||||
setData: makeRefSetter(index, ctx.refList),
|
||||
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 cbRefs = ctx.cbRefs;
|
||||
const refList = ctx.refList;
|
||||
let cbRefsNumber = cbRefs.length;
|
||||
B = class extends B {
|
||||
mount(parent: HTMLElement, afterNode: Node | null) {
|
||||
refList.push(new Array(cbRefsNumber));
|
||||
super.mount(parent, afterNode);
|
||||
for (let cbRef of refList.pop()!) {
|
||||
cbRef();
|
||||
}
|
||||
}
|
||||
remove() {
|
||||
super.remove();
|
||||
for (let cbRef of cbRefs) {
|
||||
let fn = (this as any).data[cbRef];
|
||||
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;
|
||||
|
||||
class Block {
|
||||
el: HTMLElement | undefined;
|
||||
parentEl?: HTMLElement | undefined;
|
||||
data: any[] | undefined;
|
||||
children?: (VNode | undefined)[];
|
||||
refs: Node[] | 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);
|
||||
}
|
||||
|
||||
toString() {
|
||||
const div = document.createElement("div");
|
||||
this.mount(div, null);
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
mount(parent: HTMLElement, afterNode: Node | null) {
|
||||
const el = nodeCloneNode.call(template, true) as HTMLElement;
|
||||
nodeInsertBefore.call(parent, el, afterNode);
|
||||
this.el = el;
|
||||
this.parentEl = parent;
|
||||
}
|
||||
patch(other: Block, withBeforeRemove: boolean) {}
|
||||
}
|
||||
|
||||
if (isDynamic) {
|
||||
Block.prototype.mount = function mount(parent: HTMLElement, afterNode: Node | null) {
|
||||
const el = nodeCloneNode.call(template, true);
|
||||
// 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]);
|
||||
}
|
||||
}
|
||||
|
||||
nodeInsertBefore.call(parent, el, afterNode);
|
||||
|
||||
// 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;
|
||||
};
|
||||
|
||||
Block.prototype.patch = function 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
return Block;
|
||||
}
|
||||
|
||||
function setText(this: Text, value: any) {
|
||||
characterDataSetData.call(this, toText(value));
|
||||
}
|
||||
|
||||
function makeRefSetter(index: number, refs: (() => void)[][]): Setter<HTMLElement> {
|
||||
return function setRef(this: HTMLElement, fn: any) {
|
||||
refs[refs.length - 1][index] = () => fn(this);
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
export function filterOutModifiersFromData(dataList: any[]): { modifiers: string[]; data: any[] } {
|
||||
dataList = dataList.slice();
|
||||
const modifiers = [];
|
||||
let elm;
|
||||
while ((elm = dataList[0]) && typeof elm === "string") {
|
||||
modifiers.push(dataList.shift());
|
||||
}
|
||||
return { modifiers, data: dataList };
|
||||
}
|
||||
|
||||
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, currentTarget?: EventTarget | null): boolean => {
|
||||
if (typeof data === "function") {
|
||||
data(ev);
|
||||
} else if (Array.isArray(data)) {
|
||||
data = filterOutModifiersFromData(data).data;
|
||||
data[0](data[1], ev);
|
||||
}
|
||||
return false;
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,89 @@
|
||||
import { createEventHandler } from "./events";
|
||||
import type { VNode } from "./index";
|
||||
|
||||
type EventsSpec = { [name: string]: number };
|
||||
|
||||
type Catcher = (child: VNode, handlers: any[]) => VNode;
|
||||
|
||||
export function createCatcher(eventsSpec: EventsSpec): Catcher {
|
||||
let setupFns: any[] = [];
|
||||
let removeFns: any[] = [];
|
||||
for (let name in eventsSpec) {
|
||||
let index = eventsSpec[name];
|
||||
let { setup, remove } = createEventHandler(name);
|
||||
setupFns[index] = setup;
|
||||
removeFns[index] = remove;
|
||||
}
|
||||
let n = setupFns.length;
|
||||
|
||||
class VCatcher {
|
||||
child: VNode;
|
||||
handlers: any[];
|
||||
|
||||
parentEl?: HTMLElement | undefined;
|
||||
afterNode: Node | null = null;
|
||||
|
||||
constructor(child: VNode, handlers: any[]) {
|
||||
this.child = child;
|
||||
this.handlers = handlers;
|
||||
}
|
||||
|
||||
mount(parent: HTMLElement, afterNode: Node | null) {
|
||||
this.parentEl = parent;
|
||||
this.afterNode = afterNode;
|
||||
this.child.mount(parent, afterNode);
|
||||
for (let i = 0; i < n; i++) {
|
||||
let origFn = this.handlers[i][0];
|
||||
const self = this;
|
||||
this.handlers[i][0] = function (ev: any) {
|
||||
const target = ev.target;
|
||||
let currentNode: any = self.child.firstNode();
|
||||
const afterNode = self.afterNode;
|
||||
while (currentNode !== afterNode) {
|
||||
if (currentNode.contains(target)) {
|
||||
return origFn.call(this, ev);
|
||||
}
|
||||
currentNode = currentNode.nextSibling;
|
||||
}
|
||||
};
|
||||
setupFns[i].call(parent, this.handlers[i]);
|
||||
}
|
||||
}
|
||||
|
||||
moveBefore(other: VCatcher | null, afterNode: Node | null) {
|
||||
this.afterNode = null;
|
||||
this.child.moveBefore(other ? other.child : null, afterNode);
|
||||
}
|
||||
|
||||
patch(other: VCatcher, withBeforeRemove: boolean) {
|
||||
if (this === other) {
|
||||
return;
|
||||
}
|
||||
this.handlers = other.handlers;
|
||||
this.child.patch(other.child, withBeforeRemove);
|
||||
}
|
||||
|
||||
beforeRemove() {
|
||||
this.child.beforeRemove();
|
||||
}
|
||||
|
||||
remove() {
|
||||
for (let i = 0; i < n; i++) {
|
||||
removeFns[i].call(this.parentEl!);
|
||||
}
|
||||
this.child.remove();
|
||||
}
|
||||
|
||||
firstNode(): Node | undefined {
|
||||
return this.child.firstNode();
|
||||
}
|
||||
|
||||
toString(): string {
|
||||
return this.child.toString();
|
||||
}
|
||||
}
|
||||
|
||||
return function (child: VNode, handlers: any[]): VNode<VCatcher> {
|
||||
return new VCatcher(child, handlers);
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
import { config } from "./config";
|
||||
|
||||
type EventHandlerSetter = (this: HTMLElement, data: any) => void;
|
||||
|
||||
interface EventHandlerCreator {
|
||||
setup: EventHandlerSetter;
|
||||
update: EventHandlerSetter;
|
||||
remove: (this: HTMLElement) => void;
|
||||
}
|
||||
|
||||
export function createEventHandler(rawEvent: string): EventHandlerCreator {
|
||||
const eventName = rawEvent.split(".")[0];
|
||||
const capture = rawEvent.includes(".capture");
|
||||
if (rawEvent.includes(".synthetic")) {
|
||||
return createSyntheticHandler(eventName, capture);
|
||||
} else {
|
||||
return createElementHandler(eventName, capture);
|
||||
}
|
||||
}
|
||||
|
||||
// Native listener
|
||||
let nextNativeEventId = 1;
|
||||
function createElementHandler(evName: string, capture: boolean = false): EventHandlerCreator {
|
||||
let eventKey = `__event__${evName}_${nextNativeEventId++}`;
|
||||
if (capture) {
|
||||
eventKey = `${eventKey}_capture`;
|
||||
}
|
||||
|
||||
function listener(ev: Event) {
|
||||
const currentTarget = ev.currentTarget;
|
||||
if (!currentTarget || !document.contains(currentTarget as HTMLElement)) return;
|
||||
const data = (currentTarget as any)[eventKey];
|
||||
if (!data) return;
|
||||
config.mainEventHandler(data, ev, currentTarget);
|
||||
}
|
||||
|
||||
function setup(this: HTMLElement, data: any) {
|
||||
(this as any)[eventKey] = data;
|
||||
this.addEventListener(evName, listener, { capture });
|
||||
}
|
||||
|
||||
function remove(this: HTMLElement) {
|
||||
delete (this as any)[eventKey];
|
||||
this.removeEventListener(evName, listener, { capture });
|
||||
}
|
||||
function update(this: HTMLElement, data: any) {
|
||||
(this as any)[eventKey] = data;
|
||||
}
|
||||
|
||||
return { setup, update, remove };
|
||||
}
|
||||
|
||||
// Synthetic handler: a form of event delegation that allows placing only one
|
||||
// listener per event type.
|
||||
let nextSyntheticEventId = 1;
|
||||
function createSyntheticHandler(evName: string, capture: boolean = false): EventHandlerCreator {
|
||||
let eventKey = `__event__synthetic_${evName}`;
|
||||
if (capture) {
|
||||
eventKey = `${eventKey}_capture`;
|
||||
}
|
||||
setupSyntheticEvent(evName, eventKey, capture);
|
||||
const currentId = nextSyntheticEventId++;
|
||||
function setup(this: HTMLElement, data: any) {
|
||||
const _data = (this as any)[eventKey] || {};
|
||||
_data[currentId] = data;
|
||||
(this as any)[eventKey] = _data;
|
||||
}
|
||||
|
||||
function remove(this: HTMLElement) {
|
||||
delete (this as any)[eventKey];
|
||||
}
|
||||
|
||||
return { setup, update: setup, remove };
|
||||
}
|
||||
|
||||
function nativeToSyntheticEvent(eventKey: string, event: Event) {
|
||||
let dom = event.target;
|
||||
while (dom !== null) {
|
||||
const _data = (dom as any)[eventKey];
|
||||
if (_data) {
|
||||
for (const data of Object.values(_data)) {
|
||||
const stopped = config.mainEventHandler(data, event, dom);
|
||||
if (stopped) return;
|
||||
}
|
||||
}
|
||||
dom = (dom as any).parentNode;
|
||||
}
|
||||
}
|
||||
|
||||
const CONFIGURED_SYNTHETIC_EVENTS: { [event: string]: boolean } = {};
|
||||
|
||||
function setupSyntheticEvent(evName: string, eventKey: string, capture: boolean = false) {
|
||||
if (CONFIGURED_SYNTHETIC_EVENTS[eventKey]) {
|
||||
return;
|
||||
}
|
||||
document.addEventListener(evName, (event) => nativeToSyntheticEvent(eventKey, event), {
|
||||
capture,
|
||||
});
|
||||
CONFIGURED_SYNTHETIC_EVENTS[eventKey] = true;
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
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;
|
||||
this.html = other.html;
|
||||
}
|
||||
}
|
||||
|
||||
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,45 @@
|
||||
export { config } from "./config";
|
||||
|
||||
export { toggler } from "./toggler";
|
||||
export { createBlock } from "./block_compiler";
|
||||
export { list } from "./list";
|
||||
export { multi } from "./multi";
|
||||
export { text, comment } from "./text";
|
||||
export { html } from "./html";
|
||||
export { createCatcher } from "./event_catcher";
|
||||
|
||||
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, afterNode: Node | null = null) {
|
||||
vnode.mount(fixture, afterNode);
|
||||
}
|
||||
|
||||
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,239 @@
|
||||
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;
|
||||
|
||||
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 ? c!.toString() : "")).join("");
|
||||
}
|
||||
}
|
||||
|
||||
export function multi(children: (VNode | undefined)[]): VNode<VMulti> {
|
||||
return new VMulti(children);
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
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;
|
||||
|
||||
abstract class VSimpleNode {
|
||||
text: string | String;
|
||||
parentEl?: HTMLElement | undefined;
|
||||
el?: any;
|
||||
|
||||
constructor(text: string | String) {
|
||||
this.text = text;
|
||||
}
|
||||
|
||||
mountNode(node: Node, parent: HTMLElement, afterNode: Node | null) {
|
||||
this.parentEl = parent;
|
||||
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);
|
||||
}
|
||||
|
||||
beforeRemove() {}
|
||||
|
||||
remove() {
|
||||
nodeRemoveChild.call(this.parentEl, this.el!);
|
||||
}
|
||||
|
||||
firstNode(): Node {
|
||||
return this.el!;
|
||||
}
|
||||
|
||||
toString() {
|
||||
return this.text;
|
||||
}
|
||||
}
|
||||
|
||||
class VText extends VSimpleNode {
|
||||
mount(parent: HTMLElement, afterNode: Node | null) {
|
||||
this.mountNode(document.createTextNode(toText(this.text)), parent, afterNode);
|
||||
}
|
||||
|
||||
patch(other: VText) {
|
||||
const text2 = other.text;
|
||||
if (this.text !== text2) {
|
||||
characterDataSetData.call(this.el!, toText(text2));
|
||||
this.text = text2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class VComment extends VSimpleNode {
|
||||
mount(parent: HTMLElement, afterNode: Node | null) {
|
||||
this.mountNode(document.createComment(toText(this.text)), parent, afterNode);
|
||||
}
|
||||
|
||||
patch() {}
|
||||
}
|
||||
|
||||
export function text(str: string | String): VNode<VText> {
|
||||
return new VText(str);
|
||||
}
|
||||
|
||||
export function comment(str: string): VNode<VComment> {
|
||||
return new VComment(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,65 @@
|
||||
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() {
|
||||
this.child.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);
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import { Schema } from "./validation";
|
||||
import type { ComponentNode } from "./component_node";
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Component Class
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
type Props = { [key: string]: any };
|
||||
|
||||
interface StaticComponentProperties {
|
||||
template: string;
|
||||
defaultProps?: any;
|
||||
props?: Schema;
|
||||
components?: { [componentName: string]: ComponentConstructor };
|
||||
}
|
||||
|
||||
export type ComponentConstructor<P extends Props = any, E = any> = (new (
|
||||
props: P,
|
||||
env: E,
|
||||
node: ComponentNode
|
||||
) => Component<P, E>) &
|
||||
StaticComponentProperties;
|
||||
|
||||
export class Component<Props = any, Env = any> {
|
||||
static template: string = "";
|
||||
static props?: any;
|
||||
static defaultProps?: any;
|
||||
|
||||
props: Props;
|
||||
env: Env;
|
||||
__owl__: ComponentNode;
|
||||
|
||||
constructor(props: Props, env: Env, node: ComponentNode) {
|
||||
this.props = props;
|
||||
this.env = env;
|
||||
this.__owl__ = node;
|
||||
}
|
||||
|
||||
setup() {}
|
||||
|
||||
render(deep: boolean = false) {
|
||||
this.__owl__.render(deep === true);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,413 @@
|
||||
import type { App, Env } from "./app";
|
||||
import { BDom, VNode } from "./blockdom";
|
||||
import {
|
||||
clearReactivesForCallback,
|
||||
getSubscriptions,
|
||||
NonReactive,
|
||||
Reactive,
|
||||
reactive,
|
||||
toRaw,
|
||||
TARGET,
|
||||
} from "./reactivity";
|
||||
import { batched, Callback } from "./utils";
|
||||
import { Component, ComponentConstructor } from "./component";
|
||||
import { fibersInError, handleError } from "./error_handling";
|
||||
import { Fiber, makeChildFiber, makeRootFiber, MountFiber, MountOptions } from "./fibers";
|
||||
import { STATUS } from "./status";
|
||||
|
||||
let currentNode: ComponentNode | null = null;
|
||||
|
||||
export function getCurrent(): ComponentNode {
|
||||
if (!currentNode) {
|
||||
throw new Error("No active component (a hook function should only be called in 'setup')");
|
||||
}
|
||||
return currentNode;
|
||||
}
|
||||
|
||||
export function useComponent(): Component {
|
||||
return currentNode!.component;
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply default props (only top level).
|
||||
*
|
||||
* Note that this method does modify in place the props
|
||||
*/
|
||||
function applyDefaultProps<P>(props: P, defaultProps: Partial<P>) {
|
||||
for (let propName in defaultProps) {
|
||||
if ((props as any)[propName] === undefined) {
|
||||
(props as any)[propName] = defaultProps[propName];
|
||||
}
|
||||
}
|
||||
}
|
||||
// -----------------------------------------------------------------------------
|
||||
// Integration with reactivity system (useState)
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
const batchedRenderFunctions = new WeakMap<ComponentNode, Callback>();
|
||||
/**
|
||||
* Creates a reactive object that will be observed by the current component.
|
||||
* Reading data from the returned object (eg during rendering) will cause the
|
||||
* component to subscribe to that data and be rerendered when it changes.
|
||||
*
|
||||
* @param state the state to observe
|
||||
* @returns a reactive object that will cause the component to re-render on
|
||||
* relevant changes
|
||||
* @see reactive
|
||||
*/
|
||||
export function useState<T extends object>(state: T): Reactive<T> | NonReactive<T> {
|
||||
const node = getCurrent();
|
||||
let render = batchedRenderFunctions.get(node)!;
|
||||
if (!render) {
|
||||
render = batched(node.render.bind(node, false));
|
||||
batchedRenderFunctions.set(node, render);
|
||||
// manual implementation of onWillDestroy to break cyclic dependency
|
||||
node.willDestroy.push(clearReactivesForCallback.bind(null, render));
|
||||
}
|
||||
return reactive(state, render);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// component function (used in compiled template code)
|
||||
// -----------------------------------------------------------------------------
|
||||
type Props = { [key: string]: any };
|
||||
|
||||
function arePropsDifferent(props1: Props, props2: Props): boolean {
|
||||
for (let k in props1) {
|
||||
const prop1 = props1[k] && typeof props1[k] === "object" ? toRaw(props1[k]) : props1[k];
|
||||
const prop2 = props2[k] && typeof props2[k] === "object" ? toRaw(props2[k]) : props2[k];
|
||||
if (prop1 !== prop2) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return Object.keys(props1).length !== Object.keys(props2).length;
|
||||
}
|
||||
|
||||
export function component<P extends Props>(
|
||||
name: string | ComponentConstructor<P>,
|
||||
props: P,
|
||||
key: string,
|
||||
ctx: ComponentNode,
|
||||
parent: any
|
||||
): ComponentNode<P> {
|
||||
let node: any = ctx.children[key];
|
||||
let isDynamic = typeof name !== "string";
|
||||
|
||||
if (node && node.status === STATUS.DESTROYED) {
|
||||
node = undefined;
|
||||
}
|
||||
if (isDynamic && node && node.component.constructor !== name) {
|
||||
node = undefined;
|
||||
}
|
||||
|
||||
const parentFiber = ctx.fiber!;
|
||||
if (node) {
|
||||
let shouldRender = node.forceNextRender;
|
||||
if (shouldRender) {
|
||||
node.forceNextRender = false;
|
||||
} else {
|
||||
const currentProps = node.component.props;
|
||||
shouldRender = parentFiber.deep || arePropsDifferent(currentProps, props);
|
||||
}
|
||||
if (shouldRender) {
|
||||
node.updateAndRender(props, parentFiber);
|
||||
}
|
||||
} else {
|
||||
// new component
|
||||
let C;
|
||||
if (isDynamic) {
|
||||
C = name;
|
||||
} else {
|
||||
C = parent.constructor.components[name as any];
|
||||
if (!C) {
|
||||
throw new Error(`Cannot find the definition of component "${name}"`);
|
||||
} else if (!(C.prototype instanceof Component)) {
|
||||
throw new Error(`"${name}" is not a Component. It must inherit from the Component class`);
|
||||
}
|
||||
}
|
||||
node = new ComponentNode(C, props, ctx.app, ctx, key);
|
||||
ctx.children[key] = node;
|
||||
node.initiateRender(new Fiber(node, parentFiber));
|
||||
}
|
||||
parentFiber.childrenMap[key] = node;
|
||||
return node;
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Component VNode class
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
type LifecycleHook = Function;
|
||||
|
||||
export class ComponentNode<P extends Props = any, E = any> implements VNode<ComponentNode<P, E>> {
|
||||
el?: HTMLElement | Text | undefined;
|
||||
app: App;
|
||||
fiber: Fiber | null = null;
|
||||
component: Component<P, E>;
|
||||
bdom: BDom | null = null;
|
||||
status: STATUS = STATUS.NEW;
|
||||
forceNextRender: boolean = false;
|
||||
parentKey: string | null;
|
||||
|
||||
renderFn: Function;
|
||||
parent: ComponentNode | null;
|
||||
level: number;
|
||||
childEnv: Env;
|
||||
children: { [key: string]: ComponentNode } = Object.create(null);
|
||||
refs: any = {};
|
||||
|
||||
willStart: LifecycleHook[] = [];
|
||||
willUpdateProps: LifecycleHook[] = [];
|
||||
willUnmount: LifecycleHook[] = [];
|
||||
mounted: LifecycleHook[] = [];
|
||||
willPatch: LifecycleHook[] = [];
|
||||
patched: LifecycleHook[] = [];
|
||||
willDestroy: LifecycleHook[] = [];
|
||||
|
||||
constructor(
|
||||
C: ComponentConstructor<P, E>,
|
||||
props: P,
|
||||
app: App,
|
||||
parent: ComponentNode | null,
|
||||
parentKey: string | null
|
||||
) {
|
||||
currentNode = this;
|
||||
this.app = app;
|
||||
this.parent = parent;
|
||||
this.parentKey = parentKey;
|
||||
this.level = parent ? parent.level + 1 : 0;
|
||||
const defaultProps = C.defaultProps;
|
||||
if (defaultProps) {
|
||||
applyDefaultProps(props, defaultProps);
|
||||
}
|
||||
const env = (parent && parent.childEnv) || app.env;
|
||||
this.childEnv = env;
|
||||
for (const key in props) {
|
||||
const prop = props[key];
|
||||
if (prop && typeof prop === "object" && prop[TARGET]) {
|
||||
props[key] = useState(prop);
|
||||
}
|
||||
}
|
||||
this.component = new C(props, env, this);
|
||||
this.renderFn = app.getTemplate(C.template).bind(this.component, this.component, this);
|
||||
this.component.setup();
|
||||
currentNode = null;
|
||||
}
|
||||
|
||||
mountComponent(target: any, options?: MountOptions) {
|
||||
const fiber = new MountFiber(this, target, options);
|
||||
this.app.scheduler.addFiber(fiber);
|
||||
this.initiateRender(fiber);
|
||||
}
|
||||
|
||||
async initiateRender(fiber: Fiber | MountFiber) {
|
||||
this.fiber = fiber;
|
||||
if (this.mounted.length) {
|
||||
fiber.root!.mounted.push(fiber);
|
||||
}
|
||||
const component = this.component;
|
||||
try {
|
||||
await Promise.all(this.willStart.map((f) => f.call(component)));
|
||||
} catch (e) {
|
||||
handleError({ node: this, error: e });
|
||||
return;
|
||||
}
|
||||
if (this.status === STATUS.NEW && this.fiber === fiber) {
|
||||
fiber.render();
|
||||
}
|
||||
}
|
||||
|
||||
async render(deep: boolean) {
|
||||
let current = this.fiber;
|
||||
if (current && (current.root!.locked || (current as any).bdom === true)) {
|
||||
await Promise.resolve();
|
||||
// situation may have changed after the microtask tick
|
||||
current = this.fiber;
|
||||
}
|
||||
if (current) {
|
||||
if (!current.bdom && !fibersInError.has(current)) {
|
||||
if (deep) {
|
||||
// we want the render from this point on to be with deep=true
|
||||
current.deep = deep;
|
||||
}
|
||||
return;
|
||||
}
|
||||
// if current rendering was with deep=true, we want this one to be the same
|
||||
deep = deep || current.deep;
|
||||
} else if (!this.bdom) {
|
||||
return;
|
||||
}
|
||||
|
||||
const fiber = makeRootFiber(this);
|
||||
fiber.deep = deep;
|
||||
this.fiber = fiber;
|
||||
|
||||
this.app.scheduler.addFiber(fiber);
|
||||
await Promise.resolve();
|
||||
if (this.status === STATUS.DESTROYED) {
|
||||
return;
|
||||
}
|
||||
// We only want to actually render the component if the following two
|
||||
// conditions are true:
|
||||
// * this.fiber: it could be null, in which case the render has been cancelled
|
||||
// * (current || !fiber.parent): if current is not null, this means that the
|
||||
// render function was called when a render was already occurring. In this
|
||||
// case, the pending rendering was cancelled, and the fiber needs to be
|
||||
// rendered to complete the work. If current is null, we check that the
|
||||
// fiber has no parent. If that is the case, the fiber was downgraded from
|
||||
// a root fiber to a child fiber in the previous microtick, because it was
|
||||
// embedded in a rendering coming from above, so the fiber will be rendered
|
||||
// in the next microtick anyway, so we should not render it again.
|
||||
if (this.fiber === fiber && (current || !fiber.parent)) {
|
||||
fiber.render();
|
||||
}
|
||||
}
|
||||
|
||||
destroy() {
|
||||
let shouldRemove = this.status === STATUS.MOUNTED;
|
||||
this._destroy();
|
||||
if (shouldRemove) {
|
||||
this.bdom!.remove();
|
||||
}
|
||||
}
|
||||
|
||||
_destroy() {
|
||||
const component = this.component;
|
||||
if (this.status === STATUS.MOUNTED) {
|
||||
for (let cb of this.willUnmount) {
|
||||
cb.call(component);
|
||||
}
|
||||
}
|
||||
for (let child of Object.values(this.children)) {
|
||||
child._destroy();
|
||||
}
|
||||
if (this.willDestroy.length) {
|
||||
try {
|
||||
for (let cb of this.willDestroy) {
|
||||
cb.call(component);
|
||||
}
|
||||
} catch (e) {
|
||||
handleError({ error: e, node: this });
|
||||
}
|
||||
}
|
||||
this.status = STATUS.DESTROYED;
|
||||
}
|
||||
|
||||
async updateAndRender(props: P, parentFiber: Fiber) {
|
||||
// update
|
||||
const fiber = makeChildFiber(this, parentFiber);
|
||||
this.fiber = fiber;
|
||||
const component = this.component;
|
||||
const defaultProps = (component.constructor as any).defaultProps;
|
||||
if (defaultProps) {
|
||||
applyDefaultProps(props, defaultProps);
|
||||
}
|
||||
|
||||
currentNode = this;
|
||||
for (const key in props) {
|
||||
const prop = props[key];
|
||||
if (prop && typeof prop === "object" && prop[TARGET]) {
|
||||
props[key] = useState(prop);
|
||||
}
|
||||
}
|
||||
currentNode = null;
|
||||
const prom = Promise.all(this.willUpdateProps.map((f) => f.call(component, props)));
|
||||
await prom;
|
||||
if (fiber !== this.fiber) {
|
||||
return;
|
||||
}
|
||||
component.props = props;
|
||||
fiber.render();
|
||||
const parentRoot = parentFiber.root!;
|
||||
if (this.willPatch.length) {
|
||||
parentRoot.willPatch.push(fiber);
|
||||
}
|
||||
if (this.patched.length) {
|
||||
parentRoot.patched.push(fiber);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Finds a child that has dom that is not yet updated, and update it. This
|
||||
* method is meant to be used only in the context of repatching the dom after
|
||||
* a mounted hook failed and was handled.
|
||||
*/
|
||||
updateDom() {
|
||||
if (!this.fiber) {
|
||||
return;
|
||||
}
|
||||
if (this.bdom === this.fiber!.bdom) {
|
||||
// If the error was handled by some child component, we need to find it to
|
||||
// apply its change
|
||||
for (let k in this.children) {
|
||||
const child = this.children[k];
|
||||
child.updateDom();
|
||||
}
|
||||
} else {
|
||||
// if we get here, this is the component that handled the error and rerendered
|
||||
// itself, so we can simply patch the dom
|
||||
this.bdom!.patch(this.fiber!.bdom, false);
|
||||
this.fiber!.appliedToDom = true;
|
||||
this.fiber = null;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Block DOM methods
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
firstNode(): Node | undefined {
|
||||
const bdom = this.bdom;
|
||||
return bdom ? bdom.firstNode() : undefined;
|
||||
}
|
||||
|
||||
mount(parent: HTMLElement, anchor: ChildNode) {
|
||||
const bdom = this.fiber!.bdom!;
|
||||
this.bdom = bdom;
|
||||
bdom.mount(parent, anchor);
|
||||
this.status = STATUS.MOUNTED;
|
||||
this.fiber!.appliedToDom = true;
|
||||
this.children = this.fiber!.childrenMap;
|
||||
this.fiber = null;
|
||||
}
|
||||
|
||||
moveBefore(other: ComponentNode | null, afterNode: Node | null) {
|
||||
this.bdom!.moveBefore(other ? other.bdom : null, afterNode);
|
||||
}
|
||||
|
||||
patch() {
|
||||
if (this.fiber && this.fiber.parent) {
|
||||
// we only patch here renderings coming from above. renderings initiated
|
||||
// by the component will be patched independently in the appropriate
|
||||
// fiber.complete
|
||||
this._patch();
|
||||
}
|
||||
}
|
||||
_patch() {
|
||||
const hasChildren = Object.keys(this.children).length > 0;
|
||||
this.children = this.fiber!.childrenMap;
|
||||
this.bdom!.patch(this!.fiber!.bdom!, hasChildren);
|
||||
this.fiber!.appliedToDom = true;
|
||||
this.fiber = null;
|
||||
}
|
||||
|
||||
beforeRemove() {
|
||||
this._destroy();
|
||||
}
|
||||
|
||||
remove() {
|
||||
this.bdom!.remove();
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Some debug helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
get name(): string {
|
||||
return this.component.constructor.name;
|
||||
}
|
||||
|
||||
get subscriptions(): ReturnType<typeof getSubscriptions> {
|
||||
const render = batchedRenderFunctions.get(this);
|
||||
return render ? getSubscriptions(render) : [];
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import type { ComponentNode } from "./component_node";
|
||||
import type { Fiber } from "./fibers";
|
||||
|
||||
// Maps fibers to thrown errors
|
||||
export const fibersInError: WeakMap<Fiber, any> = new WeakMap();
|
||||
export const nodeErrorHandlers: WeakMap<ComponentNode, ((error: any) => void)[]> = new WeakMap();
|
||||
|
||||
function _handleError(node: ComponentNode | null, error: any): boolean {
|
||||
if (!node) {
|
||||
return false;
|
||||
}
|
||||
const fiber = node.fiber;
|
||||
if (fiber) {
|
||||
fibersInError.set(fiber, error);
|
||||
}
|
||||
|
||||
const errorHandlers = nodeErrorHandlers.get(node);
|
||||
if (errorHandlers) {
|
||||
let handled = false;
|
||||
// execute in the opposite order
|
||||
for (let i = errorHandlers.length - 1; i >= 0; i--) {
|
||||
try {
|
||||
errorHandlers[i](error);
|
||||
handled = true;
|
||||
break;
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
}
|
||||
|
||||
if (handled) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return _handleError(node.parent, error);
|
||||
}
|
||||
|
||||
type ErrorParams = { error: any } & ({ node: ComponentNode } | { fiber: Fiber });
|
||||
export function handleError(params: ErrorParams) {
|
||||
const error = params.error;
|
||||
const node = "node" in params ? params.node : params.fiber.node;
|
||||
const fiber = "fiber" in params ? params.fiber : node.fiber!;
|
||||
|
||||
// resets the fibers on components if possible. This is important so that
|
||||
// new renderings can be properly included in the initial one, if any.
|
||||
let current: Fiber | null = fiber;
|
||||
do {
|
||||
current.node.fiber = current;
|
||||
current = current.parent;
|
||||
} while (current);
|
||||
|
||||
fibersInError.set(fiber.root!, error);
|
||||
|
||||
const handled = _handleError(node, error);
|
||||
if (!handled) {
|
||||
console.warn(`[Owl] Unhandled error. Destroying the root component`);
|
||||
try {
|
||||
node.app.destroy();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,264 @@
|
||||
import { BDom, mount } from "./blockdom";
|
||||
import type { ComponentNode } from "./component_node";
|
||||
import { fibersInError, handleError } from "./error_handling";
|
||||
import { STATUS } from "./status";
|
||||
|
||||
export function makeChildFiber(node: ComponentNode, parent: Fiber): Fiber {
|
||||
let current = node.fiber;
|
||||
if (current) {
|
||||
cancelFibers(current.children);
|
||||
current.root = null;
|
||||
}
|
||||
return new Fiber(node, parent);
|
||||
}
|
||||
|
||||
export function makeRootFiber(node: ComponentNode): Fiber {
|
||||
let current = node.fiber;
|
||||
if (current) {
|
||||
let root = current.root!;
|
||||
// lock root fiber because canceling children fibers may destroy components,
|
||||
// which means any arbitrary code can be run in onWillDestroy, which may
|
||||
// trigger new renderings
|
||||
root.locked = true;
|
||||
root.setCounter(root.counter + 1 - cancelFibers(current.children));
|
||||
root.locked = false;
|
||||
current.children = [];
|
||||
current.childrenMap = {};
|
||||
current.bdom = null;
|
||||
if (fibersInError.has(current)) {
|
||||
fibersInError.delete(current);
|
||||
fibersInError.delete(root);
|
||||
current.appliedToDom = false;
|
||||
}
|
||||
return current;
|
||||
}
|
||||
const fiber = new RootFiber(node, null);
|
||||
if (node.willPatch.length) {
|
||||
fiber.willPatch.push(fiber);
|
||||
}
|
||||
if (node.patched.length) {
|
||||
fiber.patched.push(fiber);
|
||||
}
|
||||
return fiber;
|
||||
}
|
||||
|
||||
function throwOnRender() {
|
||||
throw new Error("Attempted to render cancelled fiber");
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns number of not-yet rendered fibers cancelled
|
||||
*/
|
||||
function cancelFibers(fibers: Fiber[]): number {
|
||||
let result = 0;
|
||||
for (let fiber of fibers) {
|
||||
let node = fiber.node;
|
||||
fiber.render = throwOnRender;
|
||||
if (node.status === STATUS.NEW) {
|
||||
node.destroy();
|
||||
}
|
||||
node.fiber = null;
|
||||
if (fiber.bdom) {
|
||||
// if fiber has been rendered, this means that the component props have
|
||||
// been updated. however, this fiber will not be patched to the dom, so
|
||||
// it could happen that the next render compare the current props with
|
||||
// the same props, and skip the render completely. With the next line,
|
||||
// we kindly request the component code to force a render, so it works as
|
||||
// expected.
|
||||
node.forceNextRender = true;
|
||||
} else {
|
||||
result++;
|
||||
}
|
||||
result += cancelFibers(fiber.children);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
export class Fiber {
|
||||
node: ComponentNode;
|
||||
bdom: BDom | null = null;
|
||||
root: RootFiber | null; // A Fiber that has been replaced by another has no root
|
||||
parent: Fiber | null;
|
||||
children: Fiber[] = [];
|
||||
appliedToDom = false;
|
||||
deep: boolean = false;
|
||||
childrenMap: ComponentNode["children"] = {};
|
||||
|
||||
constructor(node: ComponentNode, parent: Fiber | null) {
|
||||
this.node = node;
|
||||
this.parent = parent;
|
||||
if (parent) {
|
||||
this.deep = parent.deep;
|
||||
const root = parent.root!;
|
||||
root.setCounter(root.counter + 1);
|
||||
this.root = root;
|
||||
parent.children.push(this);
|
||||
} else {
|
||||
this.root = this as any;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
// if some parent has a fiber => register in followup
|
||||
let prev = this.root!.node;
|
||||
let scheduler = prev.app.scheduler;
|
||||
let current = prev.parent;
|
||||
while (current) {
|
||||
if (current.fiber) {
|
||||
let root = current.fiber.root!;
|
||||
if (root.counter === 0 && prev.parentKey! in current.fiber.childrenMap) {
|
||||
current = root.node;
|
||||
} else {
|
||||
scheduler.delayedRenders.push(this);
|
||||
return;
|
||||
}
|
||||
}
|
||||
prev = current;
|
||||
current = current.parent;
|
||||
}
|
||||
|
||||
// there are no current rendering from above => we can render
|
||||
this._render();
|
||||
}
|
||||
|
||||
_render() {
|
||||
const node = this.node;
|
||||
const root = this.root;
|
||||
if (root) {
|
||||
try {
|
||||
(this.bdom as any) = true;
|
||||
this.bdom = node.renderFn();
|
||||
} catch (e) {
|
||||
handleError({ node, error: e });
|
||||
}
|
||||
root.setCounter(root.counter - 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export class RootFiber extends Fiber {
|
||||
counter: number = 1;
|
||||
|
||||
// only add stuff in this if they have registered some hooks
|
||||
willPatch: Fiber[] = [];
|
||||
patched: Fiber[] = [];
|
||||
mounted: Fiber[] = [];
|
||||
// A fiber is typically locked when it is completing and the patch has not, or is being applied.
|
||||
// i.e.: render triggered in onWillUnmount or in willPatch will be delayed
|
||||
locked: boolean = false;
|
||||
|
||||
complete() {
|
||||
const node = this.node;
|
||||
this.locked = true;
|
||||
let current: Fiber | undefined = undefined;
|
||||
try {
|
||||
// Step 1: calling all willPatch lifecycle hooks
|
||||
for (current of this.willPatch) {
|
||||
// because of the asynchronous nature of the rendering, some parts of the
|
||||
// UI may have been rendered, then deleted in a followup rendering, and we
|
||||
// do not want to call onWillPatch in that case.
|
||||
let node = current.node;
|
||||
if (node.fiber === current) {
|
||||
const component = node.component;
|
||||
for (let cb of node.willPatch) {
|
||||
cb.call(component);
|
||||
}
|
||||
}
|
||||
}
|
||||
current = undefined;
|
||||
|
||||
// Step 2: patching the dom
|
||||
node._patch();
|
||||
this.locked = false;
|
||||
|
||||
// Step 4: calling all mounted lifecycle hooks
|
||||
let mountedFibers = this.mounted;
|
||||
while ((current = mountedFibers.pop())) {
|
||||
current = current;
|
||||
if (current.appliedToDom) {
|
||||
for (let cb of current.node.mounted) {
|
||||
cb();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Step 5: calling all patched hooks
|
||||
let patchedFibers = this.patched;
|
||||
while ((current = patchedFibers.pop())) {
|
||||
current = current;
|
||||
if (current.appliedToDom) {
|
||||
for (let cb of current.node.patched) {
|
||||
cb();
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
this.locked = false;
|
||||
handleError({ fiber: current || this, error: e });
|
||||
}
|
||||
}
|
||||
|
||||
setCounter(newValue: number) {
|
||||
this.counter = newValue;
|
||||
if (newValue === 0) {
|
||||
this.node.app.scheduler.flush();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
type Position = "first-child" | "last-child";
|
||||
|
||||
export interface MountOptions {
|
||||
position?: Position;
|
||||
}
|
||||
|
||||
export class MountFiber extends RootFiber {
|
||||
target: HTMLElement;
|
||||
position: Position;
|
||||
|
||||
constructor(node: ComponentNode, target: HTMLElement, options: MountOptions = {}) {
|
||||
super(node, null);
|
||||
this.target = target;
|
||||
this.position = options.position || "last-child";
|
||||
}
|
||||
complete() {
|
||||
let current: Fiber | undefined = this;
|
||||
try {
|
||||
const node = this.node;
|
||||
node.children = this.childrenMap;
|
||||
(node.app.constructor as any).validateTarget(this.target);
|
||||
if (node.bdom) {
|
||||
// this is a complicated situation: if we mount a fiber with an existing
|
||||
// bdom, this means that this same fiber was already completed, mounted,
|
||||
// but a crash occurred in some mounted hook. Then, it was handled and
|
||||
// the new rendering is being applied.
|
||||
node.updateDom();
|
||||
} else {
|
||||
node.bdom = this.bdom;
|
||||
if (this.position === "last-child" || this.target.childNodes.length === 0) {
|
||||
mount(node.bdom!, this.target);
|
||||
} else {
|
||||
const firstChild = this.target.childNodes[0];
|
||||
mount(node.bdom!, this.target, firstChild);
|
||||
}
|
||||
}
|
||||
|
||||
// unregistering the fiber before mounted since it can do another render
|
||||
// and that the current rendering is obviously completed
|
||||
node.fiber = null;
|
||||
|
||||
node.status = STATUS.MOUNTED;
|
||||
this.appliedToDom = true;
|
||||
let mountedFibers = this.mounted;
|
||||
while ((current = mountedFibers.pop())) {
|
||||
if (current.appliedToDom) {
|
||||
for (let cb of current.node.mounted) {
|
||||
cb();
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
handleError({ fiber: current as Fiber, error: e });
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import { filterOutModifiersFromData } from "./blockdom/config";
|
||||
import { STATUS } from "./status";
|
||||
|
||||
export const mainEventHandler = (data: any, ev: Event, currentTarget?: EventTarget | null) => {
|
||||
const { data: _data, modifiers } = filterOutModifiersFromData(data);
|
||||
data = _data;
|
||||
let stopped = false;
|
||||
if (modifiers.length) {
|
||||
let selfMode = false;
|
||||
const isSelf = ev.target === currentTarget;
|
||||
for (const mod of modifiers) {
|
||||
switch (mod) {
|
||||
case "self":
|
||||
selfMode = true;
|
||||
if (isSelf) {
|
||||
continue;
|
||||
} else {
|
||||
return stopped;
|
||||
}
|
||||
case "prevent":
|
||||
if ((selfMode && isSelf) || !selfMode) ev.preventDefault();
|
||||
continue;
|
||||
case "stop":
|
||||
if ((selfMode && isSelf) || !selfMode) ev.stopPropagation();
|
||||
stopped = true;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
}
|
||||
// If handler is empty, the array slot 0 will also be empty, and data will not have the property 0
|
||||
// We check this rather than data[0] being truthy (or typeof function) so that it crashes
|
||||
// as expected when there is a handler expression that evaluates to a falsy value
|
||||
if (Object.hasOwnProperty.call(data, 0)) {
|
||||
const handler = data[0];
|
||||
if (typeof handler !== "function") {
|
||||
throw new Error(`Invalid handler (expected a function, received: '${handler}')`);
|
||||
}
|
||||
let node = data[1] ? data[1].__owl__ : null;
|
||||
if (node ? node.status === STATUS.MOUNTED : true) {
|
||||
handler.call(node ? node.component : null, ev);
|
||||
}
|
||||
}
|
||||
return stopped;
|
||||
};
|
||||
@@ -0,0 +1,129 @@
|
||||
import type { Env } from "./app";
|
||||
import { getCurrent } from "./component_node";
|
||||
import { onMounted, onPatched, onWillUnmount } from "./lifecycle_hooks";
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// useRef
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* The purpose of this hook is to allow components to get a reference to a sub
|
||||
* html node or component.
|
||||
*/
|
||||
export function useRef<T extends HTMLElement = HTMLElement>(name: string): { el: T | null } {
|
||||
const node = getCurrent();
|
||||
const refs = node.refs;
|
||||
return {
|
||||
get el(): T | null {
|
||||
return refs[name] || null;
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// useEnv and useSubEnv
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* This hook is useful as a building block for some customized hooks, that may
|
||||
* need a reference to the env of the component calling them.
|
||||
*/
|
||||
export function useEnv<E extends Env>(): E {
|
||||
return getCurrent().component.env as any;
|
||||
}
|
||||
|
||||
function extendEnv(currentEnv: Object, extension: Object): Object {
|
||||
const env = Object.create(currentEnv);
|
||||
const descrs = Object.getOwnPropertyDescriptors(extension);
|
||||
return Object.freeze(Object.defineProperties(env, descrs));
|
||||
}
|
||||
|
||||
/**
|
||||
* This hook is a simple way to let components use a sub environment. Note that
|
||||
* like for all hooks, it is important that this is only called in the
|
||||
* constructor method.
|
||||
*/
|
||||
export function useSubEnv(envExtension: Env) {
|
||||
const node = getCurrent();
|
||||
node.component.env = extendEnv(node.component.env as any, envExtension);
|
||||
useChildSubEnv(envExtension);
|
||||
}
|
||||
|
||||
export function useChildSubEnv(envExtension: Env) {
|
||||
const node = getCurrent();
|
||||
node.childEnv = extendEnv(node.childEnv, envExtension);
|
||||
}
|
||||
// -----------------------------------------------------------------------------
|
||||
// useEffect
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* @param {...any} dependencies the dependencies computed by computeDependencies
|
||||
* @returns {void|(()=>void)} a cleanup function that reverses the side
|
||||
* effects of the effect callback.
|
||||
*/
|
||||
type Effect = (...dependencies: any[]) => void | (() => void);
|
||||
|
||||
/**
|
||||
* This hook will run a callback when a component is mounted and patched, and
|
||||
* will run a cleanup function before patching and before unmounting the
|
||||
* the component.
|
||||
*
|
||||
* @param {Effect} effect the effect to run on component mount and/or patch
|
||||
* @param {()=>any[]} [computeDependencies=()=>[NaN]] a callback to compute
|
||||
* dependencies that will decide if the effect needs to be cleaned up and
|
||||
* run again. If the dependencies did not change, the effect will not run
|
||||
* again. The default value returns an array containing only NaN because
|
||||
* NaN !== NaN, which will cause the effect to rerun on every patch.
|
||||
*/
|
||||
export function useEffect(effect: Effect, computeDependencies: () => any[] = () => [NaN]) {
|
||||
let cleanup: (() => void) | void;
|
||||
let dependencies: any[];
|
||||
onMounted(() => {
|
||||
dependencies = computeDependencies();
|
||||
cleanup = effect(...dependencies);
|
||||
});
|
||||
|
||||
onPatched(() => {
|
||||
const newDeps = computeDependencies();
|
||||
const shouldReapply = newDeps.some((val, i) => val !== dependencies[i]);
|
||||
if (shouldReapply) {
|
||||
dependencies = newDeps;
|
||||
if (cleanup) {
|
||||
cleanup();
|
||||
}
|
||||
cleanup = effect(...dependencies);
|
||||
}
|
||||
});
|
||||
|
||||
onWillUnmount(() => cleanup && cleanup());
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// useExternalListener
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* When a component needs to listen to DOM Events on element(s) that are not
|
||||
* part of his hierarchy, we can use the `useExternalListener` hook.
|
||||
* It will correctly add and remove the event listener, whenever the
|
||||
* component is mounted and unmounted.
|
||||
*
|
||||
* Example:
|
||||
* a menu needs to listen to the click on window to be closed automatically
|
||||
*
|
||||
* Usage:
|
||||
* in the constructor of the OWL component that needs to be notified,
|
||||
* `useExternalListener(window, 'click', this._doSomething);`
|
||||
* */
|
||||
export function useExternalListener(
|
||||
target: HTMLElement | typeof window,
|
||||
eventName: string,
|
||||
handler: EventListener,
|
||||
eventParams?: AddEventListenerOptions
|
||||
) {
|
||||
const node = getCurrent();
|
||||
const boundHandler = handler.bind(node.component);
|
||||
onMounted(() => target.addEventListener(eventName, boundHandler, eventParams));
|
||||
onWillUnmount(() => target.removeEventListener(eventName, boundHandler, eventParams));
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import {
|
||||
config,
|
||||
createBlock,
|
||||
html,
|
||||
list,
|
||||
mount as blockMount,
|
||||
multi,
|
||||
patch,
|
||||
remove,
|
||||
text,
|
||||
toggler,
|
||||
comment,
|
||||
} from "./blockdom";
|
||||
import { mainEventHandler } from "./handler";
|
||||
export type { Reactive } from "./reactivity";
|
||||
|
||||
config.shouldNormalizeDom = false;
|
||||
config.mainEventHandler = mainEventHandler;
|
||||
|
||||
export const blockDom = {
|
||||
config,
|
||||
// bdom entry points
|
||||
mount: blockMount,
|
||||
patch,
|
||||
remove,
|
||||
// bdom block types
|
||||
list,
|
||||
multi,
|
||||
text,
|
||||
toggler,
|
||||
createBlock,
|
||||
html,
|
||||
comment,
|
||||
};
|
||||
|
||||
export { App, mount } from "./app";
|
||||
export { xml } from "./template_set";
|
||||
export { Component } from "./component";
|
||||
export { useComponent, useState } from "./component_node";
|
||||
export { status } from "./status";
|
||||
export { reactive, markRaw, toRaw } from "./reactivity";
|
||||
export { useEffect, useEnv, useExternalListener, useRef, useChildSubEnv, useSubEnv } from "./hooks";
|
||||
export { EventBus, whenReady, loadFile, markup } from "./utils";
|
||||
export {
|
||||
onWillStart,
|
||||
onMounted,
|
||||
onWillUnmount,
|
||||
onWillUpdateProps,
|
||||
onWillPatch,
|
||||
onPatched,
|
||||
onWillRender,
|
||||
onRendered,
|
||||
onWillDestroy,
|
||||
onError,
|
||||
} from "./lifecycle_hooks";
|
||||
export { validate } from "./validation";
|
||||
|
||||
export const __info__ = {};
|
||||
@@ -0,0 +1,122 @@
|
||||
import { getCurrent } from "./component_node";
|
||||
import { nodeErrorHandlers } from "./error_handling";
|
||||
|
||||
const TIMEOUT = Symbol("timeout");
|
||||
function wrapError(fn: (...args: any[]) => any, hookName: string) {
|
||||
const error = new Error(`The following error occurred in ${hookName}: `) as Error & {
|
||||
cause: any;
|
||||
};
|
||||
const timeoutError = new Error(`${hookName}'s promise hasn't resolved after 3 seconds`);
|
||||
const node = getCurrent();
|
||||
return (...args: any[]) => {
|
||||
try {
|
||||
const result = fn(...args);
|
||||
if (result instanceof Promise) {
|
||||
if (hookName === "onWillStart" || hookName === "onWillUpdateProps") {
|
||||
const fiber = node.fiber;
|
||||
Promise.race([
|
||||
result,
|
||||
new Promise((resolve) => setTimeout(() => resolve(TIMEOUT), 3000)),
|
||||
]).then((res) => {
|
||||
if (res === TIMEOUT && node.fiber === fiber) {
|
||||
console.warn(timeoutError);
|
||||
}
|
||||
});
|
||||
}
|
||||
return result.catch((cause) => {
|
||||
error.cause = cause;
|
||||
if (cause instanceof Error) {
|
||||
error.message += `"${cause.message}"`;
|
||||
}
|
||||
throw error;
|
||||
});
|
||||
}
|
||||
return result;
|
||||
} catch (cause) {
|
||||
if (cause instanceof Error) {
|
||||
error.message += `"${cause.message}"`;
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// hooks
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
export function onWillStart(fn: () => Promise<void> | void | any) {
|
||||
const node = getCurrent();
|
||||
const decorate = node.app.dev ? wrapError : (fn: any) => fn;
|
||||
node.willStart.push(decorate(fn.bind(node.component), "onWillStart"));
|
||||
}
|
||||
|
||||
export function onWillUpdateProps(fn: (nextProps: any) => Promise<void> | void | any) {
|
||||
const node = getCurrent();
|
||||
const decorate = node.app.dev ? wrapError : (fn: any) => fn;
|
||||
node.willUpdateProps.push(decorate(fn.bind(node.component), "onWillUpdateProps"));
|
||||
}
|
||||
|
||||
export function onMounted(fn: () => void | any) {
|
||||
const node = getCurrent();
|
||||
const decorate = node.app.dev ? wrapError : (fn: any) => fn;
|
||||
node.mounted.push(decorate(fn.bind(node.component), "onMounted"));
|
||||
}
|
||||
|
||||
export function onWillPatch(fn: () => Promise<void> | any | void) {
|
||||
const node = getCurrent();
|
||||
const decorate = node.app.dev ? wrapError : (fn: any) => fn;
|
||||
node.willPatch.unshift(decorate(fn.bind(node.component), "onWillPatch"));
|
||||
}
|
||||
|
||||
export function onPatched(fn: () => void | any) {
|
||||
const node = getCurrent();
|
||||
const decorate = node.app.dev ? wrapError : (fn: any) => fn;
|
||||
node.patched.push(decorate(fn.bind(node.component), "onPatched"));
|
||||
}
|
||||
|
||||
export function onWillUnmount(fn: () => Promise<void> | void | any) {
|
||||
const node = getCurrent();
|
||||
const decorate = node.app.dev ? wrapError : (fn: any) => fn;
|
||||
node.willUnmount.unshift(decorate(fn.bind(node.component), "onWillUnmount"));
|
||||
}
|
||||
|
||||
export function onWillDestroy(fn: () => Promise<void> | void | any) {
|
||||
const node = getCurrent();
|
||||
const decorate = node.app.dev ? wrapError : (fn: any) => fn;
|
||||
node.willDestroy.push(decorate(fn.bind(node.component), "onWillDestroy"));
|
||||
}
|
||||
|
||||
export function onWillRender(fn: () => void | any) {
|
||||
const node = getCurrent();
|
||||
const renderFn = node.renderFn;
|
||||
const decorate = node.app.dev ? wrapError : (fn: any) => fn;
|
||||
fn = decorate(fn.bind(node.component), "onWillRender");
|
||||
node.renderFn = () => {
|
||||
fn();
|
||||
return renderFn();
|
||||
};
|
||||
}
|
||||
|
||||
export function onRendered(fn: () => void | any) {
|
||||
const node = getCurrent();
|
||||
const renderFn = node.renderFn;
|
||||
const decorate = node.app.dev ? wrapError : (fn: any) => fn;
|
||||
fn = decorate(fn.bind(node.component), "onRendered");
|
||||
node.renderFn = () => {
|
||||
const result = renderFn();
|
||||
fn();
|
||||
return result;
|
||||
};
|
||||
}
|
||||
|
||||
type OnErrorCallback = (error: any) => void | any;
|
||||
export function onError(callback: OnErrorCallback) {
|
||||
const node = getCurrent();
|
||||
let handlers = nodeErrorHandlers.get(node);
|
||||
if (!handlers) {
|
||||
handlers = [];
|
||||
nodeErrorHandlers.set(node, handlers);
|
||||
}
|
||||
handlers.push(callback.bind(node.component));
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
import { onWillUnmount } from "./lifecycle_hooks";
|
||||
import { BDom, text, VNode } from "./blockdom";
|
||||
import { Component } from "./component";
|
||||
|
||||
const VText: any = text("").constructor;
|
||||
|
||||
class VPortal extends VText implements Partial<VNode<VPortal>> {
|
||||
// selector: string;
|
||||
realBDom: BDom | null;
|
||||
target: HTMLElement | null = null;
|
||||
|
||||
constructor(selector: string, realBDom: BDom) {
|
||||
super("");
|
||||
this.selector = selector;
|
||||
this.realBDom = realBDom;
|
||||
}
|
||||
mount(parent: HTMLElement, anchor: ChildNode) {
|
||||
super.mount(parent, anchor);
|
||||
this.target = document.querySelector(this.selector) as any;
|
||||
if (!this.target) {
|
||||
let el: any = this.el;
|
||||
while (el && el.parentElement instanceof HTMLElement) {
|
||||
el = el.parentElement;
|
||||
}
|
||||
this.target = el && el.querySelector(this.selector);
|
||||
if (!this.target) {
|
||||
throw new Error("invalid portal target");
|
||||
}
|
||||
}
|
||||
this.realBDom!.mount(this.target!, null);
|
||||
}
|
||||
|
||||
beforeRemove() {
|
||||
this.realBDom!.beforeRemove();
|
||||
}
|
||||
remove() {
|
||||
if (this.realBDom) {
|
||||
super.remove();
|
||||
this.realBDom!.remove();
|
||||
this.realBDom = null;
|
||||
}
|
||||
}
|
||||
|
||||
patch(other: VPortal) {
|
||||
super.patch(other);
|
||||
if (this.realBDom) {
|
||||
this.realBDom.patch(other.realBDom!, true);
|
||||
} else {
|
||||
this.realBDom = other.realBDom;
|
||||
this.realBDom!.mount(this.target!, null);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* <t t-slot="default"/>
|
||||
*/
|
||||
export function portalTemplate(app: any, bdom: any, helpers: any) {
|
||||
let { callSlot } = helpers;
|
||||
return function template(ctx: any, node: any, key = "") {
|
||||
return callSlot(ctx, node, key, "default", false, null);
|
||||
};
|
||||
}
|
||||
|
||||
export class Portal extends Component {
|
||||
static template = "__portal__";
|
||||
static props = {
|
||||
target: {
|
||||
type: String,
|
||||
},
|
||||
slots: true,
|
||||
};
|
||||
|
||||
setup() {
|
||||
const node = this.__owl__;
|
||||
const renderFn = node.renderFn;
|
||||
node.renderFn = () => new VPortal(this.props.target, renderFn());
|
||||
onWillUnmount(() => {
|
||||
if (node.bdom) {
|
||||
node.bdom.remove();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,457 @@
|
||||
import { Callback } from "./utils";
|
||||
|
||||
// Allows to get the target of a Reactive (used for making a new Reactive from the underlying object)
|
||||
export const TARGET = Symbol("Target");
|
||||
// Escape hatch to prevent reactivity system to turn something into a reactive
|
||||
const SKIP = Symbol("Skip");
|
||||
// Special key to subscribe to, to be notified of key creation/deletion
|
||||
const KEYCHANGES = Symbol("Key changes");
|
||||
|
||||
type Target = object;
|
||||
type Collection = Set<any> | Map<any, any> | WeakMap<any, any>;
|
||||
type CollectionRawType = "Set" | "Map" | "WeakMap";
|
||||
|
||||
export type Reactive<T extends Target = Target> = T & {
|
||||
[TARGET]: any;
|
||||
};
|
||||
|
||||
export type NonReactive<T extends Target = Target> = T & {
|
||||
[SKIP]: any;
|
||||
};
|
||||
|
||||
const objectToString = Object.prototype.toString;
|
||||
const objectHasOwnProperty = Object.prototype.hasOwnProperty;
|
||||
|
||||
const SUPPORTED_RAW_TYPES = new Set(["Object", "Array", "Set", "Map", "WeakMap"]);
|
||||
const COLLECTION_RAWTYPES = new Set(["Set", "Map", "WeakMap"]);
|
||||
|
||||
/**
|
||||
* extract "RawType" from strings like "[object RawType]" => this lets us ignore
|
||||
* many native objects such as Promise (whose toString is [object Promise])
|
||||
* or Date ([object Date]), while also supporting collections without using
|
||||
* instanceof in a loop
|
||||
*
|
||||
* @param obj the object to check
|
||||
* @returns the raw type of the object
|
||||
*/
|
||||
function rawType(obj: any) {
|
||||
return objectToString.call(obj).slice(8, -1);
|
||||
}
|
||||
/**
|
||||
* Checks whether a given value can be made into a reactive object.
|
||||
*
|
||||
* @param value the value to check
|
||||
* @returns whether the value can be made reactive
|
||||
*/
|
||||
function canBeMadeReactive(value: any): boolean {
|
||||
if (typeof value !== "object") {
|
||||
return false;
|
||||
}
|
||||
return SUPPORTED_RAW_TYPES.has(rawType(value));
|
||||
}
|
||||
/**
|
||||
* Creates a reactive from the given object/callback if possible and returns it,
|
||||
* returns the original object otherwise.
|
||||
*
|
||||
* @param value the value make reactive
|
||||
* @returns a reactive for the given object when possible, the original otherwise
|
||||
*/
|
||||
function possiblyReactive(val: any, cb: Callback) {
|
||||
return canBeMadeReactive(val) ? reactive(val, cb) : val;
|
||||
}
|
||||
|
||||
/**
|
||||
* Mark an object or array so that it is ignored by the reactivity system
|
||||
*
|
||||
* @param value the value to mark
|
||||
* @returns the object itself
|
||||
*/
|
||||
export function markRaw<T extends Target>(value: T): NonReactive<T> {
|
||||
(value as any)[SKIP] = true;
|
||||
return value as NonReactive<T>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Given a reactive objet, return the raw (non reactive) underlying object
|
||||
*
|
||||
* @param value a reactive value
|
||||
* @returns the underlying value
|
||||
*/
|
||||
export function toRaw<T extends object>(value: Reactive<T>): T {
|
||||
return value[TARGET] || value;
|
||||
}
|
||||
|
||||
const targetToKeysToCallbacks = new WeakMap<Target, Map<PropertyKey, Set<Callback>>>();
|
||||
/**
|
||||
* Observes a given key on a target with an callback. The callback will be
|
||||
* called when the given key changes on the target.
|
||||
*
|
||||
* @param target the target whose key should be observed
|
||||
* @param key the key to observe (or Symbol(KEYCHANGES) for key creation
|
||||
* or deletion)
|
||||
* @param callback the function to call when the key changes
|
||||
*/
|
||||
function observeTargetKey(target: Target, key: PropertyKey, callback: Callback): void {
|
||||
if (!targetToKeysToCallbacks.get(target)) {
|
||||
targetToKeysToCallbacks.set(target, new Map());
|
||||
}
|
||||
const keyToCallbacks = targetToKeysToCallbacks.get(target)!;
|
||||
if (!keyToCallbacks.get(key)) {
|
||||
keyToCallbacks.set(key, new Set());
|
||||
}
|
||||
keyToCallbacks.get(key)!.add(callback);
|
||||
if (!callbacksToTargets.has(callback)) {
|
||||
callbacksToTargets.set(callback, new Set());
|
||||
}
|
||||
callbacksToTargets.get(callback)!.add(target);
|
||||
}
|
||||
/**
|
||||
* Notify Reactives that are observing a given target that a key has changed on
|
||||
* the target.
|
||||
*
|
||||
* @param target target whose Reactives should be notified that the target was
|
||||
* changed.
|
||||
* @param key the key that changed (or Symbol `KEYCHANGES` if a key was created
|
||||
* or deleted)
|
||||
*/
|
||||
function notifyReactives(target: Target, key: PropertyKey): void {
|
||||
const keyToCallbacks = targetToKeysToCallbacks.get(target);
|
||||
if (!keyToCallbacks) {
|
||||
return;
|
||||
}
|
||||
const callbacks = keyToCallbacks.get(key);
|
||||
if (!callbacks) {
|
||||
return;
|
||||
}
|
||||
// Loop on copy because clearReactivesForCallback will modify the set in place
|
||||
for (const callback of [...callbacks]) {
|
||||
clearReactivesForCallback(callback);
|
||||
callback();
|
||||
}
|
||||
}
|
||||
|
||||
const callbacksToTargets = new WeakMap<Callback, Set<Target>>();
|
||||
/**
|
||||
* Clears all subscriptions of the Reactives associated with a given callback.
|
||||
*
|
||||
* @param callback the callback for which the reactives need to be cleared
|
||||
*/
|
||||
export function clearReactivesForCallback(callback: Callback): void {
|
||||
const targetsToClear = callbacksToTargets.get(callback);
|
||||
if (!targetsToClear) {
|
||||
return;
|
||||
}
|
||||
for (const target of targetsToClear) {
|
||||
const observedKeys = targetToKeysToCallbacks.get(target);
|
||||
if (!observedKeys) {
|
||||
continue;
|
||||
}
|
||||
for (const callbacks of observedKeys.values()) {
|
||||
callbacks.delete(callback);
|
||||
}
|
||||
}
|
||||
targetsToClear.clear();
|
||||
}
|
||||
|
||||
export function getSubscriptions(callback: Callback) {
|
||||
const targets = callbacksToTargets.get(callback) || [];
|
||||
return [...targets].map((target) => {
|
||||
const keysToCallbacks = targetToKeysToCallbacks.get(target);
|
||||
return {
|
||||
target,
|
||||
keys: keysToCallbacks ? [...keysToCallbacks.keys()] : [],
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
const reactiveCache = new WeakMap<Target, WeakMap<Callback, Reactive>>();
|
||||
/**
|
||||
* Creates a reactive proxy for an object. Reading data on the reactive object
|
||||
* subscribes to changes to the data. Writing data on the object will cause the
|
||||
* notify callback to be called if there are suscriptions to that data. Nested
|
||||
* objects and arrays are automatically made reactive as well.
|
||||
*
|
||||
* Whenever you are notified of a change, all subscriptions are cleared, and if
|
||||
* you would like to be notified of any further changes, you should go read
|
||||
* the underlying data again. We assume that if you don't go read it again after
|
||||
* being notified, it means that you are no longer interested in that data.
|
||||
*
|
||||
* Subscriptions:
|
||||
* + Reading a property on an object will subscribe you to changes in the value
|
||||
* of that property.
|
||||
* + Accessing an object keys (eg with Object.keys or with `for..in`) will
|
||||
* subscribe you to the creation/deletion of keys. Checking the presence of a
|
||||
* key on the object with 'in' has the same effect.
|
||||
* - getOwnPropertyDescriptor does not currently subscribe you to the property.
|
||||
* This is a choice that was made because changing a key's value will trigger
|
||||
* this trap and we do not want to subscribe by writes. This also means that
|
||||
* Object.hasOwnProperty doesn't subscribe as it goes through this trap.
|
||||
*
|
||||
* @param target the object for which to create a reactive proxy
|
||||
* @param callback the function to call when an observed property of the
|
||||
* reactive has changed
|
||||
* @returns a proxy that tracks changes to it
|
||||
*/
|
||||
export function reactive<T extends Target>(
|
||||
target: T,
|
||||
callback: Callback = () => {}
|
||||
): Reactive<T> | NonReactive<T> {
|
||||
if (!canBeMadeReactive(target)) {
|
||||
throw new Error(`Cannot make the given value reactive`);
|
||||
}
|
||||
if (SKIP in target) {
|
||||
return target as NonReactive<T>;
|
||||
}
|
||||
const originalTarget = (target as Reactive)[TARGET];
|
||||
if (originalTarget) {
|
||||
return reactive(originalTarget, callback);
|
||||
}
|
||||
if (!reactiveCache.has(target)) {
|
||||
reactiveCache.set(target, new WeakMap());
|
||||
}
|
||||
const reactivesForTarget = reactiveCache.get(target)!;
|
||||
if (!reactivesForTarget.has(callback)) {
|
||||
const targetRawType = rawType(target);
|
||||
const handler = COLLECTION_RAWTYPES.has(targetRawType)
|
||||
? collectionsProxyHandler(target as Collection, callback, targetRawType as CollectionRawType)
|
||||
: basicProxyHandler<T>(callback);
|
||||
const proxy = new Proxy(target, handler as ProxyHandler<T>) as Reactive<T>;
|
||||
reactivesForTarget.set(callback, proxy);
|
||||
}
|
||||
return reactivesForTarget.get(callback) as Reactive<T>;
|
||||
}
|
||||
/**
|
||||
* Creates a basic proxy handler for regular objects and arrays.
|
||||
*
|
||||
* @param callback @see reactive
|
||||
* @returns a proxy handler object
|
||||
*/
|
||||
function basicProxyHandler<T extends Target>(callback: Callback): ProxyHandler<T> {
|
||||
return {
|
||||
get(target: any, key: PropertyKey, proxy: Reactive<T>) {
|
||||
if (key === TARGET) {
|
||||
return target;
|
||||
}
|
||||
// non-writable non-configurable properties cannot be made reactive
|
||||
const desc = Object.getOwnPropertyDescriptor(target, key);
|
||||
if (desc && !desc.writable && !desc.configurable) {
|
||||
return Reflect.get(target, key, proxy);
|
||||
}
|
||||
observeTargetKey(target, key, callback);
|
||||
return possiblyReactive(Reflect.get(target, key, proxy), callback);
|
||||
},
|
||||
set(target, key, value, proxy) {
|
||||
const isNewKey = !objectHasOwnProperty.call(target, key);
|
||||
const originalValue = Reflect.get(target, key, proxy);
|
||||
const ret = Reflect.set(target, key, value, proxy);
|
||||
if (isNewKey) {
|
||||
notifyReactives(target, KEYCHANGES);
|
||||
}
|
||||
// While Array length may trigger the set trap, it's not actually set by this
|
||||
// method but is updated behind the scenes, and the trap is not called with the
|
||||
// new value. We disable the "same-value-optimization" for it because of that.
|
||||
if (originalValue !== value || (Array.isArray(target) && key === "length")) {
|
||||
notifyReactives(target, key);
|
||||
}
|
||||
return ret;
|
||||
},
|
||||
deleteProperty(target, key) {
|
||||
const ret = Reflect.deleteProperty(target, key);
|
||||
// TODO: only notify when something was actually deleted
|
||||
notifyReactives(target, KEYCHANGES);
|
||||
notifyReactives(target, key);
|
||||
return ret;
|
||||
},
|
||||
ownKeys(target) {
|
||||
observeTargetKey(target, KEYCHANGES, callback);
|
||||
return Reflect.ownKeys(target);
|
||||
},
|
||||
has(target, key) {
|
||||
// TODO: this observes all key changes instead of only the presence of the argument key
|
||||
// observing the key itself would observe value changes instead of presence changes
|
||||
// so we may need a finer grained system to distinguish observing value vs presence.
|
||||
observeTargetKey(target, KEYCHANGES, callback);
|
||||
return Reflect.has(target, key);
|
||||
},
|
||||
} as ProxyHandler<T>;
|
||||
}
|
||||
/**
|
||||
* Creates a function that will observe the key that is passed to it when called
|
||||
* and delegates to the underlying method.
|
||||
*
|
||||
* @param methodName name of the method to delegate to
|
||||
* @param target @see reactive
|
||||
* @param callback @see reactive
|
||||
*/
|
||||
function makeKeyObserver(methodName: "has" | "get", target: any, callback: Callback) {
|
||||
return (key: any) => {
|
||||
key = toRaw(key);
|
||||
observeTargetKey(target, key, callback);
|
||||
return possiblyReactive(target[methodName](key), callback);
|
||||
};
|
||||
}
|
||||
/**
|
||||
* Creates an iterable that will delegate to the underlying iteration method and
|
||||
* observe keys as necessary.
|
||||
*
|
||||
* @param methodName name of the method to delegate to
|
||||
* @param target @see reactive
|
||||
* @param callback @see reactive
|
||||
*/
|
||||
function makeIteratorObserver(
|
||||
methodName: "keys" | "values" | "entries" | typeof Symbol.iterator,
|
||||
target: any,
|
||||
callback: Callback
|
||||
) {
|
||||
return function* () {
|
||||
observeTargetKey(target, KEYCHANGES, callback);
|
||||
const keys = target.keys();
|
||||
for (const item of target[methodName]()) {
|
||||
const key = keys.next().value;
|
||||
observeTargetKey(target, key, callback);
|
||||
yield possiblyReactive(item, callback);
|
||||
}
|
||||
};
|
||||
}
|
||||
/**
|
||||
* Creates a forEach function that will delegate to forEach on the underlying
|
||||
* collection while observing key changes, and keys as they're iterated over,
|
||||
* and making the passed keys/values reactive.
|
||||
*
|
||||
* @param target @see reactive
|
||||
* @param callback @see reactive
|
||||
*/
|
||||
function makeForEachObserver(target: any, callback: Callback) {
|
||||
return function forEach(forEachCb: (val: any, key: any, target: any) => void, thisArg: any) {
|
||||
observeTargetKey(target, KEYCHANGES, callback);
|
||||
target.forEach(function (val: any, key: any, targetObj: any) {
|
||||
observeTargetKey(target, key, callback);
|
||||
forEachCb.call(
|
||||
thisArg,
|
||||
possiblyReactive(val, callback),
|
||||
possiblyReactive(key, callback),
|
||||
possiblyReactive(targetObj, callback)
|
||||
);
|
||||
}, thisArg);
|
||||
};
|
||||
}
|
||||
/**
|
||||
* Creates a function that will delegate to an underlying method, and check if
|
||||
* that method has modified the presence or value of a key, and notify the
|
||||
* reactives appropriately.
|
||||
*
|
||||
* @param setterName name of the method to delegate to
|
||||
* @param getterName name of the method which should be used to retrieve the
|
||||
* value before calling the delegate method for comparison purposes
|
||||
* @param target @see reactive
|
||||
*/
|
||||
function delegateAndNotify(
|
||||
setterName: "set" | "add" | "delete",
|
||||
getterName: "has" | "get",
|
||||
target: any
|
||||
) {
|
||||
return (key: any, value: any) => {
|
||||
key = toRaw(key);
|
||||
const hadKey = target.has(key);
|
||||
const originalValue = target[getterName](key);
|
||||
const ret = target[setterName](key, value);
|
||||
const hasKey = target.has(key);
|
||||
if (hadKey !== hasKey) {
|
||||
notifyReactives(target, KEYCHANGES);
|
||||
}
|
||||
if (originalValue !== value) {
|
||||
notifyReactives(target, key);
|
||||
}
|
||||
return ret;
|
||||
};
|
||||
}
|
||||
/**
|
||||
* Creates a function that will clear the underlying collection and notify that
|
||||
* the keys of the collection have changed.
|
||||
*
|
||||
* @param target @see reactive
|
||||
*/
|
||||
function makeClearNotifier(target: Map<any, any> | Set<any>) {
|
||||
return () => {
|
||||
const allKeys = [...target.keys()];
|
||||
target.clear();
|
||||
notifyReactives(target, KEYCHANGES);
|
||||
for (const key of allKeys) {
|
||||
notifyReactives(target, key);
|
||||
}
|
||||
};
|
||||
}
|
||||
/**
|
||||
* Maps raw type of an object to an object containing functions that can be used
|
||||
* to build an appropritate proxy handler for that raw type. Eg: when making a
|
||||
* reactive set, calling the has method should mark the key that is being
|
||||
* retrieved as observed, and calling the add or delete method should notify the
|
||||
* reactives that the key which is being added or deleted has been modified.
|
||||
*/
|
||||
const rawTypeToFuncHandlers = {
|
||||
Set: (target: any, callback: Callback) => ({
|
||||
has: makeKeyObserver("has", target, callback),
|
||||
add: delegateAndNotify("add", "has", target),
|
||||
delete: delegateAndNotify("delete", "has", target),
|
||||
keys: makeIteratorObserver("keys", target, callback),
|
||||
values: makeIteratorObserver("values", target, callback),
|
||||
entries: makeIteratorObserver("entries", target, callback),
|
||||
[Symbol.iterator]: makeIteratorObserver(Symbol.iterator, target, callback),
|
||||
forEach: makeForEachObserver(target, callback),
|
||||
clear: makeClearNotifier(target),
|
||||
get size() {
|
||||
observeTargetKey(target, KEYCHANGES, callback);
|
||||
return target.size;
|
||||
},
|
||||
}),
|
||||
Map: (target: any, callback: Callback) => ({
|
||||
has: makeKeyObserver("has", target, callback),
|
||||
get: makeKeyObserver("get", target, callback),
|
||||
set: delegateAndNotify("set", "get", target),
|
||||
delete: delegateAndNotify("delete", "has", target),
|
||||
keys: makeIteratorObserver("keys", target, callback),
|
||||
values: makeIteratorObserver("values", target, callback),
|
||||
entries: makeIteratorObserver("entries", target, callback),
|
||||
[Symbol.iterator]: makeIteratorObserver(Symbol.iterator, target, callback),
|
||||
forEach: makeForEachObserver(target, callback),
|
||||
clear: makeClearNotifier(target),
|
||||
get size() {
|
||||
observeTargetKey(target, KEYCHANGES, callback);
|
||||
return target.size;
|
||||
},
|
||||
}),
|
||||
WeakMap: (target: any, callback: Callback) => ({
|
||||
has: makeKeyObserver("has", target, callback),
|
||||
get: makeKeyObserver("get", target, callback),
|
||||
set: delegateAndNotify("set", "get", target),
|
||||
delete: delegateAndNotify("delete", "has", target),
|
||||
}),
|
||||
};
|
||||
/**
|
||||
* Creates a proxy handler for collections (Set/Map/WeakMap)
|
||||
*
|
||||
* @param callback @see reactive
|
||||
* @param target @see reactive
|
||||
* @returns a proxy handler object
|
||||
*/
|
||||
function collectionsProxyHandler<T extends Collection>(
|
||||
target: T,
|
||||
callback: Callback,
|
||||
targetRawType: CollectionRawType
|
||||
): ProxyHandler<T> {
|
||||
// TODO: if performance is an issue we can create the special handlers lazily when each
|
||||
// property is read.
|
||||
const specialHandlers = rawTypeToFuncHandlers[targetRawType](target, callback);
|
||||
return Object.assign(basicProxyHandler(callback), {
|
||||
get(target: any, key: PropertyKey) {
|
||||
if (key === TARGET) {
|
||||
return target;
|
||||
}
|
||||
if (objectHasOwnProperty.call(specialHandlers, key)) {
|
||||
return (specialHandlers as any)[key];
|
||||
}
|
||||
observeTargetKey(target, key, callback);
|
||||
return possiblyReactive(target[key], callback);
|
||||
},
|
||||
}) as ProxyHandler<T>;
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
import { fibersInError } from "./error_handling";
|
||||
import { Fiber, RootFiber } from "./fibers";
|
||||
import { STATUS } from "./status";
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Scheduler
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
export class Scheduler {
|
||||
// capture the value of requestAnimationFrame as soon as possible, to avoid
|
||||
// interactions with other code, such as test frameworks that override them
|
||||
static requestAnimationFrame = window.requestAnimationFrame.bind(window);
|
||||
tasks: Set<RootFiber> = new Set();
|
||||
requestAnimationFrame: Window["requestAnimationFrame"];
|
||||
frame: number = 0;
|
||||
delayedRenders: Fiber[] = [];
|
||||
|
||||
constructor() {
|
||||
this.requestAnimationFrame = Scheduler.requestAnimationFrame;
|
||||
}
|
||||
|
||||
addFiber(fiber: Fiber) {
|
||||
this.tasks.add(fiber.root!);
|
||||
}
|
||||
|
||||
/**
|
||||
* Process all current tasks. This only applies to the fibers that are ready.
|
||||
* Other tasks are left unchanged.
|
||||
*/
|
||||
flush() {
|
||||
if (this.delayedRenders.length) {
|
||||
let renders = this.delayedRenders;
|
||||
this.delayedRenders = [];
|
||||
for (let f of renders) {
|
||||
if (f.root && f.node.status !== STATUS.DESTROYED && f.node.fiber === f) {
|
||||
f.render();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.frame === 0) {
|
||||
this.frame = this.requestAnimationFrame(() => {
|
||||
this.frame = 0;
|
||||
this.tasks.forEach((fiber) => this.processFiber(fiber));
|
||||
for (let task of this.tasks) {
|
||||
if (task.node.status === STATUS.DESTROYED) {
|
||||
this.tasks.delete(task);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
processFiber(fiber: RootFiber) {
|
||||
if (fiber.root !== fiber) {
|
||||
this.tasks.delete(fiber);
|
||||
return;
|
||||
}
|
||||
const hasError = fibersInError.has(fiber);
|
||||
if (hasError && fiber.counter !== 0) {
|
||||
this.tasks.delete(fiber);
|
||||
return;
|
||||
}
|
||||
if (fiber.node.status === STATUS.DESTROYED) {
|
||||
this.tasks.delete(fiber);
|
||||
return;
|
||||
}
|
||||
|
||||
if (fiber.counter === 0) {
|
||||
if (!hasError) {
|
||||
fiber.complete();
|
||||
}
|
||||
this.tasks.delete(fiber);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import type { Component } from "./component";
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Status
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
export const enum STATUS {
|
||||
NEW,
|
||||
MOUNTED, // is ready, and in DOM. It has a valid el
|
||||
DESTROYED,
|
||||
}
|
||||
|
||||
type STATUS_DESCR = "new" | "mounted" | "destroyed";
|
||||
|
||||
export function status(component: Component): STATUS_DESCR {
|
||||
switch (component.__owl__.status) {
|
||||
case STATUS.NEW:
|
||||
return "new";
|
||||
case STATUS.MOUNTED:
|
||||
return "mounted";
|
||||
case STATUS.DESTROYED:
|
||||
return "destroyed";
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,251 @@
|
||||
import { BDom, multi, text, toggler, createCatcher } from "./blockdom";
|
||||
import { Markup } from "./utils";
|
||||
import { html } from "./blockdom/index";
|
||||
import { isOptional, validateSchema } from "./validation";
|
||||
import type { ComponentConstructor } from "./component";
|
||||
import { markRaw } from "./reactivity";
|
||||
|
||||
/**
|
||||
* This file contains utility functions that will be injected in each template,
|
||||
* to perform various useful tasks in the compiled code.
|
||||
*/
|
||||
|
||||
function withDefault(value: any, defaultValue: any): any {
|
||||
return value === undefined || value === null || value === false ? defaultValue : value;
|
||||
}
|
||||
|
||||
function callSlot(
|
||||
ctx: any,
|
||||
parent: any,
|
||||
key: string,
|
||||
name: string,
|
||||
dynamic: boolean,
|
||||
extra: any,
|
||||
defaultContent?: (ctx: any, node: any, key: string) => BDom
|
||||
): BDom {
|
||||
key = key + "__slot_" + name;
|
||||
const slots = ctx.props.slots || {};
|
||||
const { __render, __ctx, __scope } = slots[name] || {};
|
||||
const slotScope = Object.create(__ctx || {});
|
||||
if (__scope) {
|
||||
slotScope[__scope] = extra;
|
||||
}
|
||||
const slotBDom = __render ? __render.call(__ctx.__owl__.component, slotScope, parent, key) : null;
|
||||
if (defaultContent) {
|
||||
let child1: BDom | undefined = undefined;
|
||||
let child2: BDom | undefined = undefined;
|
||||
if (slotBDom) {
|
||||
child1 = dynamic ? toggler(name, slotBDom) : slotBDom;
|
||||
} else {
|
||||
child2 = defaultContent.call(ctx.__owl__.component, ctx, parent, key);
|
||||
}
|
||||
return multi([child1, child2]);
|
||||
}
|
||||
return slotBDom || text("");
|
||||
}
|
||||
|
||||
function capture(ctx: any): any {
|
||||
const component = ctx.__owl__.component;
|
||||
const result = Object.create(component);
|
||||
for (let k in ctx) {
|
||||
result[k] = ctx[k];
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function withKey(elem: any, k: string) {
|
||||
elem.key = k;
|
||||
return elem;
|
||||
}
|
||||
|
||||
function prepareList(collection: any): [any[], any[], number, any[]] {
|
||||
let keys: any[];
|
||||
let values: any[];
|
||||
|
||||
if (Array.isArray(collection)) {
|
||||
keys = collection;
|
||||
values = collection;
|
||||
} else if (collection) {
|
||||
values = Object.keys(collection);
|
||||
keys = Object.values(collection);
|
||||
} else {
|
||||
throw new Error("Invalid loop expression");
|
||||
}
|
||||
const n = values.length;
|
||||
return [keys, values, n, new Array(n)];
|
||||
}
|
||||
|
||||
const isBoundary = Symbol("isBoundary");
|
||||
|
||||
function setContextValue(ctx: { [key: string]: any }, key: string, value: any): void {
|
||||
const ctx0 = ctx;
|
||||
while (!ctx.hasOwnProperty(key) && !ctx.hasOwnProperty(isBoundary)) {
|
||||
const newCtx = ctx.__proto__;
|
||||
if (!newCtx) {
|
||||
ctx = ctx0;
|
||||
break;
|
||||
}
|
||||
ctx = newCtx;
|
||||
}
|
||||
ctx[key] = value;
|
||||
}
|
||||
|
||||
function toNumber(val: string): number | string {
|
||||
const n = parseFloat(val);
|
||||
return isNaN(n) ? val : n;
|
||||
}
|
||||
|
||||
function shallowEqual(l1: any[], l2: any[]): boolean {
|
||||
for (let i = 0, l = l1.length; i < l; i++) {
|
||||
if (l1[i] !== l2[i]) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
class LazyValue {
|
||||
fn: any;
|
||||
ctx: any;
|
||||
node: any;
|
||||
constructor(fn: any, ctx: any, node: any) {
|
||||
this.fn = fn;
|
||||
this.ctx = capture(ctx);
|
||||
this.node = node;
|
||||
}
|
||||
|
||||
evaluate(): any {
|
||||
return this.fn(this.ctx, this.node);
|
||||
}
|
||||
|
||||
toString() {
|
||||
return this.evaluate().toString();
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Safely outputs `value` as a block depending on the nature of `value`
|
||||
*/
|
||||
export function safeOutput(value: any): ReturnType<typeof toggler> {
|
||||
if (!value) {
|
||||
return value;
|
||||
}
|
||||
let safeKey;
|
||||
let block;
|
||||
if (value instanceof Markup) {
|
||||
safeKey = `string_safe`;
|
||||
block = html(value as string);
|
||||
} else if (value instanceof LazyValue) {
|
||||
safeKey = `lazy_value`;
|
||||
block = value.evaluate();
|
||||
} else if (value instanceof String || typeof value === "string") {
|
||||
safeKey = "string_unsafe";
|
||||
block = text(value);
|
||||
} else {
|
||||
// Assuming it is a block
|
||||
safeKey = "block_safe";
|
||||
block = value;
|
||||
}
|
||||
return toggler(safeKey, block);
|
||||
}
|
||||
|
||||
let boundFunctions = new WeakMap();
|
||||
|
||||
function bind(ctx: any, fn: Function): Function {
|
||||
let component = ctx.__owl__.component;
|
||||
let boundFnMap = boundFunctions.get(component);
|
||||
if (!boundFnMap) {
|
||||
boundFnMap = new WeakMap();
|
||||
boundFunctions.set(component, boundFnMap);
|
||||
}
|
||||
let boundFn = boundFnMap.get(fn);
|
||||
if (!boundFn) {
|
||||
boundFn = fn.bind(component);
|
||||
boundFnMap.set(fn, boundFn);
|
||||
}
|
||||
return boundFn;
|
||||
}
|
||||
|
||||
type RefMap = { [key: string]: HTMLElement | null };
|
||||
type RefSetter = (el: HTMLElement | null) => void;
|
||||
|
||||
function multiRefSetter(refs: RefMap, name: string): RefSetter {
|
||||
let count = 0;
|
||||
return (el) => {
|
||||
if (el) {
|
||||
count++;
|
||||
if (count > 1) {
|
||||
throw new Error("Cannot have 2 elements with same ref name at the same time");
|
||||
}
|
||||
}
|
||||
if (count === 0 || el) {
|
||||
refs[name] = el;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate the component props (or next props) against the (static) props
|
||||
* description. This is potentially an expensive operation: it may needs to
|
||||
* visit recursively the props and all the children to check if they are valid.
|
||||
* This is why it is only done in 'dev' mode.
|
||||
*/
|
||||
export function validateProps<P>(name: string | ComponentConstructor<P>, props: P, parent?: any) {
|
||||
const ComponentClass =
|
||||
typeof name !== "string"
|
||||
? name
|
||||
: (parent.constructor.components[name] as ComponentConstructor<P> | undefined);
|
||||
|
||||
if (!ComponentClass) {
|
||||
// this is an error, wrong component. We silently return here instead so the
|
||||
// error is triggered by the usual path ('component' function)
|
||||
return;
|
||||
}
|
||||
|
||||
const schema = ComponentClass.props;
|
||||
if (!schema) {
|
||||
if (parent.__owl__.app.warnIfNoStaticProps) {
|
||||
console.warn(`Component '${ComponentClass.name}' does not have a static props description`);
|
||||
}
|
||||
return;
|
||||
}
|
||||
const defaultProps = ComponentClass.defaultProps;
|
||||
if (defaultProps) {
|
||||
let isMandatory = (name: string) =>
|
||||
Array.isArray(schema)
|
||||
? schema.includes(name)
|
||||
: name in schema && !("*" in schema) && !isOptional(schema[name]);
|
||||
for (let p in defaultProps) {
|
||||
if (isMandatory(p)) {
|
||||
throw new Error(
|
||||
`A default value cannot be defined for a mandatory prop (name: '${p}', component: ${ComponentClass.name})`
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const errors = validateSchema(props, schema);
|
||||
if (errors.length) {
|
||||
throw new Error(`Invalid props for component '${ComponentClass.name}': ` + errors.join(", "));
|
||||
}
|
||||
}
|
||||
|
||||
export const helpers = {
|
||||
withDefault,
|
||||
zero: Symbol("zero"),
|
||||
isBoundary,
|
||||
callSlot,
|
||||
capture,
|
||||
withKey,
|
||||
prepareList,
|
||||
setContextValue,
|
||||
multiRefSetter,
|
||||
shallowEqual,
|
||||
toNumber,
|
||||
validateProps,
|
||||
LazyValue,
|
||||
safeOutput,
|
||||
bind,
|
||||
createCatcher,
|
||||
markRaw,
|
||||
};
|
||||
@@ -0,0 +1,145 @@
|
||||
import { createBlock, html, list, multi, text, toggler, comment } from "./blockdom";
|
||||
import { compile, Template, TemplateFunction } from "../compiler";
|
||||
import { Portal, portalTemplate } from "./portal";
|
||||
import { component, getCurrent } from "./component_node";
|
||||
import { helpers } from "./template_helpers";
|
||||
|
||||
const bdom = { text, createBlock, list, multi, html, toggler, component, comment };
|
||||
|
||||
function parseXML(xml: string): Document {
|
||||
const parser = new DOMParser();
|
||||
|
||||
const doc = parser.parseFromString(xml, "text/xml");
|
||||
if (doc.getElementsByTagName("parsererror").length) {
|
||||
let msg = "Invalid XML in template.";
|
||||
const parsererrorText = doc.getElementsByTagName("parsererror")[0].textContent;
|
||||
if (parsererrorText) {
|
||||
msg += "\nThe parser has produced the following error message:\n" + parsererrorText;
|
||||
const re = /\d+/g;
|
||||
const firstMatch = re.exec(parsererrorText);
|
||||
if (firstMatch) {
|
||||
const lineNumber = Number(firstMatch[0]);
|
||||
const line = xml.split("\n")[lineNumber - 1];
|
||||
const secondMatch = re.exec(parsererrorText);
|
||||
if (line && secondMatch) {
|
||||
const columnIndex = Number(secondMatch[0]) - 1;
|
||||
if (line[columnIndex]) {
|
||||
msg +=
|
||||
`\nThe error might be located at xml line ${lineNumber} column ${columnIndex}\n` +
|
||||
`${line}\n${"-".repeat(columnIndex - 1)}^`;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
throw new Error(msg);
|
||||
}
|
||||
return doc;
|
||||
}
|
||||
|
||||
export interface TemplateSetConfig {
|
||||
dev?: boolean;
|
||||
translatableAttributes?: string[];
|
||||
translateFn?: (s: string) => string;
|
||||
templates?: string | Document;
|
||||
}
|
||||
|
||||
export class TemplateSet {
|
||||
static registerTemplate(name: string, fn: TemplateFunction) {
|
||||
globalTemplates[name] = fn;
|
||||
}
|
||||
dev: boolean;
|
||||
rawTemplates: typeof globalTemplates = Object.create(globalTemplates);
|
||||
templates: { [name: string]: Template } = {};
|
||||
translateFn?: (s: string) => string;
|
||||
translatableAttributes?: string[];
|
||||
Portal = Portal;
|
||||
|
||||
constructor(config: TemplateSetConfig = {}) {
|
||||
this.dev = config.dev || false;
|
||||
this.translateFn = config.translateFn;
|
||||
this.translatableAttributes = config.translatableAttributes;
|
||||
if (config.templates) {
|
||||
this.addTemplates(config.templates);
|
||||
}
|
||||
}
|
||||
|
||||
addTemplate(name: string, template: string | Element) {
|
||||
if (name in this.rawTemplates) {
|
||||
const rawTemplate = this.rawTemplates[name];
|
||||
const currentAsString =
|
||||
typeof rawTemplate === "string"
|
||||
? rawTemplate
|
||||
: rawTemplate instanceof Element
|
||||
? rawTemplate.outerHTML
|
||||
: rawTemplate.toString();
|
||||
const newAsString = typeof template === "string" ? template : template.outerHTML;
|
||||
if (currentAsString === newAsString) {
|
||||
return;
|
||||
}
|
||||
throw new Error(`Template ${name} already defined with different content`);
|
||||
}
|
||||
this.rawTemplates[name] = template;
|
||||
}
|
||||
|
||||
addTemplates(xml: string | Document) {
|
||||
if (!xml) {
|
||||
// empty string
|
||||
return;
|
||||
}
|
||||
xml = xml instanceof Document ? xml : parseXML(xml);
|
||||
for (const template of xml.querySelectorAll("[t-name]")) {
|
||||
const name = template.getAttribute("t-name")!;
|
||||
this.addTemplate(name, template);
|
||||
}
|
||||
}
|
||||
|
||||
getTemplate(name: string): Template {
|
||||
if (!(name in this.templates)) {
|
||||
const rawTemplate = this.rawTemplates[name];
|
||||
if (rawTemplate === undefined) {
|
||||
let extraInfo = "";
|
||||
try {
|
||||
const componentName = getCurrent().component.constructor.name;
|
||||
extraInfo = ` (for component "${componentName}")`;
|
||||
} catch {}
|
||||
throw new Error(`Missing template: "${name}"${extraInfo}`);
|
||||
}
|
||||
const isFn = typeof rawTemplate === "function" && !(rawTemplate instanceof Element);
|
||||
const templateFn = isFn ? rawTemplate : this._compileTemplate(name, rawTemplate);
|
||||
// first add a function to lazily get the template, in case there is a
|
||||
// recursive call to the template name
|
||||
const templates = this.templates;
|
||||
this.templates[name] = function (context, parent) {
|
||||
return templates[name].call(this, context, parent);
|
||||
};
|
||||
const template = templateFn(this, bdom, helpers);
|
||||
this.templates[name] = template;
|
||||
}
|
||||
return this.templates[name];
|
||||
}
|
||||
|
||||
_compileTemplate(name: string, template: string | Element): ReturnType<typeof compile> {
|
||||
throw new Error(`Unable to compile a template. Please use owl full build instead`);
|
||||
}
|
||||
|
||||
callTemplate(owner: any, subTemplate: string, ctx: any, parent: any, key: any): any {
|
||||
const template = this.getTemplate(subTemplate);
|
||||
return toggler(subTemplate, template.call(owner, ctx, parent, key));
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// xml tag helper
|
||||
// -----------------------------------------------------------------------------
|
||||
export const globalTemplates: { [key: string]: string | Element | TemplateFunction } = {};
|
||||
|
||||
export function xml(...args: Parameters<typeof String.raw>) {
|
||||
const name = `__template__${xml.nextId++}`;
|
||||
const value = String.raw(...args);
|
||||
globalTemplates[name] = value;
|
||||
return name;
|
||||
}
|
||||
|
||||
xml.nextId = 1;
|
||||
|
||||
TemplateSet.registerTemplate("__portal__", portalTemplate);
|
||||
@@ -0,0 +1,75 @@
|
||||
export type Callback = () => void;
|
||||
|
||||
/**
|
||||
* Creates a batched version of a callback so that all calls to it in the same
|
||||
* microtick will only call the original callback once.
|
||||
*
|
||||
* @param callback the callback to batch
|
||||
* @returns a batched version of the original callback
|
||||
*/
|
||||
export function batched(callback: Callback): Callback {
|
||||
let called = false;
|
||||
return async () => {
|
||||
// This await blocks all calls to the callback here, then releases them sequentially
|
||||
// in the next microtick. This line decides the granularity of the batch.
|
||||
await Promise.resolve();
|
||||
if (!called) {
|
||||
called = true;
|
||||
// wait for all calls in this microtick to fall through before resetting "called"
|
||||
// so that only the first call to the batched function calls the original callback.
|
||||
// Schedule this before calling the callback so that calls to the batched function
|
||||
// within the callback will proceed only after resetting called to false, and have
|
||||
// a chance to execute the callback again
|
||||
Promise.resolve().then(() => (called = false));
|
||||
callback();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export function validateTarget(target: HTMLElement) {
|
||||
if (!(target instanceof HTMLElement)) {
|
||||
throw new Error("Cannot mount component: the target is not a valid DOM element");
|
||||
}
|
||||
if (!document.body.contains(target)) {
|
||||
throw new Error("Cannot mount a component on a detached dom node");
|
||||
}
|
||||
}
|
||||
|
||||
export class EventBus extends EventTarget {
|
||||
trigger(name: string, payload?: any) {
|
||||
this.dispatchEvent(new CustomEvent(name, { detail: payload }));
|
||||
}
|
||||
}
|
||||
|
||||
export function whenReady(fn?: any): Promise<void> {
|
||||
return new Promise(function (resolve) {
|
||||
if (document.readyState !== "loading") {
|
||||
resolve(true);
|
||||
} else {
|
||||
document.addEventListener("DOMContentLoaded", resolve, false);
|
||||
}
|
||||
}).then(fn || function () {});
|
||||
}
|
||||
|
||||
export async function loadFile(url: string): Promise<string> {
|
||||
const result = await fetch(url);
|
||||
if (!result.ok) {
|
||||
throw new Error("Error while fetching xml templates");
|
||||
}
|
||||
return await result.text();
|
||||
}
|
||||
|
||||
/*
|
||||
* This class just transports the fact that a string is safe
|
||||
* to be injected as HTML. Overriding a JS primitive is quite painful though
|
||||
* so we need to redfine toString and valueOf.
|
||||
*/
|
||||
export class Markup extends String {}
|
||||
|
||||
/*
|
||||
* Marks a value as safe, that is, a value that can be injected as HTML directly.
|
||||
* It should be used to wrap the value passed to a t-out directive to allow a raw rendering.
|
||||
*/
|
||||
export function markup(value: any) {
|
||||
return new Markup(value);
|
||||
}
|
||||
@@ -0,0 +1,161 @@
|
||||
type BaseType =
|
||||
| typeof String
|
||||
| typeof Boolean
|
||||
| typeof Number
|
||||
| typeof Date
|
||||
| typeof Object
|
||||
| typeof Array
|
||||
| true
|
||||
| "*";
|
||||
|
||||
type UnionType = (TypeInfo | BaseType)[];
|
||||
type TypeDescription = BaseType | UnionType | TypeInfo;
|
||||
|
||||
interface TypeInfo {
|
||||
type?: TypeDescription;
|
||||
optional?: boolean;
|
||||
validate?: Function;
|
||||
shape?: Schema;
|
||||
element?: TypeDescription;
|
||||
}
|
||||
|
||||
type SimplifiedSchema = string[];
|
||||
type NormalizedSchema = { [key: string]: TypeDescription };
|
||||
export type Schema = SimplifiedSchema | NormalizedSchema;
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// helpers
|
||||
// -----------------------------------------------------------------------------
|
||||
const isUnionType = (t: TypeDescription): t is UnionType => Array.isArray(t);
|
||||
const isBaseType = (t: TypeDescription): t is BaseType => typeof t !== "object";
|
||||
|
||||
export function isOptional(t: TypeDescription): Boolean {
|
||||
return typeof t === "object" && "optional" in t ? t.optional || false : false;
|
||||
}
|
||||
|
||||
function describeType(type: BaseType): string {
|
||||
return type === "*" || type === true ? "value" : type.name.toLowerCase();
|
||||
}
|
||||
|
||||
function describe(info: TypeDescription): string {
|
||||
if (isBaseType(info)) {
|
||||
return describeType(info);
|
||||
} else if (isUnionType(info)) {
|
||||
return info.map(describe).join(" or ");
|
||||
}
|
||||
if ("element" in info) {
|
||||
return `list of ${describe({ type: info.element, optional: false })}s`;
|
||||
}
|
||||
if ("shape" in (info as TypeInfo)) {
|
||||
return `object`;
|
||||
}
|
||||
return describe(info.type || "*");
|
||||
}
|
||||
|
||||
function toSchema(spec: SimplifiedSchema): NormalizedSchema {
|
||||
return Object.fromEntries(
|
||||
spec.map((e) =>
|
||||
e.endsWith("?") ? [e.slice(0, -1), { optional: true }] : [e, { type: "*", optional: false }]
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Main validate function
|
||||
*/
|
||||
export function validate(obj: { [key: string]: any }, spec: Schema) {
|
||||
let errors = validateSchema(obj, spec);
|
||||
if (errors.length) {
|
||||
throw new Error("Invalid object: " + errors.join(", "));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper validate function, to get the list of errors. useful if one want to
|
||||
* manipulate the errors without parsing an error object
|
||||
*/
|
||||
export function validateSchema(obj: { [key: string]: any }, schema: Schema): string[] {
|
||||
if (Array.isArray(schema)) {
|
||||
schema = toSchema(schema);
|
||||
}
|
||||
let errors = [];
|
||||
// check if each value in obj has correct shape
|
||||
for (let key in obj) {
|
||||
if (key in schema) {
|
||||
let result = validateType(key, obj[key], schema[key]);
|
||||
if (result) {
|
||||
errors.push(result);
|
||||
}
|
||||
} else if (!("*" in schema)) {
|
||||
errors.push(`unknown key '${key}'`);
|
||||
}
|
||||
}
|
||||
// check that all specified keys are defined in obj
|
||||
for (let key in schema) {
|
||||
const spec = schema[key];
|
||||
if (key !== "*" && !isOptional(spec) && !(key in obj)) {
|
||||
const isObj = typeof spec === "object" && !Array.isArray(spec);
|
||||
const isAny = spec === "*" || (isObj && "type" in spec ? spec.type === "*" : isObj);
|
||||
let detail = isAny ? "" : ` (should be a ${describe(spec)})`;
|
||||
errors.push(`'${key}' is missing${detail}`);
|
||||
}
|
||||
}
|
||||
return errors;
|
||||
}
|
||||
|
||||
function validateBaseType(key: string, value: any, type: BaseType): string | null {
|
||||
if (typeof type === "function") {
|
||||
if (typeof value === "object") {
|
||||
if (!(value instanceof type)) {
|
||||
return `'${key}' is not a ${describeType(type)}`;
|
||||
}
|
||||
} else if (typeof value !== type.name.toLowerCase()) {
|
||||
return `'${key}' is not a ${describeType(type)}`;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function validateArrayType(key: string, value: any, descr: TypeDescription): string | null {
|
||||
if (!Array.isArray(value)) {
|
||||
return `'${key}' is not a list of ${describe(descr)}s`;
|
||||
}
|
||||
for (let i = 0; i < value.length; i++) {
|
||||
const error = validateType(`${key}[${i}]`, value[i], descr);
|
||||
if (error) {
|
||||
return error;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function validateType(key: string, value: any, descr: TypeDescription): string | null {
|
||||
if (value === undefined) {
|
||||
return isOptional(descr) ? null : `'${key}' is undefined (should be a ${describe(descr)})`;
|
||||
} else if (isBaseType(descr)) {
|
||||
return validateBaseType(key, value, descr);
|
||||
} else if (isUnionType(descr)) {
|
||||
let validDescr = descr.find((p) => !validateType(key, value, p));
|
||||
return validDescr ? null : `'${key}' is not a ${describe(descr)}`;
|
||||
}
|
||||
let result: string | null = null;
|
||||
if ("element" in descr) {
|
||||
result = validateArrayType(key, value, descr.element!);
|
||||
} else if ("shape" in descr && !result) {
|
||||
if (typeof value !== "object" || Array.isArray(value)) {
|
||||
result = `'${key}' is not an object`;
|
||||
} else {
|
||||
const errors = validateSchema(value, descr.shape!);
|
||||
if (errors.length) {
|
||||
result = `'${key}' has not the correct shape (${errors.join(", ")})`;
|
||||
}
|
||||
}
|
||||
}
|
||||
if ("type" in descr && !result) {
|
||||
result = validateType(key, value, descr.type!);
|
||||
}
|
||||
if ("validate" in descr && !result) {
|
||||
result = !descr.validate!(value) ? `'${key}' is not valid` : null;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
Reference in New Issue
Block a user