bevel - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

dist/core/build.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var setId_1 = require("./setId");
+var setup_1 = require("./setup");
+var setIndex_1 = require("./setIndex");
 var setProps_1 = require("./setProps");
@@ -10,3 +11,3 @@ /* -----------------------------------
  * -------------------------------- */
-function build(node) {
+function build(node, past) {
     if (typeof node === 'string') {
@@ -18,3 +19,4 @@ return document.createTextNode(node);
     var i = node.index;
-    setId_1.setId(n, i);
+    setup_1.setup(node, past);
+    setIndex_1.setIndex(n, i);
     setProps_1.setProps(n, p);
@@ -21,0 +23,0 @@ (node.children || []).forEach(function (c) { return n.appendChild(build(c)); });

dist/core/component.js

 "use strict";
-/* -----------------------------------
- *
- * IProps
- *
- * -------------------------------- */
+var __assign = (this && this.__assign) || Object.assign || function(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+            t[p] = s[p];
+    }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+var create_1 = require("./create");
+var compare_1 = require("./compare");
+var apply_1 = require("./apply");
 /* -----------------------------------
@@ -14,7 +20,32 @@ *
 var Component = /** @class */ (function () {
-    function Component(props) {
+    function Component(props, context) {
         this.props = props || {};
+        this.state = {};
+        this.context = context || {};
     }
+    Component.prototype.setState = function (_state) {
+        var state = this.state;
+        console.log('Component.setState', _state);
+        this.state = __assign({}, state, _state);
+        this.update();
+    };
+    Component.prototype.update = function () {
+        var _a = this, root = _a.root, parent = _a.parent, result = _a.result, index = _a.index, state = _a.state;
+        var tree = this.render();
+        var node = create_1.create(root, tree, parent, index);
+        var patch = [];
+        compare_1.compare(result, node, patch, parent);
+        patch.forEach(function (p) { return apply_1.apply(root, p); });
+        this.result = node;
+    };
+    Component.prototype.setup = function () {
+        this.didMount();
+    };
+    Component.prototype.destroy = function () {
+        console.log('Component->destroy');
+        console.log(this);
+        this.willUnMount();
+    };
     return Component;
 }());
 exports.Component = Component;

dist/core/create.js

@@ -11,3 +11,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var mount_1 = require("./mount");
+var initialise_1 = require("./initialise");
 /* -----------------------------------
@@ -18,19 +18,28 @@ *
  * -------------------------------- */
-function create(node, index) {
+function create(root, node, parent, index) {
+    if (parent === void 0) { parent = null; }
     if (index === void 0) { index = '0'; }
     var children = node.children;
-    if (node.split) {
+    if (typeof node === 'string') {
         return node;
     }
+    node.root = root;
+    node.index = index;
     if (children) {
-        children = children.map(function (c, i) { return create(c, index + "." + i); });
+        children = children.map(function (c, i) { return create(root, c, node, "" + index + i); });
     }
-    var tree = __assign({}, node, { index: index,
-        children: children });
-    if (typeof node.item === 'function') {
-        var subtree = mount_1.mount(tree);
-        if (subtree.memoize) {
-            return subtree;
+    var tree = __assign({}, node, { children: children });
+    if (typeof tree.item === 'function') {
+        var init = initialise_1.initialise(root, tree, parent);
+        var subtree = init;
+        if (init.render) {
+            subtree = init.render();
+            subtree.component = init;
+            subtree.children = subtree.children.map(function (c, i) { return create(root, c, node, "" + index + i); });
+            init.result = subtree;
         }
-        return create(subtree, index);
+        // if (subtree.memoize) {
+        //    return subtree;
+        // }
+        return create(root, subtree, parent, index);
     }
@@ -37,0 +46,0 @@ return tree;

dist/core/index.js

@@ -10,6 +10,4 @@ "use strict";
 exports.node = node_1.node;
-var create_1 = require("./create");
-exports.create = create_1.create;
-var update_1 = require("./update");
-exports.update = update_1.update;
+var render_1 = require("./render");
+exports.render = render_1.render;
 var renderHtml_1 = require("./renderHtml");
@@ -16,0 +14,0 @@ exports.renderHtml = renderHtml_1.renderHtml;

dist/core/memoize.js

@@ -12,7 +12,5 @@ "use strict";
     var result = null;
-    console.log(component);
     return function (_props) {
-        console.log(_props);
         if (!props_1.isEqual(props, _props)) {
-            result = component(_props);
+            result = new component(_props);
             props = _props;
@@ -19,0 +17,0 @@ result.memoize = true;

dist/core/render.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var src_1 = require("../../src");
+var create_1 = require("./create");
+var compare_1 = require("./compare");
+var apply_1 = require("./apply");
 /* -----------------------------------
  *
- * Render
+ * render
  *
  * -------------------------------- */
-function render(root, node) {
-    src_1.update(root, node);
+function render(tree, root) {
+    var node = create_1.create(root, tree, parent);
+    var patch = [];
+    compare_1.compare(null, node, patch);
+    console.log('patch.render:', patch);
+    patch.forEach(function (p) { return apply_1.apply(root, p); });
 }
 exports.render = render;

dist/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var bevel_1 = require("./bevel");
 var core_1 = require("./core");
 /* -----------------------------------
  *
- * Alias
- *
- * -------------------------------- */
-var render = bevel_1.Bevel.render;
-exports.render = render;
-/* -----------------------------------
- *
  * Export
@@ -19,2 +11,4 @@ *
 var core_2 = require("./core");
+exports.render = core_2.render;
 exports.renderHtml = core_2.renderHtml;
+exports.Component = core_2.Component;

dist/utility/props.js

@@ -14,19 +14,2 @@ "use strict";
  *
- * isPrimitive
- *
- * -------------------------------- */
-function isPrimitive(value) {
-    if (value === null) {
-        return true;
-    }
-    if (typeof value !== 'function') {
-        return true;
-    }
-    if (typeof value !== 'object') {
-        return true;
-    }
-    return false;
-}
-/* -----------------------------------
- *
  * isEqual
@@ -47,8 +30,2 @@ *
         keys1++;
-        if (!isPrimitive(props1[key])) {
-            return false;
-        }
-        if (props2.hasOwnProperty(key)) {
-            return false;
-        }
         if (props1[key] !== props2[key]) {
@@ -55,0 +32,0 @@ return false;

dist/utility/render.js

@@ -53,1 +53,15 @@ "use strict";
 exports.getRange = getRange;
+/* -----------------------------------
+ *
+ * getChildren
+ *
+ * -------------------------------- */
+function getChildren(past, next) {
+    var range1 = past.children.length;
+    var range2 = next.children.length;
+    if (range1 > range2) {
+        return past.children;
+    }
+    return next.children;
+}
+exports.getChildren = getChildren;

package.json

 {
   "name": "bevel",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Fast, ultra lightweight JSX rendering layer",
   "main": "./dist/index.js",
+  "types": "./src/bevel.d.ts",
   "scripts": {
@@ -13,2 +14,3 @@ "test": "mocha -r ts-node/register ./test/**/*.spec.ts"
     "jsx",
+    "tsx",
     "react",
@@ -27,3 +29,3 @@ "render",
     "type": "git",
-    "url": "https://github.com/jhdevuk/tsdom"
+    "url": "https://github.com/jhdevuk/bevel"
   },
@@ -30,0 +32,0 @@ "devDependencies": {

src/core/build.ts

@@ -1,4 +0,4 @@
-import { setId } from './setId';
+import { setup } from './setup';
+import { setIndex } from './setIndex';
 import { setProps } from './setProps';
-import { mount } from './mount';
 import { INode } from '../type/node';
@@ -13,3 +13,3 @@
 
-function build(node: INode | string): any {
+function build(node: INode | string, past?: INode): any {
 
@@ -26,3 +26,5 @@ if (typeof node === 'string') {
 
-   setId(n, i);
+   setup(node, past);
+
+   setIndex(n, i);
    setProps(n, p);
@@ -29,0 +31,0 @@

src/core/component.ts

@@ -0,1 +1,7 @@
+import { render } from './render';
+import { create } from './create';
+import { compare } from './compare';
+import { apply } from './apply';
+import { INode } from '../type/node';
+import { IPatch } from '../type/patch';
 
@@ -5,7 +11,7 @@
  *
- * IProps
+ * IParam
  *
  * -------------------------------- */
 
-interface IProps {
+export interface IParam {
    [index: string]: any;
@@ -24,8 +30,20 @@ }
 
-   public props: IProps;
+   [index: string]: any;
 
 
-   public constructor(props: IProps) {
+   private parent: INode;
+   private result: INode;
+   private index: string;
 
+
+   public props: IParam;
+   public state: IParam;
+   public context: any;
+
+
+   public constructor(props?: IParam, context?: any) {
+
       this.props = props || {};
+      this.state = {};
+      this.context = context || {};
 
@@ -35,5 +53,59 @@ }
 
-   public abstract render(): JSX.Element;
+   public setState(_state: IParam) {
 
+      const { state } = this;
 
+      console.log('Component.setState', _state);
+
+      this.state = {...state, ..._state};
+
+      this.update();
+
+   }
+
+
+   private update() {
+
+      const { root, parent, result, index, state } = this;
+
+      const tree: any = this.render();
+      const node = create(root, tree, parent, index);
+
+      const patch: any = [];
+
+      compare(result, node, patch, parent);
+
+      patch.forEach(
+         (p: any) => apply(root, p)
+      );
+
+      this.result = node;
+
+   }
+
+
+   public setup() {
+
+      this.didMount();
+
+   }
+
+
+   public destroy() {
+
+      console.log('Component->destroy');
+      console.log(this);
+
+      this.willUnMount();
+
+   }
+
+
+   public abstract didMount(): void;
+   public abstract willUnMount(): void;
+
+
+   public abstract render(): JSX.Element | null;
+
+
 }
@@ -40,0 +112,0 @@

src/core/create.ts

 import { isJSX } from '../utility/render';
-import { mount } from './mount';
+import { initialise } from './initialise';
+import { memoize } from './memoize';
+import { INode } from '../type/node';
 
@@ -11,7 +13,12 @@
 
-function create(node: any, index = '0'): any {
+function create(
+   root: any,
+   node: any,
+   parent: any = null,
+   index = '0'
+): any {
 
    let { children } = node;
 
-   if (node.split) {
+   if (typeof node === 'string') {
 
@@ -22,2 +29,5 @@ return node;
 
+   node.root = root;
+   node.index = index;
+
    if (children) {
@@ -27,3 +37,3 @@
          (c: any, i: any) => create(
-            c, `${index}.${i}`
+            root, c, node, `${index}${i}`
          )
@@ -36,18 +46,34 @@ );
       ...node,
-      index,
       children
    };
 
-   if (typeof node.item === 'function') {
+   if (typeof tree.item === 'function') {
 
-      const subtree = mount(tree);
+      const init = initialise(root, tree, parent);
 
-      if (subtree.memoize) {
+      let subtree = init;
 
-         return subtree;
+      if (init.render) {
 
+         subtree = init.render();
+         subtree.component = init;
+
+         subtree.children = subtree.children.map(
+            (c: any, i: any) => create(
+               root, c, node, `${index}${i}`
+            )
+         );
+
+         init.result = subtree;
+
       }
 
-      return create(subtree, index);
+      // if (subtree.memoize) {
 
+      //    return subtree;
+
+      // }
+
+      return create(root, subtree, parent, index);
+
    }
@@ -54,0 +80,0 @@

src/core/index.ts

@@ -10,5 +10,4 @@
 export { node } from './node';
-export { create } from './create';
-export { update } from './update';
+export { render } from './render';
 export { renderHtml } from './renderHtml';
 export { Component } from './component';

src/core/memoize.ts

@@ -15,11 +15,7 @@ import { isEqual } from '../utility/props';
 
-   console.log(component);
-
    return (_props: any) => {
 
-      console.log(_props);
-
       if (!isEqual(props, _props)) {
 
-         result = component(_props);
+         result = new component(_props);
          props = _props;
@@ -26,0 +22,0 @@

src/core/updateProps.ts

@@ -12,3 +12,3 @@ import { updateProp } from './updateProp';
 function updateProps(
-   target: HTMLElement,
+   target: any,
    next: IProps,
@@ -15,0 +15,0 @@ past: IProps

src/index.ts

@@ -1,2 +0,1 @@
-import { Bevel } from './bevel';
 import { node } from './core';
@@ -7,11 +6,2 @@
  *
- * Alias
- *
- * -------------------------------- */
-
-const render = Bevel.render;
-
-
-/* -----------------------------------
- *
  * Export
@@ -22,3 +12,2 @@ *
 export default node;
-export { renderHtml } from './core';
-export { render };
+export { render, renderHtml, Component } from './core';

src/type/jsx.d.ts

@@ -16,9 +16,13 @@
    interface ElementClass {
-      [index: string]: any;
+      render(): JSX.Element | null;
    }
 
    interface ElementAttributesProperty {
-      [index: string]: any;
+      props: {};
    }
 
+   interface ElementChildrenAttribute {
+      children: {};
+   }
+
    interface IntrinsicElements {
@@ -25,0 +29,0 @@ [index: string]: any;

src/type/node.d.ts

@@ -0,1 +1,2 @@
+import { Component } from '../core';
 import { IProps } from './props';
@@ -11,6 +12,8 @@
 export interface INode {
+   root: any;
    item: any;
    props: IProps;
    index: string;
+   component?: Component;
    children: INode[];
 }

src/utility/props.ts

@@ -18,33 +18,2 @@
  *
- * isPrimitive
- *
- * -------------------------------- */
-
-function isPrimitive(value: any) {
-
-   if (value === null) {
-
-      return true;
-
-   }
-
-   if (typeof value !== 'function') {
-
-      return true;
-
-   }
-
-   if (typeof value !== 'object') {
-
-      return true;
-
-   }
-
-   return false;
-
-}
-
-
-/* -----------------------------------
- *
  * isEqual
@@ -75,14 +44,2 @@ *
 
-      if (!isPrimitive(props1[key])) {
-
-         return false;
-
-      }
-
-      if (props2.hasOwnProperty(key)) {
-
-         return false;
-
-      }
-
       if (props1[key] !== props2[key]) {
@@ -101,2 +58,3 @@
    }
+
    return keys1 === keys2;
@@ -103,0 +61,0 @@

src/utility/render.ts

@@ -85,2 +85,24 @@
  *
+ * getChildren
+ *
+ * -------------------------------- */
+
+function getChildren(past: any, next: any) {
+
+   const range1 = past.children.length;
+   const range2 = next.children.length;
+
+   if (range1 > range2) {
+
+      return past.children;
+
+   }
+
+   return next.children;
+
+}
+
+
+/* -----------------------------------
+ *
  * Export
@@ -90,2 +112,2 @@ *
 
-export { isDiff, isJSX, toString, getRange };
+export { isDiff, isJSX, toString, getRange, getChildren };

task/js-module.js

@@ -33,3 +33,3 @@ var tscript = require('gulp-typescript');
       return del([
-         config.path.dist + 'tsdom.js*',
+         config.path.dist + '**/*.js*',
       ]).then(function() {
@@ -36,0 +36,0 @@

tsconfig.json

@@ -5,2 +5,3 @@ {
       "outDir": "./dist",
+      "declaration": false,
       "noImplicitAny": true,
@@ -7,0 +8,0 @@ "noEmitOnError": true,

No alert changes

Improved metrics

Total package byte prevSize

487048

increased by17.67%

Number of package files

79

increased by14.49%

Lines of code

10251

increased by8.69%

No dependency changes