@immediately-run/sandpack-client 2.19.8

package/dist/clients/runtime/index.mjs

@@ -0,0 +1,1044 @@
+import { _ as __awaiter, a as __generator, h as __assign, i as __rest, j as __spreadArray, g as __extends, f as nullthrows, e as extractErrorDetails, c as createError, d as createPackageJSON } from '../../utils-DG1HA4RZ.mjs';
+import { dequal } from 'dequal';
+import { a as SandpackLogLevel } from '../../types-BFONOA2L.mjs';
+import { S as SandpackClient } from '../../base-DBh7xJX9.mjs';
+import { c as createSandboxedIframe, e as ensureSandboxed } from '../../iframe-factory-DybmkzJZ.mjs';
+import mimeDB from 'mime-db';
+import 'outvariant';
+import '@zenfs/core';
+
+/**
+ * This file is a copy of the resolver from the `codesandbox-api` package.
+ * We wanted to avoid to reference codesandbox-api because of the code that runs on load in the package.
+ * The plan is to take some time and refactor codesandbox-api into what it was supposed to be in the first place,
+ * an abstraction over the actions that can be dispatched between the bundler and the iframe.
+ */
+var Protocol = /** @class */ (function () {
+    function Protocol(type, handleMessage, protocol) {
+        var _this = this;
+        this.type = type;
+        this.handleMessage = handleMessage;
+        this.protocol = protocol;
+        this._disposeMessageListener = this.protocol.channelListen(function (msg) { return __awaiter(_this, void 0, void 0, function () {
+            var message, result, response, err_1, response;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!(msg.type === this.getTypeId() && msg.method)) return [3 /*break*/, 4];
+                        message = msg;
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, this.handleMessage(message)];
+                    case 2:
+                        result = _a.sent();
+                        response = {
+                            type: this.getTypeId(),
+                            msgId: message.msgId,
+                            result: result,
+                        };
+                        this.protocol.dispatch(response);
+                        return [3 /*break*/, 4];
+                    case 3:
+                        err_1 = _a.sent();
+                        response = {
+                            type: this.getTypeId(),
+                            msgId: message.msgId,
+                            error: {
+                                message: err_1.message,
+                            },
+                        };
+                        this.protocol.dispatch(response);
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        }); });
+    }
+    Protocol.prototype.getTypeId = function () {
+        return "protocol-".concat(this.type);
+    };
+    Protocol.prototype.dispose = function () {
+        this._disposeMessageListener();
+    };
+    return Protocol;
+}());
+
+var IFrameProtocol = /** @class */ (function () {
+    function IFrameProtocol(iframe, origin) {
+        // React to messages from any iframe
+        this.globalListeners = {};
+        this.globalListenersCount = 0;
+        // React to messages from the iframe owned by this instance
+        this.channelListeners = {};
+        this.channelListenersCount = 0;
+        // Random number to identify this instance of the client when messages are coming from multiple iframes
+        this.channelId = Math.floor(Math.random() * 1000000);
+        this.frameWindow = iframe.contentWindow;
+        this.origin = '*'; //origin;
+        this.globalListeners = [];
+        this.channelListeners = [];
+        this.eventListener = this.eventListener.bind(this);
+        if (typeof window !== "undefined") {
+            window.addEventListener("message", this.eventListener);
+        }
+    }
+    IFrameProtocol.prototype.cleanup = function () {
+        window.removeEventListener("message", this.eventListener);
+        this.globalListeners = {};
+        this.channelListeners = {};
+        this.globalListenersCount = 0;
+        this.channelListenersCount = 0;
+    };
+    // Sends the channelId and triggers an iframeHandshake promise to resolve,
+    // so the iframe can start listening for messages (based on the id).
+    // `config` carries the bundler's bootstrap configuration (template/logLevel/
+    // recompileDelay) — the bundler watches the shared filesystem itself and no
+    // longer receives a `compile` message, so it needs this delivered once here.
+    IFrameProtocol.prototype.register = function (port, config, babelPort) {
+        if (!this.frameWindow) {
+            return;
+        }
+        console.log("[IFrameProtocol] Registering iframe with channelId", this.channelId, this);
+        // Order matters: the bundler reads ports[0] as the fs port and ports[1] as
+        // the Babel worker port. `filter` keeps that order as long as the fs port
+        // is always present (it is, in normal operation).
+        var ports = [port, babelPort].filter(function (p) { return p != null; });
+        this.frameWindow.postMessage(__assign({ type: "register-frame", origin: document.location.origin, id: this.channelId }, config), this.origin, ports);
+    };
+    // Messages are dispatched from the client directly to the instance iframe
+    IFrameProtocol.prototype.dispatch = function (message) {
+        if (!this.frameWindow) {
+            return;
+        }
+        // `_transfer` (e.g. a MessagePort for a mount's filesystem) must be passed
+        // as the postMessage transfer list, not as a serialized payload field.
+        var _transfer = message._transfer, payload = __rest(message, ["_transfer"]);
+        this.frameWindow.postMessage(__assign({ $id: this.channelId, codesandbox: true }, payload), this.origin, _transfer !== null && _transfer !== void 0 ? _transfer : []);
+    };
+    // Add a listener that is called on any message coming from an iframe in the page
+    // This is needed for the `initialize` message which comes without a channelId
+    IFrameProtocol.prototype.globalListen = function (listener) {
+        var _this = this;
+        if (typeof listener !== "function") {
+            return function () {
+                return;
+            };
+        }
+        var listenerId = this.globalListenersCount;
+        this.globalListeners[listenerId] = listener;
+        this.globalListenersCount++;
+        return function () {
+            delete _this.globalListeners[listenerId];
+        };
+    };
+    // Add a listener that is called on any message coming from an iframe with the instance channelId
+    // All other messages (eg: from other iframes) are ignored
+    IFrameProtocol.prototype.channelListen = function (listener) {
+        var _this = this;
+        if (typeof listener !== "function") {
+            return function () {
+                return;
+            };
+        }
+        var listenerId = this.channelListenersCount;
+        this.channelListeners[listenerId] = listener;
+        this.channelListenersCount++;
+        return function () {
+            delete _this.channelListeners[listenerId];
+        };
+    };
+    // Handles message windows coming from iframes
+    IFrameProtocol.prototype.eventListener = function (evt) {
+        // skip events originating from different iframes
+        if (evt.source !== this.frameWindow) {
+            return;
+        }
+        var message = evt.data;
+        if (!message.codesandbox) {
+            return;
+        }
+        Object.values(this.globalListeners).forEach(function (listener) {
+            return listener(message);
+        });
+        if (message.$id !== this.channelId) {
+            return;
+        }
+        Object.values(this.channelListeners).forEach(function (listener) {
+            return listener(message);
+        });
+    };
+    return IFrameProtocol;
+}());
+
+/**
+ * Parent-side fetch + cache for immutable, exact-versioned module URLs.
+ *
+ * The bundler iframe runs at an opaque origin (sandboxed without
+ * `allow-same-origin`), so it has no persistent storage of any kind — its own
+ * Cache API is unavailable. It therefore forwards immutable-URL fetches here
+ * over the iframe protocol (`protocol-immutable-fetch`), and the parent — a
+ * real origin — serves them cache-first from a persistent Cache API cache.
+ *
+ * Security: the handler only fetches URLs matching {@link IMMUTABLE_URL_ALLOWLIST}.
+ * The iframe runs untrusted code, and an unrestricted parent-side fetch proxy
+ * would let it read arbitrary cross-origin responses with the parent's network
+ * context (a CORS bypass). The allowlist mirrors the prefixes the bundler
+ * registers via `registerImmutableUrlPrefix` (see sandpack-bundler
+ * `src/utils/fetch.ts`) — keep the two in sync.
+ */
+/**
+ * URL prefixes whose responses never change for a given URL (the URL encodes
+ * the exact content version). Only these may be fetched on the iframe's
+ * behalf, and they are safe to cache forever.
+ */
+var IMMUTABLE_URL_ALLOWLIST = [
+    // Module CDN, exact-versioned package bundles. (NOT /dep_tree/, which
+    // resolves semver ranges and changes as new versions publish.)
+    "https://sandpack-cdn-staging.blazingly.io/package/",
+    // unpkg files, requested by the bundler at registry-resolved exact versions.
+    "https://unpkg.com/",
+    // Self-hosted, versioned @immediately-run/sdk builds (SDK_PACKAGING_SPEC
+    // §5/§11, Option A). The /v/<version>/ path encodes the exact version, so
+    // responses are immutable; the bundler fetches these when an app opts the SDK
+    // into immediately.run.resolveFromRegistry. Keep in sync with the prefix the
+    // bundler registers via registerImmutableUrlPrefix (sandbox bundler.ts).
+    "https://immediately-run.github.io/immediately-run-sdk/v/",
+];
+var IMMUTABLE_CACHE_NAME = "sandpack-immutable-fetch-v1";
+var serializeResponse = function (res) { return __awaiter(void 0, void 0, void 0, function () {
+    var _a;
+    var _b;
+    return __generator(this, function (_c) {
+        switch (_c.label) {
+            case 0:
+                _a = {
+                    status: res.status,
+                    contentType: (_b = res.headers.get("content-type")) !== null && _b !== void 0 ? _b : ""
+                };
+                return [4 /*yield*/, res.arrayBuffer()];
+            case 1: return [2 /*return*/, (_a.body = _c.sent(),
+                    _a)];
+        }
+    });
+}); };
+// CacheStorage may be unavailable (insecure context) or fail (storage
+// pressure); degrade to a plain fetch rather than failing the request.
+var openCache = function () { return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_b) {
+        switch (_b.label) {
+            case 0:
+                _b.trys.push([0, 2, , 3]);
+                return [4 /*yield*/, caches.open(IMMUTABLE_CACHE_NAME)];
+            case 1: return [2 /*return*/, _b.sent()];
+            case 2:
+                _b.sent();
+                return [2 /*return*/, undefined];
+            case 3: return [2 /*return*/];
+        }
+    });
+}); };
+/** SHA-384 of bytes, formatted `sha384-<base64>` (SRI style). */
+var sha384 = function (body) { return __awaiter(void 0, void 0, void 0, function () {
+    var digest, bin, view, i;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4 /*yield*/, crypto.subtle.digest("SHA-384", body)];
+            case 1:
+                digest = _a.sent();
+                bin = "";
+                view = new Uint8Array(digest);
+                for (i = 0; i < view.length; i++)
+                    bin += String.fromCharCode(view[i]);
+                return [2 /*return*/, "sha384-".concat(btoa(bin))];
+        }
+    });
+}); };
+/**
+ * Does `body` match the caller-supplied `integrity` (an `sha384-<base64>` SRI
+ * hash)? Returns true when no integrity was supplied (nothing to check).
+ */
+var matchesIntegrity = function (body, integrity) { return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_b) {
+        switch (_b.label) {
+            case 0:
+                if (!integrity)
+                    return [2 /*return*/, true];
+                _b.label = 1;
+            case 1:
+                _b.trys.push([1, 3, , 4]);
+                return [4 /*yield*/, sha384(body)];
+            case 2: return [2 /*return*/, (_b.sent()) === integrity];
+            case 3:
+                _b.sent();
+                // crypto unavailable → can't verify; treat as a non-match so we neither
+                // serve nor persist bytes we couldn't validate (fail safe).
+                return [2 /*return*/, false];
+            case 4: return [2 /*return*/];
+        }
+    });
+}); };
+/**
+ * `protocol-immutable-fetch` handler: serve an allowlisted immutable URL,
+ * cache-first from the persistent parent-side cache.
+ *
+ * INTEGRITY-AWARE CACHING (cache-poisoning prevention). When the caller passes
+ * the expected SHA-384 (`integrity`), the cache is never allowed to serve or
+ * persist bytes that don't match it:
+ *  - verify-on-read: a cache HIT whose bytes no longer match the expected hash
+ *    (the host re-pinned the version under the cached bytes) is EVICTED and the
+ *    URL refetched, so a stale/poisoned entry self-heals instead of failing the
+ *    consumer forever.
+ *  - verify-before-cache: freshly fetched bytes are only stored when they match.
+ *    Mismatched bytes are returned (so the consumer's own check fails closed with
+ *    a clear error) but NEVER cached, so a bad upstream window can't poison the
+ *    cache. Without an `integrity` argument the URL is cached by URL as before.
+ */
+function handleImmutableFetch(url, integrity) {
+    return __awaiter(this, void 0, void 0, function () {
+        var expected, cache, hit, body, res, result, _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    if (typeof url !== "string" ||
+                        !IMMUTABLE_URL_ALLOWLIST.some(function (prefix) { return url.startsWith(prefix); })) {
+                        throw new Error("URL not allowed for immutable fetch: ".concat(String(url)));
+                    }
+                    expected = typeof integrity === "string" ? integrity : undefined;
+                    return [4 /*yield*/, openCache()];
+                case 1:
+                    cache = _b.sent();
+                    if (!cache) return [3 /*break*/, 6];
+                    return [4 /*yield*/, cache.match(url).catch(function () { return undefined; })];
+                case 2:
+                    hit = _b.sent();
+                    if (!hit) return [3 /*break*/, 6];
+                    return [4 /*yield*/, hit.clone().arrayBuffer()];
+                case 3:
+                    body = _b.sent();
+                    return [4 /*yield*/, matchesIntegrity(body, expected)];
+                case 4:
+                    if (_b.sent()) {
+                        return [2 /*return*/, serializeResponse(hit)];
+                    }
+                    // Stale/poisoned entry: drop it and fall through to a fresh fetch.
+                    return [4 /*yield*/, cache.delete(url).catch(function () { })];
+                case 5:
+                    // Stale/poisoned entry: drop it and fall through to a fresh fetch.
+                    _b.sent();
+                    _b.label = 6;
+                case 6: return [4 /*yield*/, fetch(url)];
+                case 7:
+                    res = _b.sent();
+                    if (!res.ok) {
+                        throw new Error("Immutable fetch failed with status ".concat(res.status, ": ").concat(url));
+                    }
+                    return [4 /*yield*/, serializeResponse(res)];
+                case 8:
+                    result = _b.sent();
+                    _a = cache;
+                    if (!_a) return [3 /*break*/, 10];
+                    return [4 /*yield*/, matchesIntegrity(result.body, expected)];
+                case 9:
+                    _a = (_b.sent());
+                    _b.label = 10;
+                case 10:
+                    if (!_a) return [3 /*break*/, 12];
+                    // Only persist verified bytes. A failed put (quota) only costs the entry.
+                    return [4 /*yield*/, cache
+                            .put(url, new Response(result.body.slice(0), { status: result.status, headers: { "content-type": result.contentType } }))
+                            .catch(function () { })];
+                case 11:
+                    // Only persist verified bytes. A failed put (quota) only costs the entry.
+                    _b.sent();
+                    _b.label = 12;
+                case 12: return [2 /*return*/, result];
+            }
+        });
+    });
+}
+
+var extensionMap = new Map();
+var entries = Object.entries(mimeDB);
+for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+    var _a$1 = entries_1[_i], mimetype = _a$1[0], entry = _a$1[1];
+    // eslint-disable-next-line
+    // @ts-ignore
+    if (!entry.extensions) {
+        continue;
+    }
+    // eslint-disable-next-line
+    // @ts-ignore
+    var extensions = entry.extensions;
+    if (extensions.length) {
+        for (var _b = 0, extensions_1 = extensions; _b < extensions_1.length; _b++) {
+            var ext = extensions_1[_b];
+            extensionMap.set(ext, mimetype);
+        }
+    }
+}
+var EXTENSIONS_MAP = extensionMap;
+
+var CHANNEL_NAME = "$CSB_RELAY";
+
+var MAX_CLIENT_DEPENDENCY_COUNT = 50;
+function getTemplate(pkg, 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+modules) {
+    if (!pkg) {
+        return "static";
+    }
+    var _a = pkg.dependencies, dependencies = _a === void 0 ? {} : _a, _b = pkg.devDependencies, devDependencies = _b === void 0 ? {} : _b;
+    var totalDependencies = __spreadArray(__spreadArray([], Object.keys(dependencies), true), Object.keys(devDependencies), true);
+    var moduleNames = Object.keys(modules);
+    var adonis = ["@adonisjs/framework", "@adonisjs/core"];
+    if (totalDependencies.some(function (dep) { return adonis.indexOf(dep) > -1; })) {
+        return "adonis";
+    }
+    var nuxt = ["nuxt", "nuxt-edge", "nuxt-ts", "nuxt-ts-edge", "nuxt3"];
+    if (totalDependencies.some(function (dep) { return nuxt.indexOf(dep) > -1; })) {
+        return "nuxt";
+    }
+    if (totalDependencies.indexOf("next") > -1) {
+        return "next";
+    }
+    var apollo = [
+        "apollo-server",
+        "apollo-server-express",
+        "apollo-server-hapi",
+        "apollo-server-koa",
+        "apollo-server-lambda",
+        "apollo-server-micro",
+    ];
+    if (totalDependencies.some(function (dep) { return apollo.indexOf(dep) > -1; })) {
+        return "apollo";
+    }
+    if (totalDependencies.indexOf("mdx-deck") > -1) {
+        return "mdx-deck";
+    }
+    if (totalDependencies.indexOf("gridsome") > -1) {
+        return "gridsome";
+    }
+    if (totalDependencies.indexOf("vuepress") > -1) {
+        return "vuepress";
+    }
+    if (totalDependencies.indexOf("ember-cli") > -1) {
+        return "ember";
+    }
+    if (totalDependencies.indexOf("sapper") > -1) {
+        return "sapper";
+    }
+    if (totalDependencies.indexOf("gatsby") > -1) {
+        return "gatsby";
+    }
+    if (totalDependencies.indexOf("quasar") > -1) {
+        return "quasar";
+    }
+    if (totalDependencies.indexOf("@docusaurus/core") > -1) {
+        return "docusaurus";
+    }
+    if (totalDependencies.indexOf("remix") > -1) {
+        return "remix";
+    }
+    if (totalDependencies.indexOf("astro") > -1) {
+        return "node";
+    }
+    // CLIENT
+    if (moduleNames.some(function (m) { return m.endsWith(".re"); })) {
+        return "reason";
+    }
+    var parcel = ["parcel-bundler", "parcel"];
+    if (totalDependencies.some(function (dep) { return parcel.indexOf(dep) > -1; })) {
+        return "parcel";
+    }
+    var dojo = ["@dojo/core", "@dojo/framework"];
+    if (totalDependencies.some(function (dep) { return dojo.indexOf(dep) > -1; })) {
+        return "@dojo/cli-create-app";
+    }
+    if (totalDependencies.indexOf("@nestjs/core") > -1 ||
+        totalDependencies.indexOf("@nestjs/common") > -1) {
+        return "nest";
+    }
+    if (totalDependencies.indexOf("react-styleguidist") > -1) {
+        return "styleguidist";
+    }
+    if (totalDependencies.indexOf("react-scripts") > -1) {
+        return "create-react-app";
+    }
+    if (totalDependencies.indexOf("react-scripts-ts") > -1) {
+        return "create-react-app-typescript";
+    }
+    if (totalDependencies.indexOf("@angular/core") > -1) {
+        return "angular-cli";
+    }
+    if (totalDependencies.indexOf("preact-cli") > -1) {
+        return "preact-cli";
+    }
+    if (totalDependencies.indexOf("@sveltech/routify") > -1 ||
+        totalDependencies.indexOf("@roxi/routify") > -1) {
+        return "node";
+    }
+    if (totalDependencies.indexOf("vite") > -1) {
+        return "node";
+    }
+    if (totalDependencies.indexOf("@frontity/core") > -1) {
+        return "node";
+    }
+    if (totalDependencies.indexOf("svelte") > -1) {
+        return "svelte";
+    }
+    if (totalDependencies.indexOf("vue") > -1) {
+        return "vue-cli";
+    }
+    if (totalDependencies.indexOf("cx") > -1) {
+        return "cxjs";
+    }
+    var nodeDeps = [
+        "express",
+        "koa",
+        "nodemon",
+        "ts-node",
+        "@tensorflow/tfjs-node",
+        "webpack-dev-server",
+        "snowpack",
+    ];
+    if (totalDependencies.some(function (dep) { return nodeDeps.indexOf(dep) > -1; })) {
+        return "node";
+    }
+    if (Object.keys(dependencies).length >= MAX_CLIENT_DEPENDENCY_COUNT) {
+        // The dependencies are too much for client sandboxes to handle
+        return "node";
+    }
+    return undefined;
+}
+function getExtension(filepath) {
+    var parts = filepath.split(".");
+    if (parts.length <= 1) {
+        return "";
+    }
+    else {
+        var ext = parts[parts.length - 1];
+        return ext;
+    }
+}
+
+var _a;
+var SUFFIX_PLACEHOLDER = "-{{suffix}}";
+var BUNDLER_URL = "https://".concat((_a = "2.19.8") === null || _a === void 0 ? void 0 : _a.replace(/\./g, "-")).concat(SUFFIX_PLACEHOLDER, "-sandpack.codesandbox.io/");
+var SandpackRuntime = /** @class */ (function (_super) {
+    __extends(SandpackRuntime, _super);
+    function SandpackRuntime(selector, sandboxSetup, options) {
+        if (options === void 0) { options = {}; }
+        var _this = _super.call(this, selector, sandboxSetup, options) || this;
+        /** Parent-owned Babel transpiler worker, connected to the iframe by port. */
+        _this.babelWorker = null;
+        _this.getTranspilerContext = function () {
+            return new Promise(function (resolve) {
+                var unsubscribe = _this.listen(function (message) {
+                    if (message.type === "transpiler-context") {
+                        resolve(message.data);
+                        unsubscribe();
+                    }
+                });
+                _this.dispatch({ type: "get-transpiler-context" });
+            });
+        };
+        _this.getTranspiledFiles = function () {
+            return new Promise(function (resolve) {
+                var unsubscribe = _this.listen(function (message) {
+                    if (message.type === "all-modules") {
+                        resolve(message.data);
+                        unsubscribe();
+                    }
+                });
+                _this.dispatch({ type: "get-modules" });
+            });
+        };
+        _this.bundlerURL = _this.createBundlerURL();
+        _this.bundlerState = undefined;
+        _this.errors = [];
+        _this.status = "initializing";
+        _this.fs = sandboxSetup.fs;
+        if (typeof selector === "string") {
+            _this.selector = selector;
+            var element = document.querySelector(selector);
+            nullthrows(element, "The element '".concat(selector, "' was not found"));
+            _this.element = element;
+            // Opaque-origin app iframe via the single factory (G1/T1). No
+            // `allow-same-origin`: the iframe runs untrusted code at an opaque origin
+            // so it can't read domain-scoped cookies, register service workers, or
+            // touch shared storage on the bundler origin. The Babel worker that used
+            // to require same-origin is now owned by the parent and reached over a
+            // transferred `MessagePort` (see `createBabelWorkerPort`).
+            _this.iframe = createSandboxedIframe();
+            _this.initializeElement();
+        }
+        else {
+            _this.element = selector;
+            _this.iframe = selector;
+        }
+        // Set-and-assert: a host-provided iframe is hardened here, and any iframe
+        // (created or passed) is verified to carry no `allow-same-origin`.
+        ensureSandboxed(_this.iframe);
+        _this.setLocationURLIntoIFrame();
+        _this.iframeProtocol = new IFrameProtocol(_this.iframe, _this.bundlerURL);
+        _this.unsubscribeGlobalListener = _this.iframeProtocol.globalListen(function (mes) {
+            if (mes.type !== "initialized" || !_this.iframe.contentWindow) {
+                return;
+            }
+            // this may not work with a boundedcontext, it may require an actual FS instance
+            var remotePortPromise = _this.fs.connectRemote();
+            remotePortPromise.then(function (remotePort) { return __awaiter(_this, void 0, void 0, function () {
+                var config, babelPort;
+                var _this = this;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            /**
+                             * Lazy file resolution over the iframe protocol, backed by the
+                             * {@link SandpackFS} passed on construction. Created before `register`
+                             * so it's ready for the bundler's lazy file reads as soon as the
+                             * bundler has the fs port.
+                             */
+                            this.fileResolverProtocol = new Protocol("fs", function (data) { return __awaiter(_this, void 0, void 0, function () {
+                                return __generator(this, function (_a) {
+                                    if (data.method === "isFile") {
+                                        return [2 /*return*/, this.sandboxSetup.fs.exists(data.params[0])];
+                                    }
+                                    else if (data.method === "readFile") {
+                                        return [2 /*return*/, this.sandboxSetup.fs.readFile(data.params[0])];
+                                    }
+                                    else {
+                                        throw new Error("Method not supported");
+                                    }
+                                });
+                            }); }, this.iframeProtocol);
+                            /**
+                             * Parent-side fetch + persistent cache for immutable module URLs.
+                             * The iframe's opaque origin has no storage, so it forwards these
+                             * here (see immutable-fetch-protocol.ts for the allowlist).
+                             */
+                            this.immutableFetchProtocol = new Protocol("immutable-fetch", function (data) { return __awaiter(_this, void 0, void 0, function () {
+                                return __generator(this, function (_a) {
+                                    if (data.method !== "fetch") {
+                                        throw new Error("Method not supported");
+                                    }
+                                    // params[1] is an optional `sha384-…` integrity the caller pins
+                                    // for this URL (SDK files); the cache verifies against it.
+                                    return [2 /*return*/, handleImmutableFetch(data.params[0], data.params[1])];
+                                });
+                            }); }, this.iframeProtocol);
+                            return [4 /*yield*/, this.computeInitConfig()];
+                        case 1:
+                            config = _a.sent();
+                            babelPort = this.createBabelWorkerPort();
+                            this.iframeProtocol.register(remotePort, config, babelPort);
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+        });
+        _this.unsubscribeChannelListener = _this.iframeProtocol.channelListen(function (mes) {
+            switch (mes.type) {
+                case "start": {
+                    _this.errors = [];
+                    break;
+                }
+                case "status": {
+                    _this.status = mes.status;
+                    break;
+                }
+                case "action": {
+                    if (mes.action === "show-error") {
+                        _this.errors = __spreadArray(__spreadArray([], _this.errors, true), [extractErrorDetails(mes)], false);
+                    }
+                    break;
+                }
+                case "done": {
+                    _this.status = "done";
+                    break;
+                }
+                case "state": {
+                    _this.bundlerState = mes.state;
+                    break;
+                }
+            }
+        });
+        if (options.experimental_enableServiceWorker) {
+            _this.serviceWorkerHandshake();
+        }
+        return _this;
+    }
+    SandpackRuntime.prototype.createBundlerURL = function () {
+        var _a;
+        var bundlerURL = this.options.bundlerURL || BUNDLER_URL;
+        // if it's a custom, skip the rest
+        if (this.options.bundlerURL) {
+            return bundlerURL;
+        }
+        if (this.options.teamId) {
+            bundlerURL =
+                bundlerURL.replace("https://", "https://" + this.options.teamId + "-") +
+                    "?cache=".concat(Date.now());
+        }
+        if (this.options.experimental_enableServiceWorker) {
+            var suffixes = [];
+            suffixes.push(Math.random().toString(36).slice(4));
+            bundlerURL = bundlerURL.replace(SUFFIX_PLACEHOLDER, "-".concat((_a = this.options.experimental_stableServiceWorkerId) !== null && _a !== void 0 ? _a : suffixes.join("-")));
+        }
+        else {
+            bundlerURL = bundlerURL.replace(SUFFIX_PLACEHOLDER, "");
+        }
+        return bundlerURL;
+    };
+    /**
+     * Creates (or recreates) the parent-owned Babel transpiler worker and returns
+     * the `MessagePort` to transfer into the iframe. The iframe can no longer run
+     * its own worker — without `allow-same-origin` it has an opaque origin, and a
+     * same-origin worker script won't load there — so transpilation happens in
+     * this worker on the parent's real origin. Per-transform traffic then flows
+     * iframe<->worker directly over the entangled ports; the parent doesn't relay.
+     */
+    SandpackRuntime.prototype.createBabelWorkerPort = function () {
+        var _a;
+        var workerURL = this.options.babelWorkerURL;
+        if (!workerURL) {
+            console.warn("[SandpackRuntime] No `babelWorkerURL` configured — the bundler cannot transpile without a Babel worker.");
+            return undefined;
+        }
+        // A reload re-runs this handshake; terminate the previous worker first so
+        // we don't leak one per reload.
+        (_a = this.babelWorker) === null || _a === void 0 ? void 0 : _a.terminate();
+        // Classic (not module) worker: the bundled worker lazily loads its Babel
+        // plugin/preset chunks via importScripts(), which a `{ type: "module" }`
+        // worker forbids. The worker artifact is built with outputFormat "globalThis"
+        // to match (see sandpack-bundler's babelWorker Parcel target).
+        var worker = new Worker(workerURL);
+        this.babelWorker = worker;
+        var channel = new MessageChannel();
+        // Hand the worker one end; it binds its message bus to this port on receipt.
+        worker.postMessage({ type: "connect" }, [channel.port1]);
+        return channel.port2;
+    };
+    SandpackRuntime.prototype.serviceWorkerHandshake = function () {
+        var _this = this;
+        var channel = new MessageChannel();
+        var iframeContentWindow = this.iframe.contentWindow;
+        if (!iframeContentWindow) {
+            throw new Error("Could not get iframe contentWindow");
+        }
+        var port = channel.port1;
+        port.onmessage = function (evt) {
+            if (typeof evt.data === "object" && evt.data.$channel === CHANNEL_NAME) {
+                switch (evt.data.$type) {
+                    case "preview/ready":
+                        // no op for now
+                        break;
+                    case "preview/request":
+                        _this.handleWorkerRequest(evt.data, port);
+                        break;
+                }
+            }
+        };
+        var sendMessage = function () {
+            var initMsg = {
+                $channel: CHANNEL_NAME,
+                $type: "preview/init",
+            };
+            iframeContentWindow.postMessage(initMsg, "*", [channel.port2]);
+            _this.iframe.removeEventListener("load", sendMessage);
+        };
+        this.iframe.addEventListener("load", sendMessage);
+    };
+    SandpackRuntime.prototype.handleWorkerRequest = function (request, port) {
+        return __awaiter(this, void 0, void 0, function () {
+            var notFound, filepath_1, headers, body, modulesFromManager, match, extension, foundMimetype, responseMessage, err_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        notFound = function () {
+                            var responseMessage = {
+                                $channel: CHANNEL_NAME,
+                                $type: "preview/response",
+                                id: request.id,
+                                headers: {
+                                    "Content-Type": "text/html; charset=utf-8",
+                                },
+                                status: 404,
+                                body: "File not found",
+                            };
+                            port.postMessage(responseMessage);
+                        };
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 7, , 8]);
+                        filepath_1 = new URL(request.url, this.bundlerURL).pathname;
+                        headers = {};
+                        body = void 0;
+                        return [4 /*yield*/, this.sandboxSetup.fs.exists(filepath_1)];
+                    case 2:
+                        if (!_a.sent()) return [3 /*break*/, 4];
+                        return [4 /*yield*/, this.sandboxSetup.fs.readFile(filepath_1)];
+                    case 3:
+                        body = _a.sent();
+                        return [3 /*break*/, 6];
+                    case 4: return [4 /*yield*/, this.getTranspiledFiles()];
+                    case 5:
+                        modulesFromManager = _a.sent();
+                        match = modulesFromManager.find(function (item) {
+                            return item.path.endsWith(filepath_1);
+                        });
+                        if (match) {
+                            body = match.code;
+                        }
+                        _a.label = 6;
+                    case 6:
+                        if (body === undefined) {
+                            notFound();
+                            return [2 /*return*/];
+                        }
+                        if (!headers["Content-Type"]) {
+                            extension = getExtension(filepath_1);
+                            foundMimetype = EXTENSIONS_MAP.get(extension);
+                            if (foundMimetype) {
+                                headers["Content-Type"] = foundMimetype;
+                            }
+                        }
+                        responseMessage = {
+                            $channel: CHANNEL_NAME,
+                            $type: "preview/response",
+                            id: request.id,
+                            headers: headers,
+                            status: 200,
+                            body: body,
+                        };
+                        port.postMessage(responseMessage);
+                        return [3 /*break*/, 8];
+                    case 7:
+                        err_1 = _a.sent();
+                        console.error(err_1);
+                        notFound();
+                        return [3 /*break*/, 8];
+                    case 8: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    SandpackRuntime.prototype.setLocationURLIntoIFrame = function () {
+        var _a;
+        var urlSource = this.options.startRoute
+            ? new URL(this.options.startRoute, this.bundlerURL).toString()
+            : this.bundlerURL;
+        (_a = this.iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.location.replace(urlSource);
+        this.iframe.src = urlSource;
+    };
+    SandpackRuntime.prototype.destroy = function () {
+        var _a, _b, _c, _d;
+        this.unsubscribeChannelListener();
+        this.unsubscribeGlobalListener();
+        (_a = this.unsubscribeFsWatcher) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.fileResolverProtocol) === null || _b === void 0 ? void 0 : _b.dispose();
+        (_c = this.immutableFetchProtocol) === null || _c === void 0 ? void 0 : _c.dispose();
+        (_d = this.babelWorker) === null || _d === void 0 ? void 0 : _d.terminate();
+        this.iframeProtocol.cleanup();
+    };
+    SandpackRuntime.prototype.updateOptions = function (options) {
+        if (!dequal(this.options, options)) {
+            this.options = options;
+            this.updateSandbox();
+        }
+    };
+    /**
+     * Updates the local sandbox state. The bundler watches the shared filesystem
+     * itself, so there is nothing to push to the iframe here — a file mutation
+     * triggers a rebuild on the bundler side without a `compile` message. A
+     * template/environment change is handled by re-registering the client (see
+     * `useClient`'s `watchFileChanges` effect), which re-runs `computeInitConfig`.
+     */
+    SandpackRuntime.prototype.updateSandbox = function (sandboxSetup) {
+        if (sandboxSetup === void 0) { sandboxSetup = this.sandboxSetup; }
+        this.sandboxSetup = __assign(__assign({}, this.sandboxSetup), sandboxSetup);
+    };
+    /**
+     * Computes the bundler's bootstrap config. Delivered once via the
+     * `register-frame` handshake (see the `initialized` handler) instead of a
+     * `compile` message, since the bundler now self-watches the filesystem.
+     */
+    SandpackRuntime.prototype.computeInitConfig = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var fs, packageJSON, _a, _b, e_1, fileNames, fileNameMap;
+            var _c;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
+                    case 0:
+                        fs = this.sandboxSetup.fs;
+                        packageJSON = JSON.parse(createPackageJSON(this.sandboxSetup.dependencies, this.sandboxSetup.devDependencies, this.sandboxSetup.entry));
+                        _d.label = 1;
+                    case 1:
+                        _d.trys.push([1, 5, , 6]);
+                        return [4 /*yield*/, fs.exists("/package.json")];
+                    case 2:
+                        if (!_d.sent()) return [3 /*break*/, 4];
+                        _b = (_a = JSON).parse;
+                        return [4 /*yield*/, fs.readFile("/package.json")];
+                    case 3:
+                        packageJSON = _b.apply(_a, [_d.sent()]);
+                        _d.label = 4;
+                    case 4: return [3 /*break*/, 6];
+                    case 5:
+                        e_1 = _d.sent();
+                        console.error(createError("could not parse package.json file: " + e_1.message));
+                        return [3 /*break*/, 6];
+                    case 6: return [4 /*yield*/, fs.list()];
+                    case 7:
+                        fileNames = _d.sent();
+                        fileNameMap = Object.fromEntries(fileNames.map(function (p) { return [p, true]; }));
+                        return [2 /*return*/, {
+                                template: this.sandboxSetup.template || getTemplate(packageJSON, fileNameMap),
+                                logLevel: (_c = this.options.logLevel) !== null && _c !== void 0 ? _c : SandpackLogLevel.Info,
+                                // Host-pinned SDK integrity hashes (SDK_PACKAGING_SPEC §5.2), forwarded
+                                // verbatim into register-frame for the bundler to verify against. The host
+                                // sets it via client options; absent → the bundler skips verification.
+                                sdkIntegrity: this.options.sdkIntegrity,
+                                // The §5.2 dirty set, forwarded verbatim into register-frame so the bundler
+                                // skips seeding artifacts for paths edited in a previous session. Absent ⇒
+                                // nothing dirty.
+                                dirtyPaths: this.options.dirtyPaths,
+                                // R3-49b batch-hydration snapshot, forwarded verbatim into register-frame so
+                                // the bundler hydrates its read caches before the first compile. Absent ⇒
+                                // reads cross the Port as before.
+                                fsSnapshot: this.options.fsSnapshot,
+                                // The chrome region this frame occupies (R3-114), forwarded verbatim into
+                                // register-frame so the bundler surfaces it on the runtime globalThis for the
+                                // SDK's getRegion(). Absent ⇒ the app reads no region.
+                                region: this.options.region,
+                                // BOOT_SCAFFOLDING_SPEC §3 — the resolved root package.json, forwarded
+                                // out-of-band so the bundler reads it from config instead of the FS and no
+                                // synthesized `package.json` is written into the CoW writable layer. This
+                                // is the same object `getTemplate` consumes above (the repo's file when
+                                // present, else the setup-derived default).
+                                packageJSON: packageJSON,
+                            }];
+                }
+            });
+        });
+    };
+    /**
+     * Relays the set of changed file paths to the bundler so it can re-bundle.
+     * The bundler can't observe parent-side writes to the shared filesystem on
+     * its own: zenfs's `Port` backend doesn't forward watch events across the
+     * iframe boundary. This lightweight signal replaces the old per-change
+     * `compile` message — it carries only paths, not template/options/config.
+     */
+    SandpackRuntime.prototype.notifyFilesChanged = function (paths) {
+        if (!paths.length) {
+            return;
+        }
+        this.dispatch({ type: "fs-change", paths: paths });
+    };
+    SandpackRuntime.prototype.dispatch = function (message) {
+        /**
+         * Intercept "refresh" dispatch: this will make sure
+         * that the iframe is still in the location it's supposed to be.
+         * External links inside the iframe will change the location and
+         * prevent the user from navigating back.
+         */
+        if (message.type === "refresh") {
+            this.setLocationURLIntoIFrame();
+            if (this.options.experimental_enableServiceWorker) {
+                this.serviceWorkerHandshake();
+            }
+        }
+        this.iframeProtocol.dispatch(message);
+    };
+    SandpackRuntime.prototype.listen = function (listener) {
+        return this.iframeProtocol.channelListen(listener);
+    };
+    /**
+     * Get the URL of the contents of the current sandbox
+     */
+    SandpackRuntime.prototype.getCodeSandboxURL = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var snapshot, paramFiles, res, sandboxId;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, snapshotFS(this.sandboxSetup.fs)];
+                    case 1:
+                        snapshot = _a.sent();
+                        paramFiles = Object.keys(snapshot).reduce(function (prev, next) {
+                            var _a;
+                            return (__assign(__assign({}, prev), (_a = {}, _a[next.replace("/", "")] = {
+                                content: snapshot[next],
+                                isBinary: false,
+                            }, _a)));
+                        }, {});
+                        return [4 /*yield*/, fetch("https://codesandbox.io/api/v1/sandboxes/define?json=1", {
+                                method: "POST",
+                                body: JSON.stringify({ files: paramFiles }),
+                                headers: {
+                                    Accept: "application/json",
+                                    "Content-Type": "application/json",
+                                },
+                            })];
+                    case 2:
+                        res = _a.sent();
+                        return [4 /*yield*/, res.json()];
+                    case 3:
+                        sandboxId = (_a.sent()).sandbox_id;
+                        return [2 /*return*/, {
+                                sandboxId: sandboxId,
+                                editorUrl: "https://codesandbox.io/s/".concat(sandboxId),
+                                embedUrl: "https://codesandbox.io/embed/".concat(sandboxId),
+                            }];
+                }
+            });
+        });
+    };
+    SandpackRuntime.prototype.initializeElement = function () {
+        this.iframe.style.border = "0";
+        this.iframe.style.width = this.options.width || "100%";
+        this.iframe.style.height = this.options.height || "100%";
+        this.iframe.style.overflow = "hidden";
+        nullthrows(this.element.parentNode, "The given iframe does not have a parent.");
+        this.element.parentNode.replaceChild(this.iframe, this.element);
+    };
+    return SandpackRuntime;
+}(SandpackClient));
+/**
+ * Read every tracked file from the filesystem into a plain `{ path: code }`
+ * snapshot. Used wherever the bundler protocol still expects a flat module
+ * map (the iframe `compile` payload, Open-in-CodeSandbox, etc.).
+ */
+function snapshotFS(fs) {
+    return __awaiter(this, void 0, void 0, function () {
+        var paths, out;
+        var _this = this;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, fs.list()];
+                case 1:
+                    paths = _a.sent();
+                    out = {};
+                    return [4 /*yield*/, Promise.all(paths.map(function (path) { return __awaiter(_this, void 0, void 0, function () {
+                            var _a, _b;
+                            return __generator(this, function (_c) {
+                                switch (_c.label) {
+                                    case 0:
+                                        _a = out;
+                                        _b = path;
+                                        return [4 /*yield*/, fs.readFile(path)];
+                                    case 1:
+                                        _a[_b] = _c.sent();
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); }))];
+                case 2:
+                    _a.sent();
+                    return [2 /*return*/, out];
+            }
+        });
+    });
+}
+
+export { SandpackRuntime };