swc.ts

import { cwd } from 'process';
import { dirname, parse, relative } from 'path';
import { fileURLToPath, URL } from 'url';
import { existsSync } from 'fs';
import { pascalCase } from 'pascal-case';
import { config } from 'dotenv';
import { minimatch } from 'minimatch';
import { transformSync as compile } from '@swc/core';
import { Visitor } from '@swc/core/Visitor';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import eslint from 'vite-plugin-eslint';
import macros from 'vite-plugin-babel-macros';
import inspect from 'vite-plugin-inspect';

export const GLOBS = {
  COMPONENTS: 'src/components/+(?(*))/*.tsx'
};

export function future() {
  const name = '🧠';
  const transform = (source, path) => {
    const id = relative(cwd(), path);
    const { name } = parse(dirname(id));
    const CustomVisitor = class extends Visitor {
      private displayName: string;

      constructor(...params) {
        const displayName = pascalCase(name);

        super(...params);

        this.displayName = displayName;
      }

      visitExportDefaultExpression(path) {
        const { displayName } = this;

        return Object.assign(path, {
          expression: {
            type: 'CallExpression',
            span: { start: 0, end: 0, ctxt: 0 },
            callee: {
              type: 'MemberExpression',
              span: { start: 0, end: 0, ctxt: 0 },
              object: {
                type: 'Identifier',
                span: { start: 0, end: 0, ctxt: 0 },
                value: 'Object',
                optional: false
              },
              property: {
                type: 'Identifier',
                span: { start: 0, end: 0, ctxt: 0 },
                value: 'assign',
                optional: false
              }
            },
            arguments: [
              { expression: path.expression, spread: null },
              {
                spread: null,
                expression: {
                  type: 'ObjectExpression',
                  span: { start: 0, end: 0, ctxt: 0 },
                  properties: [
                    {
                      type: 'KeyValueProperty',
                      key: {
                        type: 'Identifier',
                        span: { start: 0, end: 0, ctxt: 0 },
                        value: 'displayName',
                        optional: false
                      },
                      value: {
                        type: 'StringLiteral',
                        span: { start: 0, end: 0, ctxt: 0 },
                        value: displayName,
                        raw: JSON.stringify(displayName)
                      }
                    }
                  ]
                }
              }
            ],
            typeArguments: null
          }
        });
      }

      visitTsType(path) {
        return path;
      }
    };
    const plugin = program => new CustomVisitor().visitProgram(program);
    const transformation = {
      jsc: { parser: { syntax: 'typescript', tsx: true }, target: 'es2022' },
      sourceMaps: true,
      plugin
    };
    const transformable = minimatch(id, GLOBS.COMPONENTS);

    return transformable && compile(source, transformation).code;
  };

  return { name, transform };
}

export default defineConfig(({ mode }) => {
  const basePath = `.env`;
  const envPath = `${basePath}.${mode}`;
  const path = existsSync(envPath) ? envPath : basePath;
  const { parsed } = config({ path });
  const minify = ['production', 'staging', 'test'].includes(mode) && 'esbuild';

  return {
    build: {
      rollupOptions: { preserveEntrySignatures: 'allow-extension' },
      sourcemap: true,
      minify
    },
    resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } },
    css: { devSourcemap: true },
    define: { 'process.env': JSON.stringify(parsed) },
    plugins: [eslint(), future(), react(), macros(), inspect()],
    server: { host: 'localhost', open: true, port: 8082 }
  };
});