vitejs / vite-plugin-react-swc

Speed up your Vite dev server with SWC
MIT License
774 stars 49 forks source link

option tsDecorators not work #216

Closed vaynevayne closed 1 week ago

vaynevayne commented 1 week ago
import react from '@vitejs/plugin-react-swc'
import path from 'node:path'
import { fileURLToPath } from 'url'
import { defineConfig, transformWithEsbuild } from 'vite'
import cdn from 'vite-plugin-cdn-import'
const filename = fileURLToPath(import.meta.url)
const _dirname = path.dirname(filename)

// https://vitejs.dev/config/
export default defineConfig({
  esbuild: {
    loader: 'jsx',
  },
  optimizeDeps: {
    esbuildOptions: {
      loader: {
        '.js': 'jsx',
      },
    },
  },
  plugins: [

    cdn({
      modules: [
        {
          name: 'polyfill',
          var: 'Polyfill',
          path: 'http://polyfill.alicdn.com/v3/polyfill.min.js',
        },
        {
          name: 'react',
          var: 'React',
          path: ``,
        },
        {
          name: 'react-dom',
          var: 'ReactDOM',
          path: ``,
        },
      ],
    }),
    {
      name: 'load+transform-js-files-as-jsx',
      async transform(code, id) {
        if (!id.match(/src\/.*\.js$/)) {
          return null;
        }

        // Use the exposed transform from vite, instead of directly
        // transforming with esbuild
        return transformWithEsbuild(code, id, {
          loader: 'jsx',
          jsx: 'automatic', // 👈 this is important
        });
      },
    },
    react({
      tsDecorators:true
    }
    ),
  ],
  resolve: {
    alias: [{ find: '@', replacement: path.resolve(_dirname, 'src') }],
  },
  build: {
    outDir: 'build',
    rollupOptions: {
      external: ['react', 'react-dom']
      output: {
        manualChunks: {
          lodash: ['lodash'],
        },
      },
    },
  },
})
{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "checkJs": false,
    "experimentalDecorators": true, 
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "lib": [
      "dom",
      "dom.iterable",
      "ES2020"
    ],
    "strictNullChecks":true,
    "module": "ES2020",
    "moduleResolution": "node",
    "noFallthroughCasesInSwitch": true,
    "noEmit": true,
    "noImplicitAny": true,
    "noUnusedLocals": false,
    "paths": {
      "@/*": ["src/*"],
    },
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "ES2022",
  },
  "exclude": [
    "dist",
    "node_modules",
    "public"
  ],
  "include": [
    "./src",
    "**.ts",
    // "**.tsx",
    // "src/**/*.js",
    // "src/**/*.tsx",
  ]
}
image
ArnaudBarre commented 1 week ago

Using JSX in JS has been highly discouraged for years in Vite and I will not look into issue that have tens of lines of config to continue having non standard syntax into JS files.