CodeSandbox 1.5 Changelog

2017.8.16 - ✏️Ives van Hoorne

CodeSandbox 1.5 Changelog

이것은 CodeSandbox v1.5이다. 더 이상 모든 업데이트를 호출하는 방법을 모르므로, 임의의 숫자로 CodeSandbox의 버전을 결정했다.

이것은 큰 업데이트이며, 편집기, 미리보기 화면 및 packager를 다시 작성했다. 이러한 모든 변경 사항으로 인해 배포가 매우 흥미로워졌지만, 지금 온라인 상태이다.

Editor

편집기는 monaco-editor를 사용하여 다시 작성되었다. 이 편집기는 추출 된 vscode 편집기 버전이므로 실제로 강력하다.

Peek Definition, Go to Definition, Find all References

monaco-editor의 가장 멋진 점은 vscode의 핵심 편집기 기능 (Go to Definition, Peek Definition 등)을 무료로 사용할 수 있다는 것이다. 해야 할 유일한 것은 모든 것을 올바르게 연결하는 것이다. 우리는 CodeSandbox에서 더 나은 크로스 파일 통합을 위해 Monaco 편집기의 별도 빌드를 만들었다.

Automatic Type Acquisition

탐색이 쉬울뿐만 아니라, monaco-editor에는 IntelliSense를 위한 JavaScript 및 TypeScript가 내장되어 있다. 의존성을 작성하면 훨씬 좋다. 그래서 'Automatic Type Acquisition'을 추가했다. 그것은 모든 '설치된' 의존성에 대해 https://unpkg.com에서 유형을 검색하고 다운로드한다는 의미이다. 이 방법으로 라이브러리의 자동 완성 기능을 사용할 수 있다.

ESLint, Prettier, Emmet.io

거의 모든 기존 편집기 기능을 포팅했다. 즉, 편집기에 ESLint, Prettier 및 Emmet.io가 내장되어 있다. 유갑스럽게도, Vim Mode를 삭제해야 했지만, Monaco를 비활성화하고 CodeMirror를 활성화한다면 Vim Mode를 사용할 수 있다.

새로운 편집기에 정말 만족하고 있으며, monaco-editor 없이는 TypeScript, unpkg, Emmet.io, ESLint 및 Prettier 들이 작동하지 않았을 것이다. 이러한 tool들에 확실하게 감사하다고 말하고 싶으며, 내가 해야 할 유일한 것은 모든 것을 연결하고 일부 통합을 패치하는 것이다.

react-error-overlay

우리는 CodeSandbox를 훨씬 더 좋게 만드는 또 다른 도구, 즉 create-react-app에 의한 react-error-overlay를 만들었다. CodeSandbox의 오류 처리가 다시 수행되었으며. react-error-overlay 덕분에 이제 비동기 오류와 딥 링크 오류를 지원하고 아름다운 오류 오버레이를 갖게되었다. 또한 미리보기의 오류 처리를 다시 작성하여 오류가 올바른 파일에 표시되었다.

CodeSandbox는 오류를 표시 할뿐만 아니라 알려진 오류에 대해 제안도 제공한다. 위의 예에서 DeepComponent.js는 RawComponent를 가져 오는 중이므로 확장자가 없다. 따라서 잘못된 태그 오류가 발생한다. 우리는 이것을 쉽게 감지하고, 파일 이름을 바꿀 것을 제안 할 수 있다. 라이브러리 개발자가 특정 라이브러리의 오류에 대한 제안을 추가 할 수있는 API를 작성하려고 한다.

External Frames

이제 외부 URL에서 프로젝트를 열 수 있습니다. 이를 사용하여 개발 중에 별도의 창에서 미리보기를 보거나, 프로젝트의 전체 화면 버전을 친구들과 공유 할 수 있다. 이 외부 프레임은 프로덕션 버전과 거의 일치하지 않으므로 ZEIT와 함께 'Deploy to Now'를 통합하여 프로덕션 버전을 자동으로 배포 할 수 있다.

외부 프로젝트는 오프라인에서도 작동한다.

Offline Support

CodeSandbox는 이제 service workers가 지원한다. 즉, 오프라인에서도 편집기와 미리보기를 열 수 있으며, 이제는 공룡 대신 코드 샌드 박스를 볼 수 있다. 오프라인 지원은 현재 제한되어 있으므로, 아직 프로젝트를 오프라인으로 저장할 수 없다. 이 작업을 수행하려면 서버를 약간 변경해야한다. 그래도 프로젝트는 편집 할 수 있다. 이 기능은 실제로 속도가 향상되어 의존성과 같은 네트워크 왕복 시간을 절약한다.

Dependency Packager Rewrite

의존성의 패키지가 다시 작성되었다. 이제 severless 솔루션으로 호스팅되므로, 무한정 확장 할 수 있다. 또한 속도가 크게 향상되었으며, 응답 시간이 40%-700% 정도 개선되었다.

새로운 패키지와 함께 제공되는 새로운 기능은 절대 버전 뿐 아니라 이전의 버전을 포함한 버전 범위를 지원한다는 것이다. 예를 들어 react@next를 설치할 수 있으며, 그것은 React 업데이트로 자동 업데이트된다. 이 기능은 이번 주 어딘가에 배포 될 예정이므로 먼저 서버 로직을 변경해야한다.

severless로 작업 한 후, 실제 작동하는 방식에 대해 깊은 인상을 받았다. 호스팅 비용이 한 달에 $ 50에서 월 $ 0.03로 감소했다. 이제 더 빠르고, 확장 가능하며, 배포가 매우 쉬워졌다. 시간이 나면 이것에 관한 게시물을 쓸 것이다.

Thanks

• VS Code & monaco-editor
• https://unpkg.com
• ESLint & Prettier & Emmet.io
• create-react-app & create-react-overlay
• sw-precache