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.
Files changed (2) hide show
  1. package/README.md +18 -8
  2. 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
- ## More Detail
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 binding in Lit is not two-way like in wrec.
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.
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "wrec",
3
3
  "description": "a small library that greatly simplifies building web components",
4
4
  "author": "R. Mark Volkmann",
5
- "version": "0.5.1",
5
+ "version": "0.5.2",
6
6
  "license": "MIT",
7
7
  "repository": {
8
8
  "type": "git",