@codesandbox/sandpack-client/esm/client.js

import { getTemplate } from "codesandbox-import-utils/lib/create-sandbox/templates";
import isEqual from "lodash.isequal";
// Muhahaha
// eslint-disable-next-line
// @ts-ignore
import { version } from "../package.json";
import Protocol from "./file-resolver-protocol";
import { IFrameProtocol } from "./iframe-protocol";
import { createPackageJSON, addPackageJSONIfNeeded, extractErrorDetails, } from "./utils";
const BUNDLER_URL = process.env.CODESANDBOX_ENV === "development"
    ? "http://localhost:3000/"
    : `https://${version.replace(/\./g, "-")}-sandpack.codesandbox.io/`;
export class SandpackClient {
    constructor(selector, sandboxInfo, options = {}) {
        this.getTranspilerContext = () => new Promise((resolve) => {
            const unsubscribe = this.listen((message) => {
                if (message.type === "transpiler-context") {
                    resolve(message.data);
                    unsubscribe();
                }
            });
            this.dispatch({ type: "get-transpiler-context" });
        });
        this.options = options;
        this.sandboxInfo = sandboxInfo;
        this.bundlerURL = options.bundlerURL || BUNDLER_URL;
        this.bundlerState = undefined;
        this.errors = [];
        this.status = "initializing";
        if (typeof selector === "string") {
            this.selector = selector;
            const element = document.querySelector(selector);
            if (!element) {
                throw new Error(`No element found for selector '${selector}'`);
            }
            this.element = element;
            this.iframe = document.createElement("iframe");
            this.initializeElement();
        }
        else {
            this.element = selector;
            this.iframe = selector;
        }
        if (!this.iframe.getAttribute("sandbox")) {
            this.iframe.setAttribute("sandbox", "allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts");
        }
        if (!this.iframe.getAttribute("allow")) {
            this.iframe.setAttribute("allow", "accelerometer; ambient-light-sensor; autoplay; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking");
        }
        this.iframe.src = options.startRoute
            ? new URL(options.startRoute, this.bundlerURL).toString()
            : this.bundlerURL;
        this.iframeProtocol = new IFrameProtocol(this.iframe, this.bundlerURL);
        this.unsubscribeGlobalListener = this.iframeProtocol.globalListen((mes) => {
            if (mes.type !== "initialized" || !this.iframe.contentWindow) {
                return;
            }
            this.iframeProtocol.register();
            if (this.options.fileResolver) {
                // TODO: Find a common place for the Protocol to be implemented for both sandpack-core and sandpack-client
                this.fileResolverProtocol = new Protocol("file-resolver", async (data) => {
                    if (data.m === "isFile") {
                        return this.options.fileResolver.isFile(data.p);
                    }
                    return this.options.fileResolver.readFile(data.p);
                }, this.iframe.contentWindow);
            }
            this.updatePreview(this.sandboxInfo, true);
        });
        this.unsubscribeChannelListener = this.iframeProtocol.channelListen((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 = [...this.errors, extractErrorDetails(mes)];
                    }
                    break;
                }
                case "state": {
                    this.bundlerState = mes.state;
                    break;
                }
            }
        });
    }
    cleanup() {
        this.unsubscribeChannelListener();
        this.unsubscribeGlobalListener();
        this.iframeProtocol.cleanup();
    }
    updateOptions(options) {
        if (!isEqual(this.options, options)) {
            this.options = options;
            this.updatePreview();
        }
    }
    updatePreview(sandboxInfo = this.sandboxInfo, isInitializationCompile) {
        var _a, _b, _c;
        this.sandboxInfo = sandboxInfo;
        const files = this.getFiles();
        const modules = Object.keys(files).reduce((prev, next) => ({
            ...prev,
            [next]: {
                code: files[next].code,
                path: next,
            },
        }), {});
        let packageJSON = JSON.parse(createPackageJSON(this.sandboxInfo.dependencies, this.sandboxInfo.entry));
        try {
            packageJSON = JSON.parse(files["/package.json"].code);
        }
        catch (e) {
            console.error("Could not parse package.json file: " + e.message);
        }
        // TODO move this to a common format
        const normalizedModules = Object.keys(files).reduce((prev, next) => ({
            ...prev,
            [next]: {
                content: files[next].code,
                path: next,
            },
        }), {});
        this.dispatch({
            type: "compile",
            codesandbox: true,
            version: 3,
            isInitializationCompile,
            modules,
            externalResources: [],
            hasFileResolver: Boolean(this.options.fileResolver),
            disableDependencyPreprocessing: this.sandboxInfo
                .disableDependencyPreprocessing,
            template: this.sandboxInfo.template ||
                getTemplate(packageJSON, normalizedModules),
            showOpenInCodeSandbox: (_a = this.options.showOpenInCodeSandbox) !== null && _a !== void 0 ? _a : true,
            showErrorScreen: (_b = this.options.showErrorScreen) !== null && _b !== void 0 ? _b : true,
            showLoadingScreen: (_c = this.options.showLoadingScreen) !== null && _c !== void 0 ? _c : true,
            skipEval: this.options.skipEval || false,
            clearConsoleDisabled: !this.options.clearConsoleOnFirstCompile,
        });
    }
    dispatch(message) {
        this.iframeProtocol.dispatch(message);
    }
    listen(listener) {
        return this.iframeProtocol.channelListen(listener);
    }
    /**
     * Get the URL of the contents of the current sandbox
     */
    getCodeSandboxURL() {
        const files = this.getFiles();
        const paramFiles = Object.keys(files).reduce((prev, next) => ({
            ...prev,
            [next.replace("/", "")]: {
                content: files[next].code,
                isBinary: false,
            },
        }), {});
        return 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",
            },
        })
            .then((x) => x.json())
            .then((res) => ({
            sandboxId: res.sandbox_id,
            editorUrl: `https://codesandbox.io/s/${res.sandbox_id}`,
            embedUrl: `https://codesandbox.io/embed/${res.sandbox_id}`,
        }));
    }
    getFiles() {
        const { sandboxInfo } = this;
        if (sandboxInfo.files["/package.json"] === undefined) {
            return addPackageJSONIfNeeded(sandboxInfo.files, sandboxInfo.dependencies, sandboxInfo.entry);
        }
        return this.sandboxInfo.files;
    }
    initializeElement() {
        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";
        if (!this.element.parentNode) {
            // This should never happen
            throw new Error("Given element does not have a parent.");
        }
        this.element.parentNode.replaceChild(this.iframe, this.element);
    }
}
//# sourceMappingURL=client.js.map