nbhi 0.6.2 → 0.6.4

package/javascript/attributes.js

@@ -0,0 +1,129 @@
+export { getAttributeMapping, updateAttributes };
+
+const mapping = {
+  boolean: {
+    autofocus: ['button', 'input', 'select', 'textarea'],
+    autoplay: ['audio', 'video'],
+    checked: ['input'],
+    controls: ['audio', 'video'],
+    default: ['track'],
+    defer: ['script'],
+    disabled: ['button', 'input', 'optgroup', 'option', 'select', 'textarea', 'fieldset'],
+    formnovalidate: ['button', 'input'],
+    ismap: ['img'],
+    loop: ['audio', 'video'],
+    multiple: ['input', 'select'],
+    muted: ['audio', 'video'],
+    novalidate: ['form'],
+    open: ['details', 'dialog'],
+    playsinline: ['video'],
+    readonly: ['input', 'textarea'],
+    required: ['input', 'select', 'textarea'],
+    reversed: ['ol'],
+  },
+  keyValue: {
+    accept: ['input'],
+    autocomplete: ['input', 'select', 'textarea'],
+    cols: ['textarea'],
+    dirname: ['input', 'textarea'],
+    max: ['input'],
+    maxlength: ['input', 'textarea'],
+    min: ['input'],
+    minlength: ['input', 'textarea'],
+    name: ['input', 'select', 'textarea'],
+    pattern: ['input'],
+    placeholder: ['input', 'textarea'],
+    rows: ['textarea'],
+    size: ['input', 'select'],
+    step: ['input'],
+    type: ['input'],
+    value: ['input', 'select'],
+    width: ['input'],
+    wrap: ['textarea'],
+    htmlFor: ['label'],
+    for: ['label'],
+    href: ['a'],
+    target: ['a'],
+    src: ['audio', 'img', 'input', 'video'],
+    'aria-invalid': ['input', 'textarea', 'select'],
+  },
+  excludedAttributes: ['class', 'extends', 'id', 'part', 'data-slot', 'child'],
+  excludedElements: ['slot', 'template', 'style', 'script'],
+};
+
+function getAttributeMapping(element) {
+  const { keyValue, excludedAttributes, excludedElements, boolean: binary } = mapping;
+  const results = {};
+  traverse(element);
+  return results;
+
+  function traverse(element) {
+    const tagName = element.localName;
+    if (
+      element &&
+      typeof tagName === 'string' &&
+      !excludedElements.includes(element.localName)
+    ) {
+      Object
+        .entries(binary)
+        .filter(([key]) => !excludedAttributes.includes(key))
+        .filter(([, tagNames]) => tagNames.includes(tagName))
+        .forEach(([key, tagNames]) => results[key] = { type: 'boolean', tagNames });
+
+      Object
+        .entries(keyValue)
+        .filter(([key]) => !excludedAttributes.includes(key))
+        .filter(([, tagNames]) => tagNames.includes(tagName))
+        .forEach(([key, tagNames]) => results[key] = { type: 'keyValue', tagNames });
+
+      if (element.hasAttributes()) {
+        [...element.attributes].forEach(attribute => {
+          const name = attribute.name;
+          if (!excludedAttributes.includes(name)) {
+            if (!results[name]) {
+              results[name] = { type: 'userDefined', tagNames: [] };
+            }
+
+            if (!results[name].tagNames.includes(tagName)) {
+              results[name].tagNames.push(tagName);
+            }
+          }
+        });
+      }
+    }
+    [...element.children].forEach(child => traverse(child));
+  }
+};
+
+function updateAttributes({ name, value, attributeMapping, root }) {
+  const { type, tagNames = [] } = attributeMapping[name] ?? [];
+
+  if (type === 'userDefined') {
+    process(root.querySelector(`[${ name }]`));
+  } else {
+    tagNames.forEach(tagName => {
+      root.querySelectorAll(tagName).forEach(process);
+      if (tagName === root?.localName) {
+        process(root);
+      }
+    });
+  }
+
+  function process(element) {
+    if (element) {
+      if (
+        value === null ||
+        value === undefined ||
+        (type === 'boolean' && value === false)
+      ) {
+        element.removeAttribute(name);
+      } else {
+        element.setAttribute(name, value);
+        // Triggers <select> to update the selected <option>
+        if (name === 'value') {
+          element.value = value;
+        }
+      }
+    }
+  }
+}

package/javascript/element.js

@@ -0,0 +1,11 @@
+export default selector => {
+  if (typeof selector === 'string') {
+    const instance = document.querySelector(selector);
+    if (!instance) {
+      throw new Error(`No elements found for selector ${ selector }`);
+    }
+    return instance;
+  }
+
+  return selector;
+};

package/javascript/index.js

@@ -0,0 +1,149 @@
+import { getAttributeMapping, updateAttributes } from './attributes.js';
+import update from './update.js';
+import validate from './validate.js';
+import onceVisible from './onceVisible.js';
+
+export { initialize, update, validate, onceVisible };
+
+async function initialize({ prefix = 'db', source = '/components' } = {}) {
+  const registerCache = new Set();
+  const fileCache = new Set();
+
+  if (typeof source !== 'string' || !Object.keys(source).length) {
+    throw new Error('source option needs to be a string or an object');
+  }
+
+  if (typeof prefix !== 'string' || prefix === '') {
+    throw new Error('prefix option needs to be a string of at least one character');
+  }
+
+  const inheritedStylesheets = getInheritedStylesheets();
+  inPage(document.querySelector('body'));
+  await fromFile(document.querySelector('body'));
+
+  function inPage(root, parentId) {
+    root.querySelectorAll('template').forEach(template => {
+      if (!template.id && parentId) {
+        template.id = `${ parentId }-child`;
+      }
+
+      if (!template.id) {
+        console.log(template, parentId);
+        throw new Error('<template> is missing a mandatory id field');
+      }
+
+      inPage(template.content, template.id);
+      const name = template.id;
+      register({ name, template });
+    });
+  }
+
+  function fromFile(root) {
+    const promises = [...root.querySelectorAll(':not(:defined)')]
+      .filter(element => {
+        const tagName = element.localName;
+        return element.nodeType === 1 && tagName.includes('-') && tagName.startsWith(prefix);
+      })
+      .map(async element => {
+        const name = element.localName;
+        if (!fileCache.has(name)) {
+          fileCache.add(name);
+          const html = await fetchFromFile(name);
+          const template = document.createElement('template');
+          template.content.append(...html.children);
+          const script = await copyScript(template);
+          await fromFile(template.content);
+          inPage(template.content, name);
+          register({ name, template, script });
+
+          function copyScript(template) {
+            const script = template.content.querySelector('script');
+            return new Promise(async resolve => {
+              if (script) {
+                const blob = new Blob([script.textContent], { type: 'text/javascript' });
+                const blobUrl = URL.createObjectURL(blob);
+                resolve((await import(blobUrl)).default);
+                URL.revokeObjectURL(blobUrl);
+              } else {
+                resolve({});
+              }
+            });
+          }
+        };
+
+        async function fetchFromFile(name) {
+          const fileName = name.split('-').slice(1).join('-');
+          const relativePath = typeof source === 'string'
+            ? `${ source }/${ fileName }.html` : source[fileName];
+          const response = await fetch(relativePath);
+          if (!response.ok) {
+            throw new Error(`Could not find component @ ${ relativePath }`);
+          }
+          const templateAsString = await response.text();
+          const document = new DOMParser().parseFromString(templateAsString, 'text/html');
+          return document.querySelector('body');
+        }
+      });
+
+    return Promise.all(promises);
+  }
+
+  function register({ name, template, script }) {
+    if (registerCache.has(name)) {
+      return;
+    }
+
+    registerCache.add(name);
+
+    const isFormControl = !!template.content.querySelector('input, select, textarea');
+    const attributeMapping = getAttributeMapping(template.content);
+
+    customElements.define(name, class extends HTMLElement {
+      static observedAttributes = Object.keys(attributeMapping);
+      static formAssociated = isFormControl;
+      #shadow = null;
+
+      constructor() {
+        super();
+
+        const clone = document.importNode(template.content, true);
+        this.#shadow = this.attachShadow({ mode: 'open' });
+        this.#shadow.adoptedStyleSheets = inheritedStylesheets;
+        this.#shadow.appendChild(clone);
+
+        if (isFormControl) {
+          this.elementInternals = this.attachInternals();
+          this.formElement = this.#shadow.querySelector('input, select, textarea');
+        }
+      }
+
+      connectedCallback() {
+        if (typeof script === 'function') {
+          script(this);
+        }
+      }
+
+      attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+          updateAttributes({ name, value: newValue, attributeMapping, root: this.#shadow });
+        }
+      }
+    });
+  };
+
+  function getInheritedStylesheets() {
+    return Array.from(document.styleSheets)
+      .filter(sheet => sheet?.ownerNode?.dataset?.inherit === 'true')
+      .map(sheet => {
+        const newSheet = new CSSStyleSheet();
+        try {
+          const cssText = Array.from(sheet.cssRules).map(rule => rule.cssText).join('\n');
+          newSheet.replaceSync(cssText);
+        } catch (error) {
+          error;
+          console.error('Permission denied for sheet:', sheet.href);
+        }
+        return newSheet;
+      });
+  }
+};

package/javascript/onceVisible.js

@@ -0,0 +1,11 @@
+import element from './element.js';
+
+export default (selector, callback) => {
+  const observer = new IntersectionObserver(entries => {
+    if (entries[0].isIntersecting) {
+      callback();
+      observer.disconnect();
+    }
+  });
+  observer.observe(element(selector));
+};

package/javascript/update.js

@@ -0,0 +1,215 @@
+import { getAttributeMapping, updateAttributes } from './attributes.js';
+import element from './element.js';
+
+export default selector => {
+  const instance = element(selector);
+  const idCache = new WeakMap();
+  const mappingCache = new WeakMap();
+  let renderedChildren = new Map();
+  let idCount = 1;
+  let templateChild;
+
+  return data => {
+    if (isDate(data)) {
+      throw new Error('Please convert date to string, ie. toISOString()');
+    }
+
+    if (isArray(data)) {
+      updateList(data);
+    } else {
+      if (isPrimitive(data)) {
+        updateText(instance, data);
+      } else if (isObject(data)) {
+        updateFromObject(instance, data);
+      }
+    }
+
+    function isDate(input) {
+      return input?.getTime !== undefined;
+    }
+
+    function isPrimitive(input) {
+      return !isArray(input) && !isObject(input);
+    }
+
+    function isObject(input) {
+      return !isArray(input) && input !== null && typeof input === 'object' && Object.keys(input).length;
+    }
+
+    function isArray(input) {
+      return Array.isArray(input);
+    }
+
+    function updateFromObject(element, data) {
+      Object.entries(data).forEach(([key, value]) => {
+        if (key.startsWith('$')) {
+          const name = key.slice(1);
+          if (element.shadowRoot) {
+            if (value === false) {
+              element.removeAttribute(name);
+            } else if (value === true) {
+              element.setAttribute(name, '');
+            } else {
+              element.setAttribute(name, value);
+            }
+          } else {
+            if (!mappingCache.has(element)) {
+              mappingCache.set(element, getAttributeMapping(element));
+            }
+            const attributeMapping = mappingCache.get(element);
+            updateAttributes({ name, value, attributeMapping, root: element });
+          }
+        } else {
+          updateText(element, value, key);
+        }
+      });
+    }
+
+    function updateText(element, value, name) {
+      if (element.localName === 'option') {
+        element.textContent = value;
+      } else if (
+        element.localName === 'tr' ||
+        element.localName === 'li' ||
+        (element.hasAttribute('child') && !element.shadowRoot)) {
+        if (element.hasAttribute('data-slot') && element.dataset.slot === name) {
+          element.textContent = value;
+        } else {
+          const match = element.querySelector(`[data-slot="${ name }"]`);
+          if (match) {
+            match.textContent = value;
+          }
+        }
+      } else if (!name && element.textContent !== value) {
+        element.textContent = value;
+      } else {
+        let slot = element.querySelector(`[slot="${ name }"]`);
+        if (!slot) {
+          slot = document.createElement('span');
+          slot.setAttribute('slot', name);
+          element.append(slot);
+        }
+
+        if (slot.textContent !== value) {
+          slot.textContent = value;
+        }
+      }
+    }
+
+    function updateList(records) {
+      const parent = getParent();
+
+      if (!templateChild) {
+        throw new Error(`Cannot update ${ selector }, cannot find child element`);
+      }
+
+      const newChildren = new Map();
+
+      records.forEach((record, index) => {
+        const id = getId(record, index);
+        let child = renderedChildren.get(id);
+
+        if (!child) {
+          child = templateChild.cloneNode(true);
+          parent.append(child);
+        }
+
+        if (child.cachedData !== record) {
+          if (isObject(record)) {
+            updateFromObject(child, record);
+          } else {
+            updateText(child, record);
+          }
+          child.cachedData = record;
+        }
+
+        newChildren.set(id, child);
+      });
+
+      renderedChildren.forEach((child, id) => {
+        if (!newChildren.has(id)) {
+          child.remove();
+        }
+      });
+
+      // Order children
+      let lastChild;
+      newChildren.forEach(child => {
+        if (child !== lastChild?.nextSibling) {
+          parent.insertBefore(child, lastChild ? lastChild.nextSibling : parent.firstChild);
+        }
+        lastChild = child;
+      });
+
+      renderedChildren = newChildren;
+
+      function getId(record, index) {
+        if (record && typeof record === 'object') {
+          if (!idCache.has(record)) {
+            idCache.set(record, idCount++);
+          }
+          return idCache.get(record);
+        }
+        return `p:${ record }:${ index }`;
+      };
+
+      function getParent() {
+        const topLevel = getTopLevel();
+        if (topLevel.localName === 'table') {
+          return process('tbody', 'tr');
+        } else if (topLevel.localName === 'ol') {
+          return process('ol', 'li');
+        } else if (topLevel.localName === 'ul') {
+          return process('ul', 'li');
+        } else if (topLevel.localName === 'select') {
+          return process('select', 'option');
+        } else if (topLevel.querySelector('[child]')) {
+          const parent = getParent(topLevel.querySelector('[child]')).parentElement;
+          setTemplateChild('[child]', parent);
+          if (parent.localName === 'slot' && parent.hasAttribute('name')) {
+            templateChild.slot = parent.getAttribute('name');
+          }
+          return parent.localName === 'slot' ? instance : parent;
+        }
+
+        throw new Error(`Could not find a parent to assign children to, valid
+          options are table, ul, ol, select or a structure with a child attribute`);
+
+        function process(parentName, childName) {
+          const parent = getParent(parentName);
+          setTemplateChild(childName, parent);
+          return parent;
+        }
+
+        function setTemplateChild(childName, parent) {
+          if (!templateChild) {
+            templateChild = parent.querySelector(childName).cloneNode(true);
+            parent.replaceChildren();
+          }
+        }
+
+        function getParent(parentName) {
+          if (parentName === topLevel.localName) {
+            return topLevel;
+          }
+          const parent = typeof parentName === 'string'
+            ? topLevel.querySelector(parentName) : parentName;
+          if (!parent) {
+            console.log({ topLevel, parentName });
+            throw new Error('Cannot find parent');
+          }
+          return parent;
+        }
+
+        function getTopLevel() {
+          if (instance.tagName.includes('-')) {
+            return [...instance.shadowRoot.children].find(child => {
+              return child.localName !== 'script' && child.localName !== 'style';
+            });
+          }
+          return instance;
+        }
+      }
+    }
+  };
+};

package/javascript/validate.js

@@ -0,0 +1,39 @@
+import element from './element.js';
+
+// Too long and too short is only set when the actual input is changed, so we do it here
+export default selector => {
+  const instance = element(selector);
+  if (instance.elementInternals) {
+    const element = instance.formElement;
+    const value = element.value;
+    const minlength = element.getAttribute('minlength');
+    const maxlength = element.getAttribute('maxlength');
+    const validity = {
+      valueMissing: element.validity.valueMissing,
+      typeMismatch: element.validity.typeMismatch,
+      patternMismatch: element.validity.patternMismatch,
+      rangeUnderflow: element.validity.rangeUnderflow,
+      rangeOverflow: element.validity.rangeOverflow,
+      stepMismatch: element.validity.stepMismatch,
+      badInput: element.validity.badInput,
+      customError: element.validity.customError,
+      tooShort: minlength ? value.length < parseInt(minlength) : false,
+      tooLong: maxlength ? value.length > parseInt(maxlength) : false,
+    };
+    instance.elementInternals.setFormValue(value);
+    instance.elementInternals.setValidity(validity, message(), element);
+
+    return instance.elementInternals;
+
+    function message() {
+      if (validity.tooShort) {
+        return `The text needs to be at least ${ minlength } characters long`;
+      } else if (validity.tooLong) {
+        return `The text needs to be at most ${ maxlength } characters long`;
+      } else if (element.validationMessage) {
+        return element.validationMessage;
+      }
+      return 'The value is invalid';
+    }
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nbhi",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "description": "No-Build HTML Includes (NBHI) is a simple library that allows you to include html files into other html files and turns them into [web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components). Lazy initialization of content (when entering the viewport) and a one line call to update/hydrate content in your html pages. No build tools required, no `package.json` needed.",
   "keywords": [
     "web-components",
@@ -22,17 +22,15 @@
     "url": "git+https://github.com/royniels/nbhi.git"
   },
   "files": [
-    "./index.min.js",
-    "./index.min.js.map"
+    "./javascript/**.js"
   ],
   "exports": {
-    ".": "./index.min.js"
+    ".": "./javascript/index.js"
   },
   "license": "MIT",
   "author": "Roy Niels",
   "type": "module",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "npx esbuild ./javascript/index.js --minify --bundle --format=esm --sourcemap --outfile=index.min.js"
+    "test": "echo \"Error: no test specified\" && exit 1"
   }
 }

package/index.min.js

@@ -1,4 +0,0 @@
-var I={boolean:{autofocus:["button","input","select","textarea"],autoplay:["audio","video"],checked:["input"],controls:["audio","video"],default:["track"],defer:["script"],disabled:["button","input","optgroup","option","select","textarea","fieldset"],formnovalidate:["button","input"],ismap:["img"],loop:["audio","video"],multiple:["input","select"],muted:["audio","video"],novalidate:["form"],open:["details","dialog"],playsinline:["video"],readonly:["input","textarea"],required:["input","select","textarea"],reversed:["ol"]},keyValue:{accept:["input"],autocomplete:["input","select","textarea"],cols:["textarea"],dirname:["input","textarea"],max:["input"],maxlength:["input","textarea"],min:["input"],minlength:["input","textarea"],name:["input","select","textarea"],pattern:["input"],placeholder:["input","textarea"],rows:["textarea"],size:["input","select"],step:["input"],type:["input"],value:["input","select"],width:["input"],wrap:["textarea"],htmlFor:["label"],for:["label"],href:["a"],target:["a"],src:["audio","img","input","video"],"aria-invalid":["input","textarea","select"]},excludedAttributes:["class","extends","id","part","data-slot","child"],excludedElements:["slot","template","style","script"]};function q(c){let{keyValue:n,excludedAttributes:i,excludedElements:f,boolean:b}=I,d={};return p(c),d;function p(r){let S=r.localName;r&&typeof S=="string"&&!f.includes(r.localName)&&(Object.entries(b).filter(([o])=>!i.includes(o)).filter(([,o])=>o.includes(S)).forEach(([o,a])=>d[o]={type:"boolean",tagNames:a}),Object.entries(n).filter(([o])=>!i.includes(o)).filter(([,o])=>o.includes(S)).forEach(([o,a])=>d[o]={type:"keyValue",tagNames:a}),r.hasAttributes()&&[...r.attributes].forEach(o=>{let a=o.name;i.includes(a)||(d[a]||(d[a]={type:"userDefined",tagNames:[]}),d[a].tagNames.includes(S)||d[a].tagNames.push(S))})),[...r.children].forEach(o=>p(o))}}function j({name:c,value:n,attributeMapping:i,root:f}){let{type:b,tagNames:d=[]}=i[c]??[];b==="userDefined"?p(f.querySelector(`[${c}]`)):d.forEach(r=>{f.querySelectorAll(r).forEach(p),r===f?.localName&&p(f)});function p(r){r&&(n==null||b==="boolean"&&n===!1?r.removeAttribute(c):(r.setAttribute(c,n),c==="value"&&(r.value=n)))}}var N=c=>{if(typeof c=="string"){let n=document.querySelector(c);if(!n)throw new Error(`No elements found for selector ${c}`);return n}return c};var k=c=>{let n=N(c),i=new WeakMap,f=new WeakMap,b=new Map,d=1,p;return r=>{if(S(r))throw new Error("Please convert date to string, ie. toISOString()");s(r)?v(r):o(r)?A(n,r):a(r)&&g(n,r);function S(t){return t?.getTime!==void 0}function o(t){return!s(t)&&!a(t)}function a(t){return!s(t)&&t!==null&&typeof t=="object"&&Object.keys(t).length}function s(t){return Array.isArray(t)}function g(t,u){Object.entries(u).forEach(([h,l])=>{if(h.startsWith("$")){let x=h.slice(1);if(t.shadowRoot)l===!1?t.removeAttribute(x):l===!0?t.setAttribute(x,""):t.setAttribute(x,l);else{f.has(t)||f.set(t,q(t));let C=f.get(t);j({name:x,value:l,attributeMapping:C,root:t})}}else A(t,l,h)})}function A(t,u,h){if(t.localName==="option")t.textContent=u;else if(t.localName==="tr"||t.localName==="li"||t.hasAttribute("child")&&!t.shadowRoot)if(t.hasAttribute("data-slot")&&t.dataset.slot===h)t.textContent=u;else{let l=t.querySelector(`[data-slot="${h}"]`);l&&(l.textContent=u)}else if(!h&&t.textContent!==u)t.textContent=u;else{let l=t.querySelector(`[slot="${h}"]`);l||(l=document.createElement("span"),l.setAttribute("slot",h),t.append(l)),l.textContent!==u&&(l.textContent=u)}}function v(t){let u=C();if(!p)throw new Error(`Cannot update ${c}, cannot find child element`);let h=new Map;t.forEach((e,y)=>{let M=x(e,y),w=b.get(M);w||(w=p.cloneNode(!0),u.append(w)),w.cachedData!==e&&(a(e)?g(w,e):A(w,e),w.cachedData=e),h.set(M,w)}),b.forEach((e,y)=>{h.has(y)||e.remove()});let l;h.forEach(e=>{e!==l?.nextSibling&&u.insertBefore(e,l?l.nextSibling:u.firstChild),l=e}),b=h;function x(e,y){return e&&typeof e=="object"?(i.has(e)||i.set(e,d++),i.get(e)):`p:${e}:${y}`}function C(){let e=$();if(e.localName==="table")return y("tbody","tr");if(e.localName==="ol")return y("ol","li");if(e.localName==="ul")return y("ul","li");if(e.localName==="select")return y("select","option");if(e.querySelector("[child]")){let m=w(e.querySelector("[child]")).parentElement;return M("[child]",m),m.localName==="slot"&&m.hasAttribute("name")&&(p.slot=m.getAttribute("name")),m.localName==="slot"?n:m}throw new Error(`Could not find a parent to assign children to, valid
-          options are table, ul, ol, select or a structure with a child attribute`);function y(m,E){let O=w(m);return M(E,O),O}function M(m,E){p||(p=E.querySelector(m).cloneNode(!0),E.replaceChildren())}function w(m){if(m===e.localName)return e;let E=typeof m=="string"?e.querySelector(m):m;if(!E)throw console.log({topLevel:e,parentName:m}),new Error("Cannot find parent");return E}function $(){return n.tagName.includes("-")?[...n.shadowRoot.children].find(m=>m.localName!=="script"&&m.localName!=="style"):n}}}}};var T=c=>{let n=N(c);if(n.elementInternals){let r=function(){return p.tooShort?`The text needs to be at least ${b} characters long`:p.tooLong?`The text needs to be at most ${d} characters long`:i.validationMessage?i.validationMessage:"The value is invalid"},i=n.formElement,f=i.value,b=i.getAttribute("minlength"),d=i.getAttribute("maxlength"),p={valueMissing:i.validity.valueMissing,typeMismatch:i.validity.typeMismatch,patternMismatch:i.validity.patternMismatch,rangeUnderflow:i.validity.rangeUnderflow,rangeOverflow:i.validity.rangeOverflow,stepMismatch:i.validity.stepMismatch,badInput:i.validity.badInput,customError:i.validity.customError,tooShort:b?f.length<parseInt(b):!1,tooLong:d?f.length>parseInt(d):!1};return n.elementInternals.setFormValue(f),n.elementInternals.setValidity(p,r(),i),n.elementInternals}};var L=(c,n)=>{let i=new IntersectionObserver(f=>{f[0].isIntersecting&&(n(),i.disconnect())});i.observe(N(c))};async function Q({prefix:c="db",source:n="/components"}={}){let i=new Set,f=new Set;if(typeof n!="string"||!Object.keys(n).length)throw new Error("source option needs to be a string or an object");if(typeof c!="string"||c==="")throw new Error("prefix option needs to be a string of at least one character");let b=S();d(document.querySelector("body")),await p(document.querySelector("body"));function d(o,a){o.querySelectorAll("template").forEach(s=>{if(!s.id&&a&&(s.id=`${a}-child`),!s.id)throw console.log(s,a),new Error("<template> is missing a mandatory id field");d(s.content,s.id);let g=s.id;r({name:g,template:s})})}function p(o){let a=[...o.querySelectorAll(":not(:defined)")].filter(s=>{let g=s.localName;return s.nodeType===1&&g.includes("-")&&g.startsWith(c)}).map(async s=>{let g=s.localName;if(!f.has(g)){let h=function(l){let x=l.content.querySelector("script");return new Promise(async C=>{if(x){let e=new Blob([x.textContent],{type:"text/javascript"}),y=URL.createObjectURL(e);C((await import(y)).default),URL.revokeObjectURL(y)}else C({})})};f.add(g);let v=await A(g),t=document.createElement("template");t.content.append(...v.children);let u=await h(t);await p(t.content),d(t.content,g),r({name:g,template:t,script:u})}async function A(v){let t=v.split("-").slice(1).join("-"),u=typeof n=="string"?`${n}/${t}.html`:n[t],h=await fetch(u);if(!h.ok)throw new Error(`Could not find component @ ${u}`);let l=await h.text();return new DOMParser().parseFromString(l,"text/html").querySelector("body")}});return Promise.all(a)}function r({name:o,template:a,script:s}){if(i.has(o))return;i.add(o);let g=!!a.content.querySelector("input, select, textarea"),A=q(a.content);customElements.define(o,class extends HTMLElement{static observedAttributes=Object.keys(A);static formAssociated=g;#t=null;constructor(){super();let v=document.importNode(a.content,!0);this.#t=this.attachShadow({mode:"open"}),this.#t.adoptedStyleSheets=b,this.#t.appendChild(v),g&&(this.elementInternals=this.attachInternals(),this.formElement=this.#t.querySelector("input, select, textarea"))}connectedCallback(){typeof s=="function"&&s(this)}attributeChangedCallback(v,t,u){t!==u&&j({name:v,value:u,attributeMapping:A,root:this.#t})}})}function S(){return Array.from(document.styleSheets).filter(o=>o?.ownerNode?.dataset?.inherit==="true").map(o=>{let a=new CSSStyleSheet;try{let s=Array.from(o.cssRules).map(g=>g.cssText).join(`
-`);a.replaceSync(s)}catch(s){console.error("Permission denied for sheet:",o.href)}return a})}}export{Q as initialize,L as onceVisible,k as update,T as validate};
-//# sourceMappingURL=index.min.js.map

package/index.min.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["javascript/attributes.js", "javascript/element.js", "javascript/update.js", "javascript/validate.js", "javascript/onceVisible.js", "javascript/index.js"],
-  "sourcesContent": ["export { getAttributeMapping, updateAttributes };\n\nconst mapping = {\n  boolean: {\n    autofocus: ['button', 'input', 'select', 'textarea'],\n    autoplay: ['audio', 'video'],\n    checked: ['input'],\n    controls: ['audio', 'video'],\n    default: ['track'],\n    defer: ['script'],\n    disabled: ['button', 'input', 'optgroup', 'option', 'select', 'textarea', 'fieldset'],\n    formnovalidate: ['button', 'input'],\n    ismap: ['img'],\n    loop: ['audio', 'video'],\n    multiple: ['input', 'select'],\n    muted: ['audio', 'video'],\n    novalidate: ['form'],\n    open: ['details', 'dialog'],\n    playsinline: ['video'],\n    readonly: ['input', 'textarea'],\n    required: ['input', 'select', 'textarea'],\n    reversed: ['ol'],\n  },\n  keyValue: {\n    accept: ['input'],\n    autocomplete: ['input', 'select', 'textarea'],\n    cols: ['textarea'],\n    dirname: ['input', 'textarea'],\n    max: ['input'],\n    maxlength: ['input', 'textarea'],\n    min: ['input'],\n    minlength: ['input', 'textarea'],\n    name: ['input', 'select', 'textarea'],\n    pattern: ['input'],\n    placeholder: ['input', 'textarea'],\n    rows: ['textarea'],\n    size: ['input', 'select'],\n    step: ['input'],\n    type: ['input'],\n    value: ['input', 'select'],\n    width: ['input'],\n    wrap: ['textarea'],\n    htmlFor: ['label'],\n    for: ['label'],\n    href: ['a'],\n    target: ['a'],\n    src: ['audio', 'img', 'input', 'video'],\n    'aria-invalid': ['input', 'textarea', 'select'],\n  },\n  excludedAttributes: ['class', 'extends', 'id', 'part', 'data-slot', 'child'],\n  excludedElements: ['slot', 'template', 'style', 'script'],\n};\n\nfunction getAttributeMapping(element) {\n  const { keyValue, excludedAttributes, excludedElements, boolean: binary } = mapping;\n  const results = {};\n  traverse(element);\n  return results;\n\n  function traverse(element) {\n    const tagName = element.localName;\n    if (\n      element &&\n      typeof tagName === 'string' &&\n      !excludedElements.includes(element.localName)\n    ) {\n      Object\n        .entries(binary)\n        .filter(([key]) => !excludedAttributes.includes(key))\n        .filter(([, tagNames]) => tagNames.includes(tagName))\n        .forEach(([key, tagNames]) => results[key] = { type: 'boolean', tagNames });\n\n      Object\n        .entries(keyValue)\n        .filter(([key]) => !excludedAttributes.includes(key))\n        .filter(([, tagNames]) => tagNames.includes(tagName))\n        .forEach(([key, tagNames]) => results[key] = { type: 'keyValue', tagNames });\n\n      if (element.hasAttributes()) {\n        [...element.attributes].forEach(attribute => {\n          const name = attribute.name;\n          if (!excludedAttributes.includes(name)) {\n            if (!results[name]) {\n              results[name] = { type: 'userDefined', tagNames: [] };\n            }\n\n            if (!results[name].tagNames.includes(tagName)) {\n              results[name].tagNames.push(tagName);\n            }\n          }\n        });\n      }\n    }\n    [...element.children].forEach(child => traverse(child));\n  }\n};\n\nfunction updateAttributes({ name, value, attributeMapping, root }) {\n  const { type, tagNames = [] } = attributeMapping[name] ?? [];\n\n  if (type === 'userDefined') {\n    process(root.querySelector(`[${ name }]`));\n  } else {\n    tagNames.forEach(tagName => {\n      root.querySelectorAll(tagName).forEach(process);\n      if (tagName === root?.localName) {\n        process(root);\n      }\n    });\n  }\n\n  function process(element) {\n    if (element) {\n      if (\n        value === null ||\n        value === undefined ||\n        (type === 'boolean' && value === false)\n      ) {\n        element.removeAttribute(name);\n      } else {\n        element.setAttribute(name, value);\n        // Triggers <select> to update the selected <option>\n        if (name === 'value') {\n          element.value = value;\n        }\n      }\n    }\n  }\n}", "export default selector => {\n  if (typeof selector === 'string') {\n    const instance = document.querySelector(selector);\n    if (!instance) {\n      throw new Error(`No elements found for selector ${ selector }`);\n    }\n    return instance;\n  }\n\n  return selector;\n};", "import { getAttributeMapping, updateAttributes } from './attributes.js';\nimport element from './element.js';\n\nexport default selector => {\n  const instance = element(selector);\n  const idCache = new WeakMap();\n  const mappingCache = new WeakMap();\n  let renderedChildren = new Map();\n  let idCount = 1;\n  let templateChild;\n\n  return data => {\n    if (isDate(data)) {\n      throw new Error('Please convert date to string, ie. toISOString()');\n    }\n\n    if (isArray(data)) {\n      updateList(data);\n    } else {\n      if (isPrimitive(data)) {\n        updateText(instance, data);\n      } else if (isObject(data)) {\n        updateFromObject(instance, data);\n      }\n    }\n\n    function isDate(input) {\n      return input?.getTime !== undefined;\n    }\n\n    function isPrimitive(input) {\n      return !isArray(input) && !isObject(input);\n    }\n\n    function isObject(input) {\n      return !isArray(input) && input !== null && typeof input === 'object' && Object.keys(input).length;\n    }\n\n    function isArray(input) {\n      return Array.isArray(input);\n    }\n\n    function updateFromObject(element, data) {\n      Object.entries(data).forEach(([key, value]) => {\n        if (key.startsWith('$')) {\n          const name = key.slice(1);\n          if (element.shadowRoot) {\n            if (value === false) {\n              element.removeAttribute(name);\n            } else if (value === true) {\n              element.setAttribute(name, '');\n            } else {\n              element.setAttribute(name, value);\n            }\n          } else {\n            if (!mappingCache.has(element)) {\n              mappingCache.set(element, getAttributeMapping(element));\n            }\n            const attributeMapping = mappingCache.get(element);\n            updateAttributes({ name, value, attributeMapping, root: element });\n          }\n        } else {\n          updateText(element, value, key);\n        }\n      });\n    }\n\n    function updateText(element, value, name) {\n      if (element.localName === 'option') {\n        element.textContent = value;\n      } else if (\n        element.localName === 'tr' ||\n        element.localName === 'li' ||\n        (element.hasAttribute('child') && !element.shadowRoot)) {\n        if (element.hasAttribute('data-slot') && element.dataset.slot === name) {\n          element.textContent = value;\n        } else {\n          const match = element.querySelector(`[data-slot=\"${ name }\"]`);\n          if (match) {\n            match.textContent = value;\n          }\n        }\n      } else if (!name && element.textContent !== value) {\n        element.textContent = value;\n      } else {\n        let slot = element.querySelector(`[slot=\"${ name }\"]`);\n        if (!slot) {\n          slot = document.createElement('span');\n          slot.setAttribute('slot', name);\n          element.append(slot);\n        }\n\n        if (slot.textContent !== value) {\n          slot.textContent = value;\n        }\n      }\n    }\n\n    function updateList(records) {\n      const parent = getParent();\n\n      if (!templateChild) {\n        throw new Error(`Cannot update ${ selector }, cannot find child element`);\n      }\n\n      const newChildren = new Map();\n\n      records.forEach((record, index) => {\n        const id = getId(record, index);\n        let child = renderedChildren.get(id);\n\n        if (!child) {\n          child = templateChild.cloneNode(true);\n          parent.append(child);\n        }\n\n        if (child.cachedData !== record) {\n          if (isObject(record)) {\n            updateFromObject(child, record);\n          } else {\n            updateText(child, record);\n          }\n          child.cachedData = record;\n        }\n\n        newChildren.set(id, child);\n      });\n\n      renderedChildren.forEach((child, id) => {\n        if (!newChildren.has(id)) {\n          child.remove();\n        }\n      });\n\n      // Order children\n      let lastChild;\n      newChildren.forEach(child => {\n        if (child !== lastChild?.nextSibling) {\n          parent.insertBefore(child, lastChild ? lastChild.nextSibling : parent.firstChild);\n        }\n        lastChild = child;\n      });\n\n      renderedChildren = newChildren;\n\n      function getId(record, index) {\n        if (record && typeof record === 'object') {\n          if (!idCache.has(record)) {\n            idCache.set(record, idCount++);\n          }\n          return idCache.get(record);\n        }\n        return `p:${ record }:${ index }`;\n      };\n\n      function getParent() {\n        const topLevel = getTopLevel();\n        if (topLevel.localName === 'table') {\n          return process('tbody', 'tr');\n        } else if (topLevel.localName === 'ol') {\n          return process('ol', 'li');\n        } else if (topLevel.localName === 'ul') {\n          return process('ul', 'li');\n        } else if (topLevel.localName === 'select') {\n          return process('select', 'option');\n        } else if (topLevel.querySelector('[child]')) {\n          const parent = getParent(topLevel.querySelector('[child]')).parentElement;\n          setTemplateChild('[child]', parent);\n          if (parent.localName === 'slot' && parent.hasAttribute('name')) {\n            templateChild.slot = parent.getAttribute('name');\n          }\n          return parent.localName === 'slot' ? instance : parent;\n        }\n\n        throw new Error(`Could not find a parent to assign children to, valid\n          options are table, ul, ol, select or a structure with a child attribute`);\n\n        function process(parentName, childName) {\n          const parent = getParent(parentName);\n          setTemplateChild(childName, parent);\n          return parent;\n        }\n\n        function setTemplateChild(childName, parent) {\n          if (!templateChild) {\n            templateChild = parent.querySelector(childName).cloneNode(true);\n            parent.replaceChildren();\n          }\n        }\n\n        function getParent(parentName) {\n          if (parentName === topLevel.localName) {\n            return topLevel;\n          }\n          const parent = typeof parentName === 'string'\n            ? topLevel.querySelector(parentName) : parentName;\n          if (!parent) {\n            console.log({ topLevel, parentName });\n            throw new Error('Cannot find parent');\n          }\n          return parent;\n        }\n\n        function getTopLevel() {\n          if (instance.tagName.includes('-')) {\n            return [...instance.shadowRoot.children].find(child => {\n              return child.localName !== 'script' && child.localName !== 'style';\n            });\n          }\n          return instance;\n        }\n      }\n    }\n  };\n};", "import element from './element.js';\n\n// Too long and too short is only set when the actual input is changed, so we do it here\nexport default selector => {\n  const instance = element(selector);\n  if (instance.elementInternals) {\n    const element = instance.formElement;\n    const value = element.value;\n    const minlength = element.getAttribute('minlength');\n    const maxlength = element.getAttribute('maxlength');\n    const validity = {\n      valueMissing: element.validity.valueMissing,\n      typeMismatch: element.validity.typeMismatch,\n      patternMismatch: element.validity.patternMismatch,\n      rangeUnderflow: element.validity.rangeUnderflow,\n      rangeOverflow: element.validity.rangeOverflow,\n      stepMismatch: element.validity.stepMismatch,\n      badInput: element.validity.badInput,\n      customError: element.validity.customError,\n      tooShort: minlength ? value.length < parseInt(minlength) : false,\n      tooLong: maxlength ? value.length > parseInt(maxlength) : false,\n    };\n    instance.elementInternals.setFormValue(value);\n    instance.elementInternals.setValidity(validity, message(), element);\n\n    return instance.elementInternals;\n\n    function message() {\n      if (validity.tooShort) {\n        return `The text needs to be at least ${ minlength } characters long`;\n      } else if (validity.tooLong) {\n        return `The text needs to be at most ${ maxlength } characters long`;\n      } else if (element.validationMessage) {\n        return element.validationMessage;\n      }\n      return 'The value is invalid';\n    }\n  }\n};", "import element from './element.js';\n\nexport default (selector, callback) => {\n  const observer = new IntersectionObserver(entries => {\n    if (entries[0].isIntersecting) {\n      callback();\n      observer.disconnect();\n    }\n  });\n  observer.observe(element(selector));\n};", "import { getAttributeMapping, updateAttributes } from './attributes.js';\nimport update from './update.js';\nimport validate from './validate.js';\nimport onceVisible from './onceVisible.js';\n\nexport { initialize, update, validate, onceVisible };\n\nasync function initialize({ prefix = 'db', source = '/components' } = {}) {\n  const registerCache = new Set();\n  const fileCache = new Set();\n\n  if (typeof source !== 'string' || !Object.keys(source).length) {\n    throw new Error('source option needs to be a string or an object');\n  }\n\n  if (typeof prefix !== 'string' || prefix === '') {\n    throw new Error('prefix option needs to be a string of at least one character');\n  }\n\n  const inheritedStylesheets = getInheritedStylesheets();\n  inPage(document.querySelector('body'));\n  await fromFile(document.querySelector('body'));\n\n  function inPage(root, parentId) {\n    root.querySelectorAll('template').forEach(template => {\n      if (!template.id && parentId) {\n        template.id = `${ parentId }-child`;\n      }\n\n      if (!template.id) {\n        console.log(template, parentId);\n        throw new Error('<template> is missing a mandatory id field');\n      }\n\n      inPage(template.content, template.id);\n      const name = template.id;\n      register({ name, template });\n    });\n  }\n\n  function fromFile(root) {\n    const promises = [...root.querySelectorAll(':not(:defined)')]\n      .filter(element => {\n        const tagName = element.localName;\n        return element.nodeType === 1 && tagName.includes('-') && tagName.startsWith(prefix);\n      })\n      .map(async element => {\n        const name = element.localName;\n        if (!fileCache.has(name)) {\n          fileCache.add(name);\n          const html = await fetchFromFile(name);\n          const template = document.createElement('template');\n          template.content.append(...html.children);\n          const script = await copyScript(template);\n          await fromFile(template.content);\n          inPage(template.content, name);\n          register({ name, template, script });\n\n          function copyScript(template) {\n            const script = template.content.querySelector('script');\n            return new Promise(async resolve => {\n              if (script) {\n                const blob = new Blob([script.textContent], { type: 'text/javascript' });\n                const blobUrl = URL.createObjectURL(blob);\n                resolve((await import(blobUrl)).default);\n                URL.revokeObjectURL(blobUrl);\n              } else {\n                resolve({});\n              }\n            });\n          }\n        };\n\n        async function fetchFromFile(name) {\n          const fileName = name.split('-').slice(1).join('-');\n          const relativePath = typeof source === 'string'\n            ? `${ source }/${ fileName }.html` : source[fileName];\n          const response = await fetch(relativePath);\n          if (!response.ok) {\n            throw new Error(`Could not find component @ ${ relativePath }`);\n          }\n          const templateAsString = await response.text();\n          const document = new DOMParser().parseFromString(templateAsString, 'text/html');\n          return document.querySelector('body');\n        }\n      });\n\n    return Promise.all(promises);\n  }\n\n  function register({ name, template, script }) {\n    if (registerCache.has(name)) {\n      return;\n    }\n\n    registerCache.add(name);\n\n    const isFormControl = !!template.content.querySelector('input, select, textarea');\n    const attributeMapping = getAttributeMapping(template.content);\n\n    customElements.define(name, class extends HTMLElement {\n      static observedAttributes = Object.keys(attributeMapping);\n      static formAssociated = isFormControl;\n      #shadow = null;\n\n      constructor() {\n        super();\n\n        const clone = document.importNode(template.content, true);\n        this.#shadow = this.attachShadow({ mode: 'open' });\n        this.#shadow.adoptedStyleSheets = inheritedStylesheets;\n        this.#shadow.appendChild(clone);\n\n        if (isFormControl) {\n          this.elementInternals = this.attachInternals();\n          this.formElement = this.#shadow.querySelector('input, select, textarea');\n        }\n      }\n\n      connectedCallback() {\n        if (typeof script === 'function') {\n          script(this);\n        }\n      }\n\n      attributeChangedCallback(name, oldValue, newValue) {\n        if (oldValue !== newValue) {\n          updateAttributes({ name, value: newValue, attributeMapping, root: this.#shadow });\n        }\n      }\n    });\n  };\n\n  function getInheritedStylesheets() {\n    return Array.from(document.styleSheets)\n      .filter(sheet => sheet?.ownerNode?.dataset?.inherit === 'true')\n      .map(sheet => {\n        const newSheet = new CSSStyleSheet();\n        try {\n          const cssText = Array.from(sheet.cssRules).map(rule => rule.cssText).join('\\n');\n          newSheet.replaceSync(cssText);\n        } catch (error) {\n          error;\n          console.error('Permission denied for sheet:', sheet.href);\n        }\n        return newSheet;\n      });\n  }\n};\n"],
-  "mappings": "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",
-  "names": ["mapping", "getAttributeMapping", "element", "keyValue", "excludedAttributes", "excludedElements", "binary", "results", "traverse", "tagName", "key", "tagNames", "attribute", "name", "child", "updateAttributes", "value", "attributeMapping", "root", "type", "process", "element_default", "selector", "instance", "update_default", "selector", "instance", "element_default", "idCache", "mappingCache", "renderedChildren", "idCount", "templateChild", "data", "isDate", "isArray", "updateList", "isPrimitive", "updateText", "isObject", "updateFromObject", "input", "element", "key", "value", "name", "getAttributeMapping", "attributeMapping", "updateAttributes", "match", "slot", "records", "parent", "getParent", "newChildren", "record", "index", "id", "getId", "child", "lastChild", "topLevel", "getTopLevel", "process", "setTemplateChild", "parentName", "childName", "validate_default", "selector", "instance", "element_default", "message", "validity", "minlength", "maxlength", "element", "value", "onceVisible_default", "selector", "callback", "observer", "entries", "element_default", "initialize", "prefix", "source", "registerCache", "fileCache", "inheritedStylesheets", "getInheritedStylesheets", "inPage", "fromFile", "root", "parentId", "template", "name", "register", "promises", "element", "tagName", "copyScript", "script", "resolve", "blob", "blobUrl", "html", "fetchFromFile", "fileName", "relativePath", "response", "templateAsString", "isFormControl", "attributeMapping", "getAttributeMapping", "#shadow", "clone", "oldValue", "newValue", "updateAttributes", "sheet", "newSheet", "cssText", "rule", "error"]
-}