Node.js v17.0.0 发布、VS Code 发布浏览器版本

Node.js 现在包含了 OpenSSL 3.0，尤其是 quictls/openssl，它提供了 QUIC 支持V8 JavaScript 引擎升级至 v8.9.5readline 模块提供了一个接口用于一次从可读流（例如 process.stdin）中读取一行数据&etc.

Node.js v17.0.0 发布

重要更新：

Node.js 现在包含了 OpenSSL 3.0，尤其是 quictls/openssl，它提供了 QUIC 支持V8 JavaScript 引擎升级至 v8.9.5
readline 模块提供了一个接口用于一次从可读流（例如 process.stdin）中读取一行数据&etc.

VS Code 发布浏览器版本

随着 GitHub 推出 github.dev 在线浏览 GitHub Repo 的能力后，VS Code 也迎来了浏览器版本，只需要在浏览器访问 vscode.dev 即可在浏览器中使用 VS Code。

浏览器版本的 VS Code 与 Electron 客户端版本在基本能力上保持一致，可以打开本地项目进行开发。相信在不久的将来，在 iPad 上也能进行开发了。

React 新文档上线

曾几何时，React 的官方文档一直被人诟病，一方面文档的结构不够清晰，另一方面较多示例还在使用 Class Components，因此 React 团队打算对文档做一次彻底的重构。

新文档采用 Next.js 构建，并且使用了 Tailwind 实现页面布局，引入了暗黑模式等，界面非常清晰简洁。

ts-morpher

TypeScript 自身提供的 AST 接口过于复杂，并且稳定性较差（如它曾经在某一个版本将所有 AST 接口收敛到了 factory 命名空间下），因此 ts-morph 诞生了，相比于其他 AST 封装库，ts-morph 对 TypeScript 有着更好的支持（毕竟它本身就基于 TypeScript AST API 封装而来），并且在一定程度上简化了许多操作，屏蔽了 Node、TypeNode、Syntax、Statement、Declaration 等等一系列对于那些没有学习过或者是对其知之甚少编译原理的开发者算不上友好的概念。

@swc/jest

一个去掉了类型检查的 Jest Transformer，非常快，用于替换 babel-jest 和 ts-jest。

配置基本与 babel-jest 和 ts-jest 一致：

// jest.config.js
module.exports = {
  transform: {
    '^.+\\.(t|j)sx?$': '@swc/jest',
  },
}

默认配置会读取仓库目录下的 .swcrc 文件，可以通过以下方式自定义配置：

const fs = require('fs')

const config = JSON.parse(fs.readFileSync(`${__dirname}/.swcrc`, 'utf-8'))

module.exports = {
  transform: {
    '^.+\\.(t|j)sx?$': ['@swc/jest', { ...config, /* custom configuration in jest */ }],
  },
}

vscode-theme-generator

一个能够自定义 VS Code 主题的库，采用 TypeScript 开发，能够帮助你轻松自定义 VS Code 的主题。

import { generateTheme, IColorSet } from 'vscode-theme-generator';
const colorSet: IColorSet = {
  base: {
    background: '#12171F',
    foreground: '#EFEFEF',
    color1: '#399EF4',
    color2: '#DA6771',
    color3: '#4EB071',
    color4: '#FFF099',
  }
};
generateTheme('My Theme', colorSet, path.join(__dirname, 'theme.json'));

Nginx Playground

一个能够快速验证 Nginx 配置的在线演示工具。

Probot

一个用于构建 GitHub Apps 的框架，可以用它来实现工作流的自动化。

use-context-selector

一个基于 Context API 的封装，优化 Context 导致的 rerender 问题，虽然有一些限制，但可以通过这个设计实现更好了解 Context API。

使用方法：

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

import { createContext, useContextSelector } from 'use-context-selector';

const context = createContext(null);

const Counter1 = () => {
  const count1 = useContextSelector(context, v => v[0].count1);
  const setState = useContextSelector(context, v => v[1]);
  const increment = () => setState(s => ({
    ...s,
    count1: s.count1 + 1,
  }));
  return (
    <div>
      <span>Count1: {count1}</span>
      <button type="button" onClick={increment}>+1</button>
      {Math.random()}
    </div>
  );
};

const Counter2 = () => {
  const count2 = useContextSelector(context, v => v[0].count2);
  const setState = useContextSelector(context, v => v[1]);
  const increment = () => setState(s => ({
    ...s,
    count2: s.count2 + 1,
  }));
  return (
    <div>
      <span>Count2: {count2}</span>
      <button type="button" onClick={increment}>+1</button>
      {Math.random()}
    </div>
  );
};

const StateProvider = ({ children }) => {
  const [state, setState] = useState({ count1: 0, count2: 0 });
  return (
    <context.Provider value={[state, setState]}>
      {children}
    </context.Provider>
  );
};

const App = () => (
  <StateProvider>
    <Counter1 />
    <Counter2 />
  </StateProvider>
);

ReactDOM.render(<App />, document.getElementById('app'));

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。

发表于 2021-10-27 09:12
阅读 ( 593 )
分类：行业资讯