nanosplash 4.0.2 → 4.0.3

package/.env

@@ -0,0 +1 @@
+CODECOV_TOKEN=4e686913-a962-407a-a847-7837e4f61be4

package/.github/workflows/{ci.yml → ci.prod.yml}

@@ -1,9 +1,6 @@
-name: Build and Test
+name: CI Production - Build, Test, Publish
 
 on:
-  push:
-    branches:
-      - production
   pull_request:
     branches:
       - production
@@ -13,19 +10,20 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Checkout
-        uses: actions/checkout@v3
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          registry-url: 'https://registry.npmjs.org'
 
       - name: Install PNPM
         uses: pnpm/action-setup@v3
         with:
           version: 8
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 20
-          registry-url: 'https://registry.npmjs.org'
+      - name: Checkout
+        uses: actions/checkout@v3
+
       - name: Set up Git and update production branch
         run: |
           git config --global user.name "GitHub Actions"
@@ -34,27 +32,26 @@ jobs:
           git checkout production
           git pull --no-rebase
 
-      - name: Setup Pages
+      - name: Setup GitHub Pages
         uses: actions/configure-pages@v3
 
       - name: Install dependencies
         run: pnpm install --no-frozen-lockfile
 
-      - name: Build (Vite)
+      - name: Build
         run: pnpm build
 
-      - name: Test (Vitest)
+      - name: Test
         run: pnpm test
 
-      - name: Generate Code Coverage (Vitest)
+      - name: Generate Code Coverage
         run: pnpm coverage
 
-      - name: Commit and push changes
-        run: |
-          git add .
-          git add -f coverage/**/* dist/**/*
-          git commit --allow-empty -m "Build, test, and coverage report"
-          git push
+      - name: Upload coverage reports to Codecov
+        uses: codecov/codecov-action@v4.0.1
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          slug: isakhauge/nanosplash
 
       - name: Publish to NPM
         run: npm publish

package/.github/workflows/ci.test.yml

@@ -0,0 +1,48 @@
+name: CI Test - Build, Test
+
+on:
+  pull_request:
+    branches:
+      - test
+
+jobs:
+  build-and-test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install PNPM
+        uses: pnpm/action-setup@v3
+        with:
+          version: 8
+
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up Git and update production branch
+        run: |
+          git config --global user.name "GitHub Actions"
+          git config --global user.email "actions@github.com"
+          git fetch
+          git checkout test
+          git pull --no-rebase
+
+      - name: Setup GitHub Pages
+        uses: actions/configure-pages@v3
+
+      - name: Install dependencies
+        run: pnpm install --no-frozen-lockfile
+
+      - name: Build
+        run: pnpm build
+
+      - name: Test
+        run: pnpm test
+
+      - name: Generate Code Coverage
+        run: pnpm coverage

package/.github/workflows/{vitepress.yml → vitepress.prod.yml}

@@ -41,16 +41,17 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 20
-      - name: Setup Pages
+      - name: Setup GitHub Pages
         uses: actions/configure-pages@v3
       - name: Install dependencies
         run: pnpm install --no-frozen-lockfile
       - name: Build with VitePress
         run: |
+          pnpm build:es
           pnpm docs:build
           touch docs/.vitepress/dist/.nojekyll
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v2
+        uses: actions/upload-pages-artifact@v3
         with:
           path: docs/.vitepress/dist
 
@@ -65,4 +66,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v4

package/README.md

@@ -4,7 +4,8 @@
 
 <br>
 
-[![Build](https://github.com/isakhauge/nanosplash/actions/workflows/ci.yml/badge.svg?branch=production)](https://github.com/isakhauge/nanosplash/actions/workflows/ci.yml)
+[![Build](https://github.com/isakhauge/nanosplash/actions/workflows/ci.prod.yml/badge.svg?branch=production)](https://github.com/isakhauge/nanosplash/actions/workflows/ci.prod.yml)
+[![codecov](https://codecov.io/gh/isakhauge/nanosplash/graph/badge.svg?token=KDUC5H82UE)](https://codecov.io/gh/isakhauge/nanosplash)
 
 ## 💖 Documentation
 

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

@@ -3,7 +3,7 @@ import CardGrid from './CardGrid.vue'
 import Card from './Card.vue'
 import { useNs } from '../../../../dist/es/ns'
 if (window) {
-	window.ns = useNs(window)
+	window.ns = useNs()
 }
 </script>
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nanosplash",
-	"version": "4.0.2",
+	"version": "4.0.3",
 	"author": {
 		"name": "Isak K. Hauge",
 		"email": "isakhauge@icloud.com",
@@ -13,11 +13,13 @@
 	"main": "./dist/es/ns.js",
 	"module": "./dist/es/ns.js",
 	"devDependencies": {
+		"@codecov/vite-plugin": "0.0.1-beta.5",
 		"@types/jsdom": "^21.1.6",
 		"@types/node": "^20.11.30",
 		"@vitest/coverage-v8": "^1.4.0",
 		"@vitest/ui": "^1.4.0",
 		"cross-env": "^7.0.3",
+		"dotenv": "^16.4.5",
 		"eslint": "^8.57.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-prettier": "^5.1.3",

package/src/ts/Nanosplash.ts

@@ -2,21 +2,19 @@
 import style from '../style/ns.sass?inline'
 import { NanosplashInterface } from './types/NanosplashInterface'
 import { ElementReference, NSElement } from './types/Types'
-import type { DOMWindow } from 'jsdom'
 import { version } from '../../package.json'
 
 /**
  * # Use Nanosplash
  * @returns Nanosplash API.
  */
-export const useNs = (
-	win?: (Window | (Window & typeof globalThis)) | DOMWindow
-): NanosplashInterface => {
-	const doc = (win ?? window).document
+export const useNs = (): NanosplashInterface => {
+	const doc = window.document
 	const bod = doc.body
 
+	const toArray = <T>(iter: Iterable<T> | ArrayLike<T>) => Array.from(iter)
 	const all = (node: ParentNode, ref: string) =>
-		Array.from(node.querySelectorAll(ref))
+		toArray(node.querySelectorAll(ref))
 	const first = (node: ParentNode, ref: string) => all(node, ref)[0] ?? null
 
 	/**
@@ -121,13 +119,14 @@ export const useNs = (
 	 * @returns The ID if the NS element — which is a UTC integer.
 	 */
 	const show = (text?: string, inside?: string | Element): number | null => {
-		const parent: Element | null = (
-			inside ? parseRef(inside) : bod
-		) as Element | null
+		const parent: Element = (inside ? parseRef(inside) ?? bod : bod) as Element
 		let ns: NSElement
-		const recycledNs = first(parent ?? bod, '& > .ns')
-		if (recycledNs) {
-			ns = recycledNs as NSElement
+		const recycled: Element | undefined = toArray(parent.children)
+			.filter(node => node.classList.contains('ns'))
+			.at(0)
+		const isNs = recycled?.classList.contains('ns')
+		if (isNs) {
+			ns = recycled as NSElement
 		} else {
 			ns = makeNs()
 			setNsParent(ns, parent as Element)

package/src/ts/main.ts

@@ -1,5 +1,5 @@
 // @ts-strict
 import { useNs } from './Nanosplash'
 window.addEventListener('load', function () {
-	this.ns = useNs(this)
+	this.ns = useNs()
 })

package/src/ts/types/NanosplashInterface.ts

@@ -4,11 +4,14 @@ export interface NanosplashInterface {
 	/**
 	 * # Show
 	 * Display Nanosplash inside the window.
-	 * @param {string | undefined} text Optional text
+	 * @param {string | null | undefined} text Optional text. Pass falsy to display spinner only.
 	 * @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
+	show(
+		text?: string | null | undefined,
+		inside?: DOMSelector | HTMLElement
+	): UTCInteger | null
 	/**
 	 * # Hide
 	 * Remove Nanosplash in multiple ways depending on the passed argument.

package/tests/Nanosplash.spec.ts

@@ -1,25 +1,207 @@
-import { describe, it, expect, beforeEach } from 'vitest'
-import { JSDOM } from 'jsdom'
+import { describe, it, expect } from 'vitest'
 import { useNs } from '../src/ts/Nanosplash'
+import { NSElement } from '../src/ts/types/Types'
 
-const dom = new JSDOM()
-var window = dom.window
-const ns = (window.ns = useNs(window))
+const ns = (window.ns = useNs())
+const get = (selector: string) => document.querySelector(selector)
+const getAll = (selector: string) =>
+	Array.from(document.querySelectorAll(selector))
+const allNs = () => getAll('.ns') as NSElement[]
+const nsCount = () => allNs().length
 
-describe('Nanosplash API', () => {
-	it('should be defined', () => {
+const div = (id: string) => {
+	const node = document.createElement('div')
+	node.id = id
+	return node
+}
+
+describe('Global access', () => {
+	it('should have "ns"', () => {
 		expect(window.ns).toBeDefined()
+		expect(window.ns).toBe(ns)
 	})
 
-	it('should have the "show" method', () => {
+	it('should have the "ns.show" function', () => {
 		expect(window.ns.show).toBeDefined()
+		expect(window.ns.show).toBeTypeOf('function')
 	})
 
-	it('should have the "hide" method', () => {
+	it('should have the "ns.hide" function', () => {
 		expect(window.ns.hide).toBeDefined()
+		expect(window.ns.hide).toBeTypeOf('function')
 	})
+})
 
-	it('should have the global instance', () => {
-		expect(window.ns).toBe(ns)
+describe('useNs hook', () => {
+	it('should return the Nanosplash API', () => {
+		const instance = useNs()
+		expect(instance.show).toBeTypeOf('function')
+		expect(instance.hide).toBeTypeOf('function')
+	})
+})
+
+describe('Nanosplash API', () => {
+	describe('show / hide cleanup', () => {
+		describe('show', () => {
+			it('should make the body host', () => {
+				const id = ns.show()
+				const bod = document.body
+				const bodyIsHost = bod.classList.contains('nsh')
+				expect(bodyIsHost).toBe(true)
+				ns.hide(id as number)
+				expect(nsCount()).toBe(0)
+			})
+
+			it('should create a Nanosplash element', () => {
+				const id = ns.show()
+				const nsElement = get('body > .ns') as NSElement
+				expect(nsElement).toBeInstanceOf(HTMLDivElement)
+				ns.hide(id as number)
+				expect(nsCount()).toBe(0)
+			})
+
+			it('should have the correct internal ID', () => {
+				const id = ns.show()
+				const nsElement = get('body > .ns') as NSElement
+				expect(id).toBe(nsElement.nsId)
+				ns.hide(id as number)
+				expect(nsCount()).toBe(0)
+			})
+		})
+
+		describe('hide', () => {
+			it('should be able to hide the element', () => {
+				const id = ns.show()
+				expect(nsCount()).toBeGreaterThan(0)
+				ns.hide(id as number)
+				expect(nsCount()).toBe(0)
+			})
+
+			it('should undo body as host', () => {
+				const id = ns.show()
+				ns.hide(id as number)
+				const bodyIsNoLongerHost = document.body.classList.contains('nsh')
+				expect(bodyIsNoLongerHost).toBe(false)
+				expect(nsCount()).toBe(0)
+			})
+
+			it('should remove the Nanosplash element from DOM', () => {
+				const id = ns.show()
+				const nsElement = get('body > .ns') as NSElement
+				ns.hide(id as number)
+				expect(nsElement?.isConnected).toBe(false)
+				expect(nsCount()).toBe(0)
+			})
+		})
+	})
+
+	describe('show()', () => {
+		it('should inject a Nanosplash in the body element', () => {
+			const id = ns.show()
+			const elements = allNs() as NSElement[]
+			const element = elements.find((v: NSElement) => v.nsId === id)
+			expect(element).toBeInstanceOf(HTMLDivElement)
+			ns.hide(id as number)
+			expect(nsCount()).toBe(0)
+		})
+
+		it('should only display a spinner', () => {
+			const id = ns.show()
+			const nst = get('.ns > .nst')
+			const nss = get('.ns > .nss')
+			expect(nst).toBeNull()
+			expect(nss).toBeInstanceOf(HTMLDivElement)
+			ns.hide(id as number)
+			expect(nsCount()).toBe(0)
+		})
+
+		it('should recycle elements', () => {
+			const idFirst = ns.show()
+			const idSecond = ns.show()
+			expect(nsCount()).toBe(1)
+			expect(idFirst).toBe(idSecond)
+			ns.hide()
+			ns.hide()
+			expect(nsCount()).toBe(0)
+		})
+	})
+
+	describe('show("foo", "#bar")', () => {
+		it('should display text inside #bar', () => {
+			const bar = div('bar')
+			document.body.append(bar)
+			const id = ns.show('foo', '#bar')
+			expect(nsCount()).toBe(1)
+			const selector = '#bar.nsh > .ns > .nst'
+			const nst = get(selector)
+			expect(nst).toBeInstanceOf(HTMLDivElement)
+			expect((nst as HTMLDivElement).innerHTML).toBe('foo')
+			ns.hide(id as number)
+			bar.remove()
+			expect(nsCount()).toBe(0)
+		})
+	})
+
+	describe('hide()', () => {
+		it('should hide in FIFO order', () => {
+			document.body.append(div('a'), div('b'), div('c'), div('d'))
+
+			ns.show(null, '#a')
+			ns.show(null, '#b')
+			ns.show(null, '#c')
+			ns.show(null, '#d')
+
+			const theseExist = (...ids: string[]) => ids.every(id => get(id))
+
+			expect(theseExist('#a', '#b', '#c', '#d')).toBe(true)
+			ns.hide()
+			expect(theseExist('#b', '#c', '#d')).toBe(true)
+			ns.hide()
+			expect(theseExist('#c', '#d')).toBe(true)
+			ns.hide()
+			expect(theseExist('#d')).toBe(true)
+			ns.hide()
+
+			expect(nsCount()).toBe(0)
+			getAll('#a, #b, #c, #d').forEach(node => node.remove())
+			expect(nsCount()).toBe(0)
+		})
+	})
+
+	describe('hide(id)', () => {
+		it('should delete a specific Nanosplash', () => {
+			const a = div('a')
+			const b = div('b')
+			document.body.append(a, b)
+			const idA = ns.show(null, '#a')
+			const idB = ns.show(null, '#b')
+			const bothExist = allNs().every(node => [idA, idB].includes(node.nsId))
+			expect(bothExist).toBe(true)
+			expect(nsCount()).toBe(2)
+			ns.hide(idB as number)
+			expect(nsCount()).toBe(1)
+			expect(allNs()[0].nsId).toBe(idA)
+			ns.hide(idA as number)
+			a.remove()
+			b.remove()
+			expect(nsCount()).toBe(0)
+		})
+	})
+
+	describe('hide(*)', () => {
+		it('should hide all Nanosplashes', () => {
+			document.body.append(div('a'), div('b'), div('c'))
+
+			ns.show(null, '#a')
+			ns.show(null, '#b')
+			ns.show(null, '#c')
+
+			expect(nsCount()).toBe(3)
+			ns.hide('*')
+			expect(nsCount()).toBe(0)
+
+			getAll('#a, #b, #c').forEach(node => node.remove())
+			expect(nsCount()).toBe(0)
+		})
 	})
 })

package/vite.config.ts

@@ -1,4 +1,7 @@
 import { LibraryFormats, defineConfig } from 'vite'
+import { codecovVitePlugin } from '@codecov/vite-plugin'
+import { config } from 'dotenv'
+config()
 
 const format = (process.env?.format ?? '') as LibraryFormats
 const entry = (process.env?.entry ?? '') as string
@@ -13,4 +16,18 @@ export default defineConfig({
 			fileName: 'ns',
 		},
 	},
+	test: {
+		environment: 'jsdom',
+		globals: true,
+		coverage: {
+			reporter: ['text', 'json', 'html', 'lcov'],
+		},
+	},
+	plugins: [
+		codecovVitePlugin({
+			enableBundleAnalysis: process.env.CODECOV_TOKEN !== undefined,
+			bundleName: 'nanosplash',
+			uploadToken: process.env.CODECOV_TOKEN,
+		}),
+	],
 })