snabberb 0.5.0 → 1.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cedc3e54bfcb4b628750f8a7779975624cb72226c46ca0c2e7ea787d5b31e9f2
-  data.tar.gz: e0d593a26c2058022d6e6c3df9dc200c235aedf2524a9c774ebcabbfa8df7d3a
+  metadata.gz: cb82424f513fedb084f9889e64adc0b3484e3403522d5f0fb1ab3531c9fd627b
+  data.tar.gz: '08a6595aa3bed2cde156991811e6a612296e11aaeae9a24a10dd9aca58c2f3f8'
 SHA512:
-  metadata.gz: c0d1c3b840a0f0475204cdcdf8a603441bbbcc5f7fb1b3653081e4b8e25690663116ba639775b4ae8f7c045f904207225fa6d7bee27931a778c441c76e8385d9
-  data.tar.gz: f32c2619a9c422fe33cf7fdeddd97b968c7a68002865619f1077c63349e66caa24c820aad00fa66bf60de623d5e8e7f46f7a16ba374f9836cd9ce653badffddc
+  metadata.gz: 9f599f947849c63880508953ec5f096f6ccfc4936c08fe51d7c8a3fd087260b921cdba6d7b64b70e5a6e565c63d2cf02cd1962880c1b5ae4b96f4a793cddfe3d
+  data.tar.gz: 06d6ff61cf0853e796f4c8d4896db4e4a74b7dd28a79a421fdc4df947d99e92f7eec63ca604c993ab445142bd9f095d782122730f11936387ee4314313fc4768

data/.rubocop.yml

@@ -1,21 +1,24 @@
 Layout/FirstArrayElementIndentation:
   Enabled: false
 
+Layout/LineLength:
+  Max: 120
+
 Metrics/AbcSize:
   Enabled: false
 
 Metrics/BlockLength:
   Enabled: False
 
+Metrics/ClassLength:
+  Enabled: False
+
 Metrics/CyclomaticComplexity:
   Enabled: False
 
 Metrics/PerceivedComplexity:
   Enabled: False
 
-Metrics/LineLength:
-  Max: 120
-
 Metrics/MethodLength:
   Enabled: false
 
@@ -41,4 +44,6 @@ Style/TrailingCommaInHashLiteral:
   Enabled: false
 
 AllCops:
-  TargetRubyVersion: 2.3
+  NewCops: enable
+  TargetRubyVersion: 2.4
+  SuggestExtensions: 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

@@ -2,7 +2,7 @@
 
 source 'https://rubygems.org'
 
-gem 'c_lexer'
 gem 'opal'
 gem 'rack'
 gem 'snabberb', path: '../..'
+gem 'webrick'

data/examples/rack/Gemfile.lock

@@ -1,31 +1,29 @@
 PATH
   remote: ../..
   specs:
-    snabberb (0.4.2)
-      opal (~> 1.0)
+    snabberb (1.3.0)
+      opal (~> 1.1)
 
 GEM
   remote: https://rubygems.org/
   specs:
-    ast (2.4.1)
-    c_lexer (2.6.4.1.1)
-      ast (~> 2.4.0)
-      parser (= 2.6.4.1)
-    opal (1.0.3)
+    ast (2.4.2)
+    opal (1.1.1)
       ast (>= 2.3.0)
-      parser (~> 2.6)
-    parser (2.6.4.1)
-      ast (~> 2.4.0)
+      parser (~> 3.0)
+    parser (3.0.0.0)
+      ast (~> 2.4.1)
     rack (2.2.3)
+    webrick (1.7.0)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
-  c_lexer
   opal
   rack
   snabberb!
+  webrick
 
 BUNDLED WITH
-   2.1.4
+   2.2.3

data/examples/roda/Gemfile.lock

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

data/lib/snabberb.rb

@@ -55,11 +55,11 @@ module Snabberb
 
   def self.prerender_script(layout, application, application_id, javascript_include_tags: '', **needs)
     needs = wrap(needs)
-    attach_func = wrap_s("Opal.$$.#{application}.$attach(\"#{application_id}\", #{needs})")
+    attach_func = wrap_s("Opal.#{application}.$attach(\"#{application_id}\", #{needs})")
 
     <<~JS
-      Opal.$$.#{layout}.$html(Opal.hash({
-        application: Opal.$$.#{application}.$new(null, #{needs}).$render(),
+      Opal.#{layout}.$html(Opal.hash({
+        application: Opal.#{application}.$new(null, #{needs}).$render(),
         javascript_include_tags: '#{javascript_include_tags.gsub("\n", '')}',
         attach_func: #{attach_func}
       }))

data/lib/snabberb/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Snabberb
-  VERSION = '0.5.0'
+  VERSION = '1.3.1'
 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,99 @@ 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',
+      ])
+    }
+
+    %x{
+      const PATCHER = snabbdom.init([
+        snabbdom.attributesModule,
+        snabbdom.classModule,
+        snabbdom.datasetModule,
+        snabbdom.eventListenersModule,
+        snabbdom.propsModule,
+        snabbdom.styleModule,
+      ])
+    }
+
     # You can define needs in each component. They are automatically set as instance variables
     #
     # For example:
@@ -27,7 +120,7 @@ module Snabberb
     def self.attach(container, **passed_needs)
       component = new(nil, passed_needs)
       component.node = `document.getElementById(#{container})`
-      component.update
+      component.update!
     end
 
     # Render the component as an HTML string using snabbdom-to-html.
@@ -57,7 +150,7 @@ module Snabberb
     end
 
     def html
-      `toHTML(#{render})`
+      node_to_s(render)
     end
 
     # Building block for dom elements using Snabbdom h and Snabberb components.
@@ -95,15 +188,8 @@ module Snabberb
       request_ids.shift
       return unless request_ids.empty?
 
-      @@patcher ||= %x{snabbdom.init([
-        snabbdom.attributesModule,
-        snabbdom.classModule,
-        snabbdom.eventListenersModule,
-        snabbdom.propsModule,
-        snabbdom.styleModule,
-      ])}
       node = @root.render
-      @@patcher.call(@root.node, node)
+      `PATCHER(#{root.node}, #{node})`
       @root.node = node
     end
 
@@ -151,6 +237,113 @@ module Snabberb
         end
       end
     end
+
+    # rubocop:disable Lint/UnusedMethodArgument
+    def parse_sel(sel)
+      %x{
+        let tag = ''
+        let id = ''
+        const classes = {}
+        const parts = sel.split(".")
+
+        parts.forEach((part, index) => {
+          if (index == 0) {
+            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", {