wrec 0.0.4 → 0.1.2
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 +116 -20
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -12,18 +12,99 @@ In exchange, Wrec:
|
|
|
12
12
|
- doesn't require any tooling
|
|
13
13
|
- doesn't require a build process
|
|
14
14
|
|
|
15
|
-
The main features of Wrec are that it
|
|
16
|
-
|
|
17
|
-
and automates implementing reactivity.
|
|
15
|
+
The main features of Wrec are that it automates
|
|
16
|
+
wiring event listeners and implementing reactivity.
|
|
18
17
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
18
|
+
## Getting Started
|
|
19
|
+
|
|
20
|
+
Let's use wrec to implement a counter component.
|
|
21
|
+
Here are the steps:
|
|
22
|
+
|
|
23
|
+
1. Create a new directory for the project and `cd` to it.
|
|
24
|
+
|
|
25
|
+
1. Create a `package.json` file entering `npm init`.
|
|
26
|
+
|
|
27
|
+
1. Install wrec by entering `npm i wrec`.
|
|
28
|
+
|
|
29
|
+
1. Install vite by entering `npm i -D vite`.
|
|
30
|
+
This is only used to run a local HTTP server.
|
|
31
|
+
|
|
32
|
+
1. Add the following script in `package.json`:
|
|
33
|
+
|
|
34
|
+
```json
|
|
35
|
+
"dev": "vite"
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
1. Create the file `my-counter.js` containing the following.
|
|
39
|
+
The comments `/*css*/` and `/*html*/` trigger the VS Code extension
|
|
40
|
+
"es6-string-html" to add syntax highlighting to the CSS and HTML strings.
|
|
41
|
+
|
|
42
|
+
```js
|
|
43
|
+
import Wrec from "wrec";
|
|
44
|
+
|
|
45
|
+
class MyCounter extends Wrec {
|
|
46
|
+
static properties = {
|
|
47
|
+
count: { type: Number, reflect: true },
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
css() {
|
|
51
|
+
return /*css*/ `
|
|
52
|
+
.counter {
|
|
53
|
+
display: flex;
|
|
54
|
+
align-items: center;
|
|
55
|
+
gap: 0.5rem;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
button {
|
|
59
|
+
background-color: lightgreen;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
button:disabled {
|
|
63
|
+
background-color: gray;
|
|
64
|
+
}
|
|
65
|
+
`;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
html() {
|
|
69
|
+
return /*html*/ `
|
|
70
|
+
<div>
|
|
71
|
+
<button onClick="decrement" type="button"
|
|
72
|
+
disabled="this.count === 0">-</button>
|
|
73
|
+
<span>this.count</span>
|
|
74
|
+
<button onClick="this.count++" type="button">+</button>
|
|
75
|
+
<span>(this.count < 10 ? "single" : "double") + " digit"</span>
|
|
76
|
+
</div>
|
|
77
|
+
`;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
decrement() {
|
|
81
|
+
if (this.count > 0) this.count--;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
MyCounter.register();
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
1. Create the file `index.html` containing the following.
|
|
89
|
+
|
|
90
|
+
```html
|
|
91
|
+
<html>
|
|
92
|
+
<head>
|
|
93
|
+
<script src="my-counter.js" type="module"></script>
|
|
94
|
+
</head>
|
|
95
|
+
<body>
|
|
96
|
+
<my-counter count="3"></my-counter>
|
|
97
|
+
</body>
|
|
98
|
+
</html>
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
1. Start a local server by entering `npm run dev`.
|
|
102
|
+
|
|
103
|
+
1. Browse localhost:5173.
|
|
104
|
+
|
|
105
|
+
1. Click the "-" and "+" buttons to verify that the component is working.
|
|
106
|
+
|
|
107
|
+
## More Detail
|
|
27
108
|
|
|
28
109
|
To wire event listeners,
|
|
29
110
|
Wrec looks for attributes whose name begins with "on".
|
|
@@ -40,12 +121,12 @@ when the element is clicked.
|
|
|
40
121
|
|
|
41
122
|
The case of the event name within the attribute name
|
|
42
123
|
does not matter because Wrec lowercases the name.
|
|
43
|
-
So the
|
|
124
|
+
So the attributes in the previous examples
|
|
44
125
|
can be replaced by `onClick="increment"`.
|
|
45
126
|
|
|
46
127
|
Wrec supports reactivity.
|
|
47
128
|
Attribute values and the text content of elements
|
|
48
|
-
can refer to web component properties with the syntax `this.
|
|
129
|
+
can refer to web component properties with the syntax `this.somePropertyName`.
|
|
49
130
|
The DOM of the web component is surgically updated.
|
|
50
131
|
Only attribute values and text content
|
|
51
132
|
that refer to modified web component properties are updated.
|
|
@@ -53,6 +134,13 @@ Attribute values and text content that contain references to properties
|
|
|
53
134
|
must be valid JavaScript expressions that are NOT surrounded by `${...}`.
|
|
54
135
|
For an example of this kind of web component, see `demo/hello-world.js`.
|
|
55
136
|
|
|
137
|
+
Wrec supports conditional and iterative generation of HTML.
|
|
138
|
+
See `demo/temperature-eval.js` for an example of a web component
|
|
139
|
+
that conditionally decides what to render based on an attribute value.
|
|
140
|
+
See `demo/radio-group.js` for an example of a web component
|
|
141
|
+
that iterates over values in a comma-delimited attribute value
|
|
142
|
+
to determine what to render.
|
|
143
|
+
|
|
56
144
|
Wrec supports two-way data binding for HTML form elements.
|
|
57
145
|
|
|
58
146
|
- `input` and `select` elements can have a `value` attribute
|
|
@@ -68,15 +156,23 @@ For examples, see `demo/data-bind.js`.
|
|
|
68
156
|
|
|
69
157
|
Web components that extend `Wrec` can contribute values to
|
|
70
158
|
form submissions by adding the following line to their class definition.
|
|
71
|
-
Wrec looks for
|
|
159
|
+
Wrec looks for this automatically does the rest of the work.
|
|
72
160
|
|
|
73
161
|
```js
|
|
74
162
|
static formAssociated = true;
|
|
75
163
|
```
|
|
76
164
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
165
|
+
## More Examples
|
|
166
|
+
|
|
167
|
+
Check out the web app in the `demo` directory.
|
|
168
|
+
To run it, cd to that directory, enter `npm install`,
|
|
169
|
+
enter `npm run dev`, and browse localhost:5173.
|
|
170
|
+
|
|
171
|
+
This app begins by rendering "counter" components.
|
|
172
|
+
The first is implemented as a vanilla web component.
|
|
173
|
+
The next two uses the Wrec library.
|
|
174
|
+
Compare the files `counter-vanilla.js` and `counter-wrec.js`
|
|
175
|
+
to see how much using Wrec simplifies the code.
|
|
176
|
+
|
|
177
|
+
The `demo` app renders several other web components that are built with wrec.
|
|
178
|
+
Examine their code for more examples of wrec usage.
|