brahmos - npm Package Compare versions

Comparing version 0.4.2 to 0.5.0

dist/brahmos.js

 /**
- * brahmos - 0.4.2
+ * brahmos - 0.5.0
  * Author : s-yadav <[e-mail]>
@@ -489,5 +489,226 @@ * Copyright (c) 2016, 2019 to s-yadav <[e-mail]>, released under the MIT license.
 
+  var currentComponent;
+
+  /**
+   * Method to check if two dependency array are same
+   */
+  function isDependenciesChanged (deps, oldDeps) {
+    // if oldDeps or deps are not defined consider it is changed every time
+    if (!deps || !oldDeps || deps.length !== oldDeps.length) { return true; }
+    for (var i = 0, ln = deps.length; i < ln; i++) {
+      if (deps[i] !== oldDeps[i]) { return true; }
+    }
+    return false;
+  }
+
+  /**
+   * Function to update component if state is changed
+   */
+  function updateComponentIfRequired (component, state, lastState) {
+    if (!Object.is(state, lastState)) {
+      var part = component.__part;
+      var node = component.__componentNode;
+      updater([part], [node], [], true);
+    }
+  }
+
+  /**
+   * A base method to return hook at specific pointer,
+   * and if not available create a new pane
+   * We also pass a method to get value from the hook which is passed to the component
+   * Plus a method to check if hook has to be updated
+   */
+  function getHook (createHook, shouldUpdate, reduce) {
+    if ( shouldUpdate === void 0 ) shouldUpdate = function (hook) { return false; };
+    if ( reduce === void 0 ) reduce = function (hook) { return hook; };
+
+    var pointer = currentComponent.pointer;
+    var hooks = currentComponent.hooks;
+    var hook = hooks[pointer];
+
+    // if hook is not there initialize and add it to the pointer
+    if (!hook || shouldUpdate(hook)) {
+      hook = createHook();
+      hooks[pointer] = hook;
+    }
+
+    // increment the hook pointer
+    currentComponent.pointer += 1;
+    return reduce(hook);
+  }
+
+  /**
+   * Method to set the current component while rendering the components
+   */
+  function setCurrentComponent (component) {
+    currentComponent = component;
+    component.pointer = 0;
+    component.hooks = component.hooks || [];
+  }
+
+  /**
+   * Use state hook
+   */
+  function useState (initialState) {
+    var component = currentComponent;
+    return getHook(function () {
+      /**
+       * create a state hook
+       */
+      var hook = [initialState, function (state) {
+        var lastState = hook[0];
+        hook[0] = state;
+        updateComponentIfRequired(component, state, lastState);
+      }];
+
+      return hook;
+    });
+  }
+
+  /**
+   * Use ref hook
+   */
+  function useRef (initialValue) {
+    return getHook(function () {
+      /**
+       * create a ref hook
+       */
+      return {
+        current: initialValue,
+      };
+    });
+  }
+
+  /**
+   * Use reducer hook
+   */
+  function useReducer (reducer, initialState, getInitialState) {
+    var component = currentComponent;
+
+    return getHook(function () {
+      /**
+       * If getInitialState method is provided, use that to form correct initial state
+       * Or else use passed initialState
+       */
+      var _initialState = getInitialState ? getInitialState(initialState) : initialState;
+
+      // create a reducer hook
+      var hook = [_initialState, function (action) {
+        var lastState = hook[0];
+        var state = reducer(lastState, action);
+        hook[0] = state;
+
+        updateComponentIfRequired(component, state, lastState);
+      }];
+
+      return hook;
+    });
+  }
+
+  /**
+   * use memo hook
+   */
+  function useMemo (create, dependencies) {
+    var createHook = function () {
+      return {
+        value: create(),
+        dependencies: dependencies,
+      };
+    };
+
+    var shouldUpdate = function (hook) { return isDependenciesChanged(dependencies, hook.dependencies); };
+
+    var reduce = function (hook) { return hook.value; };
+
+    return getHook(createHook, shouldUpdate, reduce);
+  }
+
+  /**
+   * Use callback hook
+   */
+  function useCallback (callback, dependencies) {
+    return useMemo(function () { return callback; }, dependencies);
+  }
+
+  /**
+   * Base module to create effect hooks
+   */
+  function useEffectBase (effectHandler, dependencies) {
+    var pointer = currentComponent.pointer;
+    var hooks = currentComponent.hooks;
+    var lastHook = hooks[pointer] || {};
+
+    var hook = Object.assign({}, lastHook,
+      {isDependenciesChanged: isDependenciesChanged(dependencies, lastHook.dependencies),
+      dependencies: dependencies,
+      effect: function effect () {
+        // if dependency is changed then only call the the effect handler
+        if (hook.isDependenciesChanged) {
+          effectHandler(hook);
+        }
+      }});
+
+    hooks[pointer] = hook;
+    currentComponent.pointer += 1;
+  }
+
+  /**
+   * Use effect hook
+   */
+  function useEffect (callback, dependencies) {
+    useEffectBase(function (hook) {
+      /**
+       * Run effect asynchronously after the paint cycle is finished
+       */
+
+      // cancel the previous callback if not yet executed
+      cancelAnimationFrame(hook.animationFrame);
+
+      // run affect after next paint
+      hook.animationFrame = requestAnimationFrame(function () {
+        setTimeout(function () {
+          hook.cleanEffect = callback();
+        });
+      });
+    }, dependencies);
+  }
+
+  function useLayoutEffect (callback, dependencies) {
+    useEffectBase(function (hook) {
+      // run effect synchronously
+      hook.cleanEffect = callback();
+    }, dependencies);
+  }
+
+  /**
+   * Method to run all the effects of a component
+   */
+  function runEffects (component) {
+    var hooks = component.hooks;
+    for (var i = 0, ln = hooks.length; i < ln; i++) {
+      var hook = hooks[i];
+      if (hook.effect) {
+        hook.effect();
+      }
+    }
+  }
+
+  /**
+   * Method to run cleanup all the effects of a component
+   */
+  function cleanEffects (component, unmount) {
+    var hooks = component.hooks;
+    for (var i = 0, ln = hooks.length; i < ln; i++) {
+      var hook = hooks[i];
+      if (hook.cleanEffect && (hook.isDependenciesChanged || unmount)) {
+        hook.cleanEffect();
+      }
+    }
+  }
+
   function functionalComponentInstance (FuncComponent) {
     return {
+      hooks: [],
       __render: function __render (props) {
+        setCurrentComponent(this);
         var nodes = FuncComponent(props);
@@ -527,3 +748,3 @@
 
-  function renderWithErrorBoundaries (part, node, forceRender, handleError) {
+  function renderWithErrorBoundaries (part, node, forceRender, isFirstRender, handleError) {
     var Component = node.type;
@@ -537,2 +758,10 @@ var componentInstance = node.componentInstance;
 
+    /**
+     * clean effects for functional component,
+     * no need to clean anything on the first render
+     */
+    if (!isFirstRender && !isClassComponent) {
+      cleanEffects(componentInstance);
+    }
+
     try {
@@ -561,3 +790,3 @@ /**
           componentInstance.state = state;
-          renderWithErrorBoundaries(part, node, forceRender, false);
+          renderWithErrorBoundaries(part, node, forceRender, isFirstRender, false);
         }
@@ -583,5 +812,4 @@
     var isClassComponent = node.__$isBrahmosClassComponent$__;
-    var isFunctionalComponent = node.__$isBrahmosFunctionalComponent$__;
 
-    var firstRender = false;
+    var isFirstRender = false;
     var shouldUpdate = true;
@@ -594,5 +822,5 @@
       // create an instance of the component
-      componentInstance = isFunctionalComponent
-        ? functionalComponentInstance(Component)
-        : new Component(props);
+      componentInstance = isClassComponent
+        ? new Component(props)
+        : functionalComponentInstance(Component);
 
@@ -608,3 +836,3 @@ /**
 
-      firstRender = true;
+      isFirstRender = true;
     }
@@ -648,3 +876,3 @@
        */
-      if (shouldComponentUpdate && shouldUpdate && !firstRender) {
+      if (shouldComponentUpdate && shouldUpdate && !isFirstRender) {
         shouldUpdate = shouldComponentUpdate.call(componentInstance, props, state);
@@ -664,3 +892,3 @@ }
     if (shouldUpdate) {
-      renderWithErrorBoundaries(part, node, forceRender, true);
+      renderWithErrorBoundaries(part, node, forceRender, isFirstRender, true);
     }
@@ -675,3 +903,3 @@
        */
-      if (firstRender) {
+      if (isFirstRender) {
         addHandler(componentInstance, 'componentDidMount');
@@ -681,2 +909,5 @@ } else {
       }
+    } else {
+      // call effects of functional component
+      runEffects(componentInstance);
     }
@@ -691,5 +922,10 @@
 
-    // if node is classComponent We may have to call componentWillUnmount lifecycle method
-    if (node && node.__$isBrahmosClassComponent$__) {
+    /**
+     * if node is classComponent We may have to call componentWillUnmount lifecycle method
+     * In case of functional component we have to clean all the effects for that component
+     */
+    if (node.__$isBrahmosClassComponent$__) {
       callLifeCycle(node.componentInstance, 'componentWillUnmount');
+    } else if (node.__$isBrahmosFunctionalComponent$__) {
+      cleanEffects(node.componentInstance, true);
     }
@@ -808,2 +1044,28 @@
   /**
+   * This method removes all the unused brahmos node till the given index
+   * and returns the used/non brahmos node at that index
+   */
+  function spliceUnusedNodes (index, oldNodes, parentNode, previousSibling) {
+    var oldNode = oldNodes[index];
+    /**
+     * remove all the oldNode until we don't get a non Brahmos node or reused node,
+     * We don't have to worry about non brahmos node, as they can't have key
+     * and any way it will cause unnecessary rerender. And un-keyed array's are not suggested
+     * Removing part of other nodes will be handled on last part of this function
+     * where we delete all the overflowing nodes.
+     */
+    while (isBrahmosNode(oldNode) && !oldNode.isReused) {
+      tearDown(oldNode, {
+        parentNode: parentNode,
+        previousSibling: previousSibling,
+        nextSibling: getOldNodeNextSibling(oldNode),
+      });
+      oldNodes.splice(index, 1);
+      oldNode = oldNodes[index];
+    }
+
+    return oldNode;
+  }
+
+  /**
      * Updater to handle array of nodes
@@ -819,3 +1081,2 @@ */
     var nodesLength = nodes.length;
-    var oldNodesLength = oldNodes.length;
     var lastChild = previousSibling;
@@ -825,20 +1086,4 @@
       var node = nodes[i];
-      var oldNode = oldNodes[i];
-
+      var oldNode = spliceUnusedNodes(i, oldNodes, parentNode, lastChild);
       /**
-       * remove the oldNode if it is not reused,
-       * We don't have to worry about non brahmos node, as they can't have key
-       * and any way it will cause unnecessary rerender. And un-keyed array's are not suggested
-       * Removing part of other nodes will be handled on last part of this function
-       * where we delete all the overflowing nodes.
-       */
-      if (isBrahmosNode(oldNode) && !oldNode.isReused) {
-        tearDown(oldNode, {
-          parentNode: parentNode,
-          previousSibling: lastChild,
-          nextSibling: getOldNodeNextSibling(oldNode),
-        });
-      }
-
-      /**
          * Pass forceUpdate as true, when newNodes and oldNodes keys are not same
@@ -861,4 +1106,4 @@ */
 
-    // teardown all extra old node
-    for (var i$1 = nodesLength; i$1 < oldNodesLength; i$1++) {
+    // teardown all extra pending old nodes
+    for (var i$1 = nodesLength, ln = oldNodes.length; i$1 < ln; i$1++) {
       tearDown(oldNodes[i$1]);
@@ -1360,2 +1605,9 @@ }
     html: html,
+    useState: useState,
+    useEffect: useEffect,
+    useRef: useRef,
+    useReducer: useReducer,
+    useMemo: useMemo,
+    useCallback: useCallback,
+    useLayoutEffect: useLayoutEffect,
   };
@@ -1369,2 +1621,9 @@
   exports.render = render;
+  exports.useCallback = useCallback;
+  exports.useEffect = useEffect;
+  exports.useLayoutEffect = useLayoutEffect;
+  exports.useMemo = useMemo;
+  exports.useReducer = useReducer;
+  exports.useRef = useRef;
+  exports.useState = useState;
 
@@ -1371,0 +1630,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

dist/brahmos.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).Brahmos={})}(this,function(e){"use strict";function m(e,t){var n=e;if(P(n)||Array.isArray(n)){var r=Array.isArray(n)?[]:{},o=t||r;if(Array.isArray(n))for(var i=n,a=function(e){for(var t={},n=0,r=e.length;n<r;n++){var o=e[n];t[N(o,n)]=o}return t}(o),s=0,u=i.length;s<u;s++){var c=i[s],p=a[N(c,s)];p&&m(c,p)}else if(n.__$isBrahmosTag$__){if(n.template!==o.template||n.element!==o.element)return;n.templateNode=o.templateNode,n.oldValues=o.values,o.isReused=!0;for(var l=0,d=n.values.length;l<d;l++){var f=o.values||[];m(n.values[l],f[l])}}else if(n.__$isBrahmosComponent$__){if(n.type!==o.type)return;n.componentInstance=o.componentInstance,o.isReused=!0}}}var c={doubleclick:"dblclick"},p=new WeakMap;function l(e){var t=e.type,n=d(e);return"input"!==n||"radio"!==t&&"checkbox"!==t?"input"===n||"select"===n||"textarea"===n?"value":void 0:"checked"}function S(e,t,n,r){var o=function(e){return 0===e.indexOf("on")}(t);if(t in e||o){var i=l(e);if(o){var a=function(e){return e.replace("on","").toLowerCase()}(t);a=function(e,t){var n=d(t);return c[e]?c[e]:"input"===n&&"change"===e?"input":e}(a,e);var s=function(t,n){var e=p.get(n);if(e)return e;function r(){var e=t.checkedProp;e!==t.checked&&(t.checked=e)}function o(){var e=t.valueProp;e!==t.value&&(t.value=e)}var i=l(t);return e=function(e){if("checked"===i)void 0!==t.checkedProp&&requestAnimationFrame(r);else if("value"===i){void 0!==t.valueProp&&requestAnimationFrame(o)}n&&n.call(this,e)},p.set(n,e),e}(e,n);if(r){var u=p.get(r)||r;e.removeEventListener(a,u)}e.addEventListener(a,s)}else i?function(e,t,n,r){"checked"===e?"checked"===n?(t.checked=r,t.checkedProp=r):"defaultChecked"===n&&void 0===t.checkedProp?t.checked=r:t[n]=r:"value"===e&&("value"===n?(t.value=r,t.valueProp=r):"defaultValue"===n&&void 0===t.valueProp?t.value=r:t[n]=r)}(i,e,t,n):e[t]=n}else e.setAttribute(t.toLowerCase(),n)}var _=/[<>"]/g,r=/(^|\s)([^\s"'=<]+)(?=[\s=>])/g,v="data-brahmos-attr",h="{{brahmos}}";function g(e){for(var t,n=[];null!==(t=r.exec(e));){t[2]&&n.push(t[2])}return n}function o(e){this.strings=e}o.prototype.create=function(){this.template||(this.partsMeta=this.getPartsMeta(),this.createTemplate())},o.prototype.getPartsMeta=function(){for(var e,t,n=this.strings,r=[],o=[],i=0,a=n.length;i<a;i++){for(var s=n[i],u=void 0,c=void 0,p=void 0,l=void 0,d=void 0;null!==(u=_.exec(s));)"<"!==u[0]||t?'"'===u[0]?t=!t:e&&">"===u[0]&&!t&&(e=!1,d=u.index):(e=!0,r=[],l=u.index,d=void 0);if(e){var f=s.substring(l||0,d||s.length);r.push.apply(r,g(f))}e?c=!0:p=!0,i<a-1&&o.push({tagAttrs:r,attrIndex:r.length,isAttribute:c,isNode:p})}return o},o.prototype.createTemplate=function(){for(var e=this.partsMeta,t=this.strings,n=document.createElement("template"),r="",o=0,i=t.length-1;o<i;o++){var a=t[o];r=e[o].isNode?r+a+"\x3c!--{{brahmos}}--\x3e":r+a+v}r+=t[t.length-1],n.innerHTML=r,this.template=n};var y=function(e){(this.templateResult=e).create(),this.fragment=this.createNode(),this.parts=this.getParts(),this.nodes=B(this.fragment.childNodes)};y.prototype.createNode=function(){var e=this.templateResult.template;return document.importNode(e.content,!0)},y.prototype.createWalker=function(e){return document.createTreeWalker(e,NodeFilter.SHOW_ALL,function(e){var t=e.nodeType;return 1===t||8===t?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP},!1)},y.prototype.getParts=function(){for(var e=this.fragment,t=this.templateResult.partsMeta,n=this.createWalker(e),r=0,o=t[r],i=[],a=[],s=function(){o=t[++r]};n.nextNode();){var u=n.currentNode,c=u.nodeType,p=u.parentNode,l=u.previousSibling,d=u.nextSibling,f=u.textContent;if(1===c&&u.hasAttribute(v)){u.removeAttribute(v);for(var _=o.tagAttrs;o&&o.isAttribute&&o.tagAttrs===_;)i.push(Object.assign({},o,{node:u})),s()}else 8===c&&f===h&&(i.push(Object.assign({},o,{parentNode:p,previousSibling:l,nextSibling:d})),s(),a.push(u))}return function(e){Array.isArray(e)||(e=[e]);for(var t=e.length-1;0<=t;t--){var n=e[t];n.parentNode.removeChild(n)}}(a),i};var k=[];function i(e,t,n,r){var o=t.type,i=t.props,a=t.__$isBrahmosClassComponent$__,s=t.__$isBrahmosFunctionalComponent$__,u=!1,c=!0,p=t.componentInstance;p||((p=s?function(n){return{__render:function(e){var t=n(e);return m(t,this.__nodes),this.__nodes=t}}}(o):new o(i)).__part=e,t.componentInstance=p,u=!0),p.__componentNode=t;var l,d=p.__unCommittedState,f=p.shouldComponentUpdate,_=p.props,v=p.state;if(a){var h=d||v;h=L(h,j(o,"getDerivedStateFromProps",[i,h])),p instanceof C&&(c=h!==p.state||i!==p.props),f&&c&&!u&&(c=f.call(p,i,h)),p.state=h,p.props=i,p.__unCommittedState=void 0,l=j(p,"getSnapshotBeforeUpdate",[_,v])}return c&&function t(n,r,o,i){var a=r.type,s=r.componentInstance,u=r.props,c=r.__$isBrahmosClassComponent$__,e=s.__render(u);try{s.__lastNode=A(n,e,null,o)}catch(e){if(!c||!i)throw e;var p=s.state,l=s.componentDidCatch,d=a.getDerivedStateFromError,f=j(a,"getDerivedStateFromError",[u,p]);if(f&&(p=L(p,f),s.state=p,t(n,r,o,!1)),j(s,"componentDidCatch",[e]),!l&&!d)throw e}}(e,t,r,!0),a&&(u?function(e,t,n){k.push({object:e,method:t,args:n})}(p,"componentDidMount"):j(p,"componentDidUpdate",[_,v,l])),p.__lastNode}function b(e,t){e&&e.isReused||(function(e){if(f(e))if(e&&e.__$isBrahmosClassComponent$__&&j(e.componentInstance,"componentWillUnmount"),Array.isArray(e))for(var t=0,n=e.length;t<n;t++)b(e[t]);else if(e.__$isBrahmosTag$__)for(var r=0,o=e.values.length;r<o;r++)b(e.values[r]);else e.__$isBrahmosComponent$__&&b(e.componentInstance.__nodes)}(e),t&&I(t.parentNode,t.previousSibling,t.nextSibling))}function a(e,t,n,r){var o,i=e.parentNode,a=e.previousSibling,s=e.nextSibling,u=t.templateNode,c=t.values,p=t.oldValues,l=t.__$isBrahmosTagElement$__;u||(o=!0,u=l?function(e){var t=e.element,n=e.values,r=document.createElement(t);return{fragment:r,nodes:[r],parts:[{isAttribute:!0,tagAttrs:[],attrIndex:0,node:r},{parentNode:r,isNode:!0}],values:n}}(t):new y(t.template),t.templateNode=u),$(u.parts,c,p),o&&(b(n,e),u.nodes=B(u.fragment.children),F(i,s,u.fragment));var d=u.nodes[0],f=d&&d.previousSibling===a;return d&&r&&!f&&F(i,s,u.nodes),T(u.nodes)}function A(e,t,n,r){if(f(t)){if(Array.isArray(t))return function(e,t,n){void 0===n&&(n=[]);for(var r,o,i=e.parentNode,a=e.previousSibling,s=e.nextSibling,u=t.length,c=n.length,p=a,l=0;l<u;l++){var d=t[l],f=n[l];P(f)&&!f.isReused&&b(f,{parentNode:i,previousSibling:p,nextSibling:(r=f,o=void 0,r.__$isBrahmosTag$__?o=T(r.templateNode.nodes):r.__$isBrahmosComponent$__&&(o=r.componentInstance.__lastNode),o&&o.nextSibling)});var _=!(d&&f&&d.key===f.key);p=A({parentNode:i,previousSibling:p,nextSibling:p?p.nextSibling:i.firstChild},d,f,_)}for(var v=u;v<c;v++)b(n[v]);return p&&I(i,p,s),p}(e,t,n);if(t.__$isBrahmosComponent$__)return i(e,t,0,r);if(t.__$isBrahmosTag$__)return a(e,t,n,r);if(u(t)&&t!==n)return function(e,t,n){var r=e.parentNode,o=e.previousSibling,i=e.nextSibling,a=E(r,o,i);return u(n)?E(r,o,i).textContent=t:(void 0!==n&&b(n,e),a=F(r,i,t)),a}(e,t,n)}else void 0!==n&&b(n,e)}function $(e,t,n,r){void 0===n&&(n=[]);for(var o=0,i=e.length;o<i;o++){var a=e[o],s=t[o],u=n[o],c=a.isAttribute,p=a.isNode;if(c)for(var l=Object.keys(s),d=0,f=l.length;d<f;d++){var _=l[d],v=s[_],h=u&&u[_];g=_,y=v,b=h,void 0,$=(m=a).node,C=m.tagAttrs,N=m.attrIndex,y===b||function(e,t,n){var r=e.lastIndexOf(t);return-1!==r&&r!==n}(C,g,N)||x[g]||S($,g,y,b)}else p&&A(a,s,u)}var m,g,y,b,$,C,N;r&&function(){for(var e=0,t=k.length;e<t;e++){var n=k[e];j(n.object,n.method,n.args)}k=[]}()}var s=function(e,t){this.props=e,this.context=t};s.prototype.setState=function(e,t){var n=this,r=this.__unCommittedState||this.state||{};r=L(r,"function"==typeof e?e(r):e),this.__unCommittedState=r,this.__batchStateChange().then(function(e){n.__updatesPromise=null,n.__applyUpdates(),t&&t(e)})},s.prototype.__batchStateChange=function(){var t=this;return this.__updatesPromise||(this.__updatesPromise=new Promise(function(e){e(t.state)})),this.__updatesPromise},s.prototype.__applyUpdates=function(){$([this.__part],[this.__componentNode],[],!0)},s.prototype.__render=function(){var e=this.render();return m(e,this.__nodes),this.__nodes=e};var C=function(e){function t(){e.apply(this,arguments)}return e&&(t.__proto__=e),(t.prototype=Object.create(e&&e.prototype)).constructor=t}(s),x={key:1,ref:1};function d(e){return e.nodeName.toLowerCase()}function N(e,t){var n=e&&e.key;if(void 0===n&&e&&e.__$isBrahmosTag$__){for(var r=e.values,o=0,i=r.length;o<i;o++){var a=r[o];if(void 0!==a.key){n=a.key;break}}e.key=n}return(void 0!==n?n:t).toString()}function B(e){return Array.prototype.slice.call(e)}function P(e){return e&&(e.__$isBrahmosComponent$__||e.__$isBrahmosTag$__)}function u(e){return"string"==typeof e||"number"==typeof e}function f(e){return u(e)||P(e)||Array.isArray(e)}function T(e){return Array.isArray(e)?e[e.length-1]:e}function I(e,t,n){var r;if(t||n)for(r=t?t.nextSibling:e.firstChild;r&&r!==n;){var o=r.nextSibling;e.removeChild(r),r=o}else e.innerHTML=""}function F(e,t,n){void 0===t&&(t=null);var r=function(e){if(e instanceof Node)return e;if(Array.isArray(e)||e instanceof NodeList){for(var t=document.createDocumentFragment(),n=0,r=e.length;n<r;n++)t.appendChild(e[n]);return t}return document.createTextNode(e.toString())}(n),o=r instanceof DocumentFragment?B(r.childNodes):r;return e.insertBefore(r,t),o}function E(e,t,n){return t?t.nextSibling:n?n.previousSibling:e.firstChild}function L(e,t){return t&&"object"==typeof t&&(e=Object.assign({},e,t)),e}function j(e,t,n){if(e[t])return e[t].apply(e,n)}function t(e,t,n){if("string"==typeof e)return function(e,t,n){return{element:e,values:[t,n],__$isBrahmosTag$__:!0,__$isBrahmosTagElement$__:!0}}(e,t,n);var r=function(e,t){for(var n={},r=Object.keys(e),o=0,i=r.length;o<i;o++){var a=r[o];t[a]||(n[a]=e[a])}return n}(t,{key:1,ref:1});r.children=n;var o=t.key,i=t.ref,a=function(e){return e.prototype instanceof s}(e);return{type:e,props:r,key:o,ref:a?i:null,children:n,__$isBrahmosComponent$__:!0,__$isBrahmosClassComponent$__:a,__$isBrahmosFunctionalComponent$__:!a}}function n(e,t){$([{parentNode:t,isNode:!0}],[e],[],!0)}var w=new WeakMap;function M(e){for(var n=[],t=arguments.length-1;0<t--;)n[t]=arguments[t+1];var r=w.get(e);return r||(r=new o(e),w.set(e,r)),function(e,t){return{template:r,values:n,key:e,ref:t,__$isBrahmosTag$__:!0}}}var O={createElement:t,render:n,Component:s,PureComponent:C,html:M};e.Component=s,e.PureComponent=C,e.createElement=t,e.default=O,e.html=M,e.render=n,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).Brahmos={})}(this,function(e){"use strict";function v(e,t){var n=e;if(w(n)||Array.isArray(n)){var r=Array.isArray(n)?[]:{},o=t||r;if(Array.isArray(n))for(var i=n,a=function(e){for(var t={},n=0,r=e.length;n<r;n++){var o=e[n];t[D(o,n)]=o}return t}(o),s=0,u=i.length;s<u;s++){var c=i[s],f=a[D(c,s)];f&&v(c,f)}else if(n.__$isBrahmosTag$__){if(n.template!==o.template||n.element!==o.element)return;n.templateNode=o.templateNode,n.oldValues=o.values,o.isReused=!0;for(var p=0,l=n.values.length;p<l;p++){var d=o.values||[];v(n.values[p],d[p])}}else if(n.__$isBrahmosComponent$__){if(n.type!==o.type)return;n.componentInstance=o.componentInstance,o.isReused=!0}}}var c={doubleclick:"dblclick"},f=new WeakMap;function p(e){var t=e.type,n=R(e);return"input"!==n||"radio"!==t&&"checkbox"!==t?"input"===n||"select"===n||"textarea"===n?"value":void 0:"checked"}function N(e,t,n,r){var o=function(e){return 0===e.indexOf("on")}(t);if(t in e||o){var i=p(e);if(o){var a=function(e){return e.replace("on","").toLowerCase()}(t);a=function(e,t){var n=R(t);return c[e]?c[e]:"input"===n&&"change"===e?"input":e}(a,e);var s=function(t,n){var e=f.get(n);if(e)return e;function r(){var e=t.checkedProp;e!==t.checked&&(t.checked=e)}function o(){var e=t.valueProp;e!==t.value&&(t.value=e)}var i=p(t);return e=function(e){if("checked"===i)void 0!==t.checkedProp&&requestAnimationFrame(r);else if("value"===i){void 0!==t.valueProp&&requestAnimationFrame(o)}n&&n.call(this,e)},f.set(n,e),e}(e,n);if(r){var u=f.get(r)||r;e.removeEventListener(a,u)}e.addEventListener(a,s)}else i?function(e,t,n,r){"checked"===e?"checked"===n?(t.checked=r,t.checkedProp=r):"defaultChecked"===n&&void 0===t.checkedProp?t.checked=r:t[n]=r:"value"===e&&("value"===n?(t.value=r,t.valueProp=r):"defaultValue"===n&&void 0===t.valueProp?t.value=r:t[n]=r)}(i,e,t,n):e[t]=n}else e.setAttribute(t.toLowerCase(),n)}var _=/[<>"]/g,r=/(^|\s)([^\s"'=<]+)(?=[\s=>])/g,h="data-brahmos-attr",m="{{brahmos}}";function g(e){for(var t,n=[];null!==(t=r.exec(e));){t[2]&&n.push(t[2])}return n}function o(e){this.strings=e}o.prototype.create=function(){this.template||(this.partsMeta=this.getPartsMeta(),this.createTemplate())},o.prototype.getPartsMeta=function(){for(var e,t,n=this.strings,r=[],o=[],i=0,a=n.length;i<a;i++){for(var s=n[i],u=void 0,c=void 0,f=void 0,p=void 0,l=void 0;null!==(u=_.exec(s));)"<"!==u[0]||t?'"'===u[0]?t=!t:e&&">"===u[0]&&!t&&(e=!1,l=u.index):(e=!0,r=[],p=u.index,l=void 0);if(e){var d=s.substring(p||0,l||s.length);r.push.apply(r,g(d))}e?c=!0:f=!0,i<a-1&&o.push({tagAttrs:r,attrIndex:r.length,isAttribute:c,isNode:f})}return o},o.prototype.createTemplate=function(){for(var e=this.partsMeta,t=this.strings,n=document.createElement("template"),r="",o=0,i=t.length-1;o<i;o++){var a=t[o];r=e[o].isNode?r+a+"\x3c!--{{brahmos}}--\x3e":r+a+h}r+=t[t.length-1],n.innerHTML=r,this.template=n};var a,y=function(e){(this.templateResult=e).create(),this.fragment=this.createNode(),this.parts=this.getParts(),this.nodes=O(this.fragment.childNodes)};function s(e,t){if(!e||!t||e.length!==t.length)return!0;for(var n=0,r=e.length;n<r;n++)if(e[n]!==t[n])return!0;return!1}function u(e,t,n){Object.is(t,n)||I([e.__part],[e.__componentNode],[],!0)}function n(e,t,n){void 0===t&&(t=function(e){return!1}),void 0===n&&(n=function(e){return e});var r=a.pointer,o=a.hooks,i=o[r];return i&&!t(i)||(i=e(),o[r]=i),a.pointer+=1,n(i)}function t(e){var r=a;return n(function(){var n=[e,function(e){var t=n[0];n[0]=e,u(r,e,t)}];return n})}function i(e){return n(function(){return{current:e}})}function l(o,e,t){var i=a;return n(function(){var r=[t?t(e):e,function(e){var t=r[0],n=o(t,e);r[0]=n,u(i,n,t)}];return r})}function d(e,t){return n(function(){return{value:e(),dependencies:t}},function(e){return s(t,e.dependencies)},function(e){return e.value})}function b(e,t){return d(function(){return e},t)}function C(e,t){var n=a.pointer,r=a.hooks,o=r[n]||{},i=Object.assign({},o,{isDependenciesChanged:s(t,o.dependencies),dependencies:t,effect:function(){i.isDependenciesChanged&&e(i)}});r[n]=i,a.pointer+=1}function k(t,e){C(function(e){cancelAnimationFrame(e.animationFrame),e.animationFrame=requestAnimationFrame(function(){setTimeout(function(){e.cleanEffect=t()})})},e)}function $(t,e){C(function(e){e.cleanEffect=t()},e)}function S(e,t){for(var n=e.hooks,r=0,o=n.length;r<o;r++){var i=n[r];i.cleanEffect&&(i.isDependenciesChanged||t)&&i.cleanEffect()}}function A(n){return{hooks:[],__render:function(e){!function(e){(a=e).pointer=0,e.hooks=e.hooks||[]}(this);var t=n(e);return v(t,this.__nodes),this.__nodes=t}}}y.prototype.createNode=function(){var e=this.templateResult.template;return document.importNode(e.content,!0)},y.prototype.createWalker=function(e){return document.createTreeWalker(e,NodeFilter.SHOW_ALL,function(e){var t=e.nodeType;return 1===t||8===t?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP},!1)},y.prototype.getParts=function(){for(var e=this.fragment,t=this.templateResult.partsMeta,n=this.createWalker(e),r=0,o=t[r],i=[],a=[],s=function(){o=t[++r]};n.nextNode();){var u=n.currentNode,c=u.nodeType,f=u.parentNode,p=u.previousSibling,l=u.nextSibling,d=u.textContent;if(1===c&&u.hasAttribute(h)){u.removeAttribute(h);for(var v=o.tagAttrs;o&&o.isAttribute&&o.tagAttrs===v;)i.push(Object.assign({},o,{node:u})),s()}else 8===c&&d===m&&(i.push(Object.assign({},o,{parentNode:f,previousSibling:p,nextSibling:l})),s(),a.push(u))}return function(e){Array.isArray(e)||(e=[e]);for(var t=e.length-1;0<=t;t--){var n=e[t];n.parentNode.removeChild(n)}}(a),i};var x=[];function B(e,t,n,r){var o=t.type,i=t.props,a=t.__$isBrahmosClassComponent$__,s=!1,u=!0,c=t.componentInstance;c||((c=a?new o(i):A(o)).__part=e,t.componentInstance=c,s=!0),c.__componentNode=t;var f,p=c.__unCommittedState,l=c.shouldComponentUpdate,d=c.props,v=c.state;if(a){var _=p||v;_=z(_,G(o,"getDerivedStateFromProps",[i,_])),c instanceof j&&(u=_!==c.state||i!==c.props),l&&u&&!s&&(u=l.call(c,i,_)),c.state=_,c.props=i,c.__unCommittedState=void 0,f=G(c,"getSnapshotBeforeUpdate",[d,v])}return u&&function t(n,r,o,i,a){var s=r.type,u=r.componentInstance,c=r.props,f=r.__$isBrahmosClassComponent$__,e=u.__render(c);i||f||S(u);try{u.__lastNode=F(n,e,null,o)}catch(e){if(!f||!a)throw e;var p=u.state,l=u.componentDidCatch,d=s.getDerivedStateFromError,v=G(s,"getDerivedStateFromError",[c,p]);if(v&&(p=z(p,v),u.state=p,t(n,r,o,i,!1)),G(u,"componentDidCatch",[e]),!l&&!d)throw e}}(e,t,r,s,!0),a?s?function(e,t,n){x.push({object:e,method:t,args:n})}(c,"componentDidMount"):G(c,"componentDidUpdate",[d,v,f]):function(e){for(var t=e.hooks,n=0,r=t.length;n<r;n++){var o=t[n];o.effect&&o.effect()}}(c),c.__lastNode}function P(e,t){e&&e.isReused||(function(e){if(U(e))if(e.__$isBrahmosClassComponent$__?G(e.componentInstance,"componentWillUnmount"):e.__$isBrahmosFunctionalComponent$__&&S(e.componentInstance,!0),Array.isArray(e))for(var t=0,n=e.length;t<n;t++)P(e[t]);else if(e.__$isBrahmosTag$__)for(var r=0,o=e.values.length;r<o;r++)P(e.values[r]);else e.__$isBrahmosComponent$__&&P(e.componentInstance.__nodes)}(e),t&&H(t.parentNode,t.previousSibling,t.nextSibling))}function T(e,t,n,r){for(var o,i,a=t[e];w(a)&&!a.isReused;)P(a,{parentNode:n,previousSibling:r,nextSibling:(o=a,i=void 0,o.__$isBrahmosTag$__?i=q(o.templateNode.nodes):o.__$isBrahmosComponent$__&&(i=o.componentInstance.__lastNode),i&&i.nextSibling)}),t.splice(e,1),a=t[e];return a}function E(e,t,n,r){var o,i=e.parentNode,a=e.previousSibling,s=e.nextSibling,u=t.templateNode,c=t.values,f=t.oldValues,p=t.__$isBrahmosTagElement$__;u||(o=!0,u=p?function(e){var t=e.element,n=e.values,r=document.createElement(t);return{fragment:r,nodes:[r],parts:[{isAttribute:!0,tagAttrs:[],attrIndex:0,node:r},{parentNode:r,isNode:!0}],values:n}}(t):new y(t.template),t.templateNode=u),I(u.parts,c,f),o&&(P(n,e),u.nodes=O(u.fragment.children),V(i,s,u.fragment));var l=u.nodes[0],d=l&&l.previousSibling===a;return l&&r&&!d&&V(i,s,u.nodes),q(u.nodes)}function F(e,t,n,r){if(U(t)){if(Array.isArray(t))return function(e,t,n){void 0===n&&(n=[]);for(var r=e.parentNode,o=e.previousSibling,i=e.nextSibling,a=t.length,s=o,u=0;u<a;u++){var c=t[u],f=T(u,n,r,s),p=!(c&&f&&c.key===f.key);s=F({parentNode:r,previousSibling:s,nextSibling:s?s.nextSibling:r.firstChild},c,f,p)}for(var l=a,d=n.length;l<d;l++)P(n[l]);return s&&H(r,s,i),s}(e,t,n);if(t.__$isBrahmosComponent$__)return B(e,t,0,r);if(t.__$isBrahmosTag$__)return E(e,t,n,r);if(W(t)&&t!==n)return function(e,t,n){var r=e.parentNode,o=e.previousSibling,i=e.nextSibling,a=K(r,o,i);return W(n)?K(r,o,i).textContent=t:(void 0!==n&&P(n,e),a=V(r,i,t)),a}(e,t,n)}else void 0!==n&&P(n,e)}function I(e,t,n,r){void 0===n&&(n=[]);for(var o=0,i=e.length;o<i;o++){var a=e[o],s=t[o],u=n[o],c=a.isAttribute,f=a.isNode;if(c)for(var p=Object.keys(s),l=0,d=p.length;l<d;l++){var v=p[l],_=s[v],h=u&&u[v];g=v,y=_,b=h,void 0,C=(m=a).node,k=m.tagAttrs,$=m.attrIndex,y===b||function(e,t,n){var r=e.lastIndexOf(t);return-1!==r&&r!==n}(k,g,$)||M[g]||N(C,g,y,b)}else f&&F(a,s,u)}var m,g,y,b,C,k,$;r&&function(){for(var e=0,t=x.length;e<t;e++){var n=x[e];G(n.object,n.method,n.args)}x=[]}()}var L=function(e,t){this.props=e,this.context=t};L.prototype.setState=function(e,t){var n=this,r=this.__unCommittedState||this.state||{};r=z(r,"function"==typeof e?e(r):e),this.__unCommittedState=r,this.__batchStateChange().then(function(e){n.__updatesPromise=null,n.__applyUpdates(),t&&t(e)})},L.prototype.__batchStateChange=function(){var t=this;return this.__updatesPromise||(this.__updatesPromise=new Promise(function(e){e(t.state)})),this.__updatesPromise},L.prototype.__applyUpdates=function(){I([this.__part],[this.__componentNode],[],!0)},L.prototype.__render=function(){var e=this.render();return v(e,this.__nodes),this.__nodes=e};var j=function(e){function t(){e.apply(this,arguments)}return e&&(t.__proto__=e),(t.prototype=Object.create(e&&e.prototype)).constructor=t}(L),M={key:1,ref:1};function R(e){return e.nodeName.toLowerCase()}function D(e,t){var n=e&&e.key;if(void 0===n&&e&&e.__$isBrahmosTag$__){for(var r=e.values,o=0,i=r.length;o<i;o++){var a=r[o];if(void 0!==a.key){n=a.key;break}}e.key=n}return(void 0!==n?n:t).toString()}function O(e){return Array.prototype.slice.call(e)}function w(e){return e&&(e.__$isBrahmosComponent$__||e.__$isBrahmosTag$__)}function W(e){return"string"==typeof e||"number"==typeof e}function U(e){return W(e)||w(e)||Array.isArray(e)}function q(e){return Array.isArray(e)?e[e.length-1]:e}function H(e,t,n){var r;if(t||n)for(r=t?t.nextSibling:e.firstChild;r&&r!==n;){var o=r.nextSibling;e.removeChild(r),r=o}else e.innerHTML=""}function V(e,t,n){void 0===t&&(t=null);var r=function(e){if(e instanceof Node)return e;if(Array.isArray(e)||e instanceof NodeList){for(var t=document.createDocumentFragment(),n=0,r=e.length;n<r;n++)t.appendChild(e[n]);return t}return document.createTextNode(e.toString())}(n),o=r instanceof DocumentFragment?O(r.childNodes):r;return e.insertBefore(r,t),o}function K(e,t,n){return t?t.nextSibling:n?n.previousSibling:e.firstChild}function z(e,t){return t&&"object"==typeof t&&(e=Object.assign({},e,t)),e}function G(e,t,n){if(e[t])return e[t].apply(e,n)}function J(e,t,n){if("string"==typeof e)return function(e,t,n){return{element:e,values:[t,n],__$isBrahmosTag$__:!0,__$isBrahmosTagElement$__:!0}}(e,t,n);var r=function(e,t){for(var n={},r=Object.keys(e),o=0,i=r.length;o<i;o++){var a=r[o];t[a]||(n[a]=e[a])}return n}(t,{key:1,ref:1});r.children=n;var o=t.key,i=t.ref,a=function(e){return e.prototype instanceof L}(e);return{type:e,props:r,key:o,ref:a?i:null,children:n,__$isBrahmosComponent$__:!0,__$isBrahmosClassComponent$__:a,__$isBrahmosFunctionalComponent$__:!a}}function Q(e,t){I([{parentNode:t,isNode:!0}],[e],[],!0)}var X=new WeakMap;function Y(e){for(var n=[],t=arguments.length-1;0<t--;)n[t]=arguments[t+1];var r=X.get(e);return r||(r=new o(e),X.set(e,r)),function(e,t){return{template:r,values:n,key:e,ref:t,__$isBrahmosTag$__:!0}}}var Z={createElement:J,render:Q,Component:L,PureComponent:j,html:Y,useState:t,useEffect:k,useRef:i,useReducer:l,useMemo:d,useCallback:b,useLayoutEffect:$};e.Component=L,e.PureComponent=j,e.createElement=J,e.default=Z,e.html=Y,e.render=Q,e.useCallback=b,e.useEffect=k,e.useLayoutEffect=$,e.useMemo=d,e.useReducer=l,e.useRef=i,e.useState=t,Object.defineProperty(e,"__esModule",{value:!0})});

example/App.js

@@ -1,42 +0,19 @@
-import Brahmos, { Component } from '../src';
+import Brahmos from '../src';
 
-const items = ['Sudhanshu', 'Hactor', 'Himanshu', 'Himan'];
+import TodoList from './TodoList';
+import UseStateExample from './UseStateExample';
 
-// .filter(str => str.startsWith(value))
-
-function Input (props) {
-  const { onChange, value, children } = props;
-  return (<div>
-    {<input type="text" value={value} defaultValue="Sudhanshu" onChange={onChange}/>}
-    {children}
-  </div>);
-}
-
-export default class App extends Component {
-  state = {
-    value: '',
-  }
-  handleChange = (e) => {
-    const { value } = e.target;
-    this.setState({ value });
-  }
-  render () {
-    const { name } = this.props;
-    const { value } = this.state;
-    const filteredItems = items.filter(str => str.toLowerCase().startsWith(value.toLowerCase()));
-
-    return (
-      <div className="app">
-        <span>Hello {name}</span>
-        <Input value={value} onChange={this.handleChange}>
-          <span>Hello {value}</span>
-        </Input>
-        <ul>
-          {filteredItems.map((item, index) => {
-            return <li key={item} >{item}</li>;
-          })}
-        </ul>
+export default function App () {
+  return (
+    <div>
+      <div className="wrapper">
+        <h2>Todo List</h2>
+        <TodoList />
       </div>
-    );
-  }
+      <div className="wrapper">
+        <h2>useState hook example</h2>
+        <UseStateExample />
+      </div>
+    </div>
+  );
 }

package.json

 {
   "name": "brahmos",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "Super charged UI library with modern React API and native templates.",
@@ -5,0 +5,0 @@ "main": "dist/brahmos.js",

No alert changes

Improved metrics

Total package byte prevSize

431033

increased by4.1%

Number of package files

32

increased by10.34%

Lines of code

4244

increased by14.18%

No dependency changes