@twobirds/microcomponents 0.1.19 → 0.1.21

package/dist/microcomponents.min.js

@@ -0,0 +1 @@
+var t={d:(e,n)=>{for(var r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};function n(){return!!window}function r(t){return t&&t.constructor&&t.constructor===Object}function s(t){let e={};return[...Object.keys(t)].sort().forEach((n=>{r(t[n])?e[n]=s(t[n]):e[n]=t[n]})),e}function a(t,e=!0){let n={};return[...Object.getOwnPropertyNames(t)].forEach((e=>{if(t[e]instanceof Object){const r=a(t[e],!1);n[e]={};for(const t in r)n[e+"."+t]=r[t]}else n[e]=t[e]})),e?s(n):n}function c(t,e){return JSON.stringify(a(t))===JSON.stringify(a(e))}function o(t,e={}){let n=t.constructor===String?t.split("."):t;if(e&&n[0]&&e[n[0]])return e[n[0]].constructor===Object&&n.length>1?o(n.splice(1),e[n[0]]):e[n[0]];console.warn("ns",n[0],"not in",e)}function i(t,e){var n=Array.from(arguments);if(n.length>2){for(;n.length>1;)n[0]=i(n[0],n[1]),n.splice(1,1);return n[0]}if("string"==typeof t)t.match(/\{[^\{\}]*\}/g)?.forEach((function(n){var r=o(n.substring(1,n.length-1),e);void 0!==r&&(t=t.replace(n,r))}));else if(r(t))switch(t.constructor){case Object:Object.keys(t).forEach((function(n){t.hasOwnProperty(n)&&(t[n]=i(t[n],e))}));break;case Array:t.forEach((function(n,r,s){s[r]=i(t[r],e)}))}return t}function l(t){return t.split("-").map((t=>t.charAt(0).toUpperCase()+t.slice(1))).join("")}function u(t,e){let n;return()=>{clearTimeout(n),n=setTimeout((function(){t(...arguments)}),e)}}function d(t){let e=document.createElement("template");return t=t.replace(/<([A-Za-z0-9\-]*)([^>\/]*)(\/>)/gi,"<$1$2></$1>"),e.innerHTML=t,e.content.normalize(),Array.from(e.content.childNodes)}function f(t,e){const n=Object.getOwnPropertyDescriptors(t);for(const[t,r]of Object.entries(n))("get"in r||"set"in r)&&Object.defineProperty(e,t,r)}function h(t){return"_mc"+t[0].toUpperCase()+t.substring(1)}function m(t,e,n,r=!1){return t.addEventListener(h(e),n,{capture:!1,once:r}),n}t.d(e,{DC:()=>O,MC:()=>v,Oc:()=>E,E_:()=>_,IT:()=>f,sg:()=>u,bD:()=>c,c2:()=>S,YO:()=>a,Rc:()=>F,tn:()=>N,qS:()=>d,Bd:()=>n,nz:()=>r,TK:()=>l,k5:()=>o,lB:()=>P,qg:()=>i,mf:()=>s});class p{stopped=!1;constructor(){}stop(){this.stopped=!0}}function b(t,e,n={},r="l",s){const a=/^_mc/.test(e)?e:h(e),c=s||new p,o=new CustomEvent(a,{detail:{data:n,control:c},bubbles:!1});c.stopped||/l/.test(r)&&(t.dispatchEvent(o),o.stopImmediatePropagation(),c.stopped)||/[ud]/.test(r)&&(-1===r.indexOf("l")&&(r+="l"),setTimeout((()=>{if(r.indexOf("u")>-1){let e=t.parentElement?.closest("[data-mc]");e&&e?._mc.trigger(a,n,r,c)}if(r.indexOf("d")>-1){let e=t._mc.children();e&&e.forEach((t=>t.trigger(a,n,r)))}}),0))}const g=new Function("try {return this===window;}catch(e){ return false;}");function y(t){return t&&t instanceof HTMLElement}class E{_target;constructor(t){var e;this._target=new WeakRef(t||{}),function(t){if(!g()||t.constructor===O)return;const e=t.target;if(e instanceof HTMLElement){let n=t;Object.getOwnPropertyNames(n.constructor.prototype).filter((t=>/^(on[A-Z]|one[A-Z])/.test(t)&&"function"==typeof n.constructor.prototype[t])).forEach((t=>{let r=/^one/.test(t),s=t.replace(/^on[e]{0,1}/,""),a=s.toLowerCase();if("on"+a in e){let r=e=>{n[t](e)};e.addEventListener(a,r)}else m(e,s,(e=>{n[t](e)}),r)}))}}(this),e=this,setTimeout((()=>{e.constructor!==O&&e.trigger("Init")}),0)}get target(){return this._target.deref()}}class v extends E{constructor(t){super(t)}}class O extends E{constructor(t){super(t)}static add(t,e,n={}){return function(t,e,n={}){let r=t;r._mc||(r._mc=new O(t));const s=r._mc;return e.length&&!s[e]&&(s[e]=n,t instanceof HTMLElement&&!t.getAttribute("data-mc")&&t.setAttribute("data-mc","")),r}(t,e,n)}static remove(t,e){!function(t,e){if(!e)return;const n=t?._mc||{};n&&n[e]&&delete n[e],!Object.keys(n).length&&t instanceof HTMLElement&&t.hasAttribute("data-mc")&&t.removeAttribute("data-mc")}(t,e)}off(t,e){!function(t,e,n){t.removeEventListener(h(e),n)}(this.target,t,e)}on(t,e){return m(this.target,t,e)}one(t,e){return function(t,e,n){return m(t,e,n,!0),n}(this.target,t,e)}trigger(t,e={},n="l",r){b(this.target,t,e,n,r)}ancestors(){let t=this?.target,e=[];if(!y(t))return[];for(;t=t.closest("[data-mc]");)t?._mc&&e.push(t?._mc);return e.length?e:null}closest(){let t=this.target;return y(t)&&t.closest("[data-mc]")?._mc||null}children(){let t=this?.target;return y(t)?function(t){const e=Math.random().toString().replace(".",""),n='[data-mc]:not([temp_id="'+e+'"] [data-mc] [data-mc])';t.setAttribute("temp_id",e);const r=[...t.querySelectorAll(n)].filter((t=>!!t._mc)).map((t=>t._mc));return t.removeAttribute("temp_id"),r.length?r:null}(t):null}descendants(){const t=this?.target;if(!y(t))return[];const e=[...t.querySelectorAll("[data-mc]")].filter((t=>!!t._mc)).map((t=>t._mc));return e.length?e:null}}const w=new Set;function A(t){return()=>{const e=Array.from(document.querySelectorAll(`[data-mc*="${t}"]`)).filter((t=>t instanceof HTMLElement));if(0===e.length)return;const n=customElements.get(t);e.forEach((e=>{try{O.add(e,n.name,new n(e))}catch(t){if(!n.create)throw`Class ${n.name} doesn't have a callable constructor AND class doesn't have a static .create() method.`;{let t=n.create(e);t.setAttribute("data-mc",e.getAttribute("data-mc")),e.replaceWith(t),e=t}}const r=e.getAttribute("data-mc").split(" ").filter((e=>e!==t&&""!==e)).join(" ").trim();e.setAttribute("data-mc",r)}))}}function C(t){if(w.has(t))return;w.add(t);const e="./"+t.split("-").join("/")+".js",n=document.createElement("script");n.setAttribute("src",e),n.setAttribute("blocking","render"),n.async=!0,n.setAttribute("type","module"),n.setAttribute("data-name",t),n.setAttribute("loading",""),customElements.whenDefined(t).then(A(t)),n.addEventListener("load",(e=>{w.delete(t),document.head.querySelector(`script[data-name="${t}"]`)?.remove()})),n.addEventListener("error",(t=>{console.error("could not load DC code from",e)})),document.head.append(n)}function k(){[...document.querySelectorAll(":not(:defined)")].filter((t=>!!t&&!customElements.get(t.tagName.toLowerCase())&&!w.has(t.tagName.toLowerCase()))).forEach((t=>{C(t.tagName.toLowerCase())})),[...document.querySelectorAll('[data-mc]:not([data-mc=""]')].filter((t=>!!t)).forEach((t=>{const e=t.getAttribute("data-mc")?.split(" ").filter((t=>""!==t));e?.forEach((t=>{const e=customElements.get(t);w.has(t)||e?e&&A(t)():C(t)}))}))}let j=null;function _(t=!0){return t?(j||(j=new MutationObserver(k),setTimeout((()=>{j.observe(document.body,{childList:!0,subtree:!0}),k()}),5),window.autoload=window.autoload||_),!0):(j&&(j.disconnect(),j=null),!1)}function S(t,e,n=[]){if(customElements.get(t))return void console.warn(`IGNORED: Custom element "${t}" is already defined!`);if(!t.includes("-"))throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');let r=l(t);e.prototype instanceof E?customElements.define(t,function(t,e){return Object.defineProperty(e,"name",{value:t})}(r,class extends HTMLElement{constructor(t){super(),O.add(this,r,new e(this,t))}connectedCallback(){this.dispatchEvent(new CustomEvent("_mcConnected"))}connectedMoveCallback(){this.dispatchEvent(new CustomEvent("_mcConnectedMove"))}disconnectedCallback(){this.dispatchEvent(new CustomEvent("_mcDisconnected"))}adoptedCallback(){this.dispatchEvent(new CustomEvent("_mcAdopted"))}attributeChangedCallback(t,e,n){this.dispatchEvent(new CustomEvent("_mcAttributeChanged",{detail:{name:t,oldValue:e,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent("_mcFormReset"))}static get observedAttributes(){return n}})):customElements.define(t,e)}function N(t){return customElements.get(t)}function T(t){return null!=t&&"object"==typeof t}function L(t){let e=new Set,n=/\{[^\{\}]*\}/g;return(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(n))).forEach((r=>{new Set(t.getAttribute(r)?.match(n)).forEach((t=>e.add(t.replace(/[\{\}]/g,""))))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(n))).forEach((t=>{(t?.nodeValue||"").match(n).forEach((t=>e.add(t.replace(/[\{\}]/g,""))))})),[...e]}_.state=w;const D=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class x extends O{data={};oldDisplay="";constructor(t){super(t),L(t).forEach((t=>this.data[t]="")),P(this),this.#t()}#t(){let t=this.target,e=!1;(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(/\{[^\{\}]*\}/g))).forEach((e=>{let n=new Set(t.getAttribute(e)?.match(/\{[^\{\}]*\}/g));var r;this.data.subscribe((r=t.getAttribute(e),s=>{let a=r;n.forEach((t=>{a=a.replace(t,s[t.replace(/[\{\}]/g,"")])})),t.setAttribute(e,a)}))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((n=>{e=!0;let r=new Set(n.nodeValue.match(/\{[^\{\}]*\}/g));this.data.subscribe((e=>s=>{let a=e;r.forEach((t=>{a=a.replace(t,s[t.replace(/[\{\}]/g,"")])})),this.oldDisplay?t.style=this.oldDisplay:t.removeAttribute("style"),delete this.oldDisplay,n.nodeValue=a})(n.nodeValue)),this.oldDisplay=t.getAttribute("style")||"",e&&!D.includes(t.constructor)&&"FIELDSET"!==t.tagName&&(t.style.display="none")}))}onData(t){let e={};Object.keys(t.detail.data).forEach((n=>{this.data.hasOwnProperty(n)&&(e[n]=t.detail.data[n])})),JSON.stringify(e)!==JSON.stringify(this.data)&&Object.assign(this.data,e)}}const M={};function q(t){let e=t.constructor.name;return M[e]||function(t){const e=t.constructor,n=e.name;let r=class extends e{#e=!0;#n=[];constructor(t){super(t),this.constructor.callbacks=[],T(t)&&Object.getOwnPropertyNames(t).forEach((e=>{this[e]=t[e]}))}get callbacks(){return this.#n}set callbacks(t){this.#n=t}subscribe(t){return this.#n.push(t),this}bind(t){if(T(this.valueOf())){!function(t){var e;(e=t,[e].concat([...e.querySelectorAll("*")]).filter((t=>!!L(t).length)).filter((t=>"STYLE"!==t?.tagName)).reverse()).forEach((t=>{t?._mc?._placeholders||O.add(t,"_placeholders",new x(t))}))}(t);const e=[t,...t.querySelectorAll("[data-mc]")].filter((t=>!!t?._mc?._placeholders)),n=function(t){let n=a(t);e.forEach((t=>{t&&b(t,"data",n)}))};this.#n.push(n),this.notify()}else console.warn("IGNORED - cannot bind a non-Object to the dom, IS:",typeof this.valueOf(),this);return this}notify(t){let e=T(this.valueOf())&&this.valueOf()instanceof Array==0?structuredClone(Object.assign({},this)):this.valueOf();return void 0!==t&&(this.#e=t),this.#e&&this.#n.forEach((t=>{t(e)})),this}};return M[n]=r,r}(t)}const P=(t,e)=>((e?[e]:[...Object.getOwnPropertyNames(t)]).forEach((e=>{if(t.hasOwnProperty(e)&&"function"!=typeof t[e]&&!t?.[e]?.constructor?.prototype?.subscribe){if("_"===e[0]||void 0===t?.[e])return t;let n=t[e],r=new(q(n))(n),s=u((function(){r.notify()}),0);Object.defineProperty(t,e,{enumerable:!0,get(){if(T(r.valueOf())){let t=structuredClone(Object.assign({},r));setTimeout((function(){c(structuredClone(Object.assign({},r)),t)||s()}),0)}return r},set(t){if(typeof t==typeof r.valueOf())if(T(r.valueOf())&&r.valueOf()instanceof Array==0)void 0===r?.constructor?.prototype?.subscribe&&(r=new(q(t))(structuredClone(Object.assign({},t))),f(t,r)),Object.assign(r,t),r.notify();else{let e=r.valueOf(),n=r.callbacks;t!==e&&(r=new(q(t))(t),r.callbacks=n,s())}else console.warn("IGNORED - cannot change observable types, IS:",typeof r.valueOf(),r,"- CANNOT BECOME:",typeof t)}}),t[e]=n}})),t);class I{constructor(t){}}class H extends I{#r;constructor(t){super(t),this.#r=t}get val(){return new FormData(this.#r.form).get(this.#r.name)}set val(t){[...this.#r.form.querySelectorAll(`input[type="radio"][name="${this.#r.name}"]`)].filter((e=>e.getAttribute("value")===t)).shift().checked=!0}}class V extends I{#r;constructor(t){super(t),this.#r=t}get val(){return this.#r.checked}set val(t){this.#r.checked=t}}class R extends I{#r;constructor(t){super(t),this.#r=t}get val(){return this.#r.value}set val(t){this.#r.value=t}}class $ extends I{#r;#s=!1;constructor(t){super(t),this.#r=t,this.#s=t.multiple}get val(){const t=[];return[...this.#r.querySelectorAll("option")].filter((t=>t.selected)).forEach((e=>{t.push(e.value)})),this.#s?t:t.length?t[0]:""}set val(t){t="string"==typeof t?[t]:t,[...this.#r.querySelectorAll("option")].forEach((e=>{t.indexOf(e.value)>-1?e.selected=!0:e.selected=!1}))}}class B extends I{#r;constructor(t){super(t),this.#r=t}get val(){return this.#r.value||""}set val(t){this.#r.value=t}}const z=t=>{let e=[...(t||document).querySelectorAll("input,select,textarea")],n={};return e.forEach((t=>{const e=t.getAttribute("name");if(e){let r=!1;switch((t=>t.tagName.toLowerCase())(t)){case"input":switch(t.type){case"radio":r=new H(t);break;case"checkbox":r=new V(t);break;default:r=new R(t)}break;case"select":r=new $(t);break;case"textarea":r=new B(t);break;default:console.warn("handler missing:",e,"for",t.tagName.toLowerCase(),t)}r&&(O.add(t,e,r),Object.defineProperty(n,e,{enumerable:!0,configurable:!0,get:()=>r.val,set:t=>{r.val!==t&&(r.val=t)}}))}})),n};function F(t,e,n){let r=z(n);t[e]=Object.assign({},r),P(t,e),f(r,t[e]),[...n.querySelectorAll("input, textarea, select")].forEach((n=>{n.addEventListener("input",(n=>{t[e].notify()}))}))}var G=e.DC,J=e.MC,Y=e.Oc,Z=e.E_,K=e.IT,U=e.sg,W=e.bD,Q=e.c2,X=e.YO,tt=e.Rc,et=e.tn,nt=e.qS,rt=e.Bd,st=e.nz,at=e.TK,ct=e.k5,ot=e.lB,it=e.qg,lt=e.mf;export{G as DC,J as MC,Y as McBase,Z as autoload,K as copyGettersSetters,U as debounce,W as deepEqual,Q as defineCE,X as flattenObject,tt as formValues,et as getCE,nt as htmlToElements,rt as isBrowser,st as isNativeObject,at as kebabToPascal,ct as nameSpace,ot as observe,it as parse,lt as sortObject};

package/dist/observables.d.ts

@@ -0,0 +1,11 @@
+import { LooseObject } from './helpers.js';
+type Callback = (value: any) => void;
+export type Observable = {
+    subscribe: (cb: Callback) => void;
+    notify: () => void;
+    bind: (target: HTMLElement | DocumentFragment | ShadowRoot) => void;
+    callbacks: Array<Function>;
+};
+export declare const observe: (target: LooseObject, propertyName?: string) => LooseObject;
+export {};
+//# sourceMappingURL=observables.d.ts.map

package/dist/observables.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"observables.d.ts","sourceRoot":"","sources":["../src/observables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA0D,MAAM,cAAc,CAAC;AAcnG,KAAK,QAAQ,GAAG,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;AA0MrC,MAAM,MAAM,UAAU,GAAG;IACxB,SAAS,EAAE,CAAC,EAAE,EAAE,QAAQ,KAAK,IAAI,CAAC;IAClC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,IAAI,EAAE,CAAC,MAAM,EAAE,WAAW,GAAG,gBAAgB,GAAG,UAAU,KAAK,IAAI,CAAC;IACpE,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;CAC3B,CAAC;AAwJF,eAAO,MAAM,OAAO,WAAY,WAAW,iBAAiB,MAAM,KAAG,WA2EpE,CAAC"}

package/dist/observables.js

@@ -0,0 +1,228 @@
+import { flattenObject, debounce, deepEqual, copyGettersSetters } from './helpers.js';
+import { DC } from './MC.js';
+import { trigger } from './events.js';
+function isObservableObject(value) {
+    return value != null && typeof value === 'object';
+}
+function getPlaceholders(target) {
+    let placeholders = new Set(), regEx = /\{[^\{\}]*\}/g;
+    (target.getAttributeNames ? target.getAttributeNames() : [])
+        .filter((attr) => target.getAttribute(attr)?.match(regEx))
+        .forEach((attr) => {
+        let attrPlaceholders = new Set(target.getAttribute(attr)?.match(regEx));
+        attrPlaceholders.forEach((attrPlaceholder) => placeholders.add(attrPlaceholder.replace(/[\{\}]/g, '')));
+    });
+    [...target.childNodes]
+        .filter((childNode) => {
+        return (childNode.nodeType === 3 && (childNode.nodeValue || '').match(regEx));
+    })
+        .forEach((childNode) => {
+        let textContent = childNode?.nodeValue || '';
+        let contentPlaceholders = textContent.match(regEx);
+        contentPlaceholders.forEach((textNodePlaceholder) => placeholders.add(textNodePlaceholder.replace(/[\{\}]/g, '')));
+    });
+    return [...placeholders];
+}
+const inputs = [HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement];
+class Placeholders extends DC {
+    data = {};
+    oldDisplay = '';
+    constructor(target) {
+        super(target);
+        getPlaceholders(target).forEach((property) => (this.data[property] = ''));
+        observe(this);
+        this.#attachCallbacks();
+    }
+    #attachCallbacks() {
+        let target = this.target, hide = false;
+        (target.getAttributeNames ? target.getAttributeNames() : [])
+            .filter((attr) => target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g))
+            .forEach((attr) => {
+            let placeholders = new Set(target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g));
+            this.data.subscribe(((template) => (data) => {
+                let result = template;
+                placeholders.forEach((placeholder) => {
+                    result = result.replace(placeholder, data[placeholder.replace(/[\{\}]/g, '')]);
+                });
+                target.setAttribute(attr, result);
+            })(target.getAttribute(attr)));
+        });
+        [...target.childNodes]
+            .filter((childNode) => {
+            return (childNode.nodeType === 3 && (childNode.nodeValue || '').match(/\{[^\{\}]*\}/g));
+        })
+            .forEach((childNode) => {
+            hide = true;
+            let placeholders = new Set(childNode.nodeValue.match(/\{[^\{\}]*\}/g));
+            this.data.subscribe(((template) => (data) => {
+                let result = template;
+                placeholders.forEach((placeholder) => {
+                    result = result.replace(placeholder, data[placeholder.replace(/[\{\}]/g, '')]);
+                });
+                if (this.oldDisplay) {
+                    target.style = this.oldDisplay;
+                }
+                else {
+                    target.removeAttribute('style');
+                }
+                delete this.oldDisplay;
+                childNode.nodeValue = result;
+            })(childNode.nodeValue));
+            this.oldDisplay = target.getAttribute('style') || '';
+            if (hide &&
+                !inputs.includes(target.constructor) &&
+                target.tagName !== 'FIELDSET') {
+                target.style.display = 'none';
+            }
+        });
+    }
+    onData(ev) {
+        let data = {};
+        Object.keys(ev.detail.data).forEach((key) => {
+            if (this.data.hasOwnProperty(key))
+                data[key] = ev.detail.data[key];
+        });
+        if (JSON.stringify(data) !== JSON.stringify(this.data))
+            Object.assign(this.data, data);
+    }
+}
+function getPlaceholderElements(target) {
+    let elements = [target]
+        .concat([...target.querySelectorAll('*')])
+        .filter((e) => !!getPlaceholders(e).length)
+        .filter((e) => e?.tagName !== 'STYLE')
+        .reverse();
+    return elements;
+}
+function makePlaceholders(element) {
+    getPlaceholderElements(element).forEach((e) => {
+        if (e?._mc?._placeholders)
+            return;
+        DC.add(e, '_placeholders', new Placeholders(e));
+    });
+}
+const classRepo = {};
+function makeObservable(val) {
+    const Constructor = val.constructor, ConstructorName = Constructor.name;
+    let ObservableClass = class extends Constructor {
+        #notify = true;
+        #callbacks = [];
+        constructor(val) {
+            super(val);
+            this.constructor.callbacks = [];
+            if (isObservableObject(val)) {
+                Object.getOwnPropertyNames(val).forEach((key) => {
+                    this[key] = val[key];
+                });
+            }
+        }
+        get callbacks() {
+            return this.#callbacks;
+        }
+        set callbacks(callbacks) {
+            this.#callbacks = callbacks;
+        }
+        subscribe(callback) {
+            this.#callbacks.push(callback);
+            return this;
+        }
+        bind(target) {
+            const iso = isObservableObject(this.valueOf());
+            if (iso) {
+                makePlaceholders(target);
+                const placeholders = [target, ...target.querySelectorAll('[data-mc]')].filter((e) => !!e?._mc?._placeholders);
+                const func = function callback(data) {
+                    let flattenedData = flattenObject(data);
+                    placeholders.forEach((node) => {
+                        if (!node)
+                            return;
+                        trigger(node, 'data', flattenedData);
+                    });
+                };
+                this.#callbacks.push(func);
+                this.notify();
+            }
+            else {
+                console.warn('IGNORED - cannot bind a non-Object to the dom, IS:', typeof this.valueOf(), this);
+            }
+            return this;
+        }
+        notify(notify) {
+            let data = isObservableObject(this.valueOf()) && this.valueOf() instanceof Array === false
+                ? structuredClone(Object.assign({}, this))
+                : this.valueOf();
+            if (notify !== undefined) {
+                this.#notify = notify;
+            }
+            if (this.#notify) {
+                this.#callbacks.forEach((f) => {
+                    f(data);
+                });
+            }
+            return this;
+        }
+    };
+    classRepo[ConstructorName] = ObservableClass;
+    return ObservableClass;
+}
+function getConstructor(val) {
+    let key = val.constructor.name;
+    return classRepo[key] || makeObservable(val);
+}
+export const observe = (target, propertyName) => {
+    let keys = !propertyName ? [...Object.getOwnPropertyNames(target)] : [propertyName];
+    keys.forEach((key) => {
+        if (target.hasOwnProperty(key) &&
+            typeof target[key] !== 'function' &&
+            !target?.[key]?.constructor?.prototype?.subscribe) {
+            if (key[0] === '_' || target?.[key] === undefined)
+                return target;
+            let val = target[key];
+            let o = new (getConstructor(val))(val);
+            let debouncedNotify = debounce(function debouncedNotify() {
+                o.notify();
+            }, 0);
+            Object.defineProperty(target, key, {
+                enumerable: true,
+                get() {
+                    if (isObservableObject(o.valueOf())) {
+                        let check = structuredClone(Object.assign({}, o));
+                        setTimeout(function checkChanges() {
+                            let state = structuredClone(Object.assign({}, o));
+                            if (!deepEqual(state, check)) {
+                                debouncedNotify();
+                            }
+                        }, 0);
+                    }
+                    return o;
+                },
+                set(val) {
+                    if (typeof val === typeof o.valueOf()) {
+                        let iso = isObservableObject(o.valueOf()) && o.valueOf() instanceof Array === false;
+                        if (iso) {
+                            if (o?.constructor?.prototype?.subscribe === undefined) {
+                                o = new (getConstructor(val))(structuredClone(Object.assign({}, val)));
+                                copyGettersSetters(val, o);
+                            }
+                            Object.assign(o, val);
+                            o.notify();
+                        }
+                        else {
+                            let old = o.valueOf(), callbacks = o.callbacks;
+                            if (val !== old) {
+                                o = new (getConstructor(val))(val);
+                                o.callbacks = callbacks;
+                                debouncedNotify();
+                            }
+                        }
+                    }
+                    else {
+                        console.warn('IGNORED - cannot change observable types, IS:', typeof o.valueOf(), o, '- CANNOT BECOME:', typeof val);
+                    }
+                },
+            });
+            target[key] = val;
+        }
+    });
+    return target;
+};

package/dist/observables.min.js

@@ -0,0 +1 @@
+var t={d:(e,r)=>{for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};function r(t){let e={};return[...Object.keys(t)].sort().forEach((n=>{var c;(c=t[n])&&c.constructor&&c.constructor===Object?e[n]=r(t[n]):e[n]=t[n]})),e}function n(t,e=!0){let c={};return[...Object.getOwnPropertyNames(t)].forEach((e=>{if(t[e]instanceof Object){const r=n(t[e],!1);c[e]={};for(const t in r)c[e+"."+t]=r[t]}else c[e]=t[e]})),e?r(c):c}function c(t){return"_mc"+t[0].toUpperCase()+t.substring(1)}function s(t,e,r,n=!1){return t.addEventListener(c(e),r,{capture:!1,once:n}),r}t.d(e,{l:()=>y});class a{stopped=!1;constructor(){}stop(){this.stopped=!0}}function o(t,e,r={},n="l",s){const o=/^_mc/.test(e)?e:c(e),i=s||new a,l=new CustomEvent(o,{detail:{data:r,control:i},bubbles:!1});i.stopped||/l/.test(n)&&(t.dispatchEvent(l),l.stopImmediatePropagation(),i.stopped)||/[ud]/.test(n)&&(-1===n.indexOf("l")&&(n+="l"),setTimeout((()=>{if(n.indexOf("u")>-1){let e=t.parentElement?.closest("[data-mc]");e&&e?._mc.trigger(o,r,n,i)}if(n.indexOf("d")>-1){let e=t._mc.children();e&&e.forEach((t=>t.trigger(o,r,n)))}}),0))}const i=new Function("try {return this===window;}catch(e){ return false;}");function l(t){return t&&t instanceof HTMLElement}class u{_target;constructor(t){var e;this._target=new WeakRef(t||{}),function(t){if(!i()||t.constructor===f)return;const e=t.target;if(e instanceof HTMLElement){let r=t;Object.getOwnPropertyNames(r.constructor.prototype).filter((t=>/^(on[A-Z]|one[A-Z])/.test(t)&&"function"==typeof r.constructor.prototype[t])).forEach((t=>{let n=/^one/.test(t),c=t.replace(/^on[e]{0,1}/,""),a=c.toLowerCase();if("on"+a in e){let n=e=>{r[t](e)};e.addEventListener(a,n)}else s(e,c,(e=>{r[t](e)}),n)}))}}(this),e=this,setTimeout((()=>{e.constructor!==f&&e.trigger("Init")}),0)}get target(){return this._target.deref()}}class f extends u{constructor(t){super(t)}static add(t,e,r={}){return function(t,e,r={}){let n=t;n._mc||(n._mc=new f(t));const c=n._mc;return e.length&&!c[e]&&(c[e]=r,t instanceof HTMLElement&&!t.getAttribute("data-mc")&&t.setAttribute("data-mc","")),n}(t,e,r)}static remove(t,e){!function(t,e){if(!e)return;const r=t?._mc||{};r&&r[e]&&delete r[e],!Object.keys(r).length&&t instanceof HTMLElement&&t.hasAttribute("data-mc")&&t.removeAttribute("data-mc")}(t,e)}off(t,e){!function(t,e,r){t.removeEventListener(c(e),r)}(this.target,t,e)}on(t,e){return s(this.target,t,e)}one(t,e){return function(t,e,r){return s(t,e,r,!0),r}(this.target,t,e)}trigger(t,e={},r="l",n){o(this.target,t,e,r,n)}ancestors(){let t=this?.target,e=[];if(!l(t))return[];for(;t=t.closest("[data-mc]");)t?._mc&&e.push(t?._mc);return e.length?e:null}closest(){let t=this.target;return l(t)&&t.closest("[data-mc]")?._mc||null}children(){let t=this?.target;return l(t)?function(t){const e=Math.random().toString().replace(".",""),r='[data-mc]:not([temp_id="'+e+'"] [data-mc] [data-mc])';t.setAttribute("temp_id",e);const n=[...t.querySelectorAll(r)].filter((t=>!!t._mc)).map((t=>t._mc));return t.removeAttribute("temp_id"),n.length?n:null}(t):null}descendants(){const t=this?.target;if(!l(t))return[];const e=[...t.querySelectorAll("[data-mc]")].filter((t=>!!t._mc)).map((t=>t._mc));return e.length?e:null}}function d(t){return null!=t&&"object"==typeof t}function h(t){let e=new Set,r=/\{[^\{\}]*\}/g;return(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(r))).forEach((n=>{new Set(t.getAttribute(n)?.match(r)).forEach((t=>e.add(t.replace(/[\{\}]/g,""))))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(r))).forEach((t=>{(t?.nodeValue||"").match(r).forEach((t=>e.add(t.replace(/[\{\}]/g,""))))})),[...e]}new Set;const m=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class p extends f{data={};oldDisplay="";constructor(t){super(t),h(t).forEach((t=>this.data[t]="")),y(this),this.#t()}#t(){let t=this.target,e=!1;(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(/\{[^\{\}]*\}/g))).forEach((e=>{let r=new Set(t.getAttribute(e)?.match(/\{[^\{\}]*\}/g));var n;this.data.subscribe((n=t.getAttribute(e),c=>{let s=n;r.forEach((t=>{s=s.replace(t,c[t.replace(/[\{\}]/g,"")])})),t.setAttribute(e,s)}))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((r=>{e=!0;let n=new Set(r.nodeValue.match(/\{[^\{\}]*\}/g));this.data.subscribe((e=>c=>{let s=e;n.forEach((t=>{s=s.replace(t,c[t.replace(/[\{\}]/g,"")])})),this.oldDisplay?t.style=this.oldDisplay:t.removeAttribute("style"),delete this.oldDisplay,r.nodeValue=s})(r.nodeValue)),this.oldDisplay=t.getAttribute("style")||"",e&&!m.includes(t.constructor)&&"FIELDSET"!==t.tagName&&(t.style.display="none")}))}onData(t){let e={};Object.keys(t.detail.data).forEach((r=>{this.data.hasOwnProperty(r)&&(e[r]=t.detail.data[r])})),JSON.stringify(e)!==JSON.stringify(this.data)&&Object.assign(this.data,e)}}const b={};function g(t){let e=t.constructor.name;return b[e]||function(t){const e=t.constructor,r=e.name;let c=class extends e{#e=!0;#r=[];constructor(t){super(t),this.constructor.callbacks=[],d(t)&&Object.getOwnPropertyNames(t).forEach((e=>{this[e]=t[e]}))}get callbacks(){return this.#r}set callbacks(t){this.#r=t}subscribe(t){return this.#r.push(t),this}bind(t){if(d(this.valueOf())){!function(t){var e;(e=t,[e].concat([...e.querySelectorAll("*")]).filter((t=>!!h(t).length)).filter((t=>"STYLE"!==t?.tagName)).reverse()).forEach((t=>{t?._mc?._placeholders||f.add(t,"_placeholders",new p(t))}))}(t);const e=[t,...t.querySelectorAll("[data-mc]")].filter((t=>!!t?._mc?._placeholders)),r=function(t){let r=n(t);e.forEach((t=>{t&&o(t,"data",r)}))};this.#r.push(r),this.notify()}else console.warn("IGNORED - cannot bind a non-Object to the dom, IS:",typeof this.valueOf(),this);return this}notify(t){let e=d(this.valueOf())&&this.valueOf()instanceof Array==0?structuredClone(Object.assign({},this)):this.valueOf();return void 0!==t&&(this.#e=t),this.#e&&this.#r.forEach((t=>{t(e)})),this}};return b[r]=c,c}(t)}const y=(t,e)=>((e?[e]:[...Object.getOwnPropertyNames(t)]).forEach((e=>{if(t.hasOwnProperty(e)&&"function"!=typeof t[e]&&!t?.[e]?.constructor?.prototype?.subscribe){if("_"===e[0]||void 0===t?.[e])return t;let r=t[e],c=new(g(r))(r),s=function(){let t;return()=>{clearTimeout(t),t=setTimeout((function(){!function(){c.notify()}(...arguments)}),0)}}();Object.defineProperty(t,e,{enumerable:!0,get(){if(d(c.valueOf())){let t=structuredClone(Object.assign({},c));setTimeout((function(){var e,r;e=structuredClone(Object.assign({},c)),r=t,JSON.stringify(n(e))!==JSON.stringify(n(r))&&s()}),0)}return c},set(t){if(typeof t==typeof c.valueOf())if(d(c.valueOf())&&c.valueOf()instanceof Array==0)void 0===c?.constructor?.prototype?.subscribe&&(c=new(g(t))(structuredClone(Object.assign({},t))),function(t,e){const r=Object.getOwnPropertyDescriptors(t);for(const[t,n]of Object.entries(r))("get"in n||"set"in n)&&Object.defineProperty(e,t,n)}(t,c)),Object.assign(c,t),c.notify();else{let e=c.valueOf(),r=c.callbacks;t!==e&&(c=new(g(t))(t),c.callbacks=r,s())}else console.warn("IGNORED - cannot change observable types, IS:",typeof c.valueOf(),c,"- CANNOT BECOME:",typeof t)}}),t[e]=r}})),t);var O=e.l;export{O as observe};

package/dist/observables.ts

@@ -1,15 +1,29 @@
-'use strict';
+import { LooseObject, flattenObject, debounce, deepEqual, copyGettersSetters } from './helpers.js';
+import { HTMLMcElement, DC } from './MC.js';
+import { trigger } from './events.js';
 
-import { LooseObject, debounce, deepEqual, flattenObject, copyGettersSetters } from './helpers.js';
-
-import { DC, HTMLMcElement, trigger } from './MC.js';
+/**
+Determines if a value is an observable object.
 
+@param value - The value to check.
+@returns `true` if the value is a non-null object, otherwise `false`.
+*/
 function isObservableObject(value: any): boolean {
 	return value != null && typeof value === 'object';
 }
 
 type Callback = (value: any) => void;
 
+/**
+Extracts placeholder names from an HTML element's attributes and text content.
+
+Placeholders are strings enclosed in curly braces `{}`. This function scans
+all attributes and direct child text nodes of the target element for placeholders
+and returns them as an array of unique names (without braces).
+
+@param target - The HTMLElement to scan for placeholders.
+@returns An array of placeholder names found within the element's attributes and text content.
+*/
 function getPlaceholders(target: HTMLElement): string[] {
 	let placeholders: Set<string> = new Set(),
 		regEx = /\{[^\{\}]*\}/g;
@@ -18,8 +32,10 @@ function getPlaceholders(target: HTMLElement): string[] {
 	(target.getAttributeNames ? target.getAttributeNames() : [])
 		.filter((attr) => target.getAttribute(attr)?.match(regEx)) // extract placeholder(s)
 		.forEach((attr) => {
-			let placeholders: Set<string> = new Set(target.getAttribute(attr)?.match(regEx));
-			placeholders.forEach((placeholder) => placeholders.add(placeholder.replace(/[\{\}]/g, '')));
+			let attrPlaceholders: Set<string> = new Set(target.getAttribute(attr)?.match(regEx));
+			attrPlaceholders.forEach((attrPlaceholder: string) =>
+				placeholders.add(attrPlaceholder.replace(/[\{\}]/g, ''))
+			);
 		});
 
 	// scan children text nodes
@@ -31,21 +47,38 @@ function getPlaceholders(target: HTMLElement): string[] {
 			);
 		})
 		.forEach((childNode) => {
-			((childNode as any).nodeValue || '').match(regEx).forEach((placeholder: string) => {
-				placeholders.add(placeholder.replace(/[\{\}]/g, ''));
-			});
+			let textContent: string = childNode?.nodeValue || '';
+			let contentPlaceholders = textContent.match(regEx) as string[];
+			contentPlaceholders.forEach((textNodePlaceholder) =>
+				placeholders.add(textNodePlaceholder.replace(/[\{\}]/g, ''))
+			);
 		});
 
-	// extract {} and return result
-	return [...placeholders].map((placeholder) => placeholder.replace(/[\{\}]/g, ''));
+	return [...placeholders];
 }
 
 const inputs = [HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement];
 
+/**
+A class that manages placeholders within an HTML element and updates them dynamically.
+
+This class extends `DC` (Data Controller) and processes the target element to identify
+placeholder patterns in attributes and text nodes. It then observes changes on its internal
+data object and updates the corresponding DOM locations when notified of changes.
+*/
 class Placeholders extends DC {
 	data: LooseObject = {};
 	oldDisplay?: string = '';
 
+	/**
+	Creates a new `Placeholders` instance for the given HTML element.
+	
+	Initializes the internal data with empty strings for each placeholder
+	found in the target and starts observing the data object. Attaches
+	callbacks to update placeholders as needed.
+	
+	@param target - The HTMLElement to process for placeholders.
+	*/
 	constructor(target: HTMLElement) {
 		super(target);
 		getPlaceholders(target).forEach((property) => (this.data[property] = ''));
@@ -63,7 +96,7 @@ class Placeholders extends DC {
 			.forEach((attr: string) => {
 				let placeholders: Set<string> = new Set(target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g));
 				// attach callback
-				this.data.observe(
+				this.data.subscribe(
 					((template: string) => (data: LooseObject) => {
 						let result: string = template;
 						placeholders.forEach((placeholder) => {
@@ -91,7 +124,7 @@ class Placeholders extends DC {
 				let placeholders: Set<string> = new Set(childNode.nodeValue.match(/\{[^\{\}]*\}/g));
 
 				// attach callback
-				this.data.observe(
+				this.data.subscribe(
 					((template: string) => (data: LooseObject) => {
 						let result: string = template;
 						placeholders.forEach((placeholder) => {
@@ -126,6 +159,14 @@ class Placeholders extends DC {
 			});
 	}
 
+	/**
+	Handles a `data` custom event to update the internal placeholder data.
+	
+	Extracts matching keys from the event's detail data and updates only those
+	properties in the internal `data` object that were previously defined as placeholders.
+	
+	@param ev - The CustomEvent containing new data to merge into the placeholders.
+	*/
 	onData(ev: CustomEvent) {
 		let data: LooseObject = {};
 		Object.keys(ev.detail.data).forEach((key) => {
@@ -135,6 +176,12 @@ class Placeholders extends DC {
 	}
 }
 
+/**
+Finds all elements within a given scope that contain placeholders.
+
+@param target - The HTMLElement, DocumentFragment, or ShadowRoot to search.
+@returns An array of HTMLElements containing placeholder patterns.
+*/
 function getPlaceholderElements(
 	target: HTMLElement | DocumentFragment | ShadowRoot
 ): HTMLElement[] {
@@ -146,6 +193,14 @@ function getPlaceholderElements(
 	return elements as HTMLElement[];
 }
 
+/**
+Applies placeholder support to an element and its descendants.
+
+This function scans the provided target for elements containing placeholders
+and attaches a `Placeholders` controller instance to each one if not already present.
+
+@param element - The HTMLElement, DocumentFragment, or ShadowRoot to process.
+*/
 function makePlaceholders(element: HTMLElement | DocumentFragment | ShadowRoot): void {
 	getPlaceholderElements(element).forEach((e: HTMLElement) => {
 		if ((e as HTMLMcElement)?._mc?._placeholders) return;
@@ -153,11 +208,17 @@ function makePlaceholders(element: HTMLElement | DocumentFragment | ShadowRoot):
 	});
 }
 
+/**
+Interface representing an observable object that supports subscription, notification, and DOM binding.
+
+Observable objects track registered callbacks and invoke them when their internal state changes.
+They can also be bound to a DOM target to automatically update placeholder values in the view layer.
+*/
 export type Observable = {
-	observe: (cb: Callback) => void;
-	notify: () => void;
-	bind: (target: HTMLElement | DocumentFragment | ShadowRoot) => void;
-	callbacks: Array<Function>;
+	subscribe: (cb: Callback) => void; // Registers a callback function to be invoked when the observable is notified.
+	notify: () => void; // Notifies all registered callbacks with the current observable data.
+	bind: (target: HTMLElement | DocumentFragment | ShadowRoot) => void; // Binds the observable to a DOM target, setting up placeholder updates.
+	callbacks: Array<Function>; // Array of registered callback functions.
 };
 
 type Class<T> = new (...args: any[]) => T;
@@ -165,7 +226,15 @@ type Class<T> = new (...args: any[]) => T;
 // repository for observable class wrappers
 const classRepo: LooseObject = {};
 
-// creates a new observable class wrapper
+/**
+Creates a new observable wrapper class for the given value's constructor.
+
+Returns a subclass of the original constructor that implements the Observable interface,
+allowing observation and notification of changes. The new class is cached in `classRepo`.
+
+@param val - The value whose constructor should be wrapped with observable behavior.
+@returns A new Observable class that wraps the original constructor.
+*/
 function makeObservable(val: any): Class<typeof val> {
 	const Constructor = val.constructor,
 		ConstructorName: string = Constructor.name;
@@ -193,11 +262,27 @@ function makeObservable(val: any): Class<typeof val> {
 			this.#callbacks = callbacks;
 		}
 
-		observe(callback: Function) {
+		/**
+		Registers a callback function to be invoked when the observable object is notified.
+		
+		@param callback - The function to invoke on notification.
+		@returns This instance for chaining.
+		*/
+		subscribe(callback: Function) {
 			this.#callbacks.push(callback);
 			return this;
 		}
 
+		/**
+		Binds the observable to a DOM target, setting up placeholder updates and
+		triggering initial callbacks.
+		
+		Scans the target and its descendants for placeholders and registers handlers
+		to update them with flattened data on notification.
+		
+		@param target - The HTMLElement, DocumentFragment, or ShadowRoot to bind.
+		@returns This instance for chaining.
+		*/
 		bind(target: HTMLElement | DocumentFragment | ShadowRoot) {
 			const iso = isObservableObject(this.valueOf());
 
@@ -229,6 +314,15 @@ function makeObservable(val: any): Class<typeof val> {
 			return this;
 		}
 
+		/**
+		Notifies registered callbacks with the current observable data.
+		
+		Clones the internal value (if it's an object and not an array) before passing
+		to callbacks. Respects the internal `#notify` flag that can suppress notifications.
+		
+		@param notify - Optional boolean override for the notification state.
+		@returns This instance for chaining.
+		*/
 		notify(notify?: boolean) {
 			let data =
 				isObservableObject(this.valueOf()) && this.valueOf() instanceof Array === false
@@ -255,11 +349,28 @@ function makeObservable(val: any): Class<typeof val> {
 	return ObservableClass;
 }
 
+/**
+Retrieves or creates an observable wrapper class for the given value.
+
+@param val - The value whose constructor should be wrapped with observable behavior.
+@returns A class that wraps the original constructor and implements observable functionality.
+*/
 function getConstructor(val: any): Class<typeof val> {
 	let key: string = val.constructor.name;
 	return classRepo[key] || makeObservable(val);
 }
 
+/**
+Makes a target object's properties observable by replacing them with wrapped values.
+
+Wraps each property of `target` that is not already observable (and meets criteria)
+in an observable wrapper. Also sets up deep change detection for objects and
+debounced notifications when the data changes.
+
+@param target - The LooseObject whose properties should be made observable.
+@param propertyName - Optional specific property name to make one property observable instead of all properties.
+@returns The original target object, now with observable properties.
+*/
 export const observe = (target: LooseObject, propertyName?: string): LooseObject => {
 	let keys = !propertyName ? [...Object.getOwnPropertyNames(target)] : [propertyName];
 
@@ -267,7 +378,7 @@ export const observe = (target: LooseObject, propertyName?: string): LooseObject
 		if (
 			target.hasOwnProperty(key) &&
 			typeof target[key] !== 'function' &&
-			!target?.[key]?.constructor?.prototype?.observe
+			!target?.[key]?.constructor?.prototype?.subscribe
 		) {
 			if (key[0] === '_' || target?.[key] === undefined) return target;
 			let val: any = target[key];
@@ -297,7 +408,7 @@ export const observe = (target: LooseObject, propertyName?: string): LooseObject
 						let iso = isObservableObject(o.valueOf()) && o.valueOf() instanceof Array === false;
 						if (iso) {
 							// is observable object
-							if (o?.constructor?.prototype?.observe === undefined) {
+							if (o?.constructor?.prototype?.subscribe === undefined) {
 								// not observed yet
 								o = new (getConstructor(val) as Class<typeof val>)(
 									structuredClone(Object.assign({}, val))

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@twobirds/microcomponents",
-	"version": "0.1.19",
+	"version": "0.1.21",
 	"description": "Micro Components Organization Class",
 	"main": "./dist/microcomponents.ts",
 	"types": "./dist/microcomponents.d.ts",
@@ -16,14 +16,14 @@
 	"sideEffects": false,
 	"scripts": {
 		"format": "prettier --write \"src/**/*.{ts,js}\"",
-		"lint": "eslint \"src/**/*.{ts,js}\" --fix > eslint.log",
-		"typedoc": "typedoc",
+		"lint": "eslint \"src/**/*.ts\" --fix > eslint.log",
+		"typedoc": "typedoc || true",
 		"webpack": "webpack",
 		"clean": "rm -rf build/*; rm -rf dist/*; rm -rf public/*;",
-		"prep": "cp -R src/* build || true;  mkdir public || true; npm run typedoc; npm run format; npm run lint;",
-		"copyToDist": "cp build/*.js dist; cp public/microcomponents.min.js public/test; cp -R build/*.ts* dist; cp *.svg dist;",
-		"copyToPublic1": "cp dist/*.* public; cp dist/*.* public/test;",
-		"copyToPublic2": "cp -R assets/* public || true; cp -R build/src/* public/; cp dist/MicroComponents.svg public; cp public/MicroComponents.svg public/test;",
+		"prep": " mkdir build || true; cp -r src/* build/ || true; mkdir public || true; npm run format; npm run lint;",
+		"copyToDist": "cp build/*.js dist; cp -r build/*.ts* dist; cp *.svg dist;",
+		"copyToPublic1": "cp -r build/test public; cp build/* public/test/; cp build/* public; cp -r assets/* public || true; cp -r build/src/test/* public/test || true;",
+		"copyToPublic2": "cp dist/MicroComponents.svg public; cp public/MicroComponents.svg public/test;",
 		"build": "npm run clean; npm run prep; tsc; npm run webpack; npm run copyToDist; npm run copyToPublic1; npm run copyToPublic2;",
 		"dev": "cd public; php -S 0.0.0.0:10000; cd ..",
 		"doc": "cd public/typedoc; php -S 0.0.0.0:11000; cd ../..",