@lumino/virtualdom
Advanced tools
Comparing version 1.2.1 to 1.3.0
@@ -258,5 +258,54 @@ /** | ||
/** | ||
* A "pass thru" virtual node whose children are managed by a render and an | ||
* unrender callback. The intent of this flavor of virtual node is to make | ||
* it easy to blend other kinds of virtualdom (eg React) into Phosphor's | ||
* virtualdom. | ||
* | ||
* #### Notes | ||
* User code will not typically create a `VirtualElementPass` node directly. | ||
* Instead, the `hpass()` function will be used to create an element tree. | ||
*/ | ||
export declare class VirtualElementPass { | ||
readonly tag: string; | ||
readonly attrs: ElementAttrs; | ||
readonly renderer: VirtualElementPass.IRenderer | null; | ||
/** | ||
* The type of the node. | ||
* | ||
* This value can be used as a type guard for discriminating the | ||
* `VirtualNode` union type. | ||
*/ | ||
readonly type: 'passthru'; | ||
/** | ||
* Construct a new virtual element pass thru node. | ||
* | ||
* @param tag - the tag of the parent element of this node. Once the parent | ||
* element is rendered, it will be passed as an argument to | ||
* renderer.render | ||
* | ||
* @param attrs - attributes that will assigned to the | ||
* parent element | ||
* | ||
* @param renderer - an object with render and unrender | ||
* functions, each of which should take a single argument of type | ||
* HTMLElement and return nothing. If null, the parent element | ||
* will be rendered barren without any children. | ||
*/ | ||
constructor(tag: string, attrs: ElementAttrs, renderer: VirtualElementPass.IRenderer | null); | ||
render(host: HTMLElement): void; | ||
unrender(host: HTMLElement): void; | ||
} | ||
/** | ||
* The namespace for the VirtualElementPass class statics. | ||
*/ | ||
export declare namespace VirtualElementPass { | ||
type IRenderer = { | ||
render: (host: HTMLElement) => void; | ||
unrender: (host: HTMLElement) => void; | ||
}; | ||
} | ||
/** | ||
* A type alias for a general virtual node. | ||
*/ | ||
export declare type VirtualNode = VirtualElement | VirtualText; | ||
export declare type VirtualNode = VirtualElement | VirtualElementPass | VirtualText; | ||
/** | ||
@@ -400,2 +449,16 @@ * Create a new virtual element node. | ||
/** | ||
* Create a new "pass thru" virtual element node. | ||
* | ||
* @param tag - The tag name for the parent element. | ||
* | ||
* @param attrs - The attributes for the parent element, if any. | ||
* | ||
* @param renderer - an object with render and unrender functions, if any. | ||
* | ||
* @returns A new "pass thru" virtual element node for the given parameters. | ||
* | ||
*/ | ||
export declare function hpass(tag: string, renderer?: VirtualElementPass.IRenderer): VirtualElementPass; | ||
export declare function hpass(tag: string, attrs: ElementAttrs, renderer?: VirtualElementPass.IRenderer): VirtualElementPass; | ||
/** | ||
* The namespace for the virtual DOM rendering functions. | ||
@@ -417,3 +480,5 @@ */ | ||
*/ | ||
function realize(node: VirtualText): Text; | ||
function realize(node: VirtualElement): HTMLElement; | ||
function realize(node: VirtualElementPass): HTMLElement; | ||
/** | ||
@@ -420,0 +485,0 @@ * Render virtual DOM content into a host element. |
176
lib/index.js
@@ -71,2 +71,55 @@ "use strict"; | ||
exports.VirtualElement = VirtualElement; | ||
/** | ||
* A "pass thru" virtual node whose children are managed by a render and an | ||
* unrender callback. The intent of this flavor of virtual node is to make | ||
* it easy to blend other kinds of virtualdom (eg React) into Phosphor's | ||
* virtualdom. | ||
* | ||
* #### Notes | ||
* User code will not typically create a `VirtualElementPass` node directly. | ||
* Instead, the `hpass()` function will be used to create an element tree. | ||
*/ | ||
var VirtualElementPass = /** @class */ (function () { | ||
/** | ||
* Construct a new virtual element pass thru node. | ||
* | ||
* @param tag - the tag of the parent element of this node. Once the parent | ||
* element is rendered, it will be passed as an argument to | ||
* renderer.render | ||
* | ||
* @param attrs - attributes that will assigned to the | ||
* parent element | ||
* | ||
* @param renderer - an object with render and unrender | ||
* functions, each of which should take a single argument of type | ||
* HTMLElement and return nothing. If null, the parent element | ||
* will be rendered barren without any children. | ||
*/ | ||
function VirtualElementPass(tag, attrs, renderer) { | ||
this.tag = tag; | ||
this.attrs = attrs; | ||
this.renderer = renderer; | ||
/** | ||
* The type of the node. | ||
* | ||
* This value can be used as a type guard for discriminating the | ||
* `VirtualNode` union type. | ||
*/ | ||
this.type = 'passthru'; | ||
} | ||
VirtualElementPass.prototype.render = function (host) { | ||
// skip actual render if renderer is null | ||
if (this.renderer) { | ||
this.renderer.render(host); | ||
} | ||
}; | ||
VirtualElementPass.prototype.unrender = function (host) { | ||
// skip actual unrender if renderer is null | ||
if (this.renderer) { | ||
this.renderer.unrender(host); | ||
} | ||
}; | ||
return VirtualElementPass; | ||
}()); | ||
exports.VirtualElementPass = VirtualElementPass; | ||
function h(tag) { | ||
@@ -86,2 +139,5 @@ var attrs = {}; | ||
} | ||
else if (arg instanceof VirtualElementPass) { | ||
children.push(arg); | ||
} | ||
else if (arg instanceof Array) { | ||
@@ -107,2 +163,5 @@ extend(children, arg); | ||
} | ||
else if (child instanceof VirtualElementPass) { | ||
array.push(child); | ||
} | ||
} | ||
@@ -214,2 +273,21 @@ } | ||
})(h = exports.h || (exports.h = {})); | ||
function hpass(tag) { | ||
var attrs = {}; | ||
var renderer = null; | ||
if (arguments.length === 2) { | ||
var arg = arguments[1]; | ||
if ("render" in arg && "unrender" in arg) { | ||
renderer = arg; | ||
} | ||
else { | ||
attrs = arg; | ||
} | ||
} | ||
else if (arguments.length === 3) { | ||
attrs = arguments[1]; | ||
renderer = arguments[2]; | ||
} | ||
return new VirtualElementPass(tag, attrs, renderer); | ||
} | ||
exports.hpass = hpass; | ||
/** | ||
@@ -220,15 +298,2 @@ * The namespace for the virtual DOM rendering functions. | ||
(function (VirtualDOM) { | ||
/** | ||
* Create a real DOM element from a virtual element node. | ||
* | ||
* @param node - The virtual element node to realize. | ||
* | ||
* @returns A new DOM element for the given virtual element node. | ||
* | ||
* #### Notes | ||
* This creates a brand new *real* DOM element with a structure which | ||
* matches the given virtual DOM node. | ||
* | ||
* If virtual diffing is desired, use the `render` function instead. | ||
*/ | ||
function realize(node) { | ||
@@ -285,16 +350,26 @@ return Private.createDOMNode(node); | ||
function createDOMNode(node) { | ||
// Create a text node for a virtual text node. | ||
if (node.type === 'text') { | ||
return document.createTextNode(node.content); | ||
var host = arguments[1] || null; | ||
var before = arguments[2] || null; | ||
if (host) { | ||
host.insertBefore(createDOMNode(node), before); | ||
} | ||
// Create the HTML element with the specified tag. | ||
var element = document.createElement(node.tag); | ||
// Add the attributes for the new element. | ||
addAttrs(element, node.attrs); | ||
// Recursively populate the element with child content. | ||
for (var i = 0, n = node.children.length; i < n; ++i) { | ||
element.appendChild(createDOMNode(node.children[i])); | ||
else { | ||
// Create a text node for a virtual text node. | ||
if (node.type === 'text') { | ||
return document.createTextNode(node.content); | ||
} | ||
// Create the HTML element with the specified tag. | ||
host = document.createElement(node.tag); | ||
// Add the attributes for the new element. | ||
addAttrs(host, node.attrs); | ||
if (node.type === 'passthru') { | ||
node.render(host); | ||
return host; | ||
} | ||
// Recursively populate the element with child content. | ||
for (var i = 0, n = node.children.length; i < n; ++i) { | ||
createDOMNode(node.children[i], host); | ||
} | ||
} | ||
// Return the populated element. | ||
return element; | ||
return host; | ||
} | ||
@@ -327,3 +402,3 @@ Private.createDOMNode = createDOMNode; | ||
if (i >= oldCopy.length) { | ||
host.appendChild(createDOMNode(newContent[i])); | ||
createDOMNode(newContent[i], host); | ||
continue; | ||
@@ -345,7 +420,14 @@ } | ||
} | ||
// If the old or new node is a text node, the other node is now | ||
// known to be an element node, so create and insert a new node. | ||
if (oldVNode.type === 'text' || newVNode.type === 'text') { | ||
// Handle the case of passthru update. | ||
if (oldVNode.type === 'passthru' && newVNode.type === 'passthru') { | ||
newVNode.render(currElem); | ||
currElem = currElem.nextSibling; | ||
continue; | ||
} | ||
// If the types of the old and new nodes differ, | ||
// create and insert a new node. | ||
if (oldVNode.type === 'text' || newVNode.type === 'text' || | ||
oldVNode.type === 'passthru' || newVNode.type === 'passthru') { | ||
algorithm_1.ArrayExt.insert(oldCopy, i, newVNode); | ||
host.insertBefore(createDOMNode(newVNode), currElem); | ||
createDOMNode(newVNode, host, currElem); | ||
continue; | ||
@@ -379,3 +461,3 @@ } | ||
algorithm_1.ArrayExt.insert(oldCopy, i, newVNode); | ||
host.insertBefore(createDOMNode(newVNode), currElem); | ||
createDOMNode(newVNode, host, currElem); | ||
continue; | ||
@@ -386,3 +468,3 @@ } | ||
algorithm_1.ArrayExt.insert(oldCopy, i, newVNode); | ||
host.insertBefore(createDOMNode(newVNode), currElem); | ||
createDOMNode(newVNode, host, currElem); | ||
continue; | ||
@@ -398,8 +480,31 @@ } | ||
} | ||
// Cleanup stale DOM | ||
removeContent(host, oldCopy, newCount, true); | ||
} | ||
Private.updateContent = updateContent; | ||
/** | ||
* Handle cleanup of stale vdom and its associated DOM. Stale nodes are | ||
* traversed recursively and any needed explicit cleanup is carried out ( | ||
* in particular, the unrender callback of VirtualElementPass nodes). The | ||
* stale children of the top level node are removed using removeChild. | ||
*/ | ||
function removeContent(host, oldContent, newCount, _sentinel) { | ||
if (_sentinel === void 0) { _sentinel = false; } | ||
// Dispose of the old nodes pushed to the end of the host. | ||
for (var i = oldCopy.length - newCount; i > 0; --i) { | ||
host.removeChild(host.lastChild); | ||
for (var i = oldContent.length - 1; i >= newCount; --i) { | ||
var oldNode = oldContent[i]; | ||
var child = (_sentinel ? host.lastChild : host.childNodes[i]); | ||
// recursively clean up host children | ||
if (oldNode.type === 'text') { } | ||
else if (oldNode.type === 'passthru') { | ||
oldNode.unrender(child); | ||
} | ||
else { | ||
removeContent(child, oldNode.children, 0); | ||
} | ||
if (_sentinel) { | ||
host.removeChild(child); | ||
} | ||
} | ||
} | ||
Private.updateContent = updateContent; | ||
/** | ||
@@ -575,1 +680,2 @@ * A set of special-cased attribute names. | ||
})(Private || (Private = {})); | ||
//# sourceMappingURL=index.js.map |
{ | ||
"name": "@lumino/virtualdom", | ||
"version": "1.2.1", | ||
"version": "1.3.0", | ||
"description": "Lumino Virtual DOM", | ||
@@ -9,2 +9,6 @@ "homepage": "https://github.com/jupyterlab/lumino", | ||
}, | ||
"repository": { | ||
"type": "git", | ||
"url": "https://github.com/jupyterlab/lumino.git" | ||
}, | ||
"license": "BSD-3-Clause", | ||
@@ -27,6 +31,2 @@ "author": "S. Chris Colbert <sccolbert@gmail.com>", | ||
}, | ||
"repository": { | ||
"type": "git", | ||
"url": "https://github.com/jupyterlab/lumino.git" | ||
}, | ||
"scripts": { | ||
@@ -36,3 +36,3 @@ "api": "api-extractor run --local --verbose", | ||
"build:test": "tsc --build tests && cd tests && webpack", | ||
"clean": "rimraf lib", | ||
"clean": "rimraf lib && rimraf *.tsbuildinfo", | ||
"clean:test": "rimraf tests/build", | ||
@@ -42,2 +42,5 @@ "docs": "typedoc --options tdoptions.json src", | ||
"test:chrome": "cd tests && karma start --browsers=Chrome", | ||
"test:chrome-headless": "cd tests && karma start --browsers=ChromeHeadless", | ||
"test:debug": "cd tests && karma start --browsers=Chrome --singleRun=false --debug=true --browserNoActivityTimeout=10000000 --browserDisconnectTimeout=10000000", | ||
"test:debug:chrome-headless": "cd tests && karma start --browsers=ChromeHeadless --singleRun=false --debug=true --browserNoActivityTimeout=10000000 --browserDisconnectTimeout=10000000", | ||
"test:firefox": "cd tests && karma start --browsers=Firefox", | ||
@@ -48,3 +51,3 @@ "test:ie": "cd tests && karma start --browsers=IE", | ||
"dependencies": { | ||
"@lumino/algorithm": "^1.2.1" | ||
"@lumino/algorithm": "^1.2.2" | ||
}, | ||
@@ -56,3 +59,3 @@ "devDependencies": { | ||
"chai": "^3.5.0", | ||
"karma": "^1.5.0", | ||
"karma": "^4.4.1", | ||
"karma-chrome-launcher": "^2.0.0", | ||
@@ -63,7 +66,8 @@ "karma-firefox-launcher": "^1.0.0", | ||
"karma-mocha-reporter": "^2.2.2", | ||
"mocha": "^3.2.0", | ||
"mocha": "^6.2.2", | ||
"rimraf": "^2.5.2", | ||
"typedoc": "~0.12.0", | ||
"typescript": "~3.0.3", | ||
"webpack": "^2.2.1" | ||
"typedoc": "~0.15.0", | ||
"typescript": "~3.6.4", | ||
"webpack": "^4.41.3", | ||
"webpack-cli": "^3.3.10" | ||
}, | ||
@@ -73,3 +77,3 @@ "publishConfig": { | ||
}, | ||
"gitHead": "15fff95b04349ef7247e8e2e7a5f54c61171d613" | ||
"gitHead": "53ec13d322579e356862268970649f9c1213a7ac" | ||
} |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
52852
1190
16
Updated@lumino/algorithm@^1.2.2