@ollie-shop/cli 1.4.0 → 1.4.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @ollie-shop/cli@1.4.0 build /home/runner/work/ollie-shop/ollie-shop/packages/cli
+> @ollie-shop/cli@1.4.1 build /home/runner/work/ollie-shop/ollie-shop/packages/cli
 > tsup
 
 CLI Building entry: src/index.tsx
@@ -9,5 +9,5 @@
 CLI Target: node22
 CLI Cleaning output folder
 ESM Build start
-ESM dist/index.js 93.69 KB
-ESM ⚡️ Build success in 295ms
+ESM dist/index.js 95.89 KB
+ESM ⚡️ Build success in 248ms

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @ollie-shop/cli
 
+## 1.4.1
+
+### Patch Changes
+
+- 630ae3e: Keep Studio live reload working after a component is added or removed. The dev server proxy now owns the `/esbuild` connection and re-subscribes across context recreates, so the browser's EventSource no longer drops when the esbuild context is disposed.
+
 ## 1.4.0
 
 ### Minor Changes

package/dist/index.js

@@ -700,6 +700,7 @@ async function startDevServer(options = {}) {
     ctx = null;
     if (oldCtx) await oldCtx.dispose();
     await buildAndServe(components);
+    notifyComponentsChanged(components);
   }
   await buildAndServe(await discoverComponents({ cwd, stage }));
   async function currentComponentNames() {
@@ -737,8 +738,80 @@ async function startDevServer(options = {}) {
     if (watchTimer) clearTimeout(watchTimer);
     watchTimer = setTimeout(maybeRecreate, 150);
   });
+  const sseClients = /* @__PURE__ */ new Set();
+  let upstreamReq = null;
+  let upstreamRetry = null;
+  function broadcast(chunk) {
+    for (const client of sseClients) {
+      if (!client.writableEnded) client.write(chunk);
+    }
+  }
+  function connectUpstream() {
+    if (upstreamReq || sseClients.size === 0) return;
+    const req = http.request(
+      {
+        hostname: host,
+        port: internalPort,
+        path: "/esbuild",
+        method: "GET",
+        headers: { accept: "text/event-stream" }
+      },
+      (upstream) => {
+        upstream.on("data", broadcast);
+        upstream.on("close", onUpstreamLost);
+        upstream.on("error", onUpstreamLost);
+      }
+    );
+    req.on("error", onUpstreamLost);
+    req.end();
+    upstreamReq = req;
+  }
+  function onUpstreamLost() {
+    if (!upstreamReq) return;
+    upstreamReq = null;
+    if (upstreamRetry) clearTimeout(upstreamRetry);
+    if (sseClients.size === 0) return;
+    upstreamRetry = setTimeout(connectUpstream, 200);
+  }
+  function teardownUpstream() {
+    if (upstreamRetry) {
+      clearTimeout(upstreamRetry);
+      upstreamRetry = null;
+    }
+    const req = upstreamReq;
+    upstreamReq = null;
+    req?.destroy();
+  }
+  function notifyComponentsChanged(components) {
+    if (sseClients.size === 0) return;
+    const updated = components.map((c) => `/${c.name}/index.js`);
+    const payload = JSON.stringify({ added: [], removed: [], updated });
+    broadcast(`event: change
+data: ${payload}
+
+`);
+  }
   const proxyServer = http.createServer(async (req, res) => {
     const url = new URL(req.url || "/", `http://${host}:${port}`);
+    if (url.pathname === "/esbuild" && req.method === "GET") {
+      res.writeHead(200, {
+        "Content-Type": "text/event-stream",
+        "Cache-Control": "no-cache",
+        Connection: "keep-alive",
+        "Access-Control-Allow-Origin": "*",
+        "Access-Control-Allow-Private-Network": "true"
+      });
+      res.write("retry: 500\n\n");
+      sseClients.add(res);
+      connectUpstream();
+      const dropClient = () => {
+        sseClients.delete(res);
+        if (sseClients.size === 0) teardownUpstream();
+      };
+      req.on("close", dropClient);
+      res.on("error", dropClient);
+      return;
+    }
     if (url.pathname === "/bundle" && req.method === "GET") {
       const componentPath = url.searchParams.get("path");
       if (!componentPath) {
@@ -896,6 +969,9 @@ async function startDevServer(options = {}) {
     stop: async () => {
       if (watchTimer) clearTimeout(watchTimer);
       componentsWatcher.close();
+      teardownUpstream();
+      for (const client of sseClients) client.end();
+      sseClients.clear();
       proxyServer.close();
       await ctx?.dispose();
     }
@@ -1264,7 +1340,7 @@ function App({ command, args }) {
   }
 }
 function VersionCommand() {
-  const version = "1.4.0" ? "1.4.0" : "unknown";
+  const version = "1.4.1" ? "1.4.1" : "unknown";
   return /* @__PURE__ */ jsx4(Box4, { children: /* @__PURE__ */ jsxs4(Text4, { children: [
     "ollieshop v",
     version

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ollie-shop/cli",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Ollie Shop CLI - Development tools for custom checkouts",
   "type": "module",
   "main": "dist/index.js",

package/src/utils/esbuild.ts

@@ -267,6 +267,7 @@ export async function startDevServer(
     ctx = null;
     if (oldCtx) await oldCtx.dispose();
     await buildAndServe(components);
+    notifyComponentsChanged(components);
   }
 
   await buildAndServe(await discoverComponents({ cwd, stage }));
@@ -313,10 +314,92 @@ export async function startDevServer(
     watchTimer = setTimeout(maybeRecreate, 150);
   });
 
+  // esbuild's /esbuild live-reload stream lives on the context, so disposing it
+  // during a recreate drops the browser's EventSource — and Studio closes that
+  // connection for good on the first error. The proxy owns the downstream
+  // connection instead and re-subscribes to esbuild's stream across recreates,
+  // so live reload survives a component being added or removed.
+  const sseClients = new Set<http.ServerResponse>();
+  let upstreamReq: http.ClientRequest | null = null;
+  let upstreamRetry: ReturnType<typeof setTimeout> | null = null;
+
+  function broadcast(chunk: string | Buffer): void {
+    for (const client of sseClients) {
+      if (!client.writableEnded) client.write(chunk);
+    }
+  }
+
+  function connectUpstream(): void {
+    if (upstreamReq || sseClients.size === 0) return;
+    const req = http.request(
+      {
+        hostname: host,
+        port: internalPort,
+        path: "/esbuild",
+        method: "GET",
+        headers: { accept: "text/event-stream" },
+      },
+      (upstream) => {
+        upstream.on("data", broadcast);
+        upstream.on("close", onUpstreamLost);
+        upstream.on("error", onUpstreamLost);
+      },
+    );
+    req.on("error", onUpstreamLost);
+    req.end();
+    upstreamReq = req;
+  }
+
+  function onUpstreamLost(): void {
+    if (!upstreamReq) return;
+    upstreamReq = null;
+    if (upstreamRetry) clearTimeout(upstreamRetry);
+    if (sseClients.size === 0) return;
+    upstreamRetry = setTimeout(connectUpstream, 200);
+  }
+
+  function teardownUpstream(): void {
+    if (upstreamRetry) {
+      clearTimeout(upstreamRetry);
+      upstreamRetry = null;
+    }
+    const req = upstreamReq;
+    upstreamReq = null;
+    req?.destroy();
+  }
+
+  function notifyComponentsChanged(components: ComponentInfo[]): void {
+    if (sseClients.size === 0) return;
+    const updated = components.map((c) => `/${c.name}/index.js`);
+    const payload = JSON.stringify({ added: [], removed: [], updated });
+    broadcast(`event: change\ndata: ${payload}\n\n`);
+  }
+
   // Create proxy server that handles /bundle/* and forwards to esbuild
   const proxyServer = http.createServer(async (req, res) => {
     const url = new URL(req.url || "/", `http://${host}:${port}`);
 
+    // Hold the Studio live-reload stream open across esbuild recreates
+    if (url.pathname === "/esbuild" && req.method === "GET") {
+      res.writeHead(200, {
+        "Content-Type": "text/event-stream",
+        "Cache-Control": "no-cache",
+        Connection: "keep-alive",
+        "Access-Control-Allow-Origin": "*",
+        "Access-Control-Allow-Private-Network": "true",
+      });
+      res.write("retry: 500\n\n");
+      sseClients.add(res);
+      connectUpstream();
+      const dropClient = () => {
+        sseClients.delete(res);
+        if (sseClients.size === 0) teardownUpstream();
+      };
+      req.on("close", dropClient);
+      res.on("error", dropClient);
+      return;
+    }
+
     // Handle /bundle?path=/ComponentName/index.js
     if (url.pathname === "/bundle" && req.method === "GET") {
       const componentPath = url.searchParams.get("path");
@@ -520,6 +603,9 @@ export async function startDevServer(
     stop: async () => {
       if (watchTimer) clearTimeout(watchTimer);
       componentsWatcher.close();
+      teardownUpstream();
+      for (const client of sseClients) client.end();
+      sseClients.clear();
       proxyServer.close();
       await ctx?.dispose();
     },