What’s New in Node.js, VS Code, React, and Emerging Open‑Source Tools?

Happy 1024 Programmer's Day to everyone!

News

Node.js v17.0.0 Released

Key updates:

Node.js now includes OpenSSL 3.0, providing QUIC support.

V8 JavaScript engine upgraded to v8.9.5.

The readline module now offers an interface to read a line from a readable stream such as process.stdin.

…and more.

Release blog: Node v17.0.0 (Current) | Node.js

VS Code Browser Version Launched

Following GitHub’s github.dev, VS Code is now available at vscode.dev , offering the same core capabilities as the desktop Electron client and even supporting local project development.

Release blog: VS Code Browser Version

React New Documentation Site

The React team is rebuilding its documentation with Next.js and Tailwind, adding a dark mode and a cleaner layout to replace the previously cluttered, class‑component‑heavy docs.

Documentation link: React Docs Beta

Open Source

ts‑morpher

Because the native TypeScript AST API is complex and unstable, ts‑morph was created to provide a friendlier wrapper. It simplifies operations on nodes such as Node, TypeNode, Syntax, Statement, and Declaration, making TypeScript AST manipulation more approachable.

Home page: ts‑morpher

GitHub: LinbuduLab/morpher

@swc/jest

A fast Jest transformer that skips type checking, serving as a drop‑in replacement for babel-jest and ts-jest.

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

Custom configuration can be loaded from a .swcrc file:

const fs = require('fs');
const config = JSON.parse(fs.readFileSync(`${__dirname}/.swcrc`, 'utf-8'));
module.exports = {
  transform: {
    '^.+\.(t|j)sx?$': ['@swc/jest', { ...config }],
  },
}

GitHub: swc-project/jest

vscode‑theme‑generator

A TypeScript library that lets you create custom VS Code themes with just a few color definitions.

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'));

GitHub: Tyriar/vscode-theme-generator

Nginx Playground

An online tool for quickly testing Nginx configuration snippets.

Online address: nginx playground

Probot

A framework for building GitHub Apps to automate workflows.

Documentation: probot

GitHub: probot/probot

use‑context‑selector

A wrapper around React’s Context API that reduces unnecessary re‑renders by allowing selectors to pick specific slices of context state.

import React, { useState } from 'react';
import { createContext, useContextSelector } from 'use-context-selector';
const context = createContext(null);
// Example components using the selector
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 (
    <section>
      <span>Count1: {count1}</span>
      <button type="button" onClick={increment}>+1</button>
    </section>
  );
};
// ...similar Counter2 and provider omitted for brevity

GitHub: dai-shi/use-context-selector

Article

How Naive UI Was Developed

The article starts with Naive UI’s Button component and expands to reveal the step‑by‑step process of building a component library, offering insight into the design decisions and engineering challenges behind Naive UI.

Original link: How the recommended component library was built