11 |
13 | 
14 |
43 |
44 | )
45 | }
46 |
47 | export default App
48 |
--------------------------------------------------------------------------------
/examples/vite-swc-react/src/favicon.svg:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | lerna-debug.log*
8 |
9 | # Diagnostic reports (https://nodejs.org/api/report.html)
10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11 |
12 | # Runtime data
13 | pids
14 | *.pid
15 | *.seed
16 | *.pid.lock
17 |
18 | # Directory for instrumented libs generated by jscoverage/JSCover
19 | lib-cov
20 |
21 | # Coverage directory used by tools like istanbul
22 | coverage
23 | *.lcov
24 |
25 | # nyc test coverage
26 | .nyc_output
27 |
28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29 | .grunt
30 |
31 | # Bower dependency directory (https://bower.io/)
32 | bower_components
33 |
34 | # node-waf configuration
35 | .lock-wscript
36 |
37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
38 | build/Release
39 |
40 | # Dependency directories
41 | node_modules/
42 | jspm_packages/
43 |
44 | # TypeScript v1 declaration files
45 | typings/
46 |
47 | # TypeScript cache
48 | *.tsbuildinfo
49 |
50 | # Optional npm cache directory
51 | .npm
52 |
53 | # Optional eslint cache
54 | .eslintcache
55 |
56 | # Microbundle cache
57 | .rpt2_cache/
58 | .rts2_cache_cjs/
59 | .rts2_cache_es/
60 | .rts2_cache_umd/
61 |
62 | # Optional REPL history
63 | .node_repl_history
64 |
65 | # Output of 'npm pack'
66 | *.tgz
67 |
68 | # Yarn Integrity file
69 | .yarn-integrity
70 |
71 | # dotenv environment variables file
72 | .env
73 | .env.test
74 |
75 | # parcel-bundler cache (https://parceljs.org/)
76 | .cache
77 |
78 | # Next.js build output
79 | .next
80 |
81 | # Nuxt.js build / generate output
82 | .nuxt
83 | dist
84 |
85 | # Gatsby files
86 | .cache/
87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
88 | # https://nextjs.org/blog/next-9-1#public-directory-support
89 | # public
90 |
91 | # vuepress build output
92 | .vuepress/dist
93 |
94 | # Serverless directories
95 | .serverless/
96 |
97 | # FuseBox cache
98 | .fusebox/
99 |
100 | # DynamoDB Local files
101 | .dynamodb/
102 |
103 | # TernJS port file
104 | .tern-port
105 |
--------------------------------------------------------------------------------
/examples/vite-swc-react/src/logo.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/packages/react/README.md:
--------------------------------------------------------------------------------
1 | # vite-plugin-swc-react
2 |
3 | # features
4 |
5 | - [Speedy Compiling in SWC](https://swc.rs/docs/configuring-swc)
6 | - HMR Support in React Refresh
7 | - [New JSX Transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)
8 | - [Polyfill and Transpiler in SWC](https://swc.rs/docs/preset-env)
9 |
10 | # Using template
11 |
12 | ```
13 | npx degit iheyunfei/vite-swc-react-ts my-project
14 | // or using javascript template
15 | npx degit iheyunfei/vite-swc-react my-project
16 |
17 | cd my-project
18 |
19 | npm install
20 | npm run dev
21 | ```
22 |
23 | # install
24 |
25 | ```
26 | yarn add -D vite-plugin-swc-react
27 | // or
28 | npm install -D vite-plugin-swc-react
29 | ```
30 |
31 | # Usage
32 |
33 | ```ts
34 | import { defineConfig } from 'vite'
35 | import swcReact from 'vite-plugin-swc-react'
36 |
37 | export default defineConfig({
38 | plugins: [swcReact()],
39 | })
40 | ```
41 |
42 | ## Polyfill and Transpiler
43 |
44 | To enable polyfill, you would need to
45 |
46 | - install `browserlist` as a devDependency
47 | - install `core-js` as a dependency
48 | - pass options like
49 |
50 | ```ts
51 | import { defineConfig } from 'vite'
52 | import swcReact from 'vite-plugin-swc-react'
53 |
54 | export default defineConfig({
55 | plugins: [
56 | swcReact({
57 | swcOptions: {
58 | env: {
59 | // https://vitejs.dev/guide/build.html#browser-compatibility
60 | targets: 'defaults and supports es6-module and supports es6-module-dynamic-import, not opera > 0, not samsung > 0, not and_qq > 0',
61 | mode: 'usage',
62 | coreJs: 3,
63 | }
64 | }
65 | }),
66 | ],
67 | })
68 |
69 | ```
70 |
71 | ### ES5
72 |
73 | If your target browser only supports ES5, you may want to checkout [`@vitejs/plugin-legacy`](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy).
74 |
75 | ## disable HMR
76 |
77 | ```ts
78 | import { defineConfig } from 'vite'
79 | import swcReact from 'vite-plugin-swc-react'
80 |
81 | export default defineConfig({
82 | plugins: [
83 | swcReact({
84 | reactFresh: false,
85 | }),
86 | ],
87 | })
88 | ```
89 |
90 | ## classic JSX runtime
91 |
92 | ```ts
93 | import { defineConfig } from 'vite'
94 | import swcReact from 'vite-plugin-swc-react'
95 |
96 | export default defineConfig({
97 | plugins: [
98 | swcReact({
99 | swcOptions: {
100 | jsc: {
101 | transform: {
102 | react: {
103 | runtime: 'classic',
104 | },
105 | },
106 | },
107 | },
108 | }),
109 | ],
110 | })
111 | ```
112 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Plugins
2 |
3 | ## [vite-plugin-swc-react](./packages/react)
4 |
5 | ### features
6 |
7 | - [Speedy Compiling in SWC](https://swc.rs/docs/configuring-swc)
8 | - HMR Support in React Refresh
9 | - [New JSX Transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)
10 | - [Polyfill and Transpiler in SWC](https://swc.rs/docs/preset-env)
11 |
12 | ### Using template
13 |
14 | ```
15 | npx degit iheyunfei/vite-swc-react-ts my-project
16 | // or using javascript template
17 | npx degit iheyunfei/vite-swc-react my-project
18 |
19 | cd my-project
20 |
21 | npm install
22 | npm run dev
23 | ```
24 |
25 | ### install
26 |
27 | ```
28 | yarn add -D vite-plugin-swc-react
29 | // or
30 | npm install -D vite-plugin-swc-react
31 | ```
32 |
33 | ### Usage
34 |
35 | ```ts
36 | import { defineConfig } from 'vite'
37 | import swcReact from 'vite-plugin-swc-react'
38 |
39 | export default defineConfig({
40 | plugins: [swcReact()],
41 | })
42 | ```
43 |
44 | #### Polyfill and Transpiler
45 |
46 | To enable polyfill, you would need to
47 |
48 | - install `browserlist` as a devDependency
49 | - install `core-js` as a dependency
50 | - pass options like
51 |
52 | ```ts
53 | import { defineConfig } from 'vite'
54 | import swcReact from 'vite-plugin-swc-react'
55 |
56 | export default defineConfig({
57 | plugins: [
58 | swcReact({
59 | swcOptions: {
60 | env: {
61 | // https://vitejs.dev/guide/build.html#browser-compatibility
62 | targets: 'defaults and supports es6-module and supports es6-module-dynamic-import, not opera > 0, not samsung > 0, not and_qq > 0',
63 | mode: 'usage',
64 | coreJs: 3,
65 | }
66 | }
67 | }),
68 | ],
69 | })
70 |
71 | ```
72 |
73 | ##### ES5
74 |
75 | If your target browser only supports ES5, you may want to checkout [`@vitejs/plugin-legacy`](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy).
76 |
77 | #### disable HMR
78 |
79 | ```ts
80 | import { defineConfig } from 'vite'
81 | import swcReact from 'vite-plugin-swc-react'
82 |
83 | export default defineConfig({
84 | plugins: [
85 | swcReact({
86 | reactFresh: false,
87 | }),
88 | ],
89 | })
90 | ```
91 |
92 | #### classic JSX runtime
93 |
94 | ```ts
95 | import { defineConfig } from 'vite'
96 | import swcReact from 'vite-plugin-swc-react'
97 |
98 | export default defineConfig({
99 | plugins: [
100 | swcReact({
101 | swcOptions: {
102 | jsc: {
103 | transform: {
104 | react: {
105 | runtime: 'classic',
106 | },
107 | },
108 | },
109 | },
110 | }),
111 | ],
112 | })
113 | ```
114 |
--------------------------------------------------------------------------------
/packages/react/src/react-refresh-helper.ts:
--------------------------------------------------------------------------------
1 | // The code are inspired and copied from https://github.com/facebook/react/issues/16604 and https://github.com/vitejs/vite/tree/main/packages/plugin-react
2 |
3 | import fs from 'fs'
4 | import ExportNameCollector from './ExportNameCollector'
5 |
6 | const runtimeFilePath = require.resolve(
7 | 'react-refresh/cjs/react-refresh-runtime.development.js',
8 | )
9 |
10 | const reactRefreshExports = `
11 | (function (){
12 | window.$react_refresh_exports$ = null
13 | let exports = {}
14 | return () => {
15 | if (window.$react_refresh_exports$) return window.$react_refresh_exports$
16 | ${fs
17 | .readFileSync(runtimeFilePath, 'utf-8')
18 | .replace('process.env.NODE_ENV', JSON.stringify('development'))}
19 | exports.performReactRefresh = (function debounce(fn) {
20 | let handle
21 | return () => {
22 | cancelAnimationFrame(handle)
23 | handle = requestAnimationFrame(fn)
24 | }
25 | }(exports.performReactRefresh))
26 | window.$react_refresh_exports$ = exports
27 | return exports
28 | }
29 | }())()
30 | `
31 |
32 | export const reactRefreshRuntimeCode = `
33 | if (process.env.NODE_ENV !== 'production' && typeof window !== 'undefined') {
34 | const runtime = ${reactRefreshExports};
35 | runtime.injectIntoGlobalHook(window);
36 | window.$RefreshReg$ = () => {};
37 | window.$RefreshSig$ = () => type => type;
38 | }
39 | `.replace('process.env.NODE_ENV', JSON.stringify('development'))
40 |
41 | export const addReactFreshWrapper = (
42 | id: string,
43 | code: string,
44 | collector: ExportNameCollector,
45 | ) => {
46 | let updater: string
47 | if (
48 | collector.isAbsolutelyNotReactRefreshBoundary ||
49 | collector.exportedNames.size === 0
50 | ) {
51 | updater = ''
52 | } else {
53 | updater = `
54 | if (${[...collector.exportedNames.values()]
55 | // .map((name) => `typeof ${name} === 'function'`)
56 | .map((name) => `RefreshRuntime.isLikelyComponentType(${name})`)
57 | .join('&&')}) {
58 | import.meta.hot.accept()
59 | } else {
60 | // For now, calling import.meta.hot.invalidate() simply reloads the page. https://vitejs.dev/guide/api-hmr.html#hot-dispose-cb
61 | // TODO: We should ask user before reloading the page.
62 | import.meta.hot.invalidate()
63 | }
64 | `
65 | }
66 |
67 | return `
68 | let prevRefreshReg;
69 | let prevRefreshSig;
70 | const RefreshRuntime = window.$react_refresh_exports$;
71 |
72 | if (import.meta.hot) {
73 | prevRefreshReg = window.$RefreshReg$;
74 | prevRefreshSig = window.$RefreshSig$;
75 | window.$RefreshReg$ = (type, id) => {
76 | const fullId = ${JSON.stringify(id)} + ' ' + id;
77 | RefreshRuntime.register(type, fullId);
78 | }
79 | window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
80 | }
81 |
82 | ${code}
83 |
84 | if (import.meta.hot) {
85 | window.$RefreshReg$ = prevRefreshReg;
86 | window.$RefreshSig$ = prevRefreshSig;
87 | ${updater}
88 | RefreshRuntime.performReactRefresh()
89 | }`
90 | }
91 |
--------------------------------------------------------------------------------
/packages/react/src/index.ts:
--------------------------------------------------------------------------------
1 | import * as swcCore from '@swc/core'
2 |
3 | import {
4 | Options as SWCOptions,
5 | } from '@swc/core'
6 | import { PluginOption } from 'vite'
7 | import merge from 'lodash.merge'
8 | import {
9 | addReactFreshWrapper,
10 | reactRefreshRuntimeCode,
11 | } from './react-refresh-helper'
12 | import ExportNameCollector from './ExportNameCollector'
13 |
14 | export default function swcReact(
15 | options: {
16 | /**
17 | * @default true
18 | */
19 | reactFresh?: boolean
20 | /**
21 | * @default 'automatic'
22 | */
23 | jsxRuntime?: 'classic' | 'automatic'
24 | /**
25 | * See https://swc.rs/docs/configuring-swc
26 | */
27 | swcOptions?: SWCOptions,
28 | /**
29 | * ```ts
30 | * import * as yourOwnSWC from '@swc/core'
31 | * swcReact({ unsafe_injectSWC: yourOwnSWC })
32 | * ```
33 | */
34 | unsafe_injectSWC?: any,
35 | } = {},
36 | ): PluginOption[] {
37 | const swc: typeof swcCore = options?.unsafe_injectSWC ?? swcCore;
38 | const {
39 | reactFresh = true,
40 | swcOptions = {},
41 | jsxRuntime = 'automatic',
42 | } = options
43 |
44 | let isDevelopment = false
45 |
46 | const ctx = {
47 | get isEnableReactRefresh() {
48 | return isDevelopment && reactFresh
49 | },
50 | }
51 |
52 | return [
53 | {
54 | name: 'vite-plugin-swc-react',
55 | enforce: 'pre',
56 | config(config, env) {
57 | isDevelopment = env.mode === 'development'
58 |
59 | // Disable esbuild for transforming
60 | config.esbuild = false
61 | },
62 | transformIndexHtml() {
63 | if (ctx.isEnableReactRefresh) {
64 | // Inject react refresh runtime
65 | return [
66 | {
67 | tag: 'script',
68 | attrs: { type: 'module' },
69 | children: reactRefreshRuntimeCode,
70 | },
71 | ]
72 | }
73 | },
74 | async transform(code, id) {
75 | if (!id.includes('node_modules') && /\.(js|mjs|jsx|ts|tsx)$/.test(id)) {
76 | const isTS = /\.(ts|tsx)$/.test(id)
77 | const is_SX = !id.endsWith('.ts')
78 |
79 | const collector =
80 | isDevelopment && is_SX ? new ExportNameCollector() : null
81 |
82 | const options: SWCOptions = {
83 | ...(collector
84 | ? {
85 | plugin: swc.plugins([(p) => collector.visitProgram(p)]),
86 | }
87 | : null),
88 | filename: id,
89 | jsc: {
90 | target: 'es2021',
91 | parser: {
92 | syntax: isTS ? 'typescript' : 'ecmascript',
93 | [isTS ? 'tsx' : 'jsx']: is_SX,
94 | },
95 | transform: {
96 | react: {
97 | development: isDevelopment,
98 | runtime: jsxRuntime,
99 | refresh: ctx.isEnableReactRefresh,
100 | },
101 | },
102 | },
103 | }
104 |
105 | const resolveSWCOptions = merge(options, swcOptions)
106 |
107 | const transformed = await swc.transform(code, resolveSWCOptions)
108 |
109 | return {
110 | ...transformed,
111 | code:
112 | isDevelopment && reactFresh && collector
113 | ? addReactFreshWrapper(
114 | id,
115 | transformed.code,
116 | collector
117 | )
118 | : transformed.code,
119 | }
120 | }
121 | },
122 | },
123 | ]
124 | }
--------------------------------------------------------------------------------
/packages/react/__tests__/ExportNameCollector.ts:
--------------------------------------------------------------------------------
1 | import * as swc from '@swc/core'
2 | import ExportNameCollector from '../src/ExportNameCollector'
3 |
4 | describe('ReactRefreshBoundaryCollector', () => {
5 | const cases = [
6 | {
7 | code: `export default Foo;`,
8 | isAbsolutelyNotReactRefreshBoundary: false,
9 | },
10 | {
11 | code: `export default foo;`,
12 | isAbsolutelyNotReactRefreshBoundary: true,
13 | },
14 | {
15 | code: `export default memo(Foo);`,
16 | isAbsolutelyNotReactRefreshBoundary: false,
17 | },
18 | {
19 | code: `export default memo(foo);`,
20 | isAbsolutelyNotReactRefreshBoundary: true,
21 | },
22 | // export default [function / class] ...
23 | {
24 | code: `export default function Foo() {};`,
25 | isAbsolutelyNotReactRefreshBoundary: false,
26 | },
27 | {
28 | code: `export default class Foo {}`,
29 | isAbsolutelyNotReactRefreshBoundary: true,
30 | },
31 | {
32 | code: `export default function foo() {};`,
33 | isAbsolutelyNotReactRefreshBoundary: true,
34 | },
35 | {
36 | code: `export default class foo {}`,
37 | isAbsolutelyNotReactRefreshBoundary: true,
38 | },
39 | // export
40 | {
41 | code: `export { Foo }`,
42 | isAbsolutelyNotReactRefreshBoundary: false,
43 | },
44 | {
45 | code: `export { foo }`,
46 | isAbsolutelyNotReactRefreshBoundary: true,
47 | },
48 | {
49 | code: `export { Foo, baz }`,
50 | isAbsolutelyNotReactRefreshBoundary: true,
51 | },
52 |
53 | // export
54 | {
55 | code: `export * as Foo from './foo.js'`,
56 | isAbsolutelyNotReactRefreshBoundary: true,
57 | },
58 | {
59 | code: `export { Foo } from './foo.js'`,
60 | isAbsolutelyNotReactRefreshBoundary: false,
61 | },
62 | {
63 | code: `export { Foo as foo } from './foo.js'`,
64 | isAbsolutelyNotReactRefreshBoundary: true,
65 | },
66 | {
67 | code: `export { foo as Foo } from './foo.js'`,
68 | isAbsolutelyNotReactRefreshBoundary: false,
69 | },
70 | {
71 | code: `export { foo } from './foo.js'`,
72 | isAbsolutelyNotReactRefreshBoundary: true,
73 | },
74 | {
75 | code: `export { Foo, baz } from './foo.js'`,
76 | isAbsolutelyNotReactRefreshBoundary: true,
77 | },
78 | {
79 | code: `export { Foo as default }`,
80 | isAbsolutelyNotReactRefreshBoundary: false,
81 | },
82 | {
83 | code: `export { foo as default }`,
84 | isAbsolutelyNotReactRefreshBoundary: true,
85 | },
86 | {
87 | code: `export { default as Foo }`,
88 | isAbsolutelyNotReactRefreshBoundary: false,
89 | },
90 | {
91 | code: `export { default as foo }`,
92 | isAbsolutelyNotReactRefreshBoundary: true,
93 | },
94 | {
95 | code: `export function Foo() {}`,
96 | isAbsolutelyNotReactRefreshBoundary: false,
97 | },
98 | {
99 | code: `export function foo() {}`,
100 | isAbsolutelyNotReactRefreshBoundary: true,
101 | },
102 | {
103 | code: `export class Foo {}`,
104 | isAbsolutelyNotReactRefreshBoundary: true,
105 | },
106 | {
107 | code: `export class foo {}`,
108 | isAbsolutelyNotReactRefreshBoundary: true,
109 | },
110 | ]
111 |
112 | cases.forEach((aCase) => {
113 | test(`${aCase.code.slice(0, 30)} should be ${aCase.isAbsolutelyNotReactRefreshBoundary}`, () => {
114 | const c = new ExportNameCollector();
115 | swc.transformSync(
116 | `${aCase.code}`,
117 | {
118 | jsc: {
119 | parser: {
120 | syntax: 'typescript',
121 | tsx: true,
122 | },
123 | },
124 | plugin: swc.plugins([(p) => c.visitProgram(p)]),
125 | },
126 | )
127 | expect(c.isAbsolutelyNotReactRefreshBoundary).toBe(aCase.isAbsolutelyNotReactRefreshBoundary)
128 | })
129 | })
130 | })
131 |
--------------------------------------------------------------------------------
/packages/react/src/ExportNameCollector.ts:
--------------------------------------------------------------------------------
1 | import {
2 | CallExpression,
3 | ExportDeclaration,
4 | ExportDefaultDeclaration,
5 | ExportDefaultExpression,
6 | ExportNamedDeclaration,
7 | ModuleDeclaration,
8 | TsType,
9 | } from '@swc/core'
10 | import Visitor from '@swc/core/Visitor'
11 |
12 | function isComponentLikeName(name: string): boolean {
13 | return typeof name === 'string' && name[0] >= 'A' && name[0] <= 'Z'
14 | }
15 |
16 | function neverCheck(foo: never): never {
17 | throw new Error(`expected never got ${foo}`)
18 | }
19 |
20 | export default class ExportNameCollector extends Visitor {
21 | exportedNames = new SetHello Vite + React
15 |16 | 19 |
20 |
21 | Edit App.tsx and save to test HMR updates.
22 |
24 | 30 | Learn React 31 | 32 | {' | '} 33 | 39 | Vite Docs 40 | 41 |
42 |