nesquick 0.0.20 → 0.0.22

package/lib/NesquickComponent.js

@@ -2,14 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NesquickComponent = void 0;
 const State_1 = require("./State");
-function functionizeProps(props) {
-    for (const k in props) {
-        if (typeof props[k] !== "function") {
-            const v = props[k];
-            props[k] = () => v;
-        }
-    }
-}
 const SVGNamespaces = new Map([
     ["xlink", "http://www.w3.org/1999/xlink"],
     ["xml", "http://www.w3.org/XML/1998/namespace"]
@@ -19,6 +11,7 @@ class NesquickComponent {
         this._render = _render;
         this.props = props;
         this._subscriptions = new State_1.Subscriptions();
+        this._styleSubscriptions = null;
         this._xmlns = null;
         this._children = [];
         this.props = props;
@@ -26,7 +19,6 @@ class NesquickComponent {
     render(document) {
         State_1.subscriptions.set(this._subscriptions);
         if (typeof this._render === "function") {
-            functionizeProps(this.props);
             const element = this._render(this.props);
             if (this._xmlns) {
                 element.setXmlns(this._xmlns);
@@ -98,7 +90,10 @@ class NesquickComponent {
     _renderPropsNs(attributes, element, props) {
         for (const k in props) {
             if (k !== "children" && k !== "xmlns" && k !== "ref") {
-                if (typeof props[k] === "function") {
+                if (k === "style") {
+                    this._renderStyle(element, props[k]);
+                }
+                else if (typeof props[k] === "function") {
                     if (k.startsWith("on")) {
                         element[k.toLowerCase()] = props[k];
                     }
@@ -132,7 +127,10 @@ class NesquickComponent {
     _renderProps(element, props) {
         for (const k in props) {
             if (k !== "children" && k !== "xmlns" && k !== "ref") {
-                if (typeof props[k] === "function") {
+                if (k === "style") {
+                    this._renderStyle(element, props[k]);
+                }
+                else if (typeof props[k] === "function") {
                     if (k.startsWith("on")) {
                         element[k.toLowerCase()] = props[k];
                     }
@@ -148,6 +146,65 @@ class NesquickComponent {
             }
         }
     }
+    _renderStyles(element, styles) {
+        for (const k in styles) {
+            if (typeof styles[k] === "function") {
+                (0, State_1.useRender)(styles[k], v => {
+                    element.style[k] = String(v);
+                });
+            }
+            else {
+                element.style[k] = String(styles[k]);
+            }
+        }
+    }
+    _renderStyle(element, style) {
+        switch (typeof style) {
+            case "function": {
+                (0, State_1.useRender)(style, (style, isState) => {
+                    if (this._styleSubscriptions != null) {
+                        this._styleSubscriptions.dispose();
+                        this._styleSubscriptions = null;
+                    }
+                    switch (typeof style) {
+                        case "object": {
+                            if (style) {
+                                if (isState) {
+                                    element.removeAttribute("style");
+                                    this._styleSubscriptions = new State_1.Subscriptions();
+                                    State_1.subscriptions.set(this._styleSubscriptions);
+                                    this._renderStyles(element, style);
+                                    State_1.subscriptions.reset();
+                                }
+                                else {
+                                    this._renderStyles(element, style);
+                                }
+                            }
+                            break;
+                        }
+                        default: {
+                            element.setAttribute("style", String(style));
+                            break;
+                        }
+                    }
+                });
+                break;
+            }
+            case "object": {
+                if (style) {
+                    this._renderStyles(element, style);
+                }
+                else {
+                    element.removeAttribute("style");
+                }
+                break;
+            }
+            default: {
+                element.setAttribute("style", String(style));
+                break;
+            }
+        }
+    }
     _renderChildren(document, parent, children) {
         if (children != null) {
             if (!Array.isArray(children)) {
@@ -279,6 +336,7 @@ class NesquickComponent {
     }
     dispose() {
         this._subscriptions.dispose();
+        this._styleSubscriptions?.dispose();
         for (const child of this._children) {
             if (child.component) {
                 child.component.dispose();

package/lib/State.js

@@ -144,5 +144,5 @@ function runSubscription(sub) {
             sub.states.delete(state);
         }
     }
-    sub.reaction?.(res);
+    sub.reaction?.(res, sub.states.size > 0);
 }

package/lib/types/NesquickComponent.d.ts

@@ -26,6 +26,7 @@ export declare class NesquickComponent<P extends ComponentProps = {}> {
     private _render;
     protected props: P;
     private _subscriptions;
+    private _styleSubscriptions;
     private _xmlns;
     protected _children: NesquickChild[];
     constructor(_render: string | FunctionComponent<P>, props: P);
@@ -34,6 +35,8 @@ export declare class NesquickComponent<P extends ComponentProps = {}> {
     private _getAttributeNs;
     private _renderPropsNs;
     private _renderProps;
+    private _renderStyles;
+    private _renderStyle;
     protected _renderChildren(document: VeactDocument, parent: NesquickParent, children?: Children): void;
     protected _pushChild(): NesquickChild;
     protected _spliceChild(i: number): NesquickChild;

package/lib/types/State.d.ts

@@ -1,7 +1,7 @@
 export type State<T> = [get: () => T, set: (value: T) => void];
 export type Subscription<T> = {
     cb: () => T;
-    reaction: ((data: T) => void) | null;
+    reaction: ((data: T, isState: boolean) => void) | null;
     iteration: number;
     states: Map<Set<Subscription<any>>, number>;
     next: Subscription<T> | null;
@@ -19,6 +19,6 @@ export declare namespace subscriptions {
     function reset(): void;
 }
 export declare function useState<T>(value: T): State<T>;
-export declare function useEffect<T>(cb: () => T, reaction?: ((data: T) => void) | null): void;
-export declare function useRender<T>(cb: () => T, reaction?: ((data: T) => void) | null): void;
+export declare function useEffect<T>(cb: () => T, reaction?: ((data: T, isState: boolean) => void) | null): void;
+export declare function useRender<T>(cb: () => T, reaction?: ((data: T, isState: boolean) => void) | null): void;
 export declare function useDispose(cb: () => void): void;

package/lib/types/jsx-runtime.d.ts

@@ -3,19 +3,24 @@ import { NesquickFragment } from "./NesquickFragment";
 export declare const Fragment: unique symbol;
 export declare function jsxs<P extends ComponentProps>(type: string | FunctionComponent<P> | typeof Fragment, props: P, key?: string | number | null): NesquickFragment | NesquickComponent<P>;
 export declare const jsx: typeof jsxs;
+type HasUndefined<T, K extends keyof T> = {
+    [L in K]-?: T[K] | undefined;
+} extends {
+    [L in K]?: T[K];
+} ? undefined extends T[K] ? true : false : false;
 declare const WrappedFunctionType: unique symbol;
 type WrappedFunction<T> = (() => T) & {
     readonly [WrappedFunctionType]?: T;
 };
-type UserProp<T> = T extends (...args: infer A) => infer R ? (((...args: A) => R) | T) : WrappedFunction<T>;
-type ComponentProp<T> = T extends {
-    readonly [WrappedFunctionType]?: infer R;
-} ? (T | R) : T extends (...args: any[]) => any ? T : (T | (() => T));
+type UserProp<T> = T extends (...args: any[]) => any ? T : WrappedFunction<T>;
 type UserProps<T> = {
-    [K in keyof T]: UserProp<T[K]>;
+    readonly [K in keyof T]: HasUndefined<T, K> extends true ? UserProp<T[K] | undefined> : UserProp<Exclude<T[K], undefined>>;
 };
+type JSXProp<T> = T extends {
+    readonly [WrappedFunctionType]?: infer R;
+} ? R : T;
 type JSXProps<T> = keyof T extends never ? {} : {
-    [K in keyof T]: ComponentProp<T[K]>;
+    [K in keyof T]: JSXProp<T[K]>;
 };
 export type Generic<T> = T extends (...args: any) => infer R ? R : T;
 export { UserProps as Props };
@@ -32,23 +37,22 @@ export declare namespace JSX {
     };
     export interface Props<T extends EventTarget = HTMLElement> extends JSXHTMLEvent<T>, JSXSVGEvent<T> {
         [k: string]: any;
-        style?: StyleProps;
-        xmlns?: string;
-        ref?: (el: T) => void;
+        style?: Style;
+        xmlns?: string | null;
+        ref?: ((el: T) => void) | null;
     }
+    export type Style = StyleProps | string;
     export type StyleProps = {
         [K in keyof CSSStyleDeclaration]?: CSSStyleDeclaration[K] extends Function ? never : CSSStyleDeclaration[K] | (() => CSSStyleDeclaration[K]);
     };
     export type HTMLProps<T extends HTMLElement = HTMLElement> = Props<T>;
     export type SVGProps<T extends SVGElement = SVGElement> = Props<T>;
-    export type JSXElements = {
+    export type IntrinsicElements = {
         [K in keyof HTMLElementTagNameMap]: HTMLProps<HTMLElementTagNameMap[K]>;
     } & {
         [K in keyof SVGElementTagNameMap]: SVGProps<SVGElementTagNameMap[K]>;
     };
     export type Element = NesquickComponent<any>;
-    export interface IntrinsicElements extends JSXElements {
-    }
     export type ElementType = keyof IntrinsicElements | Component<any> | typeof NesquickComponent<any>;
     const NotEmptyObject: unique symbol;
     export type IntrinsicAttributes = {

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "nesquick",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "description": "React-like library with focus on drawing performance",
   "types": "./lib/types",
   "main": "./lib",
   "typesVersions": {
     "*": {
       "jsx-runtime": ["./lib/types/jsx-runtime.d.ts"],
-      "jsx-dev-runtime": ["./lib/types/jsx-dev-runtime.d.ts"]
+      "jsx-dev-runtime": ["./lib/types/jsx-dev-runtime.d.ts"],
+      "no-transformer/jsx-runtime": ["./lib/types/no-transformer/jsx-runtime.d.ts"],
+      "no-transformer/jsx-dev-runtime": ["./lib/types/no-transformer/jsx-dev-runtime.d.ts"]
     }
   },
   "bin": {
@@ -17,6 +19,7 @@
   "sideEffects": false,
   "files": [
     "lib/",
+    "no-transformer/",
     "jsx-runtime.js",
     "jsx-dev-runtime.js"
   ],