nanosplash 3.0.0 → 3.0.2

package/tests/TestUtilities.ts

@@ -0,0 +1,48 @@
+import { JSDOM } from 'jsdom'
+import { Service } from '../src/ts/core/Service'
+
+export function resetDOM() {
+	const dom = new JSDOM()
+	// @ts-ignore
+	globalThis.window = dom.window
+	globalThis.document = dom.window.document
+	globalThis.DOMParser = dom.window.DOMParser
+	globalThis.Node = dom.window.Node
+	globalThis.Element = dom.window.Element
+	globalThis.HTMLElement = dom.window.HTMLElement
+	globalThis.HTMLDivElement = dom.window.HTMLDivElement
+	Service.getInstance().hideAll()
+}
+
+export function div(id: string): HTMLDivElement {
+	const div = document.createElement('div')
+	div.id = id
+	return div
+}
+
+export const ExpectedParsedValues = {
+	numValues: {
+		raw: 123,
+		parsed: '123',
+	},
+	arrValues: {
+		raw: [1, 2, 3],
+		parsed: '1,2,3',
+	},
+	objValues: {
+		raw: {},
+		parsed: '[object Object]',
+	},
+	boolValues: {
+		raw: true,
+		parsed: 'true',
+	},
+	nullValues: {
+		raw: null,
+		parsed: '',
+	},
+	undefValues: {
+		raw: undefined,
+		parsed: '',
+	},
+}

package/tsconfig.json

@@ -1,22 +1,23 @@
 {
-  "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ESNext", "DOM"],
-    "moduleResolution": "Node",
-    "strict": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "esModuleInterop": true,
-    "noEmit": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noImplicitReturns": true,
-    "skipLibCheck": true
-  },
-  "include": [
-    "src",
-    "tests"
-  ]
+	"compilerOptions": {
+		"target": "ESNext",
+		"useDefineForClassFields": true,
+		"module": "ESNext",
+		"lib": ["ESNext", "DOM"],
+		"moduleResolution": "Node",
+		"strict": true,
+		"alwaysStrict": true,
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"esModuleInterop": true,
+		"noEmit": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noImplicitReturns": true,
+		"skipLibCheck": true,
+		"declaration": true,
+		"declarationDir": "dist/types",
+		"types": ["vite/client"]
+	},
+	"include": ["src/ts/**/*.ts"]
 }

package/vite.config.ts

@@ -1,24 +1,16 @@
-import { defineConfig } from 'vite'
+import { LibraryFormats, defineConfig } from 'vite'
 
-export default defineConfig(({ command, mode, ssrBuild }) => {
-	if (command === 'serve') {
-		return {
-			// dev specific config
-		}
-	} else {
-		// command === 'build'
-		return {
-			build: {
-				lib: {
-					entry: './src/main.ts',
-					name: 'Nanosplash',
-					formats: ['iife', 'es', 'cjs'],
-					fileName: module => {
-						return `ns.${module}.js`
-					},
-				},
-				cssCodeSplit: true,
-			},
-		}
-	}
+const format = (process.env?.format ?? '') as LibraryFormats
+const entry = (process.env?.entry ?? '') as string
+
+export default defineConfig({
+	build: {
+		outDir: `dist/${format}`,
+		lib: {
+			entry,
+			name: 'Nanosplash',
+			formats: [format] as LibraryFormats[],
+			fileName: 'ns',
+		},
+	},
 })

package/dist/main.css

@@ -1 +0,0 @@
-.ns,.ns-host:before{width:100%;height:100%}.ns,.ns-host:before{top:0;left:0}.ns-content,.ns{display:flex;justify-content:center;align-items:center}.ns-host{--text-color: DarkSlateGray;--font-size: 20px;--proportional-size: calc(var(--font-size) * .9);--font-family: "Helvetica", "Arial", sans-serif;--font-weight: 400;--background: rgba(255, 255, 255, .8);--z-index: 999999999;--blur-filter: blur(10px)}.ns-host{position:relative;z-index:var(--z-index)}.ns-host:before{position:absolute;background-color:var(--background);content:"";backdrop-filter:var(--blur-filter);-webkit-backdrop-filter:var(--blur-filter);z-index:calc(var(--z-index) + 1)}body.ns-host{height:100vh}.ns{position:absolute;z-index:calc(var(--z-index) + 2)}.ns-text{color:var(--text-color);font-size:var(--font-size);font-family:var(--font-family);font-weight:var(--font-weight);margin-right:var(--proportional-size)}.ns-spinner{display:block;width:var(--proportional-size);height:var(--proportional-size)}.ns-spinner>svg{animation:Rotate 2s linear infinite;position:relative;width:inherit;height:inherit;stroke-width:8}.ns-spinner .path{stroke:var(--text-color);stroke-linecap:round;animation:Dash 1.5s ease-in-out infinite}@keyframes Rotate{to{transform:rotate(360deg)}}@keyframes Dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}

package/dist/ns.cjs.js

@@ -1 +0,0 @@
-"use strict";var g=Object.defineProperty;var S=(e,t,n)=>t in e?g(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n;var i=(e,t,n)=>(S(e,typeof t!="symbol"?t+"":t,n),n);function N(){return new DOMParser().parseFromString('<div class=ns><div class=ns-content><div class=ns-text></div><div class=ns-spinner><svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none></circle></svg></div></div></div>',"text/html").body.firstChild}function w(e,t){t.children.length>0?t.insertBefore(e,t.children.item(0)):t.append(e)}function o(e,t){e==null||e.classList[t](l.nsHostClassName)}function E(e){o(e.getNSElement().parentElement,"remove")}function v(e){e.style.display="flex"}function y(e){e.style.display="none"}function a(e){let t;if(typeof e=="string")t=document.querySelector(e);else{if(e instanceof Node)return e;if(typeof e=="function"){if(t=e(),!(t instanceof Node))return null}else t=null}return t}function p(e){var t;return(t=e==null?void 0:e.classList)==null?void 0:t.contains("ns")}function u(e,t){o(e.parentElement,"remove"),o(t,"add"),w(e,t)}function m(e){const t=a(e);if(!t)return null;const n=t.firstChild;if(n!==null&&p(n)){const x=n.id;return d.getInstance().nsStack.items.find(f=>f.getId()===x)??null}return null}function I(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,e=>{const t=Math.random()*16|0;return(e==="x"?t:t&3|8).toString(16)})}const h=class{constructor(){i(this,"id");i(this,"element");this.element=N(),this.element.id=this.id=I()}getId(){return this.id}getNSElement(){return this.element}getNSContentElement(){return this.getNSElement().firstElementChild}getNSTextElement(){return this.getNSContentElement().firstElementChild}hideText(){return y(this.getNSTextElement()),this}setText(t){return this.getNSTextElement().innerText=t,t.length>0?this.showText():this.hideText(),this}showText(){return v(this.getNSTextElement()),this}remove(){var t;this.element&&((t=this.element.parentElement)==null||t.removeChild(this.element),delete this.element)}};let l=h;i(l,"nsClassName","ns"),i(l,"nsHostClassName",h.nsClassName+"-host");class C{constructor(){i(this,"_items");this._items=[]}get items(){return this._items}push(t){this._items.push(t)}pop(){return this._items.pop()}peek(){return this._items[this._items.length-1]}isEmpty(){return this._items.length===0}size(){return this._items.length}clear(){this._items=[]}}const s=class{constructor(){i(this,"nsStack");this.nsStack=new C}findIndex(t){return this.nsStack.items.findIndex(t)}find(t){return this.nsStack.items.find(t)}static getInstance(){return s.instance||(s.instance=new s),s.instance}static assignToWindow(){Object.defineProperty(window,s.WindowAccessorKey,{value:s.getInstance(),writable:!1})}static start(){s.assignToWindow(),window.addEventListener("load",()=>{window[s.WindowAccessorKey]instanceof s||s.assignToWindow()})}createNS(t){const n=new l;return n.setText(t||""),this.nsStack.push(n),n}cleanAndRemove(t){return E(t),t.remove(),t.getId()}stackDelete(t){let n=this.findIndex(r=>r.getId()===t.getId());return n<0?null:(this.nsStack.items.splice(n,1),t.getId())}deleteNS(t){const n=this.find(t);return n?(this.cleanAndRemove(n),this.stackDelete(n)):null}show(t){let n=m(document.body);return n||(n=this.createNS(),u(n.getNSElement(),document.body)),n.setText(t||""),n.getId()}showInside(t,n){const r=a(t);if(r){let c=m(r);return c||(c=this.createNS()),c.setText(n||""),u(c.getNSElement(),r),c.getId()}return null}hideAll(){this.nsStack.items.forEach(t=>{this.cleanAndRemove(t)}),this.nsStack.clear()}hide(){const t=this.nsStack.pop();return t?this.cleanAndRemove(t):null}hideId(t){return this.deleteNS(n=>n.getId()===t)}hideInside(t){const n=a(t),r=c=>c.getNSElement().parentElement===n;return n?this.deleteNS(r):null}};let d=s;i(d,"WindowAccessorKey","ns"),i(d,"instance");try{d.start()}catch(e){console.warn(e)}

package/dist/ns.es.js

@@ -1,330 +0,0 @@
-var g = Object.defineProperty;
-var S = (e, t, n) => t in e ? g(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
-var i = (e, t, n) => (S(e, typeof t != "symbol" ? t + "" : t, n), n);
-function N() {
-  return new DOMParser().parseFromString(
-    '<div class=ns><div class=ns-content><div class=ns-text></div><div class=ns-spinner><svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none></circle></svg></div></div></div>',
-    "text/html"
-  ).body.firstChild;
-}
-function w(e, t) {
-  t.children.length > 0 ? t.insertBefore(e, t.children.item(0)) : t.append(e);
-}
-function o(e, t) {
-  e == null || e.classList[t](l.nsHostClassName);
-}
-function E(e) {
-  o(e.getNSElement().parentElement, "remove");
-}
-function v(e) {
-  e.style.display = "flex";
-}
-function y(e) {
-  e.style.display = "none";
-}
-function a(e) {
-  let t;
-  if (typeof e == "string")
-    t = document.querySelector(e);
-  else {
-    if (e instanceof Node)
-      return e;
-    if (typeof e == "function") {
-      if (t = e(), !(t instanceof Node))
-        return null;
-    } else
-      t = null;
-  }
-  return t;
-}
-function p(e) {
-  var t;
-  return (t = e == null ? void 0 : e.classList) == null ? void 0 : t.contains("ns");
-}
-function u(e, t) {
-  o(e.parentElement, "remove"), o(t, "add"), w(e, t);
-}
-function m(e) {
-  const t = a(e);
-  if (!t)
-    return null;
-  const n = t.firstChild;
-  if (n !== null && p(n)) {
-    const x = n.id;
-    return d.getInstance().nsStack.items.find((f) => f.getId() === x) ?? null;
-  }
-  return null;
-}
-function I() {
-  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (e) => {
-    const t = Math.random() * 16 | 0;
-    return (e === "x" ? t : t & 3 | 8).toString(16);
-  });
-}
-const h = class {
-  constructor() {
-    i(this, "id");
-    i(this, "element");
-    this.element = N(), this.element.id = this.id = I();
-  }
-  /**
-   * @inheritDoc
-   */
-  getId() {
-    return this.id;
-  }
-  /**
-   * @inheritDoc
-   */
-  getNSElement() {
-    return this.element;
-  }
-  /**
-   * # Get NS Content Element
-   * Returns the content element of the Nanosplash.
-   */
-  getNSContentElement() {
-    return this.getNSElement().firstElementChild;
-  }
-  /**
-   * # Get NS Text Element
-   * Returns the text element of the Nanosplash.
-   */
-  getNSTextElement() {
-    return this.getNSContentElement().firstElementChild;
-  }
-  /**
-   * @inheritDoc
-   */
-  hideText() {
-    return y(this.getNSTextElement()), this;
-  }
-  /**
-   * @inheritDoc
-   */
-  setText(t) {
-    return this.getNSTextElement().innerText = t, t.length > 0 ? this.showText() : this.hideText(), this;
-  }
-  /**
-   * @inheritDoc
-   */
-  showText() {
-    return v(this.getNSTextElement()), this;
-  }
-  /**
-   * @inheritDoc
-   */
-  remove() {
-    var t;
-    this.element && ((t = this.element.parentElement) == null || t.removeChild(this.element), delete this.element);
-  }
-};
-let l = h;
-i(l, "nsClassName", "ns"), i(l, "nsHostClassName", h.nsClassName + "-host");
-class C {
-  /**
-   * Constructs a new stack.
-   */
-  constructor() {
-    i(this, "_items");
-    this._items = [];
-  }
-  /**
-   * Returns the items in the stack.
-   */
-  get items() {
-    return this._items;
-  }
-  /**
-   * Adds an item to the top of the stack.
-   * @param item The item to add to the stack.
-   */
-  push(t) {
-    this._items.push(t);
-  }
-  /**
-   * Removes and returns the item at the top of the stack.
-   * @returns The item at the top of the stack, or undefined if the stack is empty.
-   */
-  pop() {
-    return this._items.pop();
-  }
-  /**
-   * Returns the item at the top of the stack without removing it.
-   * @returns The item at the top of the stack, or undefined if the stack is empty.
-   */
-  peek() {
-    return this._items[this._items.length - 1];
-  }
-  /**
-   * Returns true if the stack is empty, false otherwise.
-   * @returns True if the stack is empty, false otherwise.
-   */
-  isEmpty() {
-    return this._items.length === 0;
-  }
-  /**
-   * Returns the number of items in the stack.
-   * @returns The number of items in the stack.
-   */
-  size() {
-    return this._items.length;
-  }
-  /**
-   * Removes all items from the stack.
-   */
-  clear() {
-    this._items = [];
-  }
-}
-const s = class {
-  /**
-   * # Constructor
-   * Private constructor to prevent multiple instances.
-   * @private
-   */
-  constructor() {
-    i(this, "nsStack");
-    this.nsStack = new C();
-  }
-  /**
-   * # Find Index
-   * Find Nanosplash stack index by callback.
-   * @param callback Callback function that returns a boolean.
-   * @returns {number} Index of Nanosplash instance in the stack or -1.
-   */
-  findIndex(t) {
-    return this.nsStack.items.findIndex(t);
-  }
-  /**
-   * # Find
-   * Find Nanosplash in the stack by callback.
-   * @param callback Callback function that returns a boolean.
-   * @returns {Nanosplash | undefined} Nanosplash instance or undefined
-   */
-  find(t) {
-    return this.nsStack.items.find(t);
-  }
-  /**
-   * # Get Instance
-   * Singleton instance accessor
-   * @returns {NanosplashService} NanosplashService instance
-   */
-  static getInstance() {
-    return s.instance || (s.instance = new s()), s.instance;
-  }
-  /**
-   * # Assign To Window
-   * Assign Nanosplash service instance to Window object.
-   * The NanosplashService instance can be accessed in the window object
-   * using the key window accessor key.
-   * @see WindowAccessorKey
-   */
-  static assignToWindow() {
-    Object.defineProperty(window, s.WindowAccessorKey, {
-      value: s.getInstance(),
-      writable: !1
-    });
-  }
-  /**
-   * # Start
-   * Initialize Nanosplash Service instance in Window when it's loaded.
-   */
-  static start() {
-    s.assignToWindow(), window.addEventListener("load", () => {
-      window[s.WindowAccessorKey] instanceof s || s.assignToWindow();
-    });
-  }
-  /**
-   * # Create Nanosplash
-   * Return new Nanosplash instance and push it to the stack.
-   * @param text Text to display.
-   * @returns {Nanosplash} Nanosplash instance.
-   */
-  createNS(t) {
-    const n = new l();
-    return n.setText(t || ""), this.nsStack.push(n), n;
-  }
-  /**
-   * # Clean And Remove
-   * Remove Nanosplash from DOM and clean its parent.
-   * @param ns Nanosplash instance.
-   * @returns {GUIDString} Nanosplash ID.
-   */
-  cleanAndRemove(t) {
-    return E(t), t.remove(), t.getId();
-  }
-  /**
-   * # Stack Delete At
-   * Remove Nanosplash instance from the stack.
-   * @param ns Nanosplash instance.
-   * @returns {GUIDString | null} Nanosplash ID or null if it doesn't exist.
-   */
-  stackDelete(t) {
-    let n = this.findIndex((r) => r.getId() === t.getId());
-    return n < 0 ? null : (this.nsStack.items.splice(n, 1), t.getId());
-  }
-  /**
-   * # Delete NS
-   * Remove Nanosplash instance from both the stack and the DOM.
-   * @param callback Callback function.
-   * @returns {GUIDString | null} Nanosplash ID or null if it doesn't exist.
-   */
-  deleteNS(t) {
-    const n = this.find(t);
-    return n ? (this.cleanAndRemove(n), this.stackDelete(n)) : null;
-  }
-  /**
-   * @inheritDoc
-   */
-  show(t) {
-    let n = m(document.body);
-    return n || (n = this.createNS(), u(n.getNSElement(), document.body)), n.setText(t || ""), n.getId();
-  }
-  /**
-   * @inheritDoc
-   */
-  showInside(t, n) {
-    const r = a(t);
-    if (r) {
-      let c = m(r);
-      return c || (c = this.createNS()), c.setText(n || ""), u(c.getNSElement(), r), c.getId();
-    }
-    return null;
-  }
-  /**
-   * @inheritDoc
-   */
-  hideAll() {
-    this.nsStack.items.forEach((t) => {
-      this.cleanAndRemove(t);
-    }), this.nsStack.clear();
-  }
-  /**
-   * @inheritDoc
-   */
-  hide() {
-    const t = this.nsStack.pop();
-    return t ? this.cleanAndRemove(t) : null;
-  }
-  /**
-   * @inheritDoc
-   */
-  hideId(t) {
-    return this.deleteNS((n) => n.getId() === t);
-  }
-  /**
-   * @inheritDoc
-   */
-  hideInside(t) {
-    const n = a(t), r = (c) => c.getNSElement().parentElement === n;
-    return n ? this.deleteNS(r) : null;
-  }
-};
-let d = s;
-i(d, "WindowAccessorKey", "ns"), i(d, "instance");
-try {
-  d.start();
-} catch (e) {
-  console.warn(e);
-}

package/dist/ns.iife.js

@@ -1,2 +0,0 @@
-var C=Object.defineProperty;var I=(r,o,c)=>o in r?C(r,o,{enumerable:!0,configurable:!0,writable:!0,value:c}):r[o]=c;var i=(r,o,c)=>(I(r,typeof o!="symbol"?o+"":o,c),c);(function(){var r=document.createElement("style");r.textContent=`.ns,.ns-host:before{width:100%;height:100%}.ns,.ns-host:before{top:0;left:0}.ns-content,.ns{display:flex;justify-content:center;align-items:center}.ns-host{--text-color: DarkSlateGray;--font-size: 20px;--proportional-size: calc(var(--font-size) * .9);--font-family: "Helvetica", "Arial", sans-serif;--font-weight: 400;--background: rgba(255, 255, 255, .8);--z-index: 999999999;--blur-filter: blur(10px)}.ns-host{position:relative;z-index:var(--z-index)}.ns-host:before{position:absolute;background-color:var(--background);content:"";backdrop-filter:var(--blur-filter);-webkit-backdrop-filter:var(--blur-filter);z-index:calc(var(--z-index) + 1)}body.ns-host{height:100vh}.ns{position:absolute;z-index:calc(var(--z-index) + 2)}.ns-text{color:var(--text-color);font-size:var(--font-size);font-family:var(--font-family);font-weight:var(--font-weight);margin-right:var(--proportional-size)}.ns-spinner{display:block;width:var(--proportional-size);height:var(--proportional-size)}.ns-spinner>svg{animation:Rotate 2s linear infinite;position:relative;width:inherit;height:inherit;stroke-width:8}.ns-spinner .path{stroke:var(--text-color);stroke-linecap:round;animation:Dash 1.5s ease-in-out infinite}@keyframes Rotate{to{transform:rotate(360deg)}}@keyframes Dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}
-`,document.head.appendChild(r);const o="";function c(){return new DOMParser().parseFromString('<div class=ns><div class=ns-content><div class=ns-text></div><div class=ns-spinner><svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none></circle></svg></div></div></div>',"text/html").body.firstChild}function p(e,t){t.children.length>0?t.insertBefore(e,t.children.item(0)):t.append(e)}function u(e,t){e==null||e.classList[t](d.nsHostClassName)}function v(e){u(e.getNSElement().parentElement,"remove")}function y(e){e.style.display="flex"}function S(e){e.style.display="none"}function f(e){let t;if(typeof e=="string")t=document.querySelector(e);else{if(e instanceof Node)return e;if(typeof e=="function"){if(t=e(),!(t instanceof Node))return null}else t=null}return t}function k(e){var t;return(t=e==null?void 0:e.classList)==null?void 0:t.contains("ns")}function x(e,t){u(e.parentElement,"remove"),u(t,"add"),p(e,t)}function g(e){const t=f(e);if(!t)return null;const n=t.firstChild;if(n!==null&&k(n)){const b=n.id;return h.getInstance().nsStack.items.find(E=>E.getId()===b)??null}return null}function w(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,e=>{const t=Math.random()*16|0;return(e==="x"?t:t&3|8).toString(16)})}const m=class{constructor(){i(this,"id");i(this,"element");this.element=c(),this.element.id=this.id=w()}getId(){return this.id}getNSElement(){return this.element}getNSContentElement(){return this.getNSElement().firstElementChild}getNSTextElement(){return this.getNSContentElement().firstElementChild}hideText(){return S(this.getNSTextElement()),this}setText(t){return this.getNSTextElement().innerText=t,t.length>0?this.showText():this.hideText(),this}showText(){return y(this.getNSTextElement()),this}remove(){var t;this.element&&((t=this.element.parentElement)==null||t.removeChild(this.element),delete this.element)}};let d=m;i(d,"nsClassName","ns"),i(d,"nsHostClassName",m.nsClassName+"-host");class N{constructor(){i(this,"_items");this._items=[]}get items(){return this._items}push(t){this._items.push(t)}pop(){return this._items.pop()}peek(){return this._items[this._items.length-1]}isEmpty(){return this._items.length===0}size(){return this._items.length}clear(){this._items=[]}}const s=class{constructor(){i(this,"nsStack");this.nsStack=new N}findIndex(t){return this.nsStack.items.findIndex(t)}find(t){return this.nsStack.items.find(t)}static getInstance(){return s.instance||(s.instance=new s),s.instance}static assignToWindow(){Object.defineProperty(window,s.WindowAccessorKey,{value:s.getInstance(),writable:!1})}static start(){s.assignToWindow(),window.addEventListener("load",()=>{window[s.WindowAccessorKey]instanceof s||s.assignToWindow()})}createNS(t){const n=new d;return n.setText(t||""),this.nsStack.push(n),n}cleanAndRemove(t){return v(t),t.remove(),t.getId()}stackDelete(t){let n=this.findIndex(a=>a.getId()===t.getId());return n<0?null:(this.nsStack.items.splice(n,1),t.getId())}deleteNS(t){const n=this.find(t);return n?(this.cleanAndRemove(n),this.stackDelete(n)):null}show(t){let n=g(document.body);return n||(n=this.createNS(),x(n.getNSElement(),document.body)),n.setText(t||""),n.getId()}showInside(t,n){const a=f(t);if(a){let l=g(a);return l||(l=this.createNS()),l.setText(n||""),x(l.getNSElement(),a),l.getId()}return null}hideAll(){this.nsStack.items.forEach(t=>{this.cleanAndRemove(t)}),this.nsStack.clear()}hide(){const t=this.nsStack.pop();return t?this.cleanAndRemove(t):null}hideId(t){return this.deleteNS(n=>n.getId()===t)}hideInside(t){const n=f(t),a=l=>l.getNSElement().parentElement===n;return n?this.deleteNS(a):null}};let h=s;i(h,"WindowAccessorKey","ns"),i(h,"instance");try{h.start()}catch(e){console.warn(e)}})();

package/index.html

@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Nanosplash 3</title>
-		<script src="https://cdn.tailwindcss.com"></script>
-	</head>
-	<body>
-	<div
-		id="main"
-		class="bg-slate-50 h-screen flex flex-col justify-center items-center">
-		<div class="text-slate-700 text-5xl">Nanosplash</div>
-		<div class="text-slate-400 text-xl mt-5">Demo of v3.0.0</div>
-		<div class="mt-20 mb-10 text-lg font-mono text-slate-500">ns.showInside(<span class="text-slate-700 font-bold">selectorOrElement</span>, <span class="text-slate-700 font-bold">text</span>)</div>
-		<div class="flex gap-x-3">
-			<input id="code" type="text" class="appearance-none w-[500px] box-content flex p-4 bg-slate-700 font-mono text-white rounded shadow-xl" placeholder="Write JS code here">
-			<button id="run" type="button" class="p-4 bg-slate-500 text-white rounded shadow-xl">Run code</button>
-		</div>
-		<div
-			id="wrapper"
-			class="relative mt-20 flex gap-x-5 justify-center items-center bg-slate-200 p-20 border border-4 border-black/10 rounded shadow-xl">
-			<div class="absolute top-2 left-2 font-mono text-slate-500 px-1 bg-white rounded">Element ID: #wrapper</div>
-			<div
-				id="a"
-				class="relative bg-slate-400 p-20 border border-4 border-black/10 rounded shadow-2xl">
-				<div class="absolute top-2 left-2 font-mono text-slate-500 px-1 bg-white rounded">Element ID: #a</div>
-				<div class="text-white text-2xl font-medium">This is element A</div>
-			</div>
-			<div
-				id="b"
-				class="relative bg-slate-400 p-20 border border-4 border-black/10 rounded shadow-2xl">
-				<div class="absolute top-2 left-2 font-mono text-slate-500 px-1 bg-white rounded">Element ID: #b</div>
-				<div class="text-white text-2xl font-medium">This is element B</div>
-			</div>
-			<div
-				id="c"
-				class="relative bg-slate-400 p-20 border border-4 border-black/10 rounded shadow-2xl">
-				<div class="absolute top-2 left-2 font-mono text-slate-500 px-1 bg-white rounded">Element ID: #c</div>
-				<div class="text-white text-2xl font-medium">This is element C</div>
-			</div>
-		</div>
-	</div>
-	<script type="module" src="/src/main.ts"></script>
-	<script>
-		const ref = id => document.getElementById(id)
-		const code = ref('code')
-		const run = ref('run')
-		run.onclick = () => eval(code.value)
-	</script>
-	</body>
-</html>

package/src/main.ts

@@ -1,8 +0,0 @@
-// @ts-strict
-
-import NanosplashService from './ts/core/Nanosplash/services/NanosplashService'
-try {
-	NanosplashService.start()
-} catch (e) {
-	console.warn(e)
-}

package/src/sass/ns.sass

@@ -1,86 +0,0 @@
-%maximize
-	width: 100%
-	height: 100%
-
-%upper-left
-	top: 0
-	left: 0
-
-%flex-center-xy
-	display: flex
-	justify-content: center
-	align-items: center
-
-.ns-host
-	--text-color: DarkSlateGray
-	--font-size: 20px
-	--proportional-size: calc(var(--font-size) * 0.9)
-	--font-family: 'Helvetica', 'Arial', sans-serif
-	--font-weight: 400
-	--background: rgba(255, 255, 255, 0.8)
-	--z-index: 999999999
-	--blur-filter: blur(10px)
-
-.ns-host
-	position: relative
-	z-index: var(--z-index)
-	&::before
-		@extend %maximize
-		@extend %upper-left
-		position: absolute
-		background-color: var(--background)
-		content: ''
-		backdrop-filter: var(--blur-filter)
-		-webkit-backdrop-filter: var(--blur-filter)
-		z-index: calc(var(--z-index) + 1)
-
-body.ns-host
-	height: 100vh
-
-.ns
-	@extend %maximize
-	@extend %upper-left
-	@extend %flex-center-xy
-	position: absolute
-	z-index: calc(var(--z-index) + 2)
-
-.ns-content
-	@extend %flex-center-xy
-
-.ns-text
-	color: var(--text-color)
-	font-size: var(--font-size)
-	font-family: var(--font-family)
-	font-weight: var(--font-weight)
-	margin-right: var(--proportional-size)
-
-// Spinner node
-.ns-spinner
-	display: block
-	width: var(--proportional-size)
-	height: var(--proportional-size)
-	& > svg
-		animation: Rotate 2s linear infinite
-		position: relative
-		width: inherit
-		height: inherit
-		stroke-width: 8
-	& .path
-		stroke: var(--text-color)
-		stroke-linecap: round
-		animation: Dash 1.5s ease-in-out infinite
-
-// Spinner animations:
-@keyframes Rotate
-	100%
-		transform: rotate(360deg)
-@keyframes Dash
-	0%
-		stroke-dasharray: 1, 150
-		stroke-dashoffset: 0
-	50%
-		stroke-dasharray: 90, 150
-		stroke-dashoffset: -35
-	100%
-		stroke-dasharray: 90, 150
-		stroke-dashoffset: -124