Fork me on GitHub

2019-10-09のJS: Preact X(10)、webhint browser extension v1、TypeScript 3.7β

Edit on GitHub 編集履歴を見る

JSer.info #456 - React互換のAPIを持つPreact X(10.0.0)がリリースされました。
Preact 9.xはスキップしてPreact 10.xになっています。

Preact Xでは、Fragments、componentDidCatch、Hooks(preact/hooks)、createContext、CSS Custom Propertiesの対応などが含まれています。
HooksはPreactのコアには含まれていませんが、preact/hooksまたはpreact/compatをインポートすることで対応しています。

また、いままでは別モジュールとなっていたpreact-compatpreact/compatという形でインポートするように変更されています。

// Preact 8.x
import React from "preact-compat";

// Preact X
import React from "preact/compat";

また、preact本体はdefault exportをやめたため、named importをして使う形に変更されています。

// Preact 8.x
import Preact from "preact";

// Preact X
import * as preact from "preact";

// Preferred: Named exports (works in 8.x and Preact X)
import { h, Component } from "preact";

Preact 8.xから10.xへのマイグレーションガイドも公開されているので、合わせて見てください。


ウェブサイト向けのLintツールであるwebhintのブラウザ拡張版がv1となりました。

beta版からの追加点として、
MDN browser compat dataを使ったクロスブラウザの互換情報の表示、カラーコントラストについてのHintの追加などが含まれています。

Chrome(lighthouse)のAuditとの違いとして、webhintはクロスブラウザに関するチェックをあげています。

The webhint extension doesn’t replace the existing audits tab you’ll find in the developer tools for Chrome and the new Chromium-based Edge browser. While there is a little overlap in the information provided, webhint and Lighthouse serve different purposes, and you may find yourself using both. One distinguishing feature of webhint that it’s meant to provide cross-browser insights, including compatibility with Safari, IE, Opera, and so on.
-- https://medium.com/webhint/announcing-the-webhint-browser-extension-abb22f4cfeb


TypeScript 3.7 Betaがリリースされました。

ECMAScriptのStage 3 ProposalであるOptional ChainingNullish Coalescingがサポートされています。
また、assertsによるコントールフロー制御を行うAssertion Functionsがサポートされています。
その他には、--declaration--allowJsの組み合わせのサポートが含まれています。


JSer.infoをサポートするには

JSer.info Sponsors

JSer.info SponsorsGitHub SponsorsとしてJSer.infoを支援してくれている方々です。


ヘッドライン


Release Preact X - Virtuous DOM and the Fragments of Suspense · preactjs/preact

github.com/preactjs/preact/releases/tag/10.0.0

React library ReleaseNote

Preact X(10.0.0)リリース。
FragmentscomponentDidCatchcreateContextのサポート、Hooks APIのサポートなど


Release v3.2.0 · facebook/create-react-app

github.com/facebook/create-react-app/releases/tag/v3.2.0

React Tools ReleaseNote

create-react-app 3.2.0リリース。
yarn build --profileでproduction buildでのプロファイル対応、TSC_COMPILE_ON_ERRORのサポートなど


vuejs/vue-next

github.com/vuejs/vue-next

Vue Github news

Vue 3候補のソースコードが公開された


Announcing TypeScript 3.7 Beta | TypeScript

devblogs.microsoft.com/typescript/announcing-typescript-3-7-beta/

TypeScript ReleaseNote

TypeScript 3.7 Betaリリース。
Optional Chaining、Nullish Coalescing、Assertion Functionsのサポート。
--declaration--allowJsの組み合わせのサポート、TypeScriptファイル内で// @ts-nocheckの追加など


Release v5.5.0 · GoogleChrome/lighthouse

github.com/GoogleChrome/lighthouse/releases/tag/v5.5.0

Tools ReleaseNote Chrome

Lighthouse 5.5.0リリース。
Largest Contentful Paint(LCP)のサポート


Version 1.0 released : Node-RED

nodered.org/blog/2019/09/30/version-1-0-released

node.js IoT ReleaseNote

フローベースのビジュアルエディタを使って、Node.jsで動くプログラムを作成できるツールキットであるNode-RED 1.0リリース。


Announcing the webhint v1 browser extension for Microsoft Edge - Microsoft Edge Blog

blogs.windows.com/msedgedev/2019/09/30/announcing-the-webhint-v1-browser-extension-for-microsoft-edge/

browser Tools ReleaseNote Extension accessibility

webhint browser extension 1.0.0リリース。
プラグインでカスタマイズできるウェブサイト向けのLintツールのブラウザ拡張版。
MDN browser compat dataを使ったクロスブラウザの互換情報の表示、カラーコントラストについてのHintの追加など


アーティクル


I created the exact same app in React and Vue. Here are the differences. [2019 Edition]

medium.com/javascript-in-plain-english/i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences-2019-edition-42ba2cab9e56

React Vue JavaScript article

ReactとVueでのTodoアプリを例にした比較。
React Hooksに対応したバージョン


Fixing layout instability  |  web.dev

web.dev/fixing-layout-instability/

Chrome performance JavaScript article

PerformanceObserverでCumulative Layout Shift (CLS)を計測し、どのようなレイアウトの変化が起きてるのかをWebPageTestで確認する方法について。
また、実際にプレースホルダーデータを使ってlayout instabilityを修正する方法について。


How to read a Web Page Test waterfall chart - Frontend Web Developer, Oxfordshire, UK - Matt Hobbs

nooshu.github.io/blog/2019/10/02/how-to-read-a-wpt-waterfall-chart/

webservice performance browser article

WebPageTestのウォーターフォールチャートの読み方について。
図の要素ごとに解説やHTTP/1.1とHTTP/2での流れの違いなどについて書かれている


サイト、サービス、ドキュメント


Accessibility Support

a11ysupport.io/

accessibility webservice WAI-ARIA

スクリーンリーダごとのWAI-ARIAなどのアクセシビリティサポート状況についてまとめているサイト。
Can I Use...のアクセシビリティ版


ソフトウェア、ツール、ライブラリ関係


cevek/ttypescript: Over TypeScript tool to use custom transformers in the tsconfig.json

github.com/cevek/ttypescript

TypeScript Tools plugin

TypeScriptでのコンパイル処理に対して、プラグインで変換処理を追加できるコンパイラーの実装


algolia/shipjs: Take control of what is going to be your next release.

github.com/algolia/shipjs

JavaScript npm Tools CI

リリースの準備とリリースを行うツール。
semantic-releaseとは異なりすべてを自動で行うのではなく、Pull Requestを作成して、手動で確認やCHANGELOGの更新をしてからリリースを行うといったプロセスが取れる。


fengyuanchen/cropperjs: JavaScript image cropper.

github.com/fengyuanchen/cropperjs

JavaScript library

Image Cropperライブラリ。
画像の切り抜き、回転、移動などができる画像加工を行うライブラリ


Bin-Huang/prray: "Promisified" Array, comes with async method supports(such as mapAsync). And it is compatible with normal array.

github.com/Bin-Huang/prray

JavaScript Promises library

コールバック関数にAsync Functionを取るArrayの実装ライブラリ


この記事へ修正リクエストをする
JSer.info Slackに参加する