anu-verzum 1.15.0 → 1.17.0

package/README.md

@@ -440,7 +440,7 @@ Supports both <i>HTML</i> and <i>inline-SVG</i> element creation, "stateful" (or
 
 <h3 id="function-components">Function components</h3>
 
-- Function components are functions which can receive <code>props</code> and must always return either an <i>HTML element</i>, an <i>inline-SVG element</i>, a <i>Component</i> or <code>NULL</code>.
+- Function components are functions which can receive <code>props</code> and must always return either an <i>HTML element</i>, an <i>inline-SVG element</i>, a <i>Component</i>, a <i>string</i>, a <i>number</i>, a <i>boolean</i>, or <code>NULL</code>.
 - Both class-based and function component names must start with a capital letter, inline-SVG-s and HTML element names are lower-case!
 
     ```typescript

package/dist/core/components/Component.d.ts

@@ -8,7 +8,7 @@ export declare abstract class Component<P extends Record<string, any> = Props, S
     static isAnuComponent?: boolean;
     constructor(props: P, context?: Record<string, any>);
     setState(partialState?: Partial<S> | ((prevState: S, prevProps: P) => S)): void;
-    abstract render(): AnuElement | AnuElement[] | string | number | null | undefined;
+    abstract render(): AnuElement | AnuElement[] | string | number | boolean | null | undefined;
     componentDidMount(): void;
     componentDidUpdate(_prevProps: P, _prevState: S): void;
     componentWillUnmount(): void;

package/dist/core/domUtils.js

@@ -26,7 +26,7 @@ const updateDomProperties = (dom, prevProps, nextProps, isSvgElement = false) =>
     }
     return name.startsWith('on');
   };
-  const isAttribute = name => !isEvent(name) && name !== 'children' && name !== 'style' && name !== 'ref' && name !== 'key';
+  const isAttribute = name => !isEvent(name) && name !== 'children' && name !== 'style';
   const isNew = (prev, next) => key => prev[key] !== next[key];
   const isGone = (prev, next) => key => !(key in next);
   Object.keys(prevProps).filter(isEvent).filter(key => !(key in nextProps) || isNew(prevProps, nextProps)(key)).forEach(name => {

package/dist/core/elements.d.ts

@@ -4,19 +4,19 @@ export type AnuNode = AnuChild | AnuNode[];
 export type AnuCSSProperties = Partial<Record<keyof CSSStyleDeclaration, string | number>>;
 export type Props = {
     children?: AnuNode;
-    ref?: Ref<any>;
-    key?: string | number;
     style?: AnuCSSProperties;
     [key: string]: any;
 };
 export type Ref<T> = {
     current: T | null;
 };
-export type FunctionComponent<P extends Props = Props> = (props: P) => AnuElement<any, any> | AnuElement<any>[] | null;
+export type FunctionComponent<P extends Props = Props> = (props: P) => AnuElement<any, any> | AnuElement<any, any>[] | string | number | boolean | null | undefined;
 export type ComponentConstructor<P extends Props = Props> = new (props: P, context?: Record<string, any>) => any;
 export type ElementType = string | FunctionComponent | ComponentConstructor;
 export type AnuElement<P = Props, T extends ElementType = ElementType> = {
     type: T;
     props: P;
+    key: string | null;
+    ref: Ref<any> | null;
 };
 export declare const createElement: (type: ElementType, config: Props | null, ...args: any[]) => AnuElement;

package/dist/core/elements.js

@@ -9,10 +9,16 @@ const createTextElement = value => ({
   type: TEXT_ELEMENT,
   props: {
     nodeValue: String(value)
-  }
+  },
+  key: null,
+  ref: null
 });
 const createElement = (type, config, ...args) => {
+  const key = config != null && config.key != null ? String(config.key) : null;
+  const ref = config != null && config.ref != null ? config.ref : null;
   const props = Object.assign({}, config);
+  delete props.key;
+  delete props.ref;
   if (args.length > 0) {
     const rawChildren = [].concat(...args);
     props.children = rawChildren.filter(c => c !== null && c !== false).map(c => typeof c === 'function' ? createElement(c, {
@@ -23,7 +29,9 @@ const createElement = (type, config, ...args) => {
   }
   return {
     type,
-    props
+    props,
+    key,
+    ref
   };
 };
 exports.createElement = createElement;

package/dist/core/reconciler.js

@@ -174,7 +174,7 @@ const reconcileChildrenArray = (wipFiber, newChildElements) => {
   let oldFiber = wipFiber.alternate ? wipFiber.alternate.child : undefined;
   let oldIndex = 0;
   while (oldFiber) {
-    const mapKey = oldFiber.props.key ?? oldIndex;
+    const mapKey = oldFiber.key ?? oldIndex;
     oldFiberMap.set(mapKey, oldFiber);
     oldFiber = oldFiber.sibling;
     oldIndex++;
@@ -182,7 +182,7 @@ const reconcileChildrenArray = (wipFiber, newChildElements) => {
   let prevFiber;
   for (let i = 0; i < elements.length; i++) {
     const element = elements[i];
-    const mapKey = element.props.key ?? i;
+    const mapKey = element.key ?? i;
     const matchedOldFiber = oldFiberMap.get(mapKey);
     const sameType = matchedOldFiber !== undefined && element.type === matchedOldFiber.type;
     let newFiber;
@@ -190,6 +190,8 @@ const reconcileChildrenArray = (wipFiber, newChildElements) => {
       newFiber = {
         type: matchedOldFiber.type,
         tag: matchedOldFiber.tag,
+        key: matchedOldFiber.key,
+        ref: element.ref,
         stateNode: matchedOldFiber.stateNode,
         props: element.props,
         parent: wipFiber,
@@ -211,6 +213,8 @@ const reconcileChildrenArray = (wipFiber, newChildElements) => {
       newFiber = {
         type: element.type,
         tag: getTag(element),
+        key: element.key,
+        ref: element.ref,
         props: element.props,
         parent: wipFiber,
         effectTag: PLACEMENT
@@ -265,6 +269,8 @@ const cloneChildFibers = parentFiber => {
     const newChild = {
       type: oldChild.type,
       tag: oldChild.tag,
+      key: oldChild.key,
+      ref: oldChild.ref,
       stateNode: oldChild.stateNode,
       props: oldChild.props,
       partialState: oldChild.partialState,
@@ -337,8 +343,8 @@ const commitWork = effect => {
       } else {
         domParent.appendChild(effect.stateNode);
       }
-      if (effect.props.ref) {
-        effect.props.ref.current = effect.stateNode;
+      if (effect.ref) {
+        effect.ref.current = effect.stateNode;
       }
     } else if (effect.tag === CLASS_COMPONENT) {
       if (effect.stateNode.componentDidMount) {
@@ -358,8 +364,8 @@ const commitWork = effect => {
           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;
+        if (effect.ref) {
+          effect.ref.current = effect.stateNode;
         }
       } else if (effect.tag === CLASS_COMPONENT) {
         if (effect.stateNode.componentDidUpdate) {

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import Utils from './misc/utils';
 import ServerAPI from './server-api/server-api';
-import { createElement, AnuElement, Props } from './core/elements';
+import { createElement, AnuElement, Props, Ref } from './core/elements';
 import { createRef, render } from './core/reconciler';
 import store from './store/store';
 import { createContext } from './core/components/Context';
@@ -146,10 +146,14 @@ export { store, ServerAPI, Utils, Connector, Feature, History, Intl };
 export type { AbbreviateNumberOptions } from './core/components/Intl';
 declare global {
     namespace JSX {
+        interface IntrinsicAttributes {
+            key?: string | number | null;
+            ref?: Ref<any> | null;
+        }
         interface Element extends AnuElement<any, any> {
         }
         interface ElementClass {
-            render(): AnuElement | AnuElement[] | string | number | null | undefined;
+            render(): AnuElement | AnuElement[] | string | number | boolean | null | undefined;
         }
         interface ElementAttributesProperty {
             props: Record<string, unknown>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anu-verzum",
-  "version": "1.15.0",
+  "version": "1.17.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",