snabberb 0.3.0 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f6178782a46938a5569124c4fc28c148ed953a9bccf8cd7e4be2ba1835ca2b2c
-  data.tar.gz: 925315dd99157e735c0c05771349473eee08381a567a4a532348e2287630a0d4
+  metadata.gz: 5a1c844a2e4053181db278aeee2cd4c97ccd982e783c6ffb2b6df48391fd0a7b
+  data.tar.gz: 53e6e1712e779c653f7d429048f44e77cb9be525619d5276ee441e00e4ccb92b
 SHA512:
-  metadata.gz: b1b5b865a8bc623aef95f22f5c2cb1c53020ed7ec41d06b7f604cd88ba6ed94e677b0f765d23fd4bc96a7f09bac010263d2bcabe4c3894c8e7ee0ca882bbed0c
-  data.tar.gz: 72f2d035af6f132b2a06fb165ea6ee20ab58ad50d165b41557ca028815b356808549346dd729cafc076d95c8642939cdf365f8a1ec9d045cde8b06eb25920c29
+  metadata.gz: 4a0c84b3558683af920af98de8e341f0bb6c7d1a2320d1354a8cea76d7a73b83f6eaf99aae9115b5150e5f0643579b24c4b89076188756b04342dbae237db4a3
+  data.tar.gz: 1a3b2bed264e1443d38368dea5b05d93abe6f0a1544c0f88b25357d2c9e042456493418779721b250c0f52db5b9e3bccb33099ecb926ff92e409fbf7423bb8fe

data/.gitignore

@@ -8,6 +8,8 @@
 /tmp/
 /examples/roda/public
 /examples/roda/build
+/node_modules/
+package-lock.json
 
 .DS_STORE
 *.swp

data/.rubocop.yml

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

data/README.md

@@ -105,7 +105,7 @@ class NestedExample < Snabberb::Component
       h(:div, { style: { width: '100px' } }, [
         h(:div, 'hello'),
       ])
-    ](
+    ])
   end
 end
 ```
@@ -150,6 +150,14 @@ Snabberb.prerender_script('LayoutClass', 'ApplicationClass', 'application_id', j
 
 A detailed example can be found [in the Roda example](examples/roda).
 
+### Generating HTML from a File
+
+You can generate HTML from a component with a file.
+
+Snabberb.html\_script('path/to/my\_component.rb', **needs)
+
+This reads in the ruby file at the path and generates javascript that calls html on the CamelCased version of the file name.
+
 ## Installation
 
 Add this line to your application's Gemfile:

data/build.js

@@ -0,0 +1,22 @@
+// 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'
+
+module.exports.init = init
+module.exports.h = h
+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,13 +1,13 @@
 PATH
   remote: ../..
   specs:
-    snabberb (0.2.3)
+    snabberb (0.5.0)
       opal (~> 1.0)
 
 GEM
   remote: https://rubygems.org/
   specs:
-    ast (2.4.0)
+    ast (2.4.1)
     c_lexer (2.6.4.1.1)
       ast (~> 2.4.0)
       parser (= 2.6.4.1)
@@ -16,7 +16,7 @@ GEM
       parser (~> 2.6)
     parser (2.6.4.1)
       ast (~> 2.4.0)
-    rack (2.2.2)
+    rack (2.2.3)
 
 PLATFORMS
   ruby
@@ -28,4 +28,4 @@ DEPENDENCIES
   snabberb!
 
 BUNDLED WITH
-   2.1.2
+   2.1.4

data/examples/roda/Gemfile.lock

@@ -1,32 +1,32 @@
 PATH
   remote: ../..
   specs:
-    snabberb (0.2.5)
+    snabberb (0.5.0)
       opal (~> 1.0)
 
 GEM
   remote: https://rubygems.org/
   specs:
-    ast (2.4.0)
+    ast (2.4.1)
     c_lexer (2.6.4.1.1)
       ast (~> 2.4.0)
       parser (= 2.6.4.1)
-    concurrent-ruby (1.1.6)
+    concurrent-ruby (1.1.7)
     execjs (2.7.0)
-    libv8 (7.3.492.27.1)
-    mini_racer (0.2.9)
-      libv8 (>= 6.9.411)
+    libv8 (8.4.255.0)
+    mini_racer (0.3.1)
+      libv8 (~> 8.4.255)
     opal (1.0.3)
       ast (>= 2.3.0)
       parser (~> 2.6)
-    opal-sprockets (0.4.8.1.0.3.7)
+    opal-sprockets (0.4.9.1.0.3.7)
       opal (~> 1.0.0)
       sprockets (~> 3.7)
       tilt (>= 1.4)
     parser (2.6.4.1)
       ast (~> 2.4.0)
-    rack (2.2.2)
-    roda (3.30.0)
+    rack (2.2.3)
+    roda (3.36.0)
       rack
     sprockets (3.7.2)
       concurrent-ruby (~> 1.0)
@@ -46,4 +46,4 @@ DEPENDENCIES
   snabberb!
 
 BUNDLED WITH
-   2.1.2
+   2.1.4

data/lib/snabberb.rb

@@ -13,12 +13,12 @@ module Snabberb
       wrap_h(obj)
     when Array
       wrap_a(obj)
-    when Numeric
+    when Numeric, TrueClass, FalseClass
       obj
     when nil
       'Opal.nil'
     else
-      wrap_s(obj)
+      wrap_s(obj.to_s)
     end
   end
 
@@ -38,6 +38,21 @@ module Snabberb
     "Opal.hash(#{args})"
   end
 
+  # takes in a file and needs
+  # calls html on the CamelCased version of the file with the needs
+  def self.html_script(file, **needs)
+    klass = file.split('/').last
+                .split('.').first
+                .split('_').map(&:capitalize).join
+
+    script = <<~RUBY
+      #{File.read(file)}
+      #{klass}.html(`#{wrap(needs)}`)
+    RUBY
+
+    Opal.compile(script).strip.chomp(';')
+  end
+
   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})")

data/lib/snabberb/version.rb

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

data/opal/snabberb.rb

@@ -1,16 +1,8 @@
 # frozen_string_literal: true
 
+require 'erb'
 require 'native'
-
 require 'vendor/snabbdom'
-require 'vendor/snabbdom-attributes'
-require 'vendor/snabbdom-class'
-require 'vendor/snabbdom-eventlisteners'
-require 'vendor/snabbdom-props'
-require 'vendor/snabbdom-style'
-require 'vendor/snabbdom-to-html'
-require 'vendor/tovnode'
-
 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.
@@ -96,11 +178,12 @@ module Snabberb
       return unless request_ids.empty?
 
       @@patcher ||= %x{snabbdom.init([
-        snabbdom_attributes.default,
-        snabbdom_class.default,
-        snabbdom_eventlisteners.default,
-        snabbdom_props.default,
-        snabbdom_style.default,
+        snabbdom.attributesModule,
+        snabbdom.classModule,
+        snabbdom.datasetModule,
+        snabbdom.eventListenersModule,
+        snabbdom.propsModule,
+        snabbdom.styleModule,
       ])}
       node = @root.render
       @@patcher.call(@root.node, node)
@@ -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.