Fork me on GitHub

2023-06-11: Rspack 0.2, Modern CSS, polywasm

Translator: rewrite0w0 Edit on GitHub See Revisions

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


헤드라인


Announcing TypeScript 5.1 - TypeScript

devblogs.microsoft.com/typescript/announcing-typescript-5-1/

TypeScript ReleaseNote

TypeScript 5.1 출시.
undefinedreturn하는 함수의 자료형 다룸 개선, getter와 setter 사이에 각각 다른 자료형 지정할 수 있도록, JSX 개선.
Node.js 14.17 미만 지원 종료, typeRoots Upward 패키지 해결 무효화


Bun v0.6.6 | Bun Blog

bun.sh/blog/bun-v0.6.6

Bun ReleaseNote

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 ReleaseNote

Chrome 115 Beta 출시.
스크롤 기반 애니메이션 ScrollTimelineViewTimeline 추가, 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.build/blog/astro-260/

astro ReleaseNote

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

TypeScript Rust ReleaseNote

Rust으로 작성된 TypeScript 자료형 체커 Enzo가 출시되었다.
아직 지원되지 않는 구문이 많지만 Oxc CLI 통해 이용 가능하도록 되었다


Release 7.0.0 · lerna/lerna

github.com/lerna/lerna/releases/tag/7.0.0

JavaScript monorepo ReleaseNote

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 ReleaseNote

Node.js v20.3.0 출시.
libuv 1.45.0으로 업데이트, AbortSignal.any() 구현


Announcing Rspack 0.2 - Rspack

www.rspack.dev/blog/announcing-0.2.html

webpack rspack ReleaseNote

Rspack 0.2 출시.
Plugin Hooks 추가, ESM 형식 output 대응, SplitChunksPlugin 구현, Data URI 지원, Vue/Svelte/NestJS 대응


Bun v0.6.8 | Bun Blog

bun.sh/blog/bun-v0.6.8

Bun ReleaseNote

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 ReleaseNote

playwright v1.35.0 출시.
UI mode에서 Route API가 처리한 리퀘스트를 볼 수 있도록, 스크릴샷에 maskColor 옵션 추가, uninstall 서브커맨드 추가.
바이너리를 playwright에서 playwright-core로 재명명


evanw/polywasm

github.com/evanw/polywasm

WebAssembly JavaScript library polyfill

globalThis.WebAssembly polyfill 구현.
Apple/Safari에서 Lockdown Mode 같이 WebAssembly API가 이용할 수 없는 환경에서도, .wasm를 실행할 수 있기 위한 polyfill.


읽을거리


JavaScript Macros in Bun | Bun Blog

bun.sh/blog/bun-macros

Bun article

Bun 0.6.0에 구현된 bundler 이용한 bundle할 때 매크로 전개에 대해.
import ... with { type: 'macro' }로 매크로를 읽고서, bundle할 때 그 모듈의 평가 결과를 담는 기능.


The origin private file system

web.dev/origin-private-file-system/

JavaScript article

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

CSS WebComponents article

document.styleShets로 스타일을 모아 replaceSync로 스타일시트 작성, shadowRoot.adoptedStyleSheets로 스타일시트 부여하는 방법에 대해.


Modern CSS in Real Life - Chris Coyier

chriscoyier.net/2023/06/06/modern-css-in-real-life/

CSS article slide

모던 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 tutorial

React Server Components (RSC)를 하나부터 구현해보는 튜토리얼.
SSR와 RSC의 차이.
JSX의 HTML으로 변환하고 HTML를 반환하는 렌더링, 입력상태를 유지한 채 네비게이션하기 위한 JSX를 객체로 반환하는 클라이언트에서의 렌더링.


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


Tresjs/tres: Declarative ThreeJS using Vue Components

github.com/tresjs/tres

Vue WebGL library

ThreeJS와 Vue 사용한 선언적으로 3D View 작성하는 라이브러리


NakedJSX - Use JSX without React

nakedjsx.org/

jsx JavaScript library

JSX에서 정적으로 HTML와 자잘한 런타임을 생성하는 툴킷.
Scoped CSS 다루는 기능, 개발용 서버, 이미지/CSS/HTML/JS 최적화해서 출력하는 기능이 있다.


Pull Request to this article
JSer.info Slackに参加する