@stackable-labs/cli-app-extension 1.5.0 → 1.6.1

package/dist/index.js

@@ -1787,12 +1787,23 @@ var writeDevContext = async (projectRoot, ctx) => {
 };
 
 // src/lib/tunnel.ts
-import { tunnel } from "cloudflared";
-var startTunnel = async (port) => {
-  const { url, stop } = tunnel({ "--url": `http://localhost:${port}` });
-  const resolvedUrl = await url;
-  return { url: resolvedUrl, stop };
-};
+import { Tunnel } from "cloudflared";
+var startTunnel = (port) => new Promise((resolve, reject) => {
+  const tunnel = Tunnel.quick(`http://localhost:${port}`);
+  const timeout = setTimeout(() => {
+    tunnel.stop();
+    reject(new Error("Tunnel connection timed out after 30s"));
+  }, 3e4);
+  tunnel.once("url", (url) => {
+    console.log(">>> > startTunnel > url:", { url });
+    clearTimeout(timeout);
+    resolve({ url, stop: () => tunnel.stop() });
+  });
+  tunnel.once("error", (err) => {
+    clearTimeout(timeout);
+    reject(err);
+  });
+});
 
 // src/lib/devServer.ts
 import { spawn } from "child_process";
@@ -1877,45 +1888,54 @@ var DevDashboard = ({
       onQuit();
     }
   });
-  return /* @__PURE__ */ jsxs15(Box15, { flexDirection: "column", padding: 1, children: [
-    /* @__PURE__ */ jsx15(Box15, { marginBottom: 1, children: /* @__PURE__ */ jsx15(Text15, { bold: true, color: "blue", children: "\u2500\u2500 stackable dev \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }) }),
-    /* @__PURE__ */ jsxs15(Box15, { flexDirection: "column", gap: 1, marginBottom: 1, children: [
-      /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
-        /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Extension:" }),
-        /* @__PURE__ */ jsxs15(Text15, { children: [
-          extensionName,
-          " (",
-          extensionId,
-          ")"
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
-        /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "App:" }),
-        /* @__PURE__ */ jsx15(Text15, { children: appName || appId })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs15(Box15, { flexDirection: "column", gap: 1, marginBottom: 1, children: [
-      /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
-        /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Local:" }),
-        /* @__PURE__ */ jsxs15(Text15, { children: [
-          "http://localhost:",
-          extensionPort
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
-        /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Tunnel:" }),
-        /* @__PURE__ */ jsx15(Text15, { children: tunnelUrl || "Connecting\u2026" })
-      ] }),
-      /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
-        /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Preview:" }),
-        /* @__PURE__ */ jsxs15(Text15, { children: [
-          "http://localhost:",
-          previewPort
-        ] })
-      ] })
-    ] }),
-    bundleUrlUpdated && /* @__PURE__ */ jsx15(Box15, { marginBottom: 1, children: /* @__PURE__ */ jsx15(Text15, { color: "green", children: "bundleUrl updated \u2713" }) }),
-    /* @__PURE__ */ jsx15(Box15, { children: /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Press Ctrl-C to quit" }) })
+  const previewUrl = tunnelUrl ? `${tunnelUrl.replace(/\/$/, "")}/preview` : `http://localhost:${previewPort}`;
+  return /* @__PURE__ */ jsxs15(Box15, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx15(Banner, {}),
+    /* @__PURE__ */ jsxs15(
+      StepShell,
+      {
+        title: "dev",
+        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" })
+        ] }),
+        children: [
+          /* @__PURE__ */ jsxs15(Box15, { flexDirection: "column", gap: 1, children: [
+            /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
+              /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Extension:" }),
+              /* @__PURE__ */ jsxs15(Text15, { children: [
+                extensionName,
+                " (",
+                extensionId,
+                ")"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
+              /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "App:" }),
+              /* @__PURE__ */ jsx15(Text15, { children: `${appName ? `${appName} ` : ""}(${appId})` })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs15(Box15, { flexDirection: "column", gap: 1, children: [
+            /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
+              /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Local Dev - Preview:" }),
+              /* @__PURE__ */ jsx15(Text15, { children: previewUrl })
+            ] }),
+            /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
+              /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Local Dev - Extension:" }),
+              /* @__PURE__ */ jsxs15(Text15, { children: [
+                "http://localhost:",
+                extensionPort
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs15(Box15, { gap: 2, children: [
+              /* @__PURE__ */ jsx15(Text15, { dimColor: true, children: "Tunnel Dev - Extension:" }),
+              /* @__PURE__ */ jsx15(Text15, { children: tunnelUrl || "Connecting\u2026" })
+            ] })
+          ] })
+        ]
+      }
+    )
   ] });
 };
 
@@ -1935,38 +1955,49 @@ var DevApp = ({ options = {} }) => {
   const useRestore = options.restore !== false;
   useEffect6(() => {
     const projectRoot = options.dir || process.cwd();
+    console.log(`[dev] Reading context from ${projectRoot}`);
     readDevContext(projectRoot).then((ctx) => {
+      console.log(`[dev] Context loaded: extension="${ctx.extensionName}" appId=${ctx.appId ?? "(missing)"} extensionId=${ctx.extensionId ?? "(missing)"}`);
       setDevContext(ctx);
     });
   }, [options.dir]);
   const handleSetupReady = useCallback2(async (resolved) => {
     if (!devContext) return;
     setResolvedContext(resolved);
+    console.log(`[dev] Saving context: appId=${resolved.appId} extensionId=${resolved.extensionId}`);
     await writeDevContext(devContext.projectRoot, {
       ...devContext,
       appId: resolved.appId,
       extensionId: resolved.extensionId
     });
     const extensionPort = options.extensionPort ? parseInt(options.extensionPort, 10) : devContext.extensionPort;
+    console.log(`[dev] Starting dev server in ${devContext.projectRoot}`);
     const serverHandle = startDevServer(devContext.projectRoot);
     setDevServerHandle(serverHandle);
     if (useTunnel) {
       try {
+        console.log(`[dev] Starting tunnel on port ${extensionPort}...`);
         const tunnelResult = await startTunnel(extensionPort);
+        console.log(`[dev] Tunnel ready: ${tunnelResult.url}`);
         setTunnelHandle(tunnelResult);
         setTunnelUrl(tunnelResult.url);
         if (useUpdate) {
           const originalUrl = `http://localhost:${extensionPort}`;
           setOriginalBundleUrl(originalUrl);
+          console.log(`[dev] Updating bundleUrl to ${tunnelResult.url}`);
           await updateExtension(resolved.appId, resolved.extensionId, {
             bundleUrl: tunnelResult.url
           });
+          console.log("[dev] bundleUrl updated successfully");
           setBundleUrlUpdated(true);
         }
       } catch (err) {
-        console.error("Failed to start tunnel:", err);
+        console.error("[dev] Failed to start tunnel:", err);
       }
+    } else {
+      console.log("[dev] Tunnel disabled (--no-tunnel)");
     }
+    console.log("[dev] Ready");
     setState("running");
   }, [devContext, options.extensionPort, useTunnel, useUpdate]);
   useEffect6(() => {
@@ -1980,21 +2011,27 @@ var DevApp = ({ options = {} }) => {
   const handleQuit = async () => {
     if (!devContext || !resolvedContext) return;
     setState("stopping");
+    console.log("[dev] Shutting down...");
     try {
       if (useRestore && originalBundleUrl) {
+        console.log(`[dev] Restoring bundleUrl to ${originalBundleUrl}`);
         await updateExtension(resolvedContext.appId, resolvedContext.extensionId, {
           bundleUrl: originalBundleUrl
         });
+        console.log("[dev] bundleUrl restored");
       }
       if (tunnelHandle) {
+        console.log("[dev] Stopping tunnel");
         tunnelHandle.stop();
       }
       if (devServerHandle) {
+        console.log("[dev] Stopping dev server");
         devServerHandle.stop();
       }
     } catch (err) {
-      console.error("Error during cleanup:", err);
+      console.error("[dev] Error during cleanup:", err);
     }
+    console.log("[dev] Done");
     process.exit(0);
   };
   if (state === "setup" && devContext) {
@@ -2032,7 +2069,7 @@ var DevApp = ({ options = {} }) => {
 import { jsx as jsx17 } from "react/jsx-runtime";
 var require2 = createRequire(import.meta.url);
 var { version } = require2("../package.json");
-program.name("stackable-app-extension").description("Stackable app extension developer CLI").version(version);
+program.name("stackable-app-extension").description("Stackable 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 host 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 }));
 });

package/package.json

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