](#children--arrayvnode)
+ - [text : string](#text--string)
+ - [elm : Element](#elm--element)
+ - [key : string | number](#key--string--number)
+- [Structuring applications](#structuring-applications)
+- [Common errors](#common-errors)
+- [Opportunity for community feedback](#opportunity-for-community-feedback)
## Core documentation
@@ -157,10 +171,9 @@ takes a list of modules and returns a `patch` function that uses the
specified set of modules.
```mjs
-import { classModule } from 'snabbdom/modules/class'
-import { styleModule } from 'snabbdom/modules/style'
+import { classModule, styleModule } from "snabbdom";
-const patch = init([classModule, styleModule])
+const patch = init([classModule, styleModule]);
```
### `patch`
@@ -181,7 +194,7 @@ performant architecture. This also avoids the creation of a new old
vnode tree.
```mjs
-patch(oldVnode, newVnode)
+patch(oldVnode, newVnode);
```
#### Unmounting
@@ -189,53 +202,65 @@ patch(oldVnode, newVnode)
While there is no API specifically for removing a VNode tree from its mount point element, one way of almost achieving this is providing a comment VNode as the second argument to `patch`, such as:
```mjs
-patch(oldVnode, h('!', { hooks: { post: () => { /* patch complete */ } } }))
+patch(
+ oldVnode,
+ h("!", {
+ hooks: {
+ post: () => {
+ /* patch complete */
+ },
+ },
+ })
+);
```
Of course, then there is still a single comment node at the mount point.
-### `snabbdom/h`
+### `h`
-It is recommended that you use `snabbdom/h` to create vnodes. `h` accepts a
+It is recommended that you use `h` to create vnodes. It accepts a
tag/selector as a string, an optional data object and an optional string or
array of children.
```mjs
-import { h } from 'snabbdom/h'
+import { h } from "snabbdom";
-const vnode = h('div', { style: { color: '#000' } }, [
- h('h1', 'Headline'),
- h('p', 'A paragraph'),
-])
+const vnode = h("div", { style: { color: "#000" } }, [
+ h("h1", "Headline"),
+ h("p", "A paragraph"),
+]);
```
-### `snabbdom/tovnode`
+### `tovnode`
-Converts a DOM node into a virtual node. Especially good for patching over an pre-existing,
+Converts a DOM node into a virtual node. Especially good for patching over an pre-existing,
server-side generated content.
```mjs
-import { init } from 'snabbdom/init'
-import { classModule } from 'snabbdom/modules/class'
-import { propsModule } from 'snabbdom/modules/props'
-import { styleModule } from 'snabbdom/modules/style'
-import { eventListenersModule } from 'snabbdom/modules/eventlisteners'
-import { h } from 'snabbdom/h' // helper function for creating vnodes
-import { toVNode } from 'snabbdom/tovnode'
+import {
+ init,
+ classModule,
+ propsModule,
+ styleModule,
+ eventListenersModule,
+ h,
+ toVNode,
+} from "snabbdom";
-const patch = init([ // Init patch function with chosen modules
+const patch = init([
+ // Init patch function with chosen modules
classModule, // makes it easy to toggle classes
propsModule, // for setting properties on DOM elements
styleModule, // handles styling on elements with support for animations
eventListenersModule, // attaches event listeners
-])
+]);
-const newVNode = h('div', { style: { color: '#000' } }, [
- h('h1', 'Headline'),
- h('p', 'A paragraph'),
-])
+const newVNode = h("div", { style: { color: "#000" } }, [
+ h("h1", "Headline"),
+ h("p", "A paragraph"),
+]);
-patch(toVNode(document.querySelector('.container')), newVNode)
+patch(toVNode(document.querySelector(".container")), newVNode);
```
### Hooks
@@ -247,18 +272,18 @@ desired points in the life of a virtual node.
#### Overview
-| Name | Triggered when | Arguments to callback |
-| - | - | - |
-| `pre` | the patch process begins | none |
-| `init` | a vnode has been added | `vnode` |
-| `create` | a DOM element has been created based on a vnode | `emptyVnode, vnode` |
-| `insert` | an element has been inserted into the DOM | `vnode` |
-| `prepatch` | an element is about to be patched | `oldVnode, vnode` |
-| `update` | an element is being updated | `oldVnode, vnode` |
-| `postpatch` | an element has been patched | `oldVnode, vnode` |
-| `destroy` | an element is directly or indirectly being removed | `vnode` |
-| `remove` | an element is directly being removed from the DOM | `vnode, removeCallback` |
-| `post` | the patch process is done | none |
+| Name | Triggered when | Arguments to callback |
+| ----------- | -------------------------------------------------- | ----------------------- |
+| `pre` | the patch process begins | none |
+| `init` | a vnode has been added | `vnode` |
+| `create` | a DOM element has been created based on a vnode | `emptyVnode, vnode` |
+| `insert` | an element has been inserted into the DOM | `vnode` |
+| `prepatch` | an element is about to be patched | `oldVnode, vnode` |
+| `update` | an element is being updated | `oldVnode, vnode` |
+| `postpatch` | an element has been patched | `oldVnode, vnode` |
+| `destroy` | an element is directly or indirectly being removed | `vnode` |
+| `remove` | an element is directly being removed from the DOM | `vnode, removeCallback` |
+| `post` | the patch process is done | none |
The following hooks are available for modules: `pre`, `create`,
`update`, `destroy`, `remove`, `post`.
@@ -273,12 +298,14 @@ To use hooks, pass them as an object to `hook` field of the data
object argument.
```mjs
-h('div.row', {
+h("div.row", {
key: movie.rank,
hook: {
- insert: (vnode) => { movie.elmHeight = vnode.elm.offsetHeight }
- }
-})
+ insert: (vnode) => {
+ movie.elmHeight = vnode.elm.offsetHeight;
+ },
+ },
+});
```
#### The `init` hook
@@ -319,10 +346,10 @@ To see the difference between this hook and the `remove` hook,
consider an example.
```mjs
-const vnode1 = h('div', [h('div', [h('span', 'Hello')])])
-const vnode2 = h('div', [])
-patch(container, vnode1)
-patch(vnode1, vnode2)
+const vnode1 = h("div", [h("div", [h("span", "Hello")])]);
+const vnode2 = h("div", []);
+patch(container, vnode1);
+patch(vnode1, vnode2);
```
Here `destroy` is triggered for both the inner `div` element _and_ the
@@ -345,8 +372,8 @@ const myModule = {
},
update: function (oldVnode, vnode) {
// invoked whenever a virtual node is updated
- }
-}
+ },
+};
```
With this mechanism you can easily augment the behaviour of Snabbdom.
@@ -365,7 +392,7 @@ object should map class names to booleans that indicates whether or
not the class should stay or go on the vnode.
```mjs
-h('a', { class: { active: true, selected: false } }, 'Toggle')
+h("a", { class: { active: true, selected: false } }, "Toggle");
```
### The props module
@@ -373,7 +400,7 @@ h('a', { class: { active: true, selected: false } }, 'Toggle')
Allows you to set properties on DOM elements.
```mjs
-h('a', { props: { href: '/foo' } }, 'Go to Foo')
+h("a", { props: { href: "/foo" } }, "Go to Foo");
```
Properties can only be set. Not removed. Even though browsers allow addition and
@@ -389,7 +416,7 @@ instead. Perhaps via [the dataset module](#the-dataset-module).
Same as props, but set attributes instead of properties on DOM elements.
```mjs
-h('a', { attrs: { href: '/foo' } }, 'Go to Foo')
+h("a", { attrs: { href: "/foo" } }, "Go to Foo");
```
Attributes are added and updated using `setAttribute`. In case of an
@@ -412,7 +439,7 @@ the DOM element.
Allows you to set custom data attributes (`data-*`) on DOM elements. These can then be accessed with the [HTMLElement.dataset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset) property.
```mjs
-h('button', { dataset: { action: 'reset' } }, 'Reset')
+h("button", { dataset: { action: "reset" } }, "Reset");
```
### The style module
@@ -421,9 +448,17 @@ The style module is for making your HTML look slick and animate smoothly. At
its core it allows you to set CSS properties on elements.
```mjs
-h('span', {
- style: { border: '1px solid #bada55', color: '#c0ffee', fontWeight: 'bold' }
-}, 'Say my name, and every colour illuminates')
+h(
+ "span",
+ {
+ style: {
+ border: "1px solid #bada55",
+ color: "#c0ffee",
+ fontWeight: "bold",
+ },
+ },
+ "Say my name, and every colour illuminates"
+);
```
Note that the style module does not remove style attributes if they
@@ -431,9 +466,13 @@ are removed as properties from the style object. To remove a style,
you should instead set it to the empty string.
```mjs
-h('div', {
- style: { position: shouldFollow ? 'fixed' : '' }
-}, 'I, I follow, I follow you')
+h(
+ "div",
+ {
+ style: { position: shouldFollow ? "fixed" : "" },
+ },
+ "I, I follow, I follow you"
+);
```
#### Custom properties (CSS variables)
@@ -442,9 +481,13 @@ CSS custom properties (aka CSS variables) are supported, they must be prefixed
with `--`
```mjs
-h('div', {
- style: { '--warnColor': 'yellow' }
-}, 'Warning')
+h(
+ "div",
+ {
+ style: { "--warnColor": "yellow" },
+ },
+ "Warning"
+);
```
#### Delayed properties
@@ -453,9 +496,17 @@ You can specify properties as being delayed. Whenever these properties
change, the change is not applied until after the next frame.
```mjs
-h('span', {
- style: { opacity: '0', transition: 'opacity 1s', delayed: { opacity: '1' } }
-}, 'Imma fade right in!')
+h(
+ "span",
+ {
+ style: {
+ opacity: "0",
+ transition: "opacity 1s",
+ delayed: { opacity: "1" },
+ },
+ },
+ "Imma fade right in!"
+);
```
This makes it easy to declaratively animate the entry of elements.
@@ -470,13 +521,17 @@ animated with CSS transitions. Only once all the styles are done
animating will the element be removed from the DOM.
```mjs
-h('span', {
- style: {
- opacity: '1',
- transition: 'opacity 1s',
- remove: { opacity: '0' }
- }
-}, 'It\'s better to fade out than to burn away')
+h(
+ "span",
+ {
+ style: {
+ opacity: "1",
+ transition: "opacity 1s",
+ remove: { opacity: "0" },
+ },
+ },
+ "It's better to fade out than to burn away"
+);
```
This makes it easy to declaratively animate the removal of elements.
@@ -486,13 +541,17 @@ The `all` value of `transition-property` is not supported.
#### Set properties on `destroy`
```mjs
-h('span', {
- style: {
- opacity: '1',
- transition: 'opacity 1s',
- destroy: { opacity: '0' }
- }
-}, 'It\'s better to fade out than to burn away')
+h(
+ "span",
+ {
+ style: {
+ opacity: "1",
+ transition: "opacity 1s",
+ destroy: { opacity: "0" },
+ },
+ },
+ "It's better to fade out than to burn away"
+);
```
The `all` value of `transition-property` is not supported.
@@ -508,10 +567,10 @@ you want to listen to. The function will be called when the event
happens and will be passed the event object that belongs to it.
```mjs
-function clickHandler (ev) {
- console.log('got clicked')
+function clickHandler(ev) {
+ console.log("got clicked");
}
-h('div', { on: { click: clickHandler } })
+h("div", { on: { click: clickHandler } });
```
Very often, however, you're not really interested in the event object
@@ -528,27 +587,27 @@ first element in the array should be a function that will be invoked
with the value in the second element once the event occurs.
```mjs
-function clickHandler (number) {
- console.log('button ' + number + ' was clicked!')
+function clickHandler(number) {
+ console.log("button " + number + " was clicked!");
}
-h('div', [
- h('a', { on: { click: [clickHandler, 1] } }),
- h('a', { on: { click: [clickHandler, 2] } }),
- h('a', { on: { click: [clickHandler, 3] } }),
-])
+h("div", [
+ h("a", { on: { click: [clickHandler, 1] } }),
+ h("a", { on: { click: [clickHandler, 2] } }),
+ h("a", { on: { click: [clickHandler, 3] } }),
+]);
```
Each handler is called not only with the given arguments but also with the current event and vnode appended to the argument list. It also supports using multiple listeners per event by specifying an array of handlers:
```mjs
stopPropagation = function (ev) {
- ev.stopPropagation()
-}
+ ev.stopPropagation();
+};
sendValue = function (func, ev, vnode) {
- func(vnode.elm.value)
-}
+ func(vnode.elm.value);
+};
-h('a', { on: { click: [[sendValue, console.log], stopPropagation] } })
+h("a", { on: { click: [[sendValue, console.log], stopPropagation] } });
```
Snabbdom allows swapping event handlers between renders. This happens without
@@ -565,22 +624,24 @@ In particular, you should **not** do something like this:
```mjs
// Does not work
const sharedHandler = {
- change: function (e) { console.log('you chose: ' + e.target.value) }
-}
-h('div', [
- h('input', {
- props: { type: 'radio', name: 'test', value: '0' },
- on: sharedHandler
+ change: function (e) {
+ console.log("you chose: " + e.target.value);
+ },
+};
+h("div", [
+ h("input", {
+ props: { type: "radio", name: "test", value: "0" },
+ on: sharedHandler,
}),
- h('input', {
- props: { type: 'radio', name: 'test', value: '1' },
- on: sharedHandler
+ h("input", {
+ props: { type: "radio", name: "test", value: "1" },
+ on: sharedHandler,
}),
- h('input', {
- props: { type: 'radio', name: 'test', value: '2' },
- on: sharedHandler
- })
-])
+ h("input", {
+ props: { type: "radio", name: "test", value: "2" },
+ on: sharedHandler,
+ }),
+]);
```
For many such cases, you can use array-based handlers instead (described above).
@@ -589,22 +650,22 @@ Alternatively, simply make sure each node is passed unique `on` values:
```mjs
// Works
const sharedHandler = function (e) {
- console.log('you chose: ' + e.target.value)
-}
-h('div', [
- h('input', {
- props: { type: 'radio', name: 'test', value: '0' },
- on: { change: sharedHandler }
+ console.log("you chose: " + e.target.value);
+};
+h("div", [
+ h("input", {
+ props: { type: "radio", name: "test", value: "0" },
+ on: { change: sharedHandler },
}),
- h('input', {
- props: { type: 'radio', name: 'test', value: '1' },
- on: { change: sharedHandler }
+ h("input", {
+ props: { type: "radio", name: "test", value: "1" },
+ on: { change: sharedHandler },
}),
- h('input', {
- props: { type: 'radio', name: 'test', value: '2' },
- on: { change: sharedHandler }
- })
-])
+ h("input", {
+ props: { type: "radio", name: "test", value: "2" },
+ on: { change: sharedHandler },
+ }),
+]);
```
## SVG
@@ -614,11 +675,20 @@ nodes. SVG elements are automatically created with the appropriate
namespaces.
```mjs
-const vnode = h('div', [
- h('svg', { attrs: { width: 100, height: 100 } }, [
- h('circle', { attrs: { cx: 50, cy: 50, r: 40, stroke: 'green', 'stroke-width': 4, fill: 'yellow' } })
- ])
-])
+const vnode = h("div", [
+ h("svg", { attrs: { width: 100, height: 100 } }, [
+ h("circle", {
+ attrs: {
+ cx: 50,
+ cy: 50,
+ r: 40,
+ stroke: "green",
+ "stroke-width": 4,
+ fill: "yellow",
+ },
+ }),
+ ]),
+]);
```
See also the [SVG example](./examples/svg) and the [SVG Carousel example](./examples/carousel-svg/).
@@ -650,8 +720,8 @@ dealing with immutable data.
Consider a simple function for creating a virtual node based on a number.
```mjs
-function numberView (n) {
- return h('div', 'Number is: ' + n)
+function numberView(n) {
+ return h("div", "Number is: " + n);
}
```
@@ -661,8 +731,8 @@ vnode is wasteful. To avoid the overhead we can use the `thunk` helper
function.
```mjs
-function render (state) {
- return thunk('num', numberView, [state.number])
+function render(state) {
+ return thunk("num", numberView, [state.number]);
}
```
@@ -676,22 +746,77 @@ The view function here is only an example. In practice thunks are only
relevant if you are rendering a complicated view that takes
significant computational time to generate.
+## JSX
+
+### TypeScript
+
+Add the following options to your `tsconfig.json`:
+
+```json
+{
+ "compilerOptions": {
+ "jsx": "react",
+ "jsxFactory": "jsx"
+ }
+}
+```
+
+Then make sure that you use the `.tsx` file extension and import the `jsx` function at the top of the file:
+
+```tsx
+import { jsx, VNode } from "snabbdom";
+
+const node: VNode = (
+
+ I was created with JSX
+
+);
+```
+
+### Babel
+
+Add the following options to your babel configuration:
+
+```json
+{
+ "plugins": [
+ [
+ "@babel/plugin-transform-react-jsx",
+ {
+ "pragma": "jsx"
+ }
+ ]
+ ]
+}
+```
+
+Then make sure that you use the `.jsx` file extension and import the `jsx` function at the top of the file:
+
+```jsx
+import { jsx } from "snabbdom";
+
+const node = (
+
+ I was created with JSX
+
+);
+```
+
## Virtual Node
**Properties**
-* [sel](#sel--string)
-* [data](#data--object)
-* [children](#children--array)
-* [text](#text--string)
-* [elm](#elm--element)
-* [key](#key--string--number)
+- [sel](#sel--string)
+- [data](#data--object)
+- [children](#children--array)
+- [text](#text--string)
+- [elm](#elm--element)
+- [key](#key--string--number)
### sel : String
The `.sel` property of a virtual node is the CSS selector passed to
-[`h()`](#snabbdomh) during creation. For example: `h('div#container',
-{}, [...])` will create a a virtual node which has `div#container` as
+[`h()`](#snabbdomh) during creation. For example: `h('div#container', {}, [...])` will create a a virtual node which has `div#container` as
its `.sel` property.
### data : Object
@@ -708,9 +833,9 @@ For example `h('div', {props: {className: 'container'}}, [...])` will produce a
```mjs
({
props: {
- className: 'container'
- }
-})
+ className: "container",
+ },
+});
```
as its `.data` object.
@@ -728,14 +853,14 @@ create a virtual node with
```mjs
[
{
- sel: 'h1',
+ sel: "h1",
data: {},
children: undefined,
- text: 'Hello, World',
+ text: "Hello, World",
elm: Element,
key: undefined,
- }
-]
+ },
+];
```
as its `.children` property.
@@ -779,33 +904,33 @@ regards to how you should structure your application.
Here are some approaches to building applications with Snabbdom.
-* [functional-frontend-architecture](https://github.com/paldepind/functional-frontend-architecture) –
+- [functional-frontend-architecture](https://github.com/paldepind/functional-frontend-architecture) –
a repository containing several example applications that
demonstrates an architecture that uses Snabbdom.
-* [Cycle.js](https://cycle.js.org/) –
- "A functional and reactive JavaScript framework for cleaner code"
- uses Snabbdom
-* [Vue.js](http://vuejs.org/) use a fork of snabbdom.
-* [scheme-todomvc](https://github.com/amirouche/scheme-todomvc/) build
- redux-like architecture on top of snabbdom bindings.
-* [kaiju](https://github.com/AlexGalays/kaiju) -
+- [Cycle.js](https://cycle.js.org/) –
+ "A functional and reactive JavaScript framework for cleaner code"
+ uses Snabbdom
+- [Vue.js](http://vuejs.org/) use a fork of snabbdom.
+- [scheme-todomvc](https://github.com/amirouche/scheme-todomvc/) build
+ redux-like architecture on top of snabbdom bindings.
+- [kaiju](https://github.com/AlexGalays/kaiju) -
Stateful components and observables on top of snabbdom
-* [Tweed](https://tweedjs.github.io) –
+- [Tweed](https://tweedjs.github.io) –
An Object Oriented approach to reactive interfaces.
-* [Cyclow](http://cyclow.js.org) -
+- [Cyclow](http://cyclow.js.org) -
"A reactive frontend framework for JavaScript"
uses Snabbdom
-* [Tung](https://github.com/Reon90/tung) –
+- [Tung](https://github.com/Reon90/tung) –
A JavaScript library for rendering html. Tung helps to divide html and JavaScript development.
-* [sprotty](https://github.com/theia-ide/sprotty) - "A web-based diagramming framework" uses Snabbdom.
-* [Mark Text](https://github.com/marktext/marktext) - "Realtime preview Markdown Editor" build on Snabbdom.
-* [puddles](https://github.com/flintinatux/puddles) -
+- [sprotty](https://github.com/theia-ide/sprotty) - "A web-based diagramming framework" uses Snabbdom.
+- [Mark Text](https://github.com/marktext/marktext) - "Realtime preview Markdown Editor" build on Snabbdom.
+- [puddles](https://github.com/flintinatux/puddles) -
"Tiny vdom app framework. Pure Redux. No boilerplate." - Built with :heart: on Snabbdom.
-* [Backbone.VDOMView](https://github.com/jcbrand/backbone.vdomview) - A [Backbone](http://backbonejs.org/) View with VirtualDOM capability via Snabbdom.
-* [Rosmaro Snabbdom starter](https://github.com/lukaszmakuch/rosmaro-snabbdom-starter) - Building user interfaces with state machines and Snabbdom.
-* [Pureact](https://github.com/irony/pureact) - "65 lines implementation of React incl Redux and hooks with only one dependency - Snabbdom"
-* [Snabberb](https://github.com/tobymao/snabberb) - A minimalistic Ruby framework using [Opal](https://github.com/opal/opal) and Snabbdom for building reactive views.
-* [WebCell](https://github.com/EasyWebApp/WebCell) - Web Components engine based on JSX & TypeScript
+- [Backbone.VDOMView](https://github.com/jcbrand/backbone.vdomview) - A [Backbone](http://backbonejs.org/) View with VirtualDOM capability via Snabbdom.
+- [Rosmaro Snabbdom starter](https://github.com/lukaszmakuch/rosmaro-snabbdom-starter) - Building user interfaces with state machines and Snabbdom.
+- [Pureact](https://github.com/irony/pureact) - "65 lines implementation of React incl Redux and hooks with only one dependency - Snabbdom"
+- [Snabberb](https://github.com/tobymao/snabberb) - A minimalistic Ruby framework using [Opal](https://github.com/opal/opal) and Snabbdom for building reactive views.
+- [WebCell](https://github.com/EasyWebApp/WebCell) - Web Components engine based on JSX & TypeScript
Be sure to share it if you're building an application in another way
using Snabbdom.
@@ -820,40 +945,40 @@ Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node':
The reason for this error is reusing of vnodes between patches (see code example), snabbdom stores actual dom nodes inside the virtual dom nodes passed to it as performance improvement, so reusing nodes between patches is not supported.
```mjs
-const sharedNode = h('div', {}, 'Selected')
-const vnode1 = h('div', [
- h('div', {}, ['One']),
- h('div', {}, ['Two']),
- h('div', {}, [sharedNode]),
-])
-const vnode2 = h('div', [
- h('div', {}, ['One']),
- h('div', {}, [sharedNode]),
- h('div', {}, ['Three']),
-])
-patch(container, vnode1)
-patch(vnode1, vnode2)
+const sharedNode = h("div", {}, "Selected");
+const vnode1 = h("div", [
+ h("div", {}, ["One"]),
+ h("div", {}, ["Two"]),
+ h("div", {}, [sharedNode]),
+]);
+const vnode2 = h("div", [
+ h("div", {}, ["One"]),
+ h("div", {}, [sharedNode]),
+ h("div", {}, ["Three"]),
+]);
+patch(container, vnode1);
+patch(vnode1, vnode2);
```
You can fix this issue by creating a shallow copy of the object (here with object spread syntax):
```mjs
-const vnode2 = h('div', [
- h('div', {}, ['One']),
- h('div', {}, [{ ...sharedNode }]),
- h('div', {}, ['Three']),
-])
+const vnode2 = h("div", [
+ h("div", {}, ["One"]),
+ h("div", {}, [{ ...sharedNode }]),
+ h("div", {}, ["Three"]),
+]);
```
Another solution would be to wrap shared vnodes in a factory function:
```mjs
-const sharedNode = () => h('div', {}, 'Selected')
-const vnode1 = h('div', [
- h('div', {}, ['One']),
- h('div', {}, ['Two']),
- h('div', {}, [sharedNode()]),
-])
+const sharedNode = () => h("div", {}, "Selected");
+const vnode1 = h("div", [
+ h("div", {}, ["One"]),
+ h("div", {}, ["Two"]),
+ h("div", {}, [sharedNode()]),
+]);
```
## Opportunity for community feedback
diff --git a/browserstack-karma.cjs b/browserstack-karma.cjs
deleted file mode 100644
index c821992..0000000
--- a/browserstack-karma.cjs
+++ /dev/null
@@ -1,101 +0,0 @@
-module.exports = {
- // Latest mainstream
- BS_Chrome_Current: {
- base: 'BrowserStack',
- browser: 'chrome',
- browser_version: 'latest',
- os: 'Windows',
- os_version: '10',
- },
- BS_Firefox_Current: {
- base: 'BrowserStack',
- browser: 'firefox',
- browser_version: 'latest',
- os: 'Windows',
- os_version: '10',
- },
- BS_Safari_Current: {
- base: 'BrowserStack',
- browser: 'safari',
- browser_version: 'latest',
- os: 'OS X',
- os_version: 'High Sierra',
- },
- BS_Android_8: {
- base: 'BrowserStack',
- browser: 'Android',
- device: 'Google Pixel 2',
- os: 'Android',
- os_version: '8.0',
- real_mobile: true,
- },
-
- // Older mainstream
- /* https://github.com/snabbdom/snabbdom/issues/468
- BS_Chrome_49: {
- base: 'BrowserStack',
- browser: 'chrome',
- browser_version: '49',
- os: 'Windows',
- os_version: '10',
- },
- */
- BS_Firefox_52: {
- base: 'BrowserStack',
- browser: 'firefox',
- browser_version: '52',
- os: 'Windows',
- os_version: '10',
- },
- /* https://github.com/snabbdom/snabbdom/issues/469
- BS_Safari_9: {
- base: 'BrowserStack',
- browser: 'safari',
- browser_version: '9.1',
- os: 'OS X',
- os_version: 'El Capitan',
- },
- */
-
- // Misc
- BS_Android_4_4: {
- base: 'BrowserStack',
- device_browser: 'ucbrowser',
- device: 'Google Nexus 5',
- os: 'Android',
- os_version: '4.4',
- real_mobile: true,
- },
- /* https://github.com/snabbdom/snabbdom/issues/470
- BS_iphone_10: {
- base: 'BrowserStack',
- browser: 'Mobile Safari',
- browser_version: null,
- device: 'iPhone 7',
- real_mobile: true,
- os: 'ios',
- os_version: '10.3',
- },
- */
- BS_MS_Edge: {
- base: 'BrowserStack',
- browser: 'edge',
- browser_version: 'latest',
- os: 'Windows',
- os_version: '10',
- },
- BS_IE_11: {
- base: 'BrowserStack',
- browser: 'ie',
- browser_version: '11.0',
- os: 'Windows',
- os_version: '7',
- },
- BS_IE_10: {
- base: 'BrowserStack',
- browser: 'ie',
- browser_version: '10.0',
- os: 'Windows',
- os_version: '7',
- },
-}
diff --git a/browserstack-karma.js b/browserstack-karma.js
new file mode 100644
index 0000000..92dce72
--- /dev/null
+++ b/browserstack-karma.js
@@ -0,0 +1,89 @@
+module.exports = {
+ // Latest mainstream
+ BS_Chrome_Current: {
+ base: "BrowserStack",
+ browser: "chrome",
+ browser_version: "latest",
+ os: "Windows",
+ os_version: "10",
+ },
+ BS_Firefox_Current: {
+ base: "BrowserStack",
+ browser: "firefox",
+ browser_version: "latest",
+ os: "Windows",
+ os_version: "10",
+ },
+ BS_Safari_Current: {
+ base: "BrowserStack",
+ browser: "safari",
+ browser_version: "latest",
+ os: "OS X",
+ os_version: "Big Sur",
+ },
+ BS_Android_8: {
+ base: "BrowserStack",
+ browser: "Android",
+ device: "Google Pixel 2",
+ os: "Android",
+ os_version: "8.0",
+ real_mobile: true,
+ },
+
+ // Older mainstream
+ BS_Chrome_50: {
+ base: "BrowserStack",
+ browser: "chrome",
+ browser_version: "50",
+ os: "Windows",
+ os_version: "10",
+ },
+ BS_Firefox_52: {
+ base: "BrowserStack",
+ browser: "firefox",
+ browser_version: "52",
+ os: "Windows",
+ os_version: "10",
+ },
+ BS_Safari_10: {
+ base: "BrowserStack",
+ browser: "safari",
+ browser_version: "10.1",
+ os: "OS X",
+ os_version: "Sierra",
+ },
+
+ // Misc
+ BS_Android_4_4: {
+ base: "BrowserStack",
+ device_browser: "ucbrowser",
+ device: "Google Nexus 5",
+ os: "Android",
+ os_version: "4.4",
+ real_mobile: true,
+ },
+ BS_iphone_10: {
+ base: "BrowserStack",
+ browser: "Mobile Safari",
+ browser_version: null,
+ device: "iPhone 7",
+ real_mobile: true,
+ os: "ios",
+ os_version: "10.3",
+ },
+ BS_MS_Edge: {
+ base: "BrowserStack",
+ browser: "edge",
+ browser_version: "latest",
+ os: "Windows",
+ os_version: "10",
+ },
+ BS_IE_11: {
+ base: "BrowserStack",
+ browser: "ie",
+ browser_version: "11.0",
+ os: "Windows",
+ os_version: "7",
+ es5: true,
+ },
+};
diff --git a/commitlint.config.json b/commitlint.config.json
deleted file mode 100644
index adea4ab..0000000
--- a/commitlint.config.json
+++ /dev/null
@@ -1,29 +0,0 @@
-{
- "extends": [
- "@commitlint/config-conventional"
- ],
- "rules": {
- "scope-empty": [2, "never"],
- "scope-enum": [2, "always", [
- "ci",
- "commitlint",
- "deps",
- "docs",
- "eslint",
- "eventlisteners",
- "examples",
- "exports",
- "format",
- "git",
- "github",
- "karma",
- "npm",
- "package",
- "relic",
- "style",
- "ttypescript",
- "typescript",
- "vscode"
- ]]
- }
-}
diff --git a/examples/carousel-svg/index.html b/examples/carousel-svg/index.html
index d93131d..f916094 100644
--- a/examples/carousel-svg/index.html
+++ b/examples/carousel-svg/index.html
@@ -1,74 +1,83 @@
-
-
-
- Carousel
-
-
-
-
-
-
+
+
+
+ Carousel
+
+
+
+
+
+
diff --git a/examples/carousel-svg/index.js b/examples/carousel-svg/index.js
index 3a2463e..ef91bc9 100644
--- a/examples/carousel-svg/index.js
+++ b/examples/carousel-svg/index.js
@@ -1,74 +1,119 @@
-import { init } from '../../build/package/init.js'
-import { attributesModule } from '../../build/package/modules/attributes.js'
-import { styleModule } from '../../build/package/modules/style.js'
-import { eventListenersModule } from '../../build/package/modules/eventlisteners.js'
-import { h } from '../../build/package/h.js'
+import {
+ init,
+ attributesModule,
+ styleModule,
+ eventListenersModule,
+ h,
+} from "../../build/index.js";
-var patch = init([attributesModule, styleModule, eventListenersModule])
+const patch = init([attributesModule, styleModule, eventListenersModule]);
-var vnode
+let vnode;
-var data = {
- degRotation: 0
-}
+let data = {
+ degRotation: 0,
+};
-function gRotation () {
+function gRotation() {
// console.log("gRotation: %s", data.degRotation);
- return 'rotate(' + data.degRotation + 'deg)'
+ return "rotate(" + data.degRotation + "deg)";
}
-function triangleClick (id) {
- console.log('triangleClick: %s', id)
- render()
+function triangleClick(id) {
+ console.log("triangleClick: %s", id);
+ render();
}
-function handleRotate (degs) {
- data.degRotation += degs
- console.log('handleRotate: %s, %s', degs, data.degRotation)
- render()
+function handleRotate(degs) {
+ data.degRotation += degs;
+ console.log("handleRotate: %s, %s", degs, data.degRotation);
+ render();
}
-function handleReset (degs) {
- data.degRotation = degs
- console.log('handleReset: %s', degs)
- render()
+function handleReset(degs) {
+ data.degRotation = degs;
+ console.log("handleReset: %s", degs);
+ render();
}
-function render () {
- vnode = patch(vnode, view(data))
+function render() {
+ vnode = patch(vnode, view(data));
}
const hTriangle = (id, degRotation) =>
- h('polygon#' + id, {
+ h("polygon#" + id, {
attrs: {
- points: '-50,-88 0,-175 50,-88',
- transform: 'rotate(' + degRotation + ')',
- 'stroke-width': 3
+ points: "-50,-88 0,-175 50,-88",
+ transform: "rotate(" + degRotation + ")",
+ "stroke-width": 3,
+ },
+ on: {
+ click: () => {
+ triangleClick(id);
+ },
},
- on: { click: () => { triangleClick(id) } }
- })
+ });
-const view = (data) =>
- h('div.view', [
- h('h1', 'Snabbdom SVG Carousel'),
- h('svg', { attrs: { width: 380, height: 380, viewBox: [-190, -190, 380, 380] } }, [
- h('g#carousel',
- { style: { '-webkit-transform': gRotation(), transform: gRotation() } }, [
- hTriangle('yellow', 0),
- hTriangle('green', 60),
- hTriangle('magenta', 120),
- hTriangle('red', 180),
- hTriangle('cyan', 240),
- hTriangle('blue', 300)
- ])
- ]),
- h('button', { on: { click: () => { handleRotate(60) } } }, 'Rotate Clockwise'),
- h('button', { on: { click: () => { handleRotate(-60) } } }, 'Rotate Anticlockwise'),
- h('button', { on: { click: () => { handleReset(0) } } }, 'Reset')
- ])
+const view = () =>
+ h("div.view", [
+ h("h1", "Snabbdom SVG Carousel"),
+ h(
+ "svg",
+ { attrs: { width: 380, height: 380, viewBox: [-190, -190, 380, 380] } },
+ [
+ h(
+ "g#carousel",
+ {
+ style: { "-webkit-transform": gRotation(), transform: gRotation() },
+ },
+ [
+ hTriangle("yellow", 0),
+ hTriangle("green", 60),
+ hTriangle("magenta", 120),
+ hTriangle("red", 180),
+ hTriangle("cyan", 240),
+ hTriangle("blue", 300),
+ ]
+ ),
+ ]
+ ),
+ h(
+ "button",
+ {
+ on: {
+ click: () => {
+ handleRotate(60);
+ },
+ },
+ },
+ "Rotate Clockwise"
+ ),
+ h(
+ "button",
+ {
+ on: {
+ click: () => {
+ handleRotate(-60);
+ },
+ },
+ },
+ "Rotate Anticlockwise"
+ ),
+ h(
+ "button",
+ {
+ on: {
+ click: () => {
+ handleReset(0);
+ },
+ },
+ },
+ "Reset"
+ ),
+ ]);
-window.addEventListener('DOMContentLoaded', () => {
- var container = document.getElementById('container')
- vnode = patch(container, view(data))
- render()
-})
+window.addEventListener("DOMContentLoaded", () => {
+ const container = document.getElementById("container");
+ vnode = patch(container, view(data));
+ render();
+});
diff --git a/examples/hero/index.html b/examples/hero/index.html
index 6a7bd63..eaeba34 100644
--- a/examples/hero/index.html
+++ b/examples/hero/index.html
@@ -2,14 +2,18 @@
-
+
Hero animation