nanosplash 3.0.8 → 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.ts → config.mts}

@@ -14,49 +14,51 @@ export default defineConfig({
 			{ text: 'API documentation', link: '/api/doc/show' },
 		],
 
-		sidebar: {
-			'/api/': [
-				{
-					text: 'Get started',
-					items: [
-						{
-							text: 'Installation',
-							link: '/api/start/install',
-						},
-						{
-							text: 'Usage',
-							link: '/api/start/usage',
-						},
-						{
-							text: 'Playground',
-							link: '/api/start/playground',
-						},
-					],
-				},
-				{
-					text: 'API Documentation',
-					items: [
-						{
-							text: 'Methods',
-							items: [
-								{
-									text: 'Show',
-									link: '/api/doc/show',
-								},
-								{
-									text: 'Hide',
-									link: '/api/doc/hide',
-								},
-							],
-						},
-					],
-				},
-				{
-					text: 'Features',
-					link: '/api/start/features',
-				},
-			],
-		},
+		sidebar: [
+			{
+				text: 'Get started',
+				items: [
+					{
+						text: 'Installation',
+						link: '/api/start/install',
+					},
+					{
+						text: 'Usage',
+						link: '/api/start/usage',
+					},
+					{
+						text: 'Playground',
+						link: '/api/start/playground',
+					},
+					{
+						text: 'Customize',
+						link: '/api/start/customize',
+					},
+				],
+			},
+			{
+				text: 'API Documentation',
+				items: [
+					{
+						text: 'Methods',
+						items: [
+							{
+								text: 'Show',
+								link: '/api/doc/show',
+							},
+							{
+								text: 'Hide',
+								link: '/api/doc/hide',
+							},
+						],
+					},
+				],
+			},
+			{
+				text: 'Features',
+				link: '/api/start/features',
+			},
+		],
 
 		socialLinks: [
 			{ icon: 'github', link: 'https://github.com/isakhauge/nanosplash' },
@@ -70,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/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.hide("*")',
+}
 
 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.hide('*')
+			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.hide('*')
 	}
-	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,52 +18,31 @@ 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)
+ns.hide(id)
 ```
 
 ## Hide all
 
-Hides all Nanosplash loading screens.
+Hides all Nanosplashes in the `window`.
 
 ```ts
-ns.hideAll(): void
+ns.hide('*'): 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.show('Loading', selector)
 
 // Element
-const element = document.getElementById('my-table')
-ns.showInside(element, 'Loading')
+const element: HTMLElement = document.getElementById('my-table')
+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

@@ -2,9 +2,9 @@
 
 ## 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
+## 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>
 ```
 
@@ -45,9 +47,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.