nanosplash 3.1.0 → 4.0.0

package/.github/workflows/ci.yml

@@ -1,54 +1,61 @@
 name: Build and Test
 
 on:
-    push:
-        branches:
-            - production
-    pull_request:
-        branches:
-            - production
+  push:
+    branches:
+      - production
+  pull_request:
+    branches:
+      - production
 
 jobs:
-    build-and-test:
-        runs-on: ubuntu-latest
-
-        steps:
-            - name: Checkout
-              uses: actions/checkout@v3
-
-            - name: Install Bun
-              uses: oven-sh/setup-bun@v1
-
-            - name: Setup Node.js
-              uses: actions/setup-node@v3
-              with:
-                  node-version: 20
-
-            - 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 checkout production
-                  git fetch
-                  git pull --no-rebase
-
-            - name: Setup Pages
-              uses: actions/configure-pages@v3
-
-            - name: Install dependencies
-              run: bun install
-
-            - name: Build (Vite)
-              run: bun run build
-
-            - name: Test (Vitest)
-              run: bun run test
-
-            - name: Generate Code Coverage (Vitest)
-              run: bun run coverage
-
-            - name: Commit and push changes
-              run: |
-                  git add .
-                  git commit --allow-empty -m "Build, test, and coverage report"
-                  git push
+  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 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

@@ -3,66 +3,66 @@
 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]
+  # 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:
+  # 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
+  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
+  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@v2 # Uncomment this if you're using pnpm
-            - name: Install Bun
-              uses: oven-sh/setup-bun@v1 # Uncomment this if you're using Bun
-            - name: Setup Node
-              uses: actions/setup-node@v3
-              with:
-                  node-version: 20
-            - name: Setup Pages
-              uses: actions/configure-pages@v3
-            - name: Install dependencies
-              run: yarn install
-            - name: Build with VitePress
-              run: |
-                  bun run docs:build
-                  touch docs/.vitepress/dist/.nojekyll
-            - name: Upload artifact
-              uses: actions/upload-pages-artifact@v2
-              with:
-                  path: docs/.vitepress/dist
+  # 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
+  # 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/README.md

@@ -6,11 +6,11 @@
 
 [![Build](https://github.com/isakhauge/nanosplash/actions/workflows/ci.yml/badge.svg?branch=production)](https://github.com/isakhauge/nanosplash/actions/workflows/ci.yml)
 
-## Documentation
+## 💖 Documentation
 
 [isakhauge.github.io/nanosplash/](https://isakhauge.github.io/nanosplash/)
 
-## Usage
+## 🚀 Usage
 
 ### Show
 
@@ -67,3 +67,23 @@ Remove all Nanosplashes.
 ```js
 ns.hide('*')
 ```
+
+## 🦄 Customization
+
+You can easily make Nanosplash look the way you want.
+
+```scss
+// Backdrop selector
+.nsh::before
+
+// Main wrapper selector
+.ns
+
+// Text selector
+.nst
+
+// Spinner selector
+.nss
+```
+
+Read more here: [Customization](https://isakhauge.github.io/nanosplash/api/start/customize.html)

package/dist/cjs/ns.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v='@keyframes nsRotate{to{transform:rotate(360deg)}}@keyframes nsDash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes nsFade{0%{opacity:0}to{opacity:1}}@keyframes nsAscend{0%{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}:root{--ns-top: 0px}.ns,body.nsh,body.nsh:before,.nsh:before{width:100%;height:100%}.ns,.nsh:before{bottom:0;right:0}.ns{display:flex;justify-content:center;align-items:center}.nsh{--color: DarkSlateGray;--size: 20px;--relSize: calc(var(--size) * .9);--font: "Helvetica", "Arial", sans-serif;--weight: 400;--bg: rgba(255, 255, 255, .9);--zIdx: 999999999;--blur: blur(5px)}.nsh{position:relative;z-index:var(--zIdx)}.nsh:before{position:absolute;background-color:var(--bg);content:"";backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit}body.nsh,body.nsh:before{position:fixed;top:var(--ns-top);left:0}.ns{position:absolute;z-index:calc(var(--zIdx) + 2);animation:nsFade 2s;gap:var(--relSize)}.nst{color:var(--color);font-size:var(--size);font-family:var(--font);font-weight:var(--weight);max-width:80dvw;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-shadow:0 0 .06rem rgba(47,79,79,.25);filter:drop-shadow(0 0 .07rem rgba(0,0,0,.25));animation:nsAscend .5s}.nss{display:block;width:var(--relSize);height:var(--relSize);animation:nsAscend .5s}.nss>svg{animation:nsRotate 2s linear infinite;position:relative;width:inherit;height:inherit;stroke-width:8}.nss .path{stroke:var(--color);stroke-linecap:round;animation:nsDash 1.5s ease-in-out infinite}',y="3.1.0",m="nscss",i=()=>document.body,a=e=>(t=>({all:t,first:s=>t(s)[0]??null}))(t=>Array.from(e.querySelectorAll(t))),l=e=>a(document).all(e),d=e=>a(document).first(e),f=()=>l(".ns"),b=e=>e instanceof Element?e:d(e),r=(e,...t)=>{const s=document.createElement("div");return e&&s.classList.add(e),s.append(...t),s},h=e=>{const t=r();return t.innerHTML=e,t.firstChild},u=()=>{const t=h('<svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none /></svg>'),s=r("ns",r("nst"),r("nss",t));return s.nsId=Date.now(),s},g=()=>f().sort((e,t)=>e.nsId-t.nsId)[0]??null,w=(e,t)=>{const n=a(e).first(".nst");if(!t)return n==null?void 0:n.remove();const o=r("nst",t);n?n.replaceWith(o):e.insertBefore(o,e.firstChild)},k=(e,t)=>{const s=t.firstElementChild;s&&t.insertBefore(e,s),t.append(e),t.classList.add("nsh")},x=(e,t)=>{const s=t?b(t):i;let n;const o=a(s??i()).first("& > .ns");o?n=o:(n=u(),k(n,s)),w(n,e??"");const p=window.scrollY+"px";return i().style.setProperty("--ns-top",p),n.nsId},c=e=>{var t;(t=e==null?void 0:e.parentElement)==null||t.classList.remove("nsh"),e==null||e.remove()},S=e=>f().find(t=>t.nsId===e)??null,z=e=>{e==="*"?l(".ns").forEach(c):c(typeof e=="number"?S(e):g())},I=()=>{var e;(e=d("#nscss"))==null||e.remove(),i().append(h(`<style id=${m}>${v}</style>`))},A=()=>!!new Promise(I)&&(window.ns={show:x,hide:z,version:y});exports.useNs=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b='@keyframes nsRotate{to{transform:rotate(360deg)}}@keyframes nsDash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes nsFade{0%{opacity:0}to{opacity:1}}@keyframes nsAscend{0%{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}:root{--ns-top: 0px}.ns,body.nsh,body.nsh:before,.nsh:before{width:100%;height:100%}.ns,.nsh:before{bottom:0;right:0}.ns{display:flex;justify-content:center;align-items:center}.nsh{--color: DarkSlateGray;--size: 20px;--relSize: calc(var(--size) * .9);--font: "Helvetica", "Arial", sans-serif;--weight: 400;--bg: rgba(255, 255, 255, .9);--zIdx: 999999999;--blur: blur(5px)}.nsh{position:relative;z-index:var(--zIdx)}.nsh:before{position:absolute;background-color:var(--bg);content:"";backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit}body.nsh,body.nsh:before{position:fixed;top:var(--ns-top);left:0}.ns{position:absolute;z-index:calc(var(--zIdx) + 2);animation:nsFade 2s;gap:var(--relSize)}.nst{color:var(--color);font-size:var(--size);font-family:var(--font);font-weight:var(--weight);max-width:80dvw;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-shadow:0 0 .06rem rgba(47,79,79,.25);filter:drop-shadow(0 0 .07rem rgba(0,0,0,.25));animation:nsAscend .5s}.nss{display:block;width:var(--relSize);height:var(--relSize);animation:nsAscend .5s}.nss>svg{animation:nsRotate 2s linear infinite;position:relative;width:inherit;height:inherit;stroke-width:8}.nss .path{stroke:var(--color);stroke-linecap:round;animation:nsDash 1.5s ease-in-out infinite}',m="4.0.0",l="ns",i=document,r=i.body,a=e=>(s=>({all:s,first:t=>s(t)[0]??null}))(s=>Array.from(e.querySelectorAll(s))),f=e=>a(i).all(e),h=e=>a(i).first(e),p=()=>f(".ns"),u=e=>e instanceof Element?e:h(e),n=(e,...s)=>{const t=i.createElement("div");return e&&t.classList.add(e),t.append(...s),t},v=e=>{const s=n();return s.innerHTML=e,s.firstChild},g=()=>{const s=v('<svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none /></svg>'),t=n("ns",n("nst"),n("nss",s));return t.nsId=Date.now(),t},k=()=>p().sort((e,s)=>e.nsId-s.nsId)[0]??null,w=(e,s)=>{const t=a(e).first(".nst");if(!s)return t==null?void 0:t.remove();const o=n("nst",s);t?t.replaceWith(o):e.insertBefore(o,e.firstChild)},x=(e,s)=>{const t=s.firstElementChild;t&&s.insertBefore(e,t),s.append(e),s.classList.add("nsh")},z=(e,s)=>{const t=s?u(s):r;let o;const c=a(t??r).first("& > .ns");c?o=c:(o=g(),x(o,t)),w(o,e??"");const y=scrollY+"px";return r.style.setProperty("--ns-top",y),o.nsId},d=e=>{var s;(s=e==null?void 0:e.parentElement)==null||s.classList.remove("nsh"),e==null||e.remove()},I=e=>p().find(s=>s.nsId===e)??null,N=e=>{e==="*"?f(".ns").forEach(d):d(typeof e=="number"?I(e):k())},A=()=>{var e;(e=h("#"+l))==null||e.remove(),r.append(v(`<style id=${l}>${b}</style>`))},S=()=>(A(),{show:z,hide:N,version:m});exports.useNs=S;

package/dist/es/ns.js

@@ -1,44 +1,44 @@
-const v = '@keyframes nsRotate{to{transform:rotate(360deg)}}@keyframes nsDash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes nsFade{0%{opacity:0}to{opacity:1}}@keyframes nsAscend{0%{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}:root{--ns-top: 0px}.ns,body.nsh,body.nsh:before,.nsh:before{width:100%;height:100%}.ns,.nsh:before{bottom:0;right:0}.ns{display:flex;justify-content:center;align-items:center}.nsh{--color: DarkSlateGray;--size: 20px;--relSize: calc(var(--size) * .9);--font: "Helvetica", "Arial", sans-serif;--weight: 400;--bg: rgba(255, 255, 255, .9);--zIdx: 999999999;--blur: blur(5px)}.nsh{position:relative;z-index:var(--zIdx)}.nsh:before{position:absolute;background-color:var(--bg);content:"";backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit}body.nsh,body.nsh:before{position:fixed;top:var(--ns-top);left:0}.ns{position:absolute;z-index:calc(var(--zIdx) + 2);animation:nsFade 2s;gap:var(--relSize)}.nst{color:var(--color);font-size:var(--size);font-family:var(--font);font-weight:var(--weight);max-width:80dvw;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-shadow:0 0 .06rem rgba(47,79,79,.25);filter:drop-shadow(0 0 .07rem rgba(0,0,0,.25));animation:nsAscend .5s}.nss{display:block;width:var(--relSize);height:var(--relSize);animation:nsAscend .5s}.nss>svg{animation:nsRotate 2s linear infinite;position:relative;width:inherit;height:inherit;stroke-width:8}.nss .path{stroke:var(--color);stroke-linecap:round;animation:nsDash 1.5s ease-in-out infinite}', y = "3.1.0", m = "nscss", i = () => document.body, a = (e) => /* @__PURE__ */ ((t) => ({
-  all: t,
-  first: (s) => t(s)[0] ?? null
-}))((t) => Array.from(e.querySelectorAll(t))), l = (e) => a(document).all(e), d = (e) => a(document).first(e), f = () => l(".ns"), b = (e) => e instanceof Element ? e : d(e), r = (e, ...t) => {
-  const s = document.createElement("div");
-  return e && s.classList.add(e), s.append(...t), s;
-}, h = (e) => {
-  const t = r();
-  return t.innerHTML = e, t.firstChild;
-}, u = () => {
-  const t = h('<svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none /></svg>'), s = r("ns", r("nst"), r("nss", t));
-  return s.nsId = Date.now(), s;
-}, w = () => f().sort((e, t) => e.nsId - t.nsId)[0] ?? null, g = (e, t) => {
-  const n = a(e).first(".nst");
-  if (!t)
-    return n == null ? void 0 : n.remove();
-  const o = r("nst", t);
-  n ? n.replaceWith(o) : e.insertBefore(o, e.firstChild);
-}, k = (e, t) => {
-  const s = t.firstElementChild;
-  s && t.insertBefore(e, s), t.append(e), t.classList.add("nsh");
-}, x = (e, t) => {
-  const s = t ? b(t) : i;
-  let n;
-  const o = a(s ?? i()).first("& > .ns");
-  o ? n = o : (n = u(), k(n, s)), g(n, e ?? "");
-  const p = window.scrollY + "px";
-  return i().style.setProperty("--ns-top", p), n.nsId;
-}, c = (e) => {
-  var t;
-  (t = e == null ? void 0 : e.parentElement) == null || t.classList.remove("nsh"), e == null || e.remove();
-}, S = (e) => f().find((t) => t.nsId === e) ?? null, z = (e) => {
-  e === "*" ? l(".ns").forEach(c) : c(typeof e == "number" ? S(e) : w());
-}, I = () => {
+const b = '@keyframes nsRotate{to{transform:rotate(360deg)}}@keyframes nsDash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes nsFade{0%{opacity:0}to{opacity:1}}@keyframes nsAscend{0%{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}:root{--ns-top: 0px}.ns,body.nsh,body.nsh:before,.nsh:before{width:100%;height:100%}.ns,.nsh:before{bottom:0;right:0}.ns{display:flex;justify-content:center;align-items:center}.nsh{--color: DarkSlateGray;--size: 20px;--relSize: calc(var(--size) * .9);--font: "Helvetica", "Arial", sans-serif;--weight: 400;--bg: rgba(255, 255, 255, .9);--zIdx: 999999999;--blur: blur(5px)}.nsh{position:relative;z-index:var(--zIdx)}.nsh:before{position:absolute;background-color:var(--bg);content:"";backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit}body.nsh,body.nsh:before{position:fixed;top:var(--ns-top);left:0}.ns{position:absolute;z-index:calc(var(--zIdx) + 2);animation:nsFade 2s;gap:var(--relSize)}.nst{color:var(--color);font-size:var(--size);font-family:var(--font);font-weight:var(--weight);max-width:80dvw;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-shadow:0 0 .06rem rgba(47,79,79,.25);filter:drop-shadow(0 0 .07rem rgba(0,0,0,.25));animation:nsAscend .5s}.nss{display:block;width:var(--relSize);height:var(--relSize);animation:nsAscend .5s}.nss>svg{animation:nsRotate 2s linear infinite;position:relative;width:inherit;height:inherit;stroke-width:8}.nss .path{stroke:var(--color);stroke-linecap:round;animation:nsDash 1.5s ease-in-out infinite}', m = "4.0.0", l = "ns", i = document, r = i.body, a = (e) => /* @__PURE__ */ ((s) => ({
+  all: s,
+  first: (t) => s(t)[0] ?? null
+}))((s) => Array.from(e.querySelectorAll(s))), f = (e) => a(i).all(e), h = (e) => a(i).first(e), p = () => f(".ns"), u = (e) => e instanceof Element ? e : h(e), n = (e, ...s) => {
+  const t = i.createElement("div");
+  return e && t.classList.add(e), t.append(...s), t;
+}, v = (e) => {
+  const s = n();
+  return s.innerHTML = e, s.firstChild;
+}, g = () => {
+  const s = v('<svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none /></svg>'), t = n("ns", n("nst"), n("nss", s));
+  return t.nsId = Date.now(), t;
+}, k = () => p().sort((e, s) => e.nsId - s.nsId)[0] ?? null, w = (e, s) => {
+  const t = a(e).first(".nst");
+  if (!s)
+    return t == null ? void 0 : t.remove();
+  const o = n("nst", s);
+  t ? t.replaceWith(o) : e.insertBefore(o, e.firstChild);
+}, x = (e, s) => {
+  const t = s.firstElementChild;
+  t && s.insertBefore(e, t), s.append(e), s.classList.add("nsh");
+}, z = (e, s) => {
+  const t = s ? u(s) : r;
+  let o;
+  const c = a(t ?? r).first("& > .ns");
+  c ? o = c : (o = g(), x(o, t)), w(o, e ?? "");
+  const y = scrollY + "px";
+  return r.style.setProperty("--ns-top", y), o.nsId;
+}, d = (e) => {
+  var s;
+  (s = e == null ? void 0 : e.parentElement) == null || s.classList.remove("nsh"), e == null || e.remove();
+}, I = (e) => p().find((s) => s.nsId === e) ?? null, A = (e) => {
+  e === "*" ? f(".ns").forEach(d) : d(typeof e == "number" ? I(e) : k());
+}, N = () => {
   var e;
-  (e = d("#nscss")) == null || e.remove(), i().append(h(`<style id=${m}>${v}</style>`));
-}, A = () => !!new Promise(I) && (window.ns = {
-  show: x,
-  hide: z,
-  version: y
+  (e = h("#" + l)) == null || e.remove(), r.append(v(`<style id=${l}>${b}</style>`));
+}, S = () => (N(), {
+  show: z,
+  hide: A,
+  version: m
 });
 export {
-  A as useNs
+  S as useNs
 };

package/dist/iife/ns.iife.js

@@ -1 +1 @@
-(function(){"use strict";const p='@keyframes nsRotate{to{transform:rotate(360deg)}}@keyframes nsDash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes nsFade{0%{opacity:0}to{opacity:1}}@keyframes nsAscend{0%{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}:root{--ns-top: 0px}.ns,body.nsh,body.nsh:before,.nsh:before{width:100%;height:100%}.ns,.nsh:before{bottom:0;right:0}.ns{display:flex;justify-content:center;align-items:center}.nsh{--color: DarkSlateGray;--size: 20px;--relSize: calc(var(--size) * .9);--font: "Helvetica", "Arial", sans-serif;--weight: 400;--bg: rgba(255, 255, 255, .9);--zIdx: 999999999;--blur: blur(5px)}.nsh{position:relative;z-index:var(--zIdx)}.nsh:before{position:absolute;background-color:var(--bg);content:"";backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit}body.nsh,body.nsh:before{position:fixed;top:var(--ns-top);left:0}.ns{position:absolute;z-index:calc(var(--zIdx) + 2);animation:nsFade 2s;gap:var(--relSize)}.nst{color:var(--color);font-size:var(--size);font-family:var(--font);font-weight:var(--weight);max-width:80dvw;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-shadow:0 0 .06rem rgba(47,79,79,.25);filter:drop-shadow(0 0 .07rem rgba(0,0,0,.25));animation:nsAscend .5s}.nss{display:block;width:var(--relSize);height:var(--relSize);animation:nsAscend .5s}.nss>svg{animation:nsRotate 2s linear infinite;position:relative;width:inherit;height:inherit;stroke-width:8}.nss .path{stroke:var(--color);stroke-linecap:round;animation:nsDash 1.5s ease-in-out infinite}',v="3.1.0",y="nscss",i=()=>document.body,a=e=>(s=>({all:s,first:t=>s(t)[0]??null}))(s=>Array.from(e.querySelectorAll(s))),c=e=>a(document).all(e),l=e=>a(document).first(e),d=()=>c(".ns"),m=e=>e instanceof Element?e:l(e),o=(e,...s)=>{const t=document.createElement("div");return e&&t.classList.add(e),t.append(...s),t},f=e=>{const s=o();return s.innerHTML=e,s.firstChild},b=()=>{const s=f('<svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none /></svg>'),t=o("ns",o("nst"),o("nss",s));return t.nsId=Date.now(),t},u=()=>d().sort((e,s)=>e.nsId-s.nsId)[0]??null,w=(e,s)=>{const n=a(e).first(".nst");if(!s)return n==null?void 0:n.remove();const r=o("nst",s);n?n.replaceWith(r):e.insertBefore(r,e.firstChild)},g=(e,s)=>{const t=s.firstElementChild;t&&s.insertBefore(e,t),s.append(e),s.classList.add("nsh")},k=(e,s)=>{const t=s?m(s):i;let n;const r=a(t??i()).first("& > .ns");r?n=r:(n=b(),g(n,t)),w(n,e??"");const I=window.scrollY+"px";return i().style.setProperty("--ns-top",I),n.nsId},h=e=>{var s;(s=e==null?void 0:e.parentElement)==null||s.classList.remove("nsh"),e==null||e.remove()},x=e=>d().find(s=>s.nsId===e)??null,S=e=>{e==="*"?c(".ns").forEach(h):h(typeof e=="number"?x(e):u())},z=()=>{var e;(e=l("#nscss"))==null||e.remove(),i().append(f(`<style id=${y}>${p}</style>`))};!!new Promise(z)&&(window.ns={show:k,hide:S,version:v})})();
+(function(){"use strict";const y='@keyframes nsRotate{to{transform:rotate(360deg)}}@keyframes nsDash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes nsFade{0%{opacity:0}to{opacity:1}}@keyframes nsAscend{0%{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}:root{--ns-top: 0px}.ns,body.nsh,body.nsh:before,.nsh:before{width:100%;height:100%}.ns,.nsh:before{bottom:0;right:0}.ns{display:flex;justify-content:center;align-items:center}.nsh{--color: DarkSlateGray;--size: 20px;--relSize: calc(var(--size) * .9);--font: "Helvetica", "Arial", sans-serif;--weight: 400;--bg: rgba(255, 255, 255, .9);--zIdx: 999999999;--blur: blur(5px)}.nsh{position:relative;z-index:var(--zIdx)}.nsh:before{position:absolute;background-color:var(--bg);content:"";backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);z-index:calc(var(--zIdx) + 1);border-radius:inherit}body.nsh,body.nsh:before{position:fixed;top:var(--ns-top);left:0}.ns{position:absolute;z-index:calc(var(--zIdx) + 2);animation:nsFade 2s;gap:var(--relSize)}.nst{color:var(--color);font-size:var(--size);font-family:var(--font);font-weight:var(--weight);max-width:80dvw;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-shadow:0 0 .06rem rgba(47,79,79,.25);filter:drop-shadow(0 0 .07rem rgba(0,0,0,.25));animation:nsAscend .5s}.nss{display:block;width:var(--relSize);height:var(--relSize);animation:nsAscend .5s}.nss>svg{animation:nsRotate 2s linear infinite;position:relative;width:inherit;height:inherit;stroke-width:8}.nss .path{stroke:var(--color);stroke-linecap:round;animation:nsDash 1.5s ease-in-out infinite}',b="4.0.0",c="ns",r=document,i=r.body,a=e=>(s=>({all:s,first:t=>s(t)[0]??null}))(s=>Array.from(e.querySelectorAll(s))),l=e=>a(r).all(e),d=e=>a(r).first(e),f=()=>l(".ns"),m=e=>e instanceof Element?e:d(e),o=(e,...s)=>{const t=r.createElement("div");return e&&t.classList.add(e),t.append(...s),t},h=e=>{const s=o();return s.innerHTML=e,s.firstChild},u=()=>{const s=h('<svg viewBox="0 0 50 50"><circle class=path cx=25 cy=25 r=20 fill=none /></svg>'),t=o("ns",o("nst"),o("nss",s));return t.nsId=Date.now(),t},g=()=>f().sort((e,s)=>e.nsId-s.nsId)[0]??null,w=(e,s)=>{const t=a(e).first(".nst");if(!s)return t==null?void 0:t.remove();const n=o("nst",s);t?t.replaceWith(n):e.insertBefore(n,e.firstChild)},k=(e,s)=>{const t=s.firstElementChild;t&&s.insertBefore(e,t),s.append(e),s.classList.add("nsh")},x=(e,s)=>{const t=s?m(s):i;let n;const v=a(t??i).first("& > .ns");v?n=v:(n=u(),k(n,t)),w(n,e??"");const S=scrollY+"px";return i.style.setProperty("--ns-top",S),n.nsId},p=e=>{var s;(s=e==null?void 0:e.parentElement)==null||s.classList.remove("nsh"),e==null||e.remove()},z=e=>f().find(s=>s.nsId===e)??null,I=e=>{e==="*"?l(".ns").forEach(p):p(typeof e=="number"?z(e):g())},A=()=>{var e;(e=d("#"+c))==null||e.remove(),i.append(h(`<style id=${c}>${y}</style>`))},N=()=>(A(),{show:x,hide:I,version:b});window.ns=N()})();

package/docs/.vitepress/{config.mts → config.ts}

@@ -6,6 +6,9 @@ export default defineConfig({
 	description: 'The tiny loading screen for web artisans',
 	base: '/nanosplash/',
 	appearance: 'dark',
+	head: [
+		['script', { src: 'https://unpkg.com/nanosplash/dist/iife/ns.iife.js' }],
+	],
 	themeConfig: {
 		nav: [
 			{ text: 'Home', link: '/' },

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

@@ -1,7 +1,6 @@
 <script setup>
 import CardGrid from './CardGrid.vue'
 import Card from './Card.vue'
-import Exe from './Exe.vue'
 </script>
 
 <template>
@@ -20,7 +19,6 @@ import Exe from './Exe.vue'
 				Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam
 			</Card>
 		</CardGrid>
-		<Exe />
 	</div>
 </template>
 

package/docs/api/start/customize.md

@@ -1,6 +1,6 @@
 # Customize
 
-Stying Nanosplash to your needs is easy!
+Styling Nanosplash to your needs is easy!
 
 ```css
 /* Backdrop */

package/docs/api/start/install.md

@@ -18,15 +18,15 @@ Add the following script tag inside of the `<body>` tag:
 <script src="https://unpkg.com/nanosplash/dist/iife/ns.iife.js"></script>
 ```
 
-```html{7}
+### Example
+
+```html{6}
 <html>
 	<head>
-		<meta charset="UTF-8" />
 		<title>My awesome application 🚀</title>
 	</head>
 	<body>
 		<script src="https://unpkg.com/nanosplash/dist/iife/ns.iife.js"></script>
-		...
 	</body>
 </html>
 ```
@@ -53,5 +53,9 @@ const ns = useNs()
 ns.show('It works!')
 ```
 
-The hook will inject the Nanosplash API inside the global `window` object.
-You can now start using Nanosplash by simply calling `ns.show`.
+For ease of use, add it to the window object for global access.
+
+```js{2}
+import { useNs } from 'nanosplash'
+window.ns = useNs()
+```

package/docs/api/start/playground.md

@@ -8,4 +8,9 @@ Here you can play around with Nanosplash and see how it works.
 
 <PlayGround />
 
-Select a method from the dropdown menu above and click "Run" to see it in action.
+Open your browser console (developer tools).
+
+- macOS: `⌘` `⌥` `i`
+- Windows: `Ctrl` `⇧` `i`
+
+Try to target different elements in the DOM. Nanosplash is available in the window scope as `ns`. Give it a shot!

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nanosplash",
-	"version": "3.1.0",
+	"version": "4.0.0",
 	"author": {
 		"name": "Isak K. Hauge",
 		"email": "isakhauge@icloud.com",
@@ -14,7 +14,7 @@
 	"module": "./dist/es/ns.js",
 	"devDependencies": {
 		"@types/jsdom": "^21.1.6",
-		"@types/node": "^20.11.28",
+		"@types/node": "^20.11.30",
 		"@types/rollup": "^0.54.0",
 		"@vitest/coverage-v8": "^1.4.0",
 		"@vitest/ui": "^1.4.0",
@@ -25,7 +25,6 @@
 		"jsdom": "^24.0.0",
 		"sass": "^1.72.0",
 		"stylelint-prettier": "^5.0.0",
-		"terser": "^5.29.2",
 		"typescript": "5.4.2",
 		"typescript-eslint": "^7.2.0",
 		"vite": "^5.1.6",
@@ -70,20 +69,20 @@
 	"license": "MIT",
 	"private": false,
 	"scripts": {
-		"build": "bun build:all && bun build:docs",
-		"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",
+		"build": "pnpm build:all && pnpm build:docs",
+		"build:es": "tsc && cross-env entry=./src/ts/Nanosplash.ts format=es vite build -m production --c vite.config.ts",
+		"build:cjs": "tsc && cross-env entry=./src/ts/Nanosplash.ts format=cjs vite build -m production --c vite.config.ts",
+		"build:iife": "tsc && cross-env entry=./src/ts/main.ts format=iife vite build -m production --c vite.config.ts",
+		"build:all": "pnpm build:es && pnpm build:cjs && pnpm build:iife",
+		"build:docs": "pnpm docs:build",
 		"preview": "vite preview",
 		"test": "vitest",
 		"test:ui": "vitest --ui",
-		"lint": "bunx eslint src/ts/**/*.ts --fix",
+		"lint": "eslint src/ts/**/*.ts --fix",
 		"coverage": "vitest --coverage",
-		"docs:dev": "bun x vitepress dev docs",
-		"docs:build": "bun x vitepress build docs",
-		"docs:preview": "bun x vitepress preview docs"
+		"docs:dev": "pnpm exec vitepress dev docs",
+		"docs:build": "pnpm exec vitepress build docs",
+		"docs:preview": "pnpm exec vitepress preview docs"
 	},
 	"source": "./src/main.ts",
 	"type": "module",