File tree Expand file tree Collapse file tree
Expand file tree Collapse file tree Original file line number Diff line number Diff line change @@ -48,3 +48,56 @@ document.body.innerHTML = (
4848 < / div>
4949);
5050```
51+
52+
53+ ### New: "Sortof" Components!
54+
55+ ` vhtml ` intentionally does not transform JSX to a Virtual DOM, instead serializing it directly to HTML.
56+ However, it's still possible to make use of basic Pure Functional Components as a sort of "template partial".
57+
58+ When ` vhtml ` is given a Function as the JSX tag name, it will invoke that function and pass it ` { children, ...props } ` .
59+ This is the same signature as a Pure Functional Component in react/preact, except ` children ` is an Array of already-serialized HTML strings.
60+
61+ This actually means it's possible to build compositional template modifiers with these simple Components, or even higher-order components.
62+
63+ Here's a more complex version of the previous example that uses a component to encapsulate iteration items:
64+
65+ ``` js
66+ let items = [' one' , ' two' ];
67+
68+ const Item = ({ item, index, children }) => (
69+ < li id= {index}>
70+ < h4> {item}< / h4>
71+ {children}
72+ < / li>
73+ );
74+
75+ console .log (
76+ < div class = " foo" >
77+ < h1> Hi! < / h1>
78+ < ul>
79+ { items .map ( (item , index ) => (
80+ < Item {... { item, index }}>
81+ This is item {item}!
82+ < / Item>
83+ )) }
84+ < / ul>
85+ < / div>
86+ );
87+ ```
88+
89+ The above outputs the following HTML:
90+
91+ ``` html
92+ <div class =" foo" >
93+ <h1 >Hi!</h1 >
94+ <ul >
95+ <li id =" 0" >
96+ <h4 >one</h4 >This is item one!
97+ </li >
98+ <li id =" 1" >
99+ <h4 >two</h4 >This is item two!
100+ </li >
101+ </ul >
102+ </div >
103+ ```
You can’t perform that action at this time.
0 commit comments