twine-rails 1.0.0 → 2.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: 4386189c38efbea2da170dd03b7d30d11c69d0e7
-  data.tar.gz: 90f46d3522191a2e65f21f9bc0accef50accc453
+SHA256:
+  metadata.gz: 7245233240a25c03d7714bbeab59980acd3a0743118611db224c5eacaf52f7c8
+  data.tar.gz: e91b4658d70df7a8106b7ef6705429681819da11f411ea7fc4cd3e9fdfb18300
 SHA512:
-  metadata.gz: a841a7bc1f7a30ddd0dd06dbb317f4aef580ae384865bf6a7f3df2c1789c36ef22df1bc4a4ece8501f4b6349100994bc0d6bb48f1cb5d79bf5172f58ed41c09c
-  data.tar.gz: f66a43f275158666c7012acd90ca5a634c379ef8545c6255a6efb920f9cb82109c42ef7c7a98b492880949ea92af60eaab5f736acf5edffa490f247a44ea6194
+  metadata.gz: 1cc8f28bdd59879b679ea684021b5b500540e1d3928593b550488ae0cb9bd75a761bdc631ff70223028797812e9095e69c43ab9c2d77b2671a059be61d20a0a1
+  data.tar.gz: c8f4f398ef794db3e6062208f4d3ef8496d84f64968032bef0150b1a4b6f3f8044119bc362f182f0a0d15f09e4ea7818ed99a1ba62cb330e104ece89ff9a5f49

data/README.md

@@ -171,6 +171,7 @@ Where context expects a node and `$0` is shorthand for the current node in the d
 ## Releasing
 
 1. Update version number in `package.json`, `bower.json`, and `lib/twine-rails/version.rb`
-2. Run `bundle install` to update `Gemfile.lock`
-3. Run make .all && make .uglify to update JS
+2. Run `dev up` to update `Gemfile.lock`
+3. Run `make .all && make .uglify` to update JS
 4. Push the new tag to GitHub and the new version to rubygems with `bundle exec rake release`
+5. Publish the new version to NPM with `npm publish`.

data/lib/assets/javascripts/twine.coffee

@@ -24,6 +24,7 @@
 
   keypathRegex = /^[a-z]\w*(\.[a-z]\w*|\[\d+\])*$/i # Tests if a string is a pure keypath.
   refreshQueued = false
+  refreshCallbacks = []
   rootNode = null
 
   currentBindingCallbacks = null
@@ -56,6 +57,7 @@
 
   bind = (context, node, indexes, forceSaveContext) ->
     currentBindingCallbacks = []
+    element = null
     if node.bindingId
       Twine.unbind(node)
 
@@ -69,13 +71,26 @@
       element = findOrCreateElementForNode(node)
       element.indexes = indexes
 
-    for type, binding of Twine.bindingTypes when definition = Twine.getAttribute(node, type)
-      element = findOrCreateElementForNode(node)
+    bindingConstructors = null
+    for attribute in node.attributes
+      type = attribute.name
+      type = type.slice(5) if isDataAttribute(type)
+
+      constructor = Twine.bindingTypes[type]
+      continue unless constructor
+
+      bindingConstructors ?= []
+      definition = attribute.value
+      bindingConstructors.push([type, constructor, definition])
+
+    if bindingConstructors
+      element ?= findOrCreateElementForNode(node)
       element.bindings ?= []
       element.indexes ?= indexes
 
-      fn = binding(node, context, definition, element)
-      element.bindings.push(fn) if fn
+      for [_, constructor, definition] in bindingConstructors.sort(bindingOrder)
+        binding = constructor(node, context, definition, element)
+        element.bindings.push(binding) if binding
 
     if newContextKey = Twine.getAttribute(node, 'context')
       keypath = keypathForKey(node, newContextKey)
@@ -85,18 +100,15 @@
       context = getValue(context, keypath) || setValue(context, keypath, {})
 
     if element || newContextKey || forceSaveContext
-      element = findOrCreateElementForNode(node)
+      element ?= findOrCreateElementForNode(node)
       element.childContext = context
       element.indexes ?= indexes if indexes?
 
     callbacks = currentBindingCallbacks
 
-    # IE and Safari don't support node.children for DocumentFragment and SVGElement nodes.
-    # If the element supports children we continue to traverse the children, otherwise
-    # we stop traversing that subtree.
-    # https://developer.mozilla.org/en-US/docs/Web/API/ParentNode.children
-    # As a result, Twine are unsupported within DocumentFragment and SVGElement nodes.
-    bind(context, childNode, if newContextKey? then null else indexes) for childNode in (node.children || [])
+    # IE and Safari don't support node.children for DocumentFragment or SVGElement,
+    # See explanation in childrenForNode()
+    bind(context, childNode, if newContextKey? then null else indexes) for childNode in childrenForNode(node)
     Twine.count = nodeCount
 
     for callback in callbacks || []
@@ -105,13 +117,26 @@
 
     Twine
 
+  # IE and Safari don't support node.children for DocumentFragment and SVGElement nodes.
+  # If the element supports children we continue to traverse the children, otherwise
+  # we stop traversing that subtree.
+  # https://developer.mozilla.org/en-US/docs/Web/API/ParentNode.children
+  # As a result, Twine are unsupported within DocumentFragment and SVGElement nodes.
+  #
+  # We also prevent nodes from being iterated over more than once by cacheing the
+  # lookup for children nodes, which prevents nodes that are dynamically inserted
+  # or removed as siblings from causing double/ missed binds and unbinds.
+  childrenForNode = (node) ->
+    if node.children then Array::slice.call(node.children, 0) else []
+
   findOrCreateElementForNode = (node) ->
     node.bindingId ?= ++nodeCount
     elements[node.bindingId] ?= {}
-    elements[node.bindingId]
 
   # Queues a refresh of the DOM, batching up calls for the current synchronous block.
-  Twine.refresh = ->
+  # The callback will be called once when the refresh has completed.
+  Twine.refresh = (callback) ->
+    refreshCallbacks.push(callback) if callback
     return if refreshQueued
     refreshQueued = true
     setTimeout(Twine.refreshImmediately, 0)
@@ -123,6 +148,10 @@
   Twine.refreshImmediately = ->
     refreshQueued = false
     refreshElement(element) for key, element of elements
+
+    callbacks = refreshCallbacks
+    refreshCallbacks = []
+    cb() for cb in callbacks
     return
 
   Twine.register = (name, component) ->
@@ -145,10 +174,9 @@
       delete elements[id]
       delete node.bindingId
 
-
     # IE and Safari don't support node.children for DocumentFragment or SVGElement,
-    # See explaination in bind()
-    Twine.unbind(childNode) for childNode in (node.children || [])
+    # See explanation in childrenForNode()
+    Twine.unbind(childNode) for childNode in childrenForNode(node)
     this
 
   # Returns the binding context for a node by looking up the tree.
@@ -187,7 +215,7 @@
     addKey(rootContext) if node == rootNode
     keys.join('.')
 
-  valueAttributeForNode = (node) ->
+  valuePropertyForNode = (node) ->
     name = node.nodeName.toLowerCase()
     if name in ['input', 'textarea', 'select']
       if node.getAttribute('type') in ['checkbox', 'radio'] then 'checked' else 'value'
@@ -232,14 +260,7 @@
     object[lastKey] = value
 
   stringifyNodeAttributes = (node) ->
-    nAttributes = node.attributes.length
-    i = 0
-    result = ""
-    while i < nAttributes
-      attr = node.attributes.item(i)
-      result += "#{attr.nodeName}='#{attr.textContent}'"
-      i+=1
-    result
+    [].map.call(node.attributes, (attr) -> "#{attr.name}=#{JSON.stringify(attr.value)}").join(' ')
 
   wrapFunctionString = (code, args, node) ->
     if isKeypath(code) && keypath = keypathForKey(node, code)
@@ -249,7 +270,7 @@
         ($context, $root) -> getValue($context, keypath)
     else
       code = "return #{code}"
-      code = "with($arrayPointers) { #{code} }" if nodeHasArrayIndexes(node)
+      code = "with($arrayPointers) { #{code} }" if nodeArrayIndexes(node)
       code = "with($registry) { #{code} }" if requiresRegistry(args)
       try
         new Function(args, "with($context) { #{code} }")
@@ -258,14 +279,12 @@
 
   requiresRegistry = (args) -> /\$registry/.test(args)
 
-  nodeHasArrayIndexes = (node) ->
-    return unless node.bindingId?
-    !!elements[node.bindingId]?.indexes?
+  nodeArrayIndexes = (node) ->
+    node.bindingId? && elements[node.bindingId]?.indexes
 
   arrayPointersForNode = (node, context) ->
-    return {} unless node.bindingId?
-    indexes = elements[node.bindingId]?.indexes
-    return {} unless indexes?
+    indexes = nodeArrayIndexes(node)
+    return {} unless indexes
 
     result = {}
     for key, index of indexes
@@ -273,17 +292,35 @@
     result
 
   isKeypath = (value) ->
-    value not in ['true', 'false', 'null', 'undefined'] and keypathRegex.test(value)
+    value not in ['true', 'false', 'null', 'undefined'] && keypathRegex.test(value)
+
+  isDataAttribute = (value) ->
+    value[0] == 'd' &&
+    value[1] == 'a' &&
+    value[2] == 't' &&
+    value[3] == 'a' &&
+    value[4] == '-'
 
   fireCustomChangeEvent = (node) ->
     event = document.createEvent('CustomEvent')
     event.initCustomEvent('bindings:change', true, false, {})
     node.dispatchEvent(event)
 
+  bindingOrder = ([firstType], [secondType]) ->
+    ORDERED_BINDINGS = {
+      define: 1,
+      bind: 2,
+      eval: 3
+    }
+    return 1 unless ORDERED_BINDINGS[firstType]
+    return -1 unless ORDERED_BINDINGS[secondType]
+
+    ORDERED_BINDINGS[firstType] - ORDERED_BINDINGS[secondType]
+
   Twine.bindingTypes =
     bind: (node, context, definition) ->
-      valueAttribute = valueAttributeForNode(node)
-      value = node[valueAttribute]
+      valueProp = valuePropertyForNode(node)
+      value = node[valueProp]
       lastValue = undefined
       teardown = undefined
 
@@ -296,9 +333,9 @@
         return if newValue == lastValue # return if we can and avoid a DOM operation
 
         lastValue = newValue
-        return if newValue == node[valueAttribute]
+        return if newValue == node[valueProp]
 
-        node[valueAttribute] = if checkedValueType then newValue == node.value else newValue
+        node[valueProp] = if checkedValueType then newValue == node.value else newValue
         fireCustomChangeEvent(node)
 
       return {refresh} unless isKeypath(definition)
@@ -308,10 +345,10 @@
           return unless node.checked
           setValue(context, keypath, node.value)
         else
-          setValue(context, keypath, node[valueAttribute])
+          setValue(context, keypath, node[valueProp])
 
       keypath = keypathForKey(node, definition)
-      twoWayBinding = valueAttribute != 'textContent' && node.type != 'hidden'
+      twoWayBinding = valueProp != 'textContent' && node.type != 'hidden'
 
       if keypath[0] == '$root'
         context = rootContext
@@ -321,13 +358,14 @@
         refreshContext()
 
       if twoWayBinding
+        events = ['input', 'keyup', 'change']
         changeHandler = ->
-          return if getValue(context, keypath) == this[valueAttribute]
+          return if getValue(context, keypath) == this[valueProp]
           refreshContext()
           Twine.refreshImmediately()
-        $(node).on 'input keyup change', changeHandler
+        node.addEventListener(eventName, changeHandler) for eventName in events
         teardown = ->
-          $(node).off 'input keyup change', changeHandler
+          node.removeEventListener(eventName, changeHandler) for eventName in events
 
       {refresh, teardown}
 
@@ -337,16 +375,24 @@
       return refresh: ->
         newValue = !fn.call(node, context, rootContext, arrayPointersForNode(node, context))
         return if newValue == lastValue
-        $(node).toggleClass('hide', lastValue = newValue)
+        node.classList.toggle('hide', lastValue = newValue)
 
     'bind-class': (node, context, definition) ->
       fn = wrapFunctionString(definition, '$context,$root,$arrayPointers', node)
-      lastValue = {}
+      lastValues = {}
       return refresh: ->
-        newValue = fn.call(node, context, rootContext, arrayPointersForNode(node, context))
-        for key, value of newValue when !lastValue[key] != !value
-          $(node).toggleClass(key, !!value)
-        lastValue = newValue
+        newValues = fn.call(node, context, rootContext, arrayPointersForNode(node, context))
+
+        for key, value of newValues
+          newValue = newValues[key] = !!newValues[key]
+          currValue = lastValues[key] ? node.classList.contains(key)
+          if currValue != newValue
+            if newValue
+              node.classList.add(key)
+            else
+              node.classList.remove(key)
+
+        lastValues = newValues
 
     'bind-attribute': (node, context, definition) ->
       fn = wrapFunctionString(definition, '$context,$root,$arrayPointers', node)
@@ -354,7 +400,10 @@
       return refresh: ->
         newValue = fn.call(node, context, rootContext, arrayPointersForNode(node, context))
         for key, value of newValue when lastValue[key] != value
-          $(node).attr(key, value || null)
+          if (!value)
+            node.removeAttribute(key)
+          else
+            node.setAttribute(key, value)
         lastValue = newValue
 
     define: (node, context, definition) ->
@@ -383,24 +432,24 @@
 
     indexes
 
-  setupAttributeBinding = (attributeName, bindingName) ->
-    booleanAttribute = attributeName in ['checked', 'indeterminate', 'disabled', 'readOnly']
+  setupPropertyBinding = (attributeName, bindingName) ->
+    booleanProp = attributeName in ['checked', 'indeterminate', 'disabled', 'readOnly', 'draggable']
 
-    Twine.bindingTypes["bind-#{bindingName}"] = (node, context, definition) ->
+    Twine.bindingTypes["bind-#{bindingName.toLowerCase()}"] = (node, context, definition) ->
       fn = wrapFunctionString(definition, '$context,$root,$arrayPointers', node)
       lastValue = undefined
       return refresh: ->
         newValue = fn.call(node, context, rootContext, arrayPointersForNode(node, context))
-        newValue = !!newValue if booleanAttribute
+        newValue = !!newValue if booleanProp
         return if newValue == lastValue
         node[attributeName] = lastValue = newValue
 
         fireCustomChangeEvent(node) if attributeName == 'checked'
 
-  for attribute in ['placeholder', 'checked', 'indeterminate', 'disabled', 'href', 'title', 'readOnly', 'src']
-    setupAttributeBinding(attribute, attribute)
+  for attribute in ['placeholder', 'checked', 'indeterminate', 'disabled', 'href', 'title', 'readOnly', 'src', 'draggable']
+    setupPropertyBinding(attribute, attribute)
 
-  setupAttributeBinding('innerHTML', 'unsafe-html')
+  setupPropertyBinding('innerHTML', 'unsafe-html')
 
   preventDefaultForEvent = (event) ->
     (event.type == 'submit' || event.currentTarget.nodeName.toLowerCase() == 'a') &&
@@ -408,7 +457,7 @@
 
   setupEventBinding = (eventName) ->
     Twine.bindingTypes["bind-event-#{eventName}"] = (node, context, definition) ->
-      onEventHandler = (event, data) ->
+      onEventHandler = (event, data = event.detail) ->
         discardEvent = Twine.shouldDiscardEvent[eventName]?(event)
         if discardEvent || preventDefaultForEvent(event)
           event.preventDefault()
@@ -417,10 +466,10 @@
 
         wrapFunctionString(definition, '$context,$root,$arrayPointers,event,data', node).call(node, context, rootContext, arrayPointersForNode(node, context), event, data)
         Twine.refreshImmediately()
-      $(node).on eventName, onEventHandler
+      node.addEventListener(eventName, onEventHandler)
 
       return teardown: ->
-        $(node).off eventName, onEventHandler
+        node.removeEventListener(eventName, onEventHandler)
 
   for eventName in ['click', 'dblclick', 'mouseenter', 'mouseleave', 'mouseover', 'mouseout', 'mousedown', 'mouseup',
     'submit', 'dragenter', 'dragleave', 'dragover', 'drop', 'drag', 'change', 'keypress', 'keydown', 'keyup', 'input',

data/lib/twine-rails.rb

@@ -1,5 +1,4 @@
 require "rails"
-require "active_support"
 
 require "twine-rails/version"
 

data/lib/twine-rails/version.rb

@@ -1,3 +1,3 @@
 module TwineRails
-  VERSION = '1.0.0'
+  VERSION = '2.0.0'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: twine-rails
 version: !ruby/object:Gem::Version
-  version: 1.0.0
+  version: 2.0.0
 platform: ruby
 authors:
 - Justin Li
@@ -10,7 +10,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-06-23 00:00:00.000000000 Z
+date: 2021-02-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: coffee-rails
@@ -26,6 +26,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: railties
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
@@ -69,7 +83,11 @@ files:
 homepage: https://github.com/Shopify/twine
 licenses:
 - MIT
-metadata: {}
+metadata:
+  bug_tracker_uri: https://github.com/Shopify/twine/issues
+  changelog_uri: https://github.com/Shopify/twine/releases
+  source_code_uri: https://github.com/Shopify/twine
+  allowed_push_host: https://rubygems.org
 post_install_message: 
 rdoc_options: []
 require_paths:
@@ -85,8 +103,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubyforge_project: 
-rubygems_version: 2.5.1
+rubygems_version: 3.0.3
 signing_key: 
 specification_version: 4
 summary: Minimalistic two-way bindings