wrec 0.1.1 → 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 +11 -11
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -121,12 +121,12 @@ when the element is clicked.
|
|
|
121
121
|
|
|
122
122
|
The case of the event name within the attribute name
|
|
123
123
|
does not matter because Wrec lowercases the name.
|
|
124
|
-
So the
|
|
124
|
+
So the attributes in the previous examples
|
|
125
125
|
can be replaced by `onClick="increment"`.
|
|
126
126
|
|
|
127
127
|
Wrec supports reactivity.
|
|
128
128
|
Attribute values and the text content of elements
|
|
129
|
-
can refer to web component properties with the syntax `this.
|
|
129
|
+
can refer to web component properties with the syntax `this.somePropertyName`.
|
|
130
130
|
The DOM of the web component is surgically updated.
|
|
131
131
|
Only attribute values and text content
|
|
132
132
|
that refer to modified web component properties are updated.
|
|
@@ -134,6 +134,13 @@ Attribute values and text content that contain references to properties
|
|
|
134
134
|
must be valid JavaScript expressions that are NOT surrounded by `${...}`.
|
|
135
135
|
For an example of this kind of web component, see `demo/hello-world.js`.
|
|
136
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
|
+
|
|
137
144
|
Wrec supports two-way data binding for HTML form elements.
|
|
138
145
|
|
|
139
146
|
- `input` and `select` elements can have a `value` attribute
|
|
@@ -149,19 +156,12 @@ For examples, see `demo/data-bind.js`.
|
|
|
149
156
|
|
|
150
157
|
Web components that extend `Wrec` can contribute values to
|
|
151
158
|
form submissions by adding the following line to their class definition.
|
|
152
|
-
Wrec looks for
|
|
159
|
+
Wrec looks for this automatically does the rest of the work.
|
|
153
160
|
|
|
154
161
|
```js
|
|
155
162
|
static formAssociated = true;
|
|
156
163
|
```
|
|
157
164
|
|
|
158
|
-
Wrec supports conditional and iterative generation of HTML.
|
|
159
|
-
See `demo/temperature-eval.js` for an example of a web component
|
|
160
|
-
that conditionally decides what to render based on an attribute value.
|
|
161
|
-
See `demo/radio-group.js` for an example of a web component
|
|
162
|
-
that iterates over values in a comma-delimited attribute value
|
|
163
|
-
to determine what to render.
|
|
164
|
-
|
|
165
165
|
## More Examples
|
|
166
166
|
|
|
167
167
|
Check out the web app in the `demo` directory.
|
|
@@ -174,5 +174,5 @@ The next two uses the Wrec library.
|
|
|
174
174
|
Compare the files `counter-vanilla.js` and `counter-wrec.js`
|
|
175
175
|
to see how much using Wrec simplifies the code.
|
|
176
176
|
|
|
177
|
-
The app renders several other web components that are built with wrec.
|
|
177
|
+
The `demo` app renders several other web components that are built with wrec.
|
|
178
178
|
Examine their code for more examples of wrec usage.
|