Feature request: load external sandbox

[danilowoz]

What is this feature?

Implement the ability to load external sandbox from CodeSandbox directly on Sandpack. The API would looks something like this:

<Sandpack template={{ sandboxId: "SANDBOXID" }} />

Main challenges:

• Find out a decent way to merge the payload from endpoint and custom setup?
• How to trigger new changes (componentDidMount) and still keep the payload from the endpoint?
• Sandpack needs to "understand" it's in a loading state;

Working in progress:

  /**
   * @hidden
   */
  fetchSandbox = async (
    sandboxId: string,
    onDone: () => void
  ): Promise<void> => {
    const payload: SandboxTemplate & { is_sse: boolean } = await fetch(
      `https://codesandbox.io/api/v1/sandboxes/csb-id-${sandboxId}/sandpack`
    )
      .then((data) => data.json())
      .catch(() => {
        console.error(
          `Something went wrong while fetching \`${sandboxId}\` sandbox`
        );
      });

    if (payload.is_sse) {
      throw Error("Sandpack doesn't support sandboxes that runs on server.");
    }

    this.setState({ externalSandboxPayload: payload }, onDone);
  };

  componentDidMount(): void {
    if (this.props.template && typeof this.props.template !== "string") {
      this.fetchSandbox(
        this.props.template.sandboxId,
        this.initializeSandpackIframe
      );
    } else {
      this.initializeSandpackIframe();
    }
  }

  // sandpackUtils.test.ts
 /**
   * Template
   */
  test("it defaults to a default template, when `template` is an external sandbox", () => {
    const setup = getSandpackStateFromProps({
      template: { sandboxId: "SANDBOX_ID" },
    });

    expect(setup.files).toEqual({
      ...VANILLA_TEMPLATE.files,
      "/package.json": {
        code: `{
  "name": "sandpack-project",
  "main": "/src/index.js",
  "dependencies": {},
  "devDependencies": {}
}`,
      },
    });
  });

[pomber]

Code Hike is currently using the https://codesandbox.io/api/v1/sandboxes/${csbid}/sandpack endpoint at build time (inside a remark plugin).

It would be nice if the fetchSandbox function is exposed from @codesandbox/sandpack-client so I could keep doing the same but abstracting away the URL.

[danilowoz]

This feature will land soon on the next major Sandpack release 🚀

[zachmerrill]

Is this still coming in the next major release?

[rahathosen]

a year is over still wating...

[cameronking4]

How can I preview a Nextjs app that uses app router not pages? How can I preview this sandbox specifically https://codesandbox.io/api/v1/sandboxes/csb-id-jyfdkf/sandpack?

Any chance you could help @danilowoz @pomber