nanosplash 3.0.1 → 3.0.2

package/.github/workflows/ci.yml

@@ -1,48 +1,54 @@
-name: Build and Test
+name: Main Github Actions Workflow
 
 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 code
-        uses: actions/checkout@v2
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v2
-        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: Install dependencies
-        run: yarn install --frozen-lockfile
-
-      - name: Build (Vite)
-        run: yarn build
-
-      - name: Test (Vitest)
-        run: yarn test
-
-      - name: Generate Code Coverage (Vitest)
-        run: yarn 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 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

package/.github/workflows/vitepress.yml

@@ -0,0 +1,69 @@
+# 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@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
+                  cache: yarn
+            - 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
+
+    # 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/.prettierignore

@@ -0,0 +1 @@
+*.sass

package/.prettierrc

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

package/README.md

@@ -8,184 +8,23 @@
 
 <br>
 
-## Get started
+> 📣 **New in 3.0.2**
+>
+> -   CSS is included inside the ES and CJS bundles 🎉
+> -   The `ns.hide` method will now delete splash screens in a FIFO sequence.
 
-### Install via CDN
-
-When installing via CDN, you will always get the latest version, and CSS is included inside the bundle.
-
-```html
-<script src="https://unpkg.com/nanosplash/dist/latest/iife/ns.iife.js">
-```
-
-Pros:
-
-- Easy to get started.
-- Always get the latest version.
-- CSS is included inside the bundle.
-
-Cons:
-
-- Always get the latest version.
-
-### Install via NPM
-
-```bash
-yarn add nanosplash
-```
+## Usage
 
 ```js
-import { Service } from 'nanosplash'
-Service.start()
-```
-
-The CSS file is located in the following path:
-
-```text
-node_modules/nanosplash/dist/latest/es/style.css
-```
-
-### Example usage
-
-It's so simple to use.
-
-```js
-// Display a fullscreen loading screen
+// Fullscreen splash screen
 ns.show('Loading')
-
-axios.get('/api/users')
-    .then((response) => /* Do something */ )
-    .finally(() => {
-        // Hide it when you're done
-        ns.hide()
-    })
-```
-
-### TLDR
-
-```js
-// Fullscreen spinning wheel
-ns.show()
-
-// Fullscreen spinning wheel with text
-ns.show('Loading')
-
-// Display inside an element
-ns.showInside('#my-table', 'Fetching data')
-
-// Hide the last created loading screen (LIFO)
 ns.hide()
 
-// Hide loading screen inside an element
-ns.hideInside('#my-table')
-
-// Hide specific loading screen
-const id = ns.show('Loading')
-ns.hideId(id)
-
-// Hide all loading screens
-ns.hideAll()
-```
-
-## API Documentation
-
-### Show
-
-This method displays a fullscreen loading screen and returns a GUID string.
-
-```ts
-ns.show(text?: string): GUIDString
-```
-
-If you enter no text, it will display the spinning wheel only.
-
-```js
-ns.show() // Spinner only
-ns.show('Loading') // Spinner with text
-```
-
-### Show inside
-
-This method displays a fullscreen loading screen inside an element and returns a GUID string.
-
-```ts
-ns.showInside(ref: Reference, text?: string): GUIDString | null
-```
-
-The `Reference` type is a union type of `string | Element`. The `string` type is a CSS selector string. The `Element` type is a DOM element.
-
-```js
-// Both works
-const selector = '#my-table'
-const element = document.getElementById('my-table')
-ns.showInside(selector, 'Loading')
-ns.showInside(element, 'Loading')
-```
-
-### Hide
-
-Hides the last created loading screen (LIFO).
-
-```ts
-ns.hide(): GUIDString | null
-```
-
-The reason why the hide function works in a LIFO (last in first out) manner is because you should always see the loading screen that you want to hide, which will always be the last one you created.
-
-```js
-ns.show('a')
-ns.show('b')
-ns.show('c')
-ns.hide() // Hides 'c'
-ns.hide() // Hides 'b'
-ns.hide() // Hides 'a'
-```
-
-> 💡 **PRO Tip:** If you have multiple loading screens open at the same time, I would recommend that you hide specific elements based on their GUID or host element. See `hideId` and `hideInside` for more information.
-
-### Hide by ID
-
-Hides the Nanosplash loading screen with the given GUID string.
-
-```ts
-ns.hideId(guid: GUIDString): GUIDString | null
-```
-
-The show methods always retrun a GUID. This identifier can be used to hide specific loading screens.
-
-```js
-const id = ns.show('Loading')
-ns.hideId(id)
-```
-
-### Hide inside
-
-Hides the Nanosplash loading screen inside another element — if any — that corresponds with the given element reference. Returns the GUID string of the loading screen that was hidden, or null if no loading screen was found inside.
-
-```ts
-ns.hideInside(ref: Reference): GUIDString | null
-```
-
-This method works almost the same way as `hideId`, but instead of using the GUID string as the identifier, it uses the host element as the identifier.
-
-```js
-const selector = '#my-table'
-ns.showInside(selector, 'Loading')
-ns.hideInside(selector)
-```
-
-You can also use the `Element` type as the reference.
-
-```js
-const element = document.getElementById('my-table')
-ns.showInside(element, 'Loading')
-ns.hideInside(element)
+// Splash screen inside a DOM element
+ns.showInside('#my-div', 'Loading')
+ns.hide()
 ```
 
-### Hide all
+## Documentation
 
-Hide all Nanosplash loading screens.
-
-```ts
-ns.hideAll(): void
-```
+[isakhauge.github.io/nanosplash/](https://isakhauge.github.io/nanosplash/)