@dinoreic/fez 0.4.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dinoreic/fez",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Runtime custom DOM elements lib",
   "main": "dist/fez.js",
   "type": "module",

package/src/fez/connect.js

@@ -111,10 +111,14 @@ export default function connect(name, klass) {
 function useFastRender(node, klass) {
   const fezFast = node.getAttribute('fez-fast')
   var isFast = typeof klass.FAST === 'function' ? klass.FAST(node) : klass.FAST
-  if (fezFast == 'false') {
+  if (fezFast || isFast || node.childNodes[0] || node.nextSibling) {
+    return true
+  }
+  else if (fezFast == 'false') {
+    return false
+  }
+  else {
     return false
-  } else {
-    return fezFast || isFast
   }
 }
 

package/src/fez/defaults.js

@@ -54,6 +54,17 @@ const loadDefaults = () => {
     }
   })
 
+  // Show node only if test validates
+  // <fez-if if="window.foo">...
+  Fez('fez-if', class {
+    init(props) {
+      const test = new Function(`return (${props.if || props.test})`)
+      if (!test()) {
+        this.root.remove()
+      }
+    }
+  })
+
   // Memory store for memoization
   const memoStore = new Map()
 

package/src/fez/instance.js

@@ -130,13 +130,11 @@ export default class FezBase {
           }
         }
 
-        if (name == 'style' || !this.root[name]) {
-          if (typeof value == 'string') {
-            this.root.setAttribute(name, value)
-          }
-          else {
-            this.root[name] = value
-          }
+        if (typeof value == 'string') {
+          this.root.setAttribute(name, value)
+        }
+        else {
+          this.root[name] = value
         }
       }
     }
@@ -671,8 +669,10 @@ export default class FezBase {
     obj ||= {}
 
     handler ||= (o, k, v, oldValue) => {
-      this.onStateChange(k, v, oldValue)
-      this.nextTick(this.render, 'render')
+      if (v != oldValue) {
+        this.onStateChange(k, v, oldValue)
+        this.nextTick(this.render, 'render')
+      }
     }
 
     handler.bind(this)

package/src/fez/root.js

@@ -134,12 +134,62 @@ Fez.morphdom = (target, newNode, opts = {}) => {
   }
 }
 
+Fez._globalSubs ||= new Map()
+
 Fez.publish = (channel, ...args) => {
   Fez._subs ||= {}
   Fez._subs[channel] ||= []
   Fez._subs[channel].forEach((el) => {
     el[1].bind(el[0])(...args)
   })
+
+  // Trigger global subscriptions
+  const subs = Fez._globalSubs.get(channel)
+  if (subs) {
+    subs.forEach((sub) => {
+      if (sub.node.isConnected) {
+        sub.callback.call(sub.node, ...args)
+      } else {
+        // Remove disconnected nodes from subscriptions
+        subs.delete(sub)
+      }
+    })
+  }
+}
+
+Fez.subscribe = (node, eventName, callback) => {
+  // If second arg is function, shift arguments
+  if (typeof eventName === 'function') {
+    callback = eventName
+    eventName = node
+    node = document.body
+  }
+
+  // Handle string selectors
+  if (typeof node === 'string') {
+    node = document.querySelector(node)
+  }
+
+  if (!Fez._globalSubs.has(eventName)) {
+    Fez._globalSubs.set(eventName, new Set())
+  }
+
+  const subs = Fez._globalSubs.get(eventName)
+
+  // Remove existing subscription for same node and callback
+  subs.forEach(sub => {
+    if (sub.node === node && sub.callback === callback) {
+      subs.delete(sub)
+    }
+  })
+
+  const subscription = { node, callback }
+  subs.add(subscription)
+
+  // Return unsubscribe function
+  return () => {
+    subs.delete(subscription)
+  }
 }
 
 Fez.error = (text, show) => {
@@ -197,7 +247,7 @@ cssMixin(Fez)
 Fez.compile = compile
 Fez.state = state
 Fez.dump = objectDump
-Fez.dump = highlightAll
+Fez.highlightAll = highlightAll
 
 Fez.onReady(() => {
   Fez.log('Fez.LOG === true, logging enabled.')

package/src/rollup.js

@@ -13,7 +13,7 @@ const transformFez = (code, filePath) => {
   const baseName = filePath.split('/').pop().split('.');
 
   if (baseName[1] === 'fez') {
-    code = code.replace(/`/g, '\\`').replace(/\$/g, '\\$');
+    code = code.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$/g, '\\$');
     return `Fez.compile('${baseName[0]}', \`\n${code}\`)`;
   }
 }

package/src/svelte-cde-adapter.coffee

@@ -100,18 +100,19 @@ Svelte.connect = (name, klass) ->
       # %s-menu-vertical{ fast_connect: true }
 
       # connect @, name, klass
-      # if @firstChild && (klass.prototype.hasOwnProperty('fast') || @getAttribute('fast_connect') || @getAttribute('data-props') || @getAttribute('data-json-template'))
-      #   connect @, name, klass
-      # else
-      #   requestAnimationFrame =>
-      #     connect @, name, klass
 
-      if document.readyState == 'loading'
-        document.addEventListener 'DOMContentLoaded',
-          => connect(@, name, klass)
-        , once: true
+      if this.childNodes[0] || this.nextSibling || klass.prototype.hasOwnProperty('fast') || klass.prototype.hasOwnProperty('FAST') || @getAttribute('fast_connect') || @getAttribute('data-props') || @getAttribute('data-json-template')
+        connect @, name, klass
       else
-        connect(@, name, klass)
+        requestAnimationFrame =>
+          connect @, name, klass
+
+      # if document.readyState == 'loading'
+      #   document.addEventListener 'DOMContentLoaded',
+      #     => connect(@, name, klass)
+      #   , once: true
+      # else
+      #   connect(@, name, klass)
 
 # Creates HTML tag
 Svelte.tag = (tag, opts = {}, html = '') ->