Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@thi.ng/hdom
Advanced tools
@thi.ng/hdom - npm Package Compare versions
Comparing version 5.0.0 to 5.0.1
41
api.d.ts
| import { IObjectOf } from "@thi.ng/api/api"; | ||
| export interface ILifecycle { | ||
| /** | ||
| * Component init method. Called with the actual DOM element, | ||
| * hdom user context and any other args when the component is | ||
| * first used, but **after** `render()` has been called once already. | ||
| */ | ||
| init?(el: Element, ctx: any, ...args: any[]): any; | ||
| /** | ||
| * Returns the hdom tree of this component. | ||
| * Note: Always will be called first (prior to `init`/`release`) | ||
| * to obtain the actual component definition used for diffing. | ||
| * Therefore might have to include checks if any local state | ||
| * has already been initialized via `init`. This is the only | ||
| * mandatory method which MUST be implemented. | ||
| * | ||
| * `render` is executed before `init` because `normalizeTree()` | ||
| * must obtain the component's hdom tree first before it can | ||
| * determine if an `init` is necessary. `init` itself will be | ||
| * called from `diffTree`, `createDOM` or `hydrateDOM()` in a later | ||
| * phase of processing. | ||
| * | ||
| * `render` should ALWAYS return an array or another function, | ||
| * else the component's `init` or `release` fns will NOT be able | ||
| * to be called later. E.g. If the return value of `render` | ||
| * evaluates as a string or number, the return value should be | ||
| * wrapped as `["span", "foo"]`. If no `init` or `release` are | ||
| * used, this requirement is relaxed. | ||
| */ | ||
| render(ctx: any, ...args: any[]): any; | ||
| /** | ||
| * Called when the underlying DOM of this component is removed | ||
| * (or replaced). Intended for cleanup tasks. | ||
| */ | ||
| release?(ctx: any, ...args: any[]): any; | ||
@@ -12,3 +42,3 @@ } | ||
| * be computed and the `replaceChild()` operation will be called in | ||
| * the currently active hdom target. | ||
| * the currently active hdom target implementation. | ||
| */ | ||
@@ -23,7 +53,12 @@ __diff?: boolean; | ||
| /** | ||
| * HDOM behavior control attribute. | ||
| * HDOM behavior control attribute. If `false`, the current | ||
| * element's children will not be normalized. Use this when you're | ||
| * sure that all children are already in canonical format (incl. | ||
| * `key` attributes). See `normalizeTree()` for details. | ||
| */ | ||
| __normalize?: boolean; | ||
| /** | ||
| * HDOM behavior control attribute. | ||
| * HDOM behavior control attribute. If `false`, hdom will not | ||
| * attempt to call `release()` lifecycle methods on this element or | ||
| * any of its children. | ||
| */ | ||
@@ -30,0 +65,0 @@ __release?: boolean; |
@@ -6,37 +6,47 @@ # Change Log | ||
| <a name="5.0.0"></a> | ||
| # [5.0.0](https://github.com/thi-ng/umbrella/compare/@thi.ng/hdom@5.0.0-alpha.1...@thi.ng/hdom@5.0.0) (2018-09-22) | ||
| <a name="5.0.1"></a> | ||
| ## [5.0.1](https://github.com/thi-ng/umbrella/compare/@thi.ng/hdom@5.0.0...@thi.ng/hdom@5.0.1) (2018-09-23) | ||
| **Note:** Version bump only for package @thi.ng/hdom | ||
| ### Features | ||
| * **hdom:** add renderOnce() ([5ef9cf0](https://github.com/thi-ng/umbrella/commit/5ef9cf0)) | ||
| ### Performance Improvements | ||
| * **hdom:** minor updates ([de17db8](https://github.com/thi-ng/umbrella/commit/de17db8)) | ||
| <a name="5.0.0"></a> | ||
| # [5.0.0](https://github.com/thi-ng/umbrella/compare/525d90d5...@thi.ng/hdom@5.0.0) (2018-09-22) | ||
| ### Features | ||
| * **hdom:** generalize diffElement() ([#4](https://github.com/thi-ng/umbrella/issues/4)) ([525d90d](https://github.com/thi-ng/umbrella/commit/525d90d)) | ||
| * **hdom:** update normalizeTree, add to HDOMImplementation ([59bb19c](https://github.com/thi-ng/umbrella/commit/59bb19c)) | ||
| * **hdom:** reorg & extend HDOMImplementation ([1ac245f](https://github.com/thi-ng/umbrella/commit/1ac245f)) | ||
| * **hdom:** add `.toHiccup()` interface support ([54ba0ce](https://github.com/thi-ng/umbrella/commit/54ba0ce)) | ||
| * **hdom:** add renderOnce() ([5ef9cf0](https://github.com/thi-ng/umbrella/commit/5ef9cf0)) | ||
| ### Bug fixes | ||
| <a name="5.0.0-alpha.1"></a> | ||
| # [5.0.0-alpha.1](https://github.com/thi-ng/umbrella/compare/@thi.ng/hdom@5.0.0-alpha.0...@thi.ng/hdom@5.0.0-alpha.1) (2018-09-17) | ||
| * **hdom:** minor fix (hydrateDOM) ([e4f780c](https://github.com/thi-ng/umbrella/commit/e4f780c)) | ||
| * **hdom:** exclude hdom control attribs in setAttrib() ([0592063](https://github.com/thi-ng/umbrella/commit/0592063)) | ||
| * **hdom:** delegate diffTree() to branch impl ([6c33901](https://github.com/thi-ng/umbrella/commit/6c33901)) | ||
| **Note:** Version bump only for package @thi.ng/hdom | ||
| ### Performance Improvements | ||
| * **hdom:** add opt `__release` attrib to disable releaseDeep() ([2e3fb66](https://github.com/thi-ng/umbrella/commit/2e3fb66)) | ||
| * **hdom:** update diffTree(), inline node type checks ([382c45c](https://github.com/thi-ng/umbrella/commit/382c45c)) | ||
| * **hdom:** minor updates ([de17db8](https://github.com/thi-ng/umbrella/commit/de17db8)) | ||
| ### BREAKING CHANGES | ||
| * **hdom:** new names & call signatures for: | ||
| <a name="5.0.0-alpha.0"></a> | ||
| # [5.0.0-alpha.0](https://github.com/thi-ng/umbrella/compare/@thi.ng/hdom@5.0.0-alpha...@thi.ng/hdom@5.0.0-alpha.0) (2018-09-17) | ||
| - normalizeTree | ||
| - diffElement => diffTree | ||
| - createDOM | ||
| - hydrateDOM | ||
| - replaceChild | ||
| **Note:** Version bump only for package @thi.ng/hdom | ||
| <a name="4.0.5"></a> | ||
@@ -43,0 +53,0 @@ ## [4.0.5](https://github.com/thi-ng/umbrella/compare/@thi.ng/hdom@4.0.4...@thi.ng/hdom@4.0.5) (2018-09-10) |
@@ -29,22 +29,31 @@ import { HDOMOpts } from "./api"; | ||
| * Calling this function is a prerequisite before passing a component | ||
| * tree to `diffTree`. Recursively expands given hiccup component | ||
| * tree into its canonical form by: | ||
| * tree to `diffTree()`. Recursively expands given hiccup component tree | ||
| * into its canonical form: | ||
| * | ||
| * - resolving Emmet-style tags (e.g. from `div#id.foo.bar`) | ||
| * - evaluating embedded functions and replacing them with their result | ||
| * - calling `render` life cycle method on component objects and using | ||
| * ``` | ||
| * ["tag", { attribs }, ...body] | ||
| * ``` | ||
| * | ||
| * - resolves Emmet-style tags (e.g. from `div#id.foo.bar`) | ||
| * - adds missing attribute objects (and `key` attribs) | ||
| * - merges Emmet-style classes with additional `class` attrib values | ||
| * (if given), e.g. `["div.foo", { class: "bar" }]` => `["div", { | ||
| * class: "bar foo" }]` | ||
| * - evaluates embedded functions and replaces them with their result | ||
| * - calls the `render` life cycle method on component objects and uses | ||
| * result | ||
| * - consuming iterables and normalizing results | ||
| * - calling `deref()` on elements implementing `IDeref` interface and | ||
| * using returned result | ||
| * - calling `.toString()` on any other non-component value `x` and by | ||
| * default wrapping it in `["span", x]`. The only exceptions to this | ||
| * are: `option`, `textarea` and SVG `text` elements, for which spans | ||
| * are always skipped. | ||
| * - consumes iterables and normalizes their individual values | ||
| * - calls `deref()` on elements implementing the `IDeref` interface and | ||
| * uses returned results | ||
| * - calls `toHiccup()` on elements implementing the `IToHiccup` | ||
| * interface and uses returned results | ||
| * - calls `.toString()` on any other non-component value and by default | ||
| * wraps it in `["span", x]`. The only exceptions to this are: | ||
| * `button`, `option`, `textarea` and SVG `text` elements, for which | ||
| * spans are never created. | ||
| * | ||
| * Additionally, unless `keys` is set to false, an unique `key` | ||
| * attribute is created for each node in the tree. This attribute is | ||
| * used by `diffTree` to determine if a changed node can be patched | ||
| * or will need to be replaced/removed. The `key` values are defined by | ||
| * the `path` array arg. | ||
| * Additionally, unless the `keys` option is explicitly set to false, an | ||
| * unique `key` attribute is created for each node in the tree. This | ||
| * attribute is used by `diffElement` to determine if a changed node can | ||
| * be patched or will need to be moved, replaced or removed. | ||
| * | ||
@@ -58,5 +67,2 @@ * In terms of life cycle methods: `render` should ALWAYS return an | ||
| * | ||
| * For normal usage only the first 2 args should be specified and the | ||
| * rest kept at their defaults. | ||
| * | ||
| * See `normalizeElement` for further details about canonical form. | ||
@@ -63,0 +69,0 @@ * |
@@ -63,22 +63,31 @@ "use strict"; | ||
| * Calling this function is a prerequisite before passing a component | ||
| * tree to `diffTree`. Recursively expands given hiccup component | ||
| * tree into its canonical form by: | ||
| * tree to `diffTree()`. Recursively expands given hiccup component tree | ||
| * into its canonical form: | ||
| * | ||
| * - resolving Emmet-style tags (e.g. from `div#id.foo.bar`) | ||
| * - evaluating embedded functions and replacing them with their result | ||
| * - calling `render` life cycle method on component objects and using | ||
| * ``` | ||
| * ["tag", { attribs }, ...body] | ||
| * ``` | ||
| * | ||
| * - resolves Emmet-style tags (e.g. from `div#id.foo.bar`) | ||
| * - adds missing attribute objects (and `key` attribs) | ||
| * - merges Emmet-style classes with additional `class` attrib values | ||
| * (if given), e.g. `["div.foo", { class: "bar" }]` => `["div", { | ||
| * class: "bar foo" }]` | ||
| * - evaluates embedded functions and replaces them with their result | ||
| * - calls the `render` life cycle method on component objects and uses | ||
| * result | ||
| * - consuming iterables and normalizing results | ||
| * - calling `deref()` on elements implementing `IDeref` interface and | ||
| * using returned result | ||
| * - calling `.toString()` on any other non-component value `x` and by | ||
| * default wrapping it in `["span", x]`. The only exceptions to this | ||
| * are: `option`, `textarea` and SVG `text` elements, for which spans | ||
| * are always skipped. | ||
| * - consumes iterables and normalizes their individual values | ||
| * - calls `deref()` on elements implementing the `IDeref` interface and | ||
| * uses returned results | ||
| * - calls `toHiccup()` on elements implementing the `IToHiccup` | ||
| * interface and uses returned results | ||
| * - calls `.toString()` on any other non-component value and by default | ||
| * wraps it in `["span", x]`. The only exceptions to this are: | ||
| * `button`, `option`, `textarea` and SVG `text` elements, for which | ||
| * spans are never created. | ||
| * | ||
| * Additionally, unless `keys` is set to false, an unique `key` | ||
| * attribute is created for each node in the tree. This attribute is | ||
| * used by `diffTree` to determine if a changed node can be patched | ||
| * or will need to be replaced/removed. The `key` values are defined by | ||
| * the `path` array arg. | ||
| * Additionally, unless the `keys` option is explicitly set to false, an | ||
| * unique `key` attribute is created for each node in the tree. This | ||
| * attribute is used by `diffElement` to determine if a changed node can | ||
| * be patched or will need to be moved, replaced or removed. | ||
| * | ||
@@ -92,5 +101,2 @@ * In terms of life cycle methods: `render` should ALWAYS return an | ||
| * | ||
| * For normal usage only the first 2 args should be specified and the | ||
| * rest kept at their defaults. | ||
| * | ||
| * See `normalizeElement` for further details about canonical form. | ||
@@ -97,0 +103,0 @@ * |
| { | ||
| "name": "@thi.ng/hdom", | ||
| "version": "5.0.0", | ||
| "version": "5.0.1", | ||
| "description": "Lightweight vanilla ES6 UI component trees with customizable branch-local behaviors", | ||
@@ -36,3 +36,3 @@ "main": "./index.js", | ||
| "@thi.ng/equiv": "^0.1.10", | ||
| "@thi.ng/hiccup": "^2.3.0" | ||
| "@thi.ng/hiccup": "^2.4.0" | ||
| }, | ||
@@ -54,3 +54,3 @@ "keywords": [ | ||
| }, | ||
| "gitHead": "02548fd2518eb97eb11a9834c4e0a8e6ab5499a7" | ||
| "gitHead": "edf685568e9e9e495093bd9b6bbc425e0881bf73" | ||
| } |
184
README.md
@@ -40,2 +40,3 @@ # @thi.ng/hdom | ||
| - [start()](#start) | ||
| - [renderOnce()](#renderonce) | ||
| - [HDOMOpts config options](#hdomopts-config-options) | ||
@@ -56,4 +57,4 @@ - [normalizeTree()](#normalizetree) | ||
| Extensible, abstract, hierarchical UI component tree definition syntax & | ||
| differential tree updates using only vanilla JS data structures (arrays, | ||
| Lightweight UI component tree definition syntax, DOM creation and | ||
| differential updates using only vanilla JS data structures (arrays, | ||
| iterators, closures, attribute objects or objects with life cycle | ||
@@ -71,3 +72,3 @@ functions, closures). By default targets the browser's native DOM, but | ||
| - Clean, functional component composition & reuse | ||
| - No source pre-processing, pre-compilation or string interpolation | ||
| - No source pre-processing, transpiling or string interpolation | ||
| - Less verbose than HTML / JSX, resulting in smaller file sizes | ||
@@ -80,5 +81,5 @@ - Supports arbitrary elements (incl. SVG), attributes and events in | ||
| components with life cycle methods on the client side | ||
| - Static components (or component templates) can be distributed as JSON | ||
| - Optional user context injection (an arbitrary object passed to all | ||
| component functions embedded in the tree) | ||
| - Can use JSON for static components (or component templates) | ||
| - Optional user context injection (an arbitrary object/value passed to | ||
| all component functions embedded in the tree) | ||
| - Default implementation supports CSS conversion from JS objects for | ||
@@ -103,3 +104,3 @@ `style` attribs (also see: | ||
| // the first arg is an auto-injected context object | ||
| // (not used here, details further below) | ||
| // (not used here, see dedicated section in readme further below) | ||
| const greeter = (_, name) => ["h1.title", "hello ", name]; | ||
@@ -123,8 +124,8 @@ | ||
| // alternatively create DOM tree only once | ||
| hdom.createDOM({}, document.body, hdom.normalizeTree(app())); | ||
| hdom.renderOnce(app(), { root: document.body }); | ||
| ``` | ||
| Alternatively, use the same component function for browser or server | ||
| side HTML serialization (Note: does not emit attributes w/ functions as | ||
| values, e.g. a button's `onclick` attrib). | ||
| Alternatively, use the same component for browser or server side HTML | ||
| serialization (Note: does not emit attributes w/ functions as values, | ||
| e.g. a button's `onclick` attrib). | ||
@@ -196,2 +197,5 @@ ```ts | ||
| [Live demo](http://demo.thi.ng/umbrella/interceptor-basics2/) | | ||
| [Source code](https://github.com/thi-ng/umbrella/tree/master/examples/interceptor-basics2) (extended version) | ||
| ```ts | ||
@@ -247,4 +251,4 @@ import { Atom } from "@thi.ng/atom"; | ||
| null, | ||
| // hdom options incl. | ||
| // arbitrary user context object passed to all components | ||
| // hdom options, here including an arbitrary user context object | ||
| // passed to all components | ||
| { ctx: { state, bus } } | ||
@@ -261,6 +265,7 @@ ); | ||
| [@thi.ng/hdom-canvas](https://github.com/thi-ng/umbrella/tree/master/packages/hdom-canvas) | ||
| component to support the inclusion of (virtual, non-DOM targets) shape | ||
| component to support the inclusion of (virtual / non-DOM targets) shape | ||
| elements as part of the normal HTML component tree. A description of the | ||
| actual mechanism can be found further below and in the hdom-canvas | ||
| readme. | ||
| readme. In short, all canvas child elements will be translated into | ||
| canvas API draw calls. | ||
@@ -301,17 +306,20 @@ Related examples: | ||
| The usual hdom update process is based on the creation of an up-to-date | ||
| component tree, which is first normalized (expanded into a canonical | ||
| format) and the used to compute minimal edit set of the recursive | ||
| difference to previous DOM tree. | ||
| The usual hdom update process is as follows: First the your app creates | ||
| an up-to-date UI component tree, which is then passed to hdom, will be | ||
| normalized (expanded into a canonical format) and then used to compute | ||
| minimal edit set of the recursive difference to previous DOM tree. | ||
| **Important**: | ||
| - hdom uses a RAF render loop only by default, but is in absolutely | ||
| no way tied to this | ||
| - hdom used the browser DOM only by default, but supports custom target | ||
| implementations, which can be defined on branch-local basis in the | ||
| - hdom uses a RAF render loop only by default, but is in absolutely no | ||
| way tied to this (see | ||
| [@thi.ng/transducers-hdom](https://github.com/thi-ng/umbrella/tree/master/packages/transducers-hdom) | ||
| for an alternative) | ||
| - hdom uses the browser DOM only by default, but supports custom target | ||
| implementations, which can modify other target data structures. These | ||
| custom implementations can be triggered on branch-local basis in the | ||
| tree | ||
| - hdom NEVER tracks the real DOM, only its own trees (previous & current) | ||
| - hdom can be used **without** diffing, i.e. for compact, one-off DOM | ||
| creation | ||
| creation (see [`renderOnce()`](#renderonce)) | ||
@@ -323,5 +331,5 @@  | ||
| [Reagent](http://reagent-project.github.io/) projects, which themselves | ||
| were influenced on [prior art by Phil | ||
| were influenced by [prior art by Phil | ||
| Wadler](http://homepages.inf.ed.ac.uk/wadler/papers/next700/next700.pdf) | ||
| at Edinburgh University who pioneered this approach in Lisp back in | ||
| at Edinburgh University, who pioneered this approach in Lisp back in | ||
| 1999. hdom offers several additional features to these established | ||
@@ -363,6 +371,8 @@ approaches. | ||
| Attributes objects are used to define arbitrary attributes, CSS | ||
| properties and event listeners. The latter always have to be prefixed | ||
| with `on` and their values always must be functions (naturally). CSS | ||
| props are assigned to the `style` attribute, but given as JS object. | ||
| Attributes objects are optional, but if present always given as the 2nd | ||
| element in an element array and are used to define arbitrary attributes, | ||
| CSS properties and event listeners. The latter always have to be | ||
| prefixed with `on` and their values always must be functions | ||
| (naturally). CSS props are assigned to the `style` attribute, but given | ||
| as JS object. | ||
@@ -387,6 +397,8 @@ ```ts | ||
| Attribute values can be functions themselves and if so will be called | ||
| with the entire attributes object as sole argument. Same goes for CSS | ||
| property function values (which receive the entire `style` object). In | ||
| both cases, this supports the creation of derived values based on other | ||
| With the exception of event listeners (which are always functions), | ||
| others attribute values can be functions too and if so will be called | ||
| with the entire attributes object as sole argument and their return | ||
| value used as actual attribute value. Same goes for CSS property | ||
| function values (which receive the entire `style` object). In both | ||
| cases, this supports the creation of derived values based on other | ||
| attribs: | ||
@@ -396,4 +408,5 @@ | ||
| const btAttribs = { | ||
| // event handler are always functions | ||
| // event handlers are always standard listener functions | ||
| onclick: (e)=> alert(e.target.id), | ||
| // these fns receive the entire attribs object | ||
| class: (attr) => `bt bt-${attr.id}`, | ||
@@ -490,6 +503,7 @@ href: (attr) => `#${attr.id}`, | ||
| Please see the | ||
| The | ||
| [@thi.ng/transducers](https://github.com/thi-ng/umbrella/tree/master/packages/transducers) | ||
| package, which provides 130+ functions to create, compose and work with | ||
| iterator based pipelines. | ||
| package provides 130+ functions to create, compose and work with | ||
| iterator based pipelines. These are very powerful & handy for component | ||
| construction as well! | ||
@@ -528,4 +542,8 @@ ```ts | ||
| class Foo { | ||
| constructor(val) { | ||
| this.value = val; | ||
| } | ||
| deref() { | ||
| return ["div.deref"]; | ||
| return ["div.deref", this.value]; | ||
| } | ||
@@ -538,2 +556,6 @@ } | ||
| class Bar { | ||
| constructor(val) { | ||
| this.value = val; | ||
| } | ||
| toHiccup(ctx) { | ||
@@ -544,3 +566,13 @@ return ["div.hiccup", ctx && ctx.foo, this.value]; | ||
| ["div", new Foo(), new Bar()] | ||
| // to demonstrate usage of the user context we're using | ||
| // @thi.ng/hiccup's serialize() function here, which too | ||
| // supports user context handling, but produces an HTML string | ||
| serialize( | ||
| ["div", new Foo(23), new Bar(42)], | ||
| // global user context with theming rules | ||
| // here only use tachyons css classes, but could be anything... | ||
| { | ||
| foo: { class: "bg-lightest-blue navy pa2 ma0" } | ||
| } | ||
| ); | ||
| ``` | ||
@@ -550,4 +582,5 @@ | ||
| <div> | ||
| <div class="deref"></div> | ||
| <div class="hiccup"></div> | ||
| <div class="deref">23</div> | ||
| <!-- note: classes from ctx have been merged in here --> | ||
| <div class="bg-lightest-blue navy pa2 ma0 hiccup">42</div> | ||
| </div> | ||
@@ -586,2 +619,9 @@ ``` | ||
| * phase of processing. | ||
| * | ||
| * `render` should ALWAYS return an array or another function, | ||
| * else the component's `init` or `release` fns will NOT be able | ||
| * to be called later. E.g. If the return value of `render` | ||
| * evaluates as a string or number, the return value should be | ||
| * wrapped as `["span", "foo"]`. If no `init` or `release` are | ||
| * used, this requirement is relaxed. | ||
| */ | ||
@@ -600,8 +640,8 @@ render(ctx: any, ...args: any[]): any; | ||
| `init`. The `release` method is only called when the component has been | ||
| removed / replaced (basically if it's not present in the new tree | ||
| removed / replaced (basically, if it's not present in the new tree | ||
| anymore). **The `release` implementation should NOT manually call | ||
| `release()` on any children, since that's already handled by | ||
| `release()` on any children, since that's already been handled by hdom's | ||
| `diffTree()`.** | ||
| The rest `...args` provided are sourced from the component call site as | ||
| Any remaining arguments are sourced from the component call site as | ||
| this simple example demonstrates: | ||
@@ -629,3 +669,2 @@ | ||
| [canvas(), { width: 100, height: 100 }, "Hello world"], | ||
| { root: document.body } | ||
| ); | ||
@@ -637,5 +676,5 @@ | ||
| // which is evaluated each frame. | ||
| // since `canvas()` is a higher order component it too produces | ||
| // since `canvas()` is a higher order component it would produce | ||
| // a new instance with each call. therefore the canvas instance(s) | ||
| // need to be created beforehand | ||
| // need to be created beforehand... | ||
| const app = () => { | ||
@@ -645,11 +684,12 @@ // pre-instantiate canvases | ||
| const c2 = canvas(); | ||
| // return root component function | ||
| return () => ["div", | ||
| // use canvas instances | ||
| [c1, { width: 100, height: 100 }, "Hello world"], | ||
| [c2, { width: 100, height: 100 }, "Goodbye world", "blue"] | ||
| ]; | ||
| // return actual root component function | ||
| return () => | ||
| ["div", | ||
| // use canvas instances | ||
| [c1, { width: 100, height: 100 }, "Hello world"], | ||
| [c2, { width: 100, height: 100 }, "Goodbye world", "blue"] | ||
| ]; | ||
| }; | ||
| start(app(), { root: document.body }); | ||
| start(app()); | ||
| ``` | ||
@@ -849,5 +889,12 @@ | ||
| ### renderOnce() | ||
| One-off hdom tree conversion & target DOM application. Takes same args | ||
| as `start()`, but performs no diffing and only creates or hydrates | ||
| target (DOM) once. The given tree is first normalized and no further | ||
| action will be taken, if the normalized result is `null` or `undefined`. | ||
| ### HDOMOpts config options | ||
| Config options object passed to hdom's `start()` or | ||
| Config options object passed to hdom's `start()`, `renderOnce()` or | ||
| [@thi.ng/transducers-hdom](https://github.com/thi-ng/umbrella/tree/master/packages/transducers-hdom)'s | ||
@@ -884,2 +931,5 @@ `updateDOM()`: | ||
| - adds missing attribute objects (and `key` attribs) | ||
| - merges Emmet-style classes with additional `class` attrib values (if | ||
| given), e.g. `["div.foo", { class: "bar" }]` => `["div", { class: "bar | ||
| foo" }]` | ||
| - evaluates embedded functions and replaces them with their result | ||
@@ -894,3 +944,3 @@ - calls the `render` life cycle method on component objects and uses | ||
| - calls `.toString()` on any other non-component value and by default | ||
| wrapps it in `["span", x]`. The only exceptions to this are: `button`, | ||
| wraps it in `["span", x]`. The only exceptions to this are: `button`, | ||
| `option`, `textarea` and SVG `text` elements, for which spans are | ||
@@ -1002,9 +1052,9 @@ never created. | ||
| The following special attributes can be added to elements to choose | ||
| and/or control the branch-local behavior of the hdom implementation: | ||
| The following special attributes can be added to elements to control the | ||
| branch-local behavior of the hdom implementation: | ||
| #### __impl | ||
| A custom implementation of the `HDOMImplementation` interface. | ||
| Currently, | ||
| If present, the element and all of its children will be processed by the | ||
| given implementation of the `HDOMImplementation` interface. Currently, | ||
| [@thi.ng/hdom-canvas](https://github.com/thi-ng/umbrella/tree/master/packages/hdom-canvas) | ||
@@ -1015,3 +1065,5 @@ is the only example of a component using this feature. | ||
| If `false`, disables diffing of the current branch and replaces the old one with current. | ||
| If true (default), the element will be fully processed by `diffTree()`. | ||
| If false, no diff will be computed and the `replaceChild()` operation | ||
| will be called in the currently active hdom target implementation. | ||
@@ -1026,4 +1078,4 @@ #### __normalize | ||
| If `false`, do not attempt to call `release()` lifecycle methods on this | ||
| element or any of its children. | ||
| If `false`, hdom will not attempt to call `release()` lifecycle methods | ||
| on this element or any of its children. | ||
@@ -1033,4 +1085,4 @@ #### __serialize | ||
| [@thi.ng/hiccup](https://github.com/thi-ng/umbrella/tree/master/packages/hiccup) | ||
| only. If `false`, this element and its children will not be serialized | ||
| to XML syntax. | ||
| only. If `false`, this element and its children will be omitted from the | ||
| serialized output. | ||
@@ -1037,0 +1089,0 @@ ### Benchmark |
@@ -5,3 +5,3 @@ import { HDOMImplementation, HDOMOpts } from "./api"; | ||
| * options as `start()`, but performs no diffing and only creates or | ||
| * hydrates target once. The given tree is first normalized and not | ||
| * hydrates target once. The given tree is first normalized and no | ||
| * further action will be taken, if the normalized result is `null` or | ||
@@ -8,0 +8,0 @@ * `undefined`. |
| "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| const is_string_1 = require("@thi.ng/checks/is-string"); | ||
| const default_1 = require("./default"); | ||
| const utils_1 = require("./utils"); | ||
| /** | ||
| * One-off hdom tree conversion & target DOM application. Takes same | ||
| * options as `start()`, but performs no diffing and only creates or | ||
| * hydrates target once. The given tree is first normalized and not | ||
| * hydrates target once. The given tree is first normalized and no | ||
| * further action will be taken, if the normalized result is `null` or | ||
@@ -18,5 +18,3 @@ * `undefined`. | ||
| opts = Object.assign({ root: "app" }, opts); | ||
| const root = is_string_1.isString(opts.root) ? | ||
| document.getElementById(opts.root) : | ||
| opts.root; | ||
| const root = utils_1.resolveRoot(opts.root); | ||
| tree = impl.normalizeTree(opts, tree); | ||
@@ -23,0 +21,0 @@ if (!tree) |
| "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| const is_string_1 = require("@thi.ng/checks/is-string"); | ||
| const default_1 = require("./default"); | ||
| const utils_1 = require("./utils"); | ||
| /** | ||
@@ -47,5 +47,3 @@ * Takes an hiccup tree (array, function or component object w/ life | ||
| let isActive = true; | ||
| const root = is_string_1.isString(opts.root) ? | ||
| document.getElementById(opts.root) : | ||
| opts.root; | ||
| const root = utils_1.resolveRoot(opts.root); | ||
| const update = () => { | ||
@@ -52,0 +50,0 @@ if (isActive) { |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by5.3%
118180
- Number of package files
- increased by9.52%
23
- Lines of code
- increased by4.03%
1290
- Number of lines in readme file
- increased by5.05%
1081
Dependency changes
Updated@thi.ng/hiccup@^2.4.0