@wc-bindable/solid 0.6.1 → 0.7.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 +72 -68
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,68 +1,72 @@
|
|
|
1
|
-
# @wc-bindable/solid
|
|
2
|
-
|
|
3
|
-
Solid adapter for the **wc-bindable** protocol.
|
|
4
|
-
|
|
5
|
-
## Install
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
npm install @wc-bindable/solid solid-js
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
## Usage
|
|
12
|
-
|
|
13
|
-
### `createWcBindable` — signal + directive (recommended)
|
|
14
|
-
|
|
15
|
-
```tsx
|
|
16
|
-
import { createWcBindable } from "@wc-bindable/solid";
|
|
17
|
-
|
|
18
|
-
function App() {
|
|
19
|
-
const [values, directive] = createWcBindable();
|
|
20
|
-
|
|
21
|
-
return (
|
|
22
|
-
<>
|
|
23
|
-
<my-input ref={directive} />
|
|
24
|
-
<p>Current value: {values().value as string}</p>
|
|
25
|
-
</>
|
|
26
|
-
);
|
|
27
|
-
}
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
### `use:wcBindable` — directive with callback
|
|
31
|
-
|
|
32
|
-
```tsx
|
|
33
|
-
import { wcBindable } from "@wc-bindable/solid";
|
|
34
|
-
|
|
35
|
-
function App() {
|
|
36
|
-
const [value, setValue] = createSignal("");
|
|
37
|
-
|
|
38
|
-
return (
|
|
39
|
-
<my-input use:wcBindable={(name, v) => {
|
|
40
|
-
if (name === "value") setValue(v as string);
|
|
41
|
-
}} />
|
|
42
|
-
);
|
|
43
|
-
}
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
## API
|
|
47
|
-
|
|
48
|
-
### `createWcBindable()`
|
|
49
|
-
|
|
50
|
-
**Returns:** `[values, directive]`
|
|
51
|
-
|
|
52
|
-
| Return | Type | Description |
|
|
53
|
-
|---|---|---|
|
|
54
|
-
| `values` | `Accessor<Record<string, unknown>>` | Signal with the latest property values |
|
|
55
|
-
| `directive` | `(el: HTMLElement) => void` | Pass to `ref` to bind the element |
|
|
56
|
-
|
|
57
|
-
### `wcBindable(el, accessor)`
|
|
58
|
-
|
|
59
|
-
Solid directive for use with `use:wcBindable`.
|
|
60
|
-
|
|
61
|
-
| Parameter | Type | Description |
|
|
62
|
-
|---|---|---|
|
|
63
|
-
| `el` | `HTMLElement` | The target element (provided by Solid) |
|
|
64
|
-
| `accessor` | `Accessor<(name, value) => void>` | Callback invoked on property changes |
|
|
65
|
-
|
|
66
|
-
##
|
|
67
|
-
|
|
68
|
-
|
|
1
|
+
# @wc-bindable/solid
|
|
2
|
+
|
|
3
|
+
Solid adapter for the **wc-bindable** protocol.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @wc-bindable/solid solid-js
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
### `createWcBindable` — signal + directive (recommended)
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import { createWcBindable } from "@wc-bindable/solid";
|
|
17
|
+
|
|
18
|
+
function App() {
|
|
19
|
+
const [values, directive] = createWcBindable();
|
|
20
|
+
|
|
21
|
+
return (
|
|
22
|
+
<>
|
|
23
|
+
<my-input ref={directive} />
|
|
24
|
+
<p>Current value: {values().value as string}</p>
|
|
25
|
+
</>
|
|
26
|
+
);
|
|
27
|
+
}
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
### `use:wcBindable` — directive with callback
|
|
31
|
+
|
|
32
|
+
```tsx
|
|
33
|
+
import { wcBindable } from "@wc-bindable/solid";
|
|
34
|
+
|
|
35
|
+
function App() {
|
|
36
|
+
const [value, setValue] = createSignal("");
|
|
37
|
+
|
|
38
|
+
return (
|
|
39
|
+
<my-input use:wcBindable={(name, v) => {
|
|
40
|
+
if (name === "value") setValue(v as string);
|
|
41
|
+
}} />
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## API
|
|
47
|
+
|
|
48
|
+
### `createWcBindable()`
|
|
49
|
+
|
|
50
|
+
**Returns:** `[values, directive]`
|
|
51
|
+
|
|
52
|
+
| Return | Type | Description |
|
|
53
|
+
|---|---|---|
|
|
54
|
+
| `values` | `Accessor<Record<string, unknown>>` | Signal with the latest property values |
|
|
55
|
+
| `directive` | `(el: HTMLElement) => void` | Pass to `ref` to bind the element |
|
|
56
|
+
|
|
57
|
+
### `wcBindable(el, accessor)`
|
|
58
|
+
|
|
59
|
+
Solid directive for use with `use:wcBindable`.
|
|
60
|
+
|
|
61
|
+
| Parameter | Type | Description |
|
|
62
|
+
|---|---|---|
|
|
63
|
+
| `el` | `HTMLElement` | The target element (provided by Solid) |
|
|
64
|
+
| `accessor` | `Accessor<(name, value) => void>` | Callback invoked on property changes |
|
|
65
|
+
|
|
66
|
+
## Specification
|
|
67
|
+
|
|
68
|
+
The protocol contract this adapter implements lives in [SPEC.md](../../SPEC.md); the optional input/command invocation surface and the remote wire format live in [SPEC-extensions.md](../../SPEC-extensions.md). Runnable conformance vectors are in [CONFORMANCE.md](../../CONFORMANCE.md).
|
|
69
|
+
|
|
70
|
+
## License
|
|
71
|
+
|
|
72
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wc-bindable/solid",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.1",
|
|
4
4
|
"description": "Solid adapter for wc-bindable protocol",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"dev": "tsc --watch"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@wc-bindable/core": "^0.
|
|
24
|
+
"@wc-bindable/core": "^0.7.1"
|
|
25
25
|
},
|
|
26
26
|
"peerDependencies": {
|
|
27
27
|
"solid-js": ">=1"
|