10 |
11 |
12 |
;
14 | }
15 | }
16 |
17 | hyperdom.append(document.body, new App());
18 |
--------------------------------------------------------------------------------
/docs/codesandbox/demo-no-jsx/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "scripts": {
3 | "start": "webpack-dev-server",
4 | "build": "webpack"
5 | },
6 | "dependencies": {
7 | "hyperdom": "latest"
8 | },
9 | "devDependencies": {
10 | "clean-webpack-plugin": "latest",
11 | "html-webpack-plugin": "latest",
12 | "webpack": "latest",
13 | "webpack-cli": "latest",
14 | "webpack-dev-server": "latest"
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/docs/codesandbox/demo-ts/browser/index.tsx:
--------------------------------------------------------------------------------
1 | import * as hyperdom from "hyperdom";
2 |
3 | class App extends hyperdom.RenderComponent {
4 | private name: string;
5 |
6 | render() {
7 | return (
8 | hi {this.name}
13 |
9 |
10 |
11 |
13 | );
14 | }
15 | }
16 |
17 | hyperdom.append(document.body, new App());
18 |
--------------------------------------------------------------------------------
/meta.js:
--------------------------------------------------------------------------------
1 | module.exports = function (model, property) {
2 | var hyperdomMeta = model._hyperdomMeta
3 |
4 | if (!hyperdomMeta) {
5 | hyperdomMeta = {}
6 | Object.defineProperty(model, '_hyperdomMeta', {value: hyperdomMeta})
7 | }
8 |
9 | if (property) {
10 | var meta = hyperdomMeta[property]
11 |
12 | if (!meta) {
13 | meta = hyperdomMeta[property] = {}
14 | }
15 |
16 | return meta
17 | } else {
18 | return hyperdomMeta
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/test/server/hyperxSpec.ts:
--------------------------------------------------------------------------------
1 | import hx = require('../../hyperx')
2 | import toHtml = require('../../toHtml')
3 | import {expect} from 'chai'
4 |
5 | describe('hyperx', function () {
6 | it('can render with hyperx', function () {
7 | expect(toHtml(hx`hi {this.name}
12 | hi
`)).to.equal('hi
')
8 | })
9 | it('can render svg with class with hyperx', function () {
10 | expect(toHtml(hx``)).to.equal('')
11 | })
12 | })
13 |
--------------------------------------------------------------------------------
/docs/codesandbox/demo-ts-routing/browser/index.tsx:
--------------------------------------------------------------------------------
1 | import * as hyperdom from "hyperdom";
2 | import * as router from "hyperdom/router";
3 |
4 | const home = router.route("/");
5 |
6 | class Thing extends hyperdom.RoutesComponent {
7 | tech = "hyperdom";
8 |
9 | routes() {
10 | return [
11 | home({
12 | render: () => {
13 | return Hello from {this.tech}
;
14 | }
15 | })
16 | ];
17 | }
18 | }
19 |
20 | hyperdom.append(document.body, new Thing(), {router});
21 |
--------------------------------------------------------------------------------
/test/server/joinSpec.ts:
--------------------------------------------------------------------------------
1 | import {expect} from 'chai'
2 | import {html as h} from '../..'
3 | import join = require('../../join')
4 | import toHtml = require('../../toHtml')
5 |
6 | describe('join', function () {
7 | it('can join an array of vdom by a separator', function () {
8 | expect(toHtml(h('div',
9 | join([
10 | h('code', 'one'),
11 | h('code', 'two'),
12 | h('code', 'three'),
13 | ], ' '),
14 | ))).to.equal('one two three
8 |
11 | } else {
12 | return Hello from Hyperdom!
9 | this.hideGreetings = true}>Next 10 |Now then...
13 | } 14 | } 15 | 16 | render () { 17 | return
11 |
14 | );
15 | } else {
16 | return Hello from Hyperdom!
12 | this.hideGreetings = true}>Next 13 |Now then...
; 17 | } 18 | } 19 | 20 | render() { 21 | return
8 |
11 | }
12 | }
13 |
14 | renderNameForm() {
15 | if (this.hideGreetings) {
16 | return Hello from Hyperdom!
9 | this.hideGreetings = true}>Next 10 |
17 |
20 | {this.userName &&
22 | }
23 | }
24 |
25 | render() {
26 | return You're now a hyperdomsta {this.userName}
}
21 |
13 |
16 | {this.userName && (
17 |
23 | );
24 | }
25 |
26 | renderGreetings() {
27 | return (
28 |
18 | You're now a hyperdomsta {this.userName}
19 |
20 | )}
21 | {this.userName && this.beerList}
22 |
29 |
32 | );
33 | }
34 |
35 | render() {
36 | return (
37 | Hello from Hyperdom!
30 | (this.hideGreetings = true)}>Next 31 |
12 |
15 | );
16 | }
17 | }
18 |
19 | renderNameForm() {
20 | if (this.hideGreetings) {
21 | return (
22 | Hello from Hyperdom!
13 | this.hideGreetings = true}>Next 14 |
23 |
24 | {this.userName &&
26 | );
27 | }
28 | }
29 |
30 | render() {
31 | return (
32 | You're now a hyperdomsta {this.userName}
}
25 |
13 |
18 | );
19 | }
20 |
21 | renderNameForm() {
22 | return (
23 | Hello from Hyperdom!
14 | (this.hideGreetings = true)}> 15 | Next 16 | 17 |
24 |
27 | {this.userName && (
28 |
34 | );
35 | }
36 |
37 | render() {
38 | return (
39 |
29 | You're now a hyperdomsta {this.userName}
30 |
31 | )}
32 | {this.userName && this.beerList}
33 | {!this.beer ? "Loading..." : this.renderCurrentBeer()}
36 | );
37 | }
38 | })
39 | ];
40 | }
41 |
42 | renderCurrentBeer() {
43 | return some raw HTML
29 |
32 | {
33 | this.userName &&
37 | )
38 | }
39 |
40 | renderGreetings() {
41 | return (
42 | You're now a hyperdomsta {this.userName}
34 | }
35 | {this.userName && Have a beer}
36 |
43 |
48 | );
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/docs/codesandbox/get-started-routing-ts/browser/Beer.tsx:
--------------------------------------------------------------------------------
1 | import * as hyperdom from "hyperdom";
2 | import { IBeer } from "./BeerList";
3 | import routes from "./routes";
4 |
5 | export default class Beer {
6 | private beerIdParam?: string;
7 | private beer?: IBeer;
8 | private beers: ArrayHello from Hyperdom!
44 | (this.hideGreetings = true)}> 45 | Next 46 | 47 |{!this.beer ? "Loading..." : this.renderCurrentBeer()}
39 | );
40 | }
41 | })
42 | ];
43 | }
44 |
45 | renderCurrentBeer() {
46 | return
29 |
34 | );
35 | }
36 |
37 | renderNameForm() {
38 | return (
39 | Hello from Hyperdom!
30 | (this.hideGreetings = true)}> 31 | Next 32 | 33 |
40 |
43 | {this.userName && (
44 |
50 | );
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/storeCache.js:
--------------------------------------------------------------------------------
1 | module.exports = StoreCache
2 |
3 | function StoreCache () {
4 | this.data = {}
5 | this.loadPromises = []
6 |
7 | var self = this
8 | this.refreshify = function (fn) {
9 | return function () {
10 | var result = fn.apply(this, arguments)
11 | if (result && typeof result.then === 'function') {
12 | self.loadPromises.push(result)
13 | }
14 | }
15 | }
16 | }
17 |
18 | StoreCache.prototype.cache = function (key, loadFn) {
19 | var self = this
20 |
21 | var loadPromise = loadFn().then(function (data) {
22 | return (self.data[key] = data)
23 | })
24 |
25 | return modifyPromiseChain(loadPromise, function (p) {
26 | if (!self.waitingForLoad) {
27 | self.loadPromises.push(p)
28 | }
29 | })
30 | }
31 |
32 | function modifyPromiseChain (promise, modify) {
33 | modify(promise)
34 |
35 | var then = promise.then
36 | var _catch = promise.catch
37 |
38 | promise.then = function () {
39 | var p = then.apply(this, arguments)
40 | modifyPromiseChain(p, modify)
41 | return p
42 | }
43 |
44 | promise.catch = function () {
45 | var p = _catch.apply(this, arguments)
46 | modifyPromiseChain(p, modify)
47 | return p
48 | }
49 |
50 | return promise
51 | }
52 |
53 | StoreCache.prototype.loaded = function () {
54 | var self = this
55 | this.waitingForLoad = true
56 | return Promise.all(this.loadPromises).then(function () {
57 | self.waitingForLoad = false
58 | self.loadPromises = []
59 | })
60 | }
61 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # hyperdom [](https://www.npmjs.com/package/hyperdom) [](https://www.npmjs.com/package/hyperdom) [](https://travis-ci.org/featurist/hyperdom)
2 |
3 |
45 | You're now a hyperdomsta {this.userName}
46 |
47 | )}
48 | {this.userName && Have a beer}
49 | 
4 |
5 | A simple, fast, feature rich framework for building dynamic browser applications.
6 |
7 | Hyperdom supports a simple event-update-render cycle, promises for asynchronous operations, JSX, non-JSX, typescript, client-side routing, SVG, two-way data binding, server-side rendering, and optimises for performance, developer usability and simplicity of application architecture.
8 |
9 | Hyperdom is influenced by [react](http://facebook.github.io/react/) and uses [virtual-dom](https://github.com/Matt-Esch/virtual-dom) for the DOM patching. Unlike react though, there is no need for state management libraries (this problem simply does not exist in hyperdom), the API is compact and the routing is built in.
10 |
11 | Documentation - https://hyperdom.org
12 |
13 | ## We're Hiring!
14 |
15 | Join our remote team and help us build amazing software. Check out [our career opportunities](https://www.featurist.co.uk/careers/).
16 |
17 | Sponsored by:
18 |
19 | [](https://www.Browserstack.com/).
20 |
--------------------------------------------------------------------------------
/docs/introduction.md:
--------------------------------------------------------------------------------
1 | # Introduction
2 |
3 | Hyperdom is a simple, fast, feature rich framework for building dynamic browser applications.
4 |
5 | Hyperdom supports:
6 | - a simple event-update-render cycle
7 | - promises for asynchronous operations
8 | - JSX
9 | - non-JSX
10 | - typescript
11 | - client-side routing
12 | - SVG
13 | - two-way data binding
14 | - server-side rendering
15 |
16 | Hyperdom optimises for performance, developer usability and simplicity of application architecture.
17 |
18 | Hyperdom is influenced by react and uses virtual-dom for the DOM patching. Unlike react though, there is no need for state management libraries (this problem simply does not exist in hyperdom), the API is compact and the routing is built in.
19 |
20 | ## Size
21 |
22 | * `hyperdom.min.js`: 31K
23 | * `hyperdom.min.js.gz`: 9.8K
24 |
25 | ## Browser Support
26 |
27 | * IE 9, 10, 11
28 | * Edge
29 | * Safari
30 | * Safari iOS
31 | * Firefox
32 | * Chrome
33 |
34 | Other browsers are likely to work but aren't routinely tested.
35 |
36 | ## Sister Projects
37 |
38 | * [hyperdom-ace-editor](https://github.com/featurist/hyperdom-ace-editor)
39 | * [hyperdom-draggabilly](https://github.com/featurist/hyperdom-draggabilly)
40 | * [hyperdom-medium-editor](https://github.com/featurist/hyperdom-medium-editor)
41 | * [hyperdom-ckeditor](https://github.com/featurist/hyperdom-ckeditor)
42 | * [hyperdom-semantic-ui](https://github.com/featurist/hyperdom-semantic-ui)
43 | * [hyperdom-sortable](https://github.com/featurist/hyperdom-sortable)
44 | * [hyperdom-zeroclipboard](https://github.com/featurist/hyperdom-zeroclipboard)
45 |
--------------------------------------------------------------------------------
/docs/codesandbox/get-started-compose/browser/BeerList.jsx:
--------------------------------------------------------------------------------
1 | import hyperdom from 'hyperdom';
2 | import styles from './styles.css';
3 |
4 | export default class BeerList {
5 |
6 | async getBeers() {
7 | delete this.beers;
8 | this.isLoadingBeer = true;
9 |
10 | const response = await fetch("https://api.punkapi.com/v2/beers");
11 | this.beers = await response.json();
12 |
13 | this.isLoadingBeer = false;
14 | }
15 |
16 | renderTable() {
17 | if (this.beers) {
18 | return (
19 |
20 |
21 |
22 |
42 |
43 | );
44 | }
45 | }
46 |
47 | render() {
48 | if (this.isLoadingBeer) {
49 | return | 24 | | Name | 25 |Tagline | 26 |
|---|---|---|
|
33 | |
35 | {name} | 36 |{tagline} | 37 |
Loading...
50 | } else {
51 | return (
52 |
53 |
54 | {this.renderTable()}
55 |
56 | );
57 | }
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/domComponent.js:
--------------------------------------------------------------------------------
1 | var createElement = require('virtual-dom/create-element')
2 | var diff = require('virtual-dom/diff')
3 | var patch = require('virtual-dom/patch')
4 | var toVdom = require('./toVdom')
5 | var isVdom = require('./isVdom')
6 |
7 | function DomComponent (options) {
8 | this.document = options && options.document
9 | }
10 |
11 | function prepareVdom (object) {
12 | var vdom = toVdom(object)
13 | if (!isVdom(vdom)) {
14 | throw new Error('expected render to return vdom')
15 | } else {
16 | return vdom
17 | }
18 | }
19 |
20 | DomComponent.prototype.create = function (vdom) {
21 | this.vdom = prepareVdom(vdom)
22 | return (this.element = createElement(this.vdom, {document: this.document}))
23 | }
24 |
25 | DomComponent.prototype.merge = function (vdom, element) {
26 | this.vdom = prepareVdom(vdom)
27 | return (this.element = element)
28 | }
29 |
30 | DomComponent.prototype.update = function (vdom) {
31 | var oldVdom = this.vdom
32 | this.vdom = prepareVdom(vdom)
33 | var patches = diff(oldVdom, this.vdom)
34 | return (this.element = patch(this.element, patches))
35 | }
36 |
37 | DomComponent.prototype.destroy = function (options) {
38 | function destroyWidgets (vdom) {
39 | if (vdom.type === 'Widget') {
40 | vdom.destroy()
41 | } else if (vdom.children) {
42 | vdom.children.forEach(destroyWidgets)
43 | }
44 | }
45 |
46 | destroyWidgets(this.vdom)
47 |
48 | if (options && options.removeElement && this.element.parentNode) {
49 | this.element.parentNode.removeChild(this.element)
50 | }
51 | }
52 |
53 | function domComponent (options) {
54 | return new DomComponent(options)
55 | }
56 |
57 | exports.create = domComponent
58 |
--------------------------------------------------------------------------------
/docs/codesandbox/get-started-routing/browser/BeerList.jsx:
--------------------------------------------------------------------------------
1 | import hyperdom from 'hyperdom';
2 | import routes from './routes';
3 | import styles from './styles.css';
4 | import Beer from './Beer';
5 |
6 | export default class BeerList {
7 | constructor() {
8 | this.showBeer = new Beer(this);
9 | }
10 |
11 | routes() {
12 | return [
13 | routes.beers({
14 | onload: async () => {
15 | if (!this.beers) {
16 | const response = await fetch("https://api.punkapi.com/v2/beers");
17 | this.beers = await response.json();
18 | }
19 | },
20 | render: () => {
21 | return {!this.beers ? "Loading..." : this.renderTable()}
;
22 | }
23 | }),
24 | this.showBeer
25 | ];
26 | }
27 |
28 | renderTable() {
29 | return (
30 |
31 |
32 |
33 |
57 |
58 | );
59 | }
60 | };
61 |
--------------------------------------------------------------------------------
/docs/codesandbox/get-started-compose-ts/browser/BeerList.tsx:
--------------------------------------------------------------------------------
1 | import * as hyperdom from "hyperdom";
2 | import * as styles from "./styles.css";
3 |
4 | interface Beer {
5 | name: string;
6 | tagline: string;
7 | image_url: string;
8 | }
9 |
10 | export default class BeerList extends hyperdom.RenderComponent {
11 | private isLoadingBeer = false;
12 | private beers: Array| 35 | | Name | 36 |Tagline | 37 |38 | |
|---|---|---|---|
|
45 | |
47 | {name} | 48 |{tagline} | 49 |50 | show 51 | | 52 |
Loading...
;
17 | } else {
18 | return (
19 |
20 |
23 | {this.renderTable()}
24 |
25 | );
26 | }
27 | }
28 |
29 | private renderTable() {
30 | if (!this.beers.length) {
31 | return;
32 | }
33 |
34 | return (
35 | | 39 | | Name | 40 |Tagline | 41 |
|---|---|---|
|
48 | |
50 | {name} | 51 |{tagline} | 52 |
{this.beers.length ? this.renderTable() : "Loading..."}
33 | );
34 | }
35 | }),
36 | this.showBeer
37 | ];
38 | }
39 |
40 | private renderTable() {
41 | if (!this.beers.length) {
42 | return;
43 | }
44 |
45 | return (
46 | | 50 | | Name | 51 |Tagline | 52 |53 | |
|---|---|---|---|
|
60 | |
62 | {name} | 63 |{tagline} | 64 |65 | show 66 | | 67 |
child
component
component
',
40 | )
41 | })
42 |
43 | it('can render view components to HTML', function () {
44 | const vdom = h('div',
45 | hyperdom.viewComponent(new class extends RenderComponent {
46 | public render () {
47 | return h('div', 'component')
48 | }
49 | }()),
50 | )
51 | expect(toHtml(vdom)).to.equal(
52 | 'component
component
',
65 | )
66 | })
67 | })
68 |
--------------------------------------------------------------------------------
/router.d.ts:
--------------------------------------------------------------------------------
1 | import {VdomFragment, Binding, Component} from "."
2 |
3 | // TODO: what else is there?
4 | export interface RouteDefinition {
5 | definition: {
6 | pattern: string,
7 | }
8 | }
9 |
10 | export type NotFound = object
11 |
12 | export interface Router {
13 | push (url: string): void
14 |
15 | reset (): void
16 |
17 | route (path: string): RouteHandler
18 |
19 | url (): string
20 |
21 | notFound (handler: (url: string, routesTried: RouteDefinition[]) => string): NotFound
22 | }
23 |
24 | export interface RouteHistory {
25 | push (url: string): void
26 |
27 | url (): string
28 | }
29 |
30 | export interface ParamsToPushMap {
31 | [param: string]: boolean
32 | }
33 |
34 | export type ParamsToPushFn = (oldParams: object, newParams: object) => boolean
35 | export type ParamsToPush = ParamsToPushMap | ParamsToPushFn
36 |
37 | export interface ParamsBindings {
38 | [param: string]: Binding
39 | }
40 |
41 | export interface RoutableComponent {
42 | bindings?: ParamsBindings
43 | push?: ParamsToPush
44 |
45 | redirect? (params: object): string | undefined
46 |
47 | render? (): VdomFragment | Component | string // TODO add `render() => string` test to hyperdomSpec
48 | // TODO: Promise
8 |
13 | );
14 | }
15 |
16 | renderNameForm() {
17 | return (
18 | Hello from Hyperdom!
9 | (this.hideGreetings = true)}> 10 | Next 11 | 12 |
19 |
22 | {
23 | this.userName &&
24 |
33 | );
34 | }
35 |
36 | renderBeerList() {
37 | if (!this.beers) {
38 | return;
39 | }
40 |
41 | return (
42 |
25 |
30 | }
31 | {this.isLoadingBeer ? "Loading..." : this.renderBeerList()}
32 | You're now a hyperdomsta {this.userName}
26 |
29 | | 46 | | Name | 47 |Tagline | 48 |
|---|---|---|
|
55 | |
57 | {name} | 58 |{tagline} | 59 |
19 |
22 | );
23 | }
24 |
25 | renderNameForm() {
26 | return (
27 | Hello from Hyperdom!
20 | (this.hideGreetings = true)}>Next 21 |
28 |
31 | {this.userName && (
32 |
43 | );
44 | }
45 |
46 | renderBeerList() {
47 | if (!this.beers.length) {
48 | return;
49 | }
50 |
51 | return (
52 |
33 |
40 | )}
41 | {this.isLoadingBeer ? "Loading..." : this.renderBeerList()}
42 |
34 | You're now a hyperdomsta {this.userName}
35 |
36 |
39 | | 56 | | Name | 57 |Tagline | 58 |
|---|---|---|
| {name} | 66 |{tagline} | 67 |
Blue
22 | }
23 | mount(render)
24 | await browser.find('div').shouldHave({text: 'Blue'})
25 | })
26 |
27 | // just checking compilation errors here - hence xit
28 | xit('supports hyperdom specific node attributes', function () {
29 | function render (this: hyperdom.FnComponent) {
30 | return (
31 |
32 |
33 |
39 |
41 |
42 |
43 |
44 | )
45 | }
46 |
47 | class Circle extends hyperdom.RenderComponent {
48 | public render () {
49 | return
52 | }
53 | }
54 | })
55 |
56 | it('renders hyperdom viewComponent', async function () {
57 | class Blue extends hyperdom.RenderComponent {
58 | private readonly title: string
59 |
60 | constructor (properties: { title: string }, readonly children: hyperdom.Renderable[]) {
61 | super()
62 | this.title = properties.title
63 | }
64 |
65 | public render () {
66 | return (
67 | -
34 |
- one 35 |
- two 36 |
- three 37 |
| 40 | |
|---|
68 |
71 | )
72 | }
73 | }
74 |
75 | function render () {
76 | return (
77 | {this.title}
69 | {this.children} 70 |
78 |
79 |
82 |
83 | )
84 | }
85 | mount(render)
86 | await browser.find('div h1').shouldHave({text: 'Blue'})
87 | await browser.find('.orange').shouldHave({text: 'Orange'})
88 | await browser.find('.green').shouldHave({text: 'Green'})
89 | })
90 | })
91 |
--------------------------------------------------------------------------------
/prepareAttributes.js:
--------------------------------------------------------------------------------
1 | var render = require('./render')
2 | var bindModel = require('./bindModel')
3 |
4 | module.exports = function (tag, attributes, childElements) {
5 | var dataset
6 | var currentRender = render.currentRender()
7 |
8 | if (attributes.binding) {
9 | bindModel(tag, attributes, childElements)
10 | delete attributes.binding
11 | }
12 |
13 | var keys = Object.keys(attributes)
14 | for (var k = 0; k < keys.length; k++) {
15 | var key = keys[k]
16 | var attribute = attributes[key]
17 |
18 | if (typeof (attribute) === 'function' && currentRender) {
19 | attributes[key] = currentRender.transformFunctionAttribute(key, attribute)
20 | }
21 |
22 | var rename = renames[key]
23 | if (rename) {
24 | attributes[rename] = attribute
25 | delete attributes[key]
26 | continue
27 | }
28 |
29 | if (dataAttributeRegex.test(key)) {
30 | if (!dataset) {
31 | dataset = attributes.dataset
32 |
33 | if (!dataset) {
34 | dataset = attributes.dataset = {}
35 | }
36 | }
37 |
38 | var datakey = key
39 | .replace(dataAttributeRegex, '')
40 | .replace(/-([a-z])/ig, function (_, x) { return x.toUpperCase() })
41 |
42 | dataset[datakey] = attribute
43 | delete attributes[key]
44 | continue
45 | }
46 | }
47 |
48 | if (process.env.NODE_ENV !== 'production' && attributes.__source) {
49 | if (!dataset) {
50 | dataset = attributes.dataset
51 |
52 | if (!dataset) {
53 | dataset = attributes.dataset = {}
54 | }
55 | }
56 |
57 | dataset.fileName = attributes.__source.fileName
58 | dataset.lineNumber = attributes.__source.lineNumber
59 | }
60 |
61 | if (attributes.className) {
62 | attributes.className = generateClassName(attributes.className)
63 | }
64 |
65 | if (attributes.innerHTML === false) {
66 | delete attributes.innerHTML
67 | }
68 |
69 | return attributes
70 | }
71 |
72 | var renames = {
73 | for: 'htmlFor',
74 | class: 'className',
75 | contenteditable: 'contentEditable',
76 | tabindex: 'tabIndex',
77 | colspan: 'colSpan'
78 | }
79 |
80 | var dataAttributeRegex = /^data-/
81 |
82 | function generateClassName (obj) {
83 | if (typeof (obj) === 'object') {
84 | if (obj instanceof Array) {
85 | var names = obj.map(function (item) {
86 | return generateClassName(item)
87 | })
88 | return names.join(' ') || undefined
89 | } else {
90 | return generateConditionalClassNames(obj)
91 | }
92 | } else {
93 | return obj
94 | }
95 | }
96 |
97 | function generateConditionalClassNames (obj) {
98 | return Object.keys(obj).filter(function (key) {
99 | return obj[key]
100 | }).join(' ') || undefined
101 | }
102 |
--------------------------------------------------------------------------------
/mapBinding.js:
--------------------------------------------------------------------------------
1 | var bindingMeta = require('./meta')
2 |
3 | function makeConverter (converter) {
4 | if (typeof converter === 'function') {
5 | return {
6 | view: function (model) {
7 | return model
8 | },
9 | model: function (view) {
10 | return converter(view)
11 | }
12 | }
13 | } else {
14 | return converter
15 | }
16 | }
17 |
18 | function chainConverters (startIndex, converters) {
19 | function makeConverters () {
20 | if (!_converters) {
21 | _converters = new Array(converters.length - startIndex)
22 |
23 | for (var n = startIndex; n < converters.length; n++) {
24 | _converters[n - startIndex] = makeConverter(converters[n])
25 | }
26 | }
27 | }
28 |
29 | if ((converters.length - startIndex) === 1) {
30 | return makeConverter(converters[startIndex])
31 | } else {
32 | var _converters
33 | return {
34 | view: function (model) {
35 | makeConverters()
36 | var intermediateValue = model
37 | for (var n = 0; n < _converters.length; n++) {
38 | intermediateValue = _converters[n].view(intermediateValue)
39 | }
40 | return intermediateValue
41 | },
42 |
43 | model: function (view) {
44 | makeConverters()
45 | var intermediateValue = view
46 | for (var n = _converters.length - 1; n >= 0; n--) {
47 | intermediateValue = _converters[n].model(intermediateValue)
48 | }
49 | return intermediateValue
50 | }
51 | }
52 | }
53 | }
54 |
55 | module.exports = function (model, property) {
56 | var _meta
57 | function hyperdomMeta () {
58 | return _meta || (_meta = bindingMeta(model, property))
59 | }
60 |
61 | var converter = chainConverters(2, arguments)
62 |
63 | return {
64 | get: function () {
65 | var meta = hyperdomMeta()
66 | var modelValue = model[property]
67 | var modelText
68 |
69 | if (meta.error) {
70 | return meta.view
71 | } else if (meta.view === undefined) {
72 | modelText = converter.view(modelValue)
73 | meta.view = modelText
74 | return modelText
75 | } else {
76 | var previousValue
77 | try {
78 | previousValue = converter.model(meta.view)
79 | } catch (e) {
80 | meta.error = e
81 | return meta.view
82 | }
83 | modelText = converter.view(modelValue)
84 | var normalisedPreviousText = converter.view(previousValue)
85 |
86 | if (modelText === normalisedPreviousText) {
87 | return meta.view
88 | } else {
89 | meta.view = modelText
90 | return modelText
91 | }
92 | }
93 | },
94 |
95 | set: function (view) {
96 | var meta = hyperdomMeta()
97 | meta.view = view
98 |
99 | try {
100 | model[property] = converter.model(view, model[property])
101 | delete meta.error
102 | } catch (e) {
103 | meta.error = e
104 | }
105 | },
106 |
107 | meta: function () {
108 | return hyperdomMeta()
109 | }
110 | }
111 | }
112 |
--------------------------------------------------------------------------------
/xml.js:
--------------------------------------------------------------------------------
1 | var AttributeHook = require('virtual-dom/virtual-hyperscript/hooks/attribute-hook')
2 |
3 | var namespaceRegex = /^([a-z0-9_-]+)(--|:)([a-z0-9_-]+)$/i
4 | var xmlnsRegex = /^xmlns(--|:)([a-z0-9_-]+)$/i
5 | var SVG_NAMESPACE = 'http://www.w3.org/2000/svg'
6 |
7 | function transformTanName (vnode, namespaces) {
8 | var tagNamespace = namespaceRegex.exec(vnode.tagName)
9 | if (tagNamespace) {
10 | var namespaceKey = tagNamespace[1]
11 | var namespace = namespaces[namespaceKey]
12 | if (namespace) {
13 | vnode.tagName = tagNamespace[1] + ':' + tagNamespace[3]
14 | vnode.namespace = namespace
15 | }
16 | } else if (!vnode.namespace) {
17 | vnode.namespace = namespaces['']
18 | }
19 | }
20 |
21 | function transformProperties (vnode, namespaces) {
22 | var properties = vnode.properties
23 |
24 | if (properties) {
25 | var attributes = properties.attributes || (properties.attributes = {})
26 |
27 | var keys = Object.keys(properties)
28 | for (var k = 0, l = keys.length; k < l; k++) {
29 | var key = keys[k]
30 | if (key !== 'style' && key !== 'attributes') {
31 | var match = namespaceRegex.exec(key)
32 | if (match) {
33 | properties[match[1] + ':' + match[3]] = new AttributeHook(namespaces[match[1]], properties[key])
34 | delete properties[key]
35 | } else {
36 | if (vnode.namespace === SVG_NAMESPACE && key === 'className') {
37 | attributes['class'] = properties.className
38 | delete properties.className
39 | } else {
40 | var property = properties[key]
41 | var type = typeof property
42 | if (type === 'string' || type === 'number' || type === 'boolean') {
43 | attributes[key] = property
44 | }
45 | }
46 | }
47 | }
48 | }
49 | }
50 | }
51 |
52 | function declaredNamespaces (vnode) {
53 | var namespaces = {
54 | '': vnode.properties.xmlns,
55 | xmlns: 'http://www.w3.org/2000/xmlns/'
56 | }
57 |
58 | var keys = Object.keys(vnode.properties)
59 |
60 | for (var k = 0, l = keys.length; k < l; k++) {
61 | var key = keys[k]
62 | var value = vnode.properties[key]
63 |
64 | if (key === 'xmlns') {
65 | namespaces[''] = value
66 | } else {
67 | var match = xmlnsRegex.exec(key)
68 |
69 | if (match) {
70 | namespaces[match[2]] = value
71 | }
72 | }
73 | }
74 |
75 | return namespaces
76 | }
77 |
78 | function transform (vnode) {
79 | var namespaces = declaredNamespaces(vnode)
80 |
81 | function transformChildren (vnode, namespaces) {
82 | transformTanName(vnode, namespaces)
83 | transformProperties(vnode, namespaces)
84 |
85 | if (vnode.children) {
86 | for (var c = 0, l = vnode.children.length; c < l; c++) {
87 | var child = vnode.children[c]
88 | if (!(child.properties && child.properties.xmlns)) {
89 | transformChildren(child, namespaces)
90 | }
91 | }
92 | }
93 | }
94 |
95 | transformChildren(vnode, namespaces)
96 |
97 | return vnode
98 | }
99 |
100 | module.exports.transform = transform
101 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
6 |
7 | ## Our Standards
8 |
9 | Examples of behavior that contributes to creating a positive environment include:
10 |
11 | * Using welcoming and inclusive language
12 | * Being respectful of differing viewpoints and experiences
13 | * Gracefully accepting constructive criticism
14 | * Focusing on what is best for the community
15 | * Showing empathy towards other community members
16 |
17 | Examples of unacceptable behavior by participants include:
18 |
19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances
20 | * Trolling, insulting/derogatory comments, and personal or political attacks
21 | * Public or private harassment
22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission
23 | * Other conduct which could reasonably be considered inappropriate in a professional setting
24 |
25 | ## Our Responsibilities
26 |
27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
28 |
29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
30 |
31 | ## Scope
32 |
33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
34 |
35 | ## Enforcement
36 |
37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at enquiries@featurist.co.uk. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
38 |
39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
40 |
41 | ## Attribution
42 |
43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
44 |
45 | [homepage]: http://contributor-covenant.org
46 | [version]: http://contributor-covenant.org/version/1/4/
47 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "hyperdom",
3 | "version": "2.1.0",
4 | "description": "A fast, feature rich and simple framework for building dynamic browser applications.",
5 | "main": "index.js",
6 | "dependencies": {
7 | "vdom-parser": "1.3.4",
8 | "vdom-to-html": "2.3.1",
9 | "virtual-dom": "2.1.1"
10 | },
11 | "devDependencies": {
12 | "@types/chai": "^4.1.4",
13 | "@types/jquery": "^3.3.6",
14 | "@types/jsdom": "^11.12.0",
15 | "@types/mocha": "^5.2.5",
16 | "babel-preset-hyperdom": "^1.0.0",
17 | "browser-monkey": "2.4.1",
18 | "chai": "3.5.0",
19 | "codesandbox-example-links": "^1.0.0",
20 | "detect-browser": "1.6.2",
21 | "docsify-cli": "^4.3.0",
22 | "electron": "1.8.2",
23 | "electron-mocha": "3.4.0",
24 | "eslint": "7.22.0",
25 | "eslint-config-standard": "16.0.2",
26 | "eslint-plugin-es5": "1.5.0",
27 | "eslint-plugin-import": "2.22.1",
28 | "eslint-plugin-node": "11.1.0",
29 | "eslint-plugin-promise": "4.3.1",
30 | "eslint-plugin-standard": "5.0.0",
31 | "gh-pages": "^2.0.1",
32 | "hyperx": "2.3.0",
33 | "jquery": "3.3.1",
34 | "jquery-sendkeys": "4.0.0",
35 | "jsdom": "12.1.0",
36 | "karma": "3.0.0",
37 | "karma-browserstack-launcher": "1.5.1",
38 | "karma-chrome-launcher": "2.2.0",
39 | "karma-cli": "1.0.1",
40 | "karma-electron-launcher": "0.2.0",
41 | "karma-firefox-launcher": "1.1.0",
42 | "karma-ievms": "0.1.0",
43 | "karma-mocha": "1.3.0",
44 | "karma-mocha-reporter": "2.2.5",
45 | "karma-safari-launcher": "1.0.0",
46 | "karma-sourcemap-loader": "^0.3.7",
47 | "karma-webpack": "^3.0.5",
48 | "lie": "3.1.1",
49 | "lowscore": "1.12.1",
50 | "mocha": "3.2.0",
51 | "trytryagain": "1.2.0",
52 | "ts-loader": "^5.2.2",
53 | "ts-node": "^7.0.1",
54 | "tslint": "^5.11.0",
55 | "typescript": "^3.2.1",
56 | "typescript-tslint-plugin": "^0.1.2",
57 | "uglify-js": "3.6.0",
58 | "watchify": "3.9.0",
59 | "webpack": "4.35.0",
60 | "webpack-cli": "^3.3.5"
61 | },
62 | "scripts": {
63 | "test": "./node_modules/.bin/tsc && npm run karma && npm run mocha && eslint . && npm run tslint",
64 | "test-all": "BROWSERS=all npm test",
65 | "tslint": "tslint --project . *.d.ts test/**/*.ts{,x}",
66 | "karma": "karma start --single-run",
67 | "mocha": "TS_NODE_FILES=true mocha -r ts-node/register test/server/*Spec.ts",
68 | "build": "webpack index.js && uglifyjs --compress --mangle -o dist/hyperdom.min.js dist/main.js",
69 | "size": "npm run build && gzip < dist/hyperdom.min.js > dist/hyperdom.min.js.gz && ls -lh dist/hyperdom.*",
70 | "dev-website": "yarn build-website && docsify serve ./website-dist",
71 | "watch-docs": "ls docs/*.md | entr yarn codesandbox-example-links --output-dir=./website-dist ./docs/*.md",
72 | "build-website": "rm -rf ./website-dist && cp -r ./docs ./website-dist && codesandbox-example-links --output-dir=./website-dist ./docs/*.md",
73 | "publish-website": "yarn build-website && gh-pages -t -d website-dist"
74 | },
75 | "keywords": [
76 | "virtual-dom",
77 | "front-end",
78 | "mvc",
79 | "framework",
80 | "html",
81 | "plastiq",
82 | "hyperdom"
83 | ],
84 | "author": "Tim Macfarlane Orange
80 | Green
81 | Hello world github/linguist#1 cool, and #1!
'" 52 | gh_toc_md2html() { 53 | local gh_file_md=$1 54 | URL=https://api.github.com/markdown/raw 55 | TOKEN="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)/token.txt" 56 | if [ -f "$TOKEN" ]; then 57 | URL="$URL?access_token=$(cat $TOKEN)" 58 | fi 59 | OUTPUT="$(curl -s --user-agent "$gh_user_agent" \ 60 | --data-binary @"$gh_file_md" -H "Content-Type:text/plain" \ 61 | $URL)" 62 | 63 | if [ "$?" != "0" ]; then 64 | echo "XXNetworkErrorXX" 65 | fi 66 | if [ "$(echo "${OUTPUT}" | awk '/API rate limit exceeded/')" != "" ]; then 67 | echo "XXRateLimitXX" 68 | else 69 | echo "${OUTPUT}" 70 | fi 71 | } 72 | 73 | 74 | # 75 | # Is passed string url 76 | # 77 | gh_is_url() { 78 | case $1 in 79 | https* | http*) 80 | echo "yes";; 81 | *) 82 | echo "no";; 83 | esac 84 | } 85 | 86 | # 87 | # TOC generator 88 | # 89 | gh_toc(){ 90 | local gh_src=$1 91 | local gh_src_copy=$1 92 | local gh_ttl_docs=$2 93 | local need_replace=$3 94 | 95 | if [ "$gh_src" = "" ]; then 96 | echo "Please, enter URL or local path for a README.md" 97 | exit 1 98 | fi 99 | 100 | 101 | # Show "TOC" string only if working with one document 102 | if [ "$gh_ttl_docs" = "1" ]; then 103 | 104 | echo "Table of Contents" 105 | echo "=================" 106 | echo "" 107 | gh_src_copy="" 108 | 109 | fi 110 | 111 | if [ "$(gh_is_url "$gh_src")" == "yes" ]; then 112 | gh_toc_load "$gh_src" | gh_toc_grab "$gh_src_copy" 113 | if [ "${PIPESTATUS[0]}" != "0" ]; then 114 | echo "Could not load remote document." 115 | echo "Please check your url or network connectivity" 116 | exit 1 117 | fi 118 | if [ "$need_replace" = "yes" ]; then 119 | echo 120 | echo "!! '$gh_src' is not a local file" 121 | echo "!! Can't insert the TOC into it." 122 | echo 123 | fi 124 | else 125 | local rawhtml=$(gh_toc_md2html "$gh_src") 126 | if [ "$rawhtml" == "XXNetworkErrorXX" ]; then 127 | echo "Parsing local markdown file requires access to github API" 128 | echo "Please make sure curl is installed and check your network connectivity" 129 | exit 1 130 | fi 131 | if [ "$rawhtml" == "XXRateLimitXX" ]; then 132 | echo "Parsing local markdown file requires access to github API" 133 | echo "Error: You exceeded the hourly limit. See: https://developer.github.com/v3/#rate-limiting" 134 | TOKEN="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)/token.txt" 135 | echo "or place github auth token here: $TOKEN" 136 | exit 1 137 | fi 138 | local toc=`echo "$rawhtml" | gh_toc_grab "$gh_src_copy"` 139 | echo "$toc" 140 | if [ "$need_replace" = "yes" ]; then 141 | local ts="<\!--ts-->" 142 | local te="<\!--te-->" 143 | local dt=`date +'%F_%H%M%S'` 144 | local ext=".orig.${dt}" 145 | local toc_path="${gh_src}.toc.${dt}" 146 | local toc_footer="" 147 | # http://fahdshariff.blogspot.ru/2012/12/sed-mutli-line-replacement-between-two.html 148 | # clear old TOC 149 | sed -i${ext} "/${ts}/,/${te}/{//!d;}" "$gh_src" 150 | # create toc file 151 | echo "${toc}" > "${toc_path}" 152 | echo -e "\n${toc_footer}\n" >> "$toc_path" 153 | # insert toc file 154 | if [[ "`uname`" == "Darwin" ]]; then 155 | sed -i "" "/${ts}/r ${toc_path}" "$gh_src" 156 | else 157 | sed -i "/${ts}/r ${toc_path}" "$gh_src" 158 | fi 159 | echo 160 | echo "!! TOC was added into: '$gh_src'" 161 | echo "!! Origin version of the file: '${gh_src}${ext}'" 162 | echo "!! TOC added into a separate file: '${toc_path}'" 163 | echo 164 | fi 165 | fi 166 | } 167 | 168 | # 169 | # Grabber of the TOC from rendered html 170 | # 171 | # $1 — a source url of document. 172 | # It's need if TOC is generated for multiple documents. 173 | # 174 | gh_toc_grab() { 175 | # if closedfoo1
178 | #
179 | # became: The command foo1
180 | sed -e ':a' -e 'N' -e '$!ba' -e 's/\n<\/h/<\/h/g' |
181 | # find strings that corresponds to template
182 | grep -E -o '...-
97 |
- one 98 |
- two 99 |
- three 100 |
-
107 |
- zero 108 |
- one 109 |
- two 110 |
- three 111 |
-
127 |
- one 128 |
- two 129 |
- three 130 |
-
137 |
- zero 138 |
- one 139 |
- two 140 |
- three 141 |
{i}), ', ')
199 | ```
200 |
201 | Will produce this HTML:
202 |
203 | ```html
204 | one, two, three
205 | ```
206 |
207 | ### Data Attributes
208 |
209 | You can use either `data-*` attributes or set the `data` attribute to an object:
210 |
211 | ```jsx
212 | h('div', {'data-stuff': 'something'})
213 | h('div', {dataset: {stuff: 'something'}})
214 |
215 |
216 | ```
217 |
218 | ### Responding to Events
219 |
220 | Pass a function to any regular HTML `on*` event handler in, such as `onclick`. That event handler can modify the state of the application, and once finished, the HTML will be re-rendered to reflect the new state.
221 |
222 | If you return a promise from your event handler then the HTML will be re-rendered twice: once when the event handler initially returns, and again when the promise resolves.
223 |
224 | ```jsx
225 | class App {
226 | constructor() {
227 | this.people = []
228 | }
229 |
230 | addPerson() {
231 | this.people.push({name: 'Person ' + (this.people.length + 1)})
232 | }
233 |
234 | render() {
235 | return
236 |
243 | }
244 | }
245 |
246 | hyperdom.append(document.body, new App())
247 | ```
248 |
249 | ### Binding the Inputs
250 |
251 | This applies to `textarea` and input types `text`, `url`, `date`, `email`, `color`, `range`, `checkbox`, `number`, and a few more obscure ones. Most of them.
252 |
253 | The `binding` attribute can be used to bind an input to a model field. You can pass either an array `[model, 'fieldName']`, or an object containing `get` and `set` methods: `{get(), set(value)}`. See [bindings](#the_binding_attribute) for more details.
254 |
255 | ```jsx
256 | class App {
257 | render() {
258 | return -
237 | {
238 | this.people.map(person =>
- {person.name} ) 239 | } 240 |
259 |
260 |
261 |
263 | }
264 | }
265 | ```
266 |
267 | ### Radio Buttons
268 |
269 | Bind the model to each radio button. The buttons can be bound to complex (non-string) values, such as the `blue` object below.
270 |
271 | ```jsx
272 | const blue = { name: 'blue' };
273 |
274 | class App {
275 | constructor() {
276 | this.colour: blue
277 | }
278 |
279 | render() {
280 | return hi {this.name}
262 |
281 |
282 |
283 |
287 | }
288 | }
289 |
290 | hyperdom.append(document.body, new App());
291 | ```
292 |
293 | ### Select Dropdowns
294 |
295 | Bind the model onto the `select` element. The `option`s can have complex (non-string) values.
296 |
297 | ```jsx
298 | const blue = { name: 'blue' };
299 |
300 | class App {
301 | constructor() {
302 | this.colour = blue
303 | }
304 |
305 | render() {
306 | return
284 | colour: {JSON.stringify(this.colour)}
285 |
286 |
307 |
311 |
313 | }
314 | }
315 |
316 | hyperdom.append(document.body, new App());
317 | ```
318 |
319 | ### File Inputs
320 |
321 | The file input is much like any other binding, except that only the binding's `set` method ever called, never the `get` method - the file input can only be set by a user selecting a file.
322 |
323 | ```js
324 | class App {
325 | constructor () {
326 | this.filename = '(no file selected)'
327 | this.contents = ''
328 | }
329 |
330 | render() {
331 | return {JSON.stringify(this.colour)}
312 |
332 | this.loadFile(file) } }>
333 |
338 | }
339 |
340 | loadFile(file) {
341 | return new Promise((resolve) => {
342 | const reader = new FileReader();
343 | reader.readAsText(file);
344 |
345 | reader.onloadend = () => {
346 | this.filename = file.name;
347 | this.contents = reader.result;
348 | resolve();
349 | };
350 | });
351 | }
352 | }
353 |
354 | hyperdom.append(document.body, new App())
355 | ```
356 |
357 | ### Window Events
358 |
359 | You can attach event handlers to `window`, such as `window.onscroll` and `window.onresize`. Return a `windowEvents()` from your render function passing an object containing the event handlers to attach. When the window vdom is shown, the event handlers are added to `window`, when the window vdom is not shown, the event handlers are removed from `window`.
360 |
361 | E.g. to add an `onresize` handler:
362 |
363 | ```js
364 | const windowEvents = require('hyperdom/windowEvents');
365 |
366 | class App {
367 | render() {
368 | return {this.filename}
334 |
335 | {this.contents}
336 |
337 |
369 | width = {window.innerWidth}, height = {window.innerHeight}
370 | {
371 | windowEvents({
372 | onresize: () => console.log('resizing')
373 | })
374 | }
375 | )
376 | }
377 | }
378 | ```
379 |
380 | ### Mapping the model to the view
381 |
382 | Sometimes you have an input that doesn't map cleanly to a view, this is often just because the HTML input element represents a string value, while the model represents something else like a number or a date.
383 |
384 | For this you can use a `mapBinding`, found in `hyperdom/mapBinding`.
385 |
386 | ```jsx
387 | const mapBinding = require('hyperdom/mapBinding')
388 |
389 | const integer = {
390 | view (model) {
391 | // convert the model value to a string for the view
392 | return model.toString()
393 | },
394 |
395 | model (view) {
396 | // convert the input value to an integer for the model
397 | return Number(view)
398 | }
399 | }
400 |
401 |
402 | ```
403 |
404 | As is often the case, it's possible that the user enters an invalid value for the model, for example they type `xyz` into a field that should be a number. When this happens, you can throw an exception on the `model(value)` method. When this happens, the model is not modified, and so keeps the old value, but also, crucially, the view continues to be rendered with the invalid value. This way, the user can go from a valid value, they can pass through some invalid values as they type in finally a valid value. For example, when typing the date `2020-02-04`, it's not until the date is fully typed that it becomes valid.
405 |
406 | ```js
407 | const mapBinding = require('hyperdom/mapBinding')
408 |
409 | const date = {
410 | view (date) {
411 | // convert the model value into the user input value
412 | return `${date.getFullYear()}-${date.getUTCMonth() + 1}-${date.getUTCDate()}`
413 | },
414 | model (view) {
415 | // test the date format
416 | if (!/^\d{4}-\d{2}-\d{2}$/.test(view)) {
417 | // not correct, keep typing
418 | throw new Error('Must be a date of the format YYYY-MM-DD');
419 | } else {
420 | // correct format, set the model
421 | return new Date(view);
422 | }
423 | }
424 | }
425 |
426 |
427 | ```
428 |
429 | Under the hood, hyperdom stores the intermediate value and the exception in the model's [meta](#meta) area. You can get the exception by calling `hyperdom.meta(model, field).error`.
430 |
431 | ## Raw HTML
432 |
433 | **Careful of script injection attacks!** Make sure the HTML is trusted or free of `