共计 5396 个字符，预计需要花费 14 分钟才能阅读完成。
我的项目地址 ：olivewind/weekly
微信公众号 ：依赖注入
公布工夫 ：2023.03.25
本周内容 ：资讯 x3、开源 x9、文章 x3
行业资讯
React 新版官网上线
- 全新的域名、UI：新版域名为 https://react.dev，同时旧版文档将不再更新并存档在 https://legacy.reactjs.org
- 更丰盛的交互式演示 ：引入图表、插图来深入印象，保护超过 600 个示例，同时代码反对交互式
- 应用函数组件和 Hooks：意味着新入门的同学不再须要像之前一样从类组件开始学起，哪怕你简直不会再应用类组件
- 全新且具体的 API 文档 ：蕴含 Reference、Usage、Troubleshooting 三局部，为一些常见问题给出了官网解答
- 不再举荐应用
create-react-app创立利用
从官网的公布的布告上看，接下去 React 团队在官网上的工作重点是：
- 为所有示例提供 TypeScript 版本；
- 创立更新的性能、测试和可拜访性指南；
- 独立于反对它们的框架记录 React 服务器组件；
- 与咱们的国内社区单干翻译新文档；
- 向新网站增加短少的性能（例如，此博客的 RSS）。
Electron 公布 10 年整 🎉
通过 10 年和来自 1192 位贡献者的 27147 次提交之后，Electron 已成为现在构建桌面应用程序最受欢迎的框架之一，官网团队近期公布了庆贺帖子并概述他们是如何经营一个可继续的大型开源我的项目，次要有以下几点：
-
设计治理模型以反对团队扩大 ：不同的工作组领有不同责任，这对于简化流程和将我的项目所有权的局部调配给特定的维护者十分重要，目前有这些工作组（WG）：
- Releases WG：负责将 Electron 公布上线
- Upgrades WG：负责降级 Chromium 和 Node.js
- API WG：负责监督凋谢 API 设计
- Security WG：负责放弃 Electron 的安全性
- Ecosystem WG：负责经营网站、文档和工具
- Outreach WG：负责社区与企业外联
- Community & Safety WG：负责社区治理
- Infrastructure WG：负责保护构建基础设施、云服务
-
建设和参加社区以进步知名度
- 2020 年，推出了 Discord 社区
- 2021 年，建设 Electron China 用户群
-
参加高知名度的社区活动和开源我的项目
- 自 2019 年以来，每年都会庆贺 Hacktoberest（由 DigitalOcean 组织的年度开源庆典）
- 在 2020 年，加入首次举办的 Google Season of Docs 流动
- 在 2022 年，第一次领导 Google Summer of Code 的学生
- 将所有货色自动化以晋升效率
TypeScript 正式公布 5.0
该版本次要蕴含如下更新：
- 全新装璜器 : 不再须要显示标记
experimentalDecorators即可应用装璜器 -
const 类型参数 ，这意味着你在上面这种状况下不再须要应用
as const// 5.0 之前 type HasNames = {readonly names: string[] }; function getNamesExactly<T extends HasNames>(arg: T): T["names"] {return arg.names;} // 推断出类型：string[] const names = getNamesExactly({names: ["Alice", "Bob", "Eve"] }); // 推断出类型：readonly ["Alice", "Bob", "Eve"] const names = getNamesExactly({names: ["Alice", "Bob", "Eve"] as const }); ---- // 5.0 开始 type HasNames = {names: readonly string[] }; function getNamesExactly<const T extends HasNames>(arg: T): T["names"] { // ^^^^^ return arg.names; } // 推断出类型: readonly ["Alice", "Bob", "Eve"] const names = getNamesExactly({names: ["Alice", "Bob", "Eve"] }); -
extends 反对多配置文件
{"extends": ["a", "b", "c"], "compilerOptions": {// ...} } -
所有枚举都是联结枚举 ：这意味着哪怕枚举值是函数调用，你能够能够援用枚举类型的一个子集
enum Color { Red, Orange, Yellow = Math.random()} // 5.0 之前报错：“枚举类型“Color”蕴含具备不是文本的初始值设定项的成员”type MyColor = Color.Red | Color.Orange; - 反对 export type *
-
反对 customConditions
如果模块 package.json 自定义了加载入口
{ // ... "exports": { "my-condition": "./foo.mjs", "node": "./bar.mjs", "import": "./baz.mjs", "require": "./biz.mjs" } }此时你能够应用
customConditions来要求 TypeScript 从foo.mjs作为入口加载模块{ "compilerOptions": { "target": "es2022", "moduleResolution": "bundler", "customConditions": ["my-condition"] } }
该版本全副更新内容请查阅：Announcing TypeScript 5.0
开源我的项目
PlexPt/awesome-chatgpt-prompts-zh（21k star）
ChatGPT 是由 OpenAI 训练的大型语言模型，通过向它提供提醒，它能够生成持续对话或扩大给定提醒的响应。在该我的项目中，你将找到可与 ChatGPT 一起应用的各种提醒，帮忙你更好应用 ChatGPT。
tremorlabs/tremor（7.1k star）
Tremor 提供一系列专一仪表盘建设的组件，并且提供了不同场景下的最佳实际可供参考，能够帮忙你轻而易举地构建富裕洞察力的仪表板，该我的项目基于 React、Tailwind、Recharts 构建。
framer/motion（18k star）
Motion 是一个简略但功能强大的 React 动画库，应用它能够十分轻松实现常见的动画。
mozilla/source-map（3.2k star）
source-map 是 Mozilla 团队开源的一个能够正反解 Source Map 的工具库，这在 JavaScript 相干监控零碎的实现中可能会很实用。如果你对 Source Map 的原理还不太熟悉能够查阅 Source Map 第三版本提案。
const rawSourceMap = {
version: 3,
file: "min.js",
names: ["bar", "baz", "n"],
sources: ["one.js", "two.js"],
sourceRoot: "http://example.com/www/js/",
mappings:
"CAAC,IAAI,IAAM,SAAUA,GAClB,OAAOC,IAAID;CCDb,IAAI,IAAM,SAAUE,GAClB,OAAOA",
};
const whatever = await SourceMapConsumer.with(rawSourceMap, null, consumer => {console.log(consumer.sources);
// [ 'http://example.com/www/js/one.js',
// 'http://example.com/www/js/two.js' ]
console.log(
consumer.originalPositionFor({
line: 2,
column: 28,
})
);
// { source: 'http://example.com/www/js/two.js',
// line: 2,
// column: 10,
// name: 'n' }
console.log(
consumer.generatedPositionFor({
source: "http://example.com/www/js/two.js",
line: 2,
column: 10,
})
);
// {line: 2, column: 28}
consumer.eachMapping(function (m) {// ...});
return computeWhatever();});lovell/sharp（24.8k star）
一个基于 libvips 库实现的高性能且简略易用的 Node.js 图像处理工具，可用于调整 JPEG、PNG、WebP、AVIF 和 TIFF 图像。在转化图像、减少水印等场景下可能会很实用。
sharp('input.jpg')
.rotate()
.resize(200)
.jpeg({mozjpeg: true})
.toBuffer()
.then(data => { ...})
.catch(err => { ...});dolanmiu/docx（3k star）
docx 是一个反对在 JS/Node 下通过申明式 API 轻松生成和批改 .docx 文件的工具库。
function generate() {
const doc = new docx.Document({
sections: [
{properties: {},
children: [
new docx.Paragraph({
children: [new docx.TextRun("Hello World"),
new docx.TextRun({
text: "Foo Bar",
bold: true
}),
new docx.TextRun({
text: "\tGithub is the best",
bold: true
})
]
})
]
}
]
});
docx.Packer.toBlob(doc).then((blob) => {console.log(blob);
saveAs(blob, "example.docx");
console.log("Document created successfully");
});
}
probablyup/markdown-to-jsx（1.5k star）
markdown-to-jsx 是一个轻量级、可定制的 React markdown 组件，用法非常简单，能够按需重写或替换其中的节点渲染。
import Markdown from 'markdown-to-jsx';
import React from 'react';
import {render} from 'react-dom';
// surprise, it's a div instead!
const MyParagraph = ({children, ...props}) => (<div {...props}>{children}</div>
);
render(
<Markdown
options={{
overrides: {
h1: {
component: MyParagraph,
props: {className: 'foo',},
},
},
}}
>
# Hello world!
</Markdown>,
document.body
);
/*
renders:
<div class="foo">
Hello World
</div>
*/DioxusLabs/dioxus（7.9k star）
Dioxus 是一个可移植的、高性能的、符合人体工程学的框架，应用 Rust 语言构建跨平台的用户界面。如果你可能纯熟应用 React 框架，那 Dioxus 对你来说将非常简单。
fn app(cx: Scope) -> Element {let mut count = use_state(cx, || 0);
cx.render(rsx! {h1 { "High-Five counter: {count}" }
button {onclick: move |_| count += 1, "Up high!"}
button {onclick: move |_| count -= 1, "Down low!"}
})
}slidevjs/slidev（25.8k star）
Slidev 是基于 Web 的幻灯片制作和演示工具。它旨在让开发者专一在 Markdown 中编写内容，同时领有反对 HTML 和 Vue 组件的能力，并且可能出现像素级完满的布局，还在你的演讲稿中内置了互动的演示样例。
优质文章
减速 JavaScript 生态系统（英文）
该系列介绍了包含 postcss、svgo、eslint、npm scripts 等在内常见工具的性能问题及其优化伎俩，看完的感觉就一个字“爽”。
如何在 2023 年启动 React 我的项目？(英文)
该文章具体介绍应用 Vite、Next、Astro 三款工具包构建 React 利用的优劣势，以及它们为什么（没有）被 React 官网举荐。
你真的理解 setTimeout 么？聊聊 setTimeout 的最小延时问题
罕用的 setTimeout 函数在不同的 JavaScript 运行时都有不同的实现，并且执行成果也不尽相同；该文章联合了 chromium、nodejs、deno、bun 等目前风行的 JS 运行时的源码，详细分析了这些差别。
本文由 mdnice 多平台公布
