snabberb 0.5.0 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cedc3e54bfcb4b628750f8a7779975624cb72226c46ca0c2e7ea787d5b31e9f2
-  data.tar.gz: e0d593a26c2058022d6e6c3df9dc200c235aedf2524a9c774ebcabbfa8df7d3a
+  metadata.gz: 5a1c844a2e4053181db278aeee2cd4c97ccd982e783c6ffb2b6df48391fd0a7b
+  data.tar.gz: 53e6e1712e779c653f7d429048f44e77cb9be525619d5276ee441e00e4ccb92b
 SHA512:
-  metadata.gz: c0d1c3b840a0f0475204cdcdf8a603441bbbcc5f7fb1b3653081e4b8e25690663116ba639775b4ae8f7c045f904207225fa6d7bee27931a778c441c76e8385d9
-  data.tar.gz: f32c2619a9c422fe33cf7fdeddd97b968c7a68002865619f1077c63349e66caa24c820aad00fa66bf60de623d5e8e7f46f7a16ba374f9836cd9ce653badffddc
+  metadata.gz: 4a0c84b3558683af920af98de8e341f0bb6c7d1a2320d1354a8cea76d7a73b83f6eaf99aae9115b5150e5f0643579b24c4b89076188756b04342dbae237db4a3
+  data.tar.gz: 1a3b2bed264e1443d38368dea5b05d93abe6f0a1544c0f88b25357d2c9e042456493418779721b250c0f52db5b9e3bccb33099ecb926ff92e409fbf7423bb8fe

data/.rubocop.yml

@@ -7,6 +7,9 @@ Metrics/AbcSize:
 Metrics/BlockLength:
   Enabled: False
 
+Metrics/ClassLength:
+  Enabled: False
+
 Metrics/CyclomaticComplexity:
   Enabled: False
 

data/build.js

@@ -1,10 +1,11 @@
-// browserify deps.js -p esmify -s snabbdom > opal/vendor/snabbdom.js
+// browserify build.js -p esmify -s snabbdom > opal/vendor/snabbdom.js
 import { init } from './node_modules/snabbdom/build/package/init'
 import { h } from './node_modules/snabbdom/build/package/h'
 import { toVNode } from './node_modules/snabbdom/build/package/tovnode'
 
 import { attributesModule } from './node_modules/snabbdom/build/package/modules/attributes'
 import { classModule } from './node_modules/snabbdom/build/package/modules/class'
+import { datasetModule } from './node_modules/snabbdom/build/package/modules/dataset'
 import { eventListenersModule } from './node_modules/snabbdom/build/package/modules/eventlisteners'
 import { propsModule } from './node_modules/snabbdom/build/package/modules/props'
 import { styleModule } from './node_modules/snabbdom/build/package/modules/style'
@@ -15,6 +16,7 @@ module.exports.toVNode = toVNode
 
 module.exports.attributesModule = attributesModule
 module.exports.classModule = classModule
+module.exports.datasetModule = datasetModule
 module.exports.eventListenersModule = eventListenersModule
 module.exports.propsModule = propsModule
 module.exports.styleModule = styleModule

data/examples/rack/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: ../..
   specs:
-    snabberb (0.4.2)
+    snabberb (0.5.0)
       opal (~> 1.0)
 
 GEM

data/examples/roda/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: ../..
   specs:
-    snabberb (0.4.2)
+    snabberb (0.5.0)
       opal (~> 1.0)
 
 GEM

data/lib/snabberb/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Snabberb
-  VERSION = '0.5.0'
+  VERSION = '1.0.0'
 end

data/opal/snabberb.rb

@@ -1,10 +1,8 @@
 # frozen_string_literal: true
 
+require 'erb'
 require 'native'
-
 require 'vendor/snabbdom'
-require 'vendor/snabbdom-to-html'
-
 require 'snabberb/component'
 
 module Snabberb

data/opal/snabberb/component.rb

@@ -5,6 +5,88 @@ module Snabberb
     attr_accessor :node
     attr_reader :root
 
+    %x{
+      const VOID = new Set([
+        'area',
+        'base',
+        'br',
+        'col',
+        'embed',
+        'hr',
+        'img',
+        'input',
+        'keygen',
+        'link',
+        'meta',
+        'param',
+        'source',
+        'track',
+        'wbr',
+      ])
+
+      const IGNORE = new Set([
+        'attributes',
+        'childElementCount',
+        'children',
+        'classList',
+        'clientHeight',
+        'clientLeft',
+        'clientTop',
+        'clientWidth',
+        'currentStyle',
+        'firstElementChild',
+        'innerHTML',
+        'lastElementChild',
+        'nextElementSibling',
+        'ongotpointercapture',
+        'onlostpointercapture',
+        'onwheel',
+        'outerHTML',
+        'previousElementSibling',
+        'runtimeStyle',
+        'scrollHeight',
+        'scrollLeft',
+        'scrollLeftMax',
+        'scrollTop',
+        'scrollTopMax',
+        'scrollWidth',
+        'tabStop',
+        'tagName',
+      ])
+
+      const BOOLEAN = new Set([
+        'disabled',
+        'visible',
+        'checked',
+        'readonly',
+        'required',
+        'allowfullscreen',
+        'autofocus',
+        'autoplay',
+        'compact',
+        'controls',
+        'default',
+        'formnovalidate',
+        'hidden',
+        'ismap',
+        'itemscope',
+        'loop',
+        'multiple',
+        'muted',
+        'noresize',
+        'noshade',
+        'novalidate',
+        'nowrap',
+        'open',
+        'reversed',
+        'seamless',
+        'selected',
+        'sortable',
+        'truespeed',
+        'typemustmatch',
+      ])
+    }
+
     # You can define needs in each component. They are automatically set as instance variables
     #
     # For example:
@@ -57,7 +139,7 @@ module Snabberb
     end
 
     def html
-      `toHTML(#{render})`
+      node_to_s(render)
     end
 
     # Building block for dom elements using Snabbdom h and Snabberb components.
@@ -98,6 +180,7 @@ module Snabberb
       @@patcher ||= %x{snabbdom.init([
         snabbdom.attributesModule,
         snabbdom.classModule,
+        snabbdom.datasetModule,
         snabbdom.eventListenersModule,
         snabbdom.propsModule,
         snabbdom.styleModule,
@@ -151,6 +234,114 @@ module Snabberb
         end
       end
     end
+
+    # rubocop:disable Lint/UnusedMethodArgument
+    def parse_sel(sel)
+      %x{
+        let tag = ''
+        let id = ''
+        const classes = {}
+        const parts = sel.split(".")
+        const last = parts.length - 1
+
+        parts.forEach((part, index) => {
+          if (index == last) {
+            part = part.split('#')
+            if (part.length > 1) id = part[1]
+            part = part[0]
+            index == 0 ? tag = part : classes[part] = true
+          } else if (!tag) {
+            tag = part
+          } else {
+            classes[part] = true
+          }
+        })
+
+        return {
+          tag: tag,
+          id: id,
+          classes: classes,
+        }
+      }
+    end
+
+    def node_to_s(vnode)
+      %x{
+        if (!vnode.sel) return self.$escape(vnode.text)
+
+        const sel = self.$parse_sel(vnode.sel)
+
+        for (const key in vnode.data.class) {
+          vnode.data.class[key] ? sel['classes'][key] = true : delete sel['classes'][key]
+        }
+
+        let attributes = {}
+        if (sel['id'].length > 0) attributes['id'] = sel['id']
+
+        const classes = Object.keys(sel['classes'])
+        if (classes.length > 0) attributes['class'] = classes.join(' ')
+
+        for (const key in vnode.data.attrs) {
+          attributes[key] = vnode.data.attrs[key]
+        }
+
+        for (const key in vnode.data.dataset) {
+          attributes['data-' + key] = vnode.data.dataset[key]
+        }
+
+        for (const key in vnode.data.props) {
+          if (!IGNORE.has(key)) {
+            const value = vnode.data.props[key]
+
+            if (BOOLEAN.has(key)) {
+              if (value) attributes[key] = key
+            } else {
+              attributes[key] = value
+            }
+          }
+        }
+
+        const styles = []
+
+        for (let key in vnode.data.style) {
+          const value = vnode.data.style[key]
+          key = key.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
+          styles.push(key + ': ' + value)
+        }
+
+        if (styles.length > 0) attributes['style'] = styles.join('; ')
+
+        attributes = Object.keys(attributes).map(key =>
+          self.$escape(key) + '="' + self.$escape(attributes[key]) + '"'
+        )
+
+        const tag = sel['tag']
+        const elements = ['<' + tag]
+        if (attributes.length > 0) elements.push(' ' + attributes.join(' '))
+        elements.push('>')
+
+        if (!VOID.has(tag)) {
+          if (vnode.data.props && vnode.data.props.innerHTML) {
+            elements.push(vnode.data.props.innerHTML)
+          } else if (vnode.text) {
+            elements.push(self.$escape(vnode.text))
+          } else if (vnode.children) {
+            vnode.children.forEach(child =>
+              elements.push(self.$node_to_s(child))
+            )
+          }
+
+          elements.push('</' + tag + '>')
+        }
+
+        return elements.join('')
+      }
+    end
+    # rubocop:enable Lint/UnusedMethodArgument
+
+    def escape(html)
+      ERB::Util.html_escape(html)
+    end
   end
 
   # Sublcass this to prerender applications.

data/opal/vendor/snabbdom.js

@@ -11,22 +11,26 @@ var _attributes = require("./node_modules/snabbdom/build/package/modules/attribu
 
 var _class = require("./node_modules/snabbdom/build/package/modules/class");
 
+var _dataset = require("./node_modules/snabbdom/build/package/modules/dataset");
+
 var _eventlisteners = require("./node_modules/snabbdom/build/package/modules/eventlisteners");
 
 var _props = require("./node_modules/snabbdom/build/package/modules/props");
 
 var _style = require("./node_modules/snabbdom/build/package/modules/style");
 
+// browserify build.js -p esmify -s snabbdom > opal/vendor/snabbdom.js
 module.exports.init = _init.init;
 module.exports.h = _h.h;
 module.exports.toVNode = _tovnode.toVNode;
 module.exports.attributesModule = _attributes.attributesModule;
 module.exports.classModule = _class.classModule;
+module.exports.datasetModule = _dataset.datasetModule;
 module.exports.eventListenersModule = _eventlisteners.eventListenersModule;
 module.exports.propsModule = _props.propsModule;
 module.exports.styleModule = _style.styleModule;
 
-},{"./node_modules/snabbdom/build/package/h":2,"./node_modules/snabbdom/build/package/init":4,"./node_modules/snabbdom/build/package/modules/attributes":6,"./node_modules/snabbdom/build/package/modules/class":7,"./node_modules/snabbdom/build/package/modules/eventlisteners":8,"./node_modules/snabbdom/build/package/modules/props":9,"./node_modules/snabbdom/build/package/modules/style":10,"./node_modules/snabbdom/build/package/tovnode":11}],2:[function(require,module,exports){
+},{"./node_modules/snabbdom/build/package/h":2,"./node_modules/snabbdom/build/package/init":4,"./node_modules/snabbdom/build/package/modules/attributes":6,"./node_modules/snabbdom/build/package/modules/class":7,"./node_modules/snabbdom/build/package/modules/dataset":8,"./node_modules/snabbdom/build/package/modules/eventlisteners":9,"./node_modules/snabbdom/build/package/modules/props":10,"./node_modules/snabbdom/build/package/modules/style":11,"./node_modules/snabbdom/build/package/tovnode":12}],2:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -101,7 +105,7 @@ function h(sel, b, c) {
 
 ;
 
-},{"./is.js":5,"./vnode.js":12}],3:[function(require,module,exports){
+},{"./is.js":5,"./vnode.js":13}],3:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -560,7 +564,7 @@ function init(modules, domApi) {
   };
 }
 
-},{"./htmldomapi.js":3,"./is.js":5,"./vnode.js":12}],5:[function(require,module,exports){
+},{"./htmldomapi.js":3,"./is.js":5,"./vnode.js":13}],5:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -682,6 +686,55 @@ exports.classModule = classModule;
 },{}],8:[function(require,module,exports){
 "use strict";
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.datasetModule = void 0;
+const CAPS_REGEX = /[A-Z]/g;
+
+function updateDataset(oldVnode, vnode) {
+  const elm = vnode.elm;
+  let oldDataset = oldVnode.data.dataset;
+  let dataset = vnode.data.dataset;
+  let key;
+  if (!oldDataset && !dataset) return;
+  if (oldDataset === dataset) return;
+  oldDataset = oldDataset || {};
+  dataset = dataset || {};
+  const d = elm.dataset;
+
+  for (key in oldDataset) {
+    if (!dataset[key]) {
+      if (d) {
+        if (key in d) {
+          delete d[key];
+        }
+      } else {
+        elm.removeAttribute('data-' + key.replace(CAPS_REGEX, '-$&').toLowerCase());
+      }
+    }
+  }
+
+  for (key in dataset) {
+    if (oldDataset[key] !== dataset[key]) {
+      if (d) {
+        d[key] = dataset[key];
+      } else {
+        elm.setAttribute('data-' + key.replace(CAPS_REGEX, '-$&').toLowerCase(), dataset[key]);
+      }
+    }
+  }
+}
+
+const datasetModule = {
+  create: updateDataset,
+  update: updateDataset
+};
+exports.datasetModule = datasetModule;
+
+},{}],9:[function(require,module,exports){
+"use strict";
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -774,7 +827,7 @@ const eventListenersModule = {
 };
 exports.eventListenersModule = eventListenersModule;
 
-},{}],9:[function(require,module,exports){
+},{}],10:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -810,7 +863,7 @@ const propsModule = {
 };
 exports.propsModule = propsModule;
 
-},{}],10:[function(require,module,exports){
+},{}],11:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -942,7 +995,7 @@ const styleModule = {
 };
 exports.styleModule = styleModule;
 
-},{}],11:[function(require,module,exports){
+},{}],12:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -996,7 +1049,7 @@ function toVNode(node, domApi) {
   }
 }
 
-},{"./htmldomapi.js":3,"./vnode.js":12}],12:[function(require,module,exports){
+},{"./htmldomapi.js":3,"./vnode.js":13}],13:[function(require,module,exports){
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: snabberb
 version: !ruby/object:Gem::Version
-  version: 0.5.0
+  version: 1.0.0
 platform: ruby
 authors:
 - Toby Mao
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2020-10-13 00:00:00.000000000 Z
+date: 2020-10-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: opal
@@ -146,7 +146,6 @@ files:
 - lib/snabberb/version.rb
 - opal/snabberb.rb
 - opal/snabberb/component.rb
-- opal/vendor/snabbdom-to-html.js
 - opal/vendor/snabbdom.js
 - snabberb.gemspec
 homepage: https://github.com/tobymao