What’s New in 2024? Explore ahooks 3.0, Tailwind CSS 3.0, Fiber, Happy DOM & More

🗞 News

ahooks 3.0 released

ahooks is a high‑quality React Hooks library that, after more than two years of iteration, launches version 3.0 with full SSR support, a brand‑new useRequest hook, stable output‑function references to avoid closure issues, dynamic target handling for DOM hooks, a more reasonable API design, fixes for Strict Mode and react‑refresh (HMR), plus many additional hooks.

Full SSR support

New useRequest Stable output function references

DOM hooks support dynamic target changes

Improved API design

Fixes for Strict Mode

Fixes for react‑refresh (HMR)

Additional hooks

…etc.

Release blog: ahooks 3.0 – High‑quality reliable React Hooks library

Tailwind CSS v3.0

Tailwind CSS v3.0 brings a runtime engine inspired by WindiCSS, an out‑of‑the‑box color system, customizable box‑shadow colors, a Scroll‑snap API, multi‑column layout support, LTR & RTL modifiers, and many other enhancements.

Runtime engine (WindiCSS‑style)

Ready‑to‑use color system

Customizable color box‑shadow

Scroll‑snap API

Multi‑column layout

LTR & RTL modifiers

…etc.

Release blog: Tailwind CSS v3.0 – Tailwind CSS

📦 Open Source

Fiber

Fiber is a Go web framework inspired by Express, offering high performance and an API that feels familiar to Express users.

Basic routing example:

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"))
}

Static file serving example:

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

    app.Static("/", "./public")               // http://localhost:3000/js/script.js
    app.Static("/prefix", "./public")          // http://localhost:3000/prefix/js/script.js
    app.Static("*", "./public/index.html")     // http://localhost:3000/any/path/shows/index/html

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

Middleware example:

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"))
}

Performance is strong; see the official site for benchmarks.

Happy DOM

Happy DOM is a jsdom alternative that supports server‑side rendering of web components.

Benchmark comparison (lower numbers are faster):

Operation

JSDOM

Happy DOM

Import / Require

333 ms

45 ms

Parse HTML

256 ms

26 ms

Serialize HTML

65 ms

8 ms

Render custom element

214 ms

19 ms

querySelectorAll('tagname')

4.9 ms

0.7 ms

querySelectorAll('.class')

6.4 ms

3.7 ms

querySelectorAll('[attribute]')

4.0 ms

1.7 ms

querySelectorAll('[class~="name"]')

5.5 ms

2.9 ms

querySelectorAll(':nth-child(2n+1)')

10.4 ms

3.8 ms

amis

Amis is a low‑code front‑end framework that generates pages from JSON configuration, dramatically reducing development effort.

Mitosis

Mitosis is a React‑like framework that compiles components once into Vue, React, Solid, Angular, Svelte, and other frameworks, enabling “write once, run everywhere” development.

📑 Article

TypeScript type variance

Original article: TypeScript 类型中的逆变协变