@dinoreic/fez 0.2.0 → 0.3.0

package/dist/log.js

@@ -0,0 +1,5 @@
+(()=>{var u=o=>{let a=o.split(/(<\/?[^>]+>)/g).map(i=>i.trim()).filter(i=>i),n=0,t=[];for(let i=0;i<a.length;i++){let e=a[i],s=a[i+1],p=a[i+2];if(e.startsWith("<"))if(!e.startsWith("</")&&!e.endsWith("/>")&&s&&!s.startsWith("<")&&p&&p.startsWith("</")){let r=Math.max(0,n);t.push("  ".repeat(r)+e+s+p),i+=2}else if(e.startsWith("</")){n--;let r=Math.max(0,n);t.push("  ".repeat(r)+e)}else if(e.endsWith("/>")||e.includes(" />")){let r=Math.max(0,n);t.push("  ".repeat(r)+e)}else{let r=Math.max(0,n);t.push("  ".repeat(r)+e),n++}else if(e){let r=Math.max(0,n);t.push("  ".repeat(r)+e)}}return t.join(`
+`)},c=(()=>{let o=[],a=[],n=0;return t=>{if(!document.body){window.requestAnimationFrame(()=>c(t));return}t instanceof Node&&(t=u(t.outerHTML));let i=typeof t;t===void 0&&(t="undefined"),t===null&&(t="null"),Array.isArray(t)?i="array":typeof t=="object"&&t!==null&&(i="object"),typeof t!="string"&&(t=JSON.stringify(t,(r,l)=>typeof l=="function"?String(l):l,2).replaceAll("<","&lt;")),t=t.trim(),o.push(t+`
+
+type: ${i}`),a.push(i);let e=document.getElementById("dump-dialog");e||(e=document.body.appendChild(document.createElement("div")),e.id="dump-dialog",e.style.cssText="position:fixed;top:30px;left:30px;right:50px;bottom:50px;background:#fff;border:1px solid#333;box-shadow:0 0 10px rgba(0,0,0,0.5);padding:20px;overflow:auto;z-index:9999;font:13px/1.4 monospace;white-space:pre");let s=parseInt(localStorage.getItem("_LOG_INDEX"));!isNaN(s)&&s>=0&&s<o.length?n=s:n=o.length-1;let p=()=>{let r=o.map((l,d)=>{let f="#f0f0f0";return d!==n&&(a[d]==="object"?f="#d6e3ef":a[d]==="array"&&(f="#d8d5ef")),`<button style="padding:4px 8px;margin:0;cursor:pointer;background:${d===n?"#333":f};color:${d===n?"#fff":"#000"}" data-index="${d}">${d+1}</button>`}).join("");e.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">'+r+'</div><button style="padding:4px 8px;cursor:pointer;flex-shrink:0">&times;</button></div><xmp style="flex:1;overflow:auto;margin:0;padding:0;color:#000;background:#fff;font-size:14px;line-height:22px">'+o[n]+"</xmp></div>",e.querySelector('button[style*="flex-shrink:0"]').onclick=()=>e.remove(),e.querySelectorAll("button[data-index]").forEach(l=>{l.onclick=()=>{n=parseInt(l.dataset.index),localStorage.setItem("_LOG_INDEX",n),p()}})};p()}})();typeof window<"u"&&(window.LOG=c,window.LOG_PP=u);var x=c;})();
+//# sourceMappingURL=log.js.map

package/dist/log.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/log.js"],
+  "sourcesContent": ["// pretty print HTML\nconst LOG_PP = (html) => {\n  const parts = html\n    .split(/(<\\/?[^>]+>)/g)\n    .map(p => p.trim())\n    .filter(p => p);\n\n  let indent = 0;\n  const lines = [];\n\n  for (let i = 0; i < parts.length; i++) {\n    const part = parts[i];\n    const nextPart = parts[i + 1];\n    const nextNextPart = parts[i + 2];\n\n    // Check if it's a tag\n    if (part.startsWith('<')) {\n      // Check if this is an opening tag followed by text and then its closing tag\n      if (!part.startsWith('</') && !part.endsWith('/>') && nextPart && !nextPart.startsWith('<') && nextNextPart && nextNextPart.startsWith('</')) {\n        // Combine them on one line\n        const actualIndent = Math.max(0, indent);\n        lines.push('  '.repeat(actualIndent) + part + nextPart + nextNextPart);\n        i += 2; // Skip the next two parts\n      }\n      // Closing tag\n      else if (part.startsWith('</')) {\n        indent--;\n        const actualIndent = Math.max(0, indent);\n        lines.push('  '.repeat(actualIndent) + part);\n      }\n      // Self-closing tag\n      else if (part.endsWith('/>') || part.includes(' />')) {\n        const actualIndent = Math.max(0, indent);\n        lines.push('  '.repeat(actualIndent) + part);\n      }\n      // Opening tag\n      else {\n        const actualIndent = Math.max(0, indent);\n        lines.push('  '.repeat(actualIndent) + part);\n        indent++;\n      }\n    }\n    // Text node\n    else if (part) {\n      const actualIndent = Math.max(0, indent);\n      lines.push('  '.repeat(actualIndent) + part);\n    }\n  }\n\n  return lines.join('\\n');\n}\n\nconst LOG = (() => {\n  const logs = [];\n  const logTypes = []; // Track the original type of each log\n  let currentIndex = 0;\n\n  return o => {\n    if (!document.body) {\n      window.requestAnimationFrame( () => LOG(o) )\n      return\n    }\n\n    if (o instanceof Node) {\n      o = LOG_PP(o.outerHTML)\n    }\n\n    // Store the original type\n    let originalType = typeof o;\n\n    if (o === undefined) { o = 'undefined' }\n    if (o === null) { o = 'null' }\n\n    if (Array.isArray(o)) {\n      originalType = 'array';\n    } else if (typeof o === 'object' && o !== null) {\n      originalType = 'object';\n    }\n\n    if (typeof o != 'string') {\n      o = JSON.stringify(o, (key, value) => {\n        if (typeof value === 'function') {\n          return String(value);\n        }\n        return value;\n      }, 2).replaceAll('<', '&lt;')\n    }\n\n    o = o.trim()\n\n    logs.push(o + `\\n\\ntype: ${originalType}`);\n    logTypes.push(originalType);\n\n    let d = document.getElementById('dump-dialog');\n    if (!d) {\n      d = document.body.appendChild(document.createElement('div'));\n      d.id = 'dump-dialog';\n      d.style.cssText =\n        'position:fixed;top:30px;left:30px;right:50px;bottom:50px;' +\n        'background:#fff;border:1px solid#333;box-shadow:0 0 10px rgba(0,0,0,0.5);' +\n        'padding:20px;overflow:auto;z-index:9999;font:13px/1.4 monospace;white-space:pre';\n    }\n\n    // Check if we have a saved index and it's still valid\n    const savedIndex = parseInt(localStorage.getItem('_LOG_INDEX'));\n    if (!isNaN(savedIndex) && savedIndex >= 0 && savedIndex < logs.length) {\n      currentIndex = savedIndex;\n    } else {\n      currentIndex = logs.length - 1;\n    }\n\n    const renderContent = () => {\n      const buttons = logs.map((_, i) => {\n        let bgColor = '#f0f0f0'; // default\n        if (i !== currentIndex) {\n          if (logTypes[i] === 'object') {\n            bgColor = '#d6e3ef'; // super light blue\n          } else if (logTypes[i] === 'array') {\n            bgColor = '#d8d5ef'; // super light indigo\n          }\n        }\n        return `<button style=\"padding:4px 8px;margin:0;cursor:pointer;background:${i === currentIndex ? '#333' : bgColor};color:${i === currentIndex ? '#fff' : '#000'}\" data-index=\"${i}\">${i + 1}</button>`\n      }).join('');\n\n      d.innerHTML =\n        '<div style=\"display:flex;flex-direction:column;height:100%\">' +\n        '<div style=\"display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px\">' +\n        '<div style=\"display:flex;flex-wrap:wrap;gap:4px;flex:1;margin-right:10px\">' + buttons + '</div>' +\n        '<button style=\"padding:4px 8px;cursor:pointer;flex-shrink:0\">&times;</button>' +\n        '</div>' +\n        '<xmp style=\"flex:1;overflow:auto;margin:0;padding:0;color:#000;background:#fff;font-size:14px;line-height:22px\">' + logs[currentIndex] + '</xmp>' +\n        '</div>';\n\n      d.querySelector('button[style*=\"flex-shrink:0\"]').onclick = () => d.remove();\n\n      d.querySelectorAll('button[data-index]').forEach(btn => {\n        btn.onclick = () => {\n          currentIndex = parseInt(btn.dataset.index);\n          localStorage.setItem('_LOG_INDEX', currentIndex);\n          renderContent();\n        };\n      });\n    };\n\n    renderContent();\n  };\n})();\n\nif (typeof window !== 'undefined') {\n  window.LOG = LOG\n  window.LOG_PP = LOG_PP\n}\n\nexport default LOG\n"],
+  "mappings": "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",
+  "names": ["LOG_PP", "html", "parts", "p", "indent", "lines", "part", "nextPart", "nextNextPart", "actualIndent", "LOG", "logs", "logTypes", "currentIndex", "o", "originalType", "key", "value", "d", "savedIndex", "renderContent", "buttons", "_", "i", "bgColor", "btn", "log_default"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dinoreic/fez",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Runtime custom dom elements",
   "main": "dist/fez.js",
   "type": "module",
@@ -13,10 +13,14 @@
       "import": "./src/rollup.js",
       "require": "./src/rollup.js"
     },
+    "./log": {
+      "import": "./src/log.js",
+      "require": "./src/log.js"
+    },
     "./package.json": "./package.json"
   },
   "bin": {
-    "fez": "./bin/fez"
+    "fez": "bin/fez"
   },
   "files": [
     "bin",
@@ -25,17 +29,6 @@
     "README.md",
     "LICENSE"
   ],
-  "scripts": {
-    "build": "bun build.js b",
-    "b": "bun build.js b",
-    "watch": "bun build.js w",
-    "server": "bun run lib/server.js",
-    "dev": "bunx concurrently --kill-others \"bun run server\" \"find src demo lib | entr -c sh -c 'bun run index && bun run b'\"",
-    "test": "bun test",
-    "prepublishOnly": "bun run build && bun run test",
-    "publish": "npm publish --access public",
-    "index": "ruby ./bin/fez-index 'demo/fez/*.fez' > demo/fez/index.json"
-  },
   "keywords": [
     "dom",
     "elements",
@@ -62,5 +55,16 @@
     "happy-dom": "^18.0.1",
     "jsdom": "^26.1.0",
     "mime": "^4.0.7"
+  },
+  "scripts": {
+    "build": "bun build.js b",
+    "b": "bun run build",
+    "watch": "bun build.js w",
+    "server": "bun run lib/server.js",
+    "dev": "bunx concurrently --kill-others \"bun run server\" \"find src demo lib | entr -cn sh -c 'bun run index && bun run b'\"",
+    "test": "bun test",
+    "prepublishOnly": "bun run build && bun run test",
+    "publish": "npm publish --access public",
+    "index": "ruby ./bin/fez-index 'demo/fez/*.fez' > demo/fez/index.json"
   }
 }

package/src/fez/compile.js

@@ -36,8 +36,7 @@ const compileToClass = (html) => {
   }
 
   if (result.head) {
-    const container = document.createElement('div')
-    container.innerHTML = result.head
+    const container = Fez.domRoot(result.head)
 
     // Process all children of the container
     Array.from(container.children).forEach(node => {
@@ -89,66 +88,86 @@ const compileToClass = (html) => {
   return klass
 }
 
-// <template fez="ui-form">
-//   <script>
-//     ...
-// Fez.compile()                                  # compile all
-// Fez.compile(templateNode)                      # compile template node
-// Fez.compile('ui-form', templateNode.innerHTML) # compile string
-export default function (tagName, html) {
-  if (tagName instanceof Node) {
-    const node = tagName
+// Handle single argument cases - compile all, compile node, or compile from URL
+function compile_bulk(data) {
+  if (data instanceof Node) {
+    const node = data
     node.remove()
 
     const fezName = node.getAttribute('fez')
 
     // Check if fezName contains dot or slash (indicates URL)
     if (fezName && (fezName.includes('.') || fezName.includes('/'))) {
-      const url = fezName
-
-      Fez.log(`Loading from ${url}`)
-
-      // Load HTML content via AJAX from URL
-      Fez.fetch(url)
-        .then(htmlContent => {
-          // Check if remote HTML has template/xmp tags with fez attribute
-          const parser = new DOMParser()
-          const doc = parser.parseFromString(htmlContent, 'text/html')
-          const fezElements = doc.querySelectorAll('template[fez], xmp[fez]')
-
-          if (fezElements.length > 0) {
-            // Compile each found fez element
-            fezElements.forEach(el => {
-              const name = el.getAttribute('fez')
-              if (name && !name.includes('-') && !name.includes('.') && !name.includes('/')) {
-                console.error(`Fez: Invalid custom element name "${name}". Custom element names must contain a dash (e.g., 'my-element', 'ui-button').`)
-              }
-              const content = el.innerHTML
-              Fez.compile(name, content)
-            })
-          } else {
-            // No fez elements found, use extracted name from URL
-            const name = url.split('/').pop().split('.')[0]
-            Fez.compile(name, htmlContent)
-          }
-        })
-        .catch(error => {
-          console.error(`FEZ template load error for "${fezName}": ${error.message}`)
-        })
+      compile_from_url(fezName)
       return
     } else {
       // Validate fezName format for non-URL names
       if (fezName && !fezName.includes('-')) {
         console.error(`Fez: Invalid custom element name "${fezName}". Custom element names must contain a dash (e.g., 'my-element', 'ui-button').`)
       }
-      html = node.innerHTML
-      tagName = fezName
+      // Compile the node directly
+      return compile(fezName, node.innerHTML)
     }
   }
-  else if (typeof html != 'string') {
-    document.body.querySelectorAll('template[fez], xmp[fez]').forEach((n) => Fez.compile(n))
+  else {
+    let root = data ? Fez.domRoot(data) : document.body
+
+    root.querySelectorAll('template[fez], xmp[fez]').forEach((n) => {
+      compile_bulk(n)
+    })
+
     return
   }
+}
+
+function compile_from_url(url) {
+  Fez.log(`Loading from ${url}`)
+
+  // Load HTML content via AJAX from URL
+  Fez.fetch(url)
+    .then(htmlContent => {
+      // Check if remote HTML has template/xmp tags with fez attribute
+      const parser = new DOMParser()
+      const doc = parser.parseFromString(htmlContent, 'text/html')
+      const fezElements = doc.querySelectorAll('template[fez], xmp[fez]')
+
+      if (fezElements.length > 0) {
+        // Compile each found fez element
+        fezElements.forEach(el => {
+          const name = el.getAttribute('fez')
+          if (name && !name.includes('-') && !name.includes('.') && !name.includes('/')) {
+            console.error(`Fez: Invalid custom element name "${name}". Custom element names must contain a dash (e.g., 'my-element', 'ui-button').`)
+          }
+          const content = el.innerHTML
+          compile(name, content)
+        })
+      } else {
+        // No fez elements found, use extracted name from URL
+        const name = url.split('/').pop().split('.')[0]
+        compile(name, htmlContent)
+      }
+    })
+    .catch(error => {
+      console.error(`FEZ template load error for "${url}": ${error.message}`)
+    })
+}
+
+// <template fez="ui-form">
+//   <script>
+//     ...
+// Fez.compile()                                  # compile all
+// Fez.compile(templateNode)                      # compile template node or string with template or xmp tags
+// Fez.compile('ui-form', templateNode.innerHTML) # compile string
+function compile(tagName, html) {
+  // Handle single argument cases
+  if (arguments.length === 1) {
+    return compile_bulk(tagName)
+  }
+
+  // If html contains </xmp>, send to compile_bulk for processing
+  if (html && html.includes('</xmp>')) {
+    return compile_bulk(html)
+  }
 
   // Validate element name if it's not a URL
   if (tagName && !tagName.includes('-') && !tagName.includes('.') && !tagName.includes('/')) {
@@ -168,7 +187,8 @@ export default function (tagName, html) {
       styleContainer.id = 'fez-hidden-styles'
       document.head.appendChild(styleContainer)
     }
-    styleContainer.textContent += `${tagName} { display: none; }\n`
+    const allTags = [...Object.keys(Fez.classes), tagName].sort().join(', ')
+    styleContainer.textContent = `${allTags} { display: none; }\n`
   }
 
   // we cant try/catch javascript modules (they use imports)
@@ -190,3 +210,6 @@ export default function (tagName, html) {
     }
   }
 }
+
+export { compile_from_url }
+export default compile

package/src/fez/connect.js

@@ -1,94 +1,122 @@
-// templating
 import createTemplate from './lib/template.js'
 import FezBase from './instance.js'
 
-// this function accepts custom tag name and class definition, creates and connects
-// Fez(name, klass)
-export default function(name, klass) {
+/**
+ * Registers a new custom element with Fez framework
+ * @param {string} name - Custom element name (must contain a dash)
+ * @param {Class|Object} klass - Component class or configuration object
+ * @example
+ * Fez('my-component', class {
+ *   HTML = '<div>Hello World</div>'
+ *   CSS = '.my-component { color: blue; }'
+ * })
+ */
+export default function connect(name, klass) {
   const Fez = globalThis.window?.Fez || globalThis.Fez;
   // Validate custom element name format (must contain a dash)
   if (!name.includes('-')) {
     console.error(`Fez: Invalid custom element name "${name}". Custom element names must contain a dash (e.g., 'my-element', 'ui-button').`)
   }
 
-  // to allow anonymous class and then re-attach (does not work)
-  // Fez('ui-todo', class { ... # instead Fez('ui-todo', class extends FezBase {
+  // Transform simple class definitions into Fez components
   if (!klass.fezHtmlRoot) {
     const klassObj = new klass()
     const newKlass = class extends FezBase {}
 
+    // Copy all properties and methods from the original class
     const props = Object.getOwnPropertyNames(klassObj)
       .concat(Object.getOwnPropertyNames(klass.prototype))
       .filter(el => !['constructor', 'prototype'].includes(el))
 
     props.forEach(prop => newKlass.prototype[prop] = klassObj[prop])
 
-    Fez.fastBindInfo ||= {fast: [], slow: []}
-
-    if (klassObj.GLOBAL) { newKlass.fezGlobal = klassObj.GLOBAL }
-    if (klassObj.CSS) { newKlass.css = klassObj.CSS }
-    if (klassObj.HTML) { newKlass.html = klassObj.HTML }
-    if (klassObj.NAME) { newKlass.nodeName = klassObj.NAME }
-    if (klassObj.FAST) {
-      newKlass.fastBind = klassObj.FAST
-      Fez.fastBindInfo.fast.push(typeof klassObj.FAST == 'function' ? `${name} (func)` : name)
-    } else {
-      Fez.fastBindInfo.slow.push(name)
+    // Map component configuration properties
+    if (klassObj.GLOBAL) { newKlass.fezGlobal = klassObj.GLOBAL }  // Global instance reference
+    if (klassObj.CSS) { newKlass.css = klassObj.CSS }              // Component styles
+    if (klassObj.HTML) {
+      newKlass.html = closeCustomTags(klassObj.HTML)               // Component template
     }
+    if (klassObj.NAME) { newKlass.nodeName = klassObj.NAME }       // Custom DOM node name
 
+    // Auto-mount global components to body
     if (klassObj.GLOBAL) {
-      const func = () => document.body.appendChild(document.createElement(name))
+      const mountGlobalComponent = () => document.body.appendChild(document.createElement(name))
 
       if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', func);
+        document.addEventListener('DOMContentLoaded', mountGlobalComponent);
       } else {
-        func()
+        mountGlobalComponent()
       }
     }
 
     klass = newKlass
 
-    let info = `${name} compiled`
-    if (klassObj.FAST) info += ' (fast bind)'
-    Fez.log(info)
+    Fez.log(`${name} compiled`)
+  } else if (klass.html) {
+    // If klass already has html property, process it
+    klass.html = closeCustomTags(klass.html)
   }
 
+  // Process component template
   if (klass.html) {
-    klass.html = closeCustomTags(klass.html)
-
-    // wrap slot to enable reactive re-renders. It will use existing .fez-slot if found
+    // Replace <slot /> with reactive slot containers
     klass.html = klass.html.replace(/<slot\s*\/>|<slot\s*>\s*<\/slot>/g, () => {
-      const name = klass.slotNodeName || 'div'
-      return `<${name} class="fez-slot"></${name}>`
+      const slotTag = klass.SLOT || 'div'
+      return `<${slotTag} class="fez-slot" fez-keep="default-slot"></${slotTag}>`
     })
 
+    // Compile template function
     klass.fezHtmlFunc = createTemplate(klass.html)
   }
 
-  // we have to register global css on component init, because some other component can depend on it (it is global)
+  // Register component styles globally (available to all components)
   if (klass.css) {
     klass.css = Fez.globalCss(klass.css, {name: name})
   }
 
   Fez.classes[name] = klass
 
+  connectCustomElement(name, klass)
+}
+
+/**
+ * Registers the custom element with the browser
+ * Sets up batched rendering for optimal performance
+ */
+function connectCustomElement(name, klass) {
+  const Fez = globalThis.window?.Fez || globalThis.Fez;
+
   if (!customElements.get(name)) {
     customElements.define(name, class extends HTMLElement {
       connectedCallback() {
-        // if you want to force fast render (prevent page flickering), add static fastBind = true or FAST = true
-        // we can not fast load auto for all because that creates hard to debug problems in nested custom nodes
-        // problems with events and slots (I woke up at 2AM, now it is 5AM)
-        // this is usually safe for first order components, as page header or any components that do not have innerHTML or use slots
-        // Example: you can add FAST as a function - render fast nodes that have name attribute
-        //   FAST(node) { return !!node.getAttribute('name') }
-        // to inspect fast / slow components use Fez.info() in console
-        if (useFastRender(this, klass)) {
-          connectNode(name, this)
-        } else {
-          window.requestAnimationFrame(()=>{
-            if (this.parentNode) {
-              connectNode(name, this)
-            }
+        // Batch all renders using microtasks for consistent timing and DOM completeness
+        if (!Fez._pendingConnections) {
+          Fez._pendingConnections = []
+          Fez._batchScheduled = false
+        }
+
+        Fez._pendingConnections.push({ name, node: this })
+
+        if (!Fez._batchScheduled) {
+          Fez._batchScheduled = true
+          Promise.resolve().then(() => {
+            const connections = Fez._pendingConnections.slice()
+            // console.error(`Batch processing ${connections.length} components:`, connections.map(c => c.name))
+            Fez._pendingConnections = []
+            Fez._batchScheduled = false
+
+            // Sort by DOM order to ensure parent nodes are processed before children
+            connections.sort((a, b) => {
+              if (a.node.contains(b.node)) return -1
+              if (b.node.contains(a.node)) return 1
+              return 0
+            })
+
+            connections.forEach(({ name, node }) => {
+              if (node.isConnected && node.parentNode) {
+                connectNode(name, node)
+              }
+            })
           })
         }
       }
@@ -96,8 +124,10 @@ export default function(name, klass) {
   }
 }
 
-//
-
+/**
+ * Converts self-closing custom tags to full open/close format
+ * Required for proper HTML parsing of custom elements
+ */
 function closeCustomTags(html) {
   const selfClosingTags = new Set([
     'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'source', 'track', 'wbr'
@@ -108,17 +138,11 @@ function closeCustomTags(html) {
   })
 }
 
-function useFastRender(n, klass) {
-  const fezFast = n.getAttribute('fez-fast')
-  var isFast = typeof klass.fastBind === 'function' ? klass.fastBind(n) : klass.fastBind
-
-  if (fezFast == 'false') {
-    return false
-  } else {
-    return fezFast || isFast
-  }
-}
 
+/**
+ * Initializes a Fez component instance from a DOM node
+ * Replaces the custom element with the component's rendered content
+ */
 function connectNode(name, node) {
   const klass = Fez.classes[name]
   const parentNode = node.parentNode
@@ -143,7 +167,7 @@ function connectNode(name, node) {
     fez.props = klass.getProps(node, newNode)
     fez.class = klass
 
-    // move child nodes, natively to preserve bound events
+    // Move child nodes to preserve DOM event listeners
     fez.slot(node, newNode)
 
     newNode.fez = fez
@@ -160,9 +184,18 @@ function connectNode(name, node) {
       newNode.setAttribute('id', fez.props.id)
     }
 
-    fez.fezRegister();
-    ;(fez.init || fez.created || fez.connect).bind(fez)(fez.props);
+    // Component lifecycle initialization
+    fez.fezRegister()
+
+    // Call initialization method (init, created, or connect)
+    ;(fez.init || fez.created || fez.connect).bind(fez)(fez.props)
+
+    // Initial render
     fez.render()
+    fez.firstRender = true
+
+    // Trigger mount lifecycle hook
+    fez.onMount(fez.props)
 
     if (fez.onSubmit) {
       const form = fez.root.nodeName == 'FORM' ? fez.root : fez.find('form')
@@ -172,11 +205,11 @@ function connectNode(name, node) {
       }
     }
 
-    fez.onMount(fez.props)
-
-    // if onPropsChange method defined, add observer and trigger call on all attributes once component is loaded
+    // Set up reactive attribute watching
     if (fez.onPropsChange) {
       observer.observe(newNode, {attributes:true})
+
+      // Trigger initial prop change callbacks
       for (const [key, value] of Object.entries(fez.props)) {
         fez.onPropsChange(key, value)
       }
@@ -184,8 +217,10 @@ function connectNode(name, node) {
   }
 }
 
-//
-
+/**
+ * Global mutation observer for reactive attribute changes
+ * Watches for attribute changes and triggers component updates
+ */
 const observer = new MutationObserver((mutationsList, _) => {
   for (const mutation of mutationsList) {
     if (mutation.type === 'attributes') {

package/src/fez/defaults.js

@@ -0,0 +1,64 @@
+// Wrap defaults in a function to avoid immediate execution
+const loadDefaults = () => {
+  // include fez component by name
+  //<fez-component name="some-node" :props="fez.props"></fez-component>
+  Fez('fez-component', class {
+    init(props) {
+      const tag = document.createElement(props.name)
+      tag.props = props.props || props['data-props'] || props
+
+      while (this.root.firstChild) {
+        this.root.parentNode.insertBefore(this.root.lastChild, tag.nextSibling);
+      }
+
+      this.root.innerHTML = ''
+      this.root.appendChild(tag)
+    }
+  })
+
+  // include remote data from url
+  // <fez-include src="./demo/fez/ui-slider.html"></fez-include>
+  Fez('fez-include', class {
+    init(props) {
+      Fez.fetch(props.src, (data)=>{
+        const dom = Fez.domRoot(data)
+        Fez.head(dom) // include scripts and load fez components
+        this.root.innerHTML = dom.innerHTML
+      })
+    }
+  })
+
+  // include remote data from url
+  // <fez-inline :state="{count: 0}">
+  //   <button onclick="fez.state.count += 1">&plus;</button>
+  //   {{ state.count }} * {{ state.count }} = {{ state.count * state.count }}
+  // </fez-inline>
+  Fez('fez-inline', class {
+    init(props) {
+      const html = this.root.innerHTML
+
+      if (this.root.innerHTML.includes('<')) {
+        const hash = Fez.fnv1(this.root.outerHTML)
+        const nodeName = `inline-${hash}`
+        Fez(nodeName, class {
+          HTML = html
+          init() {
+            Object.assign(this.state, props.state || {})
+          }
+        })
+
+        const el = document.createElement(nodeName)
+        this.root.after(this.root.lastChild, el);
+        this.root.remove()
+      }
+    }
+  })
+}
+
+// Only load defaults if Fez is available
+if (typeof Fez !== 'undefined' && Fez) {
+  loadDefaults()
+}
+
+// Export for use in tests
+export { loadDefaults }