@stackable-labs/cli-app-extension 1.8.0 → 1.10.0

package/README.md

@@ -5,15 +5,17 @@ CLI for scaffolding new [Stackable](https://www.npmjs.com/package/@stackable-lab
 ## Quick Start
 
 ```bash
-npx @stackable-labs/cli-app-extension my-extension
+npx @stackable-labs/cli-app-extension@latest create my-extension
 ```
 
 Or run interactively with no arguments:
 
 ```bash
-npx @stackable-labs/cli-app-extension
+npx @stackable-labs/cli-app-extension@latest create
 ```
 
+> **Important:** Always include `@latest` to ensure you get the most recent version. Both `npx` and `pnpm dlx` aggressively cache packages.
+
 ## Interactive Mode
 
 When run without all required flags, the CLI guides you through a step-by-step prompt flow:
@@ -84,6 +86,27 @@ pnpm dev         # starts both Extension + Preview with hot-reload
 
 The preview host runs at the configured preview port and hot-reloads whenever the Extension changes.
 
+## Troubleshooting
+
+### Stale CLI version after update
+
+Both `npx` and `pnpm dlx` cache downloaded packages. If you're seeing an older version after a new release:
+
+**npx** — Always use `@latest` and clear the cache if needed:
+```bash
+npx @stackable-labs/cli-app-extension@latest create
+
+# If still stale, clear the npx cache:
+npx clear-npx-cache
+```
+
+**pnpm dlx** — Force a fresh resolve:
+```bash
+pnpm dlx --recreate-lockfile @stackable-labs/cli-app-extension@latest create
+```
+
+> **Note:** After a new version is published to npm, there may be a brief delay (up to ~15 minutes) before the npm CDN propagates the update.
+
 ## Requirements
 
 - Node 20+

package/dist/index.js

@@ -1941,8 +1941,8 @@ var DevDashboard = ({
       process.off("SIGINT", handler);
     };
   }, [onQuit]);
-  useInput8((input) => {
-    if (input === "q") {
+  useInput8((input, key) => {
+    if (input === "q" || key.ctrl && input === "c") {
       onQuit();
     }
   });
@@ -1952,7 +1952,7 @@ var DevDashboard = ({
       StepShell,
       {
         title: "dev",
-        hint: "Live development with tunnel",
+        hint: "Live development with Tunnel",
         footer: /* @__PURE__ */ jsxs15(Box15, { flexDirection: "column", gap: 1, children: [
           bundleUrlUpdated && /* @__PURE__ */ jsx15(Text15, { color: "green", children: "bundleUrl updated \u2713" }),
           /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Press q or Ctrl-C to quit" })
@@ -1974,9 +1974,9 @@ var DevDashboard = ({
             ] })
           ] }),
           /* @__PURE__ */ jsxs15(Box15, { flexDirection: "column", gap: 1, children: [
-            /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
+            previewTunnelUrl && /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
               /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Tunnel Dev - Preview:" }),
-              /* @__PURE__ */ jsx15(Text15, { children: previewTunnelUrl || "Connecting\u2026" })
+              /* @__PURE__ */ jsx15(Text15, { children: previewTunnelUrl })
             ] }),
             /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
               /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Local Dev - Preview:" }),
@@ -1985,9 +1985,9 @@ var DevDashboard = ({
                 previewPort
               ] })
             ] }),
-            /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
+            tunnelUrl && /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
               /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Tunnel Dev - Extension:" }),
-              /* @__PURE__ */ jsx15(Text15, { children: tunnelUrl || "Connecting\u2026" })
+              /* @__PURE__ */ jsx15(Text15, { children: tunnelUrl })
             ] }),
             /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
               /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Local Dev - Extension:" }),
@@ -1998,7 +1998,10 @@ var DevDashboard = ({
             ] }),
             /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
               /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Bundle URL:" }),
-              /* @__PURE__ */ jsx15(Text15, { children: bundleUrlUpdated ? `(${tunnelUrl}) updated \u2713` : "" })
+              /* @__PURE__ */ jsxs15(Text15, { children: [
+                tunnelUrl || `http://localhost:${extensionPort}`,
+                bundleUrlUpdated ? " (updated \u2713)" : ""
+              ] })
             ] })
           ] })
         ]
@@ -2185,13 +2188,61 @@ var DevApp = ({ options = {} }) => {
       }
     );
   }
+  if (state === "stopping") {
+    return null;
+  }
   return /* @__PURE__ */ jsx16(Box16, { children: /* @__PURE__ */ jsx16(Text16, { children: "Loading..." }) });
 };
 
+// src/lib/versionCheck.ts
+import https from "https";
+var PACKAGE_NAME = "@stackable-labs/cli-app-extension";
+var REGISTRY_URL = `https://registry.npmjs.org/${PACKAGE_NAME}/latest`;
+var TIMEOUT_MS = 3e3;
+var isNewer = (a, b) => {
+  const pa = a.split(".").map(Number);
+  const pb = b.split(".").map(Number);
+  for (let i = 0; i < 3; i++) {
+    if ((pa[i] ?? 0) > (pb[i] ?? 0)) return true;
+    if ((pa[i] ?? 0) < (pb[i] ?? 0)) return false;
+  }
+  return false;
+};
+var checkForUpdate = (currentVersion) => {
+  try {
+    const req = https.get(REGISTRY_URL, { timeout: TIMEOUT_MS }, (res) => {
+      let data = "";
+      res.on("data", (chunk) => {
+        data += chunk.toString();
+      });
+      res.on("end", () => {
+        try {
+          const { version: latest } = JSON.parse(data);
+          if (latest && latest !== currentVersion && isNewer(latest, currentVersion)) {
+            const warning = "\n\x1B[33m\u26A0  Update available: " + currentVersion + " \u2192 " + latest + "\x1B[0m\n   Run \x1B[36mnpx @stackable-labs/cli-app-extension@latest\x1B[0m to update\n";
+            console.error(warning);
+          }
+        } catch {
+        }
+      });
+    });
+    req.on("socket", (socket) => {
+      socket.unref();
+    });
+    req.on("error", () => {
+    });
+    req.on("timeout", () => {
+      req.destroy();
+    });
+  } catch {
+  }
+};
+
 // src/index.tsx
 import { jsx as jsx17 } from "react/jsx-runtime";
 var require2 = createRequire(import.meta.url);
 var { version } = require2("../package.json");
+checkForUpdate(version);
 program.name("stackable-app-extension").description("Stackable Labs - App Extension developer CLI").version(version);
 program.command("create" /* CREATE */).description("Create a new Extension project").argument("[name]", "Extension project name").option("--extension-port <port>", "Extension dev server port (default: 5173)").option("--preview-port <port>", "Preview dev server port").option("--skip-install", "Skip package manager install").option("--skip-git", "Skip git initialization").action((name, options) => {
   render(/* @__PURE__ */ jsx17(App, { command: "create" /* CREATE */, initialName: name, options }));
@@ -2203,6 +2254,6 @@ program.command("update" /* UPDATE */).description("Update an existing Extension
   render(/* @__PURE__ */ jsx17(App, { command: "update" /* UPDATE */, initialExtensionId: extensionId, options }));
 });
 program.command("dev" /* DEV */).description("Start dev servers with a public tunnel").option("--dir <path>", "Project root (default: cwd)").option("--extension-port <port>", "Override Extension port").option("--preview-port <port>", "Override Preview port").option("--no-tunnel", "Skip tunnel, just run vite dev").option("--no-update", "Skip bundleUrl update on server").option("--no-restore", "On exit, keep tunnel URL as bundleUrl").action((options) => {
-  render(/* @__PURE__ */ jsx17(DevApp, { options }));
+  render(/* @__PURE__ */ jsx17(DevApp, { options }), { exitOnCtrlC: false });
 });
 program.parse(process.argv.filter((arg) => arg !== "--"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackable-labs/cli-app-extension",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "type": "module",
   "private": false,
   "bin": {