diff --git a/README.md b/README.md index 7f47597..1c41422 100644 --- a/README.md +++ b/README.md @@ -48,3 +48,56 @@ document.body.innerHTML = ( ); ``` + + +### New: "Sortof" Components! + +`vhtml` intentionally does not transform JSX to a Virtual DOM, instead serializing it directly to HTML. +However, it's still possible to make use of basic Pure Functional Components as a sort of "template partial". + +When `vhtml` is given a Function as the JSX tag name, it will invoke that function and pass it `{ children, ...props }`. +This is the same signature as a Pure Functional Component in react/preact, except `children` is an Array of already-serialized HTML strings. + +This actually means it's possible to build compositional template modifiers with these simple Components, or even higher-order components. + +Here's a more complex version of the previous example that uses a component to encapsulate iteration items: + +```js +let items = ['one', 'two']; + +const Item = ({ item, index, children }) => ( +
  • +

    {item}

    + {children} +
  • +); + +console.log( +
    +

    Hi!

    + +
    +); +``` + +The above outputs the following HTML: + +```html +
    +

    Hi!

    + +
    +```