wrec 0.5.1 → 0.5.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 +18 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -104,13 +104,15 @@ Here are the steps:
|
|
|
104
104
|
|
|
105
105
|
1. Click the "-" and "+" buttons to verify that the component is working.
|
|
106
106
|
|
|
107
|
-
##
|
|
107
|
+
## Boolean Attributes
|
|
108
108
|
|
|
109
109
|
When the value of an attribute is a Boolean,
|
|
110
110
|
wrec adds the attribute to the element with no value
|
|
111
111
|
or removes the attribute from the element.
|
|
112
112
|
This is commonly used for attributes like `disabled`.
|
|
113
113
|
|
|
114
|
+
## Event Listeners
|
|
115
|
+
|
|
114
116
|
To wire event listeners,
|
|
115
117
|
Wrec looks for attributes whose name begins with "on".
|
|
116
118
|
It assumes the remainder of the attribute name is an event name.
|
|
@@ -130,6 +132,8 @@ does not matter because Wrec lowercases the name.
|
|
|
130
132
|
So the attributes in the previous examples
|
|
131
133
|
can be replaced by `onClick="increment"`.
|
|
132
134
|
|
|
135
|
+
## Reactivity
|
|
136
|
+
|
|
133
137
|
Wrec supports reactivity.
|
|
134
138
|
Attribute values and the text content of elements
|
|
135
139
|
can refer to web component properties with the syntax `this.somePropertyName`.
|
|
@@ -155,6 +159,8 @@ whose value is an array of month names:
|
|
|
155
159
|
<p>The month is ${DAYS[new Date().getDay()]}.</p>
|
|
156
160
|
```
|
|
157
161
|
|
|
162
|
+
## Conditional and Iterative HTML Generation
|
|
163
|
+
|
|
158
164
|
Wrec supports conditional and iterative generation of HTML.
|
|
159
165
|
See `examples/temperature-eval.js` for an example of a web component
|
|
160
166
|
that conditionally decides what to render based on an attribute value.
|
|
@@ -162,13 +168,7 @@ See `examples/radio-group.js` for an example of a web component
|
|
|
162
168
|
that iterates over values in a comma-delimited attribute value
|
|
163
169
|
to determine what to render.
|
|
164
170
|
|
|
165
|
-
Data
|
|
166
|
-
A Lit component cannot simply pass one of its properties to
|
|
167
|
-
a child Lit component and have the child can update the property.
|
|
168
|
-
The child must dispatch custom events that
|
|
169
|
-
the parent listens for so it can update its own state.
|
|
170
|
-
For an example of this, see
|
|
171
|
-
[wrec-compare](https://github.com/mvolkmann/lit-examples/blob/main/wrec-compare/binding-demo.ts).
|
|
171
|
+
## Data Binding
|
|
172
172
|
|
|
173
173
|
Wrec supports two-way data binding.
|
|
174
174
|
See the example component binding-demo
|
|
@@ -187,6 +187,16 @@ When the property is updated,
|
|
|
187
187
|
the displayed value of the form element is updated.
|
|
188
188
|
For examples, see `examples/data-bind.js`.
|
|
189
189
|
|
|
190
|
+
Data binding in Lit is not two-way like in wrec.
|
|
191
|
+
A Lit component cannot simply pass one of its properties to
|
|
192
|
+
a child Lit component and have the child can update the property.
|
|
193
|
+
The child must dispatch custom events that
|
|
194
|
+
the parent listens for so it can update its own state.
|
|
195
|
+
For an example of this, see
|
|
196
|
+
[wrec-compare](https://github.com/mvolkmann/lit-examples/blob/main/wrec-compare/binding-demo.ts).
|
|
197
|
+
|
|
198
|
+
## Form Submissions
|
|
199
|
+
|
|
190
200
|
Web components that extend `Wrec` can contribute values to
|
|
191
201
|
form submissions by adding the following line to their class definition.
|
|
192
202
|
Wrec looks for this automatically does the rest of the work.
|