@baskerhq/localstage 1.0.1-beta.0

package/dist/livereload/client.js

@@ -0,0 +1,205 @@
+(function () {
+  "use strict";
+
+  // Configuration
+  const config = {
+    port: (Number.parseInt(window.location.port) + 1) || "9293",
+    reconnectInterval: 2000,
+    maxReconnectAttempts: 50,
+    pingInterval: 25000,
+  };
+
+  let socket = null;
+  let reconnectAttempts = 0;
+  let pingInterval = null;
+  let isReconnecting = false;
+
+  function log(message, level) {
+    level = level || "info";
+    if (level === "error") {
+      console.error(`[LocalStage Live Reload] ${message}`);
+    }
+    else {
+      console.warn(`[LocalStage Live Reload] ${message}`);
+    }
+  }
+
+  function connect() {
+    if (socket && socket.readyState === WebSocket.OPEN) {
+      return;
+    }
+
+    const wsUrl = `ws://${window.location.hostname}:${config.port}/livereload`;
+
+    try {
+      socket = new WebSocket(wsUrl);
+    }
+    catch (error) {
+      log(`Failed to create WebSocket: ${error.message}`, "error");
+      scheduleReconnect();
+      return;
+    }
+
+    socket.onopen = function () {
+      log("Connected to live reload server");
+      reconnectAttempts = 0;
+      isReconnecting = false;
+      startPingInterval();
+    };
+
+    socket.onmessage = function (event) {
+      try {
+        const message = JSON.parse(event.data);
+        handleMessage(message);
+      }
+      catch (error) {
+        log(`Failed to parse message: ${error.message}`, "error");
+      }
+    };
+
+    socket.onclose = function (_event) {
+      log("Disconnected from live reload server");
+      stopPingInterval();
+
+      if (!isReconnecting) {
+        scheduleReconnect();
+      }
+    };
+
+    socket.onerror = function (error) {
+      log(`WebSocket error occurred: ${error?.message || "unknown"}`, "error");
+    };
+  }
+
+  function handleMessage(message) {
+    switch (message.type) {
+      case "reload":
+        log(`Reloading page due to file changes: ${(message.data.files || []).join(", ")}`);
+        showReloadNotification();
+
+        // Small delay to ensure any pending requests complete
+        setTimeout(() => {
+          window.location.reload();
+        }, 100);
+        break;
+
+      case "ping":
+        // Respond to server ping
+        if (socket && socket.readyState === WebSocket.OPEN) {
+          socket.send(JSON.stringify({
+            type: "pong",
+            data: { timestamp: Date.now() },
+          }));
+        }
+        break;
+
+      case "pong":
+        // Server responded to our ping, connection is healthy
+        break;
+
+      default:
+        log(`Unknown message type: ${message.type}`, "warn");
+    }
+  }
+
+  function scheduleReconnect() {
+    if (reconnectAttempts >= config.maxReconnectAttempts) {
+      log("Max reconnection attempts reached. Please refresh the page manually.", "error");
+      return;
+    }
+
+    isReconnecting = true;
+    reconnectAttempts++;
+
+    log(`Attempting to reconnect in ${config.reconnectInterval / 1000}s... (attempt ${reconnectAttempts}/${config.maxReconnectAttempts})`);
+
+    setTimeout(() => {
+      connect();
+    }, config.reconnectInterval);
+  }
+
+  function startPingInterval() {
+    stopPingInterval();
+
+    pingInterval = setInterval(() => {
+      if (socket && socket.readyState === WebSocket.OPEN) {
+        socket.send(JSON.stringify({
+          type: "ping",
+          data: { timestamp: Date.now() },
+        }));
+      }
+    }, config.pingInterval);
+  }
+
+  function stopPingInterval() {
+    if (pingInterval) {
+      clearInterval(pingInterval);
+      pingInterval = null;
+    }
+  }
+
+  function showReloadNotification() {
+    const notification = document.createElement("div");
+    notification.style.cssText = [
+      "position: fixed",
+      "top: 50%",
+      "left: 50%",
+      "transform: translate(-50%, -50%)",
+      "padding: 16px 24px",
+      "background: rgba(0, 0, 0, 0.8)",
+      "color: white",
+      "border-radius: 8px",
+      "font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
+      "font-size: 14px",
+      "font-weight: 500",
+      "z-index: 10001",
+      "backdrop-filter: blur(4px)",
+    ].join(";");
+
+    notification.textContent = "🔄 Reloading...";
+
+    document.body.appendChild(notification);
+
+    setTimeout(() => {
+      if (notification.parentNode) {
+        notification.parentNode.removeChild(notification);
+      }
+    }, 2000);
+  }
+
+  // Initialize when DOM is ready
+  function initialize() {
+    log("Initializing live reload client");
+    connect();
+  }
+
+  // Handle page visibility changes
+  document.addEventListener("visibilitychange", () => {
+    if (document.hidden) {
+      // Page is hidden, stop pinging
+      stopPingInterval();
+    }
+    else {
+      // Page is visible again, restart pinging if connected
+      if (socket && socket.readyState === WebSocket.OPEN) {
+        startPingInterval();
+      }
+    }
+  });
+
+  // Handle page unload
+  window.addEventListener("beforeunload", () => {
+    if (socket) {
+      socket.close();
+    }
+    stopPingInterval();
+  });
+
+  // Start when DOM is ready
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initialize);
+  }
+  else {
+    initialize();
+  }
+})();

package/package.json

@@ -0,0 +1,102 @@
+{
+  "name": "@baskerhq/localstage",
+  "type": "module",
+  "version": "1.0.1-beta.0",
+  "description": "Local development server for Basker themes - CLI tool for theme development",
+  "author": "Basker Ltd.",
+  "license": "MIT",
+  "homepage": "https://github.com/BaskerHQ/basker-cms/tree/main/packages/localstage",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/BaskerHQ/basker-cms.git",
+    "directory": "packages/localstage"
+  },
+  "bugs": {
+    "url": "https://github.com/BaskerHQ/basker-cms/issues"
+  },
+  "keywords": [
+    "basker",
+    "cms",
+    "theme",
+    "development",
+    "liquid",
+    "hono",
+    "local",
+    "cli"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "bin": {
+    "localstage": "./dist/cli.js",
+    "basker": "./dist/basker.js"
+  },
+  "files": [
+    "README.md",
+    "dist/**/*",
+    "package.json"
+  ],
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "scripts": {
+    "dev": "LOCALSTAGE_THEME_PATH=./example_theme tsx watch src/cli.ts",
+    "dev:localstage": "LOCALSTAGE_THEME_PATH=./example_theme tsx watch src/cli.ts",
+    "start": "node dist/cli.js",
+    "cli": "tsx src/cli.ts",
+    "build": "tsup",
+    "link:global": "pnpm build && pnpm link --global",
+    "install:local": "bash ./scripts/install-local-cli.sh",
+    "prepublish:check": "bash ./scripts/prepublish-check.sh",
+    "release:cli": "bash ./scripts/release-cli.sh",
+    "prepublishOnly": "npm run build",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run --passWithNoTests"
+  },
+  "dependencies": {
+    "@hono/node-server": "1.19.9",
+    "@oclif/core": "4.2.5",
+    "@payloadcms/sdk": "3.72.0",
+    "chokidar": "^3.5.3",
+    "date-fns": "4.1.0",
+    "hono": "4.11.4",
+    "liquidjs": "10.24.0",
+    "ws": "^8.18.0"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "4.16.1",
+    "@baskerhq/frontstage": "workspace:*",
+    "@baskerhq/liquidjs": "workspace:*",
+    "@baskerhq/ui": "workspace:^",
+    "@types/node": "22.13.14",
+    "eslint": "^9.34.0",
+    "eslint-plugin-import-x": "^4.15.2",
+    "eslint-plugin-jsdoc": "^51.2.3",
+    "eslint-plugin-tsdoc": "^0.4.0",
+    "javascript-obfuscator": "^4.1.0",
+    "tsup": "^8.5.1",
+    "tsx": "^4.19.4",
+    "typescript": "5.8.3"
+  },
+  "oclif": {
+    "bin": "basker",
+    "binAliases": [
+      "localstage"
+    ],
+    "commands": "./dist/commands",
+    "topicSeparator": " ",
+    "topics": {
+      "theme": {
+        "description": "Theme development commands"
+      }
+    }
+  }
+}