nesquick 0.0.19 → 0.0.21

package/lib/NesquickComponent.js

@@ -19,6 +19,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;
@@ -98,7 +99,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];
                     }
@@ -131,8 +135,11 @@ class NesquickComponent {
     ;
     _renderProps(element, props) {
         for (const k in props) {
-            if (k !== "children" && k !== "xmlns") {
-                if (typeof props[k] === "function") {
+            if (k !== "children" && k !== "xmlns" && k !== "ref") {
+                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 +155,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 +345,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

@@ -32,9 +32,9 @@ 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?: StyleProps | string;
+        xmlns?: string | null;
+        ref?: ((el: T) => void) | null;
     }
     export type StyleProps = {
         [K in keyof CSSStyleDeclaration]?: CSSStyleDeclaration[K] extends Function ? never : CSSStyleDeclaration[K] | (() => CSSStyleDeclaration[K]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nesquick",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "description": "React-like library with focus on drawing performance",
   "types": "./lib/types",
   "main": "./lib",