From 18773db959e8674dad0b5ba99a962b604822362a Mon Sep 17 00:00:00 2001 From: 0kku <40242277+0kku@users.noreply.github.com> Date: Tue, 30 Mar 2021 03:51:49 +0300 Subject: [PATCH] chore: update readme --- README.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 7700f7b..3e8f6d2 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ A reactive UI library for JavaScript and TypeScript. Uses standard JS/TS syntax; 3. run `npm run compile` in root 4. start a dev server (ex: `npx http-server .`) and open `/index.html` to view demo -To get syntax-highlighting for HTML templates, you can use an extension called [`tobermory.es6-string-html`](https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html) on VSCode. Similar plugins are available for other editors too. Any extension that makes the editor treat template literals' tags as that block's file extension (ex. ``html`...`;`` is treated as an .html snippet) should also work. This only gives you syntax highlighting, though: slots are unfortunately not type checked; that would require a dedicated extension for this library, which does not yet exist. +To get syntax-highlighting for HTML templates, you can use an extension called [`tobermory.es6-string-html`](https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html) on VSCode. Similar plugins are available for other editors too. Any extension that makes the editor treat template literals' tags as that block's file extension (ex. ``xml/*html*/`…`;`` is treated as an .html snippet) should also work. This only gives you syntax highlighting, though: slots are unfortunately not type checked; that would require a dedicated extension for this library, which does not yet exist. ## Examples @@ -35,12 +35,12 @@ Live demo (with source maps): https://destiny.okku.dev/ You can convert anything to be reactive using the `reactive()` function. Their primitive value can be accessed via the `value` property. Setting `value` will cause the reactive item to dispatch events to all its listeners. -The `html` template tag will parse the content as HTML and returns an TempalteResult object containing a `DocumentFragment`. Any reactive items given to it via `${}` slots are bound both ways. This means that when the value of the reactive element is changed later, the relevant part of the HTML is automatically updated. If a reactive item is bound to something that may change from user input, the value of the reactive item will be automatically updated accordingly as user input comes in. +The `xml` template tag will parse the content as XHTML and returns an TemplateResult object containing a `DocumentFragment`. Any reactive items given to it via `${}` slots are bound both ways. This means that when the value of the reactive element is changed later, the relevant part of the DOM is automatically updated. If a reactive item is bound to something that may change from user input, the value of the reactive item will be automatically updated accordingly as user input comes in. In the below example, two reactive items `#who` and `#count` are defined. `#who` is set as the value of an input element: the value of `#who` is updated whenever the text field in question receives input. `#who` is also rendered as text below, so as the user types, the text below will update in real time. `#count` on the other hand is just a number which is incremented once a second; the seconds counter is automatically rerendered every time the count changes. ```js -import { Component, html, reactive, register } from "https://code.okku.dev/destiny-ui/0.4.1/dist/mod.js"; +import { Component, xml, reactive, register } from "https://code.okku.dev/destiny-ui/0.5.1/dist/mod.js"; register(class ExampleComponent extends Component { #who = reactive("visitor"); @@ -62,6 +62,7 @@ register(class ExampleComponent extends Component { `; }); ``` + [👉 View on codepen.io](https://codepen.io/okku/pen/MWKXMVK?editors=1010) The library figures out what the appropriate DOM operation for each slot is from the location of the slots and binds those as callbacks to each reactive item it receives. Non-reactive slots are not bound; they are simply stringified and inserted in. There is no vDOM and no diffing or reconciliation. When a reactive item is updated, the changes will automatically propagate correctly to each dependent reactive item in the chain. This means that performance of updates scales with the complexity of the update (how many things need to be rerendered because of the update) instead of the total complexity of the application (like you would have with vDOM based solutions). Parsed HTML templates are cached in a WeakMap, so rendering multiple elements with the same template is quick after the first render. @@ -69,7 +70,7 @@ The library figures out what the appropriate DOM operation for each slot is from You can also make arrays reactive. ReactiveArrays will behave generally akin to normal arrays, except that they will give you reactive properties instead of normal ones. You can manipulate the array like you would normal arrays and the DOM and other dependents will update with it; forget immutability! Here's an example of using a reactive array: ```js -import { xml, reactive } from "https://code.okku.dev/destiny-ui/0.4.1/dist/mod.js"; +import { xml, reactive } from "https://code.okku.dev/destiny-ui/0.5.1/dist/mod.js"; const thingsILike = reactive(["cats", "JavaScript", "sleep"]); @@ -88,6 +89,7 @@ setTimeout(() => { thingsILike[1] = "TypeScript"; }, 3e3); ``` + [👉 View on codepen.io](https://codepen.io/okku/pen/wvMXLpZ?editors=0010) ## Docs