@dinoreic/fez 0.1.0

package/src/fez/root.js

@@ -0,0 +1,465 @@
+// runtime scss
+import Gobber from './vendor/gobber.js'
+
+// morph dom from one state to another
+import { Idiomorph } from './vendor/idiomorph.js'
+
+import connect from './connect.js'
+import compile from './compile.js'
+import state from './lib/global-state.js'
+
+// Fez('ui-slider')                             # first slider
+// Fez('ui-slider', (n)=>alert(n))              # find all and execute
+// Fez(this, 'ui-slider')                       # first parent ui-slider
+// Fez('ui-slider', class { init() { ... }}) # create Fez dom node
+const Fez = (name, klass) => {
+  if(typeof name === 'number') {
+    const fez = Fez.instances.get(name)
+    if (fez) {
+      return fez
+    } else {
+      Fez.error(`Instance with UID "${name}" not found.`)
+    }
+  }
+  else if (name) {
+    if (klass) {
+      const isPureFn = typeof klass === 'function' && !/^\s*class/.test(klass.toString()) && !/\b(this|new)\b/.test(klass.toString())
+
+      if (isPureFn) {
+        const list = Array
+          .from(document.querySelectorAll(`.fez.fez-${name}`))
+          .filter( n => n.fez )
+
+        list.forEach( el => klass(el.fez) )
+        return list
+      } else if (typeof klass != 'function') {
+        return Fez.find(name, klass)
+      } else {
+        return connect(name, klass)
+      }
+    } else {
+      const node = name.nodeName ? name.closest('.fez') : (
+        document.querySelector( name.includes('#') ? name : `.fez.fez-${name}` )
+      )
+      if (node) {
+        if (node.fez) {
+          return node.fez
+        } else {
+          Fez.error(`node "${name}" has no Fez attached.`)
+        }
+      } else {
+        Fez.error(`node "${name}" not found.`)
+      }
+    }
+  } else {
+    Fez.error('Fez() ?')
+  }
+}
+
+Fez.classes = {}
+Fez.instanceCount = 0
+Fez.instances = new Map()
+
+Fez.find = (onode, name) => {
+  let node = onode
+
+  if (typeof node == 'string') {
+    node = document.body.querySelector(node)
+  }
+
+  if (typeof node.val == 'function') {
+    node = node[0]
+  }
+
+  const klass = name ? `.fez.fez-${name}` : '.fez'
+
+  const closestNode = node.closest(klass)
+  if (closestNode && closestNode.fez) {
+    return closestNode.fez
+  } else {
+    console.error('Fez node connector not found', onode, node)
+  }
+}
+
+Fez.cssClass = (text) => {
+  return Gobber.css(text)
+}
+
+Fez.globalCss = (cssClass, opts = {}) => {
+  if (typeof cssClass === 'function') {
+    cssClass = cssClass()
+  }
+
+  if (cssClass.includes(':')) {
+    let text = cssClass
+      .split("\n")
+      .filter(line => !(/^\s*\/\//.test(line)))
+      .join("\n")
+
+    if (opts.wrap) {
+      text = `:fez { ${text} }`
+    }
+
+    text = text.replace(/\:fez|\:host/, `.fez.fez-${opts.name}`)
+
+    cssClass = Fez.cssClass(text)
+  }
+
+  if (document.body) {
+    document.body.parentElement.classList.add(cssClass)
+  } else {
+    document.addEventListener("DOMContentLoaded", () => {
+      document.body.parentElement.classList.add(cssClass)
+    })
+  }
+
+  return cssClass
+}
+
+Fez.info = () => {
+  console.log(JSON.stringify(Fez.fastBindInfo, null, 2))
+}
+
+Fez.morphdom = (target, newNode, opts = {}) => {
+  Array.from(target.attributes).forEach(attr => {
+    newNode.setAttribute(attr.name, attr.value)
+  })
+
+  Idiomorph.morph(target, newNode, {
+    morphStyle: 'outerHTML'
+  })
+
+  // remove whitespace on next node, if exists (you never want this)
+  const nextSibling = target.nextSibling
+  if (nextSibling?.nodeType === Node.TEXT_NODE && nextSibling.textContent.trim() === '') {
+    nextSibling.remove();
+  }
+}
+
+Fez.htmlEscape = (text) => {
+  if (typeof text == 'string') {
+    text = text
+      // .replaceAll('&', "&")
+      .replace(/font-family\s*:\s*(?:&[^;]+;|[^;])*?;/gi, '')
+      .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] ||= []
+  Fez._subs[channel].forEach((el) => {
+    el[1].bind(el[0])(...args)
+  })
+}
+
+  // 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
+};
+
+Fez.error = (text, show) => {
+  text = `Fez: ${text}`
+  console.error(text)
+  if (show) {
+    return `<span style="border: 1px solid red; font-size: 14px; padding: 3px 7px; background: #fee; border-radius: 4px;">${text}</span>`
+  }
+}
+Fez.log = (text) => {
+  if (Fez.LOG === true) {
+    console.log(`Fez: ${text}`)
+  }
+}
+document.addEventListener('DOMContentLoaded', () => {
+  Fez.log('Fez.LOG === true, logging enabled.')
+})
+
+// execute function until it returns true
+Fez.untilTrue = (func, pingRate) => {
+  pingRate ||= 200
+
+  if (!func()) {
+    setTimeout(()=>{
+      Fez.untilTrue(func, pingRate)
+    } ,pingRate)
+  }
+}
+
+// Script from URL
+//   head({ js: 'https://example.com/script.js' });
+// Script with attributes
+//   head({ js: 'https://example.com/script.js', type: 'module', async: true });
+// Script with callback
+//   head({ js: 'https://example.com/script.js' }, () => { console.log('loaded') });
+// Module loading with auto-import to window
+//   head({ js: 'https://example.com/module.js', module: 'MyModule' }); // imports and sets window.MyModule
+// CSS inclusion
+//   head({ css: 'https://example.com/styles.css' });
+// CSS with additional attributes and callback
+//   head({ css: 'https://example.com/styles.css', media: 'print' }, () => { console.log('CSS loaded') })
+// Inline script evaluation
+//   head({ script: 'console.log("Hello world")' })
+Fez.head = (config, callback) => {
+  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;
+}
+
+// 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.onError = (kind, message) => {
+  // Ensure kind is always a string
+  if (typeof kind !== 'string') {
+    throw new Error('Fez.onError: kind must be a string');
+  }
+
+  console.error(`${kind}: ${message.toString()}`);
+}
+
+// define custom style macro
+// Fez.styleMacro('mobile', '@media (max-width:  768px)')
+// :mobile { ... } -> @media (max-width:  768px) { ... }
+Fez._styleMacros = {}
+Fez.styleMacro = (name, content) => {
+  Fez._styleMacros[name] = content
+}
+
+// work with tmp store
+Fez.store = {
+  store: new Map(),
+  counter: 0,
+
+  set(value) {
+    const key = this.counter++;
+    this.store.set(key, value);
+    return key;
+  },
+
+  get(key) {
+    return this.store.get(key);
+  },
+
+  delete(key) {
+    const value = this.store.get(key);
+    this.store.delete(key)
+    return value;
+  }
+};
+
+Fez.compile = compile
+Fez.state = state
+
+export default Fez

package/src/fez/vendor/gobber.js

@@ -0,0 +1,8 @@
+/**
+ * Skipped minification because the original files appears to be already minified.
+ * Original file: /npm/goober@2.1.14/dist/goober.modern.js
+ *
+ * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
+ */
+let e={data:""},t=t=>"object"==typeof window?((t?t.querySelector("#_goober"):window._goober)||Object.assign((t||document.head).appendChild(document.createElement("style")),{innerHTML:" ",id:"_goober"})).firstChild:t||e,a=e=>{let a=t(e),r=a.data;return a.data="",r},r=/(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g,l=/\/\*[^]*?\*\/|  +/g,s=/\n+/g,n=(e,t)=>{let a="",r="",l="";for(let s in e){let o=e[s];"@"==s[0]?"i"==s[1]?a=s+" "+o+";":r+="f"==s[1]?n(o,s):s+"{"+n(o,"k"==s[1]?"":t)+"}":"object"==typeof o?r+=n(o,t?t.replace(/([^,])+/g,(e=>s.replace(/(^:.*)|([^,])+/g,(t=>/&/.test(t)?t.replace(/&/g,e):e?e+" "+t:t)))):s):null!=o&&(s=/^--/.test(s)?s:s.replace(/[A-Z]/g,"-$&").toLowerCase(),l+=n.p?n.p(s,o):s+":"+o+";")}return a+(t&&l?t+"{"+l+"}":l)+r},o={},c=e=>{if("object"==typeof e){let t="";for(let a in e)t+=a+c(e[a]);return t}return e},i=(e,t,a,i,p)=>{let u=c(e),d=o[u]||(o[u]=(e=>{let t=0,a=11;for(;t<e.length;)a=101*a+e.charCodeAt(t++)>>>0;return"go"+a})(u));if(!o[d]){let t=u!==e?e:(e=>{let t,a,n=[{}];for(;t=r.exec(e.replace(l,""));)t[4]?n.shift():t[3]?(a=t[3].replace(s," ").trim(),n.unshift(n[0][a]=n[0][a]||{})):n[0][t[1]]=t[2].replace(s," ").trim();return n[0]})(e);o[d]=n(p?{["@keyframes "+d]:t}:t,a?"":"."+d)}let f=a&&o.g?o.g:null;return a&&(o.g=o[d]),((e,t,a,r)=>{r?t.data=t.data.replace(r,e):-1===t.data.indexOf(e)&&(t.data=a?e+t.data:t.data+e)})(o[d],t,i,f),d},p=(e,t,a)=>e.reduce(((e,r,l)=>{let s=t[l];if(s&&s.call){let e=s(a),t=e&&e.props&&e.props.className||/^go/.test(e)&&e;s=t?"."+t:e&&"object"==typeof e?e.props?"":n(e,""):!1===e?"":e}return e+r+(null==s?"":s)}),"");function u(e){let a=this||{},r=e.call?e(a.p):e;return i(r.unshift?r.raw?p(r,[].slice.call(arguments,1),a.p):r.reduce(((e,t)=>Object.assign(e,t&&t.call?t(a.p):t)),{}):r,t(a.target),a.g,a.o,a.k)}let d,f,g,b=u.bind({g:1}),m=u.bind({k:1});function h(e,t,a,r){n.p=t,d=e,f=a,g=r}function y(e,t){let a=this||{};return function(){let r=arguments;function l(s,n){let o=Object.assign({},s),c=o.className||l.className;a.p=Object.assign({theme:f&&f()},o),a.o=/ *go\d+/.test(c),o.className=u.apply(a,r)+(c?" "+c:""),t&&(o.ref=n);let i=e;return e[0]&&(i=o.as||e,delete o.as),g&&i[0]&&g(o),d(i,o)}return t?t(l):l}}
+export default { css:u, extractCss: a, glob: b, keyframes: m, setup: h, styled: y }