cascade - npm Package Compare versions

Comparing version 0.4.3 to 0.5.0

dist/scripts/cascade/Cascade.d.ts

@@ -0,0 +0,0 @@ import Graph from '../graph/Graph';

dist/scripts/cascade/Cascade.js

@@ -0,0 +0,0 @@ Object.defineProperty(exports, "__esModule", { value: true });

dist/scripts/cascade/Decorators.d.ts

@@ -0,0 +0,0 @@ export declare function array<T>(target: any, propertyKey: string): any;

dist/scripts/cascade/Decorators.js

@@ -0,0 +0,0 @@ Object.defineProperty(exports, "__esModule", { value: true });

dist/scripts/dom/Component.d.ts

@@ -20,2 +20,3 @@ import VirtualNode from './VirtualNode';
     rendered: boolean;
+    portal: boolean;
     constructor(props?: T & IVirtualNodeProps, ...children: any[]);
@@ -35,3 +36,3 @@ storeProps(props?: T & IVirtualNodeProps, ...children: any[]): void;
     diffFragments(newRootComponentNode: ComponentNode<IVirtualNodeProps>, oldRootComponentNode: ComponentNode<IVirtualNodeProps>, oldElement: Node, namespace: string, offsetIndex?: number): Node;
-    diffComponents(newRootComponentNode: ComponentNode<IVirtualNodeProps>, oldRootComponentNode: ComponentNode<IVirtualNodeProps>, oldElement: Node, namespace: string): Node;
+    diffComponents(newRootComponentNode: ComponentNode<IVirtualNodeProps>, oldRootComponentNode: ComponentNode<IVirtualNodeProps>, namespace: string): Node;
     diffVirtualNodes(newRoot: VirtualNode<IVirtualNodeProps>, oldRoot: VirtualNode<IVirtualNodeProps>, oldElement: HTMLElement, namespace: string, offsetIndex?: number): HTMLElement;
@@ -38,0 +39,0 @@ getChildLength(): any;

dist/scripts/dom/Component.js

@@ -15,2 +15,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
         this.rendered = false;
+        this.portal = false;
         this.uniqueId = Math.floor(Math.random() * 1000000);
@@ -98,3 +99,4 @@ this.storeProps(props, ...children);
                                 else {
-                                    element = this.diffComponents(root, oldRoot, oldElement, namespace);
+                                    element = this.diffComponents(root, oldRoot, namespace);
+                                    swapChildren(element, oldElement);
                                 }
@@ -167,2 +169,5 @@ noDispose = true;
         this.mounted = true;
+        if (this.portal) {
+            element = document.createComment('Empty Component');
+        }
         return element;
@@ -206,8 +211,12 @@ }
     }
-    diffComponents(newRootComponentNode, oldRootComponentNode, oldElement, namespace) {
+    diffComponents(newRootComponentNode, oldRootComponentNode, namespace) {
+        if (newRootComponentNode === oldRootComponentNode) {
+            return oldRootComponentNode.component.element;
+        }
+        if (newRootComponentNode.component) {
+            return newRootComponentNode.component.element;
+        }
         var output;
         let oldRoot = oldRootComponentNode.component;
-        if (newRootComponentNode === oldRootComponentNode) {
-            return oldElement;
-        }
+        let oldElement = oldRoot.element;
         if (!oldRoot) {
@@ -248,3 +257,4 @@ throw 'Old Component has never been rendered.  Replacing with new Component.';
                                 else {
-                                    output = this.diffComponents(innerRoot, innerOldRoot, oldElement, namespace);
+                                    output = this.diffComponents(innerRoot, innerOldRoot, namespace);
+                                    swapChildren(output, oldElement);
                                 }
@@ -295,6 +305,6 @@ }
         }
-        if (output !== oldElement && oldElement && oldElement.parentNode) {
-            oldElement.parentNode.replaceChild(output, oldElement);
+        oldRoot.element = output;
+        if (oldRoot.portal) {
+            output = document.createComment('Empty Component');
         }
-        oldRoot.element = output;
         return output;
@@ -340,3 +350,4 @@ }
                                 else {
-                                    this.diffComponents(newChild, oldChild, oldElement.childNodes[childIndex], namespace);
+                                    let newNode = this.diffComponents(newChild, oldChild, namespace);
+                                    swapChildren(newNode, oldElement.childNodes[childIndex], oldElement, childIndex);
                                 }
@@ -448,2 +459,19 @@ }
 }
+function swapChildren(newNode, oldNode, parent, index) {
+    if (newNode) {
+        if (newNode !== oldNode) {
+            if (oldNode && oldNode.parentNode) {
+                oldNode.parentNode.replaceChild(newNode, oldNode);
+            }
+            else if (parent) {
+                parent.insertBefore(newNode, parent.childNodes[index + 1]);
+            }
+        }
+    }
+    else {
+        if (oldNode && oldNode.parentNode) {
+            oldNode.parentNode.removeChild(oldNode);
+        }
+    }
+}
 //# sourceMappingURL=Component.js.map

dist/scripts/dom/ComponentNode.d.ts

@@ -0,0 +0,0 @@ import { IVirtualNode, IVirtualNodeProps } from './IVirtualNode';

dist/scripts/dom/ComponentNode.js

@@ -0,0 +0,0 @@ Object.defineProperty(exports, "__esModule", { value: true });

dist/scripts/dom/Fragment.d.ts

@@ -0,0 +0,0 @@ import { IVirtualNode, IVirtualNodeProps } from './IVirtualNode';

dist/scripts/dom/Fragment.js

@@ -0,0 +0,0 @@ Object.defineProperty(exports, "__esModule", { value: true });

dist/scripts/dom/IVirtualNode.d.ts

@@ -0,0 +0,0 @@ export interface IVirtualNodeProps {

dist/scripts/dom/IVirtualNode.js

 Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=IVirtualNode.js.map

dist/scripts/dom/VirtualNode.d.ts

@@ -0,0 +0,0 @@ import { IVirtualNode, IVirtualElementProps } from './IVirtualNode';

dist/scripts/dom/VirtualNode.js

@@ -0,0 +0,0 @@ Object.defineProperty(exports, "__esModule", { value: true });

dist/scripts/graph/Computed.d.ts

@@ -0,0 +0,0 @@ import { IObservable, ISubscriber } from './IObservable';

dist/scripts/graph/Computed.js

@@ -0,0 +0,0 @@ Object.defineProperty(exports, "__esModule", { value: true });

dist/scripts/graph/ComputedQueue.d.ts

@@ -0,0 +0,0 @@ import Computed from './Computed';

dist/scripts/graph/ComputedQueue.js

@@ -0,0 +0,0 @@ Object.defineProperty(exports, "__esModule", { value: true });

dist/scripts/graph/Graph.d.ts

@@ -0,0 +0,0 @@ import { IObservable, ISubscriber, ISubscriberFunction } from './IObservable';

dist/scripts/graph/Graph.js

@@ -0,0 +0,0 @@ Object.defineProperty(exports, "__esModule", { value: true });

dist/scripts/graph/IObservable.d.ts

@@ -0,0 +0,0 @@ export interface ISubscriber {

dist/scripts/graph/IObservable.js

 Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=IObservable.js.map

dist/scripts/graph/Observable.d.ts

@@ -0,0 +0,0 @@ import { IObservable, ISubscriber, ISubscriberFunction } from './IObservable';

dist/scripts/graph/Observable.js

@@ -0,0 +0,0 @@ Object.defineProperty(exports, "__esModule", { value: true });

dist/scripts/graph/ObservableArray.d.ts

@@ -0,0 +0,0 @@ import Observable from './Observable';

dist/scripts/graph/ObservableArray.js

@@ -0,0 +0,0 @@ Object.defineProperty(exports, "__esModule", { value: true });

dist/scripts/graph/ObservableArrayLegacy.d.ts

@@ -0,0 +0,0 @@ import Observable from './Observable';

dist/scripts/graph/ObservableArrayLegacy.js

@@ -0,0 +0,0 @@ Object.defineProperty(exports, "__esModule", { value: true });

dist/scripts/graph/ObservableHash.d.ts

@@ -0,0 +0,0 @@ import Observable from './Observable';

dist/scripts/graph/ObservableHash.js

@@ -0,0 +0,0 @@ Object.defineProperty(exports, "__esModule", { value: true });

dist/scripts/jsx/Elements.d.ts

@@ -0,0 +0,0 @@ import { IVirtualNodeProps } from '../dom/IVirtualNode';

dist/scripts/jsx/Elements.js

 Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=Elements.js.map

dist/scripts/jsx/HTMLElements.d.ts

@@ -0,0 +0,0 @@ import { IVirtualNodeProps } from '../modules/Cascade';

dist/scripts/jsx/HTMLElements.js

 Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=HTMLElements.js.map

dist/scripts/jsx/JSX.d.ts

@@ -0,0 +0,0 @@ import { IVirtualNode, IVirtualNodeProps } from '../dom/IVirtualNode';

dist/scripts/jsx/JSX.js

 Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=JSX.js.map

dist/scripts/jsx/SVGElements.d.ts

@@ -0,0 +0,0 @@ import { IVirtualNodeProps } from '../modules/Cascade';

dist/scripts/jsx/SVGElements.js

 Object.defineProperty(exports, "__esModule", { value: true });
 //# sourceMappingURL=SVGElements.js.map

dist/scripts/modules/Cascade.d.ts

@@ -15,2 +15,3 @@ import '../jsx/JSX';
 export { Component } from '../dom/Component';
+export { default as Portal } from '../dom/Portal';
 export { default as DecoratorUtil, ObservableFactory } from '../util/DecoratorUtil';
@@ -17,0 +18,0 @@ export { observable, computed, array, hash } from '../cascade/Decorators';

dist/scripts/modules/Cascade.js

@@ -23,2 +23,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Component = Component_1.Component;
+var Portal_1 = require("../dom/Portal");
+exports.Portal = Portal_1.default;
 var DecoratorUtil_1 = require("../util/DecoratorUtil");
@@ -25,0 +27,0 @@ exports.DecoratorUtil = DecoratorUtil_1.default;

dist/scripts/util/DecoratorUtil.d.ts

@@ -0,0 +0,0 @@ import { IObservable } from '../modules/Cascade';

dist/scripts/util/DecoratorUtil.js

@@ -0,0 +0,0 @@ Object.defineProperty(exports, "__esModule", { value: true });

dist/scripts/util/Diff.d.ts

@@ -0,0 +0,0 @@ export default class Diff {

dist/scripts/util/Diff.js

@@ -0,0 +0,0 @@ Object.defineProperty(exports, "__esModule", { value: true });

dist/scripts/util/PromiseUtil.d.ts

 export declare function wait(time: number): Promise<{}>;

dist/scripts/util/PromiseUtil.js

@@ -0,0 +0,0 @@ Object.defineProperty(exports, "__esModule", { value: true });

package.json

 {
   "name": "cascade",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "description": "A modern library for creating user interfaces.",
@@ -32,4 +32,4 @@ "author": "Sean Johnson <[e-mail]>",
   "devDependencies": {
-    "@types/chai": "4.1.3",
-    "@types/mocha": "5.2.1",
+    "@types/chai": "4.1.4",
+    "@types/mocha": "5.2.3",
     "chai": "4.1.2",
@@ -41,7 +41,7 @@ "es6-shim": "0.35.3",
     "rimraf": "2.6.2",
-    "ts-loader": "4.4.1",
+    "ts-loader": "4.4.2",
     "typedoc": "0.11.1",
-    "typescript": "2.9.1",
-    "webpack": "4.12.0",
-    "webpack-cli": "3.0.3"
+    "typescript": "2.9.2",
+    "webpack": "4.13.0",
+    "webpack-cli": "3.0.8"
   },
@@ -48,0 +48,0 @@ "keywords": [

README.md

@@ -0,0 +0,0 @@ # Cascade

src/mocha/BrowserRunner.ts

@@ -29,2 +29,3 @@ /// <reference path="../../node_modules/@types/mocha/index.d.ts" />
 import '../tests/Cascade.render_Component_Test';
+import '../tests/Component.portal_Test';
 import '../tests/cascadeTest1';
@@ -40,2 +41,3 @@ import '../tests/cascadeTest2';
 import '../tests/Component.diff_Test';
+import '../tests/Component.diff_Nested_Children_Test';
 import '../tests/Component.dispose_Test';
@@ -42,0 +44,0 @@ import '../tests/Component.toNode_Test';

src/mocha/DomIntegration.js

@@ -0,0 +0,0 @@ var jsdom = require('jsdom');

src/mocha/NodeRunner.js

@@ -0,0 +0,0 @@ var fs = require('fs');

src/scripts/cascade/Cascade.ts

@@ -0,0 +0,0 @@ // TODO: Remove Proxy check

src/scripts/cascade/Decorators.ts

@@ -0,0 +0,0 @@ import Cascade from './Cascade';

src/scripts/dom/Component.ts

@@ -32,2 +32,3 @@ import Cascade from '../cascade/Cascade';
     rendered: boolean = false;
+    portal: boolean = false;
 
@@ -150,3 +151,4 @@ constructor(props?: T & IVirtualNodeProps, ...children: any[]) {
                                 } else {
-                                    element = this.diffComponents(root, oldRoot, oldElement, namespace);
+                                    element = this.diffComponents(root, oldRoot, namespace);
+                                    swapChildren(element, oldElement);
                                 }
@@ -232,2 +234,7 @@ noDispose = true;
         this.mounted = true;
+
+        if (this.portal) {
+            element = document.createComment('Empty Component');
+        }
+
         return element;
@@ -285,11 +292,19 @@ }
 
-    diffComponents(newRootComponentNode: ComponentNode<IVirtualNodeProps>, oldRootComponentNode: ComponentNode<IVirtualNodeProps>, oldElement: Node, namespace: string) {
+    diffComponents(newRootComponentNode: ComponentNode<IVirtualNodeProps>, oldRootComponentNode: ComponentNode<IVirtualNodeProps>, namespace: string) {
+        // No diff necessary.  We have the exact same Components
+        if (newRootComponentNode === oldRootComponentNode) {
+            return oldRootComponentNode.component.element;
+        }
+
+        // We have already rendered newRootComponentNode.  It is likely a child Component.
+        if (newRootComponentNode.component) {
+            return newRootComponentNode.component.element;
+        }
+
         var output: Node;
         let oldRoot = oldRootComponentNode.component;
-        if (newRootComponentNode === oldRootComponentNode) {
-            // No diff necessary.  We have the exact same Components
-            return oldElement;
-        }
+        let oldElement = oldRoot.element;
+
+        // This should never happen
         if (!oldRoot) {
-            // This should never happen
             throw 'Old Component has never been rendered.  Replacing with new Component.';
@@ -333,3 +348,4 @@ }
                                 } else {
-                                    output = this.diffComponents(innerRoot, innerOldRoot, oldElement, namespace);
+                                    output = this.diffComponents(innerRoot, innerOldRoot, namespace);
+                                    swapChildren(output, oldElement);
                                 }
@@ -390,9 +406,8 @@ } else {
 
-        // Swap root elements if necessary
-        if (output !== oldElement && oldElement && oldElement.parentNode) {
-            oldElement.parentNode.replaceChild(output, oldElement);
+        oldRoot.element = output;
+
+        if (oldRoot.portal) {
+            output = document.createComment('Empty Component');
         }
 
-        oldRoot.element = output;
-
         return output;
@@ -442,3 +457,4 @@ }
                                 } else {
-                                    this.diffComponents(newChild, oldChild, oldElement.childNodes[childIndex] as HTMLElement, namespace);
+                                    let newNode = this.diffComponents(newChild, oldChild, namespace);
+                                    swapChildren(newNode, oldElement.childNodes[childIndex] as HTMLElement, oldElement, childIndex);
                                 }
@@ -562,1 +578,17 @@ } else if (newChild instanceof VirtualNode) {
 }
+
+function swapChildren(newNode: Node, oldNode: Node, parent?: HTMLElement, index?: number) {
+    if (newNode) {
+        if (newNode !== oldNode) {
+            if (oldNode && oldNode.parentNode) {
+                oldNode.parentNode.replaceChild(newNode, oldNode);
+            } else if (parent) {
+                parent.insertBefore(newNode, parent.childNodes[index + 1]);
+            }
+        }
+    } else {
+        if (oldNode && oldNode.parentNode) {
+            oldNode.parentNode.removeChild(oldNode);
+        }
+    }
+}

src/scripts/dom/ComponentNode.ts

@@ -0,0 +0,0 @@ import { IVirtualNode, IVirtualNodeProps } from './IVirtualNode';

src/scripts/dom/Fragment.ts

@@ -0,0 +0,0 @@ import VirtualNode from './VirtualNode';

src/scripts/dom/IVirtualNode.ts

@@ -0,0 +0,0 @@ export interface IVirtualNodeProps {

src/scripts/dom/VirtualNode.ts

@@ -0,0 +0,0 @@ import { IVirtualNode, IVirtualElementProps } from './IVirtualNode';

src/scripts/graph/Computed.ts

@@ -0,0 +0,0 @@ import { IObservable, ISubscriber } from './IObservable';

src/scripts/graph/ComputedQueue.ts

@@ -0,0 +0,0 @@ import Computed from './Computed';

src/scripts/graph/Graph.ts

@@ -0,0 +0,0 @@ import { IObservable, ISubscriber, ISubscriberFunction } from './IObservable';

src/scripts/graph/IObservable.ts

@@ -0,0 +0,0 @@ export interface ISubscriber {

src/scripts/graph/Observable.ts

@@ -0,0 +0,0 @@ import { IObservable, ISubscriber, ISubscriberFunction } from './IObservable';

src/scripts/graph/ObservableArray.ts

@@ -0,0 +0,0 @@ declare var Proxy: any;

src/scripts/graph/ObservableArrayLegacy.ts

@@ -0,0 +0,0 @@ import Observable from './Observable';

src/scripts/graph/ObservableHash.ts

@@ -0,0 +0,0 @@ declare var Proxy: any;

src/scripts/jsx/Elements.ts

@@ -0,0 +0,0 @@ import { IVirtualNodeProps } from '../dom/IVirtualNode';

src/scripts/jsx/HTMLElements.ts

@@ -0,0 +0,0 @@ import { IVirtualNodeProps } from '../modules/Cascade';

src/scripts/jsx/JSX.ts

@@ -0,0 +0,0 @@ import { IVirtualNode, IVirtualNodeProps } from '../dom/IVirtualNode';

src/scripts/jsx/SVGElements.ts

@@ -0,0 +0,0 @@ import { IVirtualNodeProps } from '../modules/Cascade';

src/scripts/modules/Cascade.ts

@@ -18,2 +18,3 @@ import '../jsx/JSX';
 export { Component } from '../dom/Component';
+export { default as Portal } from '../dom/Portal';
 
@@ -20,0 +21,0 @@ export { default as DecoratorUtil, ObservableFactory } from '../util/DecoratorUtil';

src/scripts/util/DecoratorUtil.ts

@@ -0,0 +0,0 @@ import Cascade, { IObservable, Computed } from '../modules/Cascade';

src/scripts/util/Diff.ts

@@ -0,0 +0,0 @@ export default class Diff {

src/scripts/util/PromiseUtil.ts

@@ -0,0 +0,0 @@ export function wait(time: number) {

src/tests/Cascade.createObservable_Test.ts

@@ -0,0 +0,0 @@ import { expect } from 'chai';

src/tests/Cascade.createObservableArray_Test.ts

@@ -0,0 +0,0 @@ import { expect } from 'chai';

src/tests/Cascade.createObservableHash_Test.ts

@@ -0,0 +0,0 @@ import { expect } from 'chai';

src/tests/ComputedTest.ts

@@ -0,0 +0,0 @@ import { expect } from 'chai';

src/tests/DecoratorUtil_Test.ts

@@ -0,0 +0,0 @@ import { expect } from 'chai';

src/tests/diffTest.ts

@@ -0,0 +0,0 @@ import { expect } from 'chai';

src/tests/documentTest.ts

@@ -0,0 +0,0 @@ import { expect } from 'chai';

src/tests/graphTest0.ts

@@ -0,0 +0,0 @@ import { expect } from 'chai';

src/tests/graphTest1.ts

@@ -0,0 +0,0 @@ import { expect } from 'chai';

src/tests/graphTest2.ts

@@ -0,0 +0,0 @@ import { expect } from 'chai';

src/tests/graphTest3.ts

@@ -0,0 +0,0 @@ import { expect } from 'chai';

src/tests/graphTest4.ts

@@ -0,0 +0,0 @@ import { expect } from 'chai';

src/tests/graphTest5.ts

@@ -0,0 +0,0 @@ import { expect } from 'chai';

src/tests/graphTest6.ts

@@ -0,0 +0,0 @@ import { expect } from 'chai';

src/tests/graphTest7.ts

@@ -0,0 +0,0 @@ import { expect } from 'chai';

src/tests/graphTest8.ts

@@ -0,0 +0,0 @@ import { expect } from 'chai';

src/tests/Observable_Decorator_Test.ts

@@ -0,0 +0,0 @@ import { expect } from 'chai';

src/tests/Observable_Test.ts

@@ -0,0 +0,0 @@ import { expect } from 'chai';

src/tests/ObservableArray_Decorator_Test.ts

@@ -0,0 +0,0 @@ import { expect } from 'chai';

src/tests/ObservableArray_Test.ts

@@ -0,0 +0,0 @@ import { expect } from 'chai';

src/tests/ObservableArrayLegacy_Test.ts

@@ -0,0 +0,0 @@ import { expect } from 'chai';

src/tests/ObservableHash_Decorator_Test.ts

@@ -0,0 +0,0 @@ import { expect } from 'chai';

src/tests/ObservableHash_Test.ts

@@ -0,0 +0,0 @@ import { expect } from 'chai';

src/tests/Subscribe_Test.ts

@@ -0,0 +0,0 @@ import { expect } from 'chai';

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

Number of package files

122

increased by4.27%

Lines of code

10552

increased by2.23%

Worsened metrics

Total package byte prevSize

385134

decreased by-0.73%

No dependency changes