@stackable-labs/cli-app-extension 1.10.3 → 1.12.0

package/README.md

@@ -25,8 +25,8 @@ When run without all required flags, the CLI guides you through a step-by-step p
 | 1 | **App** | Select the App you are building an Extension for (fetched live from the API) |
 | 2 | **Name** | Display name for your Extension (e.g. `My Commerce Extension`) |
 | 3 | **Targets** | Multiselect from the Surface targets/slots exposed by the selected app |
-| 4 | **Extension Port** | Dev server port for the Extension (default: `5173`) |
-| 5 | **Preview Port** | Dev server port for the Preview host (default: `5174`) |
+| 4 | **Extension Port** | Dev server port for the Extension (default: `6543`) |
+| 5 | **Preview Port** | Dev server port for the Preview host (default: `6544`) |
 | 6 | **Directory** | Output directory path (default: kebab-case of name) |
 | 7 | **Confirm** | Review all selections before scaffolding |
 
@@ -76,6 +76,43 @@ my-extension/
 └── package.json
 ```
 
+## `dev` Command
+
+Start local dev servers with a public Cloudflare tunnel for testing:
+
+```bash
+pnpm preview
+```
+
+```
+Usage: stackable-app-extension dev [options]
+
+Options:
+  --dir <path>               Project root (default: cwd)
+  --extension-port <port>    Override Extension port
+  --preview-port <port>      Override Preview port
+  --no-tunnel                Skip tunnel, just run vite dev
+  -h, --help                 Display help
+```
+
+The `dev` command:
+1. Reads `.env.stackable` for cached App/Extension context (prompts if missing)
+2. Starts Cloudflare tunnels for both extension and preview servers
+3. Starts Vite dev servers with hot-reload
+4. Displays a **Host App Query Param** you can append to your host app URL to test against the real deployed host
+
+### Host App Override
+
+The dashboard displays a query param like:
+
+```
+?_stackable_dev=ext-123%3Ahttps%3A%2F%2Fabc.trycloudflare.com
+```
+
+Append this to your deployed host app URL to override the extension's `bundleUrl` in your browser session only. The `@stackable-labs/embeddables` SDK detects this param and loads from your tunnel instead of the production bundle. No DB changes, no shared state — each developer gets isolated overrides.
+
+> **Note:** The `dev` command never updates the `bundleUrl` in the database. It is purely local.
+
 ## Development Workflow
 
 ```bash

package/dist/index.js

@@ -287,7 +287,7 @@ import { Box as Box6, Text as Text6, useFocus as useFocus2, useFocusManager as u
 import TextInput3 from "ink-text-input";
 import { useState as useState3 } from "react";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-var DEFAULT_EXTENSION_PORT = 5173;
+var DEFAULT_EXTENSION_PORT = 6543;
 var DEFAULT_PREVIEW_PORT = DEFAULT_EXTENSION_PORT + 1;
 var FieldRow = ({ label, value, onChange, onSubmit, onConfirm, placeholder, autoFocus, isFirst, isLast }) => {
   const { isFocused } = useFocus2({ autoFocus });
@@ -622,7 +622,7 @@ var UpdateSettingsPrompt = ({
             label: "Bundle URL",
             value: bundleUrlValue,
             onChange: setBundleUrlValue,
-            placeholder: "http://localhost:5173",
+            placeholder: "http://localhost:6543",
             onSubmitAll: handleSubmitAll
           }
         ),
@@ -1066,8 +1066,8 @@ var readDevContext = async (projectRoot) => {
   } catch {
   }
   const devLocalEnv = await readEnvFile(join(projectRoot, ".env.development.local"));
-  const extensionPort = parseInt(devLocalEnv.VITE_EXTENSION_PORT || env.VITE_EXTENSION_PORT || "5173", 10);
-  const previewPort = parseInt(devLocalEnv.VITE_PREVIEW_PORT || env.VITE_PREVIEW_PORT || "5174", 10);
+  const extensionPort = parseInt(devLocalEnv.VITE_EXTENSION_PORT || env.VITE_EXTENSION_PORT || "6543", 10);
+  const previewPort = parseInt(devLocalEnv.VITE_PREVIEW_PORT || env.VITE_PREVIEW_PORT || "6544", 10);
   return {
     projectRoot,
     extensionName,
@@ -1297,9 +1297,12 @@ var rewritePreviewApp = async (rootDir, targets, permissions) => {
     "Permission",
     includeInvoke ? "ActionInvokePayload" : "",
     includeDataQuery ? "ApiRequest" : "",
+    "FetchRequest",
+    "FetchResponse",
     includeToast ? "ToastPayload" : ""
   ].filter(Boolean);
   const handlers = [];
+  handlers.push("  'data.fetch': async (_extensionId: string, payload: FetchRequest): Promise<FetchResponse> => {\n    const response = await fetch(payload.url, {\n      method: payload.method ?? 'GET',\n      headers: payload.headers,\n      ...(payload.body !== undefined ? { body: JSON.stringify(payload.body) } : {}),\n    })\n    const text = await response.text()\n    let data: unknown = null\n    try {\n      data = text ? JSON.parse(text) : null\n    } catch {\n      data = text\n    }\n\n    return {\n      status: response.status,\n      ok: response.ok,\n      data,\n    }\n  },");
   if (includeDataQuery) {
     handlers.push("  'data.query': async (_payload: ApiRequest) => {\n    return mockData\n  },");
   }
@@ -1330,7 +1333,7 @@ const extensions: ExtensionRegistryEntry[] = [
   {
     id: manifest.name.toLowerCase().replace(/\\s+/g, '-'),
     manifest,
-    bundleUrl: import.meta.env.VITE_EXTENSION_BUNDLE_URL || \`http://localhost:\${import.meta.env.VITE_EXTENSION_PORT || '5173'}\`,
+    bundleUrl: import.meta.env.VITE_EXTENSION_BUNDLE_URL || \`http://localhost:\${import.meta.env.VITE_EXTENSION_PORT || '6543'}\`,
     enabled: true,
   },
 ]
@@ -1513,10 +1516,10 @@ var App = ({ command, initialName, initialExtensionId, options }) => {
   );
   const [selectedApp, setSelectedApp] = useState8(null);
   const [extensionPort, setExtensionPort] = useState8(
-    options?.extensionPort ? parseInt(options.extensionPort, 10) : 5173
+    options?.extensionPort ? parseInt(options.extensionPort, 10) : 6543
   );
   const [previewPort, setPreviewPort] = useState8(
-    options?.previewPort ? parseInt(options.previewPort, 10) : 5174
+    options?.previewPort ? parseInt(options.previewPort, 10) : 6544
   );
   const [outputDir, setOutputDir] = useState8("");
   const [progressSteps, setProgressSteps] = useState8(PROGRESS_STEPS[command]);
@@ -1628,7 +1631,8 @@ var App = ({ command, initialName, initialExtensionId, options }) => {
             name,
             version: resolvedVersion,
             targets,
-            permissions: derivePermissions2(targets)
+            permissions: derivePermissions2(targets),
+            allowedDomains: []
           },
           bundleUrl: bundleUrl || void 0,
           enabled
@@ -1656,7 +1660,8 @@ var App = ({ command, initialName, initialExtensionId, options }) => {
             name,
             version: "0.0.0",
             targets,
-            permissions: derivePermissions2(targets)
+            permissions: derivePermissions2(targets),
+            allowedDomains: []
           },
           bundleUrl: `http://localhost:${extensionPort}`
         });
@@ -2190,10 +2195,10 @@ 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) => {
+program.command("create" /* CREATE */).description("Create a new Extension project").argument("[name]", "Extension project name").option("--extension-port <port>", "Extension dev server port (default: 6543)").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 }));
 });
-program.command("scaffold" /* SCAFFOLD */).description("Scaffold a local project from an existing Extension").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((options) => {
+program.command("scaffold" /* SCAFFOLD */).description("Scaffold a local project from an existing Extension").option("--extension-port <port>", "Extension dev server port (default: 6543)").option("--preview-port <port>", "Preview dev server port").option("--skip-install", "Skip package manager install").option("--skip-git", "Skip git initialization").action((options) => {
   render(/* @__PURE__ */ jsx17(App, { command: "scaffold" /* SCAFFOLD */, options }));
 });
 program.command("update" /* UPDATE */).description("Update an existing Extension").argument("[extensionId]", "Extension ID to update").option("--app-id <id>", "Skip App selection").option("--name <name>", "New Extension name").option("--targets <targets>", "Comma-separated target slots (validated against app)").option("--bundle-url <url>", "New bundle URL").option("--enabled <bool>", "Enable/disable Extension").option("--set-version <version>", "Explicit version (skips auto-compute)").action((extensionId, options) => {

package/package.json

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