nanosplash 3.0.7 → 3.0.9

package/docs/.vitepress/theme/css/style.css

@@ -142,16 +142,117 @@
 }
 
 .vp-doc [class*='language-'] .has-highlighted-lines .line {
-	transition: filter 0.35s, opacity 0.35s;
+	transition:
+		filter 0.35s,
+		opacity 0.35s;
 }
-.vp-doc [class*='language-'] .has-highlighted-lines .line:not(.highlighted) {
+.vp-doc code:has(.highlighted) .line:not(.highlighted) {
 	filter: blur(1px);
 	opacity: 0.5;
+	transition: all 0.3s ease;
 }
-.vp-doc
-	[class*='language-']
-	.has-highlighted-lines:hover
-	.line:not(.highlighted) {
+.vp-doc code:has(.highlighted):hover .line:not(.highlighted) {
 	filter: blur(0);
 	opacity: 1;
+	transition: all 0.3s ease;
+}
+
+:root {
+	--ns-doc-glass-border: 1px solid rgba(130, 130, 130, 0.2);
+}
+
+header {
+	backdrop-filter: blur(10px) !important;
+	-webkit-backdrop-filter: blur(10px) !important;
+	border-top: var(--ns-doc-glass-border);
+	border-bottom: var(--ns-doc-glass-border);
+}
+
+.mac.dark header {
+	background-color: rgba(0, 0, 0, 0.1);
+}
+
+.mac:not(.dark) header {
+	background-color: rgba(255, 255, 255, 0.5);
+}
+
+.VPNavBar {
+	background-color: transparent !important;
+	border-bottom: 0 !important;
+}
+
+.VPNavBar .content-body {
+	background-color: transparent !important;
+	border-bottom: 0 !important;
+}
+
+/* Remove header divider */
+.VPNavBar > .divider {
+	opacity: 0;
+}
+
+.VPNavBarTitle {
+	background: var(--vp-home-hero-name-background);
+	-webkit-background-clip: text;
+	background-clip: text;
+	-webkit-text-fill-color: var(--vp-home-hero-name-color);
+}
+
+.VPNavBarTitle .title {
+	border: 0 !important;
+}
+
+.DocSearch-Button {
+	background-color: rgba(255, 255, 255, 0.05);
+	border: var(--ns-doc-glass-border);
+}
+
+.VPButton {
+	border-radius: 8px !important;
+}
+
+.VPFeature {
+	background-color: transparent !important;
+	box-shadow:
+		0 -8px 32px rgba(0, 81, 255, 0.1),
+		0 8px 32px rgba(251, 0, 255, 0.1);
+}
+
+/* Remove footer border */
+.VPFooter {
+	border-top: 0 !important;
+}
+
+/* Center footer credits */
+.VPFooter .container {
+	justify-content: center;
+}
+
+.VPLocalSearchBox .backdrop {
+	background-color: transparent !important;
+	backdrop-filter: blur(10px) !important;
+	-webkit-backdrop-filter: blur(10px) !important;
+}
+
+.VPButton {
+	border: var(--ns-doc-glass-border) !important;
+	background-color: transparent !important;
+	/* box-shadow:
+		0 2px 4px rgba(0, 0, 0, 0.025),
+		0 4px 8px rgba(0, 0, 0, 0.025),
+		0 8px 16px rgba(0, 0, 0, 0.025); */
+}
+
+.VPButton.brand {
+	background-color: #222 !important;
+}
+
+.VPLocalSearchBox .shell {
+	box-shadow:
+		0 0 2px 1px #0000000d,
+		0 4px 8px rgba(0, 0, 0, 0.05),
+		0 8px 16px rgba(0, 0, 0, 0.05),
+		0 16px 32px rgba(0, 0, 0, 0.05),
+		0 32px 64px rgba(0, 0, 0, 0.05),
+		0 64px 128px rgba(0, 0, 0, 0.05);
 }

package/docs/.vitepress/theme/vue/CardGrid.vue

@@ -9,7 +9,7 @@
 	display: grid
 	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))
 	grid-gap: 25px
-	background-image: url(https://9to5mac.com/wp-content/uploads/sites/6/2022/06/macOS-Ventura-wallpaper-1-1.jpg?quality=82&strip=all)
+	background-image: url('/macos.jpg')
 	background-size: cover
 	background-position-y: bottom
 	padding: 25px

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

@@ -1,35 +1,69 @@
 <script setup>
-import { ref, defineProps } from 'vue'
-import { Service } from '../../../../dist/es/ns'
-Service.start()
+import { ref } from 'vue'
+import { useNs } from '../../../../dist/es/ns.js'
+const ns = useNs()
 
-const props = defineProps({
-	commands: Array,
-})
+const Commands = {
+	ShowInsideA: 'ns.show("Loading A", "#a")',
+	ShowInsideB: 'ns.show("Loading B", "#b")',
+	ShowInsideC: 'ns.show("Loading C", "#c")',
+	ShowInsideD: 'ns.show("Loading D", "#d")',
+	ShowInsideWrapper: 'ns.show("Loading Wrapper", "#wrapper")',
+	ShowFullScreen: 'ns.show("Loading window")',
+	Progress: 'Progressive Demo',
+	Hide: 'ns.hide()',
+	HideAll: 'ns.hideAll()',
+}
 
 const rCommandString = ref('')
 
 const wait = ms => new Promise(r => setTimeout(r, ms))
 
-function onClickExe() {
-	const str = rCommandString.value
-	let executable = null
-	if (str.startsWith('ns.show(')) {
-		const text = /ns\.show\(['"](.+)['"]\)/.exec(str)[1]
-		executable = async () => {
-			const id = eval(str)
-			let ms = 4000
-			while (ms > 0) {
-				await wait(1000)
-				ms -= 1000
-				ns.show(`${text} (${ms / 1000})`)
+async function onClickExe() {
+	const value = rCommandString.value
+	const phrases = [
+		'Generating witty dialog',
+		'Swapping time and space',
+		'sudo rm -rf /**/*',
+		'Tokenizing real life',
+		'Pushing pixels',
+		"Don't think of purple hippos",
+		'One mississippi, two mississippi...',
+	]
+	switch (value) {
+		case Commands.ShowInsideA:
+			ns.show('Loading A', '#a')
+			break
+		case Commands.ShowInsideB:
+			ns.show('Loading B', '#b')
+			break
+		case Commands.ShowInsideC:
+			ns.show('Loading C', '#c')
+			break
+		case Commands.ShowInsideD:
+			ns.show('Loading D', '#d')
+			break
+		case Commands.ShowInsideWrapper:
+			ns.show('Loading Wrapper', '#wrapper')
+			break
+		case Commands.ShowFullScreen:
+			const id = ns.show('Loading window')
+			await wait(4000)
+			ns.hide(id)
+			break
+		case Commands.Hide:
+			ns.hide()
+			break
+		case Commands.HideAll:
+			ns.hideAll()
+			break
+		case Commands.Progress:
+			for (const phrase of phrases) {
+				ns.show(phrase)
+				await wait(1500)
 			}
-			ns.hideId(id)
-		}
-	} else {
-		executable = new Function(rCommandString.value)
+			ns.hideAll()
 	}
-	executable()
 }
 </script>
 
@@ -37,11 +71,7 @@ function onClickExe() {
 	<div class="container">
 		<select class="select" v-model="rCommandString">
 			<option value="" selected disabled>Click and select</option>
-			<option
-				v-for="(command, i) in props.commands"
-				:key="i"
-				:value="command"
-			>
+			<option v-for="(command, i) in Commands" :key="i" :value="command">
 				{{ command }}
 			</option>
 		</select>

package/docs/.vitepress/theme/vue/PlayGround.vue

@@ -2,41 +2,25 @@
 import CardGrid from './CardGrid.vue'
 import Card from './Card.vue'
 import Exe from './Exe.vue'
-
-const commands = [
-	'ns.showInside("#a", "Loading A")',
-	'ns.showInside("#b", "Loading B")',
-	'ns.showInside("#c", "Loading C")',
-	'ns.showInside("#d", "Loading D")',
-	'ns.showInside("#wrapper", "Loading Wrapper")',
-	'ns.show("Loading window")',
-	'ns.hide()',
-	'ns.hideInside("#b")',
-	'ns.hideAll()',
-]
 </script>
 
 <template>
 	<div class="playground">
 		<CardGrid id="wrapper">
 			<Card id="a">
-				Lorem ipsum dolor sit amet consectetur adipiscing elit ut
-				aliquam
+				Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam
 			</Card>
 			<Card id="b">
-				Lorem ipsum dolor sit amet consectetur adipiscing elit ut
-				aliquam
+				Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam
 			</Card>
 			<Card id="c">
-				Lorem ipsum dolor sit amet consectetur adipiscing elit ut
-				aliquam
+				Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam
 			</Card>
 			<Card id="d">
-				Lorem ipsum dolor sit amet consectetur adipiscing elit ut
-				aliquam
+				Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam
 			</Card>
 		</CardGrid>
-		<Exe :commands="commands"></Exe>
+		<Exe />
 	</div>
 </template>
 

package/docs/api/doc/hide.md

@@ -2,10 +2,10 @@
 
 ## Hide
 
-Hides the oldest loading screen (FIFO) and returns the GUID of the loading screen that was removed, or `null` if no loading screen was found.
+Hides the oldest Nanosplash (FIFO).
 
 ```ts
-ns.hide(): GUIDString | null
+ns.hide(): void
 ```
 
 ```js
@@ -18,51 +18,30 @@ ns.hide() // Hides 'c'
 ```
 
 ::: tip
-If you have multiple loading screens open at the same time, I would recommend that you hide specific elements based on their GUID or host element. See [`hideId`](#hide-by-id) and [`hideInside`](#hide-inside) for more information.
+If you have multiple Nanosplashes open at the same time, I would recommend
+that you hide specific elements based on their ID.
+See [Hide by ID](#hide-by-id) for more information.
 :::
 
 ## Hide by ID
 
-Hides the Nanosplash loading screen with the given GUID. If a loading screen matching the GUID is found, it will be removed and the same GUID will be returned. If no loading screen is found, `null` will be returned.
+Hides a Nanosplash by its ID.
 
 ```ts
-ns.hideId(guid: GUIDString): GUIDString | null
+ns.hide(id: number): number | null
 ```
 
-The show methods always retrun a GUID. This identifier can be used to hide specific loading screens.
+The show method returns the Nanosplash ID. This identifier can be
+used to hide a specific Nanosplash at a later time.
 
 ```js
 const id = ns.show('Loading')
 ns.hideId(id)
 ```
 
-## Hide inside
-
-Hides the Nanosplash loading screen inside another element — if any — that corresponds with the given element reference. Returns the GUID string of the loading screen that was hidden, or `null` if no loading screen was found inside.
-
-```ts
-ns.hideInside(ref: Reference): GUIDString | null
-```
-
-This method works almost the same way as `hideId`, but instead of using the GUID string as the identifier, it uses the host element as the identifier.
-
-```js
-const selector = '#my-table'
-ns.showInside(selector, 'Loading')
-ns.hideInside(selector)
-```
-
-You can also use the `Element` type as the reference.
-
-```js
-const element = document.getElementById('my-table')
-ns.showInside(element, 'Loading')
-ns.hideInside(element)
-```
-
 ## Hide all
 
-Hides all Nanosplash loading screens.
+Hides all Nanosplashes in the `window`.
 
 ```ts
 ns.hideAll(): void

package/docs/api/doc/show.md

@@ -2,42 +2,41 @@
 
 ## Show
 
-This method displays a fullscreen loading screen and returns a GUID string.
+This function display NS in fullscreen and returns the internal ID.
 
 ```ts
-ns.show(text?: string): GUIDString
+ns.show(text?: string): number
 ```
 
 If you enter no text, it will display the spinning wheel only.
 
 ```js
-ns.show()
+ns.show(): number
 ```
 
 If you enter text, it will display the spinning wheel adjacent to the text.
 
 ```js
-ns.show('Loading')
+ns.show('Loading'): number
 ```
 
 ## Show inside
 
-This method displays a loading screen inside an element and returns a GUID
-string. The `Reference` type is a union type of `string | Element`. A reference
-can be both a CSS selector `string` or an `Element`.
+This function display NS inside another element and returns the internal ID,
+or `null` if the reference argument does not match any node inside the DOM.
 
 ```ts
-ns.showInside(ref: Reference, text?: string): GUIDString | null
+ns.show(text?: string, ref?: Element | string): number | null
 ```
 
 ```js
-// CSS selector
-const selector = '#my-table'
-ns.showInside(selector, 'Loading')
+// DOM selector
+const selector: string = '#my-table'
+ns.showInside('Loading', selector)
 
 // Element
-const element = document.getElementById('my-table')
-ns.showInside(element, 'Loading')
+const element: HTMLElement = document.getElementById('my-table')
+ns.showInside('Loading', element)
 ```
 
 ::: tip

package/docs/api/start/features.md

@@ -2,7 +2,7 @@
 
 ## Small bundle size
 
-The Nanosplash bundle is less than 3KB 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.
+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
 

package/docs/api/start/install.md

@@ -45,9 +45,11 @@ yarn add nanosplash
 
 To import and start the Nanosplash service in your application, you need to import the Service class and start it.
 
-```js{2}
-import { Service } from 'nanosplash'
-Service.start()
+```js{2,3}
+import { useNs } from 'nanosplash'
+const ns = useNs()
+ns.show('It works!')
 ```
 
-The service will inject an instance of itself inside the global `window` object. You can now start using Nanosplash by simply calling `ns.show`.
+The hook will inject the Nanosplash API inside the global `window` object.
+You can now start using Nanosplash by simply calling `ns.show`.

package/docs/api/start/playground.md

@@ -6,6 +6,6 @@ import PlayGround from '../../.vitepress/theme/vue/PlayGround.vue'
 
 Here you can play around with Nanosplash and see how it works.
 
-<PlayGround></PlayGround>
+<PlayGround />
 
 Select a method from the dropdown menu above and click "Run" to see it in action.

package/docs/api/start/usage.md

@@ -1,6 +1,6 @@
 # Usage
 
-```js{2,5,8,11,14,18,21}
+```js{2,5,8,11,15,18}
 // Fullscreen spinning wheel
 ns.show()
 
@@ -8,14 +8,11 @@ ns.show()
 ns.show('Loading')
 
 // Display inside an element
-ns.showInside('#my-table', 'Fetching data')
+ns.show('Fetching data', '#my-table')
 
 // Hide the first created loading screen (FIFO)
 ns.hide()
 
-// Hide loading screen inside an element
-ns.hideInside('#my-table')
-
 // Hide specific loading screen
 const id = ns.show('Loading')
 ns.hideId(id)

package/docs/index.md

@@ -3,31 +3,31 @@
 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
+  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 3KB minified and gzipped.
-      link: /api/start/features#small-bundle-size
-    - title: 🍼 Simple 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: ♻️ Element recycling
-      details: Nanosplash will recycle existing elements.
-      link: /api/start/features#element-recycling
+  - title: 📦 Tiny
+    details: Less than 2KB minified and gzipped.
+    link: /api/start/features#small-bundle-size
+  - title: 🍼 Simple 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: ♻️ Element recycling
+    details: Nanosplash will recycle existing elements.
+    link: /api/start/features#element-recycling
 ---

package/eslint.config.js

@@ -0,0 +1,9 @@
+// @ts-check
+
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+);

package/package.json

@@ -1,41 +1,37 @@
 {
 	"name": "nanosplash",
-	"description": "The tiny loading screen for web artisans",
-	"private": false,
-	"version": "3.0.7",
-	"type": "module",
+	"version": "3.0.9",
 	"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"
+		"url": "git+https://github.com/isakhauge/nanosplash.git"
 	},
-	"license": "MIT",
 	"main": "./dist/es/ns.js",
 	"module": "./dist/es/ns.js",
-	"source": "./src/main.ts",
-	"unpkg": "./dist/iife/ns.iife.js",
+	"devDependencies": {
+		"@types/jsdom": "^21.1.6",
+		"@types/node": "^20.11.25",
+		"@types/rollup": "^0.54.0",
+		"@vitest/coverage-v8": "^1.3.1",
+		"@vitest/ui": "^1.3.1",
+		"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",
+		"stylelint-prettier": "^5.0.0",
+		"terser": "^5.29.1",
+		"typescript": "5.3.3",
+		"typescript-eslint": "^7.1.1",
+		"vite": "^5.1.5",
+		"vitepress": "1.0.0-rc.45",
+		"vitest": "^1.3.1"
+	},
 	"exports": {
 		".": {
 			"types": {
@@ -52,35 +48,45 @@
 			}
 		}
 	},
-	"types": "./src/ts/types/global.d.ts",
+	"description": "The tiny loading screen for web artisans",
+	"homepage": "https://isakhauge.github.io/nanosplash",
+	"keywords": [
+		"loading",
+		"loader",
+		"screen",
+		"splash",
+		"nano",
+		"nanosplash",
+		"small",
+		"tiny",
+		"es",
+		"esm",
+		"ts",
+		"typescript",
+		"iife",
+		"cdn",
+		"vite"
+	],
+	"license": "MIT",
+	"private": false,
 	"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:es": "bun x -b tsc && cross-env entry=./src/ts/Nanosplash.ts format=es bun run -b vite build -m production --c vite.config.ts",
+		"build:cjs": "bun x -b tsc && cross-env entry=./src/ts/Nanosplash.ts format=cjs bun run -b vite build -m production --c vite.config.ts",
+		"build:iife": "bun x -b tsc && cross-env entry=./src/ts/main.ts format=iife bun run -b 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",
+		"lint": "bunx eslint src/ts/**/*.ts --fix",
 		"coverage": "vitest --coverage",
-		"docs:dev": "vitepress dev docs",
-		"docs:build": "vitepress build docs",
-		"docs:preview": "vitepress preview docs"
+		"docs:dev": "bun x vitepress dev docs",
+		"docs:build": "bun x vitepress build docs",
+		"docs:preview": "bun x vitepress preview docs"
 	},
-	"devDependencies": {
-		"@types/jsdom": "^21.1.4",
-		"@types/node": "^20.8.7",
-		"@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.4",
-		"terser": "^5.22.0",
-		"typescript": "^5.2.2",
-		"vite": "^4.5.0",
-		"vitepress": "1.0.0-rc.22",
-		"vitest": "^0.34.6"
-	}
+	"source": "./src/main.ts",
+	"type": "module",
+	"types": "./src/ts/types/global.d.ts",
+	"unpkg": "./dist/iife/ns.iife.js"
 }