nanosplash 4.0.2 → 4.0.4

package/tests/ns.spec.ts

@@ -0,0 +1,124 @@
+/// <reference types="vitest" />
+import { describe, it, expect, beforeEach } from 'vitest'
+import {useNs} from "@/composables/ns";
+import type {INSElement} from "@/interfaces/INSElement";
+import {Selectors} from "@/constants/ns";
+
+const get = (selector: string) => document.querySelector(selector)
+const getAll = (selector: string) => document.querySelectorAll(selector)
+const div = (id?: string) => {
+    const element: HTMLDivElement = document.createElement("div")
+    if (id) {
+        element.id = id
+    }
+    return element
+}
+
+describe('useNs', () => {
+    let ns: ReturnType<typeof useNs>
+
+    beforeEach(() => {
+        // Reset DOM
+        document.body.innerHTML = ''
+        ns = useNs()
+    })
+
+    describe('show', () => {
+        it('creates a new Nanosplash with text', () => {
+            const id = ns.show('Loading...')
+            const nsElement = get(Selectors.ns)
+            const textElement = nsElement?.querySelector(Selectors.nsText)
+            const spinnerElement = nsElement?.querySelector(Selectors.nsSpinner)
+
+            expect(nsElement).toBeTruthy()
+            expect(textElement?.textContent).toBe('Loading...')
+            expect(spinnerElement).toBeTruthy()
+            expect(typeof id).toBe('number')
+        })
+
+        it('creates a new Nanosplash without text', () => {
+            const id = ns.show()
+            const nsElement = get(Selectors.ns)
+            const textElement = nsElement?.querySelector(Selectors.nsText)
+            expect(nsElement).toBeTruthy()
+            expect(textElement?.textContent).toBe(undefined)
+            expect(typeof id).toBe('number')
+        })
+
+        it('places Nanosplash inside a specified element', () => {
+            const container = div('container')
+            document.body.append(container)
+
+            ns.show('Inside', '#container')
+            const hostElement = container.querySelector(Selectors.ns)
+            expect(hostElement).toBeTruthy()
+        })
+
+        it('reuses an existing Nanosplash in the same container', () => {
+            ns.show('A')
+            const firstElement = get(Selectors.ns) as INSElement
+            const firstId = firstElement.nsId
+
+            ns.show('B')
+            const secondElement = get(Selectors.ns) as INSElement
+            const secondId = secondElement.nsId
+            
+            const nsElements = getAll(Selectors.ns)
+            expect(firstId).toBe(secondId)
+            expect(nsElements.length).toBe(1)
+        })
+    })
+
+    describe('hide', () => {
+        it('removes the oldest Nanosplash element (FIFO)', () => {
+            document.body.append(div('a'), div('b'))
+            ns.show('A', '#a')
+            ns.show('B', '#b')
+            expect(getAll(Selectors.ns).length).toBe(2)
+            ns.hide()
+            expect(getAll(Selectors.ns).length).toBe(1)
+            expect(get(Selectors.nsText)?.textContent).toBe('B')
+        })
+
+        it('removes a specific Nanosplash by ID', () => {
+            document.body.append(div('a'), div('b'))
+            const idA = ns.show('A', '#a') as number
+            ns.show('B', '#b')
+            expect(getAll(Selectors.ns).length).toBe(2)
+            ns.hide(idA)
+            expect(getAll(Selectors.ns).length).toBe(1)
+            expect(get(Selectors.nsText)?.textContent).toBe('B')
+        })
+
+        it('removes all Nanosplash elements when given "*"', () => {
+            ns.show('One')
+            ns.show('Two')
+            ns.hide('*')
+            expect(getAll(Selectors.ns).length).toBe(0)
+        })
+    })
+
+    describe('style injection', () => {
+        it('injects the style element into the document', () => {
+            const styleElement = get('style#ns')
+            expect(styleElement).toBeTruthy()
+            expect(styleElement).toBeInstanceOf(HTMLStyleElement)
+        })
+
+        it('replaces an existing style element when re-invoked', () => {
+            const oldStyleElement = get('style#ns') as HTMLElement
+            useNs()
+            const newStyleElement = get('style#ns') as HTMLElement
+
+            expect(newStyleElement).toBeTruthy()
+            expect(newStyleElement).not.toBe(oldStyleElement)
+        })
+    })
+
+    describe('version', () => {
+        it('exposes the version from package.json', () => {
+            expect(typeof ns.version).toBe('string')
+            expect(ns.version).toMatch(/^\d+\.\d+\.\d+/)
+        })
+    })
+})

package/tsconfig.json

@@ -1,23 +1,31 @@
 {
-	"compilerOptions": {
-		"target": "ESNext",
-		"useDefineForClassFields": true,
-		"module": "ESNext",
-		"lib": ["ESNext", "DOM"],
-		"moduleResolution": "Node",
-		"strict": true,
-		"alwaysStrict": true,
-		"resolveJsonModule": true,
-		"isolatedModules": true,
-		"esModuleInterop": true,
-		"noEmit": true,
-		"noUnusedLocals": true,
-		"noUnusedParameters": true,
-		"noImplicitReturns": true,
-		"skipLibCheck": true,
-		"declaration": true,
-		"declarationDir": "dist/types",
-		"types": ["vite/client"]
-	},
-	"include": ["src/ts/**/*.ts"]
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": ["src"]
 }

package/vite.config.ts

@@ -1,16 +1,24 @@
-import { LibraryFormats, defineConfig } from 'vite'
+import { defineConfig, type LibraryFormats } from 'vite'
+import path from 'node:path'
+import { config } from 'dotenv'
+config()
 
+const name = 'ns'
 const format = (process.env?.format ?? '') as LibraryFormats
 const entry = (process.env?.entry ?? '') as string
 
 export default defineConfig({
-	build: {
-		outDir: `dist/${format}`,
-		lib: {
-			entry,
-			name: 'Nanosplash',
-			formats: [format] as LibraryFormats[],
-			fileName: 'ns',
-		},
-	},
+  build: {
+    lib: {
+      entry: entry, // Path to your library's entry point
+      name: name,
+      formats: [format], // ESM, CommonJS, IIFE
+      fileName: format => `${name}.${format}.js`,
+    },
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
 })

package/vitest.config.ts

@@ -0,0 +1,20 @@
+// vitest.config.ts
+import { defineConfig } from 'vitest/config'
+import path from "node:path";
+
+export default defineConfig({
+    test: {
+        environment: 'jsdom',
+        coverage: {
+            enabled: true,                      // Enable coverage collection
+            provider: 'v8',                     // Use 'v8' (default) or 'istanbul' provider
+            reporter: ['lcov'],                 // Output coverage in LCOV format
+            reportsDirectory: './coverage',     // Directory for coverage reports
+        },
+    },
+    resolve: {
+        alias: {
+            '@': path.resolve(__dirname, './src'),
+        },
+    },
+})

package/.github/workflows/ci.yml

@@ -1,62 +0,0 @@
-name: Build and Test
-
-on:
-  push:
-    branches:
-      - production
-  pull_request:
-    branches:
-      - production
-
-jobs:
-  build-and-test:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - 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: 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 production
-          git pull --no-rebase
-
-      - name: Setup Pages
-        uses: actions/configure-pages@v3
-
-      - name: Install dependencies
-        run: pnpm install --no-frozen-lockfile
-
-      - name: Build (Vite)
-        run: pnpm build
-
-      - name: Test (Vitest)
-        run: pnpm test
-
-      - name: Generate Code Coverage (Vitest)
-        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: Publish to NPM
-        run: npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}

package/.github/workflows/vitepress.yml

@@ -1,68 +0,0 @@
-# Sample workflow for building and deploying a VitePress site to GitHub Pages
-#
-name: Deploy VitePress site to Pages
-
-on:
-  # Runs on pushes targeting the `main` branch. Change this to `master` if you're
-  # using the `master` branch as the default branch.
-  push:
-    branches: [production]
-  pull_request:
-    branches: [production]
-
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
-
-# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
-# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
-concurrency:
-  group: pages
-  cancel-in-progress: false
-
-jobs:
-  # Build job
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 0 # Not needed if lastUpdated is not enabled
-      - uses: pnpm/action-setup@v3
-        with:
-          version: 8
-      - name: Setup Node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 20
-      - name: Setup Pages
-        uses: actions/configure-pages@v3
-      - name: Install dependencies
-        run: pnpm install --no-frozen-lockfile
-      - name: Build with VitePress
-        run: |
-          pnpm docs:build
-          touch docs/.vitepress/dist/.nojekyll
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v2
-        with:
-          path: docs/.vitepress/dist
-
-  # Deployment job
-  deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    needs: build
-    runs-on: ubuntu-latest
-    name: Deploy
-    steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v2

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023 Isak Hauge
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/docs/.vitepress/config.ts

@@ -1,78 +0,0 @@
-import { defineConfig } from 'vitepress'
-
-// https://vitepress.dev/reference/site-config
-export default defineConfig({
-	title: 'Nanosplash',
-	description: 'The tiny loading screen for web artisans',
-	base: '/nanosplash/',
-	appearance: 'dark',
-	themeConfig: {
-		nav: [
-			{ text: 'Home', link: '/' },
-			{ text: 'Get started', link: '/api/start/install' },
-			{ text: 'Playground', link: '/api/start/playground' },
-			{ text: 'API documentation', link: '/api/doc/show' },
-		],
-
-		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' },
-			{ icon: 'twitter', link: 'https://twitter.com/isakhauge' },
-			{ icon: 'linkedin', link: 'https://www.linkedin.com/in/isakhauge' },
-		],
-
-		search: {
-			provider: 'local',
-		},
-
-		footer: {
-			message:
-				'Made with 💖 by <a href="https://twitter.com/isakhauge">Isak Hauge</a>',
-		},
-	},
-})