New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@dlightjs/dlight

Package Overview
Dependencies
Maintainers
2
Versions
274
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@dlightjs/dlight - npm Package Compare versions

Comparing version 1.0.0-alpha.36 to 1.0.0-alpha.37

509

dist/index.d.ts

@@ -1,502 +0,7 @@

type AnyDLNode = any;
declare enum DLNodeType {
Comp = 0,
For = 1,
Cond = 2,
Env = 3,
Exp = 4,
Subview = 5
}
declare class DLNode {
/**
* @brief Node type: HTML, Text, Custom, For, If, Env, Expression
*/
_$dlNodeType: DLNodeType;
/**
* @brief Constructor
* @param nodeType
*/
constructor(nodeType: DLNodeType);
/**
* @brief Node element
* Either one real element for HTMLNode and TextNode
* Or an array of DLNode for CustomNode, ForNode, IfNode, EnvNode, ExpNode
*/
get _$el(): HTMLElement[];
/**
* @brief Parent dom element, will be passed to child nodes
*/
_$parentEl?: HTMLElement;
/**
* @brief Child DLNodes
*/
_$nodes?: AnyDLNode[];
/**
* @brief Loop all child DLNodes to get all the child elements
* @param nodes
* @returns HTMLElement[]
*/
private static toEls;
/**
* @brief Loop all child DLNodes deeply, including all the child nodes of child nodes
* @param nodes
* @param runFunc
*/
static loopDLNodes(nodes: AnyDLNode[], runFunc: (node: AnyDLNode) => void): void;
/**
* @brief Loop all child DLNodes deeply, including all the child nodes of child nodes
* @param nodes
* @param runFunc
*/
static loopDLNodesInsideOut(nodes: AnyDLNode[], runFunc: (node: AnyDLNode) => void): void;
/**
* @brief Loop all elements shallowly,
* i.e., don't loop the child nodes of dom elements and only call runFunc on dom elements
* @param nodes
* @param runFunc
*/
static loopShallowEls(nodes: AnyDLNode[], runFunc: (node: AnyDLNode) => void): void;
/**
* @brief Loop all nodes shallowly,
* i.e., don't loop the child nodes of dom elements and call runFunc on all nodes
* @param nodes
* @param runFunc
*/
static loopShallowDLNodes(nodes: any[], runFunc: (node: any) => void): void;
/**
* @brief Add parentEl to all nodes until the first element
* @param nodes
* @param parentEl
*/
static addParentEl(nodes: AnyDLNode[], parentEl: HTMLElement): void;
/**
* @brief Get the total count of dom elements before the stop node
* @param nodes
* @param stopNode
* @returns total count of dom elements
*/
static getFlowIndexFromNodes(nodes: AnyDLNode[], stopNode?: AnyDLNode): number;
/**
* @brief Given an array of nodes, append them to the parentEl
* 1. If nextSibling is provided, insert the nodes before the nextSibling
* 2. If nextSibling is not provided, append the nodes to the parentEl
* @param nodes
* @param parentEl
* @param nextSibling
* @returns Added element count
*/
static appendNodesWithSibling(nodes: AnyDLNode[], parentEl: HTMLElement, nextSibling: HTMLElement | undefined): number;
/**
* @brief Given an array of nodes, append them to the parentEl using the index
* 1. If the index is the same as the length of the parentEl.childNodes, append the nodes to the parentEl
* 2. If the index is not the same as the length of the parentEl.childNodes, insert the nodes before the node at the index
* @param nodes
* @param parentEl
* @param index
* @param length
* @returns Added element count
*/
static appendNodesWithIndex(nodes: AnyDLNode[], parentEl: HTMLElement, index: number, length?: number): number;
/**
* @brief Insert nodes before the nextSibling
* @param nodes
* @param parentEl
* @param nextSibling
* @returns Added element count
*/
static insertNodesBefore(nodes: AnyDLNode[], parentEl: HTMLElement, nextSibling: HTMLElement): number;
/**
* @brief Append nodes to the parentEl
* @param nodes
* @param parentEl
* @returns Added element count
*/
static appendNodes(nodes: any[], parentEl: HTMLElement): number;
private static willUnmountFunc;
static addWillUnmount(node: AnyDLNode, func: () => void): void;
}
/**
* @brief Plainly set style
* @param el
* @param value
*/
declare function setStyle(el: HTMLElement, value: CSSStyleDeclaration): void;
/**
* @brief Plainly set dataset
* @param el
* @param value
*/
declare function setDataset(el: HTMLElement, value: Record<string, string>): void;
/**
* @brief Set HTML property with checking value equality first
* @param el
* @param key
* @param value
*/
declare function setHTMLProp(el: HTMLElement, key: keyof HTMLElement, value: any): void;
/**
* @brief Plainly set HTML properties
* @param el
* @param value
*/
declare function setHTMLProps(el: HTMLElement, value: Record<string, any>): void;
/**
* @brief Set HTML attribute with checking value equality first
* @param el
* @param key
* @param value
*/
declare function setHTMLAttr(el: HTMLElement, key: string, value: any): void;
/**
* @brief Plainly set HTML attributes
* @param el
* @param value
*/
declare function setHTMLAttrs(el: HTMLElement, value: Record<string, any>): void;
/**
* @brief Set memorized event, store the previous event in el[`$on${key}`], if it exists, remove it first
* @param el
* @param key
* @param value
*/
declare function setEvent(el: HTMLElement, key: string, value: any): void;
/**
* @brief Create a template function, which returns a function that returns a cloned element
* @param templateStr
* @returns a function that returns a cloned element
*/
declare function createTemplate(templateStr: string): () => HTMLElement;
/**
* @brief Shortcut for document.createElement
* @param tag
* @returns HTMLElement
*/
declare function createElement(tag: string): HTMLElement;
/**
* @brief Insert any DLNode into an element, set the _$nodes and append the element to the element's children
* @param el
* @param node
* @param position
*/
declare function insertNode(el: HTMLElement, node: AnyDLNode, position: number): void;
/**
* @brief An inclusive assign prop function that accepts any type of prop
* @param el
* @param key
* @param value
*/
declare function forwardHTMLProp(el: HTMLElement, key: string, value: any): void;
declare global {
interface Window {
DLEnvStore: EnvStoreClass;
}
}
declare class EnvStoreClass {
envs: Record<string, [any, AnyDLNode]>;
currentEnvNodes: EnvNode[];
/**
* @brief Add a node to the current env and merge envs
* @param node
*/
addEnvNode(node: AnyDLNode): void;
/**
* @brief Replace the current env with the given nodes and merge envs
* @param nodes
*/
replaceEnvNodes(nodes: AnyDLNode[]): void;
/**
* @brief Remove the last node from the current env and merge envs
*/
removeEnvNode(): void;
/**
* @brief Merge all the envs in currentEnvNodes, inner envs override outer envs
*/
mergeEnvs(): void;
}
declare class EnvNode extends DLNode {
updateNodes: Set<CompNode>;
envs: Record<string, any>;
/**
* @brief Constructor, Env type, accept a record of envs, add this node to DLEnvStore
* @param envs
*/
constructor(envs: Record<string, any>);
/**
* @brief Update a specific env, and update all the comp nodes that depend on this env
* @param name
* @param value
*/
updateEnv(name: string, value: any): void;
/**
* @brief Add a node to this.updateNodes, delete the node from this.updateNodes when it unmounts
* @param node
*/
addNode(node: AnyDLNode): void;
/**
* @brief Set this._$nodes, and exit the current env
* @param nodes
*/
initNodes(nodes: AnyDLNode[]): void;
}
declare class CompNode extends DLNode {
/**
* @brief Constructor, Comp type
* @internal
* * key - getter: return $key
* * key - setter: set $key, update $s$key, call update function with $$key
* * $key - private property key
* * $$key - dependency number, e.g. 0b1, 0b10, 0b100
* * $s$key - set of properties that depend on this property
* * $p$key - exist if this property is a prop
* * $e$key - exist if this property is an env
* * $en$key - exist if this property is an env, and it's the innermost env that contains this env
* * $w$key - exist if this property is a watcher
* * $f$key - a function that returns the value of this property, called when the property's dependencies change
* * _$children - children nodes of type PropView
* * _$contentKey - the key key of the content prop
* * _$forwardProps - exist if this node is forwarding props
* * _$forwardPropsId - the keys of the props that this node is forwarding, collected in _$setForwardProp
* * _$forwardPropsSet - contain all the nodes that are forwarding props to this node, collected with _$addForwardProps
*/
constructor();
/**
* @brief Init function, called explicitly in the subclass's constructor
* @param props
* @param content
* @param children
* @param forwardPropsScope
*/
_$init(props: Record<string, any> | null, content: any | null, children: AnyDLNode[] | null, forwardPropsScope: CompNode | null): void;
/**
* @brief Call updates manually before the node is mounted
*/
private _$callUpdatesBeforeInit;
/**
* @brief Define forward props
* @param key
* @param value
*/
private _$setForwardProp;
/**
* @brief Add a node to the set of nodes that are forwarding props to this node and init these props, called
* 1. HTMLNode: explicitly in the View function
* 2. CompNode: passed in the node's constructor and called in _$init to make sure it's added before the node is mounted
* @param node
*/
_$addForwardProps(node: AnyDLNode): void;
/**
* @brief Set a prop directly, if this is a forwarded prop, go and init forwarded props
* @param key
* @param value
*/
_$setProp(key: string, value: any): void;
/**
* @brief Init an env, put the corresponding innermost envNode in $en$key
* @param key
* @param value
* @param envNode
*/
private _$initEnv;
/**
* @brief Update an env, called in EnvNode._$update
* @param key
* @param value
* @param envNode
*/
_$updateEnv(key: string, value: any, envNode: EnvNode): void;
/**
* @brief Set the content prop, the key is stored in _$contentKey
* @param value
* @returns
*/
_$setContent(value: any): void;
/**
* @brief Update a prop and call any related update function
* @param key
* @param value
*/
_$updateProp(key: string, value: any): void;
/**
* @brief Update properties that depend on this property
* @param key
*/
_$updateDerived(key: string): void;
/**
* @brief Update View related update function
* @param key
*/
_$updateView(key: string): void;
}
declare const View: any;
/**
* @brief Run all update functions given the key
* @param dlNode
* @param key
*/
declare function update(dlNode: AnyDLNode, key: string): void;
declare class MutableNode extends DLNode {
/**
* @brief Mutable node is a node that this._$nodes can be changed, things need to pay attention:
* 1. The environment of the new nodes should be the same as the old nodes
* 2. The new nodes should be added to the parentEl
* 3. The old nodes should be removed from the parentEl
* @param type
*/
constructor(type: number);
/**
* @brief Initialize the new nodes, add parentEl to all nodes
* @param nodes
*/
private initNewNodes;
/**
* @brief Generate new nodes in the saved environment
* @param newNodesFunc
* @returns
*/
geneNewNodesInEnv(newNodesFunc: () => AnyDLNode[]): AnyDLNode[];
removeNodes(nodes: any[]): void;
}
declare class ForNode<T, G> extends MutableNode {
array: T[];
keys?: G[] | undefined;
nodeFunc?: (item: T, updateArr: Array<(change: number, item: T) => void>, idx: number) => AnyDLNode[];
nodess?: AnyDLNode[][];
depNum: number;
updateArr: Array<(change: number, item: T) => void>;
/**
* @brief Constructor, For type
* @param array
* @param nodeFunc
* @param keys
*/
constructor(array: T[], depNum: number, keys?: G[]);
addNodeFunc(nodeFunc: (item: T, updateArr: Array<(change: number, item: T) => void>, idx: number) => AnyDLNode[]): void;
/**
* @brief Non-array update function
* @param changed
*/
update(changed: number): void;
/**
* @brief Update the view related to one item in the array
* @param nodes
* @param item
*/
private updateItem;
/**
* @brief Array-related update function
* @param newArray
* @param newKeys
*/
updateArray(newArray: T[], newKeys?: G[]): void;
/**
* @brief Shortcut to generate new nodes with idx
*/
private getNewNodes;
/**
* @brief Update the nodes without keys
* @param newArray
*/
private updateWithOutKey;
/**
* @brief Update the nodes with keys
* @param newArray
* @param newKeys
*/
private updateWithKey;
/**
* @brief Compare two arrays
* @param arr1
* @param arr2
* @returns
*/
private static arrayEqual;
}
declare class ExpNode extends MutableNode {
nodesFunc: () => AnyDLNode[];
/**
* @brief Constructor, Exp type, accept a function that returns a list of nodes
* @param nodesFunc
*/
constructor(nodesFunc: () => AnyDLNode[]);
/**
* @brief Generate new nodes and replace the old nodes
*/
update(): void;
/**
* @brief Format the nodes
* @param nodes
* @returns New nodes
*/
private static formatNodes;
}
declare class CondNode extends MutableNode {
condFunc?: (thisCond: CondNode) => AnyDLNode[];
cond?: number;
depNum: number;
/**
* @brief Constructor, If type, accept a function that returns a list of nodes
* @param caseFunc
*/
constructor(depNum: number);
addCondFunc(condFunc: (thisCond: CondNode) => AnyDLNode[]): void;
/**
* @brief Update the nodes in the environment
*/
updateCond(): AnyDLNode[];
/**
* @brief The update function of IfNode's childNodes is stored in the first child node
* @param changed
*/
update(changed: number): void;
}
/**
* @brief Shorten document.createTextNode
* @param value
* @returns Text
*/
declare function createTextNode(value: string): Text;
/**
* @brief Update text node and check if the value is changed
* @param node
* @param value
*/
declare function updateText(node: Text, value: string): void;
declare class PropView {
propViewFunc: (collector: any) => AnyDLNode[];
dlUpdateFunc: Set<any>;
/**
* @brief PropView constructor, accept a function that returns a list of DLNode
* @param propViewFunc
*/
constructor(propViewFunc: (collector: any) => AnyDLNode[]);
/**
* @brief Build the prop view by calling the propViewFunc and add every single instance of the returned DLNode to dlUpdateNodes
* @returns the list of DLNode returned by propViewFunc
*/
build(): AnyDLNode[];
/**
* @brief Update every node in dlUpdateNodes
* @param changed
*/
update(changed: number): void;
}
declare class SubViewNode extends DLNode {
constructor();
}
declare function render(idOrEl: string | HTMLElement, DL: AnyDLNode): void;
declare function manual(callback: () => any, _deps?: any[]): any;
declare function escape<T>(arg: T): T;
declare const $: typeof escape;
export { $, CompNode, CondNode, EnvNode, ExpNode, ForNode, PropView, SubViewNode, View, createElement, createTemplate, createTextNode, escape, forwardHTMLProp, insertNode, manual, render, setDataset, setEvent, setHTMLAttr, setHTMLAttrs, setHTMLProp, setHTMLProps, setStyle, update, updateText };
export function render(idOrEl: string | HTMLElement, DL: any): void
export function manual<T>(callback: () => T, _deps?: any[]): T
export function escape<T>(arg: T): T
export function setGlobal(globalObj: any): void
export function setDocument(customDocument: any): void
export const $: typeof escape
export const View: any

2

dist/index.js

@@ -1,2 +0,2 @@

var d=class{_$dlNodeType;constructor(e){this._$dlNodeType=e}get _$el(){return d.toEls(this._$nodes)}_$parentEl;_$nodes;static toEls(e){let t=[];return this.loopShallowEls(e,n=>{t.push(n)}),t}static loopDLNodes(e,t){e.forEach(n=>{t(n),n._$nodes&&d.loopDLNodes(n._$nodes,t)})}static loopDLNodesInsideOut(e,t){e.forEach(n=>{n._$nodes&&d.loopDLNodesInsideOut(n._$nodes,t),t(n)})}static loopShallowEls(e,t){e.forEach(n=>{if(!("_$dlNodeType"in n))return t(n);n._$nodes&&d.loopShallowEls(n._$nodes,t)})}static loopShallowDLNodes(e,t){e.forEach(n=>{"_$dlNodeType"in n&&(t(n),n._$nodes&&d.loopShallowDLNodes(n._$nodes,t))})}static addParentEl(e,t){this.loopShallowDLNodes(e,n=>{n._$parentEl=t})}static getFlowIndexFromNodes(e,t){let n=0,o=[...e];for(;o.length>0;){let r=o.shift();if(r===t)break;"_$dlNodeType"in r?r._$nodes&&o.unshift(...r._$nodes):n++}return n}static appendNodesWithSibling(e,t,n){return n?this.insertNodesBefore(e,t,n):this.appendNodes(e,t)}static appendNodesWithIndex(e,t,n,o){return o=o??t.childNodes.length,o!==n?this.insertNodesBefore(e,t,t.childNodes[n]):this.appendNodes(e,t)}static insertNodesBefore(e,t,n){let o=0;return this.loopShallowEls(e,r=>{t.insertBefore(r,n),o++}),o}static appendNodes(e,t){let n=0;return this.loopShallowEls(e,o=>{t.appendChild(o),n++}),n}static willUnmountFunc(e,t){e(),t?.()}static addWillUnmount(e,t){e.willUnmount=this.willUnmountFunc.bind(this,t,e.willUnmount?.bind(e))}};function C(s,e){Object.entries(e).forEach(([t,n])=>{s.style[t]=n})}function W(s,e){Object.entries(e).forEach(([t,n])=>{s.dataset[t]=n})}function _(s,e,t){let n=`$${e}`;n in s&&s[n]===t||(s[e]=t,s[n]=t)}function U(s,e){Object.entries(e).forEach(([t,n])=>{_(s,t,n)})}function T(s,e,t){let n=`$${e}`;n in s&&s[n]===t||(s.setAttribute(e,t),s[n]=t)}function O(s,e){Object.entries(e).forEach(([t,n])=>{T(s,t,n)})}function K(s,e,t){let n=s[`$on${e}`];n&&s.removeEventListener(e,n),s.addEventListener(e,t),s[`$on${e}`]=t}function R(s){let e=document.createElement("template");e.innerHTML=s;let t=e.content.firstChild;return()=>t.cloneNode(!0)}function G(s){return document.createElement(s)}function b(s,e,t){s._$nodes||(s._$nodes=Array.from(s.childNodes)),s._$nodes.splice(t,0,e);let n=d.getFlowIndexFromNodes(s._$nodes,e);d.appendNodesWithIndex([e],s,n),d.addParentEl([e],s)}function w(s,e,t){if(e==="style"){C(s,t);return}if(e==="dataset"){W(s,t);return}if(e!=="element"){if(e==="prop"){U(s,t);return}if(e==="attr"){O(s,t);return}if(e==="innerHTML"){_(s,"innerHTML",t);return}if(e!=="forwardProp"){if(e.startsWith("on")){K(s,e.slice(2).toLowerCase(),t);return}T(s,e,t)}}}var g=class extends d{constructor(){super(0)}_$init(e,t,n,o){this._$notInitd=!0,o&&o._$addForwardProps(this),t!==null&&this._$setContent(t),e&&Object.entries(e).forEach(([r,N])=>{this._$setProp(r,N)}),n&&(this._$children=n),Object.entries(window.DLEnvStore.envs).forEach(([r,[N,h]])=>{h.addNode(this),this._$initEnv(r,N,h)}),this._$callUpdatesBeforeInit(),this.willMount?.(),this._$nodes=this.View?.()??[],this.didMount?.()}_$callUpdatesBeforeInit(){let e=Object.getOwnPropertyNames(Object.getPrototypeOf(this)),t=Object.getOwnPropertyNames(this);[...e,...t].forEach(o=>{if(o.startsWith("$w$"))return this[o.slice(3)]();o.startsWith("$f$")&&(this[`$${o.slice(3)}`]=this[o])}),delete this._$notInitd}_$setForwardProp(e,t){if(e in this){this[e]=t;return}this._$forwardPropsId.push(e);let n=`$${e}`;this[n]=t,Object.defineProperty(this,e,{get(){return this[n]},set(o){this[n]!==o&&(this[n]=o,this._$forwardPropsSet?.forEach(r=>{r._$dlNodeType===0&&r._$setProp(e,o),r instanceof HTMLElement&&w(r,e,o)}))}})}_$addForwardProps(e){this._$forwardPropsSet.add(e),this._$forwardPropsId.forEach(t=>{let n=this[t];this._$forwardPropsSet?.forEach(o=>{o._$dlNodeType===0&&("_$forwardProps"in o&&o._$forwardPropsId.push(t),o._$setProp(t,n)),o instanceof HTMLElement&&w(o,t,n)})}),d.addWillUnmount(e,this._$forwardPropsSet.delete.bind(this._$forwardPropsSet,e))}_$setProp(e,t){"_$forwardProps"in this&&this._$setForwardProp(e,t),`$p$${e}`in this&&(this[e]=t)}_$initEnv(e,t,n){`$e$${e}`in this&&(this[e]=t,this[`$en$${e}`]=n)}_$updateEnv(e,t,n){`$e$${e}`in this&&n===this[`$en$${e}`]&&this[e]!==t&&(this[e]=t)}_$setContent(e){let t=this._$contentKey;t&&this[t]!==e&&(this[t]=e)}_$updateProp(e,t){let n=`$${e}`;this[n]!==t&&(this[n]=t,this._$updateDerived(e),this._$updateView(e))}_$updateDerived(e){"_$notInitd"in this||this[`$s$${e}`]?.forEach(t=>{`$w$${t}`in this?this[t]():this[`$${t}`]=this[`$f$${t}`]})}_$updateView(e){let t=this[`$$${e}`];t&&this._$update?.(t)}},Q=g;function X(s,e){s._$updateDerived(e),s._$updateView(e)}var a=class extends d{constructor(e){super(e),window.DLEnvStore.currentEnvNodes.length>0&&(this.savedEnvNodes=[...window.DLEnvStore.currentEnvNodes])}initNewNodes(e){d.addParentEl(e,this._$parentEl)}geneNewNodesInEnv(e){if(!this.savedEnvNodes){let o=e();return this.initNewNodes(o),o}let t=window.DLEnvStore.currentEnvNodes;window.DLEnvStore.replaceEnvNodes(this.savedEnvNodes);let n=e();return window.DLEnvStore.replaceEnvNodes(t),this.initNewNodes(n),n}removeNodes(e){d.loopDLNodes(e,t=>t.willUnmount?.()),d.loopShallowEls(e,t=>{this._$parentEl?.removeChild(t)}),d.loopDLNodesInsideOut(e,t=>t.didUnmount?.())}};var v=class extends a{array;keys;nodeFunc;nodess;depNum;updateArr=[];constructor(e,t,n){super(1),this.array=[...e],this.keys=n,this.depNum=t}addNodeFunc(e){this.nodeFunc=e,this.nodess=this.array.map((t,n)=>e(t,this.updateArr,n)),this._$nodes=this.nodess.flat(1)}update(e){if(!(e&this.depNum))for(let t=0;t<this.array.length;t++)this.updateItem(t,e)}updateItem(e,t){this.updateArr[e]?.(t??this.depNum,this.array[e])}updateArray(e,t){if(t){this.updateWithKey(e,t);return}this.updateWithOutKey(e)}getNewNodes(e){return this.geneNewNodesInEnv(()=>this.nodeFunc(this.array[e],this.updateArr,e))}updateWithOutKey(e){let t=this.array.length,n=e.length;if(this.array=[...e],this.updateArr=this.updateArr.slice(0,n),t===n){for(let r=0;r<this.array.length;r++)this.updateItem(r);return}let o=this._$parentEl;if(t<n){let r=a.getFlowIndexFromNodes(o._$nodes,this),N=o.childNodes.length;for(let h=0;h<n;h++){if(h<t){r+=a.getFlowIndexFromNodes(this.nodess[h]),this.updateItem(h);continue}let p=this.getNewNodes(h);a.appendNodesWithIndex(p,o,r,N),this.nodess.push(p)}this._$nodes=this.nodess.flat(1);return}for(let r=0;r<n;r++)this.updateItem(r);for(let r=n;r<t;r++)this.removeNodes(this.nodess[r]);this.nodess=this.nodess.slice(0,n),this._$nodes=this.nodess.flat(1)}updateWithKey(e,t){let n=this.keys;if(this.array=[...e],this.keys=t,v.arrayEqual(n,this.keys)){for(let i=0;i<this.array.length;i++)this.updateItem(i);return}let o=this._$parentEl,r=this.nodess;if(this.keys.length===0){let i=o._$nodes??[];if(i.length===1&&i[0]===this)o.innerHTML="";else for(let u=0;u<n.length;u++)this.removeNodes(r[u]);this.nodess=[],this._$nodes=[],this.updateArr=[];return}let N=a.getFlowIndexFromNodes(o._$nodes,this);if(n.length===0){let i=o.childNodes[N];for(let u=0;u<this.keys.length;u++){let l=this.getNewNodes(u);a.appendNodesWithSibling(l,o,i),this.nodess.push(l)}this._$nodes=this.nodess.flat(1);return}let h=[],p=[],f=[];for(let i=0;i<n.length;i++){let u=n[i];if(this.keys.includes(u)){h.push(u),p.push(r[i]),f.push(this.updateArr[i]);continue}this.removeNodes(r[i])}let y=o.childNodes.length,c=N;for(let i=0;i<this.keys.length;i++){let u=this.keys[i],l=h.indexOf(u);if(l!==-1){c+=a.getFlowIndexFromNodes(p[l]),this.updateArr[l]?.(this.depNum,this.array[i]);continue}f.splice(i,0,null);let m=this.getNewNodes(i),A=a.appendNodesWithIndex(m,o,c,y);c+=A,y+=A,p.splice(i,0,m),h.splice(i,0,u)}if(v.arrayEqual(this.keys,h)){this.nodess=p,this._$nodes=this.nodess.flat(1),this.updateArr=f;return}c=N;let E=[];for(let i=0;i<this.keys.length;i++){let u=this.keys[i],l=h.indexOf(u),m=E[i];if(m){let L=a.appendNodesWithIndex(m,o,c+a.getFlowIndexFromNodes(m),y);c+=L,y+=L,E[i]=void 0}else if(l===i){c+=a.getFlowIndexFromNodes(p[i]);continue}else{E[this.keys.indexOf(h[i])]=p[i];let L=a.appendNodesWithIndex(p[l],o,c,y);c+=L,y+=L}let A=p[i];p[i]=p[l],p[l]=A;let S=h[i];h[i]=h[l],h[l]=S;let P=f[i];f[i]=f[l],f[l]=P}this.nodess=p,this._$nodes=this.nodess.flat(1),this.updateArr=f}static arrayEqual(e,t){return e.length!==t.length?!1:e.every((n,o)=>n===t[o])}};var D=class extends a{nodesFunc;constructor(e){super(4),this.nodesFunc=e,this._$nodes=D.formatNodes(e())}update(){let e=this.geneNewNodesInEnv(()=>D.formatNodes(this.nodesFunc()));if(this.removeNodes(this._$nodes),e.length===0){this._$nodes=[];return}let t=this._$parentEl,n=a.getFlowIndexFromNodes(t._$nodes,this),o=t.childNodes[n];a.appendNodesWithSibling(e,t,o),this._$nodes=e}static formatNodes(e){return Array.isArray(e)||(e=[e]),e.flat(1).filter(t=>t!=null&&typeof t!="boolean").map(t=>typeof t=="string"||typeof t=="number"||typeof t=="bigint"?document.createTextNode(`${t}`):"propViewFunc"in t?t.build():t).flat(1)}};var I=class extends a{condFunc;cond;depNum;constructor(e){super(2),this.depNum=e}addCondFunc(e){this.cond=-1,this.condFunc=e,this._$nodes=this.condFunc(this)}updateCond(){let e=this.geneNewNodesInEnv(()=>this.condFunc(this));if(this.didntChange)return this.didntChange=!1,this.updateFunc?.(this.depNum),this._$nodes;if(this._$nodes&&this._$nodes.length>0&&this.removeNodes(this._$nodes),e.length===0)return this._$nodes=[],this._$nodes;let t=this._$parentEl,n=a.getFlowIndexFromNodes(t._$nodes,this),o=t.childNodes[n];return a.appendNodesWithSibling(e,t,o),this._$nodes=e,this._$nodes}update(e){e&this.depNum||this.updateFunc?.(e)}};var x=class{envs={};currentEnvNodes=[];addEnvNode(e){this.currentEnvNodes.push(e),this.mergeEnvs()}replaceEnvNodes(e){this.currentEnvNodes=e,this.mergeEnvs()}removeEnvNode(){this.currentEnvNodes.pop(),this.mergeEnvs()}mergeEnvs(){this.envs={},this.currentEnvNodes.forEach(e=>{Object.entries(e.envs).forEach(([t,n])=>{this.envs[t]=[n,e]})})}};window.DLEnvStore||(window.DLEnvStore=new x);var M=class extends d{updateNodes=new Set;envs;constructor(e){super(3),this.envs=e,window.DLEnvStore.addEnvNode(this)}updateEnv(e,t){this.envs[e]=t,window.DLEnvStore.currentEnvNodes.includes(this)&&window.DLEnvStore.mergeEnvs(),this.updateNodes.forEach(n=>{n._$updateEnv(e,t,this)})}addNode(e){this.updateNodes.add(e),d.addWillUnmount(e,this.updateNodes.delete.bind(this.updateNodes,e))}initNodes(e){this._$nodes=e,window.DLEnvStore.removeEnvNode()}};function ue(s){return document.createTextNode(s)}function le(s,e){s.textContent!==e&&(s.textContent=e)}var F=class{propViewFunc;dlUpdateFunc=new Set;constructor(e){this.propViewFunc=e}build(){let e,t=o=>{o.initd=!0,e=o,this.dlUpdateFunc.add(o)},n=this.propViewFunc(t);return n.length===0?[]:(e&&d.addWillUnmount(n[0],this.dlUpdateFunc.delete.bind(this.dlUpdateFunc,e)),n)}update(e){this.dlUpdateFunc.forEach(t=>{if(t.initd){delete t.initd;return}t(e)})}};var H=class extends d{constructor(){super(5)}};function $e(s,e){let t=s;if(typeof s=="string"){let o=document.getElementById(s);if(o)t=o;else throw new Error(`DLight: Element with id ${s} not found`)}t.innerHTML="";let n=new e;n._$init(),b(t,n,0)}function ve(s,e){return s()}function j(s){return s}var De=j;export{De as $,g as CompNode,I as CondNode,M as EnvNode,D as ExpNode,v as ForNode,F as PropView,H as SubViewNode,Q as View,G as createElement,R as createTemplate,ue as createTextNode,j as escape,w as forwardHTMLProp,b as insertNode,ve as manual,$e as render,W as setDataset,K as setEvent,T as setHTMLAttr,O as setHTMLAttrs,_ as setHTMLProp,U as setHTMLProps,C as setStyle,X as update,le as updateText};
var f={Comp:0,For:1,Cond:2,Env:3,Exp:4,Subview:5},d=class{_$dlNodeType;constructor(t){this._$dlNodeType=t}get _$el(){return d.toEls(this._$nodes)}_$parentEl;_$nodes;static toEls(t){let e=[];return this.loopShallowEls(t,s=>{e.push(s)}),e}static loopDLNodes(t,e){t.forEach(s=>{e(s),s._$nodes&&d.loopDLNodes(s._$nodes,e)})}static loopDLNodesInsideOut(t,e){t.forEach(s=>{s._$nodes&&d.loopDLNodesInsideOut(s._$nodes,e),e(s)})}static loopShallowEls(t,e){t.forEach(s=>{if(!("_$dlNodeType"in s))return e(s);s._$nodes&&d.loopShallowEls(s._$nodes,e)})}static loopShallowDLNodes(t,e){t.forEach(s=>{"_$dlNodeType"in s&&(e(s),s._$nodes&&d.loopShallowDLNodes(s._$nodes,e))})}static addParentEl(t,e){this.loopShallowDLNodes(t,s=>{s._$parentEl=e})}static getFlowIndexFromNodes(t,e){let s=0,n=[...t];for(;n.length>0;){let i=n.shift();if(i===e)break;"_$dlNodeType"in i?i._$nodes&&n.unshift(...i._$nodes):s++}return s}static appendNodesWithSibling(t,e,s){return s?this.insertNodesBefore(t,e,s):this.appendNodes(t,e)}static appendNodesWithIndex(t,e,s,n){return n=n??e.childNodes.length,n!==s?this.insertNodesBefore(t,e,e.childNodes[s]):this.appendNodes(t,e)}static insertNodesBefore(t,e,s){let n=0;return this.loopShallowEls(t,i=>{e.insertBefore(i,s),n++}),n}static appendNodes(t,e){let s=0;return this.loopShallowEls(t,n=>{e.appendChild(n),s++}),s}static willUnmountFunc(t,e){t(),e?.()}static addWillUnmount(t,e){t.willUnmount=this.willUnmountFunc.bind(this,e,t.willUnmount?.bind(t))}};var h={global:window,document};function M(o){h.global=o}function C(o){h.document=o}function H(o,t){Object.assign(o.style,t)}function K(o,t){Object.assign(o.dataset,t)}function S(o,t,e){let s=`$${t}`;s in o&&o[s]===e||(o[t]=e,o[s]=e)}function j(o,t){Object.entries(t).forEach(([e,s])=>{S(o,e,s)})}function F(o,t,e){let s=`$${t}`;s in o&&o[s]===e||(o.setAttribute(t,e),o[s]=e)}function B(o,t){Object.entries(t).forEach(([e,s])=>{F(o,e,s)})}function V(o,t,e){let s=o[`$on${t}`];s&&o.removeEventListener(t,s),o.addEventListener(t,e),o[`$on${t}`]=e}function R(o){let t=h.document.createElement("template");t.innerHTML=o;let e=t.content.firstChild;return()=>e.cloneNode(!0)}function X(o){return h.document.createElement(o)}function y(o,t,e){o._$nodes||(o._$nodes=Array.from(o.childNodes)),o._$nodes.splice(e,0,t);let s=d.getFlowIndexFromNodes(o._$nodes,t);d.appendNodesWithIndex([t],o,s),d.addParentEl([t],o)}function b(o,t,e){if(t==="style"){H(o,e);return}if(t==="dataset"){K(o,e);return}if(t!=="element"){if(t==="prop"){j(o,e);return}if(t==="attr"){B(o,e);return}if(t==="innerHTML"){S(o,"innerHTML",e);return}if(t!=="forwardProp"){if(t.startsWith("on")){V(o,t.slice(2).toLowerCase(),e);return}F(o,t,e)}}}var I=class extends d{constructor(){super(f.Comp)}_$init(t,e,s,n){this._$notInitd=!0,n&&n._$addForwardProps(this),e!==null&&this._$setContent(e),t&&Object.entries(t).forEach(([i,$])=>{this._$setProp(i,$)}),s&&(this._$children=s),Object.entries(h.global.DLEnvStore.envs).forEach(([i,[$,a]])=>{a.addNode(this),this._$initEnv(i,$,a)}),this._$callUpdatesBeforeInit(),this.willMount?.(),this._$nodes=this.View?.()??[],this.didMount?.()}_$callUpdatesBeforeInit(){let t=Object.getOwnPropertyNames(Object.getPrototypeOf(this)),e=Object.getOwnPropertyNames(this);[...t,...e].forEach(n=>{if(n.startsWith("$w$"))return this[n.slice(3)]();n.startsWith("$f$")&&(this[`$${n.slice(3)}`]=this[n])}),delete this._$notInitd}_$setForwardProp(t,e){if(t in this){this[t]=e;return}this._$forwardPropsId.push(t);let s=`$${t}`;this[s]=e,Object.defineProperty(this,t,{get(){return this[s]},set(n){this[s]!==n&&(this[s]=n,this._$forwardPropsSet?.forEach(i=>{i._$dlNodeType===f.Comp&&i._$setProp(t,n),i instanceof HTMLElement&&b(i,t,n)}))}})}_$addForwardProps(t){this._$forwardPropsSet.add(t),this._$forwardPropsId.forEach(e=>{let s=this[e];this._$forwardPropsSet?.forEach(n=>{n._$dlNodeType===f.Comp&&("_$forwardProps"in n&&n._$forwardPropsId.push(e),n._$setProp(e,s)),n instanceof HTMLElement&&b(n,e,s)})}),d.addWillUnmount(t,this._$forwardPropsSet.delete.bind(this._$forwardPropsSet,t))}_$setProp(t,e){"_$forwardProps"in this&&this._$setForwardProp(t,e),`$p$${t}`in this&&(this[t]=e)}_$initEnv(t,e,s){`$e$${t}`in this&&(this[t]=e,this[`$en$${t}`]=s)}_$updateEnv(t,e,s){`$e$${t}`in this&&s===this[`$en$${t}`]&&this[t]!==e&&(this[t]=e)}_$setContent(t){let e=this._$contentKey;e&&this[e]!==t&&(this[e]=t)}_$updateProp(t,e){let s=`$${t}`;this[s]!==e&&(this[s]=e,this._$updateDerived(t),this._$updateView(t))}_$updateDerived(t){"_$notInitd"in this||this[`$s$${t}`]?.forEach(e=>{`$w$${e}`in this?this[e]():this[`$${e}`]=this[`$f$${e}`]})}_$updateView(t){let e=this[`$$${t}`];e&&this._$update?.(e)}},et=I;function st(o,t){o._$updateDerived(t),o._$updateView(t)}var D=class{constructor(){this.envs={},this.currentEnvNodes=[]}addEnvNode(t){this.currentEnvNodes.push(t),this.mergeEnvs()}replaceEnvNodes(t){this.currentEnvNodes=t,this.mergeEnvs()}removeEnvNode(){this.currentEnvNodes.pop(),this.mergeEnvs()}mergeEnvs(){this.envs={},this.currentEnvNodes.forEach(t=>{Object.entries(t.envs).forEach(([e,s])=>{this.envs[e]=[s,t]})})}};h.global.DLEnvStore||(h.global.DLEnvStore=new D);var P=class extends d{constructor(t){super(f.Env),this.envs=t,this.updateNodes=new Set,h.global.DLEnvStore.addEnvNode(this)}updateEnv(t,e){this.envs[t]=e,h.global.DLEnvStore.currentEnvNodes.includes(this)&&h.global.DLEnvStore.mergeEnvs(),this.updateNodes.forEach(s=>{s._$updateEnv(t,e,this)})}addNode(t){this.updateNodes.add(t),d.addWillUnmount(t,this.updateNodes.delete.bind(this.updateNodes,t))}initNodes(t){this._$nodes=t,h.global.DLEnvStore.removeEnvNode()}};function ht(o){return h.document.createTextNode(o)}function pt(o,t){o.textContent!==t&&(o.textContent=t)}var T=class{propViewFunc;dlUpdateFunc=new Set;constructor(t){this.propViewFunc=t}build(){let t,e=n=>{n.initd=!0,t=n,this.dlUpdateFunc.add(n)},s=this.propViewFunc(e);return s.length===0?[]:(t&&d.addWillUnmount(s[0],this.dlUpdateFunc.delete.bind(this.dlUpdateFunc,t)),s)}update(t){this.dlUpdateFunc.forEach(e=>{if(e.initd){delete e.initd;return}e(t)})}};var W=class extends d{constructor(){super(f.Subview)}};var p=class extends d{constructor(t){super(t),h.global.DLEnvStore.currentEnvNodes.length>0&&(this.savedEnvNodes=[...h.global.DLEnvStore.currentEnvNodes])}initNewNodes(t){d.addParentEl(t,this._$parentEl)}geneNewNodesInEnv(t){if(!this.savedEnvNodes){let n=t();return this.initNewNodes(n),n}let e=h.global.DLEnvStore.currentEnvNodes;h.global.DLEnvStore.replaceEnvNodes(this.savedEnvNodes);let s=t();return h.global.DLEnvStore.replaceEnvNodes(e),this.initNewNodes(s),s}removeNodes(t){d.loopDLNodes(t,e=>e.willUnmount?.()),d.loopShallowEls(t,e=>{this._$parentEl?.removeChild(e)}),d.loopDLNodesInsideOut(t,e=>e.didUnmount?.())}};var w=class extends p{array;keys;nodeFunc;nodess;depNum;updateArr=[];constructor(t,e,s){super(f.For),this.array=[...t],this.keys=s,this.depNum=e}addNodeFunc(t){this.nodeFunc=t,this.nodess=this.array.map((e,s)=>t(e,this.updateArr,s)),this._$nodes=this.nodess.flat(1)}update(t){if(!(t&this.depNum))for(let e=0;e<this.array.length;e++)this.updateItem(e,t)}updateItem(t,e){this.updateArr[t]?.(e??this.depNum,this.array[t])}updateArray(t,e){if(e){this.updateWithKey(t,e);return}this.updateWithOutKey(t)}getNewNodes(t){return this.geneNewNodesInEnv(()=>this.nodeFunc(this.array[t],this.updateArr,t))}updateWithOutKey(t){let e=this.array.length,s=t.length;if(this.array=[...t],this.updateArr=this.updateArr.slice(0,s),e===s){for(let i=0;i<this.array.length;i++)this.updateItem(i);return}let n=this._$parentEl;if(e<s){let i=p.getFlowIndexFromNodes(n._$nodes,this),$=n.childNodes.length;for(let a=0;a<s;a++){if(a<e){i+=p.getFlowIndexFromNodes(this.nodess[a]),this.updateItem(a);continue}let l=this.getNewNodes(a);p.appendNodesWithIndex(l,n,i,$),this.nodess.push(l)}this._$nodes=this.nodess.flat(1);return}for(let i=0;i<s;i++)this.updateItem(i);for(let i=s;i<e;i++)this.removeNodes(this.nodess[i]);this.nodess=this.nodess.slice(0,s),this._$nodes=this.nodess.flat(1)}updateWithKey(t,e){let s=this.keys;if(this.array=[...t],this.keys=e,w.arrayEqual(s,this.keys)){for(let r=0;r<this.array.length;r++)this.updateItem(r);return}let n=this._$parentEl,i=this.nodess;if(this.keys.length===0){let r=n._$nodes??[];if(r.length===1&&r[0]===this)n.innerHTML="";else for(let c=0;c<s.length;c++)this.removeNodes(i[c]);this.nodess=[],this._$nodes=[],this.updateArr=[];return}let $=p.getFlowIndexFromNodes(n._$nodes,this);if(s.length===0){let r=n.childNodes[$];for(let c=0;c<this.keys.length;c++){let u=this.getNewNodes(c);p.appendNodesWithSibling(u,n,r),this.nodess.push(u)}this._$nodes=this.nodess.flat(1);return}let a=[],l=[],N=[];for(let r=0;r<s.length;r++){let c=s[r];if(this.keys.includes(c)){a.push(c),l.push(i[r]),N.push(this.updateArr[r]);continue}this.removeNodes(i[r])}let E=n.childNodes.length,m=$;for(let r=0;r<this.keys.length;r++){let c=this.keys[r],u=a.indexOf(c);if(u!==-1){m+=p.getFlowIndexFromNodes(l[u]),this.updateArr[u]?.(this.depNum,this.array[r]);continue}N.splice(r,0,null);let x=this.getNewNodes(r),v=p.appendNodesWithIndex(x,n,m,E);m+=v,E+=v,l.splice(r,0,x),a.splice(r,0,c)}if(w.arrayEqual(this.keys,a)){this.nodess=l,this._$nodes=this.nodess.flat(1),this.updateArr=N;return}m=$;let L=[];for(let r=0;r<this.keys.length;r++){let c=this.keys[r],u=a.indexOf(c),x=L[r];if(x){let _=p.appendNodesWithIndex(x,n,m+p.getFlowIndexFromNodes(x),E);m+=_,E+=_,L[r]=void 0}else if(u===r){m+=p.getFlowIndexFromNodes(l[r]);continue}else{L[this.keys.indexOf(a[r])]=l[r];let _=p.appendNodesWithIndex(l[u],n,m,E);m+=_,E+=_}let v=l[r];l[r]=l[u],l[u]=v;let O=a[r];a[r]=a[u],a[u]=O;let A=N[r];N[r]=N[u],N[u]=A}this.nodess=l,this._$nodes=this.nodess.flat(1),this.updateArr=N}static arrayEqual(t,e){return t.length!==e.length?!1:t.every((s,n)=>s===e[n])}};var g=class extends p{nodesFunc;constructor(t){super(f.Exp),this.nodesFunc=t,this._$nodes=g.formatNodes(t())}update(){let t=this.geneNewNodesInEnv(()=>g.formatNodes(this.nodesFunc()));if(this.removeNodes(this._$nodes),t.length===0){this._$nodes=[];return}let e=this._$parentEl,s=p.getFlowIndexFromNodes(e._$nodes,this),n=e.childNodes[s];p.appendNodesWithSibling(t,e,n),this._$nodes=t}static formatNodes(t){return Array.isArray(t)||(t=[t]),t.flat(1).filter(e=>e!=null&&typeof e!="boolean").map(e=>typeof e=="string"||typeof e=="number"||typeof e=="bigint"?h.document.createTextNode(`${e}`):"propViewFunc"in e?e.build():e).flat(1)}};var U=class extends p{condFunc;cond;depNum;constructor(t){super(f.Cond),this.depNum=t}addCondFunc(t){this.cond=-1,this.condFunc=t,this._$nodes=this.condFunc(this)}updateCond(){let t=this.geneNewNodesInEnv(()=>this.condFunc(this));if(this.didntChange)return this.didntChange=!1,this.updateFunc?.(this.depNum),this._$nodes;if(this._$nodes&&this._$nodes.length>0&&this.removeNodes(this._$nodes),t.length===0)return this._$nodes=[],this._$nodes;let e=this._$parentEl,s=p.getFlowIndexFromNodes(e._$nodes,this),n=e.childNodes[s];return p.appendNodesWithSibling(t,e,n),this._$nodes=t,this._$nodes}update(t){t&this.depNum||this.updateFunc?.(t)}};function yt(o,t){let e=o;if(typeof o=="string"){let n=h.document.getElementById(o);if(n)e=n;else throw new Error(`DLight: Element with id ${o} not found`)}e.innerHTML="";let s=new t;s._$init(),y(e,s,0)}function Pt(o,t){return o()}function q(o){return o}var Tt=q;export{Tt as $,I as CompNode,U as CondNode,P as EnvNode,g as ExpNode,w as ForNode,T as PropView,W as SubViewNode,et as View,X as createElement,R as createTemplate,ht as createTextNode,q as escape,b as forwardHTMLProp,y as insertNode,Pt as manual,yt as render,K as setDataset,C as setDocument,V as setEvent,M as setGlobal,F as setHTMLAttr,B as setHTMLAttrs,S as setHTMLProp,j as setHTMLProps,H as setStyle,st as update,pt as updateText};
//# sourceMappingURL=index.js.map
{
"name": "@dlightjs/dlight",
"version": "1.0.0-alpha.36",
"version": "1.0.0-alpha.37",
"description": "DX-first UI rendering library",

@@ -22,3 +22,2 @@ "author": {

"devDependencies": {
"typescript": "^4.5.2",
"tsup": "^6.5.0"

@@ -28,3 +27,3 @@ },

"entry": [
"src/index.ts"
"src/index.js"
],

@@ -36,8 +35,7 @@ "format": [

"clean": true,
"dts": true,
"minify": true
},
"scripts": {
"build": "tsup --sourcemap"
"build": "tsup --sourcemap && cp src/index.d.ts dist/index.d.ts"
}
}

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc