Merge pull request #24 from mreinstein/2.0

2.0 fixes #23

Author: mreinstein

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.travis.yml

@@ -2,6 +2,5 @@ sudo: false
 language: node_js
 node_js:
   - 'node'
-  - '6'
-  - '5'
-  - '4'
+  - '14'
+  - '12'

CHANGELOG.md

@@ -1,5 +1,12 @@
 # changelog
 
+## 2.0.0
+* require node v12.17+
+* update snabbdom from 0.7 to 2.1
+* convert to pure es module
+* simplify examples
+
+
 ## 1.2.0
 
 * add `thunk` support (fixes #5)

create.js

@@ -1,76 +1,67 @@
-var snabbdom = require('snabbdom')
-var thunk = require('snabbdom/thunk').default
-var h = require('snabbdom/h').default
-var hyperx = require('hyperx')
+import { init }  from 'https://cdn.jsdelivr.net/npm/snabbdom@2.1.0/build/package/init.js';
+import { thunk } from 'https://cdn.jsdelivr.net/npm/snabbdom@2.1.0/build/package/thunk.js';
+import { h }     from 'https://cdn.jsdelivr.net/npm/snabbdom@2.1.0/build/package/h.js'; // helper function for creating vnodes
+import hyperx    from 'hyperx'
 
 
-module.exports = create
+export default function create (modules, options={}) {
 
-function create (modules, options) {
-  if (!options) options = {}
-
-  // options
-  var directive = options.directive || '@'
+  const directive = options.directive || '@'
 
   function createElement (sel, input, content) {
-    // Adjust content:
     if (content && content.length) {
-      if (content.length === 1) {
+      if (content.length === 1)
         content = content[0]
-      } else {
-        // Flatten nested arrays
-        content = [].concat.apply([], content)
-      }
+      else
+        content = [].concat.apply([], content)  // flatten nested arrays
     }
 
-    // Attribute names, and handling none faster:
-    var names = Object.keys(input)
-    if (!names || !names.length) {
+    // attribute names, and handling none faster:
+    const names = Object.keys(input)
+    if (!names || !names.length)
       return h(sel, content)
-    }
 
-    // Parse Snabbdom's `data` from attributes:
-    var data = {}
-    for (var i = 0, max = names.length; max > i; i++) {
-      var name = names[i]
-      if (input[name] === 'false') {
+    // parse Snabbdom's `data` from attributes:
+    const data = { }
+    for (let i = 0, max = names.length; max > i; i++) {
+      const name = names[i]
+      if (input[name] === 'false')
         input[name] = false
-      }
 
-      // Directive attributes
+      // directive attributes
       if (name.indexOf(directive) === 0) {
-        var parts = name.slice(1).split(':')
-        var previous = data
-        for (var p = 0, pmax = parts.length, last = pmax - 1; p < pmax; p++) {
-          var part = parts[p]
-          if (p === last) {
+        const parts = name.slice(1).split(':')
+        let previous = data
+        for (let p = 0, pmax = parts.length, last = pmax - 1; p < pmax; p++) {
+          const part = parts[p]
+          if (p === last)
             previous[part] = input[name]
-          } else if (!previous[part]) {
-            previous = previous[part] = {}
-          } else {
+          else if (!previous[part])
+            previous = previous[part] = { }
+          else
             previous = previous[part]
-          }
         }
       }
 
-      // Put all other attributes into `data.attrs`
+      // put all other attributes into `data.attrs`
       else {
-        if (!data.attrs) data.attrs = {}
+        if (!data.attrs)
+          data.attrs = { }
         data.attrs[name] = input[name]
       }
     }
 
-    // Return vnode:
+    // return vnode:
     return h(sel, data, content)
   }
 
-  // Create the snabbdom + hyperx functions
-  var patch = snabbdom.init(modules || [])
+  // create the snabbdom + hyperx functions
+  const patch = init(modules || [ ])
 
-  // Create snabby function
-  var snabby = hyperx(createElement, { attrToProp: false })
+  // create snabby function
+  const snabby = hyperx(createElement, { attrToProp: false })
 
-  // Create yo-yo-like update function
+  // create yo-yo-like update function
   snabby.update = function update (dest, src) {
     return patch(dest, src)
   }
@@ -79,5 +70,3 @@ function create (modules, options) {
 
   return snabby
 }
-
-

examples/counter.html

@@ -0,0 +1,50 @@
+<!doctype html>
+<html>
+<head>
+    <title>Snabby - Counter Example</title>
+    <meta name=theme-color content=#303F9F><meta name=viewport content="width=device-width,minimum-scale=1">
+    <style>
+        body {
+          font-family: monospace;
+          background-color: whitesmoke;
+          padding: 10px;
+        }
+
+    </style>
+</head>
+<body>
+
+<p>
+
+</p>
+
+<script type="module">
+import html from '../snabby.js'
+
+
+function counter (count) {
+  const view = html`
+    <div class="main">
+      <button @on:click=${sub}>-</button>
+      <span>${count}</span>
+      <button @on:click=${add}>+</button>
+    </div>`
+
+  function add () {
+    html.update(view, counter(count + 1))
+  }
+
+  function sub () {
+    html.update(view, counter(count - 1))
+  }
+
+  return view
+}
+
+
+html.update(document.body, counter(0))
+
+</script>
+
+</body>
+</html>

examples/counter/index.js

@@ -1,20 +1,40 @@
-const html = require('../../')
-const css = require('sheetify')
+<!doctype html>
+<html>
+<head>
+    <title>Snabby - Text Input Example</title>
+    <meta name=theme-color content=#303F9F><meta name=viewport content="width=device-width,minimum-scale=1">
+    <style>
+        body {
+          font-family: monospace;
+          background-color: whitesmoke;
+          padding: 10px;
+        }
+
+        .app-title {
+          font-size: 4em
+        }
+
+        .app-desc {
+          font-size: 1.5em
+        }
+
+        .app-inputs {
+          margin-top: 20px
+        }
+
+    </style>
+</head>
+<body>
+
+<p>
+
+</p>
+
+<script type="module">
+import html from '../snabby.js'
+
 
 function app (state) {
-  css`
-    .app-title {
-      font-size: 4em
-    }
-
-    .app-desc {
-      font-size: 1.5em
-    }
-
-    .app-inputs {
-      margin-top: 20px
-    }
-  `
 
   var view = html`
     <div class='app'>
@@ -48,3 +68,8 @@
   title: 'Hello, World!',
   desc: 'People greet the world.'
 }))
+
+</script>
+
+</body>
+</html>

examples/counter/package.json

@@ -0,0 +1,70 @@
+<!doctype html>
+<html>
+<head>
+    <title>Snabby - Thunk Example</title>
+    <meta name=theme-color content=#303F9F><meta name=viewport content="width=device-width,minimum-scale=1">
+    <style>
+        body {
+          font-family: monospace;
+          background-color: whitesmoke;
+          padding: 10px;
+        }
+
+    </style>
+</head>
+<body>
+
+<p>
+For this example, take a look at the javascript console, and press the random button several times. 
+You'll notice that when the value that gets chosen matches the previous value, the "ACTUAL UPDATE" console message 
+doesn't fire. this is because the view hasn't changed, so the thunk doesn't re-evaluate the snabby dom vnode.
+</p>
+
+<script type="module">
+import html from '../snabby.js'
+
+
+function randomInt () {
+    return Math.ceil(Math.random() * 3)
+}
+
+
+function numberView (n) {
+    console.log('ACTUAL UPDATE:', n)
+    return html`<span>Number is ${n}</span>`
+}
+
+
+function counter (count) {
+    console.log('outer call:', count)
+    const view = html`
+        <div class="main">
+          <button @on:click=${sub}>-</button>
+          <span>${html.thunk('num', numberView, [count])}</span>
+          <button @on:click=${add}>+</button>
+          <button @on:click=${rand}>random</button>
+        </div>
+      `
+
+    function add () {
+        html.update(view, counter(count + 1))
+    }
+
+    function sub () {
+        html.update(view, counter(count - 1))
+    }
+
+    function rand () {
+        html.update(view, counter(randomInt()))
+    }
+
+    return view
+}
+
+
+html.update(document.body, counter(0))
+
+</script>
+
+</body>
+</html>