anu-verzum 1.8.0 → 1.10.0

package/README.md

@@ -47,8 +47,12 @@ Anu.render(<App />, document.getElementById('root'));
 <h3>TypeScript setup</h3>
 
 The library is written in TypeScript and ships with declaration files (`.d.ts`) out of the box —
-no extra `@types` package is needed. If your project uses TypeScript, add the following to your
-`tsconfig.json` so the compiler understands JSX produced by ANUVerzum:
+no extra `@types` package is needed. The `dist/` directory contains only compiled `.js` files and
+`.d.ts` declarations, so the package works correctly under all standard TypeScript `moduleResolution`
+modes including `"node"`, `"node16"`, and `"bundler"`.
+
+If your project uses TypeScript, add the following to your `tsconfig.json` so the compiler
+understands JSX produced by ANUVerzum:
 
 ```json
 {
@@ -117,6 +121,8 @@ The following types are exported from `anu-verzum` for use in consumer projects:
 |------|-------------|
 | `AnuElement` | The virtual-DOM element descriptor (return type of `createElement`) |
 | `AnuChild` | Union of all valid JSX child types: `AnuElement \| string \| number \| boolean \| null \| undefined` |
+| `AnuNode` | Recursive child tree type used by `Props.children` — `AnuChild \| AnuNode[]`; accepts single children, arrays, and nested arrays (e.g. from `.map()`) |
+| `AnuCSSProperties` | Style object type used by `Props.style` — `Partial<Record<keyof CSSStyleDeclaration, string \| number>>`; allows numeric values for unitless CSS properties such as `flexShrink`, `zIndex`, `opacity` |
 | `Props` | Base props type — all component prop objects should extend this |
 | `Ref<T>` | Reference object created by `Anu.createRef<T>()` |
 | `Component<P, S>` | Abstract base class for class components |
@@ -140,7 +146,8 @@ The following types are exported from `anu-verzum` for use in consumer projects:
 These scripts are available when working on the library itself:
 
 ```bash
-npm run build       # Compile TypeScript sources to dist/ and emit .d.ts files
+npm run clean       # Delete dist/ entirely
+npm run build       # Clean, compile TypeScript sources to dist/, and emit .d.ts files
 npm run typecheck   # Type-check without emitting any output
 npm run lint        # Run ESLint on all source files
 npm run format      # Format all source files with Prettier

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

@@ -6,12 +6,12 @@ export type ContextValue<T> = {
         value: T;
     };
 };
-export type ConsumerProps<T> = {
+export type ConsumerProps<T> = Props & {
     children: (ctx: ContextValue<T>) => AnuElement | null;
 };
 export type Context<T extends Record<string, any> = Record<string, any>> = {
     Provider: new (props: Props & Partial<T>) => Component;
-    Consumer: new (props: ConsumerProps<T>) => Component;
+    Consumer: new (props: ConsumerProps<T>) => Component<ConsumerProps<T>>;
     ContextProvider: new (props: Props) => Component;
     ContextConsumer: new (props: Props) => Component;
 };

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

@@ -2,12 +2,10 @@ import { AnuElement, Props } from '../elements';
 type FeaturesMap = Record<string, boolean>;
 export interface FeatureProviderProps extends Props {
     features: FeaturesMap;
-    children?: AnuElement[];
 }
 export interface FeatureToggleProps extends Props {
     name: string;
     defaultComponent?: AnuElement | null;
-    children?: AnuElement[];
 }
 declare const Feature: {
     Provider: new (props: Props) => import("./Component").Component;

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

@@ -17,7 +17,6 @@ export interface HistoryLinkProps extends Props {
     to: string;
     replace?: boolean;
     ariaLabel?: string;
-    children?: AnuElement[];
 }
 export interface HistoryRedirectProps extends Props {
     to: string;

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

@@ -3,7 +3,6 @@ export interface IntlProviderProps extends Props {
     locale: string | null;
     messages: Record<string, Record<string, string>>;
     defaultLocale?: string;
-    children?: AnuElement[];
 }
 export interface FormattedMessageProps extends Props {
     id: string;

package/dist/core/elements.d.ts

@@ -1,10 +1,12 @@
 export declare const TEXT_ELEMENT: "TEXT_ELEMENT";
 export type AnuChild = AnuElement | string | number | boolean | null | undefined;
+export type AnuNode = AnuChild | AnuNode[];
+export type AnuCSSProperties = Partial<Record<keyof CSSStyleDeclaration, string | number>>;
 export type Props = {
-    children?: AnuChild | AnuChild[];
+    children?: AnuNode;
     ref?: Ref<any>;
     key?: string | number;
-    style?: Partial<CSSStyleDeclaration & Record<string, string>>;
+    style?: AnuCSSProperties;
     [key: string]: any;
 };
 export type Ref<T> = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anu-verzum",
-  "version": "1.8.0",
+  "version": "1.10.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",
@@ -29,7 +29,8 @@
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "babel src --out-dir dist --extensions \".ts\" --copy-files && tsc --emitDeclarationOnly",
+    "clean": "node -e \"require('fs').rmSync('dist', {recursive:true, force:true})\"",
+    "build": "npm run clean && babel src --out-dir dist --extensions \".ts\" && tsc --emitDeclarationOnly",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src",
     "format": "prettier --write src",

package/dist/core/components/AnulyticsProvider.ts

@@ -1,271 +0,0 @@
-import { Component } from './Component';
-import { AnuElement, Props } from '../elements';
-import ServerAPI from '../../server-api/server-api';
-
-const EventTypes = {
-    INITIALIZATION: 'initialization',
-    USER_ACTION: 'userAction',
-    STATE_CHANGE: 'stateChange',
-    NAVIGATION: 'navigation',
-    PAGE_LEAVE: 'pageLeave'
-} as const;
-
-type AnulyticsData = {
-    startDate: number;
-    events: Array<Record<string, any>>;
-    user: Record<string, any>;
-};
-
-type UserActionEvent = {
-    type: string;
-    keyCode?: number | null;
-    pageX?: number;
-    pageY?: number;
-    target?: {
-        id?: string;
-        name?: string;
-        nodeName?: string;
-        value?: string;
-    };
-};
-
-const AnulyticsState = (() => {
-    const initStart = new Date().getTime();
-    let _anulyticsInstanceExist = false;
-
-    const setAnulyticsInstanceExist = (instanceExist: boolean): void => {
-        _anulyticsInstanceExist = instanceExist;
-    };
-
-    const getAnulyticsInstanceExist = (): boolean => _anulyticsInstanceExist;
-
-    const _anulytics: AnulyticsData = {
-        startDate: initStart,
-        events: [
-            {
-                [EventTypes.INITIALIZATION]: {
-                    eventType: window.location.pathname,
-                    timestamp: initStart,
-                    properties: {}
-                }
-            }
-        ],
-        user: {}
-    };
-
-    return {
-        getAnulyticsInstanceExist,
-        setAnulyticsInstanceExist,
-        addEvent: (key: string, val: Record<string, any>): void => {
-            _anulytics.events.push({ [key]: val });
-        },
-        trackEvent: (
-            {
-                type,
-                keyCode = null,
-                pageX = 0,
-                pageY = 0,
-                target: { id = '', name = '', nodeName = '', value = '' } = {}
-            }: UserActionEvent,
-            rawProps: unknown
-        ): void => {
-            const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
-            const scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
-            const props =
-                typeof rawProps === 'object' && !Array.isArray(rawProps) && rawProps !== null
-                    ? (rawProps as Record<string, any>)
-                    : null;
-
-            const event = {
-                [EventTypes.USER_ACTION]: {
-                    eventType: type,
-                    timestamp: new Date().getTime(),
-                    properties: {
-                        id,
-                        keyCode,
-                        name,
-                        nodeName,
-                        value,
-                        pageX,
-                        pageY,
-                        scrollTop,
-                        scrollLeft,
-                        url: window.location.pathname,
-                        props
-                    }
-                }
-            };
-
-            _anulytics.events.push(event);
-        },
-        trackStateChange: (
-            prevState: Record<string, any>,
-            action: Record<string, any>,
-            nextState: Record<string, any>
-        ): void => {
-            const event = {
-                [EventTypes.STATE_CHANGE]: {
-                    eventType: action['type'],
-                    timestamp: new Date().getTime(),
-                    properties: {
-                        url: window.location.pathname,
-                        prevState,
-                        action,
-                        nextState
-                    }
-                }
-            };
-
-            _anulytics.events.push(event);
-        },
-        setUser: (user: Record<string, any> | null | undefined): void => {
-            _anulytics.user = user || {};
-        },
-        getAnulyticsData: (): AnulyticsData => _anulytics
-    };
-})();
-
-const _isBot: boolean = !!(
-    (window as any).phantom ||
-    (window as any)._phantom ||
-    (window as any).__nightmare ||
-    window.navigator.webdriver ||
-    (window as any).Cypress
-);
-
-const _isInstalled = (): boolean => {
-    if ((window.navigator as any).standalone) {
-        return true;
-    }
-
-    if (window.matchMedia('(display-mode: standalone)').matches) {
-        return true;
-    }
-
-    return false;
-};
-
-export const trackEvent = (event: UserActionEvent, props?: unknown): void => {
-    if (AnulyticsState.getAnulyticsInstanceExist()) {
-        AnulyticsState.trackEvent(event, props);
-    }
-};
-
-export const trackStateChange = (
-    prevState: Record<string, any>,
-    action: Record<string, any>,
-    nextState: Record<string, any>
-): void => {
-    if (AnulyticsState.getAnulyticsInstanceExist()) {
-        AnulyticsState.trackStateChange(prevState, action, nextState);
-    }
-};
-
-export const trackRouteChange = (path?: string): void => {
-    if (AnulyticsState.getAnulyticsInstanceExist()) {
-        const url = path || window.location.pathname;
-        const event = {
-            eventType: url,
-            timestamp: new Date().getTime(),
-            properties: {}
-        };
-
-        AnulyticsState.addEvent(EventTypes.NAVIGATION, event);
-    }
-};
-
-export interface AnulyticsProviderProps extends Props {
-    analyticsUrl: string;
-    userData?: Record<string, any>;
-    onSuccess: (response: any) => void;
-    onFail: (status: number) => void;
-}
-
-class AnulyticsProvider extends Component<AnulyticsProviderProps> {
-    constructor(props: AnulyticsProviderProps) {
-        super(props);
-        AnulyticsState.setAnulyticsInstanceExist(true);
-        this.handleVisibilityChange = this.handleVisibilityChange.bind(this);
-    }
-
-    componentDidMount(): void {
-        const { userData } = this.props;
-        AnulyticsState.setUser(userData || null);
-
-        document.addEventListener('visibilitychange', this.handleVisibilityChange, {
-            passive: true
-        });
-    }
-
-    componentWillUnmount(): void {
-        document.removeEventListener('visibilitychange', this.handleVisibilityChange as EventListener);
-        AnulyticsState.setAnulyticsInstanceExist(false);
-    }
-
-    handleVisibilityChange(): void {
-        const { analyticsUrl, onSuccess, onFail } = this.props;
-
-        if (_isBot) {
-            return;
-        }
-
-        if (document.visibilityState === 'hidden') {
-            const url = window.location.pathname;
-            const event = {
-                eventType: url,
-                timestamp: new Date().getTime(),
-                properties: {}
-            };
-            let ua: { userAgent: any; mobile: boolean; platform: string };
-
-            AnulyticsState.addEvent(EventTypes.PAGE_LEAVE, event);
-
-            if ((window.navigator as any).userAgentData) {
-                const { brands, mobile, platform } = (window.navigator as any).userAgentData;
-
-                ua = { userAgent: brands, mobile, platform };
-            } else {
-                ua = {
-                    userAgent: window.navigator.userAgent,
-                    mobile: false,
-                    platform: ''
-                };
-            }
-
-            const data = {
-                ...AnulyticsState.getAnulyticsData(),
-                endDate: new Date().getTime(),
-                system: {
-                    referrer: document.referrer || null,
-                    innerWidth: window.innerWidth,
-                    isMobileAppInstalled: _isInstalled(),
-                    userAgentData: ua
-                }
-            };
-
-            ServerAPI.post(analyticsUrl, data)
-                .then(({ response }) => onSuccess(response))
-                .catch(({ status }) => onFail(status));
-        } else {
-            this.setState();
-        }
-    }
-
-    render(): AnuElement | AnuElement[] | null {
-        const { children } = this.props;
-
-        try {
-            if (!children || children.length !== 1) {
-                throw new Error('Provider must have one child element!');
-            }
-
-            return children;
-        } catch (err) {
-            console.error(err);
-
-            return null;
-        }
-    }
-}
-
-export default AnulyticsProvider;

package/dist/core/components/Component.ts

@@ -1,39 +0,0 @@
-import { scheduleUpdate } from '../reconciler';
-import { AnuElement, Props } from '../elements';
-
-export abstract class Component<P extends Props = Props, S extends Record<string, any> = Record<string, any>> {
-    props: P;
-    state: S;
-    context: Record<string, any>;
-    /** @internal Set by the reconciler. */
-    __fiber?: any;
-
-    static isAnuComponent?: boolean;
-
-    constructor(props: P, context?: Record<string, any>) {
-        this.props = props || ({} as P);
-        this.context = { ...(this as any).context, ...context };
-        this.state = (this as any).state || ({} as S);
-    }
-
-    setState(partialState: Partial<S> | ((prevState: S, prevProps: P) => S) = {}): void {
-        let partialStateObject: Partial<S> = this.state;
-        let partialStateCallback: ((prevState: S, prevProps: P) => S) | undefined;
-
-        if (typeof partialState === 'object') {
-            partialStateObject = { ...partialStateObject, ...partialState };
-        } else if (typeof partialState === 'function') {
-            partialStateCallback = partialState;
-        }
-
-        scheduleUpdate(this, partialStateObject, partialStateCallback);
-    }
-
-    abstract render(): AnuElement | AnuElement[] | null | undefined;
-
-    componentDidMount(): void {}
-
-    componentDidUpdate(_prevProps: P, _prevState: S): void {}
-
-    componentWillUnmount(): void {}
-}

package/dist/core/components/Connector.ts

@@ -1,190 +0,0 @@
-import { createElement } from '../elements';
-import { Component } from './Component';
-import { AnuElement, Props, ComponentConstructor } from '../elements';
-
-type StoreShape = {
-    getState: () => any;
-    dispatch: (action: any) => any;
-    subscribe: (listener: () => void) => void;
-    unsubscribe: (listener: () => void) => void;
-};
-
-type MapStateToProps<TState = any, TOwnProps extends Props = Props, TStateProps extends Props = Props> = (
-    state: TState,
-    ownProps: TOwnProps
-) => TStateProps;
-
-type MapDispatchToProps<TDispatch = any, TOwnProps extends Props = Props, TDispatchProps extends Props = Props> = (
-    dispatch: TDispatch,
-    ownProps: TOwnProps
-) => TDispatchProps;
-
-const providedStore = (context: Record<string, any> = {}) => {
-    let providerContext = { ...context };
-
-    return {
-        getContext: (): Record<string, any> => providerContext,
-        setContext: (ctx: Record<string, any>): void => {
-            providerContext = { ...providerContext, ...ctx };
-        }
-    };
-};
-
-const providerStore = providedStore();
-
-export interface ConnectorProviderProps extends Props {
-    store: StoreShape;
-}
-
-class Provider extends Component<ConnectorProviderProps> {
-    store: StoreShape;
-
-    constructor(props: ConnectorProviderProps, context?: Record<string, any>) {
-        super(props, context);
-        this.store = props.store;
-        this.context['store'] = props.store;
-        this.context['parentSub'] = null;
-        providerStore.setContext({ ...this.context });
-    }
-
-    render(): AnuElement | AnuElement[] | null {
-        const { children } = this.props;
-
-        try {
-            if (!children || children.length !== 1) {
-                throw new Error('Provider must have one child element!');
-            }
-
-            return children;
-        } catch (err) {
-            console.error(err);
-
-            return null;
-        }
-    }
-}
-
-class Subscription {
-    store: StoreShape;
-    parentSub: Subscription | null;
-    onStateChange: () => void;
-    subscribed: boolean;
-    listeners: Array<() => void>;
-
-    constructor(store: StoreShape, parentSub: Subscription | null, onStateChange: () => void) {
-        this.store = store;
-        this.parentSub = parentSub;
-        this.onStateChange = onStateChange;
-        this.subscribed = false;
-        this.listeners = [];
-    }
-
-    notifyNestedSubs(): void {
-        this.listeners.forEach((listener) => listener());
-    }
-
-    trySubscribe(): void {
-        if (!this.subscribed) {
-            if (this.parentSub !== null) {
-                this.parentSub.addNestedSub(this.onStateChange);
-            } else {
-                this.store.subscribe(this.onStateChange);
-            }
-
-            this.subscribed = true;
-        }
-    }
-
-    addNestedSub(listener: () => void): void {
-        this.trySubscribe();
-        this.listeners.push(listener);
-    }
-
-    tryUnsubscribe(): void {
-        if (this.subscribed) {
-            if (this.parentSub !== null) {
-                this.parentSub.removeNestedSub(this.onStateChange);
-            } else {
-                this.store.unsubscribe(this.onStateChange);
-            }
-
-            this.subscribed = false;
-        }
-    }
-
-    removeNestedSub(listener: () => void): void {
-        this.tryUnsubscribe();
-        const index = this.listeners.indexOf(listener);
-
-        if (index >= 0) {
-            this.listeners.splice(index, 1);
-        }
-    }
-}
-
-const connectHOC =
-    <
-        TState = any,
-        TOwnProps extends Props = Props,
-        TStateProps extends Props = Props,
-        TDispatchProps extends Props = Props
-    >(
-        mapStateToProps?: MapStateToProps<TState, TOwnProps, TStateProps> | null,
-        mapDispatchToProps?: MapDispatchToProps<any, TOwnProps, TDispatchProps> | null
-    ) =>
-    (WrappedComponent: ComponentConstructor<TStateProps & TDispatchProps & TOwnProps>): ComponentConstructor => {
-        class Connect extends Component<TOwnProps> {
-            store: StoreShape;
-            subscription: Subscription;
-
-            constructor(props: TOwnProps, context?: Record<string, any>) {
-                super(props, context);
-                this.context = { ...this.context, ...providerStore.getContext() };
-                this.store = this.context['store'] as StoreShape;
-                const parentSub = this.context['parentSub'] as Subscription | null;
-                this.subscription = new Subscription(this.store, parentSub, this.onStateChange.bind(this));
-                this.context['parentSub'] = this.subscription;
-            }
-
-            componentDidMount(): void {
-                this.subscription.trySubscribe();
-            }
-
-            componentWillUnmount(): void {
-                this.subscription.tryUnsubscribe();
-            }
-
-            componentDidUpdate(): void {
-                this.subscription.notifyNestedSubs();
-            }
-
-            onStateChange(): void {
-                this.setState({});
-            }
-
-            render(): AnuElement {
-                const stateProps = mapStateToProps
-                    ? mapStateToProps(this.store.getState(), this.props)
-                    : ({} as TStateProps);
-                const dispatchProps = mapDispatchToProps
-                    ? mapDispatchToProps(this.store.dispatch, this.props)
-                    : ({} as TDispatchProps);
-                const passedProps = {
-                    ...this.props,
-                    ...stateProps,
-                    ...dispatchProps
-                } as TStateProps & TDispatchProps & TOwnProps;
-
-                return createElement(WrappedComponent as any, passedProps as any);
-            }
-        }
-
-        return Connect as unknown as ComponentConstructor;
-    };
-
-const Connector = {
-    connect: connectHOC,
-    Provider
-};
-
-export default Connector;