1.2.0 • Published 1 year ago

use-client v1.2.0

Weekly downloads
2
License
MIT
Repository
github
Last release
1 year ago

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

PropertyTypeDescription
include(string | IncludeConfig)[] | Array of paths to be transformed

IncludeConfig: | Property | Type | Description | | ---- | ---- | ---- | | path | string | Path to match | | insert | string | Custom content to insert at the beginning of the file, default value: "use client" |

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

Custom Insert Content:

const nextConfig = {
  experimental: {
    swcPlugins: [
      [
        'use-client',
        {
          include: ["path/to", {
            path: "path/to",
            insert: "use strict"
          }]
        }
      ],
    ]
  }
}

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.🙏🙏🙏🌟🌟🌟🌟

1.2.0

1 year ago

1.0.2

2 years ago

1.1.0

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

0.1.0

2 years ago

0.2.1

2 years ago

0.2.0

2 years ago

1.6.0

4 years ago

1.5.0

4 years ago

1.4.0

5 years ago

1.3.4

6 years ago

1.3.3

6 years ago

1.3.2

6 years ago

1.3.1

6 years ago

1.3.0

6 years ago

1.2.1

6 years ago

0.0.2

6 years ago

0.0.1

6 years ago