JSer.info #560 - Vite 2.6.0가 릴리스 됐다.

vite/CHANGELOG.md at main · vitejs/vite

기본 minify 엔진을 terser에서 esbuild로 변경, script 요소의 async 속성 지원.
정적 사이트 제너에티어인 Astro의 컴포넌트 파일(.astro) 지원.
또, import 하고 있는 파일이 또 다른 파일을 import 하는 연쇄적인 경우에 이를 사전에 transform 하여 컴파일 대기 시간을 줄이는 최적화도 포함됐다.

feat: pre transform direct imports before requests hit the server by yyx990803 · Pull Request #5037 · vitejs/vite

그 외로 Vite 용 React 라이브러리가 @vitejs/plugin-react으로 통합됐다.
원래는 esbuild 기반의 @vitejs/plugin-react-refresh와 Babel 기반의 vite-react-jsx가 있었지만 이제는 @vitejs/plugin-react를 사용하도록 권장한다.

Safari Technology Preview 133가 릴리스 됐다.

Release Notes for Safari Technology Preview 133 | WebKit

CSS calc() 내에서 sin(), cos(), tan(), e, pi를 지원한다.
Specificity와 Order Of Appearance 전에 Layer를 평가하는 CSS Cascade Layers를 실험적으로 지원, ES Proposal Stage3의 Temporal를 플래그 붙여 구현하고 있다.
그 외로 BroadcastChannel 활성화, COOP와 COEP 헤더를 지원하며 self.crossOriginIsolated 시에 SharedArrayBuffer를 사용할 수 있도록 변경 됐다.

TypeScript 4.5 Beta가 릴리스 됐다.

Announcing TypeScript 4.5 Beta - TypeScript

TypeScript 4.5 Beta에는 Node.js ESM 지원과 관련한 개선 사항이 대거 포함됐다.
module: node12 또는 nodenext 설정 시 ESM 지원, .mjs와 .cjs에 대응하는 확장자로 .mts와 .cts 추가, package.json의 exports 필드에 대응한다.

또, TypeScript가 빌트인으로 갖고 있는 lib의 타입 정의를 특정 버전의 dependencies로 잠그거나 Package Aliases 기능을 사용하여 별도의 타입 정의로 교체할 수 있도록 개선 됐다.

예를 들어 다음과 같이 tsconfig.json의 lib로 dom을 지정할 수 있다.

{
  "compilerOptions": {
    "lib": [
      "dom"
    ]
  }
}

위와 같은 경우 @typescript/lib-dom라는 패키지가 package.json의 dependencies에 있는 경우 TypeScript는 해당 패키지의 타입 정의를 이용해 타입 체크를 시행한다.
지금까지 lib는 TypeScript에 포함돼 있던 타입 정의 였기 때문에 TypeScript의 버전을 갱신하면 타입 정의와 관련한 비호환 이슈가 발생했다.
이제 @typescript/lib-*의 교체 구조를 사용해 lib 타입 정의를 특정 버전으로 고정할 수 있게 됐다.

또, 다음과 같이 npm / yarn / pnpm에서 지원하고 있는 package alias 기능을 사용하여 @typescript/lib-dom을 다른 타입 정의로 교체할 수도 있다.

{
 "dependencies": {
    "@typescript/lib-dom": "npm:@types/web"
  }
}

How to install NPM package under alias or different name - Stack Overflow

그 외로 Awaited 타입 추가, Top-Level await에 대응한 module: es2022 지원, Condition Types에서 꼬리 재귀 최적화하도록 개선, import 명에 대한 type modifier를 지원한다.
또, ECMAScript Proposal의 Private Field Presence Checks, Import Assertions 지원도 추가됐다.

헤드라인

vite/CHANGELOG.md at main · vitejs/vite

github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md#260-2021-09-29

vite ReleaseNote

Vite 2.6.0 릴리스.
기본 minify 엔진을 terser에서 esbuild로 변경, script 요소의 async 속성 지원, .astro 지원.
또, import 하고 있는 파일이 또 다른 파일을 import 하는 연쇄적인 경우에 이를 사전에 transform 할 수 있는 구조도 추가됐다.

Release Notes for Safari Technology Preview 133 | WebKit

webkit.org/blog/11975/release-notes-for-safari-technology-preview-133/

safari ReleaseNote

Safari Technology Preview 133 릴리스.
CSS의 calc() 내에서 sin(), cos(), tan(), e, pi 지원.
CSS Cascade Layers를 실험적으로 지원, ES Proposal Stage3의 Temporal를 플래그 붙여 구현.
BroadcastChannel 활성화, COOP와 COEP 헤더를 지원하며, self.crossOriginIsolated 시에 SharedArrayBuffer를 사용할 수 있다.

Announcing TypeScript 4.5 Beta - TypeScript

devblogs.microsoft.com/typescript/announcing-typescript-4-5-beta/

TypeScript ReleaseNote

TypeScript 4.5 Beta 릴리스.

module: node12 또는 nodenext 설정 시 ESM 지원, .mjs와 .cjs에 대응하는 확장자로 .mts와 .cts 추가, package.json의 exports 필드에 대응.
TypeScript가 빌트인으로 갖고 있는 lib의 타입 정의를 특정 버전의 dependencies로 락(lock)할 수 있도록 개선.
Awaited 타입 추가, Top-Level await에 대응한 module: es2022 지원, Condition Types에서 꼬리 재귀 최적화하도록 개선.
import 명에 대한 type modifier 지원, ES Proposal의 Private Field Presence Checks, Import Assertions 지원

passport/CHANGELOG.md at master · jaredhanson/passport

github.com/jaredhanson/passport/blob/master/CHANGELOG.md#050---2021-09-23

node.js express library ReleaseNote

Passport 0.5 릴리스.
비호환 변경 사항으로 IncomingMessage를 prototype 확장하여 login() 등을 추가했던 monkey patch가 삭제됐다.
대신에 app.use(passport.initialize()) 처럼 middleware로 확장하도록 변경됐다.

Comparing v0.4.1...v0.5.0 · jaredhanson/passport

Announcing React Native 0.66 · React Native

reactnative.dev/blog/2021/10/01/version-066

React Native ReleaseNote

React Native 0.66 릴리스.
Android의 새로운 Bluetooth 권한에 대응, M1 mac 지원 개선, Hermes 0.9.0로 갱신.
Nightly 빌드가 @nightly의 dist-tag로 공개 되도록 되었으며 yarn upgrade react-native@nightly로 설치할 수 있다.

아티클

Chrome user device characteristics report - Chrome Developers

developer.chrome.com/en/blog/device-characteristics/

Chrome article document

Chrome 사용 통계 데이터로 부터 RAM, 코어 수, 네트워크 접속 종류, WebGL 하드웨어 지원 여부에 대한 데이터를 나라별로 정리 및 공개한 보고서. 국가 데이터로는 BR, DE, EG, GB, ID, IN, JP, NG, US, ZA을 제공한다.
또, Android, Windows, ChromeOS 별 통계 데이터도 정리돼 있다.

Chrome User Device Characteristics - Google 문서

Explore JavaScript Dependencies With Lighthouse Treemap

sia.codes/posts/lighthouse-treemap/

Chrome debug article performance

Lighthouse v7.5.0에 추가된 Lighthouse Treemap 소개.
Source Map을 기반으로 분석한 페이지의 파일 크기를 살펴볼 수 있다.

Release v7.5.0 · GoogleChrome/lighthouse

Guidelines for choosing a Node.js framework - Simon Plenderleith

simonplend.com/guidelines-for-choosing-a-node-js-framework/

node.js JavaScript library article opinion

Node.js 프레임워크를 고를 때 생각하는 것, 살펴봐야 할 점 정리.
어떤 프레임워크를 선택해야 하는지는 컨텍스트에 따라 다르다.
때문에 유스케이스, 프레임워크 작성 방법, Promise 대응, 공식 문서, 커뮤니티, 프로젝트 건전성 등을 함께 살펴봐야 한다고 말하다.