nanosplash 3.0.1 → 3.0.2

package/package.json

@@ -1,88 +1,87 @@
 {
-  "name": "nanosplash",
-  "description": "The tiny loading screen for web artisans",
-  "private": false,
-  "version": "3.0.1",
-  "type": "module",
-  "author": {
-    "name": "Isak K. Hauge",
-    "email": "isakhauge@icloud.com",
-    "url": "https://no.linkedin.com/in/isakhauge"
-  },
-  "keywords": [
-    "loading",
-    "loader",
-    "screen",
-    "splash",
-    "nano",
-    "nanosplash",
-    "small",
-    "tiny",
-    "es",
-    "esm",
-    "ts",
-    "typescript",
-    "iife",
-    "cdn",
-    "vite"
-  ],
-  "homepage": "https://isakhauge.github.io/nanosplash",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/isakhauge/nanosplash.git"
-  },
-  "license": "MIT",
-  "main": "./dist/latest/es/ns.js",
-  "module": "./dist/latest/es/ns.js",
-  "source": "./src/main.ts",
-  "unpkg": "./dist/latest/iife/ns.iife.js",
-  "style": "./dist/latest/es/style.css",
-  "exports": {
-    ".": {
-      "types": {
-        "require": "./src/ts/types/global.d.ts",
-        "default": "./src/ts/types/global.d.ts"
-      },
-      "browser": {
-        "require": "./dist/latest/cjs/ns.cjs",
-        "default": "./dist/latest/es/ns.js"
-      },
-      "default": {
-        "require": "./dist/latest/cjs/ns.cjs",
-        "default": "./dist/latest/es/ns.js"
-      }
-    }
-  },
-  "types": "./src/ts/types/global.d.ts",
-  "scripts": {
-    "dev": "vite",
-    "build": "yarn build:all && yarn build:all:versioned && yarn build:demo",
-    "build:es": "tsc && cross-env entry=./src/ts/core/Service.ts format=es yarn vite build -m production --c vite.config.ts",
-    "build:cjs": "tsc && cross-env entry=./src/ts/core/Service.ts format=cjs yarn vite build -m production --c vite.config.ts",
-    "build:iife": "tsc && cross-env entry=./src/ts/main.ts format=iife yarn vite build -m production --c vite.config.ts",
-    "build:es:ver": "tsc && cross-env versioned=true entry=./src/ts/core/Service.ts format=es yarn vite build -m production --c vite.config.ts",
-    "build:cjs:ver": "tsc && cross-env versioned=true entry=./src/ts/core/Service.ts format=cjs yarn vite build -m production --c vite.config.ts",
-    "build:iife:ver": "tsc && cross-env versioned=true entry=./src/ts/main.ts format=iife yarn vite build -m production --c vite.config.ts",
-    "build:all": "yarn build:es && yarn build:cjs && yarn build:iife",
-    "build:all:versioned": "yarn build:es:ver && yarn build:cjs:ver && yarn build:iife:ver",
-    "build:demo": "tsc && vite build -m production --c vite.demo.config.ts",
-    "preview": "vite preview",
-    "test": "vitest",
-    "test:ui": "vitest --ui",
-    "coverage": "vitest --coverage"
-  },
-  "devDependencies": {
-    "@types/jsdom": "^21.1.2",
-    "@types/node": "^20.5.9",
-    "@types/rollup": "^0.54.0",
-    "@vitest/coverage-v8": "^0.34.3",
-    "@vitest/ui": "^0.34.3",
-    "cross-env": "^7.0.3",
-    "jsdom": "^22.1.0",
-    "sass": "^1.66.1",
-    "terser": "^5.19.3",
-    "typescript": "^5.2.2",
-    "vite": "^4.4.9",
-    "vitest": "^0.34.3"
-  }
-}
+	"name": "nanosplash",
+	"description": "The tiny loading screen for web artisans",
+	"private": false,
+	"version": "3.0.2",
+	"type": "module",
+	"author": {
+		"name": "Isak K. Hauge",
+		"email": "isakhauge@icloud.com",
+		"url": "https://no.linkedin.com/in/isakhauge"
+	},
+	"keywords": [
+		"loading",
+		"loader",
+		"screen",
+		"splash",
+		"nano",
+		"nanosplash",
+		"small",
+		"tiny",
+		"es",
+		"esm",
+		"ts",
+		"typescript",
+		"iife",
+		"cdn",
+		"vite"
+	],
+	"homepage": "https://isakhauge.github.io/nanosplash",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/isakhauge/nanosplash.git"
+	},
+	"license": "MIT",
+	"main": "./dist/latest/es/ns.js",
+	"module": "./dist/latest/es/ns.js",
+	"source": "./src/main.ts",
+	"unpkg": "./dist/latest/iife/ns.iife.js",
+	"style": "./dist/latest/es/style.css",
+	"exports": {
+		".": {
+			"types": {
+				"require": "./src/ts/types/global.d.ts",
+				"default": "./src/ts/types/global.d.ts"
+			},
+			"browser": {
+				"require": "./dist/latest/cjs/ns.cjs",
+				"default": "./dist/latest/es/ns.js"
+			},
+			"default": {
+				"require": "./dist/latest/cjs/ns.cjs",
+				"default": "./dist/latest/es/ns.js"
+			}
+		}
+	},
+	"types": "./src/ts/types/global.d.ts",
+	"scripts": {
+		"build": "bun build:all && bun build:docs",
+		"build:es": "tsc && cross-env entry=./src/ts/core/Service.ts format=es bun vite build -m production --c vite.config.ts",
+		"build:cjs": "tsc && cross-env entry=./src/ts/core/Service.ts format=cjs bun vite build -m production --c vite.config.ts",
+		"build:iife": "tsc && cross-env entry=./src/ts/main.ts format=iife bun vite build -m production --c vite.config.ts",
+		"build:all": "bun build:es && bun build:cjs && bun build:iife",
+		"build:docs": "bun docs:build",
+		"preview": "vite preview",
+		"test": "vitest",
+		"test:ui": "vitest --ui",
+		"coverage": "vitest --coverage",
+		"docs:dev": "vitepress dev docs",
+		"docs:build": "vitepress build docs",
+		"docs:preview": "vitepress preview docs"
+	},
+	"devDependencies": {
+		"@types/jsdom": "^21.1.3",
+		"@types/node": "^20.8.6",
+		"@types/rollup": "^0.54.0",
+		"@vitest/coverage-v8": "^0.34.6",
+		"@vitest/ui": "^0.34.6",
+		"cross-env": "^7.0.3",
+		"jsdom": "^22.1.0",
+		"sass": "^1.69.3",
+		"terser": "^5.22.0",
+		"typescript": "^5.2.2",
+		"vite": "^4.4.11",
+		"vitepress": "1.0.0-rc.22",
+		"vitest": "^0.34.6"
+	}
+}

package/src/style/ns.sass

@@ -0,0 +1,95 @@
+%maximize
+    width: 100%
+    height: 100%
+
+%upper-left
+    top: 0
+    left: 0
+
+%flex-center-xy
+    display: flex
+    justify-content: center
+    align-items: center
+
+// Nanosplash host scoped varibles
+.nsh
+    --color: DarkSlateGray
+    --size: 20px
+    --relSize: calc(var(--size) * 0.9)
+    --font: 'Helvetica', 'Arial', sans-serif
+    --weight: 400
+    --bg: #{ rgba(White, 0.8) }
+    --zIdx: 999999999
+    --blur: blur(10px)
+
+// Nanosplash host
+.nsh
+    position: relative
+    z-index: var(--zIdx)
+    &::before
+        @extend %maximize
+        @extend %upper-left
+        position: absolute
+        background-color: var(--bg)
+        content: ''
+        backdrop-filter: var(--blur)
+        -webkit-backdrop-filter: var(--blur)
+        z-index: calc(var(--zIdx) + 1)
+        border-radius: inherit
+
+// When Nanosplash host is the document body
+body.nsh
+    height: 100vh
+
+// Nanosplash (main element)
+.ns
+    @extend %maximize
+    @extend %upper-left
+    @extend %flex-center-xy
+    position: absolute
+    z-index: calc(var(--zIdx) + 2)
+
+// Nanosplash container
+.nsc
+    @extend %flex-center-xy
+    filter: drop-shadow(0 0 0.1rem #{ rgba(LightGray, 0.5) })
+
+// Nanosplash text
+.nst
+    color: var(--color)
+    font-size: var(--size)
+    font-family: var(--font)
+    font-weight: var(--weight)
+    margin-right: var(--relSize)
+    text-shadow: 0 0 0.06rem #{ rgba(DarkSlateGray, .25) }
+
+// Nanosplash spinner
+.nss
+    display: block
+    width: var(--relSize)
+    height: var(--relSize)
+    & > svg
+        animation: Rotate 2s linear infinite
+        position: relative
+        width: inherit
+        height: inherit
+        stroke-width: 8
+    & .path
+        stroke: var(--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

package/src/ts/core/{Dom.ts → DomUtilities.ts}

@@ -1,6 +1,4 @@
-// @ts-strict
-
-import { Reference, GUIDString, ClassListAction } from '../types/Types'
+import { Reference } from '../types/Types'
 import { Service } from './Service'
 import { Splash } from './Splash'
 
@@ -12,15 +10,27 @@ import { Splash } from './Splash'
  * @author Isak K. Hauge <isakhauge@icloud.com>
  */
 
+/**
+ * # Render
+ * @param html HTML string to render.
+ * @returns Rendered HTML element.
+ */
+export function render(html: string): HTMLElement {
+	return (div =>
+		// @ts-ignore
+		(() => div.firstChild as HTMLElement)((div.innerHTML = html)))(
+		document.createElement('div')
+	)
+}
+
 /**
  * # Create Element
  * Return the main Nanosplash element.
  */
 export function createElement(): HTMLDivElement {
-	return new DOMParser().parseFromString(
-		'<div class=ns><div class=nsc><div class=nst></div><div class=nss><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 as HTMLDivElement
+	return render(
+		'<div class=ns><div class=nsc><div class=nst></div><div class=nss><svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none></circle></svg></div></div></div>'
+	) as HTMLDivElement
 }
 
 /**
@@ -46,39 +56,25 @@ export function injectAsFirstChild(
 }
 
 /**
- * # Set NS Host Class
- * Add or remove the `nsHostClassName` class to the `element`.
- * @param element Element to which the `nsHostClassName` class will be added or removed.
- * @param action Action to perform ('add' or 'remove').
+ * # Add NS Host Class
+ * Add the `nsHostClassName` class to the `element`.
+ * @param element Element to which the `nsHostClassName` class will be added.
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
  * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/add
- * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/remove
  */
-export function setNSHostClass(
-	element: Element | null,
-	action: ClassListAction
-): void {
-	element?.classList[action](Splash.NSHostClass)
+export function addNSHostClass(element: Element | null): void {
+	element?.classList.add(Splash.NSHostClass)
 }
 
 /**
- * # Prepare Parent Of
- * Add the `nsHostClassName` class to the parent of the `ns` element.
- * @param ns Nanosplash instance.
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/parentElement
- */
-export function prepareParentOf(ns: Splash): void {
-	setNSHostClass(ns.getNSElement().parentElement, ClassListAction.Add)
-}
-
-/**
- * # Clean NS Parent Of
- * Remove the `nsHostClassName` class from the parent of the `ns` element.
- * @param ns Nanosplash instance.
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/parentElement
+ * # Remove NS Host Class
+ * Remove the `nsHostClassName` class from the `element`.
+ * @param element Element from which the `nsHostClassName` class will be removed.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/remove
  */
-export function cleanNSParentOf(ns: Splash): void {
-	setNSHostClass(ns.getNSElement().parentElement, ClassListAction.Remove)
+export function removeNSHostClass(element: Element | null): void {
+	element?.classList.remove(Splash.NSHostClass)
 }
 
 /**
@@ -111,18 +107,21 @@ export function hideElement(element: HTMLElement): void {
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Node
  */
 export function elementFrom(ref: Reference): Element | null {
-	return ref instanceof Element ? ref : document.querySelector(ref || '')
-}
-
-/**
- * # Element Is NS
- * Check if the element is a Nanosplash element.
- * This is determined by the presence of the `ns` class on the element.
- * @param element Element to check.
- * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/contains
- */
-export function elementIsNS(element: Element): boolean {
-	return element?.classList?.contains(Splash.NSClass) ?? false
+	switch (typeof ref) {
+		case 'object':
+			const isBody = ref === document.body
+			const isElement = ref instanceof Element
+			if (isBody || isElement) {
+				return ref
+			}
+			throw new Error(
+				'Reference is an object but not an Element instance.'
+			)
+		case 'string':
+			return document.querySelector(ref)
+		default:
+			throw new Error('Reference is not an object or a string.')
+	}
 }
 
 /**
@@ -133,9 +132,9 @@ export function elementIsNS(element: Element): boolean {
  */
 export function move(element: Element, targetElement: Element): void {
 	// Clean the current NS host element.
-	setNSHostClass(element.parentElement, ClassListAction.Remove)
+	removeNSHostClass(element.parentElement)
 	// Assign new NS host element.
-	setNSHostClass(targetElement, ClassListAction.Add)
+	addNSHostClass(targetElement)
 	injectAsFirstChild(element, targetElement)
 }
 
@@ -146,15 +145,17 @@ export function move(element: Element, targetElement: Element): void {
  * @returns { Nanosplash | null } Nanosplash instance or null.
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/firstElementChild
  */
-export function getRecycledNS(targetElement: Element): Splash | null {
-	const firstChild = targetElement.firstElementChild
-	const hasChild = firstChild !== null
-	const targetAlreadyHasNS = hasChild && elementIsNS(firstChild)
-	if (targetAlreadyHasNS) {
-		const id: GUIDString = firstChild.id
-		const nss = Service.getInstance()
-		return nss.nsStack.find((ns: Splash) => ns.getId() === id) ?? null
+export function getRecycledSplash(targetElement: Element): Splash | null {
+	const children = Array.from(targetElement.children || [])
+	const nss = Service.getInstance()
+	let splash: Splash | null = null
+	const n = children.length
+	for (let i = 0; i < n; i++) {
+		const child = children[i]
+		if (child.classList.contains(Splash.NSClass)) {
+			splash = nss.nsQueue.get(child.id) ?? null
+			break
+		}
 	}
-
-	return null
+	return splash
 }