anu-verzum 1.2.0 → 1.4.0

package/README.md

@@ -171,7 +171,10 @@ npm run format      # Format all source files with Prettier
             <a href="#avoiding-unnecessary-wrapper-elements">Avoiding unnecessary wrapper elements</a>
         </li>
         <li>
-            <a href="#refs">Refs</a>
+            <a href="#list-keys">Keys for dynamic lists</a>
+        </li>
+        <li>
+            <a href="#refs">The refs</a>
         </li>
         <li>
             <a href="#rendering-application">Rendering application</a>
@@ -546,14 +549,14 @@ It takes <strong>ONE</strong> argument which can either be:
     // Explicit form:
     const ElemList = ({ somethingToLoop }: ListProps): AnuElement => (
         <Anu.Fragment>
-            {somethingToLoop.map(prop => <li>{prop}</li>)}
+            {somethingToLoop.map((prop, i) => <li key={`list-item-${i}`}>{prop}</li>)}
         </Anu.Fragment>
     );
 
     // Shorthand form — identical result:
     const ElemList = ({ somethingToLoop }: ListProps): AnuElement => (
         <>
-            {somethingToLoop.map(prop => <li>{prop}</li>)}
+            {somethingToLoop.map((prop, i) => <li key={`list-item-${i}`}>{prop}</li>)}
         </>
     );
 
@@ -571,6 +574,40 @@ It takes <strong>ONE</strong> argument which can either be:
     };
     ```
 
+<h3 id="list-keys">Keys for dynamic lists</h3>
+
+- Add a <code>key</code> prop to each element in a dynamically rendered list. Keys allow the reconciler to match elements across renders by identity rather than position, so items that move, are inserted, or are removed do not cause unrelated siblings to lose their state or be recreated unnecessarily.
+- A key must be unique among siblings. Use a stable, unique identifier from your data (such as a database ID). Only fall back to the array index when the list never reorders and items are never inserted in the middle.
+
+    ```typescript
+    interface Item {
+        id: string;
+        label: string;
+    }
+
+    interface ItemListProps extends Props {
+        items: Item[];
+    }
+
+    // Stable IDs — preferred:
+    const ItemList = ({ items }: ItemListProps): AnuElement => (
+        <ul>
+            {items.map(({ id, label }) => (
+                <li key={id}>{label}</li>
+            ))}
+        </ul>
+    );
+
+    // Index fallback — only when order never changes:
+    const StaticList = ({ items }: ItemListProps): AnuElement => (
+        <ul>
+            {items.map(({ label }, i) => (
+                <li key={`list-item-${i}`}>{label}</li>
+            ))}
+        </ul>
+    );
+    ```
+
 <h3 id="refs">The refs</h3>
 
 - In most cases, there is no need to use refs to manage (HTML) sub-components from the parent (class) component.
@@ -665,7 +702,7 @@ when you want to imperatively modify a child outside of the typical dataflow.
                     />
                     <ul>
                         {files.length > 0 && files.map(({ name, file }) => (
-                            <li>
+                            <li key={name}>
                                 <img src={name} alt={`Uploaded file name: ${file.name}, type: ${file.type}, size: ${file.size}`} />
                             </li>
                         ))}
@@ -775,6 +812,7 @@ when you want to imperatively modify a child outside of the typical dataflow.
             todoList.forEach(task => {
                 todoStatus[task.status].push(
                     <div
+                        key={task.name}
                         draggable
                         className="todoListItem"
                         onDragStart={event => this.handleDragStart(event, task.name)}
@@ -879,7 +917,7 @@ when you want to imperatively modify a child outside of the typical dataflow.
                 <div className="container">
                     <div style={{ minHeight: '800px' }}>
                         {this.state.photos.map(user => (
-                            <img src={user.url} height="100px" width="200px" />
+                            <img key={user.url} src={user.url} height="100px" width="200px" />
                         ))}
                     </div>
                     <div ref={this.loadingRef} style={loadingCSS}>
@@ -1205,13 +1243,13 @@ when you want to imperatively modify a child outside of the typical dataflow.
                     <h2>Topics</h2>
                     <ul>
                         {items.map(({ name, slug }) => (
-                            <li>
+                            <li key={slug}>
                                 <Anu.History.Link to={`${match.url}/${slug}`}>{name}</Anu.History.Link>
                             </li>
                         ))}
                     </ul>
                     {items.map(({ name, slug }) => (
-                        <Anu.History.Route path={`${match.path ?? ''}/${slug}`} render={() => (
+                        <Anu.History.Route key={slug} path={`${match.path ?? ''}/${slug}`} render={() => (
                             <Topic topicId={name} />
                         )} />
                     ))}
@@ -1284,6 +1322,30 @@ when you want to imperatively modify a child outside of the typical dataflow.
 
 The <code>Anu.ServerAPI</code> is basically built on top of <code>Promise</code> and currently has 5 methods <code>get()</code>, <code>post()</code>, <code>put()</code>, <code>delete()</code> and <code>file()</code>.
 
+The <code>.catch()</code> callback receives <code>{ status, response }</code> where <code>response</code> is always <code>null</code> on failure. <code>status</code> is the HTTP status code for server-side errors (e.g. <code>404</code>, <code>500</code>) and <code>0</code> for network-level failures such as no internet connection, DNS error, or a CORS rejection (i.e. no HTTP response was received at all).
+
+```typescript
+Anu
+    .ServerAPI
+    .get<MyItem>('/app/my-server-url/1234')
+    .then(({ response }) => {
+        // response is MyItem | null
+    })
+    .catch(({ status }) => {
+        if (status === 0) {
+            // Network-level failure — no response was received.
+            // Show a "check your connection" message to the user.
+        } else if (status === 401) {
+            // Server responded with 401 Unauthorized — redirect to login.
+            Anu.History.goTo('/login');
+        } else if (status === 404) {
+            // Server responded with 404 Not Found.
+        } else {
+            // Any other HTTP error (403, 500, etc.).
+        }
+    });
+```
+
 <h3 id="get-and-delete-methods">The <strong>GET</strong> and <strong>DELETE</strong> HTTP methods</h3>
 
 - The <code>Anu.ServerAPI.get()</code> and <code>Anu.ServerAPI.delete()</code> perform a <strong>GET</strong> or <strong>DELETE</strong> HTTP method respectively to get data from the server or delete a specific data from the server
@@ -1787,12 +1849,12 @@ it should return that part, with the updated desired values:
     
 <h3 id="creating-the-store">Creating the store</h3>
 
-- The store object stores the global state object (that can be reached using the <code>store.getState()</code> methiod) and it also has the <code>store.dispatch()</code>, <code>store.subscribe()</code> and <code>store.unsubscribe()</code> methods.
-You will likely use the <code>store.getState()</code> and <code>store.dispatch()</code> methods only because subscribing and unsubscribing functionalities are "wired" into the <code>&lt;Anu.Connector.Provider /&gt;</code> and the "connedted"
+- The store object stores the global state object (that can be reached using the <code>store.getState()</code> method) and it also has the <code>store.dispatch()</code>, <code>store.subscribe()</code> and <code>store.unsubscribe()</code> methods.
+You will likely use the <code>store.getState()</code> and <code>store.dispatch()</code> methods only because subscribing and unsubscribing functionalities are "wired" into the <code>&lt;Anu.Connector.Provider /&gt;</code> and the "connected"
 (also known as "container") component(s) created by using the <code>Anu.Connector.connect()</code> - see <a href="#connector-api">Connecting components to the global state - The Connector API</a> section.
 - Create a store object using <code>Anu.store.createStore()</code>:
     - The first argument is the <code>rootReducer</code> which is always needed (can be either a "single" reducer or a combination of ("single" and/or combined) reducers),
-    - The second <code>initialState</code> argument is optional however, if you don't use it, the initial state will be <code>undefined</code>.
+    - The second <code>initialState</code> argument is required. Pass the initial state object for your store here.
     This argument is useful if you want to have initialized values for your application before dispatching your first action.
     - The third argument is optional, you can use it if you want to apply middleware functionalities like dispatching asynchronous actions (e.g. AJAX calls or delayed calls). 
     In this case, the built-in <code>Anu.store.middleware.applyMiddleware()</code> can be passed:

package/dist/core/components/Connector.js

@@ -82,11 +82,13 @@ class Subscription {
     }
   }
   removeNestedSub(listener) {
-    this.tryUnsubscribe();
     const index = this.listeners.indexOf(listener);
     if (index >= 0) {
       this.listeners.splice(index, 1);
     }
+    if (this.listeners.length === 0) {
+      this.tryUnsubscribe();
+    }
   }
 }
 const connectHOC = (mapStateToProps, mapDispatchToProps) => WrappedComponent => {

package/dist/core/components/Context.js

@@ -35,6 +35,7 @@ const createContext = context => {
         providerContext.value = {
           ...pureProps
         };
+        providerContext.__notifySub = true;
         this.setState();
       }
     }
@@ -56,6 +57,7 @@ const createContext = context => {
   class ContextConsumer extends _Component.Component {
     componentDidUpdate() {
       if (providerContext.__notifySub) {
+        providerContext.__notifySub = false;
         this.setState();
       }
     }

package/dist/core/components/History.js

@@ -52,7 +52,8 @@ const matchPath = (pathname, options) => {
       isExact: true
     };
   }
-  const match = new RegExp(`^${path}`).exec(pathname);
+  const escapedPath = path.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const match = new RegExp(`^${escapedPath}`).exec(pathname);
   if (!match) {
     return null;
   }
@@ -130,11 +131,9 @@ class HistoryLink extends _Component.Component {
     const {
       to,
       children,
+      ariaLabel,
       ...restProps
     } = this.props;
-    const {
-      ariaLabel
-    } = restProps;
     return (0, _elements.createElement)('a', {
       href: to,
       ariaLabel: `historyLink${ariaLabel ? `-${ariaLabel}` : ''}`,

package/dist/core/domUtils.d.ts

@@ -1,4 +1,5 @@
 import { AnuElement, Props } from './elements';
+export declare const getHTMLValidSvgTag: (fiberType: string) => string;
 export declare const SVG_ELEMENT_LIST: readonly string[];
 export declare const updateDomProperties: (dom: HTMLElement | SVGElement | Text, prevProps: Props, nextProps: Props, isSvgElement?: boolean) => void;
 export declare const createDomElement: (fiber: AnuElement & {

package/dist/core/domUtils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateDomProperties = exports.createDomElement = exports.SVG_ELEMENT_LIST = void 0;
+exports.updateDomProperties = exports.getHTMLValidSvgTag = exports.createDomElement = exports.SVG_ELEMENT_LIST = void 0;
 var _elements = require("./elements");
 const getHTMLValidSvgTag = fiberType => {
   switch (fiberType) {
@@ -17,6 +17,7 @@ const getHTMLValidSvgTag = fiberType => {
       return fiberType;
   }
 };
+exports.getHTMLValidSvgTag = getHTMLValidSvgTag;
 const SVG_ELEMENT_LIST = exports.SVG_ELEMENT_LIST = ['anchor', 'animate', 'animateMotion', 'animateTransform', 'circle', 'clipPath', 'desc', 'discard', 'ellipse', 'feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap', 'feDistantLight', 'feDropShadow', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG', 'feFuncR', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology', 'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence', 'filter', 'foreignObject', 'g', 'hatch', 'hatchpath', 'image', 'line', 'linearGradient', 'marker', 'mask', 'mesh', 'meshgradient', 'meshpatch', 'meshrow', 'metadata', 'mpath', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'set', 'stop', 'svgStyle', 'svg', 'switch', 'symbol', 'text', 'textPath', 'svgTitle', 'tspan', 'unknown', 'use', 'view'];
 const updateDomProperties = (dom, prevProps, nextProps, isSvgElement = false) => {
   const isEvent = name => {
@@ -33,13 +34,12 @@ const updateDomProperties = (dom, prevProps, nextProps, isSvgElement = false) =>
     dom.removeEventListener(eventType, prevProps[name]);
   });
   Object.keys(prevProps).filter(isAttribute).filter(isGone(prevProps, nextProps)).forEach(name => {
-    const el = dom;
     if (name === 'className') {
-      el['class'] = null;
+      dom.removeAttribute('class');
     } else if (name === 'htmlFor') {
-      el['for'] = null;
+      dom.removeAttribute('for');
     } else {
-      el[name] = null;
+      dom.removeAttribute(name);
     }
   });
   Object.keys(nextProps).filter(isAttribute).filter(isNew(prevProps, nextProps)).forEach(name => {

package/dist/core/reconciler.js

@@ -28,6 +28,9 @@ const resetNextUnitOfWork = () => {
   if (!update) {
     return;
   }
+  if (update.from === CLASS_COMPONENT && !update.instance.__fiber) {
+    return;
+  }
   if (update.partialState) {
     update.instance.__fiber.partialState = update.partialState;
   }
@@ -90,22 +93,20 @@ const updateHostComponent = wipFiber => {
   const newChildElements = wipFiber.props.children;
   reconcileChildrenArray(wipFiber, newChildElements);
 };
-const createFunctionComponent = fiber => {
-  const instance = fiber.type(fiber.props);
-  instance.__fiber = fiber;
-  return instance;
-};
 const updateFunctionComponent = wipFiber => {
   let instance = wipFiber.stateNode || null;
   if (instance === null) {
-    instance = wipFiber.stateNode = createFunctionComponent(wipFiber);
+    instance = wipFiber.stateNode = {
+      props: wipFiber.props,
+      render: wipFiber.type
+    };
   } else if (wipFiber.props === instance.props && !wipFiber.partialState) {
     cloneChildFibers(wipFiber);
     return;
   }
   instance.props = wipFiber.props;
-  wipFiber.stateNode.render = wipFiber.type;
-  const newChildElements = wipFiber.stateNode.render(wipFiber.props);
+  instance.render = wipFiber.type;
+  const newChildElements = instance.render(wipFiber.props);
   reconcileChildrenArray(wipFiber, newChildElements);
 };
 const createInstance = fiber => {
@@ -147,6 +148,9 @@ const updateClassComponent = wipFiber => {
   } else {
     nextState = wipFiber.partialStateCallback(instance.state, nextProps);
   }
+  wipFiber.prevState = {
+    ...instance.state
+  };
   instance.props = nextProps;
   instance.state = nextState;
   wipFiber.partialState = undefined;
@@ -155,62 +159,100 @@ const updateClassComponent = wipFiber => {
   reconcileChildrenArray(wipFiber, newChildElements);
 };
 const arrify = val => !val ? [] : Array.isArray(val) ? val : [val];
+const getTag = element => {
+  if (typeof element.type === 'string') {
+    return HOST_COMPONENT;
+  }
+  if (typeof element.type === 'function' && !element.type.isAnuComponent && !element.type.prototype?.render) {
+    return FUNCTION_COMPONENT;
+  }
+  return CLASS_COMPONENT;
+};
 const reconcileChildrenArray = (wipFiber, newChildElements) => {
   const elements = arrify(newChildElements);
-  let index = 0;
+  const oldFiberMap = new Map();
   let oldFiber = wipFiber.alternate ? wipFiber.alternate.child : undefined;
-  let newFiber;
-  while (index < elements.length || oldFiber) {
-    const prevFiber = newFiber;
-    const element = index < elements.length && elements[index];
-    const sameType = oldFiber && element && element.type === oldFiber.type;
-    if (sameType && oldFiber && element) {
+  let oldIndex = 0;
+  while (oldFiber) {
+    const mapKey = oldFiber.props.key ?? oldIndex;
+    oldFiberMap.set(mapKey, oldFiber);
+    oldFiber = oldFiber.sibling;
+    oldIndex++;
+  }
+  let prevFiber;
+  for (let i = 0; i < elements.length; i++) {
+    const element = elements[i];
+    const mapKey = element.props.key ?? i;
+    const matchedOldFiber = oldFiberMap.get(mapKey);
+    const sameType = matchedOldFiber !== undefined && element.type === matchedOldFiber.type;
+    let newFiber;
+    if (sameType && matchedOldFiber) {
       newFiber = {
-        type: oldFiber.type,
-        tag: oldFiber.tag,
-        stateNode: oldFiber.stateNode,
+        type: matchedOldFiber.type,
+        tag: matchedOldFiber.tag,
+        stateNode: matchedOldFiber.stateNode,
         props: element.props,
         parent: wipFiber,
-        alternate: oldFiber,
-        partialState: oldFiber.partialState,
+        alternate: matchedOldFiber,
+        partialState: matchedOldFiber.partialState,
         effectTag: UPDATE
       };
-      if (oldFiber.partialStateCallback) {
-        newFiber.partialStateCallback = oldFiber.partialStateCallback;
+      if (matchedOldFiber.partialStateCallback) {
+        newFiber.partialStateCallback = matchedOldFiber.partialStateCallback;
       }
-    }
-    if (element && !sameType) {
-      let tag;
-      if (typeof element.type === 'string') {
-        tag = HOST_COMPONENT;
-      } else if (typeof element.type === 'function' && !element.type.isAnuComponent && !Object.prototype.hasOwnProperty.call(element.type.prototype, 'render')) {
-        tag = FUNCTION_COMPONENT;
-      } else {
-        tag = CLASS_COMPONENT;
+      oldFiberMap.delete(mapKey);
+    } else {
+      if (matchedOldFiber) {
+        matchedOldFiber.effectTag = DELETION;
+        wipFiber.effects = wipFiber.effects || [];
+        wipFiber.effects.push(matchedOldFiber);
+        oldFiberMap.delete(mapKey);
       }
       newFiber = {
         type: element.type,
-        tag,
+        tag: getTag(element),
         props: element.props,
         parent: wipFiber,
         effectTag: PLACEMENT
       };
     }
-    if (oldFiber && !sameType) {
-      oldFiber.effectTag = DELETION;
-      wipFiber.effects = wipFiber.effects || [];
-      wipFiber.effects.push(oldFiber);
-    }
-    if (oldFiber) {
-      oldFiber = oldFiber.sibling;
-    }
-    if (index === 0) {
+    if (i === 0) {
       wipFiber.child = newFiber;
-    } else if (prevFiber && element) {
+    } else if (prevFiber) {
       prevFiber.sibling = newFiber;
     }
-    index++;
+    prevFiber = newFiber;
+  }
+  oldFiberMap.forEach(fiber => {
+    fiber.effectTag = DELETION;
+    wipFiber.effects = wipFiber.effects || [];
+    wipFiber.effects.push(fiber);
+  });
+};
+const getFirstHostNode = fiber => {
+  if (fiber.tag === HOST_COMPONENT) {
+    return fiber.stateNode ? fiber.stateNode : null;
+  }
+  let child = fiber.child;
+  while (child) {
+    const node = getFirstHostNode(child);
+    if (node) {
+      return node;
+    }
+    child = child.sibling;
   }
+  return null;
+};
+const getNextHostNode = (fiber, domParent) => {
+  let sibling = fiber.sibling;
+  while (sibling) {
+    const node = getFirstHostNode(sibling);
+    if (node && node.parentNode === domParent) {
+      return node;
+    }
+    sibling = sibling.sibling;
+  }
+  return null;
 };
 const cloneChildFibers = parentFiber => {
   const oldFiber = parentFiber.alternate;
@@ -268,7 +310,7 @@ const flushComponentLifecyclesQueue = () => {
   }
 };
 const commitAllWork = fiber => {
-  fiber.effects.forEach((effect, index, effects) => {
+  (fiber.effects || []).forEach((effect, index, effects) => {
     commitWork(effect);
     if (index === effects.length - 1) {
       flushComponentLifecyclesQueue();
@@ -289,7 +331,12 @@ const commitWork = effect => {
   const domParent = domParentFiber.stateNode;
   if (effect.effectTag === PLACEMENT) {
     if (effect.tag === HOST_COMPONENT) {
-      domParent.appendChild(effect.stateNode);
+      const nextDomSibling = getNextHostNode(effect, domParent);
+      if (nextDomSibling) {
+        domParent.insertBefore(effect.stateNode, nextDomSibling);
+      } else {
+        domParent.appendChild(effect.stateNode);
+      }
       if (effect.props.ref) {
         effect.props.ref.current = effect.stateNode;
       }
@@ -304,6 +351,12 @@ const commitWork = effect => {
   } else if (effect.effectTag === UPDATE) {
     if (effect && effect.stateNode && effect.alternate && effect.alternate.props && effect.props) {
       if (effect.tag === HOST_COMPONENT) {
+        const nextDomSibling = getNextHostNode(effect, domParent);
+        if (nextDomSibling) {
+          domParent.insertBefore(effect.stateNode, nextDomSibling);
+        } else {
+          domParent.appendChild(effect.stateNode);
+        }
         (0, _domUtils.updateDomProperties)(effect.stateNode, effect.alternate.props, effect.props, _domUtils.SVG_ELEMENT_LIST.indexOf(effect.type) > -1);
         if (effect.props.ref) {
           effect.props.ref.current = effect.stateNode;
@@ -313,8 +366,8 @@ const commitWork = effect => {
           componentLifecyclesQueue.push({
             fn: effect.stateNode.componentDidUpdate,
             params: {
-              prevProps: effect.stateNode.props,
-              prevState: effect.stateNode.state
+              prevProps: effect.alternate?.props,
+              prevState: effect.prevState
             }
           });
         }
@@ -325,6 +378,7 @@ const commitWork = effect => {
       if (effect.stateNode.componentWillUnmount) {
         effect.stateNode.componentWillUnmount();
       }
+      effect.stateNode.__fiber = null;
     }
     commitDeletion(effect, domParent);
   }

package/dist/server-api/server-api.js

@@ -9,6 +9,18 @@ const CLIENT_ERROR_STATUS_CODES = [400, 401, 402, 403, 404, 405, 406, 407, 408,
 const SERVER_ERROR_STATUS_CODES = [500, 501, 502, 503, 504, 505, 506, 507, 508, 510, 511];
 const _setXHR = (successHandler, errorHandler) => {
   const XHR = new XMLHttpRequest();
+  XHR.onerror = () => {
+    errorHandler({
+      status: 0,
+      response: null
+    });
+  };
+  XHR.ontimeout = () => {
+    errorHandler({
+      status: 0,
+      response: null
+    });
+  };
   XHR.onload = () => {
     const {
       status,
@@ -42,7 +54,7 @@ const _serverGetAPI = (url, params = {}) => (successHandler, errorHandler) => {
   const urlParamKeys = Object.keys(params);
   if (urlParamKeys.length > 0) {
     urlParamKeys.forEach((key, index) => {
-      urlWithParams += index === 0 ? `?${key}=${params[key]}` : `&${key}=${params[key]}`;
+      urlWithParams += index === 0 ? `?${encodeURIComponent(key)}=${encodeURIComponent(params[key])}` : `&${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`;
     });
   }
   XHR.open('GET', urlWithParams, true);
@@ -52,11 +64,10 @@ const _serverPostAPI = (url, data) => (successHandler, errorHandler) => {
   if (!data) {
     return;
   }
-  const urlParams = `data=${JSON.stringify(data)}`;
   const XHR = _setXHR(successHandler, errorHandler);
   XHR.open('POST', url, true);
-  XHR.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
-  XHR.send(urlParams);
+  XHR.setRequestHeader('Content-type', 'application/json; charset=utf-8');
+  XHR.send(JSON.stringify(data));
 };
 const _serverPutAPI = (url, data) => (successHandler, errorHandler) => {
   if (!data) {
@@ -73,7 +84,7 @@ const _serverDeleteAPI = (url, params = {}) => (successHandler, errorHandler) =>
   const urlParamKeys = Object.keys(params);
   if (urlParamKeys.length > 0) {
     urlParamKeys.forEach((key, index) => {
-      urlWithParams += index === 0 ? `?${key}=${params[key]}` : `&${key}=${params[key]}`;
+      urlWithParams += index === 0 ? `?${encodeURIComponent(key)}=${encodeURIComponent(params[key])}` : `&${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`;
     });
   }
   XHR.open('DELETE', urlWithParams, true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anu-verzum",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "A \"React-like\" UI library that supports JSX syntax, Redux-like state management, array-rendering, i18n, routing and many more.",
   "keywords": [
     "anu-verzum",