rwsdk 0.2.0-alpha.12 → 0.2.0-alpha.14

package/dist/runtime/client/client.d.ts

@@ -0,0 +1,10 @@
+import "./setWebpackRequire";
+export { ClientOnly } from "./ClientOnly.js";
+export { default as React } from "react";
+import type { Transport, HydrationOptions } from "./types";
+export declare const fetchTransport: Transport;
+export declare const initClient: ({ transport, hydrateRootOptions, handleResponse, }?: {
+    transport?: Transport;
+    hydrateRootOptions?: HydrationOptions;
+    handleResponse?: (response: Response) => boolean;
+}) => Promise<void>;

package/dist/runtime/{client.js → client/client.js}

@@ -1,11 +1,18 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { clientWebpackRequire } from "./imports/client";
-// NOTE: `react-server-dom-webpack` uses this global to load modules,
-// so we need to define it here before importing "react-server-dom-webpack."
-globalThis.__webpack_require__ = clientWebpackRequire;
+// note(justinvdm, 14 Aug 2025): Rendering related imports and logic go here.
+// See client.tsx for the actual client entrypoint.
+// context(justinvdm, 14 Aug 2025): `react-server-dom-webpack` uses this global
+// to load modules, so we need to define it here before importing
+// "react-server-dom-webpack."
+import "./setWebpackRequire";
+import React from "react";
+import { hydrateRoot } from "react-dom/client";
+import { createFromReadableStream, createFromFetch, encodeReply, } from "react-server-dom-webpack/client.browser";
+import { rscStream } from "rsc-html-stream/client";
+export { ClientOnly } from "./ClientOnly.js";
+export { default as React } from "react";
 export const fetchTransport = (transportContext) => {
     const fetchCallServer = async (id, args) => {
-        const { createFromFetch, encodeReply } = await import("react-server-dom-webpack/client.browser");
         const url = new URL(window.location.href);
         url.searchParams.set("__rsc", "");
         if (id != null) {
@@ -41,8 +48,6 @@ export const fetchTransport = (transportContext) => {
     return fetchCallServer;
 };
 export const initClient = async ({ transport = fetchTransport, hydrateRootOptions, handleResponse, } = {}) => {
-    const React = await import("react");
-    const { hydrateRoot } = await import("react-dom/client");
     const transportContext = {
         setRscPayload: () => { },
         handleResponse,
@@ -50,7 +55,7 @@ export const initClient = async ({ transport = fetchTransport, hydrateRootOption
     let transportCallServer = transport(transportContext);
     const callServer = (id, args) => transportCallServer(id, args);
     const upgradeToRealtime = async ({ key } = {}) => {
-        const { realtimeTransport } = await import("./lib/realtime/client");
+        const { realtimeTransport } = await import("../lib/realtime/client");
         const createRealtimeTransport = realtimeTransport({ key });
         transportCallServer = createRealtimeTransport(transportContext);
     };
@@ -67,8 +72,6 @@ export const initClient = async ({ transport = fetchTransport, hydrateRootOption
     // context(justinvdm, 18 Jun 2025): We inject the RSC payload
     // unless render(Document, [...], { rscPayload: false }) was used.
     if (globalThis.__FLIGHT_DATA) {
-        const { createFromReadableStream } = await import("react-server-dom-webpack/client.browser");
-        const { rscStream } = await import("rsc-html-stream/client");
         rscPayload = createFromReadableStream(rscStream, {
             callServer,
         });

package/dist/runtime/{clientNavigation.test.js → client/navigation.test.js}

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { validateClickEvent } from "./clientNavigation";
+import { validateClickEvent } from "./navigation";
 describe("clientNavigation", () => {
     let mockEvent = {
         button: 0, // right click

package/dist/runtime/client/setWebpackRequire.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/runtime/client/setWebpackRequire.js

@@ -0,0 +1,2 @@
+import { clientWebpackRequire } from "../imports/client";
+globalThis.__webpack_require__ = clientWebpackRequire;

package/dist/runtime/{client.d.ts → client/types.d.ts}

@@ -1,19 +1,13 @@
-import { type CallServerCallback } from "react-server-dom-webpack/client.browser";
-import { type HydrationOptions } from "react-dom/client";
+import type { CallServerCallback } from "react-server-dom-webpack/client.browser";
+export type { CallServerCallback } from "react-server-dom-webpack/client.browser";
+export type { HydrationOptions } from "react-dom/client";
 export type ActionResponse<Result> = {
     node: React.ReactNode;
     actionResult: Result;
 };
-type TransportContext = {
+export type TransportContext = {
     setRscPayload: <Result>(v: Promise<ActionResponse<Result>>) => void;
     handleResponse?: (response: Response) => boolean;
 };
 export type Transport = (context: TransportContext) => CallServerCallback;
 export type CreateCallServer = (context: TransportContext) => <Result>(id: null | string, args: null | unknown[]) => Promise<Result>;
-export declare const fetchTransport: Transport;
-export declare const initClient: ({ transport, hydrateRootOptions, handleResponse, }?: {
-    transport?: Transport;
-    hydrateRootOptions?: HydrationOptions;
-    handleResponse?: (response: Response) => boolean;
-}) => Promise<void>;
-export {};

package/dist/runtime/client/types.js

@@ -0,0 +1 @@
+export {};

package/dist/runtime/entries/client.d.ts

@@ -1,5 +1,5 @@
 import "./types/client";
-export * from "../client";
+export * from "../client/client";
 export * from "../register/client";
 export * from "../lib/streams/consumeEventStream";
-export * from "../clientNavigation";
+export * from "../client/navigation";

package/dist/runtime/entries/client.js

@@ -1,5 +1,5 @@
 import "./types/client";
-export * from "../client";
+export * from "../client/client";
 export * from "../register/client";
 export * from "../lib/streams/consumeEventStream";
-export * from "../clientNavigation";
+export * from "../client/navigation";

package/dist/runtime/imports/client.d.ts

@@ -1,4 +1,4 @@
-export declare const loadModule: ((id: string) => Promise<any>) & import("lodash").MemoizedFunction;
-export declare const clientWebpackRequire: ((id: string) => Promise<{
+export declare const loadModule: (id: string) => Promise<any>;
+export declare const clientWebpackRequire: (id: string) => Promise<{
     [x: string]: any;
-}>) & import("lodash").MemoizedFunction;
+}>;

package/dist/runtime/imports/client.js

@@ -1,11 +1,13 @@
 import React from "react";
-import memoize from "lodash/memoize";
-export const loadModule = memoize(async (id) => {
+import { ClientOnly } from "../client/client";
+import { memoizeOnId } from "../lib/memoizeOnId";
+// @ts-ignore
+import { useClientLookup } from "virtual:use-client-lookup.js";
+export const loadModule = memoizeOnId(async (id) => {
     if (import.meta.env.VITE_IS_DEV_SERVER) {
         return await import(/* @vite-ignore */ id);
     }
     else {
-        const { useClientLookup } = await import("virtual:use-client-lookup.js");
         const moduleFn = useClientLookup[id];
         if (!moduleFn) {
             throw new Error(`(client) No module found for '${id}' in module lookup for "use client" directive`);
@@ -14,7 +16,7 @@ export const loadModule = memoize(async (id) => {
     }
 });
 // context(justinvdm, 2 Dec 2024): re memoize(): React relies on the same promise instance being returned for the same id
-export const clientWebpackRequire = memoize(async (id) => {
+export const clientWebpackRequire = memoizeOnId(async (id) => {
     const [file, name] = id.split("#");
     const promisedModule = loadModule(file);
     const promisedComponent = promisedModule.then((module) => module[name]);
@@ -23,7 +25,6 @@ export const clientWebpackRequire = memoize(async (id) => {
         const awaitedComponent = await promisedComponent;
         return { [id]: awaitedComponent };
     }
-    const { ClientOnly } = await import("./ClientOnly");
     const promisedDefault = promisedComponent.then((Component) => ({
         default: Component,
     }));

package/dist/runtime/imports/ssr.d.ts

@@ -1,5 +1,5 @@
-export declare const ssrLoadModule: ((id: string) => Promise<any>) & import("lodash").MemoizedFunction;
+export declare const ssrLoadModule: (id: string) => Promise<any>;
 export declare const ssrGetModuleExport: (id: string) => Promise<any>;
-export declare const ssrWebpackRequire: ((id: string) => Promise<{
+export declare const ssrWebpackRequire: (id: string) => Promise<{
     [x: string]: any;
-}>) & import("lodash").MemoizedFunction;
+}>;

package/dist/runtime/imports/ssr.js

@@ -1,5 +1,5 @@
-import memoize from "lodash/memoize";
-export const ssrLoadModule = memoize(async (id) => {
+import { memoizeOnId } from "../lib/memoizeOnId";
+export const ssrLoadModule = memoizeOnId(async (id) => {
     const { useClientLookup } = await import("virtual:use-client-lookup.js");
     const moduleFn = useClientLookup[id];
     if (!moduleFn) {
@@ -13,7 +13,7 @@ export const ssrGetModuleExport = async (id) => {
     return module[name];
 };
 // context(justinvdm, 2 Dec 2024): re memoize(): React relies on the same promise instance being returned for the same id
-export const ssrWebpackRequire = memoize(async (id) => {
+export const ssrWebpackRequire = memoizeOnId(async (id) => {
     const [file, name] = id.split("#");
     const module = await ssrLoadModule(file);
     return { [id]: module[name] };

package/dist/runtime/imports/worker.d.ts

@@ -1,5 +1,5 @@
-export declare const loadServerModule: ((id: string) => Promise<any>) & import("lodash").MemoizedFunction;
+export declare const loadServerModule: (id: string) => Promise<any>;
 export declare const getServerModuleExport: (id: string) => Promise<any>;
-export declare const ssrWebpackRequire: ((id: string) => Promise<{
+export declare const ssrWebpackRequire: (id: string) => Promise<{
     [x: string]: any;
-}>) & import("lodash").MemoizedFunction;
+}>;

package/dist/runtime/imports/worker.js

@@ -1,7 +1,7 @@
-import memoize from "lodash/memoize";
 import { requestInfo } from "../requestInfo/worker";
 import { ssrWebpackRequire as baseSsrWebpackRequire } from "rwsdk/__ssr_bridge";
-export const loadServerModule = memoize(async (id) => {
+import { memoizeOnId } from "../lib/memoizeOnId";
+export const loadServerModule = memoizeOnId(async (id) => {
     const { useServerLookup } = await import("virtual:use-server-lookup.js");
     const moduleFn = useServerLookup[id];
     if (!moduleFn) {
@@ -14,7 +14,7 @@ export const getServerModuleExport = async (id) => {
     const module = await loadServerModule(file);
     return module[name];
 };
-export const ssrWebpackRequire = memoize(async (id) => {
+export const ssrWebpackRequire = memoizeOnId(async (id) => {
     if (!requestInfo.rw.ssr) {
         return { [id]: () => null };
     }

package/dist/runtime/lib/manifest.d.ts

@@ -1,2 +1,11 @@
-import { type RequestInfo } from "../requestInfo/types";
-export declare const getManifest: (requestInfo: RequestInfo) => Promise<Record<string, any>>;
+export type Manifest = Record<string, ManifestChunk>;
+export interface ManifestChunk {
+    file: string;
+    src?: string;
+    isEntry?: boolean;
+    isDynamicEntry?: boolean;
+    imports?: string[];
+    css?: string[];
+    assets?: string[];
+}
+export declare const getManifest: () => Promise<Manifest>;

package/dist/runtime/lib/manifest.js

@@ -1,5 +1,5 @@
 let manifest;
-export const getManifest = async (requestInfo) => {
+export const getManifest = async () => {
     if (manifest) {
         return manifest;
     }

package/dist/runtime/lib/memoizeOnId.d.ts

@@ -0,0 +1 @@
+export declare const memoizeOnId: <Result>(fn: (id: string) => Result) => (id: string) => Result;

package/dist/runtime/lib/memoizeOnId.js

@@ -0,0 +1,11 @@
+export const memoizeOnId = (fn) => {
+    const hasOwnProperty = Object.prototype.hasOwnProperty;
+    const results = {};
+    const memoizedFn = (id) => {
+        if (hasOwnProperty.call(results, id)) {
+            return results[id];
+        }
+        return (results[id] = fn(id));
+    };
+    return memoizedFn;
+};

package/dist/runtime/lib/realtime/client.d.ts

@@ -1,4 +1,4 @@
-import { type Transport } from "../../client";
+import { type Transport } from "../../client/types";
 export declare const initRealtimeClient: ({ key, handleResponse, }?: {
     key?: string;
     handleResponse?: (response: Response) => boolean;

package/dist/runtime/lib/realtime/client.js

@@ -1,4 +1,4 @@
-import { initClient } from "../../client";
+import { initClient } from "../../client/client";
 import { createFromReadableStream } from "react-server-dom-webpack/client.browser";
 import { MESSAGE_TYPE } from "./shared";
 import { packMessage, unpackMessage, } from "./protocol";

package/dist/runtime/register/ssr.d.ts

@@ -1,3 +1,3 @@
-export declare const loadServerModule: ((id: string) => Promise<any>) & import("lodash").MemoizedFunction;
+export declare const loadServerModule: (id: string) => Promise<any>;
 export declare const getServerModuleExport: (id: string) => Promise<any>;
 export declare const createServerReference: (id: string, name: string) => any;

package/dist/runtime/register/ssr.js

@@ -1,6 +1,6 @@
-import memoize from "lodash/memoize";
 import { createServerReference as baseCreateServerReference } from "react-server-dom-webpack/client.edge";
-export const loadServerModule = memoize(async (id) => {
+import { memoizeOnId } from "../lib/memoizeOnId";
+export const loadServerModule = memoizeOnId(async (id) => {
     const { useServerLookup } = await import("virtual:use-server-lookup.js");
     const moduleFn = useServerLookup[id];
     if (!moduleFn) {

package/dist/runtime/render/preloads.d.ts

@@ -0,0 +1,6 @@
+import type { RequestInfo } from "../requestInfo/types.js";
+import type { Manifest, ManifestChunk } from "../lib/manifest.js";
+export declare function findScriptForModule(id: string, manifest: Manifest): ManifestChunk | undefined;
+export declare const Preloads: ({ requestInfo }: {
+    requestInfo: RequestInfo;
+}) => import("react/jsx-runtime.js").JSX.Element;

package/dist/runtime/render/preloads.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { use } from "react";
+import { getManifest } from "../lib/manifest.js";
+export function findScriptForModule(id, manifest) {
+    const visited = new Set();
+    function find(id) {
+        if (visited.has(id)) {
+            return;
+        }
+        visited.add(id);
+        const manifestEntry = manifest[id];
+        if (!manifestEntry) {
+            return;
+        }
+        if (manifestEntry.isEntry || manifestEntry.isDynamicEntry) {
+            return manifestEntry;
+        }
+        if (manifestEntry.imports) {
+            for (const dep of manifestEntry.imports) {
+                const entry = find(dep);
+                if (entry) {
+                    return entry;
+                }
+            }
+        }
+        return;
+    }
+    return find(id);
+}
+export const Preloads = ({ requestInfo }) => {
+    const manifest = use(getManifest());
+    const allScripts = new Set();
+    for (const scriptId of requestInfo.rw.scriptsToBeLoaded) {
+        const script = findScriptForModule(scriptId, manifest);
+        if (script) {
+            allScripts.add(script.file);
+        }
+    }
+    return (_jsx(_Fragment, { children: Array.from(allScripts).map((href) => (_jsx("link", { rel: "modulepreload", href: href }, href))) }));
+};

package/dist/runtime/render/renderRscThenableToHtmlStream.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { use } from "react";
 import { renderToReadableStream } from "react-dom/server.edge";
+import { Preloads } from "./preloads.js";
 import { Stylesheets } from "./stylesheets.js";
 export const renderRscThenableToHtmlStream = async ({ thenable, Document, requestInfo, shouldSSR, onError, }) => {
     const Component = () => {
         const RscApp = () => {
             const node = use(thenable).node;
-            return (_jsxs(_Fragment, { children: [_jsx(Stylesheets, { requestInfo: requestInfo }), _jsx("div", { id: "hydrate-root", children: node })] }));
+            return (_jsxs(_Fragment, { children: [_jsx(Stylesheets, { requestInfo: requestInfo }), _jsx(Preloads, { requestInfo: requestInfo }), _jsx("div", { id: "hydrate-root", children: node })] }));
         };
         // todo(justinvdm, 18 Jun 2025): We can build on this later to allow users
         // surface context. e.g:

package/dist/runtime/render/stylesheets.js

@@ -23,7 +23,7 @@ const findCssForModule = (scriptId, manifest) => {
     return Array.from(css);
 };
 export const Stylesheets = ({ requestInfo }) => {
-    const manifest = use(getManifest(requestInfo));
+    const manifest = use(getManifest());
     const allStylesheets = new Set();
     for (const scriptId of requestInfo.rw.scriptsToBeLoaded) {
         const css = findCssForModule(scriptId, manifest);

package/dist/runtime/worker.js

@@ -169,7 +169,7 @@ export const defineApp = (routes) => {
                 if (e instanceof Response) {
                     return e;
                 }
-                console.error("Unhandled error", e);
+                console.error("rwsdk: Received an unhandled error:\n\n%s", e);
                 throw e;
             }
         },

package/dist/scripts/debug-sync.mjs

@@ -24,15 +24,50 @@ const getPackageManagerInfo = (targetDir) => {
     }
     return pnpmResult;
 };
+const cleanupViteEntries = async (targetDir) => {
+    const nodeModulesDir = path.join(targetDir, "node_modules");
+    if (!existsSync(nodeModulesDir)) {
+        return;
+    }
+    try {
+        const entries = await fs.readdir(nodeModulesDir);
+        const viteEntries = entries.filter((entry) => entry.startsWith(".vite"));
+        for (const entry of viteEntries) {
+            const entryPath = path.join(nodeModulesDir, entry);
+            try {
+                const stat = await fs.lstat(entryPath);
+                if (!stat.isSymbolicLink()) {
+                    console.log(`Removing vite cache entry: ${entry}`);
+                    await fs.rm(entryPath, { recursive: true, force: true });
+                }
+                else {
+                    console.log(`Skipping symlinked vite cache entry: ${entry}`);
+                }
+            }
+            catch {
+                // If we can't stat it, try to remove it
+                console.log(`Removing vite cache entry: ${entry}`);
+                await fs.rm(entryPath, { recursive: true, force: true });
+            }
+        }
+    }
+    catch (error) {
+        console.log(`Failed to cleanup vite cache entries: ${error}`);
+    }
+};
 const performFullSync = async (sdkDir, targetDir) => {
     const sdkPackageJsonPath = path.join(sdkDir, "package.json");
     let originalSdkPackageJson = null;
     let tarballPath = "";
     let tarballName = "";
+    // Clean up vite cache
+    await cleanupViteEntries(targetDir);
     try {
         console.log("📦 Packing SDK...");
-        const packResult = await $({ cwd: sdkDir }) `npm pack`;
-        tarballName = packResult.stdout?.trim() ?? "";
+        const packResult = await $({ cwd: sdkDir }) `npm pack --json`;
+        const json = JSON.parse(packResult.stdout || "[]");
+        const packInfo = Array.isArray(json) ? json[0] : undefined;
+        tarballName = (packInfo && (packInfo.filename || packInfo.name)) || "";
         if (!tarballName) {
             console.error("❌ Failed to get tarball name from npm pack.");
             return;
@@ -86,23 +121,63 @@ const performFullSync = async (sdkDir, targetDir) => {
         }
     }
 };
-const performFastSync = async (sdkDir, targetDir) => {
-    console.log("⚡️ No dependency changes, performing fast sync...");
-    const sdkPackageJson = JSON.parse(await fs.readFile(path.join(sdkDir, "package.json"), "utf-8"));
-    const filesToSync = sdkPackageJson.files || [];
-    for (const file of filesToSync) {
-        const source = path.join(sdkDir, file);
-        const destination = path.join(targetDir, "node_modules/rwsdk", file);
-        if (existsSync(source)) {
-            await fs.cp(source, destination, { recursive: true, force: true });
+const syncFilesWithRsyncOrFs = async (sdkDir, destDir, filesEntries) => {
+    const sources = filesEntries.map((p) => path.join(sdkDir, p));
+    // Always include package.json in sync
+    const pkgJsonPath = path.join(sdkDir, "package.json");
+    sources.push(pkgJsonPath);
+    await fs.mkdir(destDir, { recursive: true });
+    // Try rsync across all sources in one shot
+    try {
+        if (sources.length > 0) {
+            const rsyncArgs = [
+                "-a",
+                "--delete",
+                "--omit-dir-times",
+                "--no-perms",
+                "--no-owner",
+                "--no-group",
+                ...sources,
+                destDir + path.sep,
+            ];
+            await $({ stdio: "inherit" })("rsync", rsyncArgs);
+            return;
+        }
+    }
+    catch {
+        // fall through to fs fallback
+    }
+    console.log("Rsync failed, falling back to fs");
+    // Fallback: destructive copy using Node fs to mirror content
+    await fs.rm(destDir, { recursive: true, force: true });
+    await fs.mkdir(destDir, { recursive: true });
+    for (const src of sources) {
+        const rel = path.relative(sdkDir, src);
+        const dst = path.join(destDir, rel);
+        await fs.mkdir(path.dirname(dst), { recursive: true });
+        try {
+            const stat = await fs.lstat(src);
+            if (stat.isDirectory()) {
+                await fs.cp(src, dst, { recursive: true, force: true });
+            }
+            else {
+                await fs.copyFile(src, dst);
+            }
+        }
+        catch {
+            await fs.cp(src, dst, { recursive: true, force: true }).catch(() => { });
         }
     }
-    // Always copy package.json
-    await fs.copyFile(path.join(sdkDir, "package.json"), path.join(targetDir, "node_modules/rwsdk/package.json"));
 };
-const areDependenciesEqual = (deps1, deps2) => {
-    // Simple string comparison for this use case is sufficient
-    return JSON.stringify(deps1 ?? {}) === JSON.stringify(deps2 ?? {});
+const performFastSync = async (sdkDir, targetDir) => {
+    console.log("⚡️ No dependency changes, performing fast sync...");
+    // Clean up vite cache
+    await cleanupViteEntries(targetDir);
+    const nodeModulesPkgDir = path.join(targetDir, "node_modules", "rwsdk");
+    // Copy directories/files declared in package.json#files (plus package.json)
+    const filesToSync = JSON.parse(await fs.readFile(path.join(sdkDir, "package.json"), "utf-8"))
+        .files || [];
+    await syncFilesWithRsyncOrFs(sdkDir, nodeModulesPkgDir, filesToSync);
 };
 const performSync = async (sdkDir, targetDir) => {
     console.log("🏗️  Rebuilding SDK...");
@@ -120,13 +195,8 @@ const performSync = async (sdkDir, targetDir) => {
     if (existsSync(installedSdkPackageJsonPath)) {
         const sdkPackageJsonContent = await fs.readFile(sdkPackageJsonPath, "utf-8");
         const installedSdkPackageJsonContent = await fs.readFile(installedSdkPackageJsonPath, "utf-8");
-        const sdkPkg = JSON.parse(sdkPackageJsonContent);
-        const installedPkg = JSON.parse(installedSdkPackageJsonContent);
-        if (areDependenciesEqual(sdkPkg.dependencies, installedPkg.dependencies) &&
-            areDependenciesEqual(sdkPkg.devDependencies, installedPkg.devDependencies) &&
-            areDependenciesEqual(sdkPkg.peerDependencies, installedPkg.peerDependencies)) {
-            packageJsonChanged = false;
-        }
+        packageJsonChanged =
+            sdkPackageJsonContent !== installedSdkPackageJsonContent;
     }
     if (packageJsonChanged) {
         console.log("📦 package.json changed, performing full sync...");
@@ -198,20 +268,19 @@ export const debugSync = async (opts) => {
         cwd: sdkDir,
     });
     let syncing = false;
-    // todo(justinvdm, 2025-07-22): Figure out wtf makes the full sync
-    // cause chokidar to find out about package.json after sync has resolved
-    let expectingFileChanges = Boolean(process.env.RWSDK_FORCE_FULL_SYNC);
-    watcher.on("all", async (_event, filePath) => {
-        if (syncing || filePath.endsWith(".tgz")) {
-            return;
-        }
-        if (expectingFileChanges && process.env.RWSDK_FORCE_FULL_SYNC) {
-            expectingFileChanges = false;
+    let pendingResync = false;
+    const triggerResync = async (reason) => {
+        if (syncing) {
+            pendingResync = true;
             return;
         }
         syncing = true;
-        expectingFileChanges = true;
-        console.log(`\nDetected change, re-syncing... (file: ${filePath})`);
+        if (reason) {
+            console.log(`\nDetected change, re-syncing... (file: ${reason})`);
+        }
+        else {
+            console.log(`\nDetected change, re-syncing...`);
+        }
         if (childProc && !childProc.killed) {
             console.log("Stopping running process...");
             childProc.kill();
@@ -220,7 +289,6 @@ export const debugSync = async (opts) => {
             });
         }
         try {
-            watcher.unwatch(filesToWatch);
             await performSync(sdkDir, targetDir);
             runWatchedCommand();
         }
@@ -230,8 +298,19 @@ export const debugSync = async (opts) => {
         }
         finally {
             syncing = false;
-            watcher.add(filesToWatch);
         }
+        if (pendingResync) {
+            pendingResync = false;
+            // Coalesce any rapid additional events into a single follow-up sync
+            await new Promise((r) => setTimeout(r, 50));
+            return triggerResync();
+        }
+    };
+    watcher.on("all", async (_event, filePath) => {
+        if (filePath.endsWith(".tgz")) {
+            return;
+        }
+        await triggerResync(filePath);
     });
     const cleanup = async () => {
         console.log("\nCleaning up...");

package/dist/vite/miniflareHMRPlugin.mjs

@@ -66,6 +66,9 @@ export const miniflareHMRPlugin = (givenOptions) => [
             };
         },
         async hotUpdate(ctx) {
+            if (ctx.file.includes(".wrangler")) {
+                return;
+            }
             if (hasErrored) {
                 const shortName = getShortName(ctx.file, ctx.server.config.root);
                 this.environment.logger.info(`${colors.cyan(`attempting to recover from error`)}: update to ${colors.dim(shortName)}`, {
@@ -77,6 +80,7 @@ export const miniflareHMRPlugin = (givenOptions) => [
                     type: "full-reload",
                     path: "*",
                 });
+                log("hmr: Full reload after error");
                 return [];
             }
             const { clientFiles, serverFiles, viteEnvironment: { name: environment }, workerEntryPathname: entry, } = givenOptions;
@@ -84,6 +88,7 @@ export const miniflareHMRPlugin = (givenOptions) => [
                 log(`Hot update: (env=${this.environment.name}) ${ctx.file}\nModule graph:\n\n${dumpFullModuleGraph(ctx.server, this.environment.name)}`);
             }
             if (!isJsFile(ctx.file) && !ctx.file.endsWith(".css")) {
+                log(`hmr: not a js file, skipping`);
                 return;
             }
             if (this.environment.name === "ssr") {
@@ -94,14 +99,17 @@ export const miniflareHMRPlugin = (givenOptions) => [
                     server: ctx.server,
                 });
                 if (!isUseClientUpdate) {
+                    log("hmr: not a use client update, short circuiting");
                     return [];
                 }
                 invalidateModule(ctx.server, "ssr", ctx.file);
                 invalidateModule(ctx.server, environment, VIRTUAL_SSR_PREFIX +
                     normalizeModulePath(ctx.file, givenOptions.rootDir));
+                log("hmr: invalidated ssr module");
                 return [];
             }
             if (!["client", environment].includes(this.environment.name)) {
+                log(`hmr: incorrect env, skipping (env=${this.environment.name}, worker env=${environment})`);
                 return [];
             }
             const hasClientDirective = await hasDirective(ctx.file, "use client");
@@ -165,8 +173,10 @@ export const miniflareHMRPlugin = (givenOptions) => [
                     server: ctx.server,
                 });
                 if (!isUseClientUpdate && !ctx.file.endsWith(".css")) {
+                    log("hmr: not a use client update and not css, short circuiting");
                     return [];
                 }
+                log("hmr: returning client modules for hmr");
                 return ctx.modules;
             }
             // The worker needs an update, and the hot check is for the worker environment
@@ -184,8 +194,12 @@ export const miniflareHMRPlugin = (givenOptions) => [
                 if (m) {
                     invalidateModule(ctx.server, environment, m);
                 }
-                const virtualSSRModule = ctx.server.environments[environment].moduleGraph.idToModuleMap.get(VIRTUAL_SSR_PREFIX +
-                    normalizeModulePath(ctx.file, givenOptions.rootDir));
+                let virtualSSRModuleId = VIRTUAL_SSR_PREFIX +
+                    normalizeModulePath(ctx.file, givenOptions.rootDir);
+                if (ctx.file.endsWith(".css")) {
+                    virtualSSRModuleId += ".js";
+                }
+                const virtualSSRModule = ctx.server.environments[environment].moduleGraph.idToModuleMap.get(virtualSSRModuleId);
                 if (virtualSSRModule) {
                     invalidateModule(ctx.server, environment, virtualSSRModule);
                 }
@@ -196,6 +210,7 @@ export const miniflareHMRPlugin = (givenOptions) => [
                         file: ctx.file,
                     },
                 });
+                log("hmr: sent rsc update");
                 return [];
             }
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rwsdk",
-  "version": "0.2.0-alpha.12",
+  "version": "0.2.0-alpha.14",
   "description": "Build fast, server-driven webapps on Cloudflare with SSR, RSC, and realtime",
   "type": "module",
   "bin": {