@dinoreic/fez 0.2.2 → 0.3.0

package/src/fez/root.js

@@ -117,7 +117,7 @@ Fez.globalCss = (cssClass, opts = {}) => {
 }
 
 Fez.info = () => {
-  console.log(JSON.stringify(Fez.fastBindInfo, null, 2))
+  console.log('Fez components:', Object.keys(Fez.classes || {}))
 }
 
 Fez.morphdom = (target, newNode, opts = {}) => {
@@ -136,24 +136,6 @@ Fez.morphdom = (target, newNode, opts = {}) => {
   }
 }
 
-Fez.htmlEscape = (text) => {
-  if (typeof text == 'string') {
-    text = text
-      // .replaceAll('&', "&")
-      .replace(/font-family\s*:\s*(?:&[^;]+;|[^;])*?;/gi, '')
-      .replaceAll("&", '&')
-      .replaceAll("'", ''')
-      .replaceAll('"', '"')
-      .replaceAll('<', '&lt;')
-      .replaceAll('>', '&gt;')
-      // .replaceAll('@', '&#64;') // needed for template escaping
-
-    return text
-  } else {
-    return text === undefined ? '' : text
-  }
-}
-
 Fez.publish = (channel, ...args) => {
   Fez._subs ||= {}
   Fez._subs[channel] ||= []
@@ -183,6 +165,19 @@ Fez.tag = (tag, opts = {}, html = '') => {
   // return data
 };
 
+// Resolve a function from a string or function reference
+Fez.getFunction = (pointer) => {
+  if (!pointer) {
+    return ()=>{}
+  }
+  else if (typeof pointer === 'function') {
+    return pointer;
+  }
+  else if (typeof pointer === 'string') {
+    return new Function(pointer);
+  }
+};
+
 Fez.error = (text, show) => {
   text = `Fez: ${text}`
   console.error(text)
@@ -211,125 +206,25 @@ Fez.untilTrue = (func, pingRate) => {
   }
 }
 
-// Script from URL
-//   Fez.head({ js: 'https://example.com/script.js' });
-// Script with attributes
-//   Fez.head({ js: 'https://example.com/script.js', type: 'module', async: true });
-// Script with callback
-//   Fez.head({ js: 'https://example.com/script.js' }, () => { console.log('loaded') });
-// Module loading with auto-import to window
-//   Fez.head({ js: 'https://example.com/module.js', module: 'MyModule' }); // imports and sets window.MyModule
-// CSS inclusion
-//   Fez.head({ css: 'https://example.com/styles.css' });
-// CSS with additional attributes and callback
-//   Fez.head({ css: 'https://example.com/styles.css', media: 'print' }, () => { console.log('CSS loaded') })
-// Inline script evaluation
-//   Fez.head({ script: 'console.log("Hello world")' })
-// Extract from nodes
-//   Fez.head(domNode)
-Fez.head = (config, callback) => {
-  if (config.nodeName) {
-    if (config.nodeName == 'SCRIPT') {
-      Fez.head({script: config.innerText})
-      config.remove()
-    } else {
-      config.querySelectorAll('script').forEach((n) => Fez.head(n) )
-      config.querySelectorAll('template[fez], xmp[fez], script[fez]').forEach((n) => Fez.compile(n) )
-    }
+// throttle function calls
+Fez.throttle = (func, delay = 200) => {
+  let lastRun = 0;
+  let timeout;
 
-    return
-  }
+  return function(...args) {
+    const now = Date.now();
 
-  if (typeof config !== 'object' || config === null) {
-    throw new Error('head requires an object parameter');
-  }
-
-  let src, attributes = {}, elementType;
-
-  if (config.script) {
-    if (config.script.includes('import ')) {
-      if (callback) {
-        Fez.error('Fez.head callback is not supported when script with import is passed (module context).')
-      }
-
-      // Evaluate inline script in context in the module
-      const script = document.createElement('script');
-      script.type = 'module';
-      script.textContent = config.script;
-      document.head.appendChild(script);
-      setTimeout(()=>script.remove(), 100)
+    if (now - lastRun >= delay) {
+      func.apply(this, args);
+      lastRun = now;
     } else {
-      try {
-        new Function(config.script)();
-        if (callback) callback();
-      } catch (error) {
-        Fez.error('Error executing script:', error);
-        console.log(config.script);
-      }
-    }
-    return;
-  } else if (config.js) {
-    src = config.js;
-    elementType = 'script';
-    // Copy all properties except 'js' as attributes
-    for (const [key, value] of Object.entries(config)) {
-      if (key !== 'js' && key !== 'module') {
-        attributes[key] = value;
-      }
-    }
-    // Handle module loading
-    if (config.module) {
-      attributes.type = 'module';
-    }
-  } else if (config.css) {
-    src = config.css;
-    elementType = 'link';
-    attributes.rel = 'stylesheet';
-    // Copy all properties except 'css' as attributes
-    for (const [key, value] of Object.entries(config)) {
-      if (key !== 'css') {
-        attributes[key] = value;
-      }
+      clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        func.apply(this, args);
+        lastRun = Date.now();
+      }, delay - (now - lastRun));
     }
-  } else {
-    throw new Error('head requires either "script", "js" or "css" property');
-  }
-
-  const existingNode = document.querySelector(`${elementType}[src="${src}"], ${elementType}[href="${src}"]`);
-  if (existingNode) {
-    if (callback) callback();
-    return existingNode;
-  }
-
-  const element = document.createElement(elementType);
-
-  if (elementType === 'link') {
-    element.href = src;
-  } else {
-    element.src = src;
-  }
-
-  for (const [key, value] of Object.entries(attributes)) {
-    element.setAttribute(key, value);
-  }
-
-  if (callback || config.module) {
-    element.onload = () => {
-      // If module name is provided, import it and assign to window
-      if (config.module && elementType === 'script') {
-        import(src).then(module => {
-          window[config.module] = module.default || module[config.module] || module;
-        }).catch(error => {
-          console.error(`Error importing module ${config.module}:`, error);
-        });
-      }
-      if (callback) callback();
-    };
-  }
-
-  document.head.appendChild(element);
-
-  return element;
+  };
 }
 
 // Fetch wrapper with automatic caching and data handling
@@ -475,24 +370,9 @@ Fez.store = {
   }
 };
 
-// create dom root and return it
-Fez.domRoot = (data, name = 'div') => {
-  if (data instanceof Node) {
-    return data
-  } else {
-    const root = document.createElement(name)
-    root.innerHTML = data
-    return root
-  }
-}
-
-// add class by name to node and remove it from siblings
-Fez.activateNode = (node, klass = 'active') => {
-  Array.from(node.parentElement.children).forEach(child => {
-    child.classList.remove(klass)
-  })
-  node.classList.add(klass)
-}
+// Load utility functions
+import addUtilities from './utility.js'
+addUtilities(Fez)
 
 Fez.compile = compile
 Fez.state = state

package/src/fez/utility.js

@@ -0,0 +1,184 @@
+// Utility functions that extend Fez
+export default (Fez) => {
+  // Script from URL
+  //   Fez.head({ js: 'https://example.com/script.js' });
+  // Script with attributes
+  //   Fez.head({ js: 'https://example.com/script.js', type: 'module', async: true });
+  // Script with callback
+  //   Fez.head({ js: 'https://example.com/script.js' }, () => { console.log('loaded') });
+  // Module loading with auto-import to window
+  //   Fez.head({ js: 'https://example.com/module.js', module: 'MyModule' }); // imports and sets window.MyModule
+  // CSS inclusion
+  //   Fez.head({ css: 'https://example.com/styles.css' });
+  // CSS with additional attributes and callback
+  //   Fez.head({ css: 'https://example.com/styles.css', media: 'print' }, () => { console.log('CSS loaded') })
+  // Inline script evaluation
+  //   Fez.head({ script: 'console.log("Hello world")' })
+  // Extract from nodes
+  //   Fez.head(domNode)
+  Fez.head = (config, callback) => {
+    if (config.nodeName) {
+      if (config.nodeName == 'SCRIPT') {
+        Fez.head({script: config.innerText})
+        config.remove()
+      } else {
+        config.querySelectorAll('script').forEach((n) => Fez.head(n) )
+        config.querySelectorAll('template[fez], xmp[fez], script[fez]').forEach((n) => Fez.compile(n) )
+      }
+
+      return
+    }
+
+    if (typeof config !== 'object' || config === null) {
+      throw new Error('head requires an object parameter');
+    }
+
+    let src, attributes = {}, elementType;
+
+    if (config.script) {
+      if (config.script.includes('import ')) {
+        if (callback) {
+          Fez.error('Fez.head callback is not supported when script with import is passed (module context).')
+        }
+
+        // Evaluate inline script in context in the module
+        const script = document.createElement('script');
+        script.type = 'module';
+        script.textContent = config.script;
+        document.head.appendChild(script);
+        setTimeout(()=>script.remove(), 100)
+      } else {
+        try {
+          new Function(config.script)();
+          if (callback) callback();
+        } catch (error) {
+          Fez.error('Error executing script:', error);
+          console.log(config.script);
+        }
+      }
+      return;
+    } else if (config.js) {
+      src = config.js;
+      elementType = 'script';
+      // Copy all properties except 'js' as attributes
+      for (const [key, value] of Object.entries(config)) {
+        if (key !== 'js' && key !== 'module') {
+          attributes[key] = value;
+        }
+      }
+      // Handle module loading
+      if (config.module) {
+        attributes.type = 'module';
+      }
+    } else if (config.css) {
+      src = config.css;
+      elementType = 'link';
+      attributes.rel = 'stylesheet';
+      // Copy all properties except 'css' as attributes
+      for (const [key, value] of Object.entries(config)) {
+        if (key !== 'css') {
+          attributes[key] = value;
+        }
+      }
+    } else {
+      throw new Error('head requires either "script", "js" or "css" property');
+    }
+
+    const existingNode = document.querySelector(`${elementType}[src="${src}"], ${elementType}[href="${src}"]`);
+    if (existingNode) {
+      if (callback) callback();
+      return existingNode;
+    }
+
+    const element = document.createElement(elementType);
+
+    if (elementType === 'link') {
+      element.href = src;
+    } else {
+      element.src = src;
+    }
+
+    for (const [key, value] of Object.entries(attributes)) {
+      element.setAttribute(key, value);
+    }
+
+    if (callback || config.module) {
+      element.onload = () => {
+        // If module name is provided, import it and assign to window
+        if (config.module && elementType === 'script') {
+          import(src).then(module => {
+            window[config.module] = module.default || module[config.module] || module;
+          }).catch(error => {
+            console.error(`Error importing module ${config.module}:`, error);
+          });
+        }
+        if (callback) callback();
+      };
+    }
+
+    document.head.appendChild(element);
+
+    return element;
+  }
+
+  Fez.darkenColor = (color, percent = 20) => {
+    // Convert hex to RGB
+    const num = parseInt(color.replace("#", ""), 16)
+    const amt = Math.round(2.55 * percent)
+    const R = (num >> 16) - amt
+    const G = (num >> 8 & 0x00FF) - amt
+    const B = (num & 0x0000FF) - amt
+    return "#" + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 + (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1)
+  }
+
+  Fez.lightenColor = (color, percent = 20) => {
+    // Convert hex to RGB
+    const num = parseInt(color.replace("#", ""), 16)
+    const amt = Math.round(2.55 * percent)
+    const R = (num >> 16) + amt
+    const G = (num >> 8 & 0x00FF) + amt
+    const B = (num & 0x0000FF) + amt
+    return "#" + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 + (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1)
+  }
+
+  Fez.htmlEscape = (text) => {
+    if (typeof text == 'string') {
+      text = text
+        // .replaceAll('&', "&amp;")
+        .replace(/font-family\s*:\s*(?:&[^;]+;|[^;])*?;/gi, '')
+        .replaceAll("&", '&amp;')
+        .replaceAll("'", '&apos;')
+        .replaceAll('"', '&quot;')
+        .replaceAll('<', '&lt;')
+        .replaceAll('>', '&gt;')
+        // .replaceAll('@', '&#64;') // needed for template escaping
+
+      return text
+    } else {
+      return text === undefined ? '' : text
+    }
+  }
+
+  // create dom root and return it
+  Fez.domRoot = (data, name = 'div') => {
+    if (data instanceof Node) {
+      return data
+    } else {
+      const root = document.createElement(name)
+      root.innerHTML = data
+      return root
+    }
+  }
+
+  // add class by name to node and remove it from siblings
+  Fez.activateNode = (node, klass = 'active') => {
+    Array.from(node.parentElement.children).forEach(child => {
+      child.classList.remove(klass)
+    })
+    node.classList.add(klass)
+  }
+
+  Fez.isTrue = (val) => {
+    return ['1', 'true', 'on'].includes(String(val).toLowerCase())
+  }
+}

package/src/fez.js

@@ -14,7 +14,7 @@ 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()
+      el.fez?.fezOnDestroy()
       Fez.instances.delete(key)
     }
   }
@@ -47,7 +47,7 @@ const observer = new MutationObserver((mutations) => {
           .forEach(el => {
             if (el.fez && el.root) {
               Fez.instances.delete(el.fez.UID)
-              el.fez.fezRemoveSelf()
+              el.fez.fezOnDestroy()
             }
           });
       }

package/src/rollup.js

@@ -1,25 +1,82 @@
-function fezPlugin() {
-  return {
-    name: 'fez-plugin',
+// import .fez files and import globing via fezImport(./foo/bar/*)
+// svelte is transformed to component import, all other files are copied
+//
+// rollup.config.js
+// import fezImport from '@dinoreic/fez/rollup';
+// plugins: [fezImport(), ...]
+
+import { glob } from 'glob';
+import path from 'path';
 
-    transform(code, filePath) {
-      const baseName = filePath.split('/').pop().split('.');
+// compile fez files
+const transformFez = (code, filePath) => {
+  const baseName = filePath.split('/').pop().split('.');
+
+  if (baseName[1] === 'fez') {
+    code = code.replace(/`/g, '\\`').replace(/\$/g, '\\$');
+    return `Fez.compile('${baseName[0]}', \`\n${code}\`)`;
+  }
+}
 
-      if (baseName[1] === 'fez') {
-        code = code.replace(/`/g, '\\`').replace(/\$/g, '\\$');
-        const transformedCode = `Fez.compile('${baseName[0]}', \`\n${code}\`)`;
+// glob import files
+const transformGlob = async (code, filePath) => {
+  // Only process .js files containing glob statements
+  if (!filePath.endsWith('.js')) {
+    return null;
+  }
 
-        // if (baseName[0] === 'admin-menu') {
-        //   console.log('Transformed code:', baseName, transformedCode);
-        // }
+  // Check for fezImport() function calls
+  const globImportMatch = code.match(/fezImport\(['"`]([^'"`]+)['"`]\)/);
+  if (globImportMatch) {
+    const globPattern = globImportMatch[1];
 
-        return {
-          code: transformedCode,
-          map: null,
-        };
+    // Resolve relative path from the file's directory
+    const fileDir = path.dirname(filePath);
+    const resolvedPattern = path.resolve(fileDir, globPattern);
+
+    const files = await glob(resolvedPattern, { absolute: true });
+    const imports = [];
+    const bindings = [];
+
+    console.log('fezGlob(', globPattern, '), files:', files.length);
+
+    for (const file of files.sort()) {
+      if (file.endsWith('.svelte')) {
+        // Transform Svelte files with bindings
+        const name = path.basename(file, '.svelte').replace(/-/g, '_');
+        imports.push(`import Svelte_${name} from '${file}';`);
+        bindings.push(`Svelte.connect('s-${name.replace(/_/g, '-')}', Svelte_${name});`);
+      } else {
+        // Regular import for all other files
+        const name = path.basename(file, path.extname(file)).replace(/-/g, '_');
+        imports.push(`import ${name} from '${file}';`);
       }
+    }
+
+    const replacement = [...imports, '', ...bindings].join('\n');
+    return code.replace(globImportMatch[0], replacement);
+  }
+
+  return null;
+}
+
+export default function fezImport() {
+  return {
+    name: 'fez-plugin',
+
+    async transform(code, filePath) {
+      for (const func of [transformFez, transformGlob]) {
+        const result = await func(code, filePath);
+        if (result) {
+          return {
+            code: result,
+            map: null,
+          };
+        }
+      }
+
+      return null;
     },
   };
 }
 
-export default fezPlugin;

package/dist/rollup.js

@@ -1,3 +0,0 @@
-(()=>{function t(){return{name:"fez-plugin",transform(e,r){let n=r.split("/").pop().split(".");if(n[1]==="fez")return e=e.replace(/`/g,"\\`").replace(/\$/g,"\\$"),{code:`Fez.compile('${n[0]}', \`
-${e}\`)`,map:null}}}}var l=t;})();
-//# sourceMappingURL=rollup.js.map

package/dist/rollup.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/rollup.js"],
-  "sourcesContent": ["function fezPlugin() {\n  return {\n    name: 'fez-plugin',\n\n    transform(code, filePath) {\n      const baseName = filePath.split('/').pop().split('.');\n\n      if (baseName[1] === 'fez') {\n        code = code.replace(/`/g, '\\\\`').replace(/\\$/g, '\\\\$');\n        const transformedCode = `Fez.compile('${baseName[0]}', \\`\\n${code}\\`)`;\n\n        // if (baseName[0] === 'admin-menu') {\n        //   console.log('Transformed code:', baseName, transformedCode);\n        // }\n\n        return {\n          code: transformedCode,\n          map: null,\n        };\n      }\n    },\n  };\n}\n\nexport default fezPlugin;\n"],
-  "mappings": "MAAA,SAASA,GAAY,CACnB,MAAO,CACL,KAAM,aAEN,UAAUC,EAAMC,EAAU,CACxB,IAAMC,EAAWD,EAAS,MAAM,GAAG,EAAE,IAAI,EAAE,MAAM,GAAG,EAEpD,GAAIC,EAAS,CAAC,IAAM,MAClB,OAAAF,EAAOA,EAAK,QAAQ,KAAM,KAAK,EAAE,QAAQ,MAAO,KAAK,EAO9C,CACL,KAPsB,gBAAgBE,EAAS,CAAC,CAAC;AAAA,EAAUF,CAAI,MAQ/D,IAAK,IACP,CAEJ,CACF,CACF,CAEA,IAAOG,EAAQJ",
-  "names": ["fezPlugin", "code", "filePath", "baseName", "rollup_default"]
-}