@swell/cli 2.0.14 → 2.0.16

package/dist/commands/theme/dev.js

@@ -1,14 +1,12 @@
 import { Flags } from '@oclif/core';
-import BrowserSync from 'browser-sync';
 import { findUp } from 'find-up';
-import getPort, { portNumbers } from 'get-port';
 import { execSync, spawn } from 'node:child_process';
 import fs from 'node:fs';
 import ora from 'ora';
 import { default as localConfig } from '../../lib/config.js';
 import style from '../../lib/style.js';
 import { PushAppCommand } from '../../push-app-command.js';
-const FALLBACK_PORT = 3000;
+import { ThemeSync } from '../../lib/theme-sync.js';
 export default class AppThemeDev extends PushAppCommand {
     appType = 'theme';
     static examples = [
@@ -140,38 +138,26 @@ export default class AppThemeDev extends PushAppCommand {
     }
     async startThemeDevServer(local) {
         const currentStore = localConfig.getDefaultStore();
-        const sessionId = localConfig.getSessionId(currentStore);
         const spinner = ora();
         const bundle = process.argv.includes('--bundle');
         if (bundle) {
             await this.findAndInstallDependencies();
             await this.findAndTryScriptCommands();
         }
-        // Find an open port starting at 3000
-        const freePort = (await getPort({ port: portNumbers(3000, 3100) })) || FALLBACK_PORT;
-        spinner.start(`Starting theme dev server on port ${freePort}...`);
+        spinner.start(`Starting theme dev server...`);
         const storefrontUrl = local
             ? this.storefrontLocalUrl
             : this.storefrontFrontendUrl(currentStore, this.storefront, undefined, true);
-        const bs = BrowserSync.create();
-        bs.init({
-            logLevel: 'silent',
-            notify: false,
-            open: false,
-            proxy: {
-                proxyReq: [
-                    (proxyReq) => {
-                        proxyReq.setHeader('swell-request-id', `${currentStore}_${Date.now()}`);
-                    },
-                ],
-                target: storefrontUrl,
-            },
-            ui: false,
+        // Create and start theme sync
+        const themeSync = new ThemeSync({
+            targetUrl: storefrontUrl,
         });
+        const port = await themeSync.start();
+        spinner.succeed(`Theme sync server started on port ${port}\n`);
         await this.watchForChanges({
-            onChange: () => bs.reload(),
+            onChange: () => themeSync.reload(),
         });
         spinner.stop();
-        this.log(`Watching for changes. View your theme at ${style.link(`http://localhost:${freePort}`)}\n`);
+        this.log(`Watching for changes. View your theme at ${style.link(`http://localhost:${port}`)}\n`);
     }
 }

package/dist/lib/apps/index.js

@@ -114,7 +114,7 @@ export const FrontendProjectTypes = [
         slug: 'astro',
     },
 ];
-const frontendProjectConfigExtensions = ['.mjs', '.js'];
+const frontendProjectConfigExtensions = ['.mjs', '.js', '.ts', '.cjs'];
 export function getAppSlugId(app) {
     return toAppId(app.private_id) || app.public_id || app.id;
 }

package/dist/lib/proxy.js

@@ -0,0 +1 @@
+"use strict";

package/dist/lib/theme-sync.d.ts

@@ -0,0 +1,19 @@
+interface ThemeSyncOptions {
+    port?: number;
+    targetUrl: string;
+}
+export declare class ThemeSync {
+    private readonly server;
+    private readonly proxy;
+    private readonly wss;
+    private readonly options;
+    private selectPort;
+    constructor(options: ThemeSyncOptions);
+    start(): Promise<number>;
+    reload(): void;
+    private parseRequestBody;
+    private decodeRequestBody;
+    private shouldInjectScript;
+    private injectScript;
+}
+export {};

package/dist/lib/theme-sync.js

@@ -0,0 +1,144 @@
+import http from 'http';
+import getPort, { portNumbers } from 'get-port';
+import util from 'node:util';
+import zlib from 'node:zlib';
+// @ts-ignore
+import httpProxy from 'http-proxy';
+// @ts-ignore
+import WebSocket, { WebSocketServer } from 'ws';
+const gunzipAsync = util.promisify(zlib.gunzip);
+const inflateAsync = util.promisify(zlib.inflate);
+const brotliDecompressAsync = util.promisify(zlib.brotliDecompress);
+const FALLBACK_PORT = 3000;
+export class ThemeSync {
+    server;
+    proxy;
+    wss;
+    options;
+    async selectPort() {
+        return (await getPort({ port: portNumbers(3000, 3100) })) || FALLBACK_PORT;
+    }
+    constructor(options) {
+        this.options = options;
+        this.server = http.createServer();
+        this.proxy = httpProxy.createProxyServer({});
+        this.wss = new WebSocketServer({ server: this.server });
+    }
+    async start() {
+        // Select port if not specified
+        if (!this.options.port) {
+            this.options.port = await this.selectPort();
+        }
+        return new Promise((resolve, reject) => {
+            // Create proxy server
+            this.server.on('request', (req, res) => {
+                this.proxy.web(req, res, {
+                    target: this.options.targetUrl,
+                    changeOrigin: true,
+                    selfHandleResponse: true,
+                }, (err) => {
+                    if (err) {
+                        console.error('Proxy error:', err);
+                        if (res instanceof http.ServerResponse) {
+                            res.writeHead(500, { 'Content-Type': 'text/plain' });
+                            res.end('Proxy error');
+                        }
+                    }
+                });
+            });
+            this.proxy.on('proxyReq', (proxyReq) => {
+                proxyReq.setHeader('swell-request-id', `${Date.now()}`);
+            });
+            this.proxy.on('proxyRes', (proxyRes, req, res) => {
+                let body = Buffer.from('');
+                proxyRes.on('data', (chunk) => {
+                    body = Buffer.concat([body, chunk]);
+                });
+                // Preserve headers
+                for (let i = 0; i < proxyRes.rawHeaders.length; i += 2) {
+                    const header = proxyRes.rawHeaders[i];
+                    res.setHeader(header, proxyRes.rawHeaders[i + 1]);
+                }
+                // Use utf8 encoding for the response
+                res.setHeader('Content-Encoding', 'utf8');
+                proxyRes.on('end', async () => {
+                    const html = await this.parseRequestBody(proxyRes, body);
+                    if (this.shouldInjectScript(proxyRes, html)) {
+                        const modifiedHtml = this.injectScript(html, `localhost:${this.options.port}`);
+                        res.end(modifiedHtml);
+                    }
+                    else {
+                        res.end(html);
+                    }
+                });
+            });
+            // Handle proxy errors
+            this.proxy.on('error', (err) => {
+                console.error('Proxy error:', err);
+            });
+            // Start server
+            this.server.listen(this.options.port, () => {
+                resolve(this.options.port);
+            });
+            this.server.on('error', (err) => {
+                reject(err);
+            });
+        });
+    }
+    reload() {
+        // Get all connected WebSocket clients
+        const clients = Array.from(this.wss.clients).filter((client) => client.readyState === WebSocket.OPEN);
+        // Notify clients to reload
+        clients.forEach((client) => {
+            client.send('reload');
+        });
+    }
+    async parseRequestBody(proxyRes, body) {
+        // May contain multiple encodings
+        const contentEncoding = String(proxyRes.headers['content-encoding'] ?? '')
+            .split(',')
+            .reverse();
+        for (const value of contentEncoding) {
+            const encoding = value.trim().toLowerCase();
+            if (encoding) {
+                body = await this.decodeRequestBody(body, encoding);
+            }
+        }
+        return body.toString('utf8');
+    }
+    decodeRequestBody(body, encoding) {
+        switch (encoding) {
+            case 'gzip':
+                return gunzipAsync(body);
+            case 'deflate':
+                return inflateAsync(body);
+            case 'br':
+                return brotliDecompressAsync(body);
+            default:
+                return Promise.reject(new Error(`Unsupported content encoding: ${encoding}`));
+        }
+    }
+    shouldInjectScript(proxyRes, html) {
+        // Check if this is an HTML response
+        const contentType = proxyRes.headers['content-type'];
+        if (!contentType?.includes('text/html')) {
+            return false;
+        }
+        if (!html.includes('</body>')) {
+            return false;
+        }
+        return true;
+    }
+    // Inject WebSocket client script into proxied HTML
+    injectScript(html, host) {
+        const script = `
+      <script>
+        const ws = new WebSocket('ws://${host}/ws');
+        ws.onmessage = () => {
+          window.location.reload();
+        };
+      </script>
+    `;
+        return html.replace('</body>', `${script}</body>`);
+    }
+}

package/oclif.manifest.json

@@ -1891,5 +1891,5 @@
       ]
     }
   },
-  "version": "2.0.14"
+  "version": "2.0.16"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swell/cli",
-  "version": "2.0.14",
+  "version": "2.0.16",
   "type": "module",
   "description": "Swell's command line interface/utility",
   "keywords": [
@@ -32,9 +32,7 @@
     "@oclif/errors": "1.3.6",
     "@oclif/plugin-help": "6.0.4",
     "@oclif/plugin-plugins": "3.9.4",
-    "@types/browser-sync": "2.29.0",
     "blake3-wasm": "2.1.5",
-    "browser-sync": "3.0.2",
     "chalk": "5.3.0",
     "conf": "11.0.2",
     "configstore": "6.0.0",
@@ -43,6 +41,7 @@
     "find-up": "7.0.0",
     "get-port": "7.0.0",
     "globby": "^14.1.0",
+    "http-proxy": "1.18.1",
     "inflection": "3.0.0",
     "istextorbinary": "9.5.0",
     "lodash": "4.17.21",
@@ -54,17 +53,20 @@
     "ora": "7.0.1",
     "qs": "6.12.3",
     "semver": "7.5.4",
-    "table": "6.8.1"
+    "table": "6.8.1",
+    "ws": "8.18.1"
   },
   "devDependencies": {
     "@inquirer/testing": "2.1.8",
     "@oclif/test": "3.0.3",
     "@types/chai": "4.3.9",
     "@types/configstore": "6.0.1",
+    "@types/http-proxy": "1.17.16",
     "@types/inquirer": "9.0.6",
     "@types/mocha": "10.0.3",
     "@types/node": "20.8.8",
     "@types/qs": "6.9.15",
+    "@types/ws": "8.18.1",
     "@typescript-eslint/eslint-plugin": "6.9.0",
     "chai": "4.3.10",
     "dotenv": "16.3.1",