bump snabbdom to v3 (#128)

* bump snabbdom version

* update DOMPatcher due to snabbdom emptyNodeAt implmentation changes

* update examples jade loader config to be compatible with latest snabbdom

* fix formatting

* fix type import

* i dunno

* bump browser versions

* adjust package.json version to not be beta

* re-trigger ci

* pr naming nits

.npmrc

@@ -0,0 +1 @@
+save-exact=true

.nvmrc

@@ -0,0 +1 @@
+12.22.4

examples/animations/package.json

@@ -10,7 +10,7 @@
   "author": "[email protected]",
   "license": "MIT",
   "dependencies": {
-    "snabbdom": "^0.5.3",
+    "snabbdom": "3.0.3",
     "@webcomponents/custom-elements": "1.0.0-rc.3"
   },
   "devDependencies": {

examples/animations/webpack.config.js

@@ -38,7 +38,9 @@ const webpackConfig = {
     root: path.join(__dirname, `node_modules`),
   },
   virtualJadeLoader: {
-    vdom: `snabbdom`,
+    runtime: `var h = require("snabbdom").h;`,
+    propsWrapper: `props`,
+    rawProps: true,
   },
 };
 

examples/contexts/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@webcomponents/custom-elements": "1.0.6",
     "@webcomponents/shadydom": "1.0.8",
-    "snabbdom": "^0.5.3"
+    "snabbdom": "3.0.3"
   },
   "devDependencies": {
     "autoprefixer-loader": "^3.2.0",

examples/contexts/webpack.config.js

@@ -36,7 +36,9 @@ const webpackConfig = {
     root: path.join(__dirname, `node_modules`),
   },
   virtualJadeLoader: {
-    vdom: `snabbdom`,
+    runtime: `var h = require("snabbdom").h;`,
+    propsWrapper: `props`,
+    rawProps: true,
   },
 };
 

examples/jsx/package.json

@@ -10,7 +10,7 @@
   "author": "[email protected]",
   "license": "MIT",
   "dependencies": {
-    "snabbdom-jsx-lite": "1.0.10",
+    "snabbdom-jsx-lite": "2.0.0",
     "@webcomponents/custom-elements": "1.0.0-rc.3"
   },
   "devDependencies": {

examples/shadow-dom/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@webcomponents/custom-elements": "1.0.6",
     "@webcomponents/shadydom": "1.0.8",
-    "snabbdom": "^0.5.3"
+    "snabbdom": "3.0.3"
   },
   "devDependencies": {
     "autoprefixer-loader": "^3.2.0",

examples/shadow-dom/webpack.config.js

@@ -36,7 +36,9 @@ const webpackConfig = {
     root: path.join(__dirname, `node_modules`),
   },
   virtualJadeLoader: {
-    vdom: `snabbdom`,
+    runtime: `var h = require("snabbdom").h;`,
+    propsWrapper: `props`,
+    rawProps: true,
   },
 };
 

examples/tutorial/package.json

@@ -10,8 +10,8 @@
   "author": "[email protected]",
   "license": "MIT",
   "dependencies": {
-    "snabbdom": "^0.5.3",
-    "@webcomponents/custom-elements": "1.0.0-rc.3"
+    "@webcomponents/custom-elements": "1.0.0-rc.3",
+    "snabbdom": "3.0.3"
   },
   "devDependencies": {
     "babel-core": "^6.3.17",

examples/tutorial/webpack.config.js

@@ -31,7 +31,9 @@ const webpackConfig = {
     root: path.join(__dirname, `node_modules`),
   },
   virtualJadeLoader: {
-    vdom: `snabbdom`,
+    runtime: `var h = require("snabbdom").h;`,
+    propsWrapper: `props`,
+    rawProps: true,
   },
 };
 

lib/component-utils/hook-helpers.d.ts

@@ -1,4 +1,4 @@
-import {VNode} from 'snabbdom/vnode';
+import {VNode} from 'snabbdom';
 
 /**
  * A simple remove hook generator for snabbdom so we remove an element after it's finished its closing animation.

lib/dom-patcher.js

@@ -4,23 +4,27 @@
  * @private
  */
 
-import {init as initSnabbdom} from 'snabbdom';
-import h from 'snabbdom/h';
+import {
+  init as initSnabbdom,
+  attributesModule,
+  h,
+  datasetModule,
+  eventListenersModule,
+  propsModule,
+  styleModule,
+  classModule,
+} from 'snabbdom';
 
-import snabbAttributes from 'snabbdom/modules/attributes';
-import snabbDataset from 'snabbdom/modules/dataset';
-import snabbDelayedClass from 'snabbdom-delayed-class';
-import snabbEventlisterners from 'snabbdom/modules/eventlisteners';
-import snabbProps from 'snabbdom/modules/props';
-import snabbStyle from 'snabbdom/modules/style';
+import delayedClassModule from 'snabbdom-delayed-class';
 
 const patch = initSnabbdom([
-  snabbAttributes,
-  snabbDataset,
-  snabbDelayedClass,
-  snabbEventlisterners,
-  snabbProps,
-  snabbStyle,
+  datasetModule,
+  attributesModule,
+  classModule,
+  propsModule,
+  styleModule,
+  eventListenersModule,
+  delayedClassModule,
 ]);
 
 export const EMPTY_DIV = h(`div`);
@@ -41,6 +45,9 @@ export class DOMPatcher {
     this.el = document.createElement(tagName);
     if (classMatches) {
       this.el.className = classMatches.map((c) => c.slice(1)).join(` `);
+      // this attribute setting ensures that svg elements behave as expected and will ensure
+      // compatibility with different snabbdom versions
+      this.el.setAttribute(`class`, this.el.className);
     }
     if (idMatch) {
       this.el.id = idMatch[0].slice(1);

lib/index.d.ts

@@ -1,10 +1,10 @@
 // Type definitions for panel
 // Project: panel
 // Definitions by: Mixpanel (https://mixpanel.com)
-import {VNode} from 'snabbdom/vnode';
+import {VNode} from 'snabbdom';
 import WebComponent from 'webcomponent';
 
-export {h} from 'snabbdom/h';
+export {h} from 'snabbdom';
 export {jsx} from 'snabbdom-jsx-lite';
 
 export class StateStore<State> {