wrec 0.16.7 → 0.16.9
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 +24 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -10,8 +10,32 @@ Also, see my series of
|
|
|
10
10
|
<a href="https://www.youtube.com/playlist?list=PLGhglgQb4jVk3-_wc8srORlGalSRFMEpR"
|
|
11
11
|
target="_blank">YouTube videos</a> on web components and the wrec library.
|
|
12
12
|
|
|
13
|
+
Wrec components achieve reactivity through two maps,
|
|
14
|
+
`propToExprsMap` and `#exprToRefsMap`.
|
|
15
|
+
|
|
16
|
+
`propToExprsMap` maps component property names
|
|
17
|
+
to the expressions where they appear.
|
|
18
|
+
This is a static map because only one is needed per wrec component.
|
|
19
|
+
The same mapping is used for each instance of the component.
|
|
20
|
+
|
|
21
|
+
`#exprToRefsMap` maps expressions to where they are referenced.
|
|
22
|
+
References can include the text content of elements,
|
|
23
|
+
attribute values, and CSS property values.
|
|
24
|
+
Each wrec component instance has one of these maps
|
|
25
|
+
because it contains instance-specific references.
|
|
26
|
+
|
|
27
|
+
When the value of a component property changes,
|
|
28
|
+
wrec uses `propToExprsMap` to find the expressions that must be re-evaluated.
|
|
29
|
+
For each expression, a new value is computed.
|
|
30
|
+
Then wrec uses `#exprToRefsMap` to find all the references to that expression
|
|
31
|
+
and updates them.
|
|
32
|
+
|
|
13
33
|
## Getting Started
|
|
14
34
|
|
|
35
|
+
A wrec component is defined by a class that extends the `Wrec` class.
|
|
36
|
+
It typically defines the static properties `properties`, `css`, and `html`.
|
|
37
|
+
Only the `html` property is required.
|
|
38
|
+
|
|
15
39
|
Let's use wrec to implement a counter component.
|
|
16
40
|
Here are the steps:
|
|
17
41
|
|