A swc plugin that automatically converts React component libraries into "React Client Component"

Related tags

Utilities react nextjs mui rsc rcc swc-plugin mui-material use-client
Overview

use-client

中文

NPM npm Rust

A swc plugin that automatically converts React component libraries into "React Client Component". For example, you can automatically convert components from @mui into "React Client Component" without having to wrap a component that uses "use client".

Installation

npm:

npm install -D use-client

yarn:

yarn add -D use-client

pnpm:

pnpm i -D use-client

Configuration

  • include：["ui-library-path"]

Examples

next.js configuration:

const nextConfig = {
  experimental: {
    swcPlugins: [
      [
        "use-client",
        {
          include: ["@mui/material", "@mui/icons-material"，"antd", "@ant-design/icons"],
        },
      ],
    ],
  },
};

swc configuration:

{
  "$schema": "https://json.schemastore.org/swcrc",
  "jsc": {
    "experimental": {
      "plugins": [
        ["use-client", {
          "include": ["@mui/material", "@mui/icons-material"，"antd", "@ant-design/icons"]
        }]
      ]
    }
  }
}

FAQ

  • The swc plugin interrupts tree shaking

At present, this is an expected behavior, The Next.js team will improve it in the future。You can temporarily solve this problem by configuring modularizeImports:

const nextConfig = {
  modularizeImports: {
    "@mui/material": {
      transform: "@mui/material/{{member}}"
    },
  },
  experimental: {
    swcPlugins: [
      [
        "use-client",
        {
          include: ["@mui/material"],
        },
      ],
    ],
  },
};

Note that some functions do not follow the '@ mui/material/{{member}}' rule, such as createTheme and ThemeProvider, which need to be processed separately as' import {createTheme, ThemeProvider} from '@ mui/material/styles'`

🌟 🌟 🌟 🌟 If this plugin is helpful to you, give the author a star. 🙏 🙏 🙏 🌟 🌟 🌟 🌟

You might also like...
Simplified glue code generation for Deno FFI libraries written in Rust.

deno_bindgen This tool aims to simplify glue code generation for Deno FFI libraries written in Rust. Quickstart # install CLI deno install -Afq -n den

Divy Srivastava 173 Dec 17, 2022
Mobile safari / webview remote debugging and e2e testing libraries

Canter (WIP) (WIP) Mobile safari / webview remote debugging and e2e testing libraries. Developed for safari/webview e2e testing on iPhone. Works only

Han Lee 9 Aug 16, 2022
mollusc is a collection of pure-Rust libraries for parsing, interpreting, and analyzing LLVM.

mollusc is a collection of pure-Rust libraries for parsing, interpreting, and analyzing LLVM.

William Woodruff 50 Dec 2, 2022
Rust libraries for working with GPT (GUID Partition Table) disk data

gpt-disk-rs no_std libraries related to GPT (GUID Partition Table) disk data. There are three Rust packages in this repository: uguid The uguid packag

Google 25 Dec 24, 2022
A code generator to reduce repetitive tasks and build high-quality Rust libraries. 🦀

LibMake A code generator to reduce repetitive tasks and build high-quality Rust libraries Welcome to libmake 👋 Website • Documentation • Report Bug •

Sebastien Rousseau 27 Mar 12, 2023
A Wasm component optimizer (mostly a wrapper around wasm-opt)

component-opt An optimizer for Wasm Components Current Status This project currently only offers one optimization and does not allow it to be configur

Robin Brown 6 Mar 4, 2024
Crate of GitHub’s collection of gitignores, embedded, automatically updated

Gitignores GitHub’s collection of gitignores, embedded, automatically updated. API documentation. Public Domain via CC0-1.0 (same as source data). MSR

null 3 May 3, 2022
A git hook to manage derivative files automatically.

git-derivative A git hook to manage derivative files automatically. For example if you checked out to a branch with different yarn.lock, git-derivativ

Sung Jeon 3 Oct 30, 2022
Automatically build a Rust module tree from the project directory structure

Hypermod An even lazier version of automod and supermod. Searches the src/ directory recursively for .rs files, then builds a module tree using the di

null 4 Aug 3, 2022
Comments
Owner
xiaotian
xiaotian
GitHub
[SWC plugin] workaround for jest

[SWC plugin] workaround for jest This is a SWC plugin to handle jest compatibility issues. This SWC plugin should be used with @swc/jest. usage instal

magic-akari 17 Dec 19, 2022
SWC plugin for transform Vue3-jsx syntax

swc-plugin-transform-vue3-jsx ?? SWC plugin for faster conversion vue3-jsx. Installation npm npm install swc-plugin-transform-vue3-jsx -D yarn yarn ad

null 4 Oct 19, 2022
swc node binding use wasm

node_swc swc node binding use wasm Build Make sure you have rust wasm-pack installed. $ yarn build # build wasm, node Usage import { parseSync, printS

伊撒尔 23 Sep 8, 2022
An experimental transpiler to bring tailwind macros to SWC 🚀

stailwc (speedy tailwind compiler) This is an experimental SWC transpiler to bring compile time tailwind macros to SWC (and nextjs) a-la twin macro. T

Alexander Lyon 139 Dec 20, 2022
Component-based state machine plugin for Bevy

seldom_state is a component-based state machine plugin for Bevy. It's useful for AI, player state, and other entities that occupy various states. It allows for greater reusability of state logic between entities, compared to managing mutually-exclusive components directly in your systems.

Seldom 43 Jan 2, 2023
Plugin to request a relaunch when uploading a Skyline plugin through cargo skyline

restart-plugin A skyline plugin for allowing cargo-skyline (or other tools) to restart your game without you having to touch your controller. Install

null 1 Nov 21, 2021
A rollup plugin that compile Rust code into WebAssembly modules

rollup-plugin-rust tl;dr -- see examples This is a rollup plugin that loads Rust code so it can be interop with Javascript base project. Currently, th

Fahmi Akbar Wildana 37 Aug 1, 2022
Extracting react native app source code from apk file.

extract-myreact Extracting React Native app source code from apk file.

Aan 3 Oct 5, 2022
Fast file explorer written with Tauri and React.

Fast File Explorer This is a fast file explorer written in Rust. After testing on my C drive, this file explorer was able to find a file in 280ms. In

Sam 455 Jul 4, 2023
PartiQL libraries and tools in Rust.

This is a collection of crates to provide Rust support for the PartiQL query language.

null 54 Dec 26, 2022