baremetal.js 1.0.0 → 1.0.1

package/README.md

@@ -22,7 +22,23 @@ BareMetal.js is designed to bring Single Page Application (SPA) functionality to
 
 ### Installation
 
-No installation required! Just clone the repository or copy the `src` folder into your project.
+**Option 1: Using npm**
+If you are using a bundler (like Vite, Webpack) or modern Node.js environments:
+```bash
+npm install baremetal.js
+```
+```javascript
+import { BareMetal, loader } from 'baremetal.js';
+```
+
+**Option 2: Using jsDelivr CDN**
+To use the latest version directly in the browser without any build tools, import it via CDN:
+```javascript
+import { BareMetal, loader } from 'https://cdn.jsdelivr.net/npm/baremetal.js@latest/src/index.js';
+```
+
+**Option 3: Manual Download**
+Just clone the repository or copy the `src` folder directly into your project.
 
 ### Running the Demo
 
@@ -122,6 +138,8 @@ The `BareMetal.init(config)` method accepts the following configuration object:
 | `transition.enabled` | boolean | `false` | Enable the protected transition module. |
 | `transition.module` | string | `null` | Path to a custom transition module. |
 | `transition.simulatedDelay` | number | `0` | Artificial delay (ms) for testing transitions. |
+| `offline` | object | `{}` | Configure offline service worker support. See API docs for details. |
+| `transition.useViewTransitions` | boolean | `false` | Enables the native View Transitions API for smooth cross-fades during navigation. |
 
 ## API Reference
 

package/demo/main.js

@@ -2,7 +2,7 @@ import { BareMetal } from '../src/index.js';
 
 // Initialize the BareMetal engine with our desired config
 BareMetal.init({
-  debug: false,
+  debug: true,
   keepAliveSameModules: true,
   autoWrap: false,
   hoverPrefetch: false,

package/demo/page2.html

@@ -93,7 +93,7 @@
         Your browser does not support HTML video.
       </video>
       <br/>
-      <audio id="demo-audio" data-baremetal-preserve controls style="width: 100%; margin-top: 10px;">
+      <audio id="demo-audio" data-baremetal-preserve controls style="width: 300px; margin-top: 10px;">
         <source src="./assets/audio/darren_hirst-20-474737.mp3" type="audio/mpeg">
         Your browser does not support the audio element.
       </audio>

package/docs/api.md

@@ -15,10 +15,33 @@ Initializes the engine, sets up the Router, and binds global configurations.
   - `config.transition.enabled` *(boolean)*: Enables the protected transition module.
   - `config.transition.module` *(string)*: Optional path to a custom transition module (defaults to `/src/transition.js`).
   - `config.transition.simulatedDelay` *(number)*: Optional artificial delay in milliseconds (useful for testing animations locally).
+  - `config.transition.useViewTransitions` *(boolean)*: Enables the native View Transitions API for smooth cross-fades during navigation (default: `false`).
+- `config.offline` *(object)*: Configuration for offline Progressive Web App (PWA) support.
+  - `config.offline.enabled` *(boolean)*: Enables Service Worker registration (default: `false`).
+  - `config.offline.version` *(string)*: Version identifier for the offline cache (e.g., `'1.0.0'`). Bump this to push updates to users.
+  - `config.offline.installType` *(string)*: `'auto'` (installs silently), `'consent'` (shows a popup), or `'custom'` (triggered manually via `BareMetal.offline.install()`).
+  - `config.offline.delay` *(number)*: Milliseconds to wait before auto-install or showing the consent popup.
+  - `config.offline.showInfo` *(boolean)*: If true, displays themed toast notifications at the bottom left during installation/updates.
+  - `config.offline.assets` *(string[])*: An array of URLs to strictly pre-cache upon installation.
 
 ---
 
-## 2. Router Navigation
+## 2. Offline Manager
+
+Accessible via `BareMetal.offline` when enabled.
+
+### `offline.install()`
+Manually triggers the background download of all resources specified in `config.offline.assets`.
+
+### `offline.update()`
+Triggers a background fetch to update the cached assets based on the current `config.offline.version`.
+
+### `offline.remove()`
+Unregisters the Service Worker and deletes all offline caches.
+
+---
+
+## 3. Router Navigation
 
 ### `BareMetal.router.reload()`
 Executes a hard reload of the current SPA page by calling `window.location.reload()`. This is useful when you want to force the browser to wipe the entire SPA state and fetch fresh assets.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baremetal.js",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A lightweight, dependency-free Vanilla JavaScript SPA engine prioritizing extreme performance, native browser features, and explicit lifecycle management.",
   "main": "src/index.js",
   "type": "module",
@@ -26,4 +26,4 @@
     "url": "https://github.com/dkydivyansh/BareMetal.js/issues"
   },
   "homepage": "https://BareMetal.dkydivyansh.com"
-}
+}

package/src/loader.js

@@ -2,7 +2,7 @@ import { stateManager } from './state.js';
 
 export const Loader = {
   activeModules: {}, // { key: { path: "./dash.js", module: exportedModule } }
-  config: { keepAliveSameModules: true, debug: false, autoWrap: true, hoverPrefetch: false, showErrorNotification: false, transition: { enabled: false, simulatedDelay: 0, module: null } },
+  config: { keepAliveSameModules: true, debug: false, autoWrap: true, hoverPrefetch: false, showErrorNotification: false, transition: { enabled: false, simulatedDelay: 0, module: null, useViewTransitions: false } },
   
   setConfig(globalConfig) {
     this.config = { ...this.config, ...globalConfig };
@@ -74,14 +74,14 @@ export const Loader = {
       this.log(`Importing module: ${path}`);
       try {
         const resolvedPath = new URL(path, document.baseURI).href;
-        const noCachePath = `${resolvedPath}?t=${Date.now()}`;
+        const loadPath = this.config.debug ? `${resolvedPath}?t=${Date.now()}` : resolvedPath;
         
         let module;
 
         if (this.config.autoWrap) {
           // Fetch source to check if it needs auto-wrapping
-          const response = await fetch(noCachePath);
-          if (!response.ok) throw new Error(`Failed to fetch ${noCachePath}`);
+          const response = await fetch(loadPath);
+          if (!response.ok) throw new Error(`Failed to fetch ${loadPath}`);
           const sourceText = await response.text();
 
           const hasMount = /export\s+(function|const|let|var)\s+mount\b/.test(sourceText) || /export\s+\{.*?\bmount\b.*?\}/.test(sourceText);
@@ -101,11 +101,11 @@ export const Loader = {
             module = await import(blobUrl);
             URL.revokeObjectURL(blobUrl);
           } else {
-            module = await import(noCachePath);
+            module = await import(loadPath);
           }
         } else {
           // Auto-wrapping disabled, load natively
-          module = await import(noCachePath);
+          module = await import(loadPath);
         }
         
         if (typeof module.mount === 'function') {

package/src/router.js

@@ -192,9 +192,18 @@ export const Router = {
         stateManager.publish('DOM_SWAPPED', null);
       };
 
-      // Execute DOM swap and restore scroll synchronously
-      executeDOMSwap();
-      window.scrollTo(0, this.scrollMemory[url] || 0);
+      const doSwap = () => {
+        executeDOMSwap();
+        window.scrollTo(0, this.scrollMemory[url] || 0);
+      };
+
+      if (Loader.config.transition && Loader.config.transition.useViewTransitions && document.startViewTransition) {
+        document.startViewTransition(() => {
+          doSwap();
+        });
+      } else {
+        doSwap();
+      }
 
       // 4. Mount new modules (this emits ROUTE_END)
       await Loader.loadPrepared(modulesToLoad);
@@ -233,6 +242,11 @@ export const Router = {
         }, 4000);
       } else {
         // Formal redirect to let server handle the error
+        // FIRST: Undo the pushState so we don't leave a phantom history entry that breaks the Back button!
+        if (this.historyStack.length > 0) {
+          const prev = this.historyStack.pop();
+          history.replaceState(null, '', prev);
+        }
         window.location.assign(url);
       }
     }