Tell us how you think we can improve Sandpack

Packages affected

• [X] sandpack-client

What is this feature?

Offer documentation or first-class support for setting up multiple user editing in Sandbox.

Tell us how you think we can improve Sandpack

It would be useful to have component like <SandpackConsole> that renders... a sandpack's console.

Packages affected

• [x] sandpack-client (probably)
• [x] sandpack-react

How would your idea work?

It might be a component that renders console or props like <SandpackPreview console> to include console into preview.

Do you have any examples of how you would like to see us implement it?

It depends on implementation way. The first example right on codesandbox.io ("Console" button on the bottom of preview).

Another way is something like this:

Bug report

Packages affected

• [ ] sandpack-client
• [Y] sandpack-react

Using npmregistries for private registry is failing to load package, because of CORS error.

Used npmregistry for loading packages from custom registry

npmRegistries: [ { proxyEnabled: true, enabledScopes: ['@scope'], limitToScopes: true, registryUrl: "custom registry url", registryAuthToken:"token" }, ],

Error info: 'https://1-4-0-sandpack.codesandbox.io' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

Link to sandbox: link (optional)

Your Environment

| Software | Name/Version | | ----------------------- | ------------ | | Sandpack-client version | | | Sandpack-react version | 1.5 | | Browser | chrome | | Operating System | windows10 |

Hey, I wanted to use React Typescript. What would be the steps to to add that to the current version. I was looking inside the templates folder and this looks relative simpler to add, I can add if agreed.

Is there a way to add this to the existing version ?

This issue aims to centralize all concerns related to performance and what actions Sandpack is taking to solve them.

How to skip the transpiled step? Or how to load pre-transpiled code? We have already addressed an internal solution for it, which aims to cache all compiled files and share them between sandboxes with the same dependencies.

Why codesandbox.io loads faster than Sandpack? We use the exact same bundler in codesandbox as is published with the sandpack package, so actual bundling/transformation speed should be identical. However, on CodeSandbox we have a server-side redis cache which makes initial loads almost instant as it does not need to transpile anything initially. Again, we have some things planned to make this better for all sandpack users (a cache that isn't tied to a sandbox and some other improvements).

Related https://github.com/codesandbox/sandpack/issues/292, https://github.com/codesandbox/sandpack/issues/271, https://github.com/codesandbox/sandpack/discussions/259

Hi. I was testing sandpack-react with Docusaurus, but there's a fatal error as soon as I import a sandpack component:

client.js?e6b8:10 Uncaught (in promise) ReferenceError: process is not defined
    at eval (webpack-internal:///./node_modules/@codesandbox/sandpack-client/esm/client.js:21)
    at Module../node_modules/@codesandbox/sandpack-client/esm/client.js (:3000/vendors-node_modules_codesandbox_sandpack-react_dist_esm_presets_SandpackRunner_js.js:23)
    at __webpack_require__ (:3000/runtime~main.js:36)
    at fn (:3000/runtime~main.js:339)
    at eval (webpack-internal:///./node_modules/@codesandbox/sandpack-react/dist/esm/contexts/sandpackContext.js:8)
    at Module../node_modules/@codesandbox/sandpack-react/dist/esm/contexts/sandpackContext.js (:3000/vendors-node_modules_codesandbox_sandpack-react_dist_esm_presets_SandpackRunner_js.js:143)
    at __webpack_require__ (:3000/runtime~main.js:36)
    at fn (:3000/runtime~main.js:339)
    at eval (webpack-internal:///./node_modules/@codesandbox/sandpack-react/dist/esm/hooks/useSandpack.js:6)
    at Module../node_modules/@codesandbox/sandpack-react/dist/esm/hooks/useSandpack.js (:3000/vendors-node_modules_codesandbox_sandpack-react_dist_esm_presets_SandpackRunner_js.js:183)
    at __webpack_require__ (:3000/runtime~main.js:36)
    at fn (:3000/runtime~main.js:339)
    at eval (webpack-internal:///./node_modules/@codesandbox/sandpack-react/dist/esm/common/Layout.js:8)
    at Module../node_modules/@codesandbox/sandpack-react/dist/esm/common/Layout.js (:3000/vendors-node_modules_codesandbox_sandpack-react_dist_esm_presets_SandpackRunner_js.js:79)
    at __webpack_require__ (:3000/runtime~main.js:36)
    at fn (:3000/runtime~main.js:339)
    at eval (webpack-internal:///./node_modules/@codesandbox/sandpack-react/dist/esm/presets/SandpackRunner.js:7)
    at Module../node_modules/@codesandbox/sandpack-react/dist/esm/presets/SandpackRunner.js (:3000/vendors-node_modules_codesandbox_sandpack-react_dist_esm_presets_SandpackRunner_js.js:215)
    at __webpack_require__ (:3000/runtime~main.js:36)
    at fn (:3000/runtime~main.js:339)
    at eval (webpack-internal:///./src/pages/index.js:12)
    at Module../src/pages/index.js (:3000/component---site-src-pages-index-jsc-4-f-f99.js:47)
    at __webpack_require__ (:3000/runtime~main.js:36)
    at Function.fn (:3000/runtime~main.js:339)

Made a repro repo here, but it's basically the default docusaurus template with this added to pages/index.js:

import { SandpackRunner } from "@codesandbox/sandpack-react";

const CustomSandpack = () => <SandpackRunner />;

Using version 0.0.6.

What kind of change does this pull request introduce?

Feature:

• add vue-ts vue3-ts template
• update vue vue3 template

I checked it and it works fine.

@danilowoz In daily development, the VUE3-TS is widely used. It is recommended to merge.

We're open to supporting new Sandpack themes because our key goal is empowering developers to include custom live coding experiences over the web, regardless of your website layout or level of design expertise. That's why we provide plenty of options under @codesandbox/sandpack-themes, and we want to offer even more options. So, how can you contribute to new themes?

Sandpack Theme Builder

Sandpack provides a tool to guide you in creating your custom theme. Start with a dark or light theme, and then add your custom values like primary and secondary colors.

Plus, if you want to give an even more personal touch, you can go to the Advanced tab and set colors for the syntax highlight and other cases.

https://sandpack.codesandbox.io/theme

Publish a theme

At this point, you need to go to the Sandpack repository, fork, and introduce some changes in your pull request. BTW, you can just use CodeSandbox Projects to do that:

1. Open the Sandpack repository on CodeSandbox Projects;
2. Create a contribution branch, which will fork the repository for you:

3. Create a new file in codesandbox/sandpack/sandpack-themes/src folder with following file [theme name].ts
4. The content of this file must be an export for an object that contains the theme:

import type { SandpackTheme } from "./types";

export const THEME_NAME: SandpackTheme = {
  colors: {
		...
  },

  syntax: {
		...
  },
  font: {
    ...
  },
};

5. Include your new theme into the index.ts file, that exposes all themes.

Still not clear? Feel free to contact us on Discord or on GitHub.

What kind of change does this pull request introduce?

provide a property(enableAutoHiddenFile: default value is false) in FIleExplorer Component that indicates whether files in the file tree are automatically hidden.

What is the current behavior?

Closes #482

What is the new behavior?

My solution is to provide a property that indicates whether files in the file tree are automatically hidden.LIke this:

// enableAutoHiddenFile: boolean; // default: false
<SandpackProvider
    files={{
      "/index.js": {
        code: "// index.js",
        active: true
      },
      "/index2.js": {
        code: "// index2.js"
      },
      "/src/index.js": {
        code:
          "// this file is generated by vanilla template, but it is not needed",
        hidden: true
      },
      "/hidden.js": {
        code: "// hidden.js",
        hidden: true
      }
    }}
    customSetup={{
      entry: "/index.js"
    }}
    template={"vanilla"}
  >
    <SandpackLayout>
      <SandpackFileExplorer enableAutoHiddenFile />
      <SandpackCodeEditor />
    </SandpackLayout>
  </SandpackProvider>

What steps did you take to test this? This is required before we can merge, make sure to test the flow you've updated.

add story: http://localhost:6006/?path=/story/bug-reports-issues--issue-482

Checklist

• [ ] Documentation;
• [x] Storybook (if applicable);
• [ ] Tests;
• [x] Ready to be merged;

Bug report

Packages affected

• [ ] sandpack-client
• [x] sandpack-react

Description of the problem

Hi! First off, thank you for this amazing tool 🙏 It has been an extremely simple process to get up and running with an embedded code editor, which is incredibly awesome.

The issue I noticed is that when using the suggested strategy for using private NPM packages, I've noticed that if the package is large, it can cause a really notable lag when trying to use the editor (see the video below). From what I can tell, this happens because when the files change, it kicks of a useEffect that compresses the files.

With smaller files, that makes a lot of sense and allows the ability to open in a codesandbox anytime with little delay, which is awesome. However, it seems that if this is the go-to strategy for using private packages, it may benefit from having a way to avoid this behavior for larger packages. The options I thought of were:

1. Add an option in the options or customSetup to remove the "Open in Codesandbox button"
2. Make the compression an asynchronous process that does not block the main thread (and a loader can show in the button till it's complete)
3. Implement a caching strategy to avoid re-compressing large files (maybe detect which file changed and only re-process them?)

I'm not familiar enough with the package to know which of these, if any, are viable, but option 1 seemed like it'd be relatively straight forward compared to the others.

https://user-images.githubusercontent.com/46691367/163629990-c00a8e2e-5109-423a-9f68-37ce532ce459.mov

(Apologies if the video is unclear, but anytime that typing stops, it's because it's lagging)

Note: I tried running with autorun: false and recompileMode: 'delayed' to try to change the behavior, and they might have helped a little bit, but the issue persisted.

What were you doing when the problem occurred?

Editing a file while using a very large UI library package as a dependency.

What steps can we take to reproduce the problem?

• Use this strategy to add in a LARGE custom package. Unfortunately mine is private or else I'd set up an example using it, but it's a 2.3MB bundle comprised of a relatively large UI component library.
• Attempt to edit a code file that imports that library

Your Environment

| Software | Name/Version | | ----------------------- | ------------ | | Sandpack-client version | 0.15.2 | | Sandpack-react version | 0.15.2 | | Browser | chrome / 100.0.4896.88 | | Operating System | macOS / 12.3.1 |

Apologies if this a duplicate issue or there's already an easy way to go about this!

FIrst of all - thank you for nice tool! I'm really happy to use it in my projects :raised_hands:

Bug report

1. This setup gives 2 tabs with same title App.tsx, and renders default template in preview, instead of my App.tsx

<Sandpack
  template="react-ts"
  files={{
    "/App.tsx": code
  }}
/>

2. This setup gives no tabs, but nothing renders in preview

<Sandpack
  template="react-ts"
  files={{
    "/App.tsx": code
  }}
  customSetup={{ entry: "/App.tsx", main: "/App.tsx" }}
/>

Expected:

• no tabs
• preview renders my provided example

You can try it in sandbox https://codesandbox.io/s/sandpack-codesandbox-rendering-conflict-forked-hfuip

This is a port of changes in https://github.com/lezer-parser/javascript/commit/00173306dc20e2b1f364cc30b6de0398156e8f42.

See https://github.com/codemirror/dev/issues/956 for context.

I don't think merging this would actually work unless you backport the changes from https://github.com/codemirror/dev/issues/956 to the old version of @codemirror/highlight and @lezer/lang-javascript. Which I did in my local copy but maybe that's too much. I really want this change though.

A proper way would be to of course actually upgrade. And then do this PR.

Bug report

Packages affected

• [ ] sandpack-client
• [ ] sandpack-react

Description of the problem

when i use Codemirror extensions in the CodeEditor component like this

<Sandpack
  options={{
    codeEditor: {
      extensions: [autocompletion()],
      extensionsKeymap: [completionKeymap],
    },
  }}
  template="react"
/>

but console show me below errors , how can i fix up this problem :(

What were you doing when the problem occurred?

https://github.com/codesandbox/sandpack/pull/286#issue-1093281496

What steps can we take to reproduce the problem?

Link to sandbox: link (optional)

Your Environment

| Software | Name/Version | | ----------------------- | ------------ | | Sandpack-client version | | | Sandpack-react version | | | Browser | | | Operating System | |

Bug report

Packages affected

• [ ] sandpack-client (haven't tried without React, sorry)
• [x] sandpack-react

Description of the problem

I'm not sure if this is a sandpack bug, a verdaccio bug or I've just messed up the configuration. Apologies in the advance if this is the wrong place to post this.

What were you doing when the problem occurred?

Following the sandpack "private packages" docs to setup a custom registry (to eventually access privately hosted npm packages)

What steps can we take to reproduce the problem?

1. Configure verdaccio with the npmjs registry setup as follows (note, this was mostly in the default configuration):

uplinks:
  npmjs:
    url: https://registry.npmjs.org/

...

packages:
  '@*/*':
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs

  '**':
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs

2. Run verdaccio locally with:

npx verdaccio --listen 4000

3. Configure Sandpack to use the registry as follows:

    <Sandpack
      template="react-ts"
      files={{
        "/App.tsx": code,
      }}
      customSetup={{
        dependencies: {
          "styled-components": "^5.3.6",
          // "@mui/material": "^5.10.13",
          // "@emotion/react": "^11.10.5",
          // "@emotion/styled": "^11.10.5",
        },
        npmRegistries: [
          {
            enabledScopes: [],
            limitToScopes: false,
            registryUrl: "http://localhost:4000",
          },
        ],
      }}
    />

4. This should work just fine with styled-components because it is not a scoped package Note, you should also see activity in the verdaccio proxy console

5. Remove the comments to add the MUI scoped packages

6. This will produce the following error

Could not fetch dependencies, please try again in a couple seconds: Cannot read properties of undefined (reading 'content')

Link to sandbox

Note, to use this sandbox, you'll need to follow the above steps to setup a verdaccio proxy locally on port 4000 first. In this sandbox, I've created three files:

1. NotWorking.tsx - This demonstrates the problem with a custom registry and a scoped package (@mui/material)
2. Working.tsx - This demonstrates that using a custom registry works fine with non-scoped packages (styled-components)
3. AlsoWorking.tsx - This demonstrates that scoped packages (@mui/material) still works as expected without the custom registry

Only the NotWorking example is rendered by default but these can be switched in and out in index.tsx. Hope that helps.

Your Environment

| Software | Name/Version | | ----------------------- | ------------ | | Sandpack-client version | 1.12.1 | | Sandpack-react version | 1.17.0 | | Browser | Chrome | | Operating System | OSX |

Bug report

Not sure if this is a bug or expected behaviour but when I add stuff to externalResources, it's not included in the newly created codesandbox when using the "Open in Codesandbox" button.

Packages affected

• [x] sandpack-react

Description of the problem

externalResources not included in codesandbox when using the "Open in Codesandbox" button.

What were you doing when the problem occurred?

Clicked the "Open in Codesandbox" button

What steps can we take to reproduce the problem?

Add:

externalResources: ['https://cdn.tailwindcss.com']

to you your customSetup options and use the "Open in Codesandbox" button. You will see that https://cdn.tailwindcss.com is not included in the head.

On our website, everything works great: https://reactflow.dev/docs/examples/styling/tailwind/ but when you use the "Open in Codesandbox" button, it is broken.

Tell us how you think we can improve Sandpack

The current implementation of bundler doesn't cache the build which means, even on the second or subsequent loads the whole build process starts from scratch causing a huge performance overhead(think about a sandpack using tons of npm dependencies)

Packages affected

• [x] sandpack-client
• [x] sandpack-react

What is this feature?

Feature Request: Add support for caching the build for 2nd load onwards

This helps with our use-case of running a "heavy sandpack"! This should also help every user of sandpack have an instant preview 2nd load onwards (no matter their choice of template and build step)