@dinoreic/fez 0.3.0 → 0.4.0

package/src/fez/utility.js

@@ -46,7 +46,7 @@ export default (Fez) => {
         script.type = 'module';
         script.textContent = config.script;
         document.head.appendChild(script);
-        setTimeout(()=>script.remove(), 100)
+        requestAnimationFrame(()=>script.remove())
       } else {
         try {
           new Function(config.script)();
@@ -121,6 +121,110 @@ export default (Fez) => {
     return element;
   }
 
+  // Fetch wrapper with automatic caching and data handling
+  // Usage:
+  //   Fez.fetch(url) - GET request (default)
+  //   Fez.fetch(url, callback) - GET with callback
+  //   Fez.fetch(url, data) - GET with query params (?foo=bar&baz=qux)
+  //   Fez.fetch(url, data, callback) - GET with query params and callback
+  //   Fez.fetch('POST', url, data) - POST with FormData body (multipart/form-data)
+  //   Fez.fetch('POST', url, data, callback) - POST with FormData and callback
+  // Data object is automatically converted:
+  //   - GET: appended as URL query parameters
+  //   - POST: sent as FormData (multipart/form-data) without custom headers
+  Fez.fetch = function(...args) {
+    // Initialize cache if not exists
+    Fez._fetchCache ||= {};
+
+    let method = 'GET';
+    let url;
+    let callback;
+
+    // Check if first arg is HTTP method (uppercase letters)
+    if (typeof args[0] === 'string' && /^[A-Z]+$/.test(args[0])) {
+      method = args.shift();
+    }
+
+    // URL is required
+    url = args.shift();
+
+    // Check for data/options object
+    let opts = {};
+    let data = null;
+    if (typeof args[0] === 'object') {
+      data = args.shift();
+    }
+
+    // Check for callback function
+    if (typeof args[0] === 'function') {
+      callback = args.shift();
+    }
+
+    // Handle data based on method
+    if (data) {
+      if (method === 'GET') {
+        // For GET, append data as query parameters
+        const params = new URLSearchParams(data);
+        url += (url.includes('?') ? '&' : '?') + params.toString();
+      } else if (method === 'POST') {
+        // For POST, convert to FormData
+        const formData = new FormData();
+        for (const [key, value] of Object.entries(data)) {
+          formData.append(key, value);
+        }
+        opts.body = formData;
+      }
+    }
+
+    // Set method
+    opts.method = method;
+
+    // Create cache key from method, url, and stringified opts
+    const cacheKey = `${method}:${url}:${JSON.stringify(opts)}`;
+
+    // Check cache first
+    if (Fez._fetchCache[cacheKey]) {
+      const cachedData = Fez._fetchCache[cacheKey];
+      Fez.log(`fetch cache hit: ${method} ${url}`);
+      if (callback) {
+        callback(cachedData);
+        return;
+      }
+      return Promise.resolve(cachedData);
+    }
+
+    // Log live fetch
+    Fez.log(`fetch live: ${method} ${url}`);
+
+    // Helper to process and cache response
+    const processResponse = (response) => {
+      if (response.headers.get('content-type')?.includes('application/json')) {
+        return response.json();
+      }
+      return response.text();
+    };
+
+    // If callback provided, execute and handle
+    if (callback) {
+      fetch(url, opts)
+        .then(processResponse)
+        .then(data => {
+          Fez._fetchCache[cacheKey] = data;
+          callback(data);
+        })
+        .catch(error => Fez.onError('fetch', error));
+      return;
+    }
+
+    // Return promise with automatic JSON parsing
+    return fetch(url, opts)
+      .then(processResponse)
+      .then(data => {
+        Fez._fetchCache[cacheKey] = data;
+        return data;
+      });
+  }
+
   Fez.darkenColor = (color, percent = 20) => {
     // Convert hex to RGB
     const num = parseInt(color.replace("#", ""), 16)
@@ -181,4 +285,109 @@ export default (Fez) => {
   Fez.isTrue = (val) => {
     return ['1', 'true', 'on'].includes(String(val).toLowerCase())
   }
+
+  // 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') {
+      // Check if it's a function expression (arrow function or function keyword)
+      // Arrow function: (args) => or args =>
+      const arrowFuncPattern = /^\s*\(?\s*\w+(\s*,\s*\w+)*\s*\)?\s*=>/;
+      const functionPattern = /^\s*function\s*\(/;
+
+      if (arrowFuncPattern.test(pointer) || functionPattern.test(pointer)) {
+        return new Function('return ' + pointer)();
+      } else if (pointer.includes('.') && !pointer.includes('(')) {
+        // It's a property access like "this.focus" - return a function that calls it
+        return new Function(`return function() { return ${pointer}(); }`);
+      } else {
+        // It's a function body
+        return new Function(pointer);
+      }
+    }
+  }
+
+  // Execute a function when DOM is ready or immediately if already loaded
+  Fez.onReady = (callback) => {
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', ()=>{
+        callback()
+      }, { once: true })
+    } else {
+      callback()
+    }
+  }
+
+  // get unique id from string
+  Fez.fnv1 = (str) => {
+    var FNV_OFFSET_BASIS, FNV_PRIME, hash, i, j, ref;
+    FNV_OFFSET_BASIS = 2166136261;
+    FNV_PRIME = 16777619;
+    hash = FNV_OFFSET_BASIS;
+    for (i = j = 0, ref = str.length - 1; (0 <= ref ? j <= ref : j >= ref); i = 0 <= ref ? ++j : --j) {
+      hash ^= str.charCodeAt(i);
+      hash *= FNV_PRIME;
+    }
+    return hash.toString(36).replaceAll('-', '');
+  }
+
+  Fez.tag = (tag, opts = {}, html = '') => {
+    const json = encodeURIComponent(JSON.stringify(opts))
+    return `<${tag} data-props="${json}">${html}</${tag}>`
+    // const json = JSON.stringify(opts, null, 2)
+    // const data = `<script type="text/template">${json}</script><${tag} data-json-template="true">${html}</${tag}>`
+    // return data
+  }
+
+  // execute function until it returns true
+  Fez.untilTrue = (func, pingRate) => {
+    pingRate ||= 200
+
+    if (!func()) {
+      setTimeout(()=>{
+        Fez.untilTrue(func, pingRate)
+      } ,pingRate)
+    }
+  }
+
+  // throttle function calls
+  Fez.throttle = (func, delay = 200) => {
+    let lastRun = 0;
+    let timeout;
+
+    return function(...args) {
+      const now = Date.now();
+
+      if (now - lastRun >= delay) {
+        func.apply(this, args);
+        lastRun = now;
+      } else {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => {
+          func.apply(this, args);
+          lastRun = Date.now();
+        }, delay - (now - lastRun));
+      }
+    };
+  }
+
+  // const firstTimeHash = new Map()
+  // Fez.firstTime = (key, func) => {
+  //   if ( !firstTimeHash.get(key) ) {
+  //     firstTimeHash.set(key, true)
+
+  //     if (func) {
+  //       func()
+  //     }
+
+  //     return true
+  //   }
+
+  //   return false
+  // }
 }

package/src/fez/utils/css_mixin.js

@@ -0,0 +1,25 @@
+// define custom style macro - simple scss mixin
+// :mobile { ... } -> @media (max-width:  768px) { ... }
+// @include mobile { ... } -> @media (max-width:  768px) { ... }
+// demo/fez/ui-style.fez
+
+const CssMixins = {}
+
+export default (Fez) => {
+  Fez.cssMixin = (name, content) => {
+    if (content) {
+      CssMixins[name] = content
+    } else {
+      Object.entries(CssMixins).forEach(([key, val])=>{
+        name = name.replaceAll(`:${key} `, `${val} `)
+        name = name.replaceAll(`@include ${key} `, `${val} `)
+      })
+
+      return name
+    }
+  }
+
+  Fez.cssMixin('mobile', '@media (max-width: 767px)')
+  Fez.cssMixin('tablet', '@media (min-width: 768px) and (max-width: 1023px)')
+  Fez.cssMixin('desktop', '@media (min-width:  1200px)')
+}

package/src/fez/utils/dump.js

@@ -0,0 +1,240 @@
+// pretty print HTML
+const log_pretty_print = (html) => {
+  const parts = html
+    .split(/(<\/?[^>]+>)/g)
+    .map(p => p.trim())
+    .filter(p => p);
+
+  let indent = 0;
+  const lines = [];
+
+  for (let i = 0; i < parts.length; i++) {
+    const part = parts[i];
+    const nextPart = parts[i + 1];
+    const nextNextPart = parts[i + 2];
+
+    // Check if it's a tag
+    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('</')) {
+        // Combine them on one line
+        const actualIndent = Math.max(0, indent);
+        lines.push('  '.repeat(actualIndent) + part + nextPart + nextNextPart);
+        i += 2; // Skip the next two parts
+      }
+      // Closing tag
+      else if (part.startsWith('</')) {
+        indent--;
+        const actualIndent = Math.max(0, indent);
+        lines.push('  '.repeat(actualIndent) + part);
+      }
+      // Self-closing tag
+      else if (part.endsWith('/>') || part.includes(' />')) {
+        const actualIndent = Math.max(0, indent);
+        lines.push('  '.repeat(actualIndent) + part);
+      }
+      // Opening tag
+      else {
+        const actualIndent = Math.max(0, indent);
+        lines.push('  '.repeat(actualIndent) + part);
+        indent++;
+      }
+    }
+    // Text node
+    else if (part) {
+      const actualIndent = Math.max(0, indent);
+      lines.push('  '.repeat(actualIndent) + part);
+    }
+  }
+
+  return lines.join('\n');
+}
+
+const LOG = (() => {
+  const logs = [];
+  const logTypes = []; // Track the original type of each log
+  let currentIndex = 0;
+  let renderContent = null; // Will hold the render function
+
+  // Add ESC key handler and arrow key navigation
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      const dialog = document.getElementById('dump-dialog');
+      const button = document.getElementById('log-reopen-button');
+
+      if (dialog) {
+        // Close dialog
+        dialog.remove();
+        createLogButton();
+      } else if (button) {
+        // Open dialog
+        button.remove();
+        showLogDialog();
+      }
+    } 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) {
+          currentIndex--;
+          localStorage.setItem('_LOG_INDEX', currentIndex);
+          renderContent();
+        } else if (e.key === 'ArrowRight' && currentIndex < logs.length - 1) {
+          currentIndex++;
+          localStorage.setItem('_LOG_INDEX', currentIndex);
+          renderContent();
+        } else if (e.key === 'ArrowUp' && currentIndex > 0) {
+          currentIndex = Math.max(0, currentIndex - 5);
+          localStorage.setItem('_LOG_INDEX', currentIndex);
+          renderContent();
+        } else if (e.key === 'ArrowDown' && currentIndex < logs.length - 1) {
+          currentIndex = Math.min(logs.length - 1, currentIndex + 5);
+          localStorage.setItem('_LOG_INDEX', currentIndex);
+          renderContent();
+        }
+      }
+    }
+  });
+
+  const createLogButton = () => {
+    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.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)';
+      btn.onclick = () => {
+        btn.remove();
+        showLogDialog();
+      };
+    }
+  };
+
+  const showLogDialog = () => {
+    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.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';
+    }
+
+    // Check if we have a saved index and it's still valid
+    const savedIndex = parseInt(localStorage.getItem('_LOG_INDEX'));
+    if (!isNaN(savedIndex) && savedIndex >= 0 && savedIndex < logs.length) {
+      currentIndex = savedIndex;
+    } else {
+      currentIndex = logs.length - 1;
+    }
+
+    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
+          }
+        }
+        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>' +
+        '<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>';
+
+      d.querySelector('button[style*="flex-shrink:0"]').onclick = () => {
+        d.remove();
+        createLogButton();
+      };
+
+      d.querySelectorAll('button[data-index]').forEach(btn => {
+        btn.onclick = () => {
+          currentIndex = parseInt(btn.dataset.index);
+          localStorage.setItem('_LOG_INDEX', currentIndex);
+          renderContent();
+        };
+      });
+    };
+
+    renderContent();
+  };
+
+  return o => {
+    if (!document.body) {
+      window.requestAnimationFrame( () => LOG(o) )
+      return
+    }
+
+    // Store the original type
+    let originalType = typeof o;
+
+    if (o instanceof Node) {
+      if (o.nodeType === Node.TEXT_NODE) {
+        o = o.textContent || String(o)
+      } else {
+        o = log_pretty_print(o.outerHTML)
+      }
+    }
+
+    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';
+    }
+
+    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()
+
+    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');
+
+    if (!isOpen) {
+      // Show log dialog by default
+      showLogDialog();
+    } else {
+      // Update current index to the new log and refresh
+      currentIndex = logs.length - 1;
+      localStorage.setItem('_LOG_INDEX', currentIndex);
+      if (renderContent) {
+        renderContent();
+      }
+    }
+  };
+})();
+
+if (typeof window !== 'undefined' && !window.LOG) {
+  window.LOG = LOG
+}
+
+export default LOG

package/src/fez/utils/highlight_all.js

@@ -0,0 +1,98 @@
+// Highlight all Fez elements with their names
+const highlightAll = () => {
+  // Only work if Fez.DEV is true OR (port is above 2999 and Fez.DEV is not false)
+  const port = parseInt(window.location.port) || 80;
+  if (!(Fez.DEV === true || (port > 2999 && Fez.DEV !== false))) return;
+
+  // Check if highlights already exist
+  const existingHighlights = document.querySelectorAll('.fez-highlight-overlay');
+
+  if (existingHighlights.length > 0) {
+    // Remove existing highlights
+    existingHighlights.forEach(el => el.remove());
+    return;
+  }
+
+  // Find all Fez and Svelte elements
+  const allElements = document.querySelectorAll('.fez, .svelte');
+
+  allElements.forEach(el => {
+    let componentName = null;
+    let componentType = null;
+
+    // Check for Fez component
+    if (el.classList.contains('fez') && el.fez && el.fez.fezName) {
+      componentName = el.fez.fezName;
+      componentType = 'fez';
+    }
+    // Check for Svelte component
+    else if (el.classList.contains('svelte') && el.svelte && el.svelte.svelteName) {
+      componentName = el.svelte.svelteName;
+      componentType = 'svelte';
+    }
+
+    if (componentName) {
+      // Create overlay div
+      const overlay = document.createElement('div');
+      overlay.className = 'fez-highlight-overlay';
+
+      // Get element position
+      const rect = el.getBoundingClientRect();
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+      const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+
+      // Style the overlay
+      overlay.style.cssText = `
+        position: absolute;
+        top: ${rect.top + scrollTop}px;
+        left: ${rect.left + scrollLeft}px;
+        width: ${rect.width}px;
+        height: ${rect.height}px;
+        border: 1px solid ${componentType === 'svelte' ? 'blue' : 'red'};
+        pointer-events: none;
+        z-index: 9999;
+      `;
+
+      // Create label for component name
+      const label = document.createElement('div');
+      label.textContent = componentName;
+      label.style.cssText = `
+        position: absolute;
+        top: -20px;
+        left: 0;
+        background: ${componentType === 'svelte' ? 'blue' : 'red'};
+        color: white;
+        padding: 4px 6px 2px 6px;
+        font-size: 14px;
+        font-family: monospace;
+        line-height: 1;
+        white-space: nowrap;
+        cursor: pointer;
+        pointer-events: auto;
+        text-transform: uppercase;
+      `;
+
+      // Add click handler to dump the node
+      label.addEventListener('click', (e) => {
+        e.stopPropagation();
+        Fez.dump(el);
+      });
+
+      overlay.appendChild(label);
+      document.body.appendChild(overlay);
+    }
+  });
+}
+
+// Bind Ctrl+E to highlightAll
+document.addEventListener('keydown', (event) => {
+  if ((event.ctrlKey || event.metaKey) && event.key === 'e') {
+    // Check if target is not inside a form
+    if (!event.target.closest('form')) {
+      event.preventDefault();
+      highlightAll();
+    }
+  }
+});
+
+export default highlightAll