nbhi 0.6.0 → 0.6.2

package/README.md

@@ -2,25 +2,27 @@
 
 **HTML includes and reactive rendering, all without any build tools**
 
-d--b is a simple **4KB** 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.
+No-build HTML includes (NBHI) is a simple **3.9KB** 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 and attributes in your html pages. No build tools required, no `package.json` needed.
 
 # Why?
 
-d--b is developed to create real-time data driven web sites. It has lower complexity than typical SPA applications but still offers more interactivy and flexibility than server side rendered web sites. _It works well with serverless application and a pub/sub data model_.
+NBHI is developed to create real-time data driven web sites. It has lower complexity than typical SPA applications but still offers more interactivy and flexibility than server side rendered web sites. _It works well with serverless application and a pub/sub data model_.
 
-d--b is designed to be composable with other packages to build web sites. It takes the Lego approach, you select the packages for your needs, no lock-in into a single framework with a potential steep learning curve. d--b is build on standard browser supported technologies which means that you only need to read MDN as the source of knowledge.
+NBHI is designed to be composable with other packages to build web sites. It takes the Lego approach, you select the packages for your needs, no lock-in into a single framework with a potential steep learning curve. NBHI is build on standard browser supported technologies which means that you only need to read MDN as the source of knowledge.
 
-d--b minimizes abstractions, just standard HTML, CSS and Javascript. Migrating from a SPA to d--b's multi page application (MPA) approach should mean you can do this one page at the time not having to migrate your whole system at once and pray that everything keeps working.
+NBHI minimizes abstractions, just standard HTML, CSS and Javascript. Migrating from a SPA to NBHI's multi page application (MPA) approach should mean you can do this one page at the time not having to migrate your whole system at once and pray that everything keeps working.
 
 # Benefits
 
-- Buildless web applications (minification is still possible of course) 👍
-- Lightweight: **~4KB** 👍
+- No-build web applications (you can still make it a dependency via npm install) 👍
+- Lightweight: **~3.9KB** (minified and bundled) 👍
+- No dependencies 👍
 - Benefit from standard web component encapsulation 👍
 - Lazy load page content, when about to enter the viewport 👍
 - Just standard web technologies, little abstractions 👍
-- Composable with other packages
-- Support for web component form fields out of the box 👍
+- Simple single function to hydrate your html (including attributes) 👍
+- Support for form validation for web component based html fields 👍
+- Composable with other packages 👍
 - Multi Page Application (MPA) design
   - The standard method how the web communicates between server and client 👍
   - Normal native routing 👍
@@ -28,6 +30,23 @@ d--b minimizes abstractions, just standard HTML, CSS and Javascript. Migrating f
   - Each page loads what it needs and no more 👍
   - Fast initial draw 👍
 
+# Install
+
+For no-build solutions:
+
+```js
+<script type="module">
+  import { initialize } from 'https://esm.run/nbhi@x.x.x';
+  await initialize();
+</script>
+```
+
+For build solutions
+
+```cli
+npm install nbhi
+```
+
 # Examples
 
 Please look in the **examples.html** for working examples.
@@ -43,30 +62,34 @@ Templates let you build complex systems and reuse components accross multiple pa
 index.html
 
 ```html
-
 <html>
   <body>
     <my-component>Overwritten text</my-component>
 
     <script type="module">
-      import initialize from '/d--b.js';
-      await initialize(); // await if loading external templates
+      import initialize from '/NBHI.js';
+      await initialize(); // await if external templates
     </script>
   </body>
 </html>
-
 ```
 
-/components/my-component.html
+/components/component.html
 
 ```html
-
 <div>
   <slot>Default text</slot>
 </div>
 
 <style>/* Scoped to the web component */</style>
 
+<script>
+  // Runs for each instance, fires on the standard connectedCallback
+  // element is the web component instance
+  export default element => {
+    ...
+  }
+</script>
 ```
 
 ### Internal templates
@@ -74,9 +97,9 @@ index.html
 index.html
 
 ```html
-
 <html>
   <body>
+    <!-- id becomes the name of your web component -->
     <template id="my-component">
       <slot>Default</slot>
       <style>/* Scoped to the web component */</style>
@@ -85,180 +108,199 @@ index.html
     <my-component>Overwrite</my-component>
 
     <script type="module">
-      import initialize from '/d--b.js';
+      import initialize from '/NBHI.js';
       initialize(); // No await needed for internal templates
     </script>
   </body>
 </html>
-
 ```
 
-_Note: When you use an internal `<template>` you need to define an id, which will be the name of the tag._
-
 ## Options
 
 ```js
-
-/**
- * Options for initiating an instance
- * @param {string} [prefix=db]
- * @param {string} [source=/components]
- **/
-
-import initialize from 'd--b.js'
-initialize({
-  // Prefix to use, ie <db-input> or <db-nav>
-  prefix: 'db',
-  // Where to find external web components, if string it will be a director
-  // when using an object the key is the name (without prefix) of the component
-  // and the value the path to the web-component
-  directory: '/components',
-});
-
+initialize({ prefix = 'my', directory = '/components' }); // Defaults
 ```
 
-## Methods
-
-### .setSlot(value, [slotName], [htmlSelector])
-
 ```js
-/**
- * Update data in a <slot> tag
- * @param {string} value - What you want to assign to a <slot>
- * @param {string} [slotName] - If not given value is assigned to default <slot>
- * @param {string} [htmlSelector] - Target a html tag in a complex <slot>
- **/
+initialize({ prefix: 'x' }); // Components are now x-component
+```
 
-const element = document.querySelector('my-component');
+```js
+initialize({ components: '/abc' }); // Fetches files in /abc/component.html
+```
 
-// To default slot
-element.setSlot('Some text');
+```js
+// key = name of component (no prefix), value is path to file
+initialize({ components: {
+  nav: '/shared/nav.html',
+  dropdown: '/components/dropdown.html'
+} });
+```
 
-// To slot named title
-element.setSlot('Some text', 'title');
+## Update a single component (data and attributes)
 
-// To slot named title and withing the <em> tag
-element.setSlot('Some text', 'title', 'em');
+### Via HTML
 
+```html
+<!-- Instance -->
+<my-component checked data-id="1">
+  Text here will be assigned to the default slot
+  <span slot="title">Will be assigned to the named slot</span>
+</my-component>
+
+<!-- Component definition -->
+<section data-id=""> <!-- Data and custom attributes need to be defined so NBHI can resolve them -->
+  <input type="checkbox"> <!-- NBHI automatically maps common attributes, checked will be placed on the input -->
+  <slot>Default text</slot>
+  <slot name="title">Default title</slot>
+</section>
 ```
 
-### .setChildren(data, [wrapperTag])
+### Via JS
 
 ```js
-/**
- * Updates one or more records in the child template
- * @param {object|object[]} data - The data to use
- **/
+import { update } from 'nbhi';
 
-const element = document.querySelector('my-component');
-
-// Update a single child, with data-slot named "title"
-element.setChildren({ title: 'Some value' });
+const updater = update('my-component');
 
+updater('Text here will be assigned to the default slot');
+updater({ title: 'Will be assigned to the named slot' });
+updater({ $checked: true, `$data-id`: 1 }); // Atributes are prefixed with $
 ```
 
-_Note: Child templates always need to extend an existing tag, like `<tr>`, `<option>`, `<div>`, etc. This is because some parents like `<tbody>`, `<select>` will not render regular non extended web components._
+## Update a list (data and attributes)
 
-### .onceVisible(callback)
+### Inline child
 
-```js
-/**
- * Runs one time when the web component comes into view
- * @param {function} callback - Callback to run
- **/
-document.querySelector('my-component').onceVisible(element => {
-  subscribeToData('someCollection', data => element.setChildren(data));
-});
+/components/component.html
 
+```html
+<div>
+  <h1><slot>Header</slot></h1>
+  <div child> <!-- NBHI uses child attribute to make clones from -->
+    <p data-slot="name"></p> <!-- use data-slot for inline children -->
+  </div>
+</div>
 ```
 
-### .checkValidity() (Only if the webcomponent includes a form element)
-
-```js
-/**
- * Checks if the field is valid
- * @returns boolean
- **/
-document.querySelector('my-form-field').checkValidity();
+index.html
 
+```html
+<my-component>Header overwrite</my-component>
+
+<script>
+  import { initialize, update } from 'nbhi';
+  await initialize();
+  update('my-component')([
+    { name: 'Record 1' },
+    { name: 'Record 2' },
+  ]);
+</script>
 ```
 
-### .validity (Only if the webcomponent includes a form element)
+### Child component
 
-```js
-/**
- * Get the standard validity object
- * @returns ValidityState
- **/
-document.querySelector('my-form-field').validity;
+/components/component.html
 
+```html
+<div>
+  <h1><slot>Header</slot></h1>
+  <my-child child></my-child> <!-- NBHI uses child attribute to make clones from -->
+</div>
 ```
 
-### .validationMessage() (Only if the webcomponent includes a form element)
+/components/child.html
 
-```js
-/**
- * Gets the message for an invalid field, handy for bespoke themes
- * @returns string
- **/
-document.querySelector('my-form-field').validationMessage();
+```html
+<div>
+  <p><slot></slot></p> <!-- use regular slot for nested components -->
+</div>
+```
+
+index.html
 
+```html
+<my-component>Header overwrite</my-component>
+
+<script>
+  import { initialize, update } from 'nbhi';
+  await initialize();
+  update('my-component')(['Record 1', 'Record 2']);
+</script>
 ```
 
-### Attributes
+### List data for `<table>, <ol>, <li> and <option>`
 
-It is possible to set attributes on a web component instance tag like `<my-component>` and they will automatically be assigned to the correct nodes in the underlying `<template>`. Any changes you make to the `<my-component>` attributes will automatically update the underlying component data.
+These elements do not support web component children. So for these you can just define the following
 
 index.html
 
 ```html
+<template id="my-table">
+  <table>
+    <thead>
+      <tr>
+        <th>Header</th>
+      </tr>
+    </thead>
+    <tbody> <!-- Required -->
+      <tr> <!-- No need for child attribute -->
+        <td data-slot="name"></td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+index.html
 
-<my-email data-id="1" value="me@me.com" readonly>User Email</my-email>
+<my-table></my-table>
 
+<script>
+  import { initialize, update } from 'nbhi';
+  await initialize();
+  update('my-table')([
+    { name: 'Record 1' },
+    { name: 'Record 2' },
+  ]);
+</script>
 ```
 
-my-component.html
+Same logic for `<ol>`, `<ul>` and `<option>`
 
-```html
-<!--
-  Custom attributes like data-id need to be defined in the template, otherwise
-  d--b does not know where to assign the value
--->
-<label data-id="">
-  <slot></slot>
-  <!-- d--b knows to add value and read only to the input field --->
-  <input type="email" placeholder="email">
-</div>
+## Lazy loading
+
+```js
+import { onceVisible } form 'nbhi';
 
+onceVisible('my-component', element => ...); // Will run once when it comes into view (200px before)
 ```
 
+## Validating a form field
+
 ```js
+import { validate } form 'nbhi';
 
-// Calling from JS is also easier, you don't need to find the shadowRoot
-const element = document.querySelector('my-component')
-element.setAttribute('value', 'Some value');
-element.disabled = true;
+const internals = validate('my-form-field'); // Returns elementInternals
 
+// See MDN for details
+internals.checkValidity();
+internals.validity;
 ```
 
-_Note: If there are multiple elements that can have an attribute that has been defined on the component instance it will assign it to all instances. You can assign attributes to the `<template>` tag but only if it extends an existing tag_
-
-# FAQ
-
-### How to pronounce d--b?
-However you like.
+## FAQ
 
 ### No build steps is nice, but I want to use TypeScript
+
 If you want to use TS you have a couple of options. You can either add a build step, nothing is stopping you, the library supports it. If you want to stay buildless but want to add some sort of type checking and hinting you can consider using JSDoc, it is [supported](https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html#author) in TS as well.
 
 ### Creating interactivity is verbose with native js DOM manipulation
-d--b is not designed to be a single solution for everything, if you want to make DOM manipulation for interactivity easier I would suggest using dedicated libraries for that. You can consider [Alpine.js](https://alpinejs.dev/) or [Umbrella.js](https://umbrellajs.com/) for example. d--b is designed with composibility in mind so you decide what to add.
 
-### External npm packages require me the add build steps again
-You could load them from a CDN if you want to stay 100% buildless, otherwise you could just add a simple minifier and bundler. This will stay very lightweight but probably is more suitable for production environments.
+NBHI is not designed to be a single solution for everything, if you want to make DOM manipulation for interactivity easier I would suggest using dedicated libraries for that. You can consider [Alpine.js](https://alpinejs.dev/) or [Umbrella.js](https://umbrellajs.com/) for example. NBHI is designed with composibility in mind so you decide what to add.
 
 ### Anybody using web component technology?
+
 Just check out the source code of github.com or youtube.com.
 
 ### We are a team of multiple developers, using a framework ensures we write similar code
-You are correct, when you choose a more opinionated framework it will most likely give more cohesive code overall when you work with multiple developers. However it also gives you lock-in. It is a trade-off that you have to make, depending on the team size and how agile your codebase needs to remain.
+
+You are correct, when you choose a more opinionated framework it will most likely give more cohesive code overall when you work with multiple developers. However it also gives you lock-in. It is a trade-off that you have to make, depending on the team size and how agile your codebase needs to remain.

package/index.min.js

@@ -1,3 +1,4 @@
 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

@@ -0,0 +1,7 @@
+{
+  "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"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nbhi",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "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",
@@ -13,16 +13,17 @@
     "multi-page-application",
     "composable"
   ],
-  "homepage": "https://github.com/royniels/d--b#readme",
+  "homepage": "https://github.com/royniels/nbhi#readme",
   "bugs": {
-    "url": "https://github.com/royniels/d--b/issues"
+    "url": "https://github.com/royniels/nbhi/issues"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/royniels/d--b.git"
+    "url": "git+https://github.com/royniels/nbhi.git"
   },
   "files": [
-    "./index.min.js"
+    "./index.min.js",
+    "./index.min.js.map"
   ],
   "exports": {
     ".": "./index.min.js"
@@ -32,6 +33,6 @@
   "type": "module",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "npx esbuild ./javascript/index.js --minify --bundle --format=esm --outfile=index.min.js"
+    "build": "npx esbuild ./javascript/index.js --minify --bundle --format=esm --sourcemap --outfile=index.min.js"
   }
 }