@lumino/virtualdom - npm Package Compare versions

Comparing version 1.2.1 to 1.3.0

lib/index.d.ts

@@ -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.

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

package.json

 {
   "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 <[e-mail]>",
   },
-  "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"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

52852

increased by14.43%

Lines of code

1190

increased by16.67%

Worsened metrics

Dev dependency count

16

increased by6.67%

Dependency changes

• Updated@lumino/algorithm@^1.2.2