wrec 0.40.3 → 0.42.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 +9 -15
- package/dist/{wrec-DHGadgxK.js → wrec-ClOIAA9J.js} +291 -222
- package/dist/wrec-ssr.es.js +7 -7
- package/dist/wrec.es.js +1 -1
- package/package.json +39 -36
- package/scripts/ast-utils.js +20 -28
- package/scripts/declare.js +41 -62
- package/scripts/lint.js +671 -927
- package/scripts/scaffold.js +11 -13
- package/scripts/used-by.js +76 -119
- package/dist/wrec-ssr.d.ts +0 -96
- package/dist/wrec.d.ts +0 -96
package/README.md
CHANGED
|
@@ -72,11 +72,11 @@ Here are the steps:
|
|
|
72
72
|
"Prettier" to add syntax highlighting and format the CSS and HTML strings.
|
|
73
73
|
|
|
74
74
|
```js
|
|
75
|
-
import {css, html, Wrec} from
|
|
75
|
+
import { css, html, Wrec } from "wrec";
|
|
76
76
|
|
|
77
77
|
class MyCounter extends Wrec {
|
|
78
78
|
static properties = {
|
|
79
|
-
count: {type: Number}
|
|
79
|
+
count: { type: Number },
|
|
80
80
|
};
|
|
81
81
|
|
|
82
82
|
static css = css`
|
|
@@ -95,13 +95,7 @@ Here are the steps:
|
|
|
95
95
|
|
|
96
96
|
static html = html`
|
|
97
97
|
<div>
|
|
98
|
-
<button
|
|
99
|
-
onClick="this.count--"
|
|
100
|
-
type="button"
|
|
101
|
-
disabled="this.count === 0"
|
|
102
|
-
>
|
|
103
|
-
-
|
|
104
|
-
</button>
|
|
98
|
+
<button onClick="this.count--" type="button" disabled="this.count === 0">-</button>
|
|
105
99
|
<span>this.count</span>
|
|
106
100
|
<button onClick="this.count++" type="button">+</button>
|
|
107
101
|
<span>(this.count < 10 ? "single" : "multi") + "-digit"</span>
|
|
@@ -109,7 +103,7 @@ Here are the steps:
|
|
|
109
103
|
`;
|
|
110
104
|
}
|
|
111
105
|
|
|
112
|
-
MyCounter.define(
|
|
106
|
+
MyCounter.define("my-counter");
|
|
113
107
|
```
|
|
114
108
|
|
|
115
109
|
Property definitions can also constrain string values to an allowed set:
|
|
@@ -119,9 +113,9 @@ class TrafficLight extends Wrec {
|
|
|
119
113
|
static properties = {
|
|
120
114
|
color: {
|
|
121
115
|
type: String,
|
|
122
|
-
values: [
|
|
123
|
-
value:
|
|
124
|
-
}
|
|
116
|
+
values: ["red", "yellow", "green"],
|
|
117
|
+
value: "red",
|
|
118
|
+
},
|
|
125
119
|
};
|
|
126
120
|
}
|
|
127
121
|
```
|
|
@@ -245,10 +239,10 @@ to share state across multiple wrec components.
|
|
|
245
239
|
in the DevTools console as follows:
|
|
246
240
|
|
|
247
241
|
```js
|
|
248
|
-
state = WrecState.get(
|
|
242
|
+
state = WrecState.get("demo");
|
|
249
243
|
state; // to examine the entire object
|
|
250
244
|
state.name; // to see current value of "name" property
|
|
251
|
-
state.name =
|
|
245
|
+
state.name = "Earth"; // to modify "name" property
|
|
252
246
|
```
|
|
253
247
|
|
|
254
248
|
`traffic-light.html` demonstrates a property with an enumerated value.
|