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 3.0.18 to 3.0.19
@@ -6,2 +6,10 @@ # Change Log | ||
| <a name="3.0.19"></a> | ||
| ## [3.0.19](https://github.com/thi-ng/umbrella/compare/@thi.ng/hdom@3.0.18...@thi.ng/hdom@3.0.19) (2018-05-13) | ||
| **Note:** Version bump only for package @thi.ng/hdom | ||
| <a name="3.0.18"></a> | ||
@@ -8,0 +16,0 @@ ## [3.0.18](https://github.com/thi-ng/umbrella/compare/@thi.ng/hdom@3.0.17...@thi.ng/hdom@3.0.18) (2018-05-12) |
| { | ||
| "name": "@thi.ng/hdom", | ||
| "version": "3.0.18", | ||
| "version": "3.0.19", | ||
| "description": "Lightweight vanilla ES6 UI component & virtual DOM system", | ||
@@ -19,3 +19,3 @@ "main": "./index.js", | ||
| "devDependencies": { | ||
| "@thi.ng/atom": "^1.3.10", | ||
| "@thi.ng/atom": "^1.3.11", | ||
| "@types/mocha": "^5.2.0", | ||
@@ -29,8 +29,8 @@ "@types/node": "^10.0.6", | ||
| "dependencies": { | ||
| "@thi.ng/api": "^4.0.0", | ||
| "@thi.ng/checks": "^1.5.2", | ||
| "@thi.ng/diff": "^1.0.14", | ||
| "@thi.ng/equiv": "^0.1.0", | ||
| "@thi.ng/hiccup": "^1.3.16", | ||
| "@thi.ng/iterators": "^4.1.13" | ||
| "@thi.ng/api": "^4.0.1", | ||
| "@thi.ng/checks": "^1.5.3", | ||
| "@thi.ng/diff": "^1.0.15", | ||
| "@thi.ng/equiv": "^0.1.1", | ||
| "@thi.ng/hiccup": "^2.0.0", | ||
| "@thi.ng/iterators": "^4.1.14" | ||
| }, | ||
@@ -37,0 +37,0 @@ "keywords": [ |
@@ -16,2 +16,3 @@ # @thi.ng/hdom | ||
| - [Installation](#installation) | ||
| - [Dependencies](#dependencies) | ||
| - [Usage](#usage) | ||
@@ -21,2 +22,4 @@ - [User context injection](#user-context-injection) | ||
| - [Example projects](#example-projects) | ||
| - [Interactive SVG grid generator](#interactive-svg-grid-generator) | ||
| - [Interactive additive waveform visualization](#interactive-additive-waveform-visualization) | ||
| - [Dataflow graph SVG components](#dataflow-graph-svg-components) | ||
@@ -41,12 +44,14 @@ - [SPA with router and event bus](#spa-with-router-and-event-bus) | ||
| Lightweight reactive DOM components using only vanilla JS data | ||
| structures (arrays, objects, closures, iterators), based on | ||
| Lightweight reactive DOM components & VDOM implementation using only | ||
| vanilla JS data structures (arrays, objects with life cycle functions, | ||
| closures, iterators), based on | ||
| [@thi.ng/hiccup](https://github.com/thi-ng/umbrella/tree/master/packages/hiccup). | ||
| - Use the full expressiveness of ES6/TypeScript to define, annotate & | ||
| - Use the full expressiveness of ES6 / TypeScript to define, annotate & | ||
| document components | ||
| - Clean, functional component composition and reuse | ||
| - No pre-processing / pre-compilation steps | ||
| - Supports SVG, arbitrary elements, attributes, events | ||
| - Less verbose than HTML/JSX, resulting in smaller file sizes | ||
| - [Supports SVG](https://github.com/thi-ng/umbrella/treeSupports SVG), | ||
| arbitrary elements, attributes, events | ||
| - Less verbose than HTML / JSX, resulting in smaller file sizes | ||
| - Static components can be distributed as JSON (or [transform JSON | ||
@@ -57,4 +62,4 @@ into components](https://github.com/thi-ng/umbrella/tree/master/examples/json-components)) | ||
| - auto-deref of embedded value wrappers which implement the | ||
| `@thi.ng/api/IDeref` interface (e.g. atoms, cursors, derived views, | ||
| streams etc.) | ||
| [@thi.ng/api/IDeref](https://github.com/thi-ng/umbrella/tree/master/packages/api/api) | ||
| interface (e.g. atoms, cursors, derived views, streams etc.) | ||
| - CSS conversion from JS objects for `style` attribs | ||
@@ -70,2 +75,6 @@ - Suitable for server side rendering (by passing the same data structure | ||
| Also see the [work-in-progress | ||
| ADRs](https://github.com/thi-ng/umbrella/tree/master/packages/hdom-components/adr/) | ||
| for component configuration. | ||
| ```typescript | ||
@@ -96,3 +105,4 @@ import * as hdom from "@thi.ng/hdom"; | ||
| [Live demo](http://demo.thi.ng/umbrella/hdom-basics/) | [standalone example](https://github.com/thi-ng/umbrella/tree/master/examples/hdom-basics) | ||
| [Live demo](http://demo.thi.ng/umbrella/hdom-basics/) | | ||
| [standalone example](https://github.com/thi-ng/umbrella/tree/master/examples/hdom-basics) | ||
@@ -180,2 +190,11 @@ Alternatively, use the same component function for browser or server | ||
| ## Dependencies | ||
| - [@thi.ng/api](https://github.com/thi-ng/umbrella/tree/master/packages/api) | ||
| - [@thi.ng/checks](https://github.com/thi-ng/umbrella/tree/master/packages/checks) | ||
| - [@thi.ng/diff](https://github.com/thi-ng/umbrella/tree/master/packages/diff) | ||
| - [@thi.ng/equiv](https://github.com/thi-ng/umbrella/tree/master/packages/equiv) | ||
| - [@thi.ng/hiccup](https://github.com/thi-ng/umbrella/tree/master/packages/hiccup) | ||
| - [@thi.ng/iterators](https://github.com/thi-ng/umbrella/tree/master/packages/iterators) | ||
| ## Usage | ||
@@ -187,6 +206,4 @@ | ||
| reference to learn about the basics of the approach and syntax used. | ||
| Compared to @thi.ng/hiccup, this project has additional features (e.g. | ||
| life cycle hooks), which aren't needed for the static serialization use | ||
| cases of @thi.ng/hiccup. Both projects started in early 2016, but have | ||
| somewhat evolved independently. | ||
| Both projects started in early 2016, have somewhat evolved | ||
| independently, however should be considered complementary. | ||
@@ -196,11 +213,11 @@ #### `start(parent: Element | string, tree: any, ctx?: any, path?: number[], keys?: boolean, span?: boolean): () => boolean` | ||
| Main user function of this package. For most use cases, this function | ||
| should be the only one required. It takes a parent DOM element (or ID), | ||
| hiccup tree (array, function or component object w/ life cycle methods) | ||
| and an optional arbitrary context object. Starts RAF update loop, in | ||
| each iteration first normalizing given tree, then computing diff to | ||
| previous frame's tree and applying any changes to the real DOM. The | ||
| optional `context` arg can be used for passing global config data or | ||
| state down into the hiccup component tree. Any embedded component | ||
| function in the tree will receive this context object as first argument, | ||
| as will life cycle methods in component objects. See [context | ||
| should be the only one required in user code. It takes a parent DOM | ||
| element (or ID), hiccup tree (array, function or component object w/ | ||
| life cycle methods) and an optional arbitrary context object. Starts RAF | ||
| update loop, in each iteration first normalizing given tree, then | ||
| computing diff to previous frame's tree and applying any changes to the | ||
| real DOM. The optional `context` arg can be used for passing global | ||
| config data or state down into the hiccup component tree. Any embedded | ||
| component function in the tree will receive this context object as first | ||
| argument, as will life cycle methods in component objects. See [context | ||
| description](#user-context) further below. | ||
@@ -210,9 +227,9 @@ | ||
| tree is `undefined` or `null` or a root component function returns no | ||
| value. This way a given root function can do some state handling of its | ||
| own and implement fail-fast checks to determine no DOM updates are | ||
| necessary, saving effort re-creating a new hiccup tree and request | ||
| skipping DOM updates via this function. In this case, the previous DOM | ||
| tree is kept around until the root function returns a tree again, which | ||
| then is diffed and applied against the previous tree kept as usual. Any | ||
| number of frames may be skipped this way. | ||
| value. This way a given root component function can do some state | ||
| handling of its own and implement fail-fast checks to determine no DOM | ||
| updates are necessary, saving effort re-creating a new hiccup tree and | ||
| request skipping DOM updates via this function. In this case, the | ||
| previous DOM tree is kept around until the root function returns a tree | ||
| again, which then is diffed and applied against the previous tree kept | ||
| as usual. Any number of frames may be skipped this way. | ||
@@ -284,6 +301,6 @@ **Important:** The parent element given is assumed to have NO children at | ||
| passed to `start()`, and then automatically injected as argument to | ||
| **all** component function calls anywhere in the tree. This avoids | ||
| **all** embedded component functions anywhere in the tree. This avoids | ||
| having to manually pass down configuration data into each sub-component | ||
| and so can simplify certain use cases, e.g. event dispatch, style | ||
| information, global state etc. | ||
| and so can simplify certain use cases, e.g. event dispatch, style / | ||
| theme information, global state etc. | ||
@@ -362,3 +379,4 @@ ```ts | ||
| * Returns the hdom tree of this component. | ||
| * Note: Always will be called first (prior to `init`/`release`). | ||
| * 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 | ||
@@ -385,3 +403,3 @@ * has already been initialized via `init`. This is the only | ||
| When the component is first used the order of execution is: `render` -> | ||
| `init`. The `release` method is called when the component has been | ||
| `init`. The `release` method is only called when the component has been | ||
| removed / replaced (basically if it's not present in the new tree | ||
@@ -450,2 +468,12 @@ anymore). `release` should NOT manually call `release` on any children, | ||
| ### Interactive SVG grid generator | ||
| [Source](https://github.com/thi-ng/umbrella/tree/master/examples/rstream-grid) | | ||
| [Live version](http://demo.thi.ng/umbrella/rstream-grid/) | ||
| ### Interactive additive waveform visualization | ||
| [Source](https://github.com/thi-ng/umbrella/tree/master/examples/svg-waveform) | | ||
| [Live version](http://demo.thi.ng/umbrella/svg-waveform/) | ||
| ### Dataflow graph SVG components | ||
@@ -452,0 +480,0 @@ |
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 by2.14%
74565
- Number of lines in readme file
- increased by5.38%
548
Dependency changes
+ Added@thi.ng/hiccup@2.7.2(transitive)
- Removed@thi.ng/hiccup@1.3.16(transitive)
Updated@thi.ng/api@^4.0.1
Updated@thi.ng/checks@^1.5.3
Updated@thi.ng/diff@^1.0.15
Updated@thi.ng/equiv@^0.1.1
Updated@thi.ng/hiccup@^2.0.0
Updated@thi.ng/iterators@^4.1.14