@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
|
+
}
|