@dinoreic/fez 0.3.2 → 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)
@@ -191,7 +295,99 @@ export default (Fez) => {
       return pointer;
     }
     else if (typeof pointer === 'string') {
-      return new Function(pointer);
+      // 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

@@ -54,8 +54,9 @@ 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
+  // Add ESC key handler and arrow key navigation
   document.addEventListener('keydown', (e) => {
     if (e.key === 'Escape') {
       e.preventDefault();
@@ -65,14 +66,34 @@ const LOG = (() => {
       if (dialog) {
         // Close dialog
         dialog.remove();
-        localStorage.setItem('_LOG_CLOSED', 'true');
         createLogButton();
       } else if (button) {
         // Open dialog
         button.remove();
-        localStorage.setItem('_LOG_CLOSED', 'false');
         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();
+        }
+      }
     }
   });
 
@@ -90,7 +111,6 @@ const LOG = (() => {
         'opacity:1;visibility:visible;box-shadow:0 4px 12px rgba(255,51,51,0.3)';
       btn.onclick = () => {
         btn.remove();
-        localStorage.setItem('_LOG_CLOSED', 'false');
         showLogDialog();
       };
     }
@@ -117,7 +137,7 @@ const LOG = (() => {
       currentIndex = logs.length - 1;
     }
 
-    const renderContent = () => {
+    renderContent = () => {
       const buttons = logs.map((_, i) => {
         let bgColor = '#f0f0f0'; // default
         if (i !== currentIndex) {
@@ -141,7 +161,6 @@ const LOG = (() => {
 
       d.querySelector('button[style*="flex-shrink:0"]').onclick = () => {
         d.remove();
-        localStorage.setItem('_LOG_CLOSED', 'true');
         createLogButton();
       };
 
@@ -163,13 +182,17 @@ const LOG = (() => {
       return
     }
 
-    if (o instanceof Node) {
-      o = log_pretty_print(o.outerHTML)
-    }
-
     // 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' }
 
@@ -193,13 +216,19 @@ const LOG = (() => {
     logs.push(o + `\n\ntype: ${originalType}`);
     logTypes.push(originalType);
 
-    // Check if log was previously closed
-    const isClosed = localStorage.getItem('_LOG_CLOSED') === 'true';
+    // Check if log dialog is open by checking for element
+    const isOpen = !!document.getElementById('dump-dialog');
 
-    if (isClosed) {
-      createLogButton();
-    } else {
+    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();
+      }
     }
   };
 })();

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

package/src/svelte-cde-adapter.coffee

@@ -0,0 +1,122 @@
+# get node attributes
+getAttributes = (node) ->
+  attrs = {}
+
+  for el in node.attributes
+    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(':', '')
+    attrs[el.name] = el.value
+
+  if attrs['data-props']
+    attrs = JSON.parse(attrs['data-props'])
+
+  # pass props as json template
+  # <script type="text/template">{...}</script>
+  # <foo-bar data-json-template="true"></foo-bar>
+  if attrs['data-json-template']
+    prev = node.previousSibling
+    if prev?.textContent
+      attrs = JSON.parse(prev.textContent)
+      prev.remove()
+
+    # data = node.previousSibling?.textContent
+    # if data
+    #   attrs = JSON.parse(data)
+
+  attrs
+
+# passes root, use `Svelte(this.root.id)` or `this.root.svelte`  to get node pointer
+# export onMount(instance, list, node) if you want to do stuff on mount
+# connect DOM node to Svelte class instance
+connect = (node, name, klass) ->
+  return unless node.isConnected
+
+  # TODO: get node name
+  # (new klass(target: document.createElement('div'))).nodeName
+  exported = Object.getOwnPropertyNames(klass.prototype)
+  newNode = document.createElement(if exported.includes('nodeNameSpan') then 'span' else 'div')
+  newNode.classList.add('svelte')
+  newNode.classList.add("svelte-#{name}")
+  newNode.id = node.id || "svelte_#{++Svelte.count}"
+
+  # get attributes
+  props = getAttributes(node)
+  props.root ||= newNode
+  props.oldRoot ||= node
+  props.html ||= node.innerHTML
+
+  # has to come after getAttributes
+  node.parentNode.replaceChild(newNode, node);
+
+  # bind node and pass all props as single props attribute
+  exported = Reflect.ownKeys klass.prototype
+  svelteProps = {}
+  svelteProps.fast = true if exported.includes('fast') || exported.includes('FAST')
+  svelteProps.props = props if exported.includes('props')
+  svelteProps.root = newNode if exported.includes('root')
+  svelteProps.self = "Svelte('#{newNode.id}')" if exported.includes('self')
+
+  instance = newNode.svelte = new klass({target: newNode, props: svelteProps})
+  instance.svelteName = name
+
+  # fill slots
+  # slot has to be named sslot (not slot)
+  if slot = newNode.querySelector('sslot')
+    while node.firstChild
+      slot.parentNode.insertBefore(node.lastChild, slot.nextSibling);
+    slot.parentNode.removeChild(slot)
+
+  # in the end, call onmount
+  if instance.onMount
+    list = Array.from node.querySelectorAll(':scope > *')
+    instance.onMount(instance, list, node)
+
+# # #
+
+# passes root, use `Svelte(this.root.id)` or `this.root.svelte`  to get node pointer
+# export onMount(instance, list, node) if you want to do stuff on mount
+# Svelte(node || node_id).toogle()
+Svelte = (name, func) ->
+  if name.nodeName
+    # Svelte(this).close() -> return first parent svelte node
+    while name = name.parentNode
+      return name.svelte if name.svelte
+  else
+    name = '#' + name if name[0] != '#' && name[0] != '.'
+    document.querySelector(name)?.svelte
+
+Svelte.count = 0
+
+# Creates custom DOM element
+Svelte.connect = (name, klass) ->
+  customElements.define name, class extends HTMLElement
+    connectedCallback: ->
+      # no not optimize requestAnimationFrame (try to avoid it)
+      # because events in nested components are sometimes not propagated at all
+      # export let fast
+      # %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
+      else
+        connect(@, name, klass)
+
+# Creates HTML tag
+Svelte.tag = (tag, opts = {}, html = '') ->
+  json = JSON.stringify(opts).replaceAll("'", '&apos;')
+  "<#{tag} data-props='#{json}'>#{html}</#{tag}>"
+
+Svelte.bind = Svelte.connect
+window.Svelte = Svelte