JSer.info #538 - Babel 7.14.0 릴리스.

2021-04의 TC39 미팅에서 Stage 4가 된 class fields / private methods 등을 @babel/preset-env에서 기본적으로 지원한다.
따라서 더이상 @babel/plugin-proposal-class-properties와 @babel/plugin-proposal-private-methods를 개별 플러그인으로 추가할 필요없다.

또, Node.js의 ESM에서 CommonJS 모듈을 가져올 경우 상호운용성 향상시키는 옵션으로서 importInterop: "node"가 추가됐다.

Implement importInterop: "node" option for module transforms by nicolo-ribaudo · Pull Request #12838 · babel/babel
@babel/plugin-transform-modules-commonjs · Babel

함께 TypeScript 4.3 지원, Stage 1의 ES Proposal인 async do expression 지원 등이 포함됐다.

RxJS 7.0.0 릴리스.

RxJS 7.0.0은 파일 크기가 6.x에 비해 약 53% 줄었다.
또, TypeScript 타입 수정 및 API의 일관성 수정이 이뤄졌다.
새로운 기능으로서는 Async Iterator나 Readable Stream 대응, animationFrames, share(config) 등이 추가됐다.

아래 슬라이드와 영상에서 자세히 소개하고 있다.

New WebKit Features in Safari 14.1 | WebKit

Safari 14.1의 변경 사항이 정리돼 있다.

Flexbox Gap 지원, macOS에서 input 요소의 type 속성으로 date / time / datetime-local 지원. 또, speech recognition를 포함하는 Web Speech API, MediaRecorder API, WebM 등을 지원한다.
JavaScript로는 Class Fields, WeakRef 지원, i18n API 지원 개선, WebAssembly의 Threading을 지원한다.
그 외로는 Private Click Measurement를 기본적으로 활성화, Storage Access API와 Web Inspector가 갱신됐다.

헤드라인

Future of Angular E2E & Plans for Protractor · Issue #5502 · angular/protractor

github.com/angular/protractor/issues/5502

Angular E2E issue news testing

Angular의 E2E 테스트 프레임워크 인 Protractor 개발 종료 일정에 대한 이슈.
다른 프레임워크가 빠르게 성숙함에 따라 2021년 5월에 Deprecated 되며 2020년 말에 개발을 종료한다.

7.14.0 Released: New class features enabled by default, TypeScript 4.3, and better CommonJS interop · Babel

babeljs.io/blog/2021/04/29/7.14.0

babel ReleaseNote

Babel 7.14.0 릴리스.
Stage 4가 된 class fields를 preset-env가 기본적으로 지원, importInterop: "node" 옵션 추가, TypeScript 4.3 지원.
또, Stage 1의 ES Proposal인 async do expression을 지원한다.

Release v7.14.0 · babel/babel

rxjs/CHANGELOG.md at master · ReactiveX/rxjs

github.com/ReactiveX/rxjs/blob/master/CHANGELOG.md#700-2021-04-29

JavaScript Rx library ReleaseNote

RxJS 7.0.0 릴리스.
TypeScript 4.2 미만 지원 종료, rxjs-compat 삭제, lift를 expose 하지 않도록, 각종 연산자 API 변경.

RxJS - Breaking Changes in Version 7

New WebKit Features in Safari 14.1 | WebKit

webkit.org/blog/11648/new-webkit-features-in-safari-14-1/

safari ReleaseNote

Safari 14.1 변경 사항 정리.
Flexbox Gap, macOS에서 Date와 Time input, Web Speech API, MediaRecorder API, WebM 지원.
JavaScript의 Class Fields, WeakRef 지원, i18n API 개선, WebAssembly의 Threading 지원.
또, Private Click Measurement를 기본적으로 활성화, Storage Access API 갱신.

Release yargs v17.0.0 · yargs/yargs

github.com/yargs/yargs/releases/tag/v17.0.0

JavaScript node.js deno library ReleaseNote

명령줄 인수 파서 yargs 17.0.0 릴리스.
비호환 변경 사항으로 Node.js 10 지원 종료, Private 메서드로 Private Fields를 사용하도록 변경, reset() 메서드 비권장.
Node v14.8.0 부터 Top-Level Await를 지원하므로 yargs()나 parseAsync 등 다양한 방법으로 비동기 처리에 대응하도록 변경.

ECMAScript proposal updates @ 2021-04 | ECMAScript Daily

ecmascript-daily.github.io/ecmascript/2021/05/04/ecmascript-proposal-update

ECMAScript proposal news

2021년 4월 TC39 Meetings애서 Stage가 변경된 Proposal 정리.
Class Field / Private Methods가 Stage 4가 되어 ES2022에 들어가게 됐다.

아티클

React17의 event delegation 대대적인 변경을 이해하다

zenn.dev/co9xs/articles/react17-event-delegation(일본어)

React article

React 17의 event delegation 변경 사항을 주제로 한 글.
실제 동작이 다른 데모를 이용하여 React 17에서 event delegation의 구조 변화를 설명한다.

React v17.0 Release Candidate: 새로운 기능 「없음」 – React Blog(일본어)

How to Use ECMAScript Modules in Node.js

dmitripavlutin.com/ecmascript-modules-nodejs/

node.js article

Node.js에서의 ECMAScript modules 사용 방법을 소개하는 글.
모듈 모드, 모듈 import 방법, Dynamic Import, CommonJS한 모듈 import, import.meta 등.

Build an HTTPS-intercepting JavaScript proxy in 30 seconds flat | HTTP Toolkit

httptoolkit.tech/blog/javascript-mitm-proxy-mockttp/

node.js library article

mockttp를 사용하여 https 사이트를 Proxy로 개서하는 방법 소개.

httptoolkit/mockttp: Powerful friendly HTTP mock server & proxy

Node.js 10가 지원 종료 됐으므로 Node.js 12 이후 사용할 수 있는 기능을 정리한다

zenn.dev/azu/scraps/bb1106a04ed9e6(일본어)

node.js article

Node.js 12부터 사용할 수 있게 된 Node.js의 API와 기능, V8 갱신으로 인한 ECMAScript 지원 기능을 정리한 글.

Hosting SQLite databases on Github Pages - (or any static file hoster) - phiresky's blog

phiresky.github.io/blog/2021/hosting-sqlite-databases-on-github-pages/

SQLite JavaScript WebAssembly article

WebAssembly로 컴파일한 SQLite와 참조용 SQLite 파일을 준비해 필요한 부분만을 취득할 수 있는 구조를 만들었다는 이야기.
DB 파일을 모두 메모리에 올리지 않고 사용하기 위해서 HTTP Range 요청을 사용해 필요한 chunk 만을 취득하는 HTTP 기반의 가상 파일 시스템을 만들었다.
SQLite의 DB 페이지 크기와 스키마 정보를 토대로 원하는 부분만 Range 요청으로 가져올 수 있다.

Introducing CloudFront Functions – Run Your Code at the Edge with Low Latency at Any Scale | AWS News Blog

aws.amazon.com/jp/blogs/aws/introducing-cloudfront-functions-run-your-code-at-the-edge-with-low-latency-at-any-scale/

aws JavaScript webservice cdn article

AWS CloudFront에서 CDN 엣지 처리를 JavaScript로 거는 서비스.
ECMAScript 5.1 호환 JavaScript, 처리 시간 1ms 이내, 메모리는 2MB 이내, 패키지 크기는 10kb 이하 파일 크기, Network / File IO 없음.

소프트웨어, 도구, 라이브러리

itsjavi/jsx-runtime: Extremely lightweight JSX runtime (<2KB) to write JSX without React in TypeScript or JavaScript.

github.com/itsjavi/jsx-runtime

jsx babel Tools TypeScript

JSX로 작성하고 변환하면 Standalone으로 동작하는 코드를 출력하는 JSX Transformer과 Runtime 환경.

Fower

fower.vercel.app/

JavaScript CSS library React Vue Svelte

Tailwindcss 스러운 Utility-first CSS in JS 라이브러리.
React나 Vue, 또는 스타일을 JavaScript로 생성하며 React Native에도 대응하고 있다.
Utility 기반 스타일을 Props로 지정하며 TSX나 각 프레임워크 용 코드 자동 완성에도 대응한다.