cable_ready - npm Package Compare versions

Comparing version 5.0.0-pre4 to 5.0.0-pre5

javascript/cable_ready.js

@@ -5,2 +5,4 @@ import { xpathToElement, dispatch } from './utils'
 import actionCable from './action_cable'
+import StreamFromElement from './stream_from_element'
+import UpdatesForElement from './updates_for_element'
 
@@ -77,4 +79,10 @@ const perform = (
   actionCable.setConsumer(consumer)
+
+  if (!customElements.get('stream-from'))
+    customElements.define('stream-from', StreamFromElement)
+
+  if (!customElements.get('updates-for'))
+    customElements.define('updates-for', UpdatesForElement)
 }
 
 export { perform, performAsync, initialize }

javascript/index.js

@@ -6,6 +6,6 @@ import * as MorphCallbacks from './morph_callbacks'
 import { perform, performAsync, initialize } from './cable_ready'
-import './stream_from_element'
-import './updates_for_element'
+import StreamFromElement from './stream_from_element'
+import UpdatesForElement from './updates_for_element'
 
-export { Utils, MorphCallbacks }
+export { Utils, MorphCallbacks, StreamFromElement, UpdatesForElement }
 
@@ -12,0 +12,0 @@ export default {

javascript/stream_from_element.js

 import CableReady from '.'
 import actionCable from './action_cable'
 
-class StreamFromElement extends HTMLElement {
+export default class StreamFromElement extends HTMLElement {
   async connectedCallback () {
@@ -38,5 +38,1 @@ if (this.preview) return
 }
-
-if (!window.customElements.get('stream-from')) {
-  window.customElements.define('stream-from', StreamFromElement)
-}

javascript/updates_for_element.js

@@ -5,3 +5,3 @@ import morphdom from 'morphdom'
 import actionCable from './action_cable'
-import { Boris, assignFocus, dispatch } from './utils'
+import { debounce, assignFocus, dispatch, handleErrors } from './utils'
 
@@ -17,3 +17,7 @@ const template = `
 
-class UpdatesForElement extends HTMLElement {
+function url (ele) {
+  return ele.hasAttribute('url') ? ele.getAttribute('url') : location.href
+}
+
+export default class UpdatesForElement extends HTMLElement {
   constructor () {
@@ -23,3 +27,2 @@ super()
     shadowRoot.innerHTML = template
-    this.update = Boris(this.update.bind(this), this.debounce)
   }
@@ -29,2 +32,4 @@
     if (this.preview) return
+    this.update = debounce(this.update.bind(this), this.debounce)
+
     const consumer = await actionCable.getConsumer()
@@ -58,9 +63,24 @@ if (consumer) {
 
+    const html = {}
     const template = document.createElement('template')
-    const response = await fetch(this.url)
-    const html = await response.text()
 
-    template.innerHTML = String(html).trim()
-    const fragments = template.content.querySelectorAll(query)
     for (let i = 0; i < blocks.length; i++) {
+      blocks[i].setAttribute('updating', 'updating')
+
+      if (!html.hasOwnProperty(url(blocks[i]))) {
+        const response = await fetch(url(blocks[i]))
+          .then(handleErrors)
+          .catch(e => console.error(`Could not fetch ${url(blocks[i])}`))
+        if (response === undefined) return
+        html[url(blocks[i])] = await response.text()
+      }
+
+      template.innerHTML = String(html[url(blocks[i])]).trim()
+      const fragments = template.content.querySelectorAll(query)
+
+      if (fragments.length <= i) {
+        console.warn('Update aborted due to mismatched number of elements')
+        return
+      }
+
       activeElement.set(document.activeElement)
@@ -76,13 +96,12 @@ const operation = {
         childrenOnly: true,
-        onBeforeElUpdated: shouldMorph(operation)
+        onBeforeElUpdated: shouldMorph(operation),
+        onElUpdated: _ => {
+          blocks[i].removeAttribute('updating')
+          dispatch(blocks[i], 'cable-ready:after-update', operation)
+          assignFocus(operation.focusSelector)
+        }
       })
-      dispatch(blocks[i], 'cable-ready:after-update', operation)
-      assignFocus(operation.focusSelector)
     }
   }
 
-  get url () {
-    return this.hasAttribute('url') ? this.getAttribute('url') : location.href
-  }
-
   get preview () {
@@ -101,5 +120,1 @@ return (
 }
-
-if (!window.customElements.get('updates-for')) {
-  window.customElements.define('updates-for', UpdatesForElement)
-}

javascript/utils.js

@@ -104,4 +104,3 @@ import { inputTags, textInputTypes } from './enums'
 
-// Boris de bouncer
-function Boris (func, timeout) {
+function debounce (func, timeout) {
   let timer
@@ -114,2 +113,7 @@ return (...args) => {
 
+function handleErrors (response) {
+  if (!response.ok) throw Error(response.statusText)
+  return response
+}
+
 export {
@@ -125,3 +129,4 @@ isTextInput,
   after,
-  Boris
+  debounce,
+  handleErrors
 }

package.json

 {
   "name": "cable_ready",
-  "version": "5.0.0-pre4",
+  "version": "5.0.0-pre5",
   "description": "CableReady helps you create great real-time user experiences by making it simple to trigger client-side DOM changes from server-side Ruby.",
@@ -28,3 +28,2 @@ "keywords": [
   "module": "./javascript/index.js",
-  "sideEffects": false,
   "scripts": {
@@ -40,4 +39,4 @@ "lint": "yarn run prettier-standard:check",
   "devDependencies": {
-    "prettier-standard": "^16.1.0"
+    "prettier-standard": "^16.4.1"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

357103

increased by0.24%

Lines of code

897

increased by2.05%

No dependency changes