wrec 0.4.3 → 0.4.4
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 +20 -18
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,17 +4,21 @@
|
|
|
4
4
|
|
|
5
5
|
Wrec is a small, zero dependency library that
|
|
6
6
|
greatly simplifies building web components.
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
Wrec has fewer features than Lit.
|
|
10
|
-
In exchange, Wrec:
|
|
7
|
+
Its main features are that it automates
|
|
8
|
+
wiring event listeners and implementing reactivity.
|
|
11
9
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
- doesn't require a build process
|
|
10
|
+
Wrec was inspired by [Lit](https://lit.dev).
|
|
11
|
+
It has the following advantages over Lit:
|
|
15
12
|
|
|
16
|
-
|
|
17
|
-
|
|
13
|
+
- Wrec is simpler ... just a single class to extend (Wrec).
|
|
14
|
+
- Wrec is slightly smaller ... 4K versus 5.8K minified.
|
|
15
|
+
- Wrec has a cleaner syntax ... no need to
|
|
16
|
+
surround JS expressions with `${...}`.
|
|
17
|
+
- Wrec provides automatic 2-way data binding ...
|
|
18
|
+
no need to dispatch custom events and listen for them.
|
|
19
|
+
- Wrec doesn't require a special syntax for Boolean attributes.
|
|
20
|
+
- Wrec enables specifying the content of a `textarea` element
|
|
21
|
+
with a JavaScript expressions in its text content.
|
|
18
22
|
|
|
19
23
|
## Getting Started
|
|
20
24
|
|
|
@@ -49,10 +53,8 @@ Here are the steps:
|
|
|
49
53
|
};
|
|
50
54
|
|
|
51
55
|
static css = css`
|
|
52
|
-
|
|
53
|
-
display:
|
|
54
|
-
align-items: center;
|
|
55
|
-
gap: 0.5rem;
|
|
56
|
+
:host {
|
|
57
|
+
display: block;
|
|
56
58
|
}
|
|
57
59
|
|
|
58
60
|
button {
|
|
@@ -66,7 +68,11 @@ Here are the steps:
|
|
|
66
68
|
|
|
67
69
|
static html = html`
|
|
68
70
|
<div>
|
|
69
|
-
<button
|
|
71
|
+
<button
|
|
72
|
+
onClick="this.count--"
|
|
73
|
+
type="button"
|
|
74
|
+
disabled="this.count === 0"
|
|
75
|
+
>
|
|
70
76
|
-
|
|
71
77
|
</button>
|
|
72
78
|
<span>this.count</span>
|
|
@@ -74,10 +80,6 @@ Here are the steps:
|
|
|
74
80
|
<span>(this.count < 10 ? "single" : "double") + " digit"</span>
|
|
75
81
|
</div>
|
|
76
82
|
`;
|
|
77
|
-
|
|
78
|
-
decrement() {
|
|
79
|
-
if (this.count > 0) this.count--;
|
|
80
|
-
}
|
|
81
83
|
}
|
|
82
84
|
|
|
83
85
|
MyCounter.register();
|