rask-ui 0.3.2 → 0.3.4

package/README.md

@@ -46,7 +46,7 @@ Solid offers a simpler mental model with fine-grained reactivity. Updates don't
 
 - Requires understanding special compiler transformations
 - Special components for expressing dynamic UIs (`<Show>`, `<For>`, etc.)
-- Function call syntax for accessing values: `count()`
+- Different signatures for accessing reactive values: `count()` VS `state.count`
 
 ### RASK: Best of Both Worlds
 
@@ -66,6 +66,8 @@ RASK gives you:
 - **No compiler magic** - Plain JavaScript/TypeScript
 - **Simple mental model** - State updates trigger only affected components
 
+Built on [Inferno JS](https://github.com/infernojs/inferno).
+
 ## Getting Started
 
 ### Installation
@@ -233,8 +235,6 @@ Reactive objects are implemented using JavaScript Proxies. When you access a pro
 - `createMutation()` - Never destructure mutation objects
 - `createView()` - Never destructure view objects
 
-**Learn more:** This is the same design decision as [Solid.js reactive primitives](https://www.solidjs.com/tutorial/introduction_signals), which also use this pattern for fine-grained reactivity.
-
 ## API Reference
 
 ### Core Functions

package/dist/component.d.ts

@@ -1,4 +1,4 @@
-import { VNode, Component, Props, InfernoNode } from "inferno";
+import { VNode, Component, Props } from "inferno";
 export declare function getCurrentComponent(): RaskComponent<any>;
 export declare function onMount(cb: () => void): void;
 export declare function onCleanup(cb: () => void): void;
@@ -8,20 +8,17 @@ declare class RaskComponent<P extends Props<any>> extends Component<P & {
 }> {
     private renderFn?;
     private reactiveProps?;
-    private prevChildren;
     private observer;
+    private isRendering;
     contexts: Map<any, any>;
     getChildContext(): any;
     onMounts: Array<() => void>;
     onCleanups: Array<() => void>;
+    private createReactiveProps;
     componentDidMount(): void;
-    componentWillReceiveProps(nextProps: Readonly<{
-        children?: InfernoNode;
-    } & P & {
-        __component: RaskFunctionComponent<P>;
-    }>): void;
     componentWillUnmount(): void;
-    shouldComponentUpdate(): boolean;
+    componentDidUpdate(): void;
+    shouldComponentUpdate(nextProps: Props<any>): boolean;
     render(): any;
 }
 export declare function createComponent(props: Props<any>, key?: string): VNode;

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,EACL,WAAW,EACZ,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,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;IAGzB,yBAAyB,CACvB,SAAS,EAAE,QAAQ,CACjB;QAAE,QAAQ,CAAC,EAAE,WAAW,CAAA;KAAE,GAAG,CAAC,GAAG;QAAE,WAAW,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAA;KAAE,CAC3E,GACA,IAAI;IAaP,oBAAoB,IAAI,IAAI;IAG5B,qBAAqB,IAAI,OAAO;IAGhC,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,10 +22,10 @@ export function onCleanup(cb) {
 class RaskComponent extends Component {
     renderFn;
     reactiveProps;
-    prevChildren;
     observer = new Observer(() => {
         this.forceUpdate();
     });
+    isRendering = false;
     contexts = new Map();
     getChildContext() {
         const parentGetContext = this.context.getContext;
@@ -38,32 +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());
     }
-    componentWillReceiveProps(nextProps) {
-        if (this.props.children === nextProps.children) {
-            for (const prop in nextProps) {
-                if (prop === "children") {
-                    continue;
-                }
-                // @ts-ignore
-                this.reactiveProps[prop] = nextProps[prop];
-            }
-        }
-        else {
-            this.prevChildren = this.props.children;
-        }
-    }
     componentWillUnmount() {
         this.onCleanups.forEach((cb) => cb());
     }
-    shouldComponentUpdate() {
-        return this.prevChildren !== this.props.children;
+    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
+            if (this.props[prop] !== nextProps[prop]) {
+                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);
@@ -83,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") {
@@ -100,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/dist/createState.js

@@ -27,7 +27,7 @@ export function createState(state) {
     return getProxy(state);
 }
 const proxyCache = new WeakMap();
-const PROXY_MARKER = Symbol('isProxy');
+const PROXY_MARKER = Symbol("isProxy");
 function getProxy(value) {
     // Check if already a proxy to avoid double-wrapping
     if (PROXY_MARKER in value) {
@@ -70,12 +70,13 @@ function getProxy(value) {
                 return Reflect.set(target, key, newValue);
             }
             const oldValue = Reflect.get(target, key);
+            const setResult = Reflect.set(target, key, newValue);
             // We only notify if actual change, though array length actually updates under the hood
             if (newValue !== oldValue || (Array.isArray(value) && key === "length")) {
                 const signal = signals[key];
                 signal?.notify();
             }
-            return Reflect.set(target, key, newValue);
+            return setResult;
         },
         deleteProperty(target, key) {
             if (typeof key === "symbol") {

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/observation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"observation.d.ts","sourceRoot":"","sources":["../src/observation.ts"],"names":[],"mappings":"AAEA,wBAAgB,kBAAkB,aAEjC;AAKD,qBAAa,MAAM;IACjB,OAAO,CAAC,WAAW,CAAyB;IAC5C,SAAS,CAAC,EAAE,EAAE,MAAM,IAAI;IAOxB,MAAM;CAgBP;AAED,qBAAa,QAAQ;IACnB,UAAU,UAAS;IACnB,OAAO,CAAC,eAAe,CAAyB;IAChD,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,QAAQ,CAAa;gBACjB,QAAQ,EAAE,MAAM,IAAI;IAGhC,eAAe,CAAC,MAAM,EAAE,MAAM;IAG9B,OAAO;IAOP,OAAO;CAIR"}
+{"version":3,"file":"observation.d.ts","sourceRoot":"","sources":["../src/observation.ts"],"names":[],"mappings":"AAEA,wBAAgB,kBAAkB,aAEjC;AAKD,qBAAa,MAAM;IACjB,OAAO,CAAC,WAAW,CAAyB;IAC5C,SAAS,CAAC,EAAE,EAAE,MAAM,IAAI;IAOxB,MAAM;CAIP;AAED,qBAAa,QAAQ;IACnB,UAAU,UAAS;IACnB,OAAO,CAAC,eAAe,CAAyB;IAChD,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,QAAQ,CAAa;gBACjB,QAAQ,EAAE,MAAM,IAAI;IAGhC,eAAe,CAAC,MAAM,EAAE,MAAM;IAG9B,OAAO;IAOP,OAAO;CAIR"}

package/dist/observation.js

@@ -14,18 +14,7 @@ export class Signal {
     }
     notify() {
         const currentSubscribers = Array.from(this.subscribers);
-        notifyQueue.push(() => {
-            currentSubscribers.forEach((cb) => cb());
-        });
-        if (!isQueuingNotify) {
-            isQueuingNotify = true;
-            queueMicrotask(() => {
-                isQueuingNotify = false;
-                const queue = notifyQueue;
-                notifyQueue = [];
-                queue.forEach((cb) => cb());
-            });
-        }
+        currentSubscribers.forEach((cb) => cb());
     }
 }
 export class Observer {

package/package.json

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