nanosplash 4.0.2 → 4.0.4

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

@@ -0,0 +1,68 @@
+name: CI Production
+
+on:
+  pull_request:
+    branches: [ production ]
+
+jobs:
+  build-and-test:
+    runs-on: ubuntu-latest
+
+    steps:
+      # Checking out the repository with the latest version
+      - uses: actions/checkout@v4
+        with:
+          ref: production
+
+      # Setting up the latest Node.js version
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'latest'
+
+      # Setting up the latest Bun.js version
+      - name: Set up Bun.js
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: 'latest'
+
+      # 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 config --global init.defaultBranch production
+
+      # Installing dependencies using Bun
+      - name: Install Dependencies
+        run: bun install
+
+      # 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 }}
+
+      # Running Vitest with coverage using Bun
+      - name: Run Vitest with Coverage
+        run: bunx vitest run --coverage
+
+      # Uploading coverage to Coveralls
+      - name: Upload Coverage to Coveralls
+        uses: coverallsapp/github-action@v2
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          path-to-lcov: ./coverage/lcov.info
+
+      # Publishing to NPM
+      - name: Publish to NPM
+        run: bunx npm publish
+        env:
+          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,89 +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.yml/badge.svg?branch=production)](https://github.com/isakhauge/nanosplash/actions/workflows/ci.yml)
+---
 
-## 💖 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!
+
+---