rask-ui 0.3.3 → 0.3.4

package/dist/component.d.ts

@@ -8,15 +8,16 @@ declare class RaskComponent<P extends Props<any>> extends Component<P & {
 }> {
     private renderFn?;
     private reactiveProps?;
-    private prevChildren;
     private observer;
-    private hasDirtyProps;
+    private isRendering;
     contexts: Map<any, any>;
     getChildContext(): any;
     onMounts: Array<() => void>;
     onCleanups: Array<() => void>;
+    private createReactiveProps;
     componentDidMount(): void;
     componentWillUnmount(): void;
+    componentDidUpdate(): void;
     shouldComponentUpdate(nextProps: Props<any>): boolean;
     render(): any;
 }

package/dist/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,EACL,SAAS,EACT,KAAK,EAEN,MAAM,SAAS,CAAC;AAMjB,wBAAgB,mBAAmB,uBAMlC;AAED,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,IAAI,QAMrC;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,IAAI,QAMvC;AAED,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,IAClD,CAAC,MAAM,MAAM,KAAK,CAAC,GACnB,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,CAAC;AAEhC,cAAM,aAAa,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,CAAE,SAAQ,SAAS,CACzD,CAAC,GAAG;IAAE,WAAW,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAA;CAAE,CAC9C;IACC,OAAO,CAAC,QAAQ,CAAC,CAAc;IAC/B,OAAO,CAAC,aAAa,CAAC,CAAa;IACnC,OAAO,CAAC,YAAY,CAAM;IAC1B,OAAO,CAAC,QAAQ,CAEb;IACH,OAAO,CAAC,aAAa,CAAS;IAC9B,QAAQ,gBAAa;IACrB,eAAe;IAUf,QAAQ,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAM;IACjC,UAAU,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAM;IACnC,iBAAiB,IAAI,IAAI;IAIzB,oBAAoB,IAAI,IAAI;IAG5B,qBAAqB,CAAC,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,OAAO;IAYrD,MAAM;CAuCP;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,EAAE,MAAM,SAO9D"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,EACL,SAAS,EACT,KAAK,EAEN,MAAM,SAAS,CAAC;AAMjB,wBAAgB,mBAAmB,uBAMlC;AAED,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,IAAI,QAMrC;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,IAAI,QAMvC;AAED,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,IAClD,CAAC,MAAM,MAAM,KAAK,CAAC,GACnB,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,KAAK,CAAC,CAAC;AAEhC,cAAM,aAAa,CAAC,CAAC,SAAS,KAAK,CAAC,GAAG,CAAC,CAAE,SAAQ,SAAS,CACzD,CAAC,GAAG;IAAE,WAAW,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAA;CAAE,CAC9C;IACC,OAAO,CAAC,QAAQ,CAAC,CAAc;IAC/B,OAAO,CAAC,aAAa,CAAC,CAAa;IACnC,OAAO,CAAC,QAAQ,CAEb;IACH,OAAO,CAAC,WAAW,CAAS;IAC5B,QAAQ,gBAAa;IACrB,eAAe;IAUf,QAAQ,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAM;IACjC,UAAU,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,CAAM;IACnC,OAAO,CAAC,mBAAmB;IAgC3B,iBAAiB,IAAI,IAAI;IAGzB,oBAAoB,IAAI,IAAI;IAG5B,kBAAkB;IAUlB,qBAAqB,CAAC,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,OAAO;IAerD,MAAM;CAyCP;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,EAAE,MAAM,SAO9D"}

package/dist/component.js

@@ -22,11 +22,10 @@ export function onCleanup(cb) {
 class RaskComponent extends Component {
     renderFn;
     reactiveProps;
-    prevChildren;
     observer = new Observer(() => {
         this.forceUpdate();
     });
-    hasDirtyProps = false;
+    isRendering = false;
     contexts = new Map();
     getChildContext() {
         const parentGetContext = this.context.getContext;
@@ -39,25 +38,65 @@ class RaskComponent extends Component {
     }
     onMounts = [];
     onCleanups = [];
+    createReactiveProps() {
+        const reactiveProps = {};
+        const self = this;
+        for (const prop in this.props) {
+            const signal = new Signal();
+            // @ts-ignore
+            let reactiveValue = this.props[prop];
+            Object.defineProperty(reactiveProps, prop, {
+                get() {
+                    if (!self.isRendering) {
+                        const observer = getCurrentObserver();
+                        if (observer) {
+                            observer.subscribeSignal(signal);
+                        }
+                    }
+                    // @ts-ignore
+                    return self.props[prop];
+                },
+                set(value) {
+                    if (reactiveValue !== value) {
+                        reactiveValue = value;
+                        signal.notify();
+                    }
+                },
+            });
+        }
+        return reactiveProps;
+    }
     componentDidMount() {
         this.onMounts.forEach((cb) => cb());
     }
     componentWillUnmount() {
         this.onCleanups.forEach((cb) => cb());
     }
+    componentDidUpdate() {
+        for (const prop in this.props) {
+            if (prop === "__component" || prop === "children") {
+                continue;
+            }
+            // @ts-ignore
+            this.reactiveProps[prop] = this.props[prop];
+        }
+    }
     shouldComponentUpdate(nextProps) {
+        // Shallow comparison of props, excluding internal props
         for (const prop in nextProps) {
             if (prop === "__component") {
                 continue;
             }
             // @ts-ignore
-            this.reactiveProps[prop] = nextProps[prop];
+            if (this.props[prop] !== nextProps[prop]) {
+                return true;
+            }
         }
-        return true;
+        return false;
     }
     render() {
         if (!this.renderFn) {
-            this.reactiveProps = createReactiveProps(this.props);
+            this.reactiveProps = this.createReactiveProps();
             currentComponent = this;
             try {
                 this.renderFn = this.props.__component(this.reactiveProps);
@@ -77,7 +116,9 @@ class RaskComponent extends Component {
         const stopObserving = this.observer.observe();
         let result = null;
         try {
+            this.isRendering = true;
             result = this.renderFn();
+            this.isRendering = false;
         }
         catch (error) {
             if (typeof this.context.notifyError !== "function") {
@@ -94,25 +135,3 @@ class RaskComponent extends Component {
 export function createComponent(props, key) {
     return createComponentVNode(4 /* VNodeFlags.ComponentClass */, RaskComponent, props, key);
 }
-function createReactiveProps(props) {
-    const reactiveProps = {};
-    for (const prop in props) {
-        const signal = new Signal();
-        Object.defineProperty(reactiveProps, prop, {
-            get() {
-                const observer = getCurrentObserver();
-                if (observer) {
-                    observer.subscribeSignal(signal);
-                }
-                return props[prop];
-            },
-            set(value) {
-                if (props[prop] !== value) {
-                    props[prop] = value;
-                    signal.notify();
-                }
-            },
-        });
-    }
-    return reactiveProps;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rask-ui",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",