npm - @baaqar/artifact-to-pwa - Versions diffs - 1.0.0 → 1.1.0 - Mend

@baaqar/artifact-to-pwa 1.0.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md CHANGED Viewed

@@ -2,6 +2,11 @@
 > Convert any Claude artifact (HTML / React / JSX) or public URL into an installable Progressive Web App — no build step, no Android Studio, no Xcode.
+[![npm version](https://img.shields.io/npm/v/artifact-to-pwa)](https://www.npmjs.com/package/artifact-to-pwa)
+[![npm downloads](https://img.shields.io/npm/dw/artifact-to-pwa)](https://www.npmjs.com/package/artifact-to-pwa)
+[![license](https://img.shields.io/npm/l/artifact-to-pwa)](./LICENSE)
+[![node](https://img.shields.io/node/v/artifact-to-pwa)](https://nodejs.org)
 ## Usage
 ```bash
@@ -37,6 +42,25 @@ my-app-pwa/
 └── README.md     ← install instructions
 ```
+## Persistent storage — automatic localStorage migration
+Artifacts that use `localStorage` (todo lists, streak trackers, heatmaps, settings)
+will have their data automatically migrated to **IndexedDB** when converted.
+No code changes needed. The tool detects `localStorage` usage and injects a
+transparent shim that:
+- keeps the exact same `localStorage` API your artifact already uses
+- stores all data in IndexedDB instead, which persists across PWA installs and updates
+- pre-populates an in-memory mirror on load so reads stay synchronous
+- briefly hides the page on startup until saved data is ready — preventing a flash of empty state
+You'll see this in the CLI output when it applies:
+```
+  ⚡ localStorage detected → auto-migrating to IndexedDB
+```
 ## How to install the PWA
 ### Desktop / Android (Chrome or Edge)

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@baaqar/artifact-to-pwa",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Convert any Claude artifact (HTML/React/JSX) or public URL into an installable PWA — no build step required",
   "type": "module",
   "bin": {
@@ -19,7 +19,9 @@
     "installable",
     "offline",
     "cli",
-    "converter"
+    "converter",
+    "indexeddb",
+    "localStorage"
   ],
   "author": "",
   "license": "MIT",

package/src/detect.js CHANGED Viewed

@@ -1,3 +1,5 @@
+import { hasLocalStorage, getStorageShim } from './storage.js';
 /**
  * Detects whether a string of source code is:
  *   "full-html"     — a complete <!DOCTYPE html> document
@@ -35,11 +37,16 @@ export function detectCodeType(code) {
 /**
  * Wraps source code into a complete, PWA-ready index.html.
- * Injects manifest link, theme-color meta, and SW registration.
+ * Injects manifest link, theme-color meta, SW registration,
+ * and — when localStorage usage is detected — an IndexedDB shim
+ * so stored data survives across origins and installs.
  */
 export function wrapCode(code, { appName, themeColor }) {
   const type = detectCodeType(code);
+  // Inject the shim as the FIRST script so it runs before any app code
+  const shim = hasLocalStorage(code) ? getStorageShim() : '';
   const headInjects = `
   <meta name="theme-color" content="${themeColor}">
   <meta name="apple-mobile-web-app-capable" content="yes">
@@ -61,11 +68,19 @@ export function wrapCode(code, { appName, themeColor }) {
   if (type === 'full-html') {
     let result = code;
-    // Inject into existing <head>
+    // Inject shim as very first thing inside <head> (before any other scripts)
+    if (shim) {
+      if (/<head[^>]*>/i.test(result)) {
+        result = result.replace(/(<head[^>]*>)/i, `$1\n  ${shim}`);
+      } else {
+        result = result.replace(/(<html[^>]*>)/i, `$1\n<head>\n  ${shim}\n</head>`);
+      }
+    }
+    // Inject PWA meta + manifest into </head>
     if (/<\/head>/i.test(result)) {
       result = result.replace(/<\/head>/i, `  ${headInjects}\n</head>`);
     } else {
-      // No </head>: inject after <html> or at top
       result = result.replace(/(<html[^>]*>)/i, `$1\n<head>\n  ${headInjects}\n</head>`);
     }
@@ -104,6 +119,7 @@ export function wrapCode(code, { appName, themeColor }) {
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>${appName}</title>
+  ${shim}
   ${headInjects}
   <!-- React + Babel (no build step) -->
   <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
@@ -136,6 +152,7 @@ ${renderLine}
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>${appName}</title>
+  ${shim}
   ${headInjects}
   ${swScript}
 </head>

package/src/generator.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { mkdirSync, writeFileSync, readFileSync, existsSync } from 'fs';
 import { join, basename, extname } from 'path';
 import { detectCodeType }                              from './detect.js';
+import { hasLocalStorage }                             from './storage.js';
 import { generateSVGIcon }                             from './icons.js';
 import { buildIndexHTML, buildManifest, buildServiceWorker, buildReadme } from './templates.js';
@@ -75,6 +76,15 @@ export async function generatePWA(source, options) {
     code = readFileSync(source, 'utf8');
     const detectedType = detectCodeType(code);
     console.log(chalk.gray(`  ↳ Detected: `) + chalk.yellow(detectedType));
+    // Warn + auto-fix localStorage usage
+    if (hasLocalStorage(code)) {
+      console.log(
+        chalk.yellow('  ⚡ localStorage detected') +
+        chalk.gray(' → auto-migrating to IndexedDB (data will persist across installs)')
+      );
+    }
     console.log();
   }

package/src/storage.js ADDED Viewed

@@ -0,0 +1,129 @@
+/**
+ * localStorage → IndexedDB bridge
+ *
+ * Problem: localStorage is tied to the page's origin (URL).
+ * When an artifact is converted to a PWA and served from a new address,
+ * it gets a fresh, empty localStorage — all saved data is lost.
+ *
+ * Solution: replace localStorage with an IndexedDB-backed shim that:
+ *   1. Keeps reads synchronous via an in-memory mirror (same API, no refactor needed)
+ *   2. Persists all writes to IndexedDB (survives installs, updates, reboots)
+ *   3. Pre-populates the mirror on load, hiding the page briefly to prevent
+ *      a flash of empty/default state before data is ready
+ *
+ * The shim is injected as the very first <script> in <head> so it runs
+ * before any application code touches window.localStorage.
+ */
+/**
+ * Returns true if the source string contains any localStorage usage.
+ * @param {string} code
+ */
+export function hasLocalStorage(code) {
+  return /localStorage/.test(code);
+}
+/**
+ * Returns a self-contained <script> block that replaces window.localStorage
+ * with an IndexedDB-backed shim. Safe to inject into any HTML document.
+ */
+export function getStorageShim() {
+  return `<script>
+/* ── artifact-to-pwa: localStorage → IndexedDB shim ── */
+(function () {
+  'use strict';
+  var DB_NAME = '__pwa_storage__';
+  var STORE   = 'kv';
+  var mem     = Object.create(null); // in-memory mirror (keeps reads sync)
+  var db      = null;
+  /* Open (or create) the IndexedDB database */
+  function openDB() {
+    return new Promise(function (resolve, reject) {
+      var req = indexedDB.open(DB_NAME, 1);
+      req.onupgradeneeded = function (e) {
+        e.target.result.createObjectStore(STORE);
+      };
+      req.onsuccess = function (e) { resolve(e.target.result); };
+      req.onerror   = function (e) { reject(e.target.error); };
+    });
+  }
+  /* Convenience: open a transaction and return the object store */
+  function store(mode) {
+    if (!db) return null;
+    try { return db.transaction(STORE, mode).objectStore(STORE); }
+    catch (e) { return null; }
+  }
+  /* Drop-in localStorage replacement */
+  var shim = {
+    getItem: function (k) {
+      return Object.prototype.hasOwnProperty.call(mem, k) ? mem[k] : null;
+    },
+    setItem: function (k, v) {
+      mem[k] = String(v);
+      var s = store('readwrite');
+      if (s) s.put(String(v), k);
+    },
+    removeItem: function (k) {
+      delete mem[k];
+      var s = store('readwrite');
+      if (s) s.delete(k);
+    },
+    clear: function () {
+      Object.keys(mem).forEach(function (k) { delete mem[k]; });
+      var s = store('readwrite');
+      if (s) s.clear();
+    },
+    key: function (n) {
+      return Object.keys(mem)[n] !== undefined ? Object.keys(mem)[n] : null;
+    },
+    get length() { return Object.keys(mem).length; }
+  };
+  /* Replace window.localStorage */
+  try {
+    Object.defineProperty(window, 'localStorage', {
+      value: shim, writable: false, configurable: false
+    });
+  } catch (e) {
+    window.localStorage = shim; // fallback for older engines
+  }
+  /*
+   * Hide the page until IndexedDB data is loaded into the mirror.
+   * This prevents a flash of empty state (e.g. blank todo list, broken streak)
+   * before the async load completes.
+   */
+  document.documentElement.style.visibility = 'hidden';
+  openDB().then(function (database) {
+    db = database;
+    var txn   = db.transaction(STORE, 'readonly');
+    var st    = txn.objectStore(STORE);
+    var vReq  = st.getAll();      // all values
+    var kReq  = st.getAllKeys();  // all keys (same order)
+    var vals, keys;
+    function tryReveal() {
+      if (vals === undefined || keys === undefined) return;
+      keys.forEach(function (k, i) { mem[k] = vals[i]; });
+      document.documentElement.style.visibility = '';
+    }
+    vReq.onsuccess = function () { vals = vReq.result; tryReveal(); };
+    kReq.onsuccess = function () { keys = kReq.result; tryReveal(); };
+    /* On any error, reveal anyway so the app isn't stuck invisible */
+    txn.onerror = function () {
+      document.documentElement.style.visibility = '';
+    };
+  }).catch(function () {
+    document.documentElement.style.visibility = '';
+  });
+}());
+</script>`;
+}