@dinoreic/fez 0.1.0

package/src/fez.js

@@ -0,0 +1,73 @@
+// base class for custom dom objects
+import FezBase from './fez/instance.js'
+if (typeof window !== 'undefined') window.FezBase = FezBase
+
+// base class for custom dom objects
+import Fez from './fez/root.js'
+if (typeof window !== 'undefined') window.Fez = Fez
+
+// 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?.fezRemoveSelf()
+      Fez.instances.delete(key)
+    }
+  }
+}, 5_000)
+
+// define Fez observer
+const observer = new MutationObserver((mutations) => {
+  for (const { addedNodes, removedNodes } of mutations) {
+    addedNodes.forEach((node) => {
+      if (node.nodeType !== 1) return; // only elements
+      // check the node itself
+      if (node.matches('template[fez], xmp[fez], script[fez]')) {
+        window.requestAnimationFrame(()=>{
+          Fez.compile(node);
+          node.remove();
+        })
+      }
+    });
+
+    removedNodes.forEach((node) => {
+      if (node.nodeType === 1 && node.querySelectorAll) {
+        // check both the node itself and its descendants
+        const fezElements = node.querySelectorAll('.fez, :scope.fez');
+        fezElements
+          .forEach(el => {
+            if (el.fez && el.root) {
+              Fez.instances.delete(el.fez.UID)
+              el.fez.fezRemoveSelf()
+            }
+          });
+      }
+    });
+  }
+});
+
+// start observing the whole document
+observer.observe(document.documentElement, {
+  childList: true,
+  subtree: true
+});
+
+// fez custom tags
+
+//<fez-component name="some-node" :props="fez.props"></fez-node>
+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)
+  }
+})
+
+export default Fez

package/src/rollup.js

@@ -0,0 +1,31 @@
+function fezPlugin() {
+  return {
+    name: 'fez-plugin',
+
+    transform(code, filePath) {
+      const baseName = filePath.split('/').pop().split('.');
+
+      if (baseName[1] === 'fez') {
+        code = code.replace(/`/g, '\\`').replace(/\$/g, '\\$');
+        const transformedCode = `Fez.compile('${baseName[0]}', \`\n${code}\`)`;
+
+        // if (baseName[0] === 'admin-menu') {
+        //   console.log('Transformed code:', baseName, transformedCode);
+        // }
+
+        return {
+          code: transformedCode,
+          map: null,
+        };
+      }
+    },
+  };
+}
+
+// Export for ES modules
+export default fezPlugin;
+
+// Export for CommonJS
+// if (typeof module !== 'undefined') {
+//   module.exports = fezPlugin;
+// }