Permalink
Browse files

Migrate from CommonJS modules to ES2015 modules

  • Loading branch information...
1 parent 499cd37 commit 091dc5f96154ebde238bfecd7adcd8d6809cae0d @staltz staltz committed Nov 14, 2016
View
@@ -35,6 +35,9 @@ browserified.js
h.d.ts
h.js
h.js.map
+hooks.d.ts
+hooks.js
+hooks.js.map
htmldomapi.d.ts
htmldomapi.js
htmldomapi.js.map
View
@@ -65,20 +65,23 @@ performance, small size and all the features listed below.
```javascript
var snabbdom = require('snabbdom');
var patch = snabbdom.init([ // Init patch function with chosen modules
- require('snabbdom/modules/class'), // makes it easy to toggle classes
- require('snabbdom/modules/props'), // for setting properties on DOM elements
- require('snabbdom/modules/style'), // handles styling on elements with support for animations
- require('snabbdom/modules/eventlisteners'), // attaches event listeners
+ require('snabbdom/modules/class').default, // makes it easy to toggle classes
+ require('snabbdom/modules/props').default, // for setting properties on DOM elements
+ require('snabbdom/modules/style').default, // handles styling on elements with support for animations
+ require('snabbdom/modules/eventlisteners').default, // attaches event listeners
]);
-var h = require('snabbdom/h'); // helper function for creating vnodes
+var h = require('snabbdom/h').default; // helper function for creating vnodes
+
+var container = document.getElementById('container');
+
var vnode = h('div#container.two.classes', {on: {click: someFn}}, [
h('span', {style: {fontWeight: 'bold'}}, 'This is bold'),
' and this is just normal text',
h('a', {props: {href: '/foo'}}, 'I\'ll take you places!')
]);
-var container = document.getElementById('container');
// Patch into empty DOM element – this modifies the DOM as a side effect
patch(container, vnode);
+
var newVnode = h('div#container.two.classes', {on: {click: anotherEventHandler}}, [
h('span', {style: {fontWeight: 'normal', fontStyle: 'italic'}}, 'This is now italic type'),
' and this is still just normal text',
@@ -108,8 +111,8 @@ specified set of modules.
```javascript
var patch = snabbdom.init([
- require('snabbdom/modules/class'),
- require('snabbdom/modules/style'),
+ require('snabbdom/modules/class').default,
+ require('snabbdom/modules/style').default,
]);
```
@@ -141,7 +144,7 @@ tag/selector as a string, an optional data object and an optional string or
array of children.
```javascript
-var h = require('snabbdom/h');
+var h = require('snabbdom/h').default;
var vnode = h('div', {style: {color: '#000'}}, [
h('h1', 'Headline'),
h('p', 'A paragraph'),
@@ -478,7 +481,7 @@ h('text', {
y: yPos,
dy: "5",
class: 'text_class'
- }},
+ }},
text
);
```
@@ -1,74 +1,74 @@
var snabbdom = require('../../snabbdom.js');
var patch = snabbdom.init([
- require('../../modules/attributes'),
- require('../../modules/style'),
- require('../../modules/eventlisteners')
+ require('../../modules/attributes').default,
+ require('../../modules/style').default,
+ require('../../modules/eventlisteners').default
]);
-var h = require('../../h.js');
+var h = require('../../h.js').default;
var vnode;
var data = {
- degRotation: 0
+ degRotation: 0
};
function gRotation() {
- //console.log("gRotation: %s", data.degRotation);
- return "rotate(" + data.degRotation + "deg)";
+ //console.log("gRotation: %s", data.degRotation);
+ return "rotate(" + data.degRotation + "deg)";
}
function triangleClick(id) {
- console.log("triangleClick: %s", id);
- render();
+ console.log("triangleClick: %s", id);
+ render();
}
function handleRotate(degs) {
- data.degRotation += degs;
- console.log("handleRotate: %s, %s", degs, data.degRotation);
- render();
+ data.degRotation += degs;
+ console.log("handleRotate: %s, %s", degs, data.degRotation);
+ render();
}
function handleReset(degs) {
- data.degRotation = degs;
- console.log("handleReset: %s", degs);
- render();
+ data.degRotation = degs;
+ console.log("handleReset: %s", degs);
+ render();
}
function render() {
- vnode = patch(vnode, view(data));
+ vnode = patch(vnode, view(data));
}
const hTriangle = (id, degRotation) =>
- h("polygon#" + id, {
- attrs: {
- points: "-50,-88 0,-175 50,-88",
- transform: "rotate(" + degRotation + ")",
- "stroke-width": 3
- },
- on: {click: [triangleClick, id]}
- });
+ h("polygon#" + id, {
+ attrs: {
+ points: "-50,-88 0,-175 50,-88",
+ transform: "rotate(" + degRotation + ")",
+ "stroke-width": 3
+ },
+ 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")
- ]);
+ 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();
+ var container = document.getElementById("container");
+ vnode = patch(container, view(data));
+ render();
});
@@ -1,12 +1,12 @@
/* jshint esnext: true */
var snabbdom = require('../../snabbdom.js');
var patch = snabbdom.init([
- require('../../modules/class'),
- require('../../modules/hero'),
- require('../../modules/style'),
- require('../../modules/eventlisteners'),
+ require('../../modules/class').default,
+ require('../../modules/hero').default,
+ require('../../modules/style').default,
+ require('../../modules/eventlisteners').default,
]);
-var h = require('../../h.js');
+var h = require('../../h.js').default;
var vnode;
@@ -1,11 +1,11 @@
var snabbdom = require('../../snabbdom.js');
var patch = snabbdom.init([
- require('../../modules/class'),
- require('../../modules/props'),
- require('../../modules/style'),
- require('../../modules/eventlisteners'),
+ require('../../modules/class').default,
+ require('../../modules/props').default,
+ require('../../modules/style').default,
+ require('../../modules/eventlisteners').default,
]);
-var h = require('../../h.js');
+var h = require('../../h.js').default;
var vnode;
@@ -1,8 +1,8 @@
var snabbdom = require('../../snabbdom.js');
var patch = snabbdom.init([
- require('../../modules/attributes'),
+ require('../../modules/attributes').default,
]);
-var h = require('../../h.js');
+var h = require('../../h.js').default;
var vnode;
View
@@ -1,6 +1,5 @@
-import {VNode} from './interfaces';
-import vnode = require('./vnode');
-import is = require('./is');
+import {vnode, VNode} from './vnode';
+import * as is from './is';
function addNS(data: any, children: Array<VNode> | undefined, sel: string | undefined): void {
data.ns = 'http://www.w3.org/2000/svg';
@@ -11,13 +10,13 @@ function addNS(data: any, children: Array<VNode> | undefined, sel: string | unde
}
}
-function h(sel: string): VNode;
-function h(sel: string, data: any): VNode;
-function h(sel: string, text: string): VNode;
-function h(sel: string, children: Array<VNode>): VNode;
-function h(sel: string, data: any, text: string): VNode;
-function h(sel: string, data: any, children: Array<VNode>): VNode;
-function h(sel: any, b?: any, c?: any): VNode {
+export function h(sel: string): VNode;
+export function h(sel: string, data: any): VNode;
+export function h(sel: string, text: string): VNode;
+export function h(sel: string, children: Array<VNode>): VNode;
+export function h(sel: string, data: any, text: string): VNode;
+export function h(sel: string, data: any, children: Array<VNode>): VNode;
+export function h(sel: any, b?: any, c?: any): VNode {
var data = {}, children: any, text: any, i: number;
if (c !== undefined) {
data = b;
@@ -38,5 +37,4 @@ function h(sel: any, b?: any, c?: any): VNode {
}
return vnode(sel, data, children, text, undefined);
};
-
-export = h;
+export default h;
@@ -1,4 +1,4 @@
-import {VNode, VNodeData} from '../interfaces';
+import {VNode, VNodeData} from '../vnode';
function pre(vnode: VNode, newVnode: VNode): void {
var attachData = (vnode.data as VNodeData).attachData;
@@ -32,7 +32,7 @@ function create(_: any, vnode: VNode): void {
attachData.placeholder = placeholder;
}
-export = function attachTo(target: Element, vnode: VNode): VNode {
+export function attachTo(target: Element, vnode: VNode): VNode {
if (vnode.data === undefined) vnode.data = {};
if (vnode.data.hook === undefined) vnode.data.hook = {};
var data = vnode.data;
@@ -44,3 +44,4 @@ export = function attachTo(target: Element, vnode: VNode): VNode {
hook.destroy = destroy;
return vnode;
};
+export default attachTo;
View
@@ -0,0 +1,25 @@
+import {VNode} from './vnode';
+
+export type PreHook = () => any;
+export type InitHook = (vNode: VNode) => any;
+export type CreateHook = (emptyVNode: VNode, vNode: VNode) => any;
+export type InsertHook = (vNode: VNode) => any;
+export type PrePatchHook = (oldVNode: VNode, vNode: VNode) => any;
+export type UpdateHook = (oldVNode: VNode, vNode: VNode) => any;
+export type PostPatchHook = (oldVNode: VNode, vNode: VNode) => any;
+export type DestroyHook = (vNode: VNode) => any;
+export type RemoveHook = (vNode: VNode, removeCallback: () => void) => any;
+export type PostHook = () => any;
+
+export interface Hooks {
+ pre?: PreHook;
+ init?: InitHook;
+ create?: CreateHook;
+ insert?: InsertHook;
+ prepatch?: PrePatchHook;
+ update?: UpdateHook;
+ postpatch?: PostPatchHook;
+ destroy?: DestroyHook;
+ remove?: RemoveHook;
+ post?: PostHook;
+}
View
@@ -1,4 +1,15 @@
-import {DOMAPI} from './interfaces';
+export interface DOMAPI {
+ createElement: (tagName: any) => HTMLElement;
+ createElementNS: (namespaceURI: string, qualifiedName: string) => Element;
+ createTextNode: (text: string) => Text;
+ insertBefore: (parentNode: Node, newNode: Node, referenceNode: Node | null) => void;
+ removeChild: (node: Node, child: Node) => void;
+ appendChild: (node: Node, child: Node) => void;
+ parentNode: (node: Node) => HTMLElement;
+ nextSibling: (node: Node) => Node;
+ tagName: (elm: Element) => string;
+ setTextContent: (node: Node, text: string | null) => void;
+}
function createElement(tagName: any): HTMLElement {
return document.createElement(tagName);
@@ -40,7 +51,7 @@ function setTextContent(node: Node, text: string | null): void {
node.textContent = text;
}
-export = {
+export const htmlDomApi = {
createElement,
createElementNS,
createTextNode,
@@ -51,4 +62,5 @@ export = {
nextSibling,
tagName,
setTextContent,
-} as DOMAPI;
+} as DOMAPI;
+export default htmlDomApi;
Oops, something went wrong.

0 comments on commit 091dc5f

Please sign in to comment.