This is CodeSandbox 1.5! I don’t know how to call all updates anymore, so I decided to version CodeSandbox with arbitrary numbers. This is a big update, I rewrote the editor, the preview screen and the packager. All these changes made the deployment quite exciting, but it’s online now. Let’s get started! Editor The editor has been rewritten to use the . This editor is an extracted version of the editor, and thus powerful. monaco-editor vscode really Peek Definition, Go to Definition, Find all References The really cool thing about monaco-editor is that you get the core editor features (Go to Definition, Peek Definition, etc.) of vscode for free. The only thing you need to do is wiring everything up correctly, I created a separate build of the Monaco editor for better cross file integration in CodeSandbox. Peek Definition, Go to Definition, Find all References Automatic Type Acquisition Not only navigation gets easier, the monaco-editor has IntelliSense for JavaScript and TypeScript built in! That’s cool, and even better if you have the typings of dependencies. That’s why I added ‘Automatic Type Acquisition’, this means that for every ‘installed’ dependency we search and download the type definitions on . This way you get autocomplete for libraries. really https://unpkg.com Autocompletions for many dependencies ESLint, Prettier, Emmet.io I ported almost all existing editor features over. This means that you have ESLint, Prettier and Emmet.io built in in the editor! Unfortunately I had to drop VIM Mode, you can still enable this, but this will disable monaco and enable codemirror. Emmet.io & ESLint & Prettier I’m really happy with the new editor, and want to state that this could never work without the monaco-editor, TypeScript, unpkg, emmet.io, ESLint and Prettier. I want to explicitly thank these tools, the only thing I had to do is wire everything up and patch some integrations. react-error-overlay We have another tool that made CodeSandbox much better, namely by ! Error handling in CodeSandbox has been redone, and thanks to we now support async errors and deep linked errors + have a beautiful error overlay. Furthermore I rewrote the error handling of the preview so errors now show up in the file. react-error-overlay create-react-app react-error-overlay right CodeSandbox not only shows errors, it also offers suggestions for known errors. In the example above is importing , notice that there is no extension. This will throw an error. We can easily detect this and give the suggestion to rename the file. I’m thinking of writing an API that allows library developers to add suggestions for errors for their specific library. DeepComponent.js RawComponent Invalid Tag Error overlay (suggestions and error navigation don’t work here as you’re not in the editor) External Frames It’s now possible to open sandboxes in an external url. You can use this to see the preview in a separate window during development, or to share a fullscreen version of your sandbox with friends. Note that this external frame is nowhere near a production version, I’m working together with ZEIT to integrate ‘Deploy to Now’ so you can deploy a production version automagically ✨. External frames! The external sandbox also works offline. Which takes me to the next point… Offline Support CodeSandbox is now backed by service workers. This means that you can open the editor and the preview while offline and see CodeSandbox instead of a dinosaur 🙃. Note that offline support is currently limited, you cannot save your sandboxes offline yet (you can still download though). I need to make some required changes to the server to be able to do this. You are able to edit sandboxes though! This feature is really an improvement in speed, it will save network roundtrips for e.g. dependencies. No Dinosaur! Dependency Packager Rewrite The packager of the dependencies has been rewritten. It’s now hosted as a serverless solution, which means that it can scale (practically) indefinitely. We also saw a nice improvement in speed, we saw improvements between 40%-700%(!) in response time. A new feature that comes with the new packager is that we support version ranges instead besides absolute versions. You will be able to install for example, and it will update automatically as React updates. This functionality will be deployed somewhere this week, I need to change some server logic first. react@next After working with serverless I have to say that I’m impressed by how it works in practice. Our hosting costs went down from ~50$ per month to a projected cost 0f 0.03$ per month + we are now faster, more scalable and deployment is a breeze. I will write a post about this when I find the time. really NOTE: The packager has been rolled back for now, some package combinations couldn’t be loaded because of disk space limitations, it’s solvable. Thanks You can see a trend in these features, every feature makes heavy use of some existing technology. It saved me of time, and I want to specifically list another thank you to the authors that made this possible.Thanks to: tons The team, for taking the effort to extract and being open source. This is valuable for the online editor movement. vscode monaco-editor really for allowing us & making it easy to download typings automatically from NPM. https://unpkg.com , and for not only making these valuable productivity boost tools, but also for keeping them compatible with the browser. ESLint Prettier Emmet.io Everyone behind , and specifically react-error-overlay. Implementing this started as a joke, but turned out much easier than I expected and actually went through. create-react-app , they made implementing offline support a breeze. Their config is superb. sw-precache for their work in making serverless development and deployment easier & more accessible. They’re doing a very important job and are doing it really well. Serverless
