React

import { defineConfig } from '@farmfe/core';
import react from '@farmfe/plugin-react';

export default defineConfig({
  plugins: [react()],
});

import { defineConfig } from '@farmfe/core';
import react from '@farmfe/plugin-react';

export default defineConfig({
  compilation: {
    script: {
      plugins: [
        {
          name: '@swc/plugin-emotion',
          options: {},
          filters: {
            moduleTypes: ['tsx'],
          },
        },
      ],
    },
  },
  plugins: [react({ runtime: "automatic", importSource: "@emotion/react" })],
});

import { css } from '@emotion/react';

const color = 'white';

export function Main() {
  return (
    <div
      onClick={() => setCount((c) => c + 1)}
      css={css`
        padding: 32px;
        background-color: hotpink;
        font-size: 24px;
        border-radius: 4px;
        &:hover {
          color: ${color};
        }
      `}
    >
      {a}: {count}
    </div>
  );
}

import { defineConfig } from '@farmfe/core';
import react from '@farmfe/plugin-react';
import farmJsPluginSvgr from '@farmfe/js-plugin-svgr';

export default defineConfig(async (env) => {
  return {
    plugins: [
      react({
        refresh: process.env.NODE_ENV === 'development',
        development: process.env.NODE_ENV === 'development'
      }),
      farmJsPluginSvgr()
    ]
  };
});