昭昭前事，惕惕后人。

🗞 News

ahooks 3.0 发布

ahooks 作为 React 社区中优质可靠的 Hooks 库，经过近两年多的迭代，在国内外社区都获得了很多同学的认可，时至今日 ahooks 发布 3.0 版本，为我们带来了以下新特性：

• 全面支持 SSR

• 全新的 useRequest

• 所有的输出函数引用是固定的，避免闭包问题

• DOM 类 Hooks 支持 target 动态变化

• 更合理的 API 设计

• 解决了在严格模式（Strict Mode）下的问题

• 解决了在 react-refresh（HMR）模式下的问题

• 新增了更多 Hooks

• &etc.

Release Blog：ahooks 3.0 来了！高质量可靠的 React Hooks 库 - 知乎 (zhihu.com)

Home Page：ahooks - React Hooks Library - ahooks 3.0

GitHub Repo：GitHub - alibaba/hooks: A high-quality & reliable React Hooks library.

Tailwind CSS v3.0

此次更新，为我们带来了以下新特性：

• 运行时引擎（师承 WindiCSS）

• 开箱即用的颜色系统

• 可定制颜色的 box-shadow

• Scroll snap API

• 多列布局

• LTR & RTL 修饰符

• &etc.

Release Blog：Tailwind CSS v3.0 – Tailwind CSS

GitHub Repo：tailwindlabs/tailwindcss: A utility-first CSS framework for rapid UI development. (github.com)

📦 Open Source

fiber

一个受 Express 启发的 Web 应用框架，使用 Go 开发，语法与 Express 相近，同时性能也非常强劲。\

基础路由：

func main() {
    app := fiber.New()

    // GET /api/register
    app.Get("/api/*", func(c *fiber.Ctx) error {
        msg := fmt.Sprintf("✋ %s", c.Params("*"))
        return c.SendString(msg) // => ✋ register
    })

    // GET /flights/LAX-SFO
    app.Get("/flights/:from-:to", func(c *fiber.Ctx) error {
        msg := fmt.Sprintf("💸 From: %s, To: %s", c.Params("from"), c.Params("to"))
        return c.SendString(msg) // => 💸 From: LAX, To: SFO
    })

    // GET /dictionary.txt
    app.Get("/:file.:ext", func(c *fiber.Ctx) error {
        msg := fmt.Sprintf("📃 %s.%s", c.Params("file"), c.Params("ext"))
        return c.SendString(msg) // => 📃 dictionary.txt
    })

    // GET /john/75
    app.Get("/:name/:age/:gender?", func(c *fiber.Ctx) error {
        msg := fmt.Sprintf("👴 %s is %s years old", c.Params("name"), c.Params("age"))
        return c.SendString(msg) // => 👴 john is 75 years old
    })

    // GET /john
    app.Get("/:name", func(c *fiber.Ctx) error {
        msg := fmt.Sprintf("Hello, %s 👋!", c.Params("name"))
        return c.SendString(msg) // => Hello john 👋!
    })

    log.Fatal(app.Listen(":3000"))
}

静态资源服务：

func main() {
    app := fiber.New()

    app.Static("/", "./public")
    // => http://localhost:3000/js/script.js
    // => http://localhost:3000/css/style.css

    app.Static("/prefix", "./public")
    // => http://localhost:3000/prefix/js/script.js
    // => http://localhost:3000/prefix/css/style.css

    app.Static("*", "./public/index.html")
    // => http://localhost:3000/any/path/shows/index/html

    log.Fatal(app.Listen(":3000"))
}

中间件：

func main() {
    app := fiber.New()

    // Match any route
    app.Use(func(c *fiber.Ctx) error {
        fmt.Println("🥇 First handler")
        return c.Next()
    })

    // Match all routes starting with /api
    app.Use("/api", func(c *fiber.Ctx) error {
        fmt.Println("🥈 Second handler")
        return c.Next()
    })

    // GET /api/list
    app.Get("/api/list", func(c *fiber.Ctx) error {
        fmt.Println("🥉 Last handler")
        return c.SendString("Hello, World 👋!")
    })

    log.Fatal(app.Listen(":3000"))
}

相信熟悉 Express 的同学对它应该不会太陌生。

性能也非常强劲：

Home Page：Fiber (gofiber.io)

GitHub Repo：gofiber/fiber: ⚡️ Express inspired web framework written in Go (github.com)

Happy DOM

一个 jsdom 的替代品，用于支持 Web Components 的 SSR，旨在支持浏览器更多浏览器常用的功能。

Benchmark：

GitHub Repo：capricorn86/happy-dom: A jsdom alternative with support for server side rendering of web components. (github.com)

amis

amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。

Home Page：介绍 (gitee.io)

GitHub Repo：baidu/amis: 前端低代码框架，通过 JSON 配置就能生成各种页面。 (github.com)

Mitosis

一款类 React 框架，口号是编写一次组件，在任何框架中使用，采用编译的方式将其编译为 Vue/React/SolidJS/Angular/Svelte 等组件。

GitHub Repo：BuilderIO/mitosis: Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and more. (github.com)

📑 Article

TypeScript 类型中的逆变协变

原文链接：TypeScript类型中的逆变协变 (qq.com)