website icon indicating copy to clipboard operation
website copied to clipboard
verified publisher icon babel

[WIP] Initial Sandpack Proof of Concept

Open CompuIves opened this issue 7 years ago • 8 comments

This is my initial POC for Sandpack, it's reaaaally rough right now because I don't have more time today. One thing I'd like to do is wrap the existing CodeMirror panels in SandpackConsumers, because those are already styled perfectly. I'm also thinking of exposing the Error field on the Sandpack state.

CompuIves avatar Mar 08 '18 22:03 CompuIves

Deploy preview for babel-new ready!

Built with commit b7924867e14fe677d7f5171b72e682fb4725881b

https://deploy-preview-1600--babel-new.netlify.com

hzoo avatar Mar 08 '18 22:03 hzoo

Ah I went ahead and started to reuse the existing components, was simpler than I thought!

CompuIves avatar Mar 08 '18 22:03 CompuIves

Dang it feels super fast!?

hzoo avatar Mar 08 '18 23:03 hzoo

Dang it feels super fast!?

wow it's really super fast, Ives :heart_eyes:

xtuc avatar Mar 09 '18 06:03 xtuc

There are some things that still need to be done and I could get help with:

  • [x] Generate a .babelrc based on the sidebar state.
  • [ ] Add a File Explorer in the sidebar to view .babelrc and /index.js.
  • [x] Remove the existing Babel worker.
  • [x] Move things like File Size etc. over to the compiled code coming from Sandpack.
  • [ ] In babel standalone, externalize fs (in a special build) and expose processOptions as Babel.processOptions. This way we can use fs in Babel transpilation.
  • [ ] Add Open in CodeSandbox button somewhere, the component for this is already exported by Sandpack.

And these are some things that should still come to Sandpack, I can look at the first one today:

  • [x] Add an errors array field on managerState.
  • [x] Create a Babel template (I'll do this later).

If there's anyone interested in helping, I'd really appreciate it 😄. Just take something from the list of todos if you're interested!

CompuIves avatar Mar 09 '18 10:03 CompuIves

I got the bundle from 3.2MB to 1.7MB.

I think we can still improve the bundle size, I believe that the Netlify build server doesn't have NODE_ENV=production, which causes the bundle to include source maps from emotion. If NODE_ENV=production we'll get a build that's 428KB (not gzipped).

CompuIves avatar Mar 11 '18 20:03 CompuIves

If we do https://github.com/babel/website/pull/1483 or update to v7 you can use <> instead of React.Fragement altogether it's really not a big deal.

hzoo avatar Mar 12 '18 01:03 hzoo

TODO items for me:

  • [x] Generate babel-transpiler.json based on incoming query params to support previewing PRs, etc.
  • [ ] Fix 3rd party plugins loading
  • [x] Fix eval
  • [ ] Fix prettier
  • [ ] Fix minifier
  • [ ] Cleanup!!!

existentialism avatar Mar 12 '18 03:03 existentialism