@dinoreic/fez 0.4.0 → 0.5.2

package/src/fez/utils/dump.js

@@ -2,8 +2,8 @@
 const log_pretty_print = (html) => {
   const parts = html
     .split(/(<\/?[^>]+>)/g)
-    .map(p => p.trim())
-    .filter(p => p);
+    .map((p) => p.trim())
+    .filter((p) => p);
 
   let indent = 0;
   const lines = [];
@@ -14,41 +14,48 @@ const log_pretty_print = (html) => {
     const nextNextPart = parts[i + 2];
 
     // Check if it's a tag
-    if (part.startsWith('<')) {
+    if (part.startsWith("<")) {
       // Check if this is an opening tag followed by text and then its closing tag
-      if (!part.startsWith('</') && !part.endsWith('/>') && nextPart && !nextPart.startsWith('<') && nextNextPart && nextNextPart.startsWith('</')) {
+      if (
+        !part.startsWith("</") &&
+        !part.endsWith("/>") &&
+        nextPart &&
+        !nextPart.startsWith("<") &&
+        nextNextPart &&
+        nextNextPart.startsWith("</")
+      ) {
         // Combine them on one line
         const actualIndent = Math.max(0, indent);
-        lines.push('  '.repeat(actualIndent) + part + nextPart + nextNextPart);
+        lines.push("  ".repeat(actualIndent) + part + nextPart + nextNextPart);
         i += 2; // Skip the next two parts
       }
       // Closing tag
-      else if (part.startsWith('</')) {
+      else if (part.startsWith("</")) {
         indent--;
         const actualIndent = Math.max(0, indent);
-        lines.push('  '.repeat(actualIndent) + part);
+        lines.push("  ".repeat(actualIndent) + part);
       }
       // Self-closing tag
-      else if (part.endsWith('/>') || part.includes(' />')) {
+      else if (part.endsWith("/>") || part.includes(" />")) {
         const actualIndent = Math.max(0, indent);
-        lines.push('  '.repeat(actualIndent) + part);
+        lines.push("  ".repeat(actualIndent) + part);
       }
       // Opening tag
       else {
         const actualIndent = Math.max(0, indent);
-        lines.push('  '.repeat(actualIndent) + part);
+        lines.push("  ".repeat(actualIndent) + part);
         indent++;
       }
     }
     // Text node
     else if (part) {
       const actualIndent = Math.max(0, indent);
-      lines.push('  '.repeat(actualIndent) + part);
+      lines.push("  ".repeat(actualIndent) + part);
     }
   }
 
-  return lines.join('\n');
-}
+  return lines.join("\n");
+};
 
 const LOG = (() => {
   const logs = [];
@@ -57,11 +64,11 @@ const LOG = (() => {
   let renderContent = null; // Will hold the render function
 
   // Add ESC key handler and arrow key navigation
-  document.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape') {
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") {
       e.preventDefault();
-      const dialog = document.getElementById('dump-dialog');
-      const button = document.getElementById('log-reopen-button');
+      const dialog = document.getElementById("dump-dialog");
+      const button = document.getElementById("log-reopen-button");
 
       if (dialog) {
         // Close dialog
@@ -72,25 +79,30 @@ const LOG = (() => {
         button.remove();
         showLogDialog();
       }
-    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-      const dialog = document.getElementById('dump-dialog');
+    } else if (
+      e.key === "ArrowLeft" ||
+      e.key === "ArrowRight" ||
+      e.key === "ArrowUp" ||
+      e.key === "ArrowDown"
+    ) {
+      const dialog = document.getElementById("dump-dialog");
       if (dialog && logs.length > 0) {
         e.preventDefault();
-        if (e.key === 'ArrowLeft' && currentIndex > 0) {
+        if (e.key === "ArrowLeft" && currentIndex > 0) {
           currentIndex--;
-          localStorage.setItem('_LOG_INDEX', currentIndex);
+          localStorage.setItem("_LOG_INDEX", currentIndex);
           renderContent();
-        } else if (e.key === 'ArrowRight' && currentIndex < logs.length - 1) {
+        } else if (e.key === "ArrowRight" && currentIndex < logs.length - 1) {
           currentIndex++;
-          localStorage.setItem('_LOG_INDEX', currentIndex);
+          localStorage.setItem("_LOG_INDEX", currentIndex);
           renderContent();
-        } else if (e.key === 'ArrowUp' && currentIndex > 0) {
+        } else if (e.key === "ArrowUp" && currentIndex > 0) {
           currentIndex = Math.max(0, currentIndex - 5);
-          localStorage.setItem('_LOG_INDEX', currentIndex);
+          localStorage.setItem("_LOG_INDEX", currentIndex);
           renderContent();
-        } else if (e.key === 'ArrowDown' && currentIndex < logs.length - 1) {
+        } else if (e.key === "ArrowDown" && currentIndex < logs.length - 1) {
           currentIndex = Math.min(logs.length - 1, currentIndex + 5);
-          localStorage.setItem('_LOG_INDEX', currentIndex);
+          localStorage.setItem("_LOG_INDEX", currentIndex);
           renderContent();
         }
       }
@@ -98,17 +110,18 @@ const LOG = (() => {
   });
 
   const createLogButton = () => {
-    let btn = document.getElementById('log-reopen-button');
+    let btn = document.getElementById("log-reopen-button");
     if (!btn) {
-      btn = document.body.appendChild(document.createElement('button'));
-      btn.id = 'log-reopen-button';
-      btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle;margin-right:4px"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>LOG';
+      btn = document.body.appendChild(document.createElement("button"));
+      btn.id = "log-reopen-button";
+      btn.innerHTML =
+        '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle;margin-right:4px"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>LOG';
       btn.style.cssText =
-        'position:fixed; top: 10px; right: 10px;' +
-        'padding:10px 20px;background:#ff3333;color:#fff;border:none;' +
-        'cursor:pointer;font:14px/1.4 monospace;z-index:2147483647;' +
-        'border-radius:8px;display:flex;align-items:center;' +
-        'opacity:1;visibility:visible;box-shadow:0 4px 12px rgba(255,51,51,0.3)';
+        "position:fixed; top: 10px; right: 10px;" +
+        "padding:10px 20px;background:#ff3333;color:#fff;border:none;" +
+        "cursor:pointer;font:14px/1.4 monospace;z-index:2147483647;" +
+        "border-radius:8px;display:flex;align-items:center;" +
+        "opacity:1;visibility:visible;box-shadow:0 4px 12px rgba(255,51,51,0.3)";
       btn.onclick = () => {
         btn.remove();
         showLogDialog();
@@ -117,20 +130,23 @@ const LOG = (() => {
   };
 
   const showLogDialog = () => {
-    let d = document.getElementById('dump-dialog');
+    // Remove any existing log button when showing dialog
+    const existingBtn = document.getElementById("log-reopen-button");
+    if (existingBtn) existingBtn.remove();
+
+    let d = document.getElementById("dump-dialog");
     if (!d) {
-      d = document.body.appendChild(document.createElement('div'));
-      d.id = 'dump-dialog';
-      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+      d = document.body.appendChild(document.createElement("div"));
+      d.id = "dump-dialog";
       d.style.cssText =
-        'position:absolute; top:' + (scrollTop + 20) + 'px; left: 20px; right:20px;' +
-        'background:#fff; border:1px solid #333; box-shadow:0 0 10px rgba(0,0,0,0.5);' +
-        'padding:20px; overflow:auto; z-index:2147483646; font:13px/1.4 monospace;' +
-        'white-space:pre; display:block; opacity:1; visibility:visible';
+        "position:fixed; top:20px; left:20px; right:20px; max-height:calc(100vh - 40px);" +
+        "background:#fff; border:1px solid #333; box-shadow:0 0 10px rgba(0,0,0,0.5);" +
+        "padding:20px; overflow:auto; z-index:2147483646; font:13px/1.4 monospace;" +
+        "white-space:pre; display:block; opacity:1; visibility:visible";
     }
 
     // Check if we have a saved index and it's still valid
-    const savedIndex = parseInt(localStorage.getItem('_LOG_INDEX'));
+    const savedIndex = parseInt(localStorage.getItem("_LOG_INDEX"));
     if (!isNaN(savedIndex) && savedIndex >= 0 && savedIndex < logs.length) {
       currentIndex = savedIndex;
     } else {
@@ -138,36 +154,42 @@ const LOG = (() => {
     }
 
     renderContent = () => {
-      const buttons = logs.map((_, i) => {
-        let bgColor = '#f0f0f0'; // default
-        if (i !== currentIndex) {
-          if (logTypes[i] === 'object') {
-            bgColor = '#d6e3ef'; // super light blue
-          } else if (logTypes[i] === 'array') {
-            bgColor = '#d8d5ef'; // super light indigo
+      const buttons = logs
+        .map((_, i) => {
+          let bgColor = "#f0f0f0"; // default
+          if (i !== currentIndex) {
+            if (logTypes[i] === "object") {
+              bgColor = "#d6e3ef"; // super light blue
+            } else if (logTypes[i] === "array") {
+              bgColor = "#d8d5ef"; // super light indigo
+            }
           }
-        }
-        return `<button style="font-size: 14px; font-weight: 400; padding:2px 6px; margin: 0 2px 2px 0;cursor:pointer;background:${i === currentIndex ? '#333' : bgColor};color:${i === currentIndex ? '#fff' : '#000'}" data-index="${i}">${i + 1}</button>`
-      }).join('');
+          return `<button style="font-size: 14px; font-weight: 400; padding:2px 6px; margin: 0 2px 2px 0;cursor:pointer;background:${i === currentIndex ? "#333" : bgColor};color:${i === currentIndex ? "#fff" : "#000"}" data-index="${i}">${i + 1}</button>`;
+        })
+        .join("");
 
       d.innerHTML =
         '<div style="display:flex;flex-direction:column;height:100%">' +
         '<div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px">' +
-        '<div style="display:flex;flex-wrap:wrap;gap:4px;flex:1;margin-right:10px">' + buttons + '</div>' +
+        '<div style="display:flex;flex-wrap:wrap;gap:4px;flex:1;margin-right:10px">' +
+        buttons +
+        "</div>" +
         '<button style="padding:4px 8px;cursor:pointer;flex-shrink:0">&times;</button>' +
-        '</div>' +
-        '<xmp style="font-family:monospace;flex:1;overflow:auto;margin:0;padding:0;color:#000;background:#fff;font-size:14px;line-height:22px">' + logs[currentIndex] + '</xmp>' +
-        '</div>';
+        "</div>" +
+        '<xmp style="font-family:monospace;flex:1;overflow:auto;margin:0;padding:0;color:#000;background:#fff;font-size:14px;line-height:22px">' +
+        logs[currentIndex] +
+        "</xmp>" +
+        "</div>";
 
       d.querySelector('button[style*="flex-shrink:0"]').onclick = () => {
         d.remove();
         createLogButton();
       };
 
-      d.querySelectorAll('button[data-index]').forEach(btn => {
+      d.querySelectorAll("button[data-index]").forEach((btn) => {
         btn.onclick = () => {
           currentIndex = parseInt(btn.dataset.index);
-          localStorage.setItem('_LOG_INDEX', currentIndex);
+          localStorage.setItem("_LOG_INDEX", currentIndex);
           renderContent();
         };
       });
@@ -176,10 +198,10 @@ const LOG = (() => {
     renderContent();
   };
 
-  return o => {
+  return (o) => {
     if (!document.body) {
-      window.requestAnimationFrame( () => LOG(o) )
-      return
+      window.requestAnimationFrame(() => LOG(o));
+      return;
     }
 
     // Store the original type
@@ -187,37 +209,45 @@ const LOG = (() => {
 
     if (o instanceof Node) {
       if (o.nodeType === Node.TEXT_NODE) {
-        o = o.textContent || String(o)
+        o = o.textContent || String(o);
       } else {
-        o = log_pretty_print(o.outerHTML)
+        o = log_pretty_print(o.outerHTML);
       }
     }
 
-    if (o === undefined) { o = 'undefined' }
-    if (o === null) { o = 'null' }
+    if (o === undefined) {
+      o = "undefined";
+    }
+    if (o === null) {
+      o = "null";
+    }
 
     if (Array.isArray(o)) {
-      originalType = 'array';
-    } else if (typeof o === 'object' && o !== null) {
-      originalType = 'object';
+      originalType = "array";
+    } else if (typeof o === "object" && o !== null) {
+      originalType = "object";
     }
 
-    if (typeof o != 'string') {
-      o = JSON.stringify(o, (key, value) => {
-        if (typeof value === 'function') {
-          return String(value);
-        }
-        return value;
-      }, 2).replaceAll('<', '&lt;')
+    if (typeof o != "string") {
+      o = JSON.stringify(
+        o,
+        (key, value) => {
+          if (typeof value === "function") {
+            return String(value);
+          }
+          return value;
+        },
+        2,
+      ).replaceAll("<", "&lt;");
     }
 
-    o = o.trim()
+    o = o.trim();
 
     logs.push(o + `\n\ntype: ${originalType}`);
     logTypes.push(originalType);
 
     // Check if log dialog is open by checking for element
-    const isOpen = !!document.getElementById('dump-dialog');
+    const isOpen = !!document.getElementById("dump-dialog");
 
     if (!isOpen) {
       // Show log dialog by default
@@ -225,7 +255,7 @@ const LOG = (() => {
     } else {
       // Update current index to the new log and refresh
       currentIndex = logs.length - 1;
-      localStorage.setItem('_LOG_INDEX', currentIndex);
+      localStorage.setItem("_LOG_INDEX", currentIndex);
       if (renderContent) {
         renderContent();
       }
@@ -233,8 +263,8 @@ const LOG = (() => {
   };
 })();
 
-if (typeof window !== 'undefined' && !window.LOG) {
-  window.LOG = LOG
+if (typeof window !== "undefined" && !window.LOG) {
+  window.LOG = LOG;
 }
 
-export default LOG
+export default LOG;

package/src/fez/utils/highlight_all.js

@@ -75,7 +75,7 @@ const highlightAll = () => {
       // Add click handler to dump the node
       label.addEventListener('click', (e) => {
         e.stopPropagation();
-        Fez.dump(el);
+        Fez.log(el);
       });
 
       overlay.appendChild(label);

package/src/fez.js

@@ -1,65 +1,87 @@
-// base class for custom dom objects
-import FezBase from './fez/instance.js'
-if (typeof window !== 'undefined') window.FezBase = FezBase
+/**
+ * Fez - Runtime Custom DOM Elements Library
+ *
+ * Entry point that:
+ * - Exports FezBase and Fez
+ * - Sets up auto-compilation observer
+ * - Handles garbage collection
+ */
+
+// =============================================================================
+// EXPORTS
+// =============================================================================
 
-// base class for custom dom objects
+import FezBase from './fez/instance.js'
 import Fez from './fez/root.js'
-if (typeof window !== 'undefined') window.Fez = Fez
 
-// Load defaults after Fez is properly initialized
+// Expose to window
+if (typeof window !== 'undefined') {
+  window.FezBase = FezBase
+  window.Fez = Fez
+}
+
+// Load default components
 import('./fez/defaults.js')
 
-// clear all unattached nodes
-setInterval(() => {
-  for (const [key, el] of Fez.instances) {
-    if (!el?.isConnected) {
-      // Fez.error(`Found junk instance that is not connected ${el.fezName}`)
-      el.fez?.fezOnDestroy()
-      Fez.instances.delete(key)
-    }
-  }
-}, 5_000)
+// =============================================================================
+// AUTO-COMPILATION OBSERVER
+// =============================================================================
 
-// define Fez observer
-const observer = new MutationObserver((mutations) => {
+// Watch for template/xmp/script[fez] elements and compile them
+const observer = new MutationObserver(mutations => {
   for (const { addedNodes, removedNodes } of mutations) {
-    addedNodes.forEach((node) => {
-      if (node.nodeType !== 1) return; // only elements
+    // Compile new fez templates
+    addedNodes.forEach(node => {
+      if (node.nodeType !== 1) return
 
-      if (node.matches('template[fez], xmp[fez], script[fez]')) {
-        Fez.compile(node);
-        node.remove();
+      if (node.matches?.('template[fez], xmp[fez], script[fez]')) {
+        Fez.compile(node)
+        node.remove()
       }
 
-      if (node.querySelectorAll) {
-        const nestedTemplates = node.querySelectorAll('template[fez], xmp[fez], script[fez]');
-        nestedTemplates.forEach(template => {
-          Fez.compile(template);
-          template.remove();
-        });
-      }
-    });
+      node.querySelectorAll?.('template[fez], xmp[fez], script[fez]').forEach(tpl => {
+        Fez.compile(tpl)
+        tpl.remove()
+      })
+    })
+
+    // Cleanup removed components
+    // Use microtask to check if node was just moved (will be reconnected)
+    // vs actually removed from the document
+    removedNodes.forEach(node => {
+      if (node.nodeType !== 1) return
 
-    removedNodes.forEach((node) => {
-      if (node.nodeType === 1 && node.querySelectorAll) {
-        const fezElements = node.querySelectorAll('.fez, :scope.fez');
-        fezElements
-          .forEach(el => {
-            if (el.fez && el.root) {
+      // Helper to cleanup a single element
+      const cleanup = (el) => {
+        if (el.fez && !el.fez._destroyed) {
+          // Delay cleanup to check if node is reconnected (just moved, not removed)
+          queueMicrotask(() => {
+            // If still not connected and not destroyed, cleanup
+            if (!el.isConnected && el.fez && !el.fez._destroyed) {
               Fez.instances.delete(el.fez.UID)
               el.fez.fezOnDestroy()
             }
-          });
+          })
+        }
       }
-    });
+
+      // Check if removed node itself is a fez component
+      cleanup(node)
+
+      // Check all children for fez components
+      node.querySelectorAll?.('.fez')?.forEach(cleanup)
+    })
   }
-});
+})
 
-// start observing the whole document
 observer.observe(document.documentElement, {
   childList: true,
   subtree: true
-});
+})
+
+// =============================================================================
+// MODULE EXPORTS
+// =============================================================================
 
 export default Fez
-export { Fez }
+export { Fez, FezBase }

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

@@ -1,3 +1,6 @@
+# export let props // to get props object
+# export let fast  // to say we so not accept slots
+
 # get node attributes
 getAttributes = (node) ->
   attrs = {}
@@ -6,8 +9,11 @@ getAttributes = (node) ->
     if el.name.startsWith('on') && el.value[0] == '('
       el.value = new Function('arg1, arg2', "(#{el.value})(arg1, arg2)")
     if el.name.startsWith(':')
-      el.value = new Function("return (#{el.value})").bind(node)()
-      el.name = el.name.replace(':', '')
+      try
+        el.value = new Function("return (#{el.value})").bind(node)()
+        el.name = el.name.replace(':', '')
+      catch e
+        console.error "Error evaluating #{el.name}=\"#{el.value}\" for #{node.tagName}: #{e.message}"
     attrs[el.name] = el.value
 
   if attrs['data-props']
@@ -100,18 +106,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 = '') ->
@@ -120,3 +127,5 @@ Svelte.tag = (tag, opts = {}, html = '') ->
 
 Svelte.bind = Svelte.connect
 window.Svelte = Svelte
+
+export default Svelte