@w-lfpup/superaction 0.1.0 → 0.1.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/.github/workflows/{build.yml → builds.yml} +2 -2
- package/README.md +7 -5
- package/dist/mod.js +4 -2
- package/package.json +2 -2
- package/src/mod.ts +4 -2
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
name:
|
|
1
|
+
name: Builds
|
|
2
2
|
|
|
3
3
|
on:
|
|
4
4
|
push:
|
|
@@ -10,7 +10,7 @@ jobs:
|
|
|
10
10
|
build_and_test:
|
|
11
11
|
runs-on: ubuntu-latest
|
|
12
12
|
steps:
|
|
13
|
-
- uses: actions/checkout@
|
|
13
|
+
- uses: actions/checkout@v6
|
|
14
14
|
- uses: actions/setup-node@v4
|
|
15
15
|
- name: Install
|
|
16
16
|
run: npm ci
|
package/README.md
CHANGED
|
@@ -2,10 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
A hypertext extension to dispatch meaningful actions from the DOM.
|
|
4
4
|
|
|
5
|
+
[](https://github.com/w-lfpup/superaction-js/actions/workflows/builds.yml)
|
|
6
|
+
|
|
5
7
|
## Install
|
|
6
8
|
|
|
7
9
|
Install via npm.
|
|
8
|
-
|
|
10
|
+
,
|
|
9
11
|
```sh
|
|
10
12
|
npm install --save-dev @w-lfpup/superaction
|
|
11
13
|
```
|
|
@@ -18,12 +20,10 @@ npm install --save-dev https://github.com/w-lfpup/superaction-js
|
|
|
18
20
|
|
|
19
21
|
## Setup
|
|
20
22
|
|
|
21
|
-
Create a `SuperAction` instance dispatch action events.
|
|
23
|
+
Create a `SuperAction` instance to dispatch action events.
|
|
22
24
|
|
|
23
25
|
The `SuperAction` instance below listens for `click` events. Event listeners are immediately `connected` to the `document`.
|
|
24
26
|
|
|
25
|
-
This enables the DOM to declaratively send meaningful messages to Javascript-land.
|
|
26
|
-
|
|
27
27
|
```js
|
|
28
28
|
import { SuperAction } from "superaction";
|
|
29
29
|
|
|
@@ -34,6 +34,8 @@ const _superAction = new SuperAction({
|
|
|
34
34
|
});
|
|
35
35
|
```
|
|
36
36
|
|
|
37
|
+
Now the DOM can declarativey dispatch meaningful messages from HTML to Javascript-land.
|
|
38
|
+
|
|
37
39
|
## Declare
|
|
38
40
|
|
|
39
41
|
Add an attribute with the pattern `event:=action`. The `#action` event will dispatch from the `host` element
|
|
@@ -87,7 +89,7 @@ Here are some examples to demonstrate how easy it is to work with `SuperAction-j
|
|
|
87
89
|
|
|
88
90
|
`Superaction` is inspired by the [elm](https://elm-lang.org) project.
|
|
89
91
|
|
|
90
|
-
It
|
|
92
|
+
It skips several layers of indirection between UI and app state and turns HTML into a declarative message generator.
|
|
91
93
|
|
|
92
94
|
`Superaction` is a straightforward way to work with vanilla web technologies and escape the JSX rabbithole.
|
|
93
95
|
|
package/dist/mod.js
CHANGED
|
@@ -7,13 +7,12 @@ export class ActionEvent extends Event {
|
|
|
7
7
|
}
|
|
8
8
|
export class SuperAction {
|
|
9
9
|
#connected = false;
|
|
10
|
-
#boundDispatch;
|
|
10
|
+
#boundDispatch = this.#dispatch.bind(this);
|
|
11
11
|
#params;
|
|
12
12
|
#target;
|
|
13
13
|
constructor(params) {
|
|
14
14
|
this.#params = { ...params };
|
|
15
15
|
this.#target = params.target ?? params.host;
|
|
16
|
-
this.#boundDispatch = this.#dispatch.bind(this);
|
|
17
16
|
if (this.#params.connected)
|
|
18
17
|
this.connect();
|
|
19
18
|
}
|
|
@@ -27,6 +26,9 @@ export class SuperAction {
|
|
|
27
26
|
}
|
|
28
27
|
}
|
|
29
28
|
disconnect() {
|
|
29
|
+
if (!this.#connected)
|
|
30
|
+
return;
|
|
31
|
+
this.#connected = false;
|
|
30
32
|
let { host, eventNames } = this.#params;
|
|
31
33
|
for (let name of eventNames) {
|
|
32
34
|
host.removeEventListener(name, this.#boundDispatch);
|
package/package.json
CHANGED
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
"main": "dist/mod.js",
|
|
5
5
|
"description": "A hypertext extension to dispatch meaningful actions from the DOM",
|
|
6
6
|
"license": "BSD-3-Clause",
|
|
7
|
-
"version": "0.1.
|
|
7
|
+
"version": "0.1.1",
|
|
8
8
|
"scripts": {
|
|
9
|
-
"prepare": "npm run build
|
|
9
|
+
"prepare": "npm run build",
|
|
10
10
|
"build": "npx tsc --project ./src",
|
|
11
11
|
"build:examples": "npx tsc --project ./examples",
|
|
12
12
|
"format": "npx prettier ./ --write"
|
package/src/mod.ts
CHANGED
|
@@ -31,15 +31,14 @@ export class ActionEvent extends Event implements ActionEventInterface {
|
|
|
31
31
|
|
|
32
32
|
export class SuperAction implements SuperActionInterface {
|
|
33
33
|
#connected = false;
|
|
34
|
+
#boundDispatch = this.#dispatch.bind(this);
|
|
34
35
|
|
|
35
|
-
#boundDispatch: EventListenerOrEventListenerObject;
|
|
36
36
|
#params: SuperActionParamsInterface;
|
|
37
37
|
#target: EventTarget;
|
|
38
38
|
|
|
39
39
|
constructor(params: SuperActionParamsInterface) {
|
|
40
40
|
this.#params = { ...params };
|
|
41
41
|
this.#target = params.target ?? params.host;
|
|
42
|
-
this.#boundDispatch = this.#dispatch.bind(this);
|
|
43
42
|
|
|
44
43
|
if (this.#params.connected) this.connect();
|
|
45
44
|
}
|
|
@@ -55,6 +54,9 @@ export class SuperAction implements SuperActionInterface {
|
|
|
55
54
|
}
|
|
56
55
|
|
|
57
56
|
disconnect() {
|
|
57
|
+
if (!this.#connected) return;
|
|
58
|
+
this.#connected = false;
|
|
59
|
+
|
|
58
60
|
let { host, eventNames } = this.#params;
|
|
59
61
|
for (let name of eventNames) {
|
|
60
62
|
host.removeEventListener(name, this.#boundDispatch);
|