nanosplash 3.0.9 → 3.1.0

package/docs/.vitepress/.temp/index.md.js

@@ -0,0 +1,19 @@
+import { ssrRenderAttrs } from "vue/server-renderer";
+import { useSSRContext } from "vue";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.1tPrXgE0.js";
+const __pageData = JSON.parse('{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"Nanosplash","text":"","tagline":"The tiny loading screen for web artisans","actions":[{"theme":"brand","text":"Get started","link":"/api/start/install.md"},{"theme":"alt","text":"Playground","link":"/api/start/playground.md"},{"theme":"alt","text":"API Documentation","link":"/api/doc/show.md"}]},"features":[{"title":"✨ Tiny","details":"Less than 2KB minified and gzipped.","link":"/api/start/features#small-bundle-size"},{"title":"✌️ 2 Function API","details":"Start using Nanosplash in seconds.","link":"/api/start/features#simple-api"},{"title":"🪴 Spawning","details":"Spawn a splash element anywhere in your DOM.","link":"/api/start/features#spawning"},{"title":"🚀 Node recycling","details":"Nanosplash will recycle existing elements.","link":"/api/start/features#element-recycling"}]},"headers":[],"relativePath":"index.md","filePath":"index.md"}');
+const _sfc_main = { name: "index.md" };
+function _sfc_ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
+  _push(`<div${ssrRenderAttrs(_attrs)}></div>`);
+}
+const _sfc_setup = _sfc_main.setup;
+_sfc_main.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("index.md");
+  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
+};
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["ssrRender", _sfc_ssrRender]]);
+export {
+  __pageData,
+  index as default
+};

package/docs/.vitepress/.temp/package.json

@@ -0,0 +1 @@
+{ "private": true, "type": "module" }

package/docs/.vitepress/.temp/plugin-vue_export-helper.1tPrXgE0.js

@@ -0,0 +1,10 @@
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+export {
+  _export_sfc as _
+};

package/docs/.vitepress/config.mts

@@ -30,6 +30,10 @@ export default defineConfig({
 						text: 'Playground',
 						link: '/api/start/playground',
 					},
+					{
+						text: 'Customize',
+						link: '/api/start/customize',
+					},
 				],
 			},
 			{
@@ -68,7 +72,7 @@ export default defineConfig({
 
 		footer: {
 			message:
-				'Made with 🤍 by <a href="https://twitter.com/isakhauge">Isak Hauge</a>',
+				'Made with 💖 by <a href="https://twitter.com/isakhauge">Isak Hauge</a>',
 		},
 	},
 })

package/docs/.vitepress/theme/vue/Exe.vue

@@ -12,7 +12,7 @@ const Commands = {
 	ShowFullScreen: 'ns.show("Loading window")',
 	Progress: 'Progressive Demo',
 	Hide: 'ns.hide()',
-	HideAll: 'ns.hideAll()',
+	HideAll: 'ns.hide("*")',
 }
 
 const rCommandString = ref('')
@@ -55,14 +55,14 @@ async function onClickExe() {
 			ns.hide()
 			break
 		case Commands.HideAll:
-			ns.hideAll()
+			ns.hide('*')
 			break
 		case Commands.Progress:
 			for (const phrase of phrases) {
 				ns.show(phrase)
 				await wait(1500)
 			}
-			ns.hideAll()
+			ns.hide('*')
 	}
 }
 </script>

package/docs/api/doc/hide.md

@@ -36,7 +36,7 @@ used to hide a specific Nanosplash at a later time.
 
 ```js
 const id = ns.show('Loading')
-ns.hideId(id)
+ns.hide(id)
 ```
 
 ## Hide all
@@ -44,5 +44,5 @@ ns.hideId(id)
 Hides all Nanosplashes in the `window`.
 
 ```ts
-ns.hideAll(): void
+ns.hide('*'): void
 ```

package/docs/api/doc/show.md

@@ -32,11 +32,11 @@ ns.show(text?: string, ref?: Element | string): number | null
 ```js
 // DOM selector
 const selector: string = '#my-table'
-ns.showInside('Loading', selector)
+ns.show('Loading', selector)
 
 // Element
 const element: HTMLElement = document.getElementById('my-table')
-ns.showInside('Loading', element)
+ns.show('Loading', element)
 ```
 
 ::: tip

package/docs/api/start/customize.md

@@ -0,0 +1,30 @@
+# Customize
+
+Stying Nanosplash to your needs is easy!
+
+```css
+/* Backdrop */
+.nsh::before {
+	background-color: var(--your-bg);
+	backdrop-filter: var(--your-filter);
+}
+
+/* Main */
+.ns {
+	gap: var(--text-spinner-gap);
+}
+
+/* Text */
+.nst {
+	color: var(--color);
+	font-size: var(--size);
+	font-family: var(--font);
+	font-weight: var(--weight);
+}
+
+/* Spinner */
+.nss {
+	width: var(--spinner-width);
+	height: var(--spinner-height);
+}
+```

package/docs/api/start/features.md

@@ -4,7 +4,7 @@
 
 The Nanosplash bundle is less than 2KB minified and gzipped and will not add any significant weight to your application what so ever. Go to [Bundlephobia](https://bundlephobia.com/package/nanosplash) to see for yourself.
 
-## Simple API
+## Simple, 2 Function API
 
 Nanosplash was written from the ground up with simplicity in mind. The API is very simple and easy to use, and you can easily get started in seconds. Just install the package and start using `ns.show` and `ns.hide`. Go to [Getting started](/api/start/install.md) to see how.
 
@@ -12,6 +12,6 @@ Nanosplash was written from the ground up with simplicity in mind. The API is ve
 
 With Nanosplash you can spawn a splash element anywhere in your DOM. You can even spawn multiple splash elements if you want to. Go to the [API Documentation](/api/doc/show#show-inside) to see how.
 
-## Element recycling
+## Node recycling
 
 Instead of creating new elements all the time and exhausting DOM manipulations, we recycle and repurpose obsolete splash elements instead. For each time a splash element is created, we check for existing splash elements inside the parent element and use them instead of creating new ones.

package/docs/api/start/install.md

@@ -12,20 +12,22 @@ CSS is included inside the JS bundle. 🎉
 
 ## Install via CDN
 
-Add the following script tag to the `<head>` of your HTML document:
+Add the following script tag inside of the `<body>` tag:
 
 ```html
 <script src="https://unpkg.com/nanosplash/dist/iife/ns.iife.js"></script>
 ```
 
-```html{5}
+```html{7}
 <html>
 	<head>
 		<meta charset="UTF-8" />
 		<title>My awesome application 🚀</title>
-		<script src="https://unpkg.com/nanosplash/dist/iife/ns.iife.js"></script>
 	</head>
-	...
+	<body>
+		<script src="https://unpkg.com/nanosplash/dist/iife/ns.iife.js"></script>
+		...
+	</body>
 </html>
 ```
 

package/docs/api/start/usage.md

@@ -15,8 +15,8 @@ ns.hide()
 
 // Hide specific loading screen
 const id = ns.show('Loading')
-ns.hideId(id)
+ns.hide(id)
 
 // Hide all loading screens
-ns.hideAll()
+ns.hide('*')
 ```

package/docs/index.md

@@ -18,16 +18,16 @@ hero:
       link: /api/doc/show.md
 
 features:
-  - title: 📦 Tiny
+  - title: ✨ Tiny
     details: Less than 2KB minified and gzipped.
     link: /api/start/features#small-bundle-size
-  - title: 🍼 Simple API
+  - title: ✌️ 2 Function API
     details: Start using Nanosplash in seconds.
     link: /api/start/features#simple-api
-  - title: 🧚 Spawning
+  - title: 🪴 Spawning
     details: Spawn a splash element anywhere in your DOM.
     link: /api/start/features#spawning
-  - title: ♻️ Element recycling
+  - title: 🚀 Node recycling
     details: Nanosplash will recycle existing elements.
     link: /api/start/features#element-recycling
 ---

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nanosplash",
-	"version": "3.0.9",
+	"version": "3.1.0",
 	"author": {
 		"name": "Isak K. Hauge",
 		"email": "isakhauge@icloud.com",
@@ -14,23 +14,23 @@
 	"module": "./dist/es/ns.js",
 	"devDependencies": {
 		"@types/jsdom": "^21.1.6",
-		"@types/node": "^20.11.25",
+		"@types/node": "^20.11.28",
 		"@types/rollup": "^0.54.0",
-		"@vitest/coverage-v8": "^1.3.1",
-		"@vitest/ui": "^1.3.1",
+		"@vitest/coverage-v8": "^1.4.0",
+		"@vitest/ui": "^1.4.0",
 		"cross-env": "^7.0.3",
 		"eslint": "^8.57.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-prettier": "^5.1.3",
 		"jsdom": "^24.0.0",
-		"sass": "^1.71.1",
+		"sass": "^1.72.0",
 		"stylelint-prettier": "^5.0.0",
-		"terser": "^5.29.1",
-		"typescript": "5.3.3",
-		"typescript-eslint": "^7.1.1",
-		"vite": "^5.1.5",
+		"terser": "^5.29.2",
+		"typescript": "5.4.2",
+		"typescript-eslint": "^7.2.0",
+		"vite": "^5.1.6",
 		"vitepress": "1.0.0-rc.45",
-		"vitest": "^1.3.1"
+		"vitest": "^1.4.0"
 	},
 	"exports": {
 		".": {

package/src/style/ns.sass

@@ -1,9 +1,9 @@
 // Spinner animations:
-@keyframes ns-rotate
+@keyframes nsRotate
 	100%
 		transform: rotate(360deg)
 
-@keyframes ns-dash
+@keyframes nsDash
 	0%
 		stroke-dasharray: 1, 150
 		stroke-dashoffset: 0
@@ -14,13 +14,13 @@
 		stroke-dasharray: 90, 150
 		stroke-dashoffset: -124
 
-@keyframes ns-fade
+@keyframes nsFade
 	from
 		opacity: 0
 	to
 		opacity: 1
 
-@keyframes ns-ascend
+@keyframes nsAscend
 	from
 		opacity: 0
 		transform: translateY(13px)
@@ -85,12 +85,8 @@ body.nsh
 	@extend %flex-center-xy
 	position: absolute
 	z-index: calc(var(--zIdx) + 2)
-	animation: ns-fade 2s
-
-// Nanosplash container
-.nsc
-	@extend %flex-center-xy
-	filter: drop-shadow(0 0 0.07rem #{ rgba(Black, 0.25) })
+	animation: nsFade 2s
+	gap: var(--relSize)
 
 // Nanosplash text
 .nst
@@ -98,23 +94,22 @@ body.nsh
 	font-size: var(--size)
 	font-family: var(--font)
 	font-weight: var(--weight)
-	font-optical-sizing: auto
 	max-width: 80dvw
 	white-space: nowrap
 	text-overflow: ellipsis
 	overflow: hidden
-	margin-right: var(--relSize)
 	text-shadow: 0 0 0.06rem #{ rgba(DarkSlateGray, .25) }
-	animation: ns-ascend 500ms
+	filter: drop-shadow(0 0 0.07rem #{ rgba(Black, 0.25) })
+	animation: nsAscend 0.5s
 
 // Nanosplash spinner
 .nss
 	display: block
 	width: var(--relSize)
 	height: var(--relSize)
-	animation: ns-ascend 500ms
+	animation: nsAscend 0.5s
 	& > svg
-		animation: ns-rotate 2s linear infinite
+		animation: nsRotate 2s linear infinite
 		position: relative
 		width: inherit
 		height: inherit
@@ -122,4 +117,4 @@ body.nsh
 	& .path
 		stroke: var(--color)
 		stroke-linecap: round
-		animation: ns-dash 1.5s ease-in-out infinite
+		animation: nsDash 1.5s ease-in-out infinite

package/src/ts/Nanosplash.ts

@@ -10,20 +10,20 @@ import {
 import { version } from '../../package.json'
 
 const StyleID: string = 'nscss'
+const b = () => document.body
 
 /**
- *
+ * # Scope
+ * Creates scoped selectors.
  * @param node Node to query.
  * @returns An object containing two, slightly different functions that
  * retrieves elements from the DOM.
  */
-const scope = (node: ParentNode): ScopedSelectors => {
-	const all = (ref: string) => Array.from(node.querySelectorAll(ref))
-	return {
+const scope = (node: ParentNode): ScopedSelectors =>
+	(all => ({
 		all,
 		first: (ref: string) => all(ref)[0] ?? null,
-	}
-}
+	}))((ref: string) => Array.from(node.querySelectorAll(ref)))
 
 /**
  * # Get all
@@ -52,12 +52,8 @@ const getAllNS = (): NSElement[] => getAll('.ns') as NSElement[]
  * @param ref Element reference which could be a selector or an Element.
  * @returns The Element node or null.
  */
-const parseRef = (ref: ElementReference): Element => {
-	if (ref instanceof Element) return ref
-	const element = get(ref)
-	if (!element) throw new Error(`Selector (${ref}) returned null`)
-	return element
-}
+const parseRef = (ref: ElementReference): Element | null =>
+	ref instanceof Element ? ref : get(ref)
 
 /**
  * # Div
@@ -69,7 +65,7 @@ const div = (
 	className?: string,
 	...children: (Node | string)[]
 ): HTMLDivElement => {
-	const el = document.createElement('div')
+	const el: HTMLDivElement = document.createElement('div')
 	if (className) el.classList.add(className)
 	el.append(...children)
 	return el
@@ -88,13 +84,12 @@ const parse = (html: string): Node => {
 
 /**
  * # Create NS
- * TODO: Investigate the possibility of inheritence.
  * @returns Nanpslash DOM element.
  */
 const createNS = (): NSElement => {
 	const circle: string = '<circle class=path cx=25 cy=25 r=20 fill=none />'
 	const svg = parse(`<svg viewBox="0 0 50 50">${circle}</svg>`) as Element
-	const el = div('ns', div('nsc', div('nst'), div('nss', svg))) as NSElement
+	const el = div('ns', div('nst'), div('nss', svg)) as NSElement
 	el.nsId = Date.now()
 	return el
 }
@@ -123,8 +118,7 @@ const setNSText = (ns: NSElement, text: string): void => {
 	if (oldNst) {
 		oldNst.replaceWith(newNst)
 	} else {
-		const nsc = nsScope.first('.nsc') as Element
-		nsc.insertBefore(newNst, nsc.firstChild)
+		ns.insertBefore(newNst, ns.firstChild)
 	}
 }
 
@@ -150,9 +144,11 @@ const setNSParent = (ns: NSElement, parent: Element): void => {
  * @returns The ID if the NS element — which is a UTC integer.
  */
 const show = (text?: string, inside?: string | Element): number | null => {
-	const parent: Element = inside ? parseRef(inside) : document.body
+	const parent: Element | null = (
+		inside ? parseRef(inside) : b
+	) as Element | null
 	let ns: NSElement
-	const recycledNs = scope(parent).first('& > .ns')
+	const recycledNs = scope(parent ?? b()).first('& > .ns')
 	if (recycledNs) {
 		ns = recycledNs as NSElement
 	} else {
@@ -161,7 +157,7 @@ const show = (text?: string, inside?: string | Element): number | null => {
 	}
 	setNSText(ns, text ?? '')
 	const top: string = window.scrollY + 'px'
-	window.document.body.style.setProperty('--ns-top', top)
+	b().style.setProperty('--ns-top', top)
 	return ns.nsId
 }
 
@@ -183,37 +179,31 @@ const findNS = (id: number) => getAllNS().find(v => v.nsId === id) ?? null
 
 /**
  * # Hide
- * @param id Optional ID of a Nanosplash element.
+ * Hide agnostically in FIFO order, specifically by ID, or all by the asterisk
+ * which will delete all Nanosplashes.
+ * @param id Optional ID of a Nanosplash element or '*' .
  */
-const hide = (id?: number): void => {
-	const ns: NSElement | null = id ? findNS(id) : peek()
-	deleteNS(ns)
+const hide = (id?: number | '*'): void => {
+	if (id === '*') getAll('.ns').forEach(deleteNS)
+	else deleteNS(typeof id === 'number' ? findNS(id) : peek())
 }
 
-/**
- * # Hide All
- */
-const hideAll = (): void => getAll('.ns').forEach(deleteNS)
-
 /**
  * # Add style
  */
 const addStyle = (): void => {
 	get('#nscss')?.remove()
-	const html: string = `<style id=${StyleID}>${style}</style>`
-	document.body.append(parse(html))
+	b().append(parse(`<style id=${StyleID}>${style}</style>`))
 }
 
 /**
  * # Use NS
  * @returns Nanosplash API.
  */
-export const useNs = (): NanosplashInterface => {
-	addStyle()
-	return (window.ns = Object.freeze({
+export const useNs = (): NanosplashInterface =>
+	!!new Promise(addStyle) &&
+	(window.ns = {
 		show,
 		hide,
-		hideAll,
-		version,
-	}))
-}
+		version: version,
+	})

package/src/ts/types/NanosplashInterface.ts

@@ -1,7 +1,26 @@
 import { DOMSelector, UTCInteger } from './Types'
 
 export interface NanosplashInterface {
+	/**
+	 * # Show
+	 * Display Nanosplash inside the window.
+	 * @param {string | undefined} text Optional text
+	 * @param {string | Element | undefined} inside Optional element reference
+	 * @returns {number | null} The internal ID of the created Nanosplash.
+	 */
 	show(text?: string, inside?: DOMSelector | HTMLElement): UTCInteger | null
-	hide(id?: UTCInteger): void
-	hideAll(): void
+	/**
+	 * # Hide
+	 * Remove Nanosplash in multiple ways depending on the passed argument.
+	 * - Pass ID: Remove specific.
+	 * - Pass '*': Remove all in window.
+	 * - Pass nothing: Remove in FIFO order.
+	 * @param id The internal ID, an asterisk, or nothing.
+	 */
+	hide(id?: UTCInteger | '*'): void
+	/**
+	 * # Version
+	 * The current version of Nanosplash.
+	 */
+	version: string
 }

package/src/ts/types/Types.ts

@@ -1,6 +1,7 @@
 import { NanosplashInterface } from './NanosplashInterface'
 
-export type UTCInteger = number
+export type Integer = number
+export type UTCInteger = Integer
 export type DOMSelector = string
 export type ElementReference = DOMSelector | Element
 

package/tests/Nanosplash.spec.ts

@@ -1,15 +1,17 @@
 import { describe, it, test, expect, beforeEach } from 'vitest'
 import { useNs } from '../src/ts/Nanosplash'
 import { JSDOM } from 'jsdom'
+import { NanosplashInterface } from '../src/ts/types/NanosplashInterface'
 
-let ns
+let document: Document | null = null
+let ns: NanosplashInterface | null = null
 
 beforeEach(() => {
 	const dom = new JSDOM()
 	// @ts-ignore
 	globalThis.window = dom.window
-	globalThis.document = window.document
-	globalThis.window.ns = ns = useNs()
+	document = globalThis.document = dom.window.document
+	ns = globalThis.window.ns = useNs()
 })
 
 describe('Nanosplash API', () => {
@@ -25,10 +27,6 @@ describe('Nanosplash API', () => {
 		expect(window.ns.hide).toBeDefined()
 	})
 
-	it('should have the "hideAll" method', () => {
-		expect(window.ns.hideAll).toBeDefined()
-	})
-
 	it('should have the global instance', () => {
 		expect(window.ns).toBe(ns)
 	})