anu-verzum 1.7.0 → 1.8.0

package/README.md

@@ -116,11 +116,14 @@ The following types are exported from `anu-verzum` for use in consumer projects:
 | Type | Description |
 |------|-------------|
 | `AnuElement` | The virtual-DOM element descriptor (return type of `createElement`) |
+| `AnuChild` | Union of all valid JSX child types: `AnuElement \| string \| number \| boolean \| null \| undefined` |
 | `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 |
 | `FunctionComponent<P>` | Function component signature |
 | `ElementType` | String tag, function component, or class component constructor |
+| `ContextValue<T>` | Context value passed to a `Consumer` render-prop: `{ value: Partial<T>; defaultContext: { value: T } }` |
+| `ConsumerProps<T>` | Props for a typed context `Consumer` — `children` is the render-prop `(ctx: ContextValue<T>) => AnuElement \| null` |
 | `Store<S, A>` | Store instance returned by `Anu.store.createStore` |
 | `Reducer<S, A>` | Reducer function signature |
 | `Middleware<S, A>` | Middleware function signature |
@@ -128,6 +131,7 @@ The following types are exported from `anu-verzum` for use in consumer projects:
 | `Action` | Base action type `{ type: string; [key: string]: any }` |
 | `ThunkAction<S>` | Thunk action `(dispatch, getState) => any` |
 | `SelectorFn<TInput, TOutput>` | Selector function signature for `createSelector` |
+| `CreateSelectorFn` | Overloaded interface for `Anu.store.createSelector` — enables full type inference on transformation parameters |
 | `ApiSuccessResponse<T>` | Successful HTTP response `{ status: number; response: T \| null }` |
 | `ApiErrorResponse` | Error HTTP response `{ status: number; response: null }` |
 
@@ -1625,45 +1629,37 @@ It takes a <code>context</code> argument which can be reached later as <code>con
 
 <h3 id="usage-of-context-provider-and-consumers">Usage of the context provider and its consumer(s)</h3>
 
-- Context props defined on <code>&lt;ThemedContext.ContextProvider /&gt;</code> can be accessed from within the function child of the <code>&lt;ThemedContext.ContextConsumer /&gt;</code> as <code>context.value</code>.
+- Context props defined on <code>&lt;ThemedContext.Provider /&gt;</code> can be accessed from within the function child of the <code>&lt;ThemedContext.Consumer /&gt;</code> as <code>context.value</code>.
 - Context providers can have multiple context consumer descendents.
 - Context consumers can have one function-as-a-child (which takes the <code>context</code> as argument) which must return a valid HTML, inline-SVG element, component (either class-based or function) or <code>null</code>.
 - You can have as many elements between the context provider and consumer(s), as you want.<br>
 No need to pass the <code>context</code> all the way down within the "props flow"; the function child of the context consumer will have access to it by default.<br>
 It allows you to create your "intermediate" components without depending from the <code>context</code> (they don't need to be aware of it if they have nothing to do with it...).
+- In TypeScript projects use <code>Provider</code> / <code>Consumer</code> — the callback argument type is inferred from the `createContext<T>()` type parameter, so no manual annotation is needed.
+- **Avoid** <code>ContextProvider</code> / <code>ContextConsumer</code> in TypeScript projects. These aliases exist for internal use (e.g. by `Intl` and `Feature` modules) but carry looser types: the consumer callback argument is typed as `Props` instead of `ContextValue<T>`, so you lose type inference on `context.value` and `context.defaultContext`.
 
     ```typescript
-    import Anu, { AnuElement, ContextValue } from 'anu-verzum';
+    import Anu, { AnuElement } from 'anu-verzum';
 
     const ComponentWithContext = (): AnuElement => {
         const theme2 = 'Theme-2';
         return (
-            <ThemedContext.ContextProvider theme={theme2}>
+            <ThemedContext.Provider theme={theme2}>
                 <MyComponent1>
                     <MyComponentN>
-                        <ThemedContext.ContextConsumer>
-                            {(context: ContextValue<ThemeContextValue>) => {
-                                const {
-                                    value: {
-                                        theme // "Theme-2"
-                                    },
-                                    defaultContext: {
-                                        value: {
-                                            theme: defaultTheme // "Theme-1"
-                                        }
-                                    }
-                                } = context;
-                                return (
-                                    <Anu.Fragment>
-                                        <span>{theme}</span>
-                                        <span>{defaultTheme}</span>
-                                    </Anu.Fragment>
-                                );
-                            }}
-                        </ThemedContext.ContextConsumer>
+                        <ThemedContext.Consumer>
+                            {({ value: { theme }, defaultContext: { value: { theme: defaultTheme } } }) => (
+                                // context type is inferred as ContextValue<ThemeContextValue>
+                                // theme → "Theme-2", defaultTheme → "Theme-1"
+                                <Anu.Fragment>
+                                    <span>{theme}</span>
+                                    <span>{defaultTheme}</span>
+                                </Anu.Fragment>
+                            )}
+                        </ThemedContext.Consumer>
                     </MyComponentN>
                 </MyComponent1>
-            </ThemedContext.ContextProvider>
+            </ThemedContext.Provider>
         );
     };
     ```
@@ -1820,10 +1816,11 @@ it should return that part, with the updated desired values:
 
 - Selectors are memoized functions which come handy if you need to do expensive calculations or conversions on the global state.
 - To create selector, use the <code>Anu.store.createSelector()</code> (it comes handy in <code>mapStateToProps()</code> - see <a href="#connector-api">Connecting components to the global state - The Connector API</a> section):
-    - Its first argument is an array of "getter" functions which will return the desired slice of the global state object.
+    - Its first argument is either a single "getter" function or an array of up to four "getter" functions, each returning a desired slice of the global state object.
     These functions must always return something.
-    - The second argument is a "handler" function which take as many arguments as many "getter" functions you defined; these arguments are the return values of the "getter" functions.
-    Their number and order is the same as of the "getters" within the first (array) argument of the <code>Anu.store.createSelector()</code>.
+    - The second argument is a "handler" function which takes as many arguments as "getter" functions you defined; these arguments are the return values of the "getter" functions.
+    Their number and order is the same as of the "getters" within the first argument of the <code>Anu.store.createSelector()</code>.
+    - In TypeScript, when you pass the getter array inline, the handler's parameter types are inferred automatically — no manual annotations needed.
 
         ```typescript
         import Anu, { SelectorFn } from 'anu-verzum';
@@ -1837,17 +1834,18 @@ it should return that part, with the updated desired values:
         const getStatePart1: SelectorFn<MyGlobalState, string> = state => state.myStatePart1;
         const getStatePart2: SelectorFn<MyGlobalState, number[]> = state => state.myStatePart2;
 
-        // Store the getters within an array:
-        const getters = [getStatePart1, getStatePart2];
-
-        // Define the transformation function:
-        const handler = (part1: string, part2: number[]): string => {
-            // Do something with the state-parts and return the result:
-            return `${part1}: ${part2.join(', ')}`;
-        };
+        // Single getter — transformation receives the getter's return type directly:
+        const mySimpleSelector = Anu.store.createSelector(
+            getStatePart1,
+            (part1) => part1.toUpperCase() // part1 inferred as string
+        );
 
-        // Selector:
-        const mySelector: SelectorFn<MyGlobalState, string> = Anu.store.createSelector(getters, handler);
+        // Multiple getters — pass the array inline so TypeScript can infer a tuple:
+        const mySelector = Anu.store.createSelector(
+            [getStatePart1, getStatePart2],
+            (part1, part2) => `${part1}: ${part2.join(', ')}`
+            // part1 inferred as string, part2 as number[]
+        );
         ```
 
 <h3 id="combining-reducers">Combining reducers</h3>

package/dist/core/components/AnulyticsProvider.js

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

package/dist/core/components/Connector.js

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

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

@@ -1,15 +1,18 @@
 import { Component } from './Component';
-import { Props } from '../elements';
+import { AnuElement, Props } from '../elements';
 export type ContextValue<T> = {
     value: Partial<T>;
     defaultContext: {
         value: T;
     };
 };
-export type Context = {
-    Provider: new (props: Props) => Component;
-    Consumer: new (props: Props) => Component;
+export type ConsumerProps<T> = {
+    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;
     ContextProvider: new (props: Props) => Component;
     ContextConsumer: new (props: Props) => Component;
 };
-export declare const createContext: <T extends Record<string, any> = Record<string, any>>(context: T) => Context;
+export declare const createContext: <T extends Record<string, any> = Record<string, any>>(context: T) => Context<T>;

package/dist/core/components/Context.js

@@ -40,9 +40,7 @@ const createContext = context => {
       }
     }
     render() {
-      const {
-        children
-      } = this.props;
+      const children = this.props.children;
       try {
         if (!children || children.length !== 1) {
           throw new Error('Context Component must have exactly one child element!');
@@ -62,9 +60,7 @@ const createContext = context => {
       }
     }
     render() {
-      const {
-        children
-      } = this.props;
+      const children = this.props.children;
       const {
         value,
         defaultContext

package/dist/core/components/Fragment.js

@@ -7,9 +7,7 @@ exports.Fragment = void 0;
 var _Component = require("./Component");
 class Fragment extends _Component.Component {
   render() {
-    const {
-      children
-    } = this.props;
+    const children = this.props.children;
     try {
       if (!children || !children.length) {
         throw new Error('Fragment must have at least one child element!');

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

@@ -17,8 +17,8 @@ export interface AbbreviateNumberOptions {
 }
 declare const Intl: {
     abbreviateNumber: (value: number, options?: AbbreviateNumberOptions) => string | number;
-    FormattedMessage: ({ id, values, defaultMessage }: FormattedMessageProps) => AnuElement | undefined;
+    FormattedMessage: ({ id, values, defaultMessage }: FormattedMessageProps) => AnuElement;
     formatMessage: (id: string, values?: Record<string, string | number>, defaultMessage?: string) => string;
-    Provider: ({ locale, messages, defaultLocale, children }: IntlProviderProps) => AnuElement | undefined;
+    Provider: ({ locale, messages, defaultLocale, children }: IntlProviderProps) => AnuElement | null;
 };
 export default Intl;

package/dist/core/components/Intl.js

@@ -46,7 +46,7 @@ const IntlProvider = ({
     }
   } catch (err) {
     console.error(err);
-    return undefined;
+    return null;
   }
 };
 const interpolateValues = (text, values) => {
@@ -89,7 +89,7 @@ const FormattedMessage = ({
     }
   } catch (err) {
     console.error(err);
-    return undefined;
+    return null;
   }
 });
 const formatMessage = (id, values, defaultMessage) => {

package/dist/core/elements.d.ts

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

package/dist/index.d.ts

@@ -27,7 +27,7 @@ declare const Anu: {
             };
         }, props?: unknown) => void;
     };
-    createContext: <T extends Record<string, any> = Record<string, any>>(context: T) => import("./core/components/Context").Context;
+    createContext: <T extends Record<string, any> = Record<string, any>>(context: T) => import("./core/components/Context").Context<T>;
     createElement: (type: import(".").ElementType, config: Props | null, ...args: any[]) => AnuElement;
     createRef: <T = any>() => import("./core/reconciler").Ref<T>;
     Component: typeof Component;
@@ -88,9 +88,9 @@ declare const Anu: {
     };
     Intl: {
         abbreviateNumber: (value: number, options?: import(".").AbbreviateNumberOptions) => string | number;
-        FormattedMessage: ({ id, values, defaultMessage }: import("./core/components/Intl").FormattedMessageProps) => AnuElement | undefined;
+        FormattedMessage: ({ id, values, defaultMessage }: import("./core/components/Intl").FormattedMessageProps) => AnuElement;
         formatMessage: (id: string, values?: Record<string, string | number>, defaultMessage?: string) => string;
-        Provider: ({ locale, messages, defaultLocale, children }: import("./core/components/Intl").IntlProviderProps) => AnuElement | undefined;
+        Provider: ({ locale, messages, defaultLocale, children }: import("./core/components/Intl").IntlProviderProps) => AnuElement | null;
     };
     Connector: {
         connect: <TState = any, TOwnProps extends Props = Props, TStateProps extends Props = Props, TDispatchProps extends Props = Props>(mapStateToProps?: ((state: TState, ownProps: TOwnProps) => TStateProps) | null, mapDispatchToProps?: ((dispatch: any, ownProps: TOwnProps) => TDispatchProps) | null) => (WrappedComponent: import("./core/elements").ComponentConstructor<TStateProps & TDispatchProps & TOwnProps>) => import("./core/elements").ComponentConstructor;
@@ -124,7 +124,7 @@ declare const Anu: {
     };
     store: {
         combineReducers: <S extends Record<string, any> = Record<string, any>>(reducers: { [K in keyof S]: import(".").Reducer<S[K]>; }) => import(".").Reducer<S>;
-        createSelector: <TInput = any, TOutput = any>(dependenciesInput: import(".").SelectorFn<TInput> | Array<import(".").SelectorFn<TInput>>, transformation: (...args: any[]) => TOutput) => import(".").SelectorFn<TInput, TOutput>;
+        createSelector: import(".").CreateSelectorFn;
         createStore: <S = any, A extends import(".").Action = import(".").Action>(reducer: import(".").Reducer<S, A>, initialState: S, middleware?: import(".").Middleware<S, A>) => import(".").Store<S, A>;
         middleware: {
             applyMiddleware: <S = any, A extends import(".").Action = import(".").Action>(...middlewares: Array<import(".").Middleware<S, A>>) => (store: import(".").MiddlewareAPI<S, A>) => ((next: import(".").Dispatch<A>) => import(".").Dispatch<A>);
@@ -136,9 +136,9 @@ declare const Anu: {
         deepEqual: (object1: Record<string, any>, object2: Record<string, any>) => boolean;
     };
 };
-export type { AnuElement, Props, Ref, FunctionComponent, ElementType } from './core/elements';
-export type { ContextValue } from './core/components/Context';
-export type { Action, ThunkAction, Dispatch, Reducer, MiddlewareAPI, Middleware, Store, SelectorFn } from './store/store';
+export type { AnuElement, AnuChild, Props, Ref, FunctionComponent, ElementType } from './core/elements';
+export type { ContextValue, ConsumerProps } from './core/components/Context';
+export type { Action, ThunkAction, Dispatch, Reducer, MiddlewareAPI, Middleware, Store, SelectorFn, CreateSelectorFn } from './store/store';
 export type { ApiSuccessResponse, ApiErrorResponse } from './server-api/server-api';
 export { Component, Fragment, createElement, createRef, createContext, render, goTo };
 export { AnulyticsProvider, trackEvent };

package/dist/store/store.d.ts

@@ -17,9 +17,16 @@ export type Store<S = any, A extends Action = Action> = {
     unsubscribe: (listener: () => void) => void;
 };
 export type SelectorFn<TInput = any, TOutput = any> = (input: TInput) => TOutput;
+export interface CreateSelectorFn {
+    <TInput, TI, TOutput>(dep: SelectorFn<TInput, TI>, fn: (r: TI) => TOutput): SelectorFn<TInput, TOutput>;
+    <TInput, T1, TOutput>(deps: [SelectorFn<TInput, T1>], fn: (r1: T1) => TOutput): SelectorFn<TInput, TOutput>;
+    <TInput, T1, T2, TOutput>(deps: [SelectorFn<TInput, T1>, SelectorFn<TInput, T2>], fn: (r1: T1, r2: T2) => TOutput): SelectorFn<TInput, TOutput>;
+    <TInput, T1, T2, T3, TOutput>(deps: [SelectorFn<TInput, T1>, SelectorFn<TInput, T2>, SelectorFn<TInput, T3>], fn: (r1: T1, r2: T2, r3: T3) => TOutput): SelectorFn<TInput, TOutput>;
+    <TInput, T1, T2, T3, T4, TOutput>(deps: [SelectorFn<TInput, T1>, SelectorFn<TInput, T2>, SelectorFn<TInput, T3>, SelectorFn<TInput, T4>], fn: (r1: T1, r2: T2, r3: T3, r4: T4) => TOutput): SelectorFn<TInput, TOutput>;
+}
 declare const store: {
     combineReducers: <S extends Record<string, any> = Record<string, any>>(reducers: { [K in keyof S]: Reducer<S[K]>; }) => Reducer<S>;
-    createSelector: <TInput = any, TOutput = any>(dependenciesInput: SelectorFn<TInput> | Array<SelectorFn<TInput>>, transformation: (...args: any[]) => TOutput) => SelectorFn<TInput, TOutput>;
+    createSelector: CreateSelectorFn;
     createStore: <S = any, A extends Action = Action>(reducer: Reducer<S, A>, initialState: S, middleware?: Middleware<S, A>) => Store<S, A>;
     middleware: {
         applyMiddleware: <S = any, A extends Action = Action>(...middlewares: Array<Middleware<S, A>>) => (store: MiddlewareAPI<S, A>) => ((next: Dispatch<A>) => Dispatch<A>);

package/package.json

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