codesandbox / sandpack-bundler Goto Github PK

View Code? Open in Web Editor NEW

52.0 11.0 10.0 1.79 MB

The new bundler/runtime powering client-side sandpack sandboxes

Home Page: https://sandpack-bundler.codesandbox.io

License: Apache License 2.0

HTML 0.26% TypeScript 99.11% JavaScript 0.63%

sandpack

sandpack-bundler's Introduction

Sandpack Bundler

The sandpack bundler, this aims to eventually replace the current sandpack with a more streamlined and faster version.

Getting started

Run yarn to install dependencies.
Run yarn dev to start the development server
Set the bundlerURL of sandpack-react to http://localhost:1234/ to see it in action.

Test the production build (performance/integration tests)

Run yarn to install dependencies.
Run yarn build to build the application
Run yarn start to start a local test server
Set the bundlerURL of sandpack-react to http://localhost:4587/

Using the deployed version

The main branch of this repository is automatically deployed to https://sandpack-bundler.codesandbox.io so you can update bundlerURL of sandpack-react to that url and start using the new sandpack bundler.

sandpack-bundler's People

Contributors

Stargazers

Watchers

Forkers

yixinagqingyuan dav1nx1 front-end-captain jame-earnin geeknation leonyoung1 4zonelogistics davidmccabe symbo-ls lubieowoce

sandpack-bundler's Issues

Remove console.warn("Unknown preset parcel, falling back to React") when using experimental bundler

Is it possible to get rid of the warning in console "Unknown preset parcel, falling back to React":

My config is as follows.

<Sandpack
  template="vanilla"
  options={{
    showConsole: true,
    bundlerURL: "https://sandpack-bundler.codesandbox.io",
  }}
/>

Missing DOCTYPE causes browsers to use Quirks Mode

The bundled HTML doesn't have a doctype, meaning browsers choose quirks mode for the Sandpack previews. I noticed this on https://react.dev, which has many previews.

An easy way to reproduce is to check https://react.dev/learn

Firefox (v111.0) Open console and see the warning about Quirks Mode
Chrome (v111.0.5563.110) Open dev tools, select an iframe, in console run document.compatMode, which returns "BackCompat"
Safari (v16.3) Same as Chrome

It looks like the bundler starts with its own index.html and uses src/utils/html/replaceHTML to replace the body with the user's HTML body. Seems like the simplest fix is to add <!DOCTYPE html> to the start of the bundler's index.html. I ran react.dev and sandpack-bundler locally and that got rid of quirks mode.

The current approach is a little confusing, though. The user's own index.html (which sometimes comes from Sandpack's templates) gets passed to the bundler and then ignored, which made for a surprising debugging experience. In the long term, it would be nice if the index.html supplied by the user had priority over the bundler's index.html

Request the template resolution of a Vue

Feature: dispatch bundler state from bundler to protocol

Currently, the v1 returns the bundler-state to Sandpack, which contains a lot of useful information. For example, the compiled files are mandatory information to render SandpackTranspiledCode.

V1: https://github.com/codesandbox/codesandbox-client/blob/master/packages/app/src/sandbox/compile.ts#L873-L876
Sandpack: https://github.com/codesandbox/sandpack/blob/main/sandpack-client/src/client.ts#L214-L217

If you point me out the right place, I can try to implement it

Failing to install npm dependencies when using self-hosted bundlerURL

Bug report

Packages affected

sandpack-client
sandpack-react

Description of the problem

I have this sandpack-bundler running: https://github.com/codesandbox/sandpack-bundler

In the example sandbox below, you will see I am setting the bundlerURL in the SandboxProvider.

The sandpack created doesn't actually work though due to failing to properly important the library. It works fine when I don't set bundlerURL and use the default bundler. Example of the error:

(Sometimes the error is about failing to import other stuff like Cannot find module 'process' from '/node_modules/vfile/lib/minproc.js')

It works fine when I try other libraries like "uuid: latest", but testing with "react-markdown: latest" has given me these errors. I've tried a couple other libraries and had issues with them too. It's like it's not doing npm install properly.

Again I should note that if I don't define bundlerURL and use the default, it works fine.

(Side note: sandpack-client and sandpack-react seem to use a different bundler version, 1.7.0 vs 1.8.8)

Link to sandbox: link

Your Environment

Software	Name/Version
Sandpack-client version
Sandpack-react version	1.0.0 and also tried 1.8.8
Browser	Chrome
Operating System	MacOS

Live editing does not work with experimental bundler

I expected the code changes to reflect in the preview panel.

Architecture chart link doesn't work

README.md has a link to https://www.figma.com/file/I2Gm2pGCRdWMoBWxXrvYib/sandpack-bundler-architecture?node-id=0%3A1 but following the link (and logging into figma) leads me to a page with the following error message

File not found

Either this file doesn’t exist or you don’t have permission to view it. Ask the file owner to verify the link and/or update permissions.