From 71ccd595ecd94805786b3d7b0ae20aa4b8d9a8c8 Mon Sep 17 00:00:00 2001 From: sorrycc Date: Mon, 25 Oct 2021 00:25:07 +0800 Subject: [PATCH] Add issue-0025.md --- README.md | 1 + docs/issue-0025.md | 136 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 137 insertions(+) create mode 100644 docs/issue-0025.md diff --git a/README.md b/README.md index 38da655..c9265a7 100644 --- a/README.md +++ b/README.md @@ -28,6 +28,7 @@ ### 十月 +* [第 25 期：​vscode.dev、Aura Theme 2、Node 17、useId](./docs/issue-0025.md) * [第 24 期：​Parcel 2、React Router 6、Nuxt 3、Better Log](./docs/issue-0024.md) * [第 23 期：​Astro 0.21、ESLint 8、vite-node、Sanitizer API、Lattice](./docs/issue-0023.md) * [第 22 期：TypeScript 4.5、React 反模式、Vite 2.6、Partytown、miniflare](./docs/issue-0022.md) diff --git a/docs/issue-0025.md b/docs/issue-0025.md new file mode 100644 index 0000000..13c8e9f --- /dev/null +++ b/docs/issue-0025.md @@ -0,0 +1,136 @@ +# MDH 前端周刊第 25 期：vscode.dev、Aura Theme 2、Node 17、useId + +**这是 「MDH：前端周刊」 第 0025 期，发表于：2021/10/25。本期刊开源（GitHub: sorrycc/weekly），欢迎 issue 区投稿，推荐或自荐项目。** + +![](https://img.alicdn.com/imgextra/i4/O1CN01ZEZsTQ1TiZbiELZ8I_!!6000000002416-0-tps-4032-3024.jpg) + +封面图：仙居永安溪 @ 2021.10.23。 + + +## ❄️ TL;DR + +👉 vscode.dev
+👉 MDX 2
+👉 Aura Theme 2
+👉 TypeScript 4.4 Cheat Sheet
+👉 3 TypeScript Tricks
+👉 useId
+👉 beta.reactjs.org
+👉 Node 17
+👉 Webpack 包分析工具集
+👉 Gatsby 4
+ +## ⚡ 展开讲讲 + +### vscode.dev +https://code.visualstudio.com/blogs/2021/10/20/vscode-dev + +跑在浏览器中的轻量级 VSCode， + +🗂 支持本地文件查看和编辑 +💻 支持 HTML、JavaScript 和 CSS 等 +🐞 支持 Debug +🔋 在 Chromebooks & iPads 下消耗较少电量 +☁️ 支持 GitHub + +### MDX 2 +https://v2.mdxjs.com/blog/v2/ + +📝 语法兼容性更好 +🧑‍💻 支持 JavaScript 表达式，比如转换 `{2 * Math.PI}` 为 `6.283185307179586` +🔌 新增 esbuild、Rollup、Node.js 的集成方式，比如 `@mdx-js/esbuild` 用于 esbuild +⚛️ 支持任意的 JSX runtime，包括 React, Preact, Vue, Emotion 等 +🌳 改进 AST 提供更详细信息 +🏃‍♀️ 编译速度至少快 25% + +### Aura Theme 2 +https://dev.to/daltonmenezes/aura-theme-v2-0-0-is-out-now-565h + +![](https://img.alicdn.com/imgextra/i3/O1CN01ebaAgb1XLS4n6RRlB_!!6000000002907-2-tps-2784-1660.png) + +全平台主题，支持 VSCode、iTerm、Google Chrome 等，唯一可惜的是不支持 WebStorm。 + +### TypeScript 4.4 Cheat Sheet +https://www.sitepen.com/blog/typescript-cheat-sheet + +TypeScript 4.4 备忘录，文中通过表格方式较清晰地展示了 TypeScript 的一些使用方式，如平时我们不常用的 &&= 等，值得看看。如果想看比较详细的介绍，可以看 TypeScript 权威指南 （https://www.sitepen.com/blog/update-the-definitive-typescript-guide）这篇文章。 + +### 3 TypeScript Tricks +https://www.cstrnt.dev/blog/three-typescript-tricks + +摘要， + +1. `Readonly` ，给不希望被修改的数组或对象加上 `Readonly` Tag，被修改则报错，减少「惊喜」的发生，比如 `function sort(arr: Readonly>) {}`，`arr.sort()` 时就会报错，可改用 `[...arr].sort()` +2. Any vs Unknown，建议用 any 前优先考虑用 unknown。Any 是直接躺平；Unknown 是你知道不确定有哪些类型的值，用之前必须先检查类型以确保类型安全，比如 `if (typeof foo === 'function') foo()` +3. 优先用 `Record` 声明对象类型。有两种声明方式，`interface Foo { [key: string]: unknown }` 和 `Record`，后者会更灵活些，比如需求变更后，key 只允许 foo 和 bar，可改成 `Record<'foo'|'bar', unknown>`，前者则不行 + +### useId +https://github.com/reactwg/react-18/discussions/111 + +摘要， + +1. `useId` 即完善后的 `useOpaqueIdentifier`，用于生成唯一 id，支持 SSR，支持 hydration +2. 应用场景比如可访问性中 label 的 htmlFor，`const id = useId();