anu-verzum 2.2.9 → 2.3.1

package/README.md

@@ -9,7 +9,7 @@
 
 A lightweight React-inspired UI library for building component-based web applications in JavaScript and TypeScript.
 
-- Fiber-based virtual DOM with time-sliced rendering (`requestIdleCallback`)
+- Fiber-based virtual DOM with time-sliced rendering (MessageChannel scheduler)
 - Class components with full lifecycle support and function components
 - JSX via a custom Babel preset — no separate TypeScript preset needed
 - Redux-compatible state management with thunk middleware and memoized selectors

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

@@ -1,5 +1,5 @@
 import { Component } from './Component';
-import { AnuElement, Props } from '../elements';
+import { AnuChild, Props } from '../elements';
 type UserActionEvent = {
     type: string;
     keyCode?: number | null;
@@ -26,7 +26,7 @@ declare class AnulyticsProvider extends Component<AnulyticsProviderProps> {
     componentDidMount(): void;
     componentWillUnmount(): void;
     handleVisibilityChange(): void;
-    render(): AnuElement | AnuElement[] | null;
+    render(): AnuChild[] | null;
 }
 export default AnulyticsProvider;
 export declare const __testing: {

package/dist/core/components/AnulyticsProvider.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.trackStateChange = exports.trackRouteChange = exports.trackEvent = exports.default = exports.__testing = void 0;
 var _Component = require("./Component");
+var _elements = require("../elements");
 var _serverApi = _interopRequireDefault(require("../../server-api/server-api"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const EventTypes = {
@@ -206,9 +207,9 @@ class AnulyticsProvider extends _Component.Component {
     }
   }
   render() {
-    const children = this.props.children;
+    const children = (0, _elements.toChildArray)(this.props.children);
     try {
-      if (!children || children.length !== 1) {
+      if (children.length !== 1) {
         throw new Error('Provider must have one child element!');
       }
       return children;

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

@@ -1,4 +1,4 @@
-import { AnuElement, Props } from '../elements';
+import { AnuNode, Props } from '../elements';
 export declare abstract class Component<P extends Record<string, any> = Props, S extends Record<string, any> = Record<string, any>> {
     props: P;
     state: S;
@@ -7,7 +7,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) => Partial<S>)): void;
-    abstract render(): AnuElement | AnuElement[] | string | number | boolean | null | undefined;
+    abstract render(): AnuNode;
     componentDidMount(): void;
     componentDidUpdate(_prevProps: P, _prevState: S): void;
     componentWillUnmount(): void;

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

@@ -1,5 +1,5 @@
 import { Component } from './Component';
-import { AnuElement, Props, ComponentConstructor } from '../elements';
+import { AnuChild, Props, ComponentConstructor } from '../elements';
 type StoreShape = {
     getState: () => any;
     dispatch: (action: any) => any;
@@ -14,7 +14,7 @@ export interface ConnectorProviderProps extends Props {
 declare class Provider extends Component<ConnectorProviderProps> {
     store: StoreShape;
     constructor(props: ConnectorProviderProps, context?: Record<string, any>);
-    render(): AnuElement | AnuElement[] | null;
+    render(): AnuChild[] | null;
 }
 declare const Connector: {
     connect: <TState = any, TOwnProps extends Record<string, any> = Record<string, any>, TStateProps extends Record<string, any> = Record<string, any>, TDispatchProps extends Record<string, any> = Record<string, any>>(mapStateToProps?: MapStateToProps<TState, TOwnProps, TStateProps> | null, mapDispatchToProps?: MapDispatchToProps<any, TOwnProps, TDispatchProps> | null) => (WrappedComponent: ComponentConstructor<TStateProps & TDispatchProps & TOwnProps>) => ComponentConstructor;

package/dist/core/components/Connector.js

@@ -40,9 +40,9 @@ class Provider extends _Component.Component {
     });
   }
   render() {
-    const children = this.props.children;
+    const children = (0, _elements.toChildArray)(this.props.children);
     try {
-      if (!children || children.length !== 1) {
+      if (children.length !== 1) {
         throw new Error('Provider must have one child element!');
       }
       return children;

package/dist/core/components/Context.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.createContext = void 0;
 var _utils = require("../../misc/utils");
 var _Component = require("./Component");
+var _elements = require("../elements");
 const createContext = context => {
   const defaultContext = {
     value: context
@@ -37,9 +38,9 @@ const createContext = context => {
       }
     }
     render() {
-      const children = this.props.children;
+      const children = (0, _elements.toChildArray)(this.props.children);
       try {
-        if (!children || children.length !== 1) {
+        if (children.length !== 1) {
           throw new Error('Context Component must have exactly one child element!');
         }
         return children;
@@ -80,23 +81,21 @@ const createContext = context => {
       }
     }
     render() {
-      const children = this.props.children;
+      const children = (0, _elements.toChildArray)(this.props.children);
       try {
-        if (!children || children.length !== 1) {
+        if (children.length !== 1) {
           throw new Error('Context Component must have exactly one child element!');
         }
         const provider = resolveProvider(this);
         this.subscribeTo(provider);
         const value = provider ? provider.value : defaultContext.value;
-        const {
-          type
-        } = children[0];
+        const renderChild = children[0];
         const childProps = {
           value,
           defaultContext
         };
-        if (typeof type === 'function') {
-          return type(childProps);
+        if (typeof renderChild === 'function') {
+          return renderChild(childProps);
         } else {
           throw new Error('Context component child element must be a function!');
         }

package/dist/core/components/Feature.js

@@ -12,7 +12,7 @@ const defaultFeatures = {};
 const FeaturesContext = (0, _Context.createContext)(defaultFeatures);
 const resolveDefault = defaultComponent => {
   if (defaultComponent && !Array.isArray(defaultComponent) && defaultComponent.type === _Fragment.Fragment) {
-    return defaultComponent.props.children ?? null;
+    return (0, _elements.toChildArray)(defaultComponent.props.children);
   }
   return defaultComponent;
 };

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

@@ -1,5 +1,5 @@
 import { Component } from './Component';
-import { AnuElement } from '../elements';
+import { AnuChild } from '../elements';
 export declare class Fragment extends Component {
-    render(): AnuElement[];
+    render(): AnuChild[];
 }

package/dist/core/components/Fragment.js

@@ -5,11 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Fragment = void 0;
 var _Component = require("./Component");
+var _elements = require("../elements");
 class Fragment extends _Component.Component {
   render() {
-    const children = this.props.children;
+    const children = (0, _elements.toChildArray)(this.props.children);
     try {
-      if (!children || !children.length) {
+      if (!children.length) {
         throw new Error('Fragment must have at least one child element!');
       }
       return children;

package/dist/core/elements.d.ts

@@ -22,3 +22,5 @@ export type AnuElement<P = Props, T extends ElementType = ElementType> = {
     ref: Ref<any> | null;
 };
 export declare const createElement: (type: ElementType, config: Props | null, ...args: any[]) => AnuElement;
+export declare const toChildArray: (children: AnuNode) => AnuChild[];
+export declare const normalizeChildren: (children: AnuNode) => AnuElement[];

package/dist/core/elements.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createElement = exports.TEXT_ELEMENT = exports.PORTAL_ELEMENT = void 0;
+exports.toChildArray = exports.normalizeChildren = exports.createElement = exports.TEXT_ELEMENT = exports.PORTAL_ELEMENT = void 0;
 const TEXT_ELEMENT = exports.TEXT_ELEMENT = 'TEXT_ELEMENT';
 const PORTAL_ELEMENT = exports.PORTAL_ELEMENT = Symbol('portal');
 const createTextElement = value => ({
@@ -20,13 +20,10 @@ const createElement = (type, config, ...args) => {
   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 !== undefined && typeof c !== 'boolean').map(c => typeof c === 'function' ? createElement(c, {
-      ...(c.props || {})
-    }) : c instanceof Object ? c : createTextElement(c));
-  } else {
-    props.children = props.children ?? [];
+  if (args.length === 1) {
+    props.children = args[0];
+  } else if (args.length > 1) {
+    props.children = args;
   }
   return {
     type,
@@ -35,4 +32,20 @@ const createElement = (type, config, ...args) => {
     ref
   };
 };
-exports.createElement = createElement;
+exports.createElement = createElement;
+const flattenChildren = (children, acc = []) => {
+  if (Array.isArray(children)) {
+    for (const child of children) {
+      flattenChildren(child, acc);
+    }
+  } else if (children !== null && children !== undefined && typeof children !== 'boolean') {
+    acc.push(children);
+  }
+  return acc;
+};
+const toChildArray = children => flattenChildren(children);
+exports.toChildArray = toChildArray;
+const normalizeChildren = children => flattenChildren(children).map(c => typeof c === 'function' ? createElement(c, {
+  ...(c.props || {})
+}) : c instanceof Object ? c : createTextElement(c));
+exports.normalizeChildren = normalizeChildren;

package/dist/core/reconciler.d.ts

@@ -6,5 +6,7 @@ export declare const render: (elements: AnuElement | AnuElement[], containerDom:
 export declare const unmountComponentAtNode: (containerDom: Element) => void;
 export declare const __testing: {
     flushSync(): void;
+    installSyncScheduler(): void;
+    uninstallSyncScheduler(): void;
     resetGlobals(): void;
 };

package/dist/core/reconciler.js

@@ -61,9 +61,50 @@ const workLoop = deadline => {
 const performWork = deadline => {
   workLoop(deadline);
   if (nextUnitOfWork || updateQueue.length > 0) {
-    requestIdleCallback(performWork);
+    scheduleWork();
   }
 };
+const FRAME_BUDGET = 5;
+const now = () => typeof performance !== 'undefined' && typeof performance.now === 'function' ? performance.now() : Date.now();
+let frameDeadline = 0;
+const FRAME_DEADLINE = {
+  didTimeout: false,
+  timeRemaining: () => Math.max(0, frameDeadline - now())
+};
+const SYNC_DEADLINE = {
+  didTimeout: false,
+  timeRemaining: () => 999
+};
+const createMacroTaskScheduler = () => {
+  let scheduled = false;
+  const flush = () => {
+    scheduled = false;
+    frameDeadline = now() + FRAME_BUDGET;
+    performWork(FRAME_DEADLINE);
+  };
+  let post;
+  if (typeof MessageChannel !== 'undefined') {
+    const channel = new MessageChannel();
+    channel.port1.onmessage = flush;
+    post = () => channel.port2.postMessage(null);
+  } else {
+    post = () => {
+      setTimeout(flush, 0);
+    };
+  }
+  return () => {
+    if (scheduled) {
+      return;
+    }
+    scheduled = true;
+    post();
+  };
+};
+const defaultScheduleWork = createMacroTaskScheduler();
+const syncScheduleWork = () => {
+  performWork(SYNC_DEADLINE);
+};
+let scheduleWork = defaultScheduleWork;
 const performUnitOfWork = wipFiber => {
   beginWork(wipFiber);
   if (wipFiber.child) {
@@ -163,7 +204,6 @@ const updateClassComponent = wipFiber => {
   const newChildElements = wipFiber.stateNode.render();
   reconcileChildrenArray(wipFiber, newChildElements);
 };
-const arrify = val => !val ? [] : Array.isArray(val) ? val : [val];
 const getTag = element => {
   if (element.type === _elements.PORTAL_ELEMENT) {
     return PORTAL;
@@ -177,7 +217,7 @@ const getTag = element => {
   return CLASS_COMPONENT;
 };
 const reconcileChildrenArray = (wipFiber, newChildElements) => {
-  const elements = arrify(newChildElements);
+  const elements = (0, _elements.normalizeChildren)(newChildElements);
   const oldFiberMap = new Map();
   let oldFiber = wipFiber.alternate ? wipFiber.alternate.child : undefined;
   let oldIndex = 0;
@@ -467,7 +507,7 @@ const scheduleUpdate = (instance, partialState, partialStateCallback) => {
     updateFiber.partialStateCallback = partialStateCallback;
   }
   updateQueue.push(updateFiber);
-  requestIdleCallback(performWork);
+  scheduleWork();
 };
 exports.scheduleUpdate = scheduleUpdate;
 const render = (elements, containerDom) => {
@@ -478,7 +518,7 @@ const render = (elements, containerDom) => {
       children: Array.isArray(elements) ? elements : [elements]
     }
   });
-  requestIdleCallback(performWork);
+  scheduleWork();
 };
 exports.render = render;
 const unmountComponentAtNode = containerDom => {
@@ -492,7 +532,7 @@ const unmountComponentAtNode = containerDom => {
       children: []
     }
   });
-  requestIdleCallback(performWork);
+  scheduleWork();
 };
 exports.unmountComponentAtNode = unmountComponentAtNode;
 const __testing = exports.__testing = {
@@ -500,16 +540,24 @@ const __testing = exports.__testing = {
     if (process.env.NODE_ENV !== 'test') {
       return;
     }
-    const syncDeadline = {
-      didTimeout: false,
-      timeRemaining: () => 999
-    };
     while (updateQueue.length > 0 || nextUnitOfWork != null) {
-      workLoop(syncDeadline);
+      workLoop(SYNC_DEADLINE);
     }
     nextUnitOfWork = null;
     pendingCommit = null;
   },
+  installSyncScheduler() {
+    if (process.env.NODE_ENV !== 'test') {
+      return;
+    }
+    scheduleWork = syncScheduleWork;
+  },
+  uninstallSyncScheduler() {
+    if (process.env.NODE_ENV !== 'test') {
+      return;
+    }
+    scheduleWork = defaultScheduleWork;
+  },
   resetGlobals() {
     if (process.env.NODE_ENV !== 'test') {
       return;

package/dist/index.d.ts

@@ -118,7 +118,7 @@ declare const Anu: {
                     subscribe: (listener: () => void) => void;
                     unsubscribe: (listener: () => void) => void;
                 };
-                render(): AnuElement | AnuElement[] | null;
+                render(): import(".").AnuChild[] | null;
                 props: import("./core/components/Connector").ConnectorProviderProps;
                 state: Record<string, any>;
                 context: Record<string, any>;

package/dist/index.js

@@ -121,22 +121,6 @@ var _Intl = _interopRequireDefault(require("./core/components/Intl"));
 var _AnulyticsProvider = _interopRequireWildcard(require("./core/components/AnulyticsProvider"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-if (!window.requestIdleCallback) {
-  window.requestIdleCallback = callback => {
-    const start = Date.now();
-    return setTimeout(() => {
-      callback({
-        didTimeout: false,
-        timeRemaining: () => Math.max(0, 50 - (Date.now() - start))
-      });
-    }, 1);
-  };
-}
-if (!window.cancelIdleCallback) {
-  window.cancelIdleCallback = id => {
-    clearTimeout(id);
-  };
-}
 const Anu = {
   Anulytics: {
     Provider: _AnulyticsProvider.default,

package/dist/testing/act.js

@@ -5,25 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.uninstallSyncScheduler = exports.installSyncScheduler = exports.flushEffects = exports.act = void 0;
 var _reconciler = require("../core/reconciler");
-const FAKE_DEADLINE = {
-  didTimeout: false,
-  timeRemaining: () => 999
-};
 let _installed = false;
 const installSyncScheduler = () => {
   if (_installed) {
     return;
   }
   _installed = true;
-  window.requestIdleCallback = cb => {
-    cb(FAKE_DEADLINE);
-    return 0;
-  };
-  window.cancelIdleCallback = () => {};
+  _reconciler.__testing.installSyncScheduler();
 };
 exports.installSyncScheduler = installSyncScheduler;
 const uninstallSyncScheduler = () => {
   _installed = false;
+  _reconciler.__testing.uninstallSyncScheduler();
 };
 exports.uninstallSyncScheduler = uninstallSyncScheduler;
 const flushEffects = () => {

package/package.json

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