@lwc/signals 0.0.0 → 6.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +75 -0
 - package/dist/index.cjs.js +27 -0
 - package/dist/index.cjs.js.map +1 -0
 - package/dist/index.d.ts +12 -0
 - package/dist/index.js +23 -0
 - package/dist/index.js.map +1 -0
 - package/package.json +43 -7
 
    
        package/README.md
    ADDED
    
    | 
         @@ -0,0 +1,75 @@ 
     | 
|
| 
      
 1 
     | 
    
         
            +
            # @lwc/signals
         
     | 
| 
      
 2 
     | 
    
         
            +
             
     | 
| 
      
 3 
     | 
    
         
            +
            This is an experimental package containing the interface expected for signals.
         
     | 
| 
      
 4 
     | 
    
         
            +
             
     | 
| 
      
 5 
     | 
    
         
            +
            A key point to note is that when a signal is both bound to an LWC class member variable and used on a template,
         
     | 
| 
      
 6 
     | 
    
         
            +
            the LWC engine will attempt to subscribe a callback to rerender the template.
         
     | 
| 
      
 7 
     | 
    
         
            +
             
     | 
| 
      
 8 
     | 
    
         
            +
            ## Reactivity with Signals
         
     | 
| 
      
 9 
     | 
    
         
            +
             
     | 
| 
      
 10 
     | 
    
         
            +
            A Signal is an object that holds a value and allows components to react to changes to that value.
         
     | 
| 
      
 11 
     | 
    
         
            +
            It exposes a `.value` property for accessing the current value, and `.subscribe` methods for responding to changes.
         
     | 
| 
      
 12 
     | 
    
         
            +
             
     | 
| 
      
 13 
     | 
    
         
            +
            ```js
         
     | 
| 
      
 14 
     | 
    
         
            +
            import { signal } from 'some/signals';
         
     | 
| 
      
 15 
     | 
    
         
            +
             
     | 
| 
      
 16 
     | 
    
         
            +
            export default class ExampleComponent extends LightningElement {
         
     | 
| 
      
 17 
     | 
    
         
            +
                count = signal(0);
         
     | 
| 
      
 18 
     | 
    
         
            +
             
     | 
| 
      
 19 
     | 
    
         
            +
                increment() {
         
     | 
| 
      
 20 
     | 
    
         
            +
                    this.count.value++;
         
     | 
| 
      
 21 
     | 
    
         
            +
                }
         
     | 
| 
      
 22 
     | 
    
         
            +
            }
         
     | 
| 
      
 23 
     | 
    
         
            +
            ```
         
     | 
| 
      
 24 
     | 
    
         
            +
             
     | 
| 
      
 25 
     | 
    
         
            +
            In the template, we can bind directly to the `.value` property:
         
     | 
| 
      
 26 
     | 
    
         
            +
             
     | 
| 
      
 27 
     | 
    
         
            +
            ```html
         
     | 
| 
      
 28 
     | 
    
         
            +
            <template>
         
     | 
| 
      
 29 
     | 
    
         
            +
                <button onclick="{increment}">Increment</button>
         
     | 
| 
      
 30 
     | 
    
         
            +
                <p>{count.value}</p>
         
     | 
| 
      
 31 
     | 
    
         
            +
            </template>
         
     | 
| 
      
 32 
     | 
    
         
            +
            ```
         
     | 
| 
      
 33 
     | 
    
         
            +
             
     | 
| 
      
 34 
     | 
    
         
            +
            ## Supported APIs
         
     | 
| 
      
 35 
     | 
    
         
            +
             
     | 
| 
      
 36 
     | 
    
         
            +
            This package supports the following APIs.
         
     | 
| 
      
 37 
     | 
    
         
            +
             
     | 
| 
      
 38 
     | 
    
         
            +
            ### Signal
         
     | 
| 
      
 39 
     | 
    
         
            +
             
     | 
| 
      
 40 
     | 
    
         
            +
            This is the shape of the signal that the LWC engine expects.
         
     | 
| 
      
 41 
     | 
    
         
            +
             
     | 
| 
      
 42 
     | 
    
         
            +
            ```js
         
     | 
| 
      
 43 
     | 
    
         
            +
            export type OnUpdate = () => void;
         
     | 
| 
      
 44 
     | 
    
         
            +
            export type Unsubscribe = () => void;
         
     | 
| 
      
 45 
     | 
    
         
            +
             
     | 
| 
      
 46 
     | 
    
         
            +
            export interface Signal<T> {
         
     | 
| 
      
 47 
     | 
    
         
            +
                get value(): T;
         
     | 
| 
      
 48 
     | 
    
         
            +
                subscribe(onUpdate: OnUpdate): Unsubscribe;
         
     | 
| 
      
 49 
     | 
    
         
            +
            }
         
     | 
| 
      
 50 
     | 
    
         
            +
            ```
         
     | 
| 
      
 51 
     | 
    
         
            +
             
     | 
| 
      
 52 
     | 
    
         
            +
            ### SignalBaseClass
         
     | 
| 
      
 53 
     | 
    
         
            +
             
     | 
| 
      
 54 
     | 
    
         
            +
            A base class is provided as a starting point for implementation.
         
     | 
| 
      
 55 
     | 
    
         
            +
             
     | 
| 
      
 56 
     | 
    
         
            +
            ```js
         
     | 
| 
      
 57 
     | 
    
         
            +
            export abstract class SignalBaseClass<T> implements Signal<T> {
         
     | 
| 
      
 58 
     | 
    
         
            +
                abstract get value(): T;
         
     | 
| 
      
 59 
     | 
    
         
            +
             
     | 
| 
      
 60 
     | 
    
         
            +
                private subscribers: Set<OnUpdate> = new Set();
         
     | 
| 
      
 61 
     | 
    
         
            +
             
     | 
| 
      
 62 
     | 
    
         
            +
                subscribe(onUpdate: OnUpdate) {
         
     | 
| 
      
 63 
     | 
    
         
            +
                    this.subscribers.add(onUpdate);
         
     | 
| 
      
 64 
     | 
    
         
            +
                    return () => {
         
     | 
| 
      
 65 
     | 
    
         
            +
                        this.subscribers.delete(onUpdate);
         
     | 
| 
      
 66 
     | 
    
         
            +
                    };
         
     | 
| 
      
 67 
     | 
    
         
            +
                }
         
     | 
| 
      
 68 
     | 
    
         
            +
             
     | 
| 
      
 69 
     | 
    
         
            +
                protected notify() {
         
     | 
| 
      
 70 
     | 
    
         
            +
                    for (const subscriber of this.subscribers) {
         
     | 
| 
      
 71 
     | 
    
         
            +
                        subscriber();
         
     | 
| 
      
 72 
     | 
    
         
            +
                    }
         
     | 
| 
      
 73 
     | 
    
         
            +
                }
         
     | 
| 
      
 74 
     | 
    
         
            +
            }
         
     | 
| 
      
 75 
     | 
    
         
            +
            ```
         
     | 
| 
         @@ -0,0 +1,27 @@ 
     | 
|
| 
      
 1 
     | 
    
         
            +
            /**
         
     | 
| 
      
 2 
     | 
    
         
            +
             * Copyright (c) 2024 Salesforce, Inc.
         
     | 
| 
      
 3 
     | 
    
         
            +
             */
         
     | 
| 
      
 4 
     | 
    
         
            +
            'use strict';
         
     | 
| 
      
 5 
     | 
    
         
            +
             
     | 
| 
      
 6 
     | 
    
         
            +
            Object.defineProperty(exports, '__esModule', { value: true });
         
     | 
| 
      
 7 
     | 
    
         
            +
             
     | 
| 
      
 8 
     | 
    
         
            +
            class SignalBaseClass {
         
     | 
| 
      
 9 
     | 
    
         
            +
                constructor() {
         
     | 
| 
      
 10 
     | 
    
         
            +
                    this.subscribers = new Set();
         
     | 
| 
      
 11 
     | 
    
         
            +
                }
         
     | 
| 
      
 12 
     | 
    
         
            +
                subscribe(onUpdate) {
         
     | 
| 
      
 13 
     | 
    
         
            +
                    this.subscribers.add(onUpdate);
         
     | 
| 
      
 14 
     | 
    
         
            +
                    return () => {
         
     | 
| 
      
 15 
     | 
    
         
            +
                        this.subscribers.delete(onUpdate);
         
     | 
| 
      
 16 
     | 
    
         
            +
                    };
         
     | 
| 
      
 17 
     | 
    
         
            +
                }
         
     | 
| 
      
 18 
     | 
    
         
            +
                notify() {
         
     | 
| 
      
 19 
     | 
    
         
            +
                    for (const subscriber of this.subscribers) {
         
     | 
| 
      
 20 
     | 
    
         
            +
                        subscriber();
         
     | 
| 
      
 21 
     | 
    
         
            +
                    }
         
     | 
| 
      
 22 
     | 
    
         
            +
                }
         
     | 
| 
      
 23 
     | 
    
         
            +
            }
         
     | 
| 
      
 24 
     | 
    
         
            +
             
     | 
| 
      
 25 
     | 
    
         
            +
            exports.SignalBaseClass = SignalBaseClass;
         
     | 
| 
      
 26 
     | 
    
         
            +
            /** version: 6.2.1 */
         
     | 
| 
      
 27 
     | 
    
         
            +
            //# sourceMappingURL=index.cjs.js.map
         
     | 
| 
         @@ -0,0 +1 @@ 
     | 
|
| 
      
 1 
     | 
    
         
            +
            {"version":3,"file":"index.cjs.js","sources":["../src/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;MAcsB,eAAe,CAAA;AAArC,IAAA,WAAA,GAAA;AAGY,QAAA,IAAA,CAAA,WAAW,GAAkB,IAAI,GAAG,EAAE,CAAC;KAclD;AAZG,IAAA,SAAS,CAAC,QAAkB,EAAA;AACxB,QAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;AAC/B,QAAA,OAAO,MAAK;AACR,YAAA,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AACtC,SAAC,CAAC;KACL;IAES,MAAM,GAAA;AACZ,QAAA,KAAK,MAAM,UAAU,IAAI,IAAI,CAAC,WAAW,EAAE;AACvC,YAAA,UAAU,EAAE,CAAC;SAChB;KACJ;AACJ;;;;;;;"}
         
     | 
    
        package/dist/index.d.ts
    ADDED
    
    | 
         @@ -0,0 +1,12 @@ 
     | 
|
| 
      
 1 
     | 
    
         
            +
            export type OnUpdate = () => void;
         
     | 
| 
      
 2 
     | 
    
         
            +
            export type Unsubscribe = () => void;
         
     | 
| 
      
 3 
     | 
    
         
            +
            export interface Signal<T> {
         
     | 
| 
      
 4 
     | 
    
         
            +
                get value(): T;
         
     | 
| 
      
 5 
     | 
    
         
            +
                subscribe(onUpdate: OnUpdate): Unsubscribe;
         
     | 
| 
      
 6 
     | 
    
         
            +
            }
         
     | 
| 
      
 7 
     | 
    
         
            +
            export declare abstract class SignalBaseClass<T> implements Signal<T> {
         
     | 
| 
      
 8 
     | 
    
         
            +
                abstract get value(): T;
         
     | 
| 
      
 9 
     | 
    
         
            +
                private subscribers;
         
     | 
| 
      
 10 
     | 
    
         
            +
                subscribe(onUpdate: OnUpdate): () => void;
         
     | 
| 
      
 11 
     | 
    
         
            +
                protected notify(): void;
         
     | 
| 
      
 12 
     | 
    
         
            +
            }
         
     | 
    
        package/dist/index.js
    ADDED
    
    | 
         @@ -0,0 +1,23 @@ 
     | 
|
| 
      
 1 
     | 
    
         
            +
            /**
         
     | 
| 
      
 2 
     | 
    
         
            +
             * Copyright (c) 2024 Salesforce, Inc.
         
     | 
| 
      
 3 
     | 
    
         
            +
             */
         
     | 
| 
      
 4 
     | 
    
         
            +
            class SignalBaseClass {
         
     | 
| 
      
 5 
     | 
    
         
            +
                constructor() {
         
     | 
| 
      
 6 
     | 
    
         
            +
                    this.subscribers = new Set();
         
     | 
| 
      
 7 
     | 
    
         
            +
                }
         
     | 
| 
      
 8 
     | 
    
         
            +
                subscribe(onUpdate) {
         
     | 
| 
      
 9 
     | 
    
         
            +
                    this.subscribers.add(onUpdate);
         
     | 
| 
      
 10 
     | 
    
         
            +
                    return () => {
         
     | 
| 
      
 11 
     | 
    
         
            +
                        this.subscribers.delete(onUpdate);
         
     | 
| 
      
 12 
     | 
    
         
            +
                    };
         
     | 
| 
      
 13 
     | 
    
         
            +
                }
         
     | 
| 
      
 14 
     | 
    
         
            +
                notify() {
         
     | 
| 
      
 15 
     | 
    
         
            +
                    for (const subscriber of this.subscribers) {
         
     | 
| 
      
 16 
     | 
    
         
            +
                        subscriber();
         
     | 
| 
      
 17 
     | 
    
         
            +
                    }
         
     | 
| 
      
 18 
     | 
    
         
            +
                }
         
     | 
| 
      
 19 
     | 
    
         
            +
            }
         
     | 
| 
      
 20 
     | 
    
         
            +
             
     | 
| 
      
 21 
     | 
    
         
            +
            export { SignalBaseClass };
         
     | 
| 
      
 22 
     | 
    
         
            +
            /** version: 6.2.1 */
         
     | 
| 
      
 23 
     | 
    
         
            +
            //# sourceMappingURL=index.js.map
         
     | 
| 
         @@ -0,0 +1 @@ 
     | 
|
| 
      
 1 
     | 
    
         
            +
            {"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;MAcsB,eAAe,CAAA;AAArC,IAAA,WAAA,GAAA;AAGY,QAAA,IAAA,CAAA,WAAW,GAAkB,IAAI,GAAG,EAAE,CAAC;KAclD;AAZG,IAAA,SAAS,CAAC,QAAkB,EAAA;AACxB,QAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;AAC/B,QAAA,OAAO,MAAK;AACR,YAAA,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AACtC,SAAC,CAAC;KACL;IAES,MAAM,GAAA;AACZ,QAAA,KAAK,MAAM,UAAU,IAAI,IAAI,CAAC,WAAW,EAAE;AACvC,YAAA,UAAU,EAAE,CAAC;SAChB;KACJ;AACJ;;;;;;;"}
         
     | 
    
        package/package.json
    CHANGED
    
    | 
         @@ -1,8 +1,44 @@ 
     | 
|
| 
       1 
1 
     | 
    
         
             
            {
         
     | 
| 
       2 
     | 
    
         
            -
             
     | 
| 
       3 
     | 
    
         
            -
             
     | 
| 
       4 
     | 
    
         
            -
             
     | 
| 
       5 
     | 
    
         
            -
             
     | 
| 
       6 
     | 
    
         
            -
             
     | 
| 
       7 
     | 
    
         
            -
             
     | 
| 
       8 
     | 
    
         
            -
             
     | 
| 
      
 2 
     | 
    
         
            +
                "//": [
         
     | 
| 
      
 3 
     | 
    
         
            +
                    "THIS FILE IS AUTOGENERATED. If you modify it, it will be rewritten by check-and-rewrite-package-json.js",
         
     | 
| 
      
 4 
     | 
    
         
            +
                    "You can safely modify dependencies, devDependencies, keywords, etc., but other props will be overwritten."
         
     | 
| 
      
 5 
     | 
    
         
            +
                ],
         
     | 
| 
      
 6 
     | 
    
         
            +
                "name": "@lwc/signals",
         
     | 
| 
      
 7 
     | 
    
         
            +
                "version": "6.2.1",
         
     | 
| 
      
 8 
     | 
    
         
            +
                "description": "Provides the interface to interact with reactivity from outside the framework",
         
     | 
| 
      
 9 
     | 
    
         
            +
                "keywords": [
         
     | 
| 
      
 10 
     | 
    
         
            +
                    "lwc"
         
     | 
| 
      
 11 
     | 
    
         
            +
                ],
         
     | 
| 
      
 12 
     | 
    
         
            +
                "homepage": "https://lwc.dev",
         
     | 
| 
      
 13 
     | 
    
         
            +
                "repository": {
         
     | 
| 
      
 14 
     | 
    
         
            +
                    "type": "git",
         
     | 
| 
      
 15 
     | 
    
         
            +
                    "url": "https://github.com/salesforce/lwc.git",
         
     | 
| 
      
 16 
     | 
    
         
            +
                    "directory": "packages/@lwc/signals"
         
     | 
| 
      
 17 
     | 
    
         
            +
                },
         
     | 
| 
      
 18 
     | 
    
         
            +
                "bugs": {
         
     | 
| 
      
 19 
     | 
    
         
            +
                    "url": "https://github.com/salesforce/lwc/issues"
         
     | 
| 
      
 20 
     | 
    
         
            +
                },
         
     | 
| 
      
 21 
     | 
    
         
            +
                "license": "MIT",
         
     | 
| 
      
 22 
     | 
    
         
            +
                "publishConfig": {
         
     | 
| 
      
 23 
     | 
    
         
            +
                    "access": "public"
         
     | 
| 
      
 24 
     | 
    
         
            +
                },
         
     | 
| 
      
 25 
     | 
    
         
            +
                "main": "dist/index.cjs.js",
         
     | 
| 
      
 26 
     | 
    
         
            +
                "module": "dist/index.js",
         
     | 
| 
      
 27 
     | 
    
         
            +
                "types": "dist/index.d.ts",
         
     | 
| 
      
 28 
     | 
    
         
            +
                "files": [
         
     | 
| 
      
 29 
     | 
    
         
            +
                    "dist"
         
     | 
| 
      
 30 
     | 
    
         
            +
                ],
         
     | 
| 
      
 31 
     | 
    
         
            +
                "scripts": {
         
     | 
| 
      
 32 
     | 
    
         
            +
                    "build": "rollup --config ../../../scripts/rollup/rollup.config.js",
         
     | 
| 
      
 33 
     | 
    
         
            +
                    "dev": "rollup  --config ../../../scripts/rollup/rollup.config.js --watch --no-watch.clearScreen"
         
     | 
| 
      
 34 
     | 
    
         
            +
                },
         
     | 
| 
      
 35 
     | 
    
         
            +
                "nx": {
         
     | 
| 
      
 36 
     | 
    
         
            +
                    "targets": {
         
     | 
| 
      
 37 
     | 
    
         
            +
                        "build": {
         
     | 
| 
      
 38 
     | 
    
         
            +
                            "outputs": [
         
     | 
| 
      
 39 
     | 
    
         
            +
                                "{projectRoot}/dist"
         
     | 
| 
      
 40 
     | 
    
         
            +
                            ]
         
     | 
| 
      
 41 
     | 
    
         
            +
                        }
         
     | 
| 
      
 42 
     | 
    
         
            +
                    }
         
     | 
| 
      
 43 
     | 
    
         
            +
                }
         
     | 
| 
      
 44 
     | 
    
         
            +
            }
         
     |