JSer.info #647 - Rust로 작성한 webpack 호환 bundler Rspack 0.2가 출시되었습니다.
Plugin Hooks 추가, ESM 형식 output에 대응, SplitChunksPlugin
구현, Data URI 지원이 추가되었습니다.
또한, Vue/Svelte/NestJS의 loader 지원도 추가되었습니다.
Modern CSS in Real Life - Chris Coyier 에서는, 최신 CSS에 추가됨에 따라 사용 가능한 기능에 대해 소개합니다.
Logical Properties, Container Queries, Cascade Layers, CSS Colorsとoklch()
, View Transitions API에 대해 실제 유스케이스도 있습니다.
globalThis.WebAssembly
polyfill인 polywasm가 공개되었습니다.
WebAssembly API는 대부분 브라우저에 구현되어 있지만, Apple Lockdown Mode가 유효상태라면 사용할 수 없습니다.
이런 식으로 WebAssembly API 이용할 수 없는 환경에서도, .wasm
파일을 실행하기 위한 polyfill 라이브러리입니다.
To support JSer.info
- 😘 Recommend JSer.info to your friends!
- ❤️ Support @azu on GitHub Sponsors/JSer.info Sponsors
- 🐦 Follow @jser_info on X(Twitter)
헤드라인
Announcing TypeScript 5.1 - TypeScript
devblogs.microsoft.com/typescript/announcing-typescript-5-1/
TypeScript 5.1 출시.
undefined
를 return
하는 함수의 자료형 다룸 개선, getter와 setter 사이에 각각 다른 자료형 지정할 수 있도록, JSX 개선.
Node.js 14.17 미만 지원 종료, typeRoots
Upward 패키지 해결 무효화
Bun v0.6.6 | Bun Blog
Bun 0.6.6 출시.
bun test
가 GitHub Actions 출력 지원, bun test --only
/bun test --todo
/test.if()
/describe.if()
추가.
test()
가 timeout
옵션 지원, expect()
에 matcher 추가.
Fetch Upload Streaming의 지원
Chrome 115 beta - Chrome Developers
developer.chrome.com/en/blog/chrome-115-beta/
Chrome 115 Beta 출시.
스크롤 기반 애니메이션 ScrollTimeline
과 ViewTimeline
추가, WebAssembly.Module()
메인 스레드에서 모듈 크기 제한을 8MB로 완화.
메인 프레임 나비게이션에서 자동적으로 HTTPS 업데이트하고, HTTP 폴백하도록, Storage Partitioning 기본 유효화.
Origin Trial로 Compute Pressure API, 매직 커맨트에서 compile hints 추가, Storage Buckets API 추가.
document.domain
에 대입 비권장화, Mutation Events 비권장화
Astro 2.6: Middleware | Astro
Astro 2.6 출시.
Middlewares/output: "hybrid"
/Custom client directives Stable화.
CSS 인라인화 하는 inlineStylesheets: "auto"
옵션 추가, 실험적으로 리다이렉트 기능 추가
Open sourcing Ezno's checker and trying out / previewing the JavaScript type checker today · kaleidawave/ezno · Discussion #21
github.com/kaleidawave/ezno/discussions/21
Rust으로 작성된 TypeScript 자료형 체커 Enzo가 출시되었다.
아직 지원되지 않는 구문이 많지만 Oxc CLI 통해 이용 가능하도록 되었다
Release 7.0.0 · lerna/lerna
github.com/lerna/lerna/releases/tag/7.0.0
lerna 7.0.0 출시.
lerna bootstrap
/add
/link
는 삭제되었다. 기본적으로 workspaces 사용하도록 되었으며, useWorkspaces
옵션 삭제.
비권장화 된 옵션 삭제
Node v20.3.0 (Current) | Node.js
nodejs.org/en/blog/release/v20.3.0
Node.js v20.3.0 출시.
libuv 1.45.0으로 업데이트, AbortSignal.any()
구현
Announcing Rspack 0.2 - Rspack
www.rspack.dev/blog/announcing-0.2.html
Rspack 0.2 출시.
Plugin Hooks 추가, ESM 형식 output 대응, SplitChunksPlugin
구현, Data URI 지원, Vue/Svelte/NestJS 대응
Bun v0.6.8 | Bun Blog
Bun v0.6.8 출시.
Bun.password
추가, bun:test
모듈에 mock
/spyOn
함수 추가.
Bun.serve
브라우저에서 WebSockets 사용해서 디버거에 접속 가능할 수 있는 inspector
옵션 추가
Release v1.35.0 · microsoft/playwright
github.com/microsoft/playwright/releases/tag/v1.35.0
playwright v1.35.0 출시.
UI mode에서 Route API가 처리한 리퀘스트를 볼 수 있도록, 스크릴샷에 maskColor
옵션 추가, uninstall
서브커맨드 추가.
바이너리를 playwright
에서 playwright-core
로 재명명
evanw/polywasm
globalThis.WebAssembly
polyfill 구현.
Apple/Safari에서 Lockdown Mode 같이 WebAssembly
API가 이용할 수 없는 환경에서도, .wasm
를 실행할 수 있기 위한 polyfill.
읽을거리
JavaScript Macros in Bun | Bun Blog
Bun 0.6.0에 구현된 bundler 이용한 bundle할 때 매크로 전개에 대해.
import ... with { type: 'macro' }
로 매크로를 읽고서, bundle할 때 그 모듈의 평가 결과를 담는 기능.
The origin private file system
web.dev/origin-private-file-system/
Origin private file system에 대해.
Origin 째로 루트 디렉토리가 있고, 메인 스레드 또는 Web Worker에서 이용 가능.
Web Worker에서는 동기 API도 이용 가능.
HTML 전체 CSS를 얻어 Shadow DOM에 적용하기 | marmooo's blog
marmooo.blogspot.com/2023/06/html-css-shadow-dom.html
document.styleShets
로 스타일을 모아 replaceSync
로 스타일시트 작성, shadowRoot.adoptedStyleSheets
로 스타일시트 부여하는 방법에 대해.
Modern CSS in Real Life - Chris Coyier
chriscoyier.net/2023/06/06/modern-css-in-real-life/
모던 CSS 기능에 대한 슬라이드와 해설.
Logical Properties, Container Queries, Cascade Layers, CSS Colors와 oklch()
, View Transitions API에 대해
웹사이트, 서비스, 문서
RSC From Scratch. Part 1: Server Components · reactwg/server-components · Discussion #5
github.com/reactwg/server-components/discussions/5
React Server Components (RSC)를 하나부터 구현해보는 튜토리얼.
SSR와 RSC의 차이.
JSX의 HTML으로 변환하고 HTML를 반환하는 렌더링, 입력상태를 유지한 채 네비게이션하기 위한 JSX를 객체로 반환하는 클라이언트에서의 렌더링.
소프트웨어, 도구, 라이브러리
Tresjs/tres: Declarative ThreeJS using Vue Components
ThreeJS와 Vue 사용한 선언적으로 3D View 작성하는 라이브러리
NakedJSX - Use JSX without React
JSX에서 정적으로 HTML와 자잘한 런타임을 생성하는 툴킷.
Scoped CSS 다루는 기능, 개발용 서버, 이미지/CSS/HTML/JS 최적화해서 출력하는 기능이 있다.