nanosplash 4.0.3 → 4.0.4

package/.github/workflows/ci.prod.yml

@@ -1,59 +1,68 @@
-name: CI Production - Build, Test, Publish
+name: CI Production
 
 on:
   pull_request:
-    branches:
-      - production
+    branches: [ production ]
 
 jobs:
   build-and-test:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Install Node.js
-        uses: actions/setup-node@v3
+      # Checking out the repository with the latest version
+      - uses: actions/checkout@v4
         with:
-          node-version: 20
-          registry-url: 'https://registry.npmjs.org'
+          ref: production
 
-      - name: Install PNPM
-        uses: pnpm/action-setup@v3
+      # Setting up the latest Node.js version
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
         with:
-          version: 8
+          node-version: 'latest'
 
-      - name: Checkout
-        uses: actions/checkout@v3
+      # Setting up the latest Bun.js version
+      - name: Set up Bun.js
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: 'latest'
 
-      - name: Set up Git and update production branch
+      # Configuring git for GitHub Actions
+      - name: Configure Git
         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 GitHub Pages
-        uses: actions/configure-pages@v3
-
-      - name: Install dependencies
-        run: pnpm install --no-frozen-lockfile
+          git config --global init.defaultBranch production
 
-      - name: Build
-        run: pnpm build
+      # Installing dependencies using Bun
+      - name: Install Dependencies
+        run: bun install
 
-      - name: Test
-        run: pnpm test
+      # Running build using Bun
+      - name: Run Build
+        run: bun run build
+  
+      # Committing build artifacts to the production branch
+      - name: Commit Build
+        run: |
+         git add .
+         git commit -m "GitHub Actions: Persist build artifacts[ci skip]" || echo "No changes to commit"
+         git push origin production
+        env:
+         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Generate Code Coverage
-        run: pnpm coverage
+      # Running Vitest with coverage using Bun
+      - name: Run Vitest with Coverage
+        run: bunx vitest run --coverage
 
-      - name: Upload coverage reports to Codecov
-        uses: codecov/codecov-action@v4.0.1
+      # Uploading coverage to Coveralls
+      - name: Upload Coverage to Coveralls
+        uses: coverallsapp/github-action@v2
         with:
-          token: ${{ secrets.CODECOV_TOKEN }}
-          slug: isakhauge/nanosplash
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          path-to-lcov: ./coverage/lcov.info
 
+      # Publishing to NPM
       - name: Publish to NPM
-        run: npm publish
+        run: bunx npm publish
         env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.prettierrc

@@ -1,12 +1,11 @@
 {
-	"tabWidth": 2,
-	"useTabs": true,
-	"singleQuote": true,
-	"bracketSpacing": true,
-	"jsxSingleQuote": true,
-	"endOfLine": "lf",
-	"trailingComma": "es5",
-	"arrowParens": "avoid",
-	"semi": false,
-	"printWidth": 80
+  "tabWidth": 2,
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "jsxSingleQuote": true,
+  "endOfLine": "lf",
+  "trailingComma": "es5",
+  "arrowParens": "avoid",
+  "semi": false,
+  "printWidth": 80
 }

package/README.md

@@ -1,90 +1,156 @@
 # Nanosplash
 
-### The tiny loading screen for web artisans
+**The tiny loading screen for web artisans**
 
-<br>
+[![CI Production: Build, Test, Publish](https://github.com/isakhauge/nanosplash/actions/workflows/ci.prod.yml/badge.svg)](https://github.com/isakhauge/nanosplash/actions/workflows/ci.prod.yml)
+[![Coverage Status](https://coveralls.io/repos/github/isakhauge/nanosplash/badge.svg?branch=production)](https://coveralls.io/github/isakhauge/nanosplash?branch=production)
 
-[![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
+## 🚀 Introduction
 
-[isakhauge.github.io/nanosplash/](https://isakhauge.github.io/nanosplash/)
+Nanosplash provides a lightweight and customizable loading screen for your web applications. Whether you want a simple spinner or a fully branded loading experience, Nanosplash makes it easy to implement and customize.
 
-## 🚀 Usage
+---
 
-### Show
+## ✨ Features
 
-#### Spinner only
+- 🔬 Tiny size: Only 3KB – ideal for lean, fast applications.
+- ⚡ High performance: Engineered for speed and responsiveness.
+- ✅ Zero dependencies: No extra baggage – pure JavaScript!
+- 🎨 Minimalistic design: Easily integrates with other designs.
+- 🚚 Exports in multiple formats: Supports ESM, CJS, and IIFE.
+- 📘 TypeScript support: Fully typed. Better DX.
+- ✌️ 2 Function API: Small, simple – just what you need.
 
-Fullscreen Nanosplash with spinner only.
+---
 
-```js
-ns.show()
+## 📦 Installation
+
+Include Nanosplash in your project via your preferred method (e.g., CDN, module bundler). Example:
+
+```html
+<script src="https://unpkg.com/nanosplash/dist/iife/ns.iife.js"></script>
 ```
 
-Nanosplash inside the given element with spinner only.
+or
 
-```js
-ns.show(null, '#my-div')
+```bash
+npm install nanosplash
 ```
 
-#### Text and spinner
+---
 
-Fullscreen Nanosplash with text and spinner.
+## 🎯 API Documentation
 
-```js
-ns.show('Hi')
-```
+### `ns.show(text?, target?)`
 
-Nanosplash inside the given element with text and spinner.
+Displays a Nanosplash.
 
-```js
-ns.show('Hi', '#my-div')
-```
+| Parameter | Type                             | Description                                                 |
+|-----------|----------------------------------|-------------------------------------------------------------|
+| `text`    | `string \| undefined`            | Optional. Text to display alongside the spinner.            |
+| `target`  | `string \| Element \| undefined` | Optional. CSS selector or an element to contain the splash. |
 
-### Hide
+#### Examples:
 
-#### Agnostic (FIFO)
+- **Fullscreen spinner only:**
 
-Remove the oldest Nanosplash residing inside the window body.
+  ```js
+  ns.show()
+  ```
 
-```js
-ns.hide()
-```
+- **Fullscreen text and spinner:**
 
-#### Specific
+  ```js
+  ns.show('Loading...')
+  ```
 
-Remove a specific Nanosplash by its ID.
+- **Spinner only within a specific element:**
 
-```js
-ns.hide(id)
-```
+  ```js
+  ns.show(null, '#my-div')
+  ```
 
-#### All
+- **Text and spinner within a specific element:**
 
-Remove all Nanosplashes.
+  ```js
+  ns.show('Please wait', '#my-div')
+  ```
 
-```js
-ns.hide('*')
-```
+---
+
+### `ns.hide(id?)`
+
+Hides or removes a Nanosplash.
+
+| Parameter | Type                  | Description                                                |
+|-----------|-----------------------|------------------------------------------------------------|
+| `id`      | `number \| undefined` | Optional. The ID of the Nanosplash to remove.              |
+
+#### Examples:
+
+- **Remove the oldest (FIFO) fullscreen Nanosplash:**
 
-## 🦄 Customization
+  ```js
+  ns.hide()
+  ```
 
-You can easily make Nanosplash look the way you want.
+- **Remove a specific Nanosplash by ID:**
 
-```scss
-// Backdrop selector
-.nsh::before
+  ```js
+  const id = ns.show() // 1700000000000
+  ns.hide(id)
+  ```
 
-// Main wrapper selector
-.ns
+- **Remove all Nanosplashes:**
 
-// Text selector
-.nst
+  ```js
+  ns.hide('*')
+  ```
 
-// Spinner selector
-.nss
+---
+
+## 🎨 Customization
+
+Nanosplash is designed to be fully customizable with CSS. You can style its key parts using these selectors:
+
+| Selector        | Description                              |
+|------------------|------------------------------------------|
+| `.nsh::before`  | Backdrop                                  |
+| `.ns`           | Main wrapper for the splash               |
+| `.nst`          | Text element                              |
+| `.nss`          | Spinner element                           |
+
+---
+
+## 🛠️ Examples
+
+Here’s a quick snippet to show a loading indicator while fetching data:
+
+```html
+<div id="my-div"></div>
+
+<script>
+  // Show a splash while loading
+  ns.show('Fetching data...', '#my-div')
+
+  fetch('/api/data')
+    .then(res => res.json())
+    .then(data => {
+      // Process data
+    })
+    .finally(() => {
+      // Hide splash
+      ns.hide()
+    })
+</script>
 ```
 
-Read more here: [Customization](https://isakhauge.github.io/nanosplash/api/start/customize.html)
+---
+
+## 💖 Contributing & Feedback
+
+Found a bug or have a feature request? Visit the [GitHub repository](https://github.com/isakhauge/nanosplash) and open an issue or pull request!
+
+---