feat(js-plugins): support babel plugin & react compiler plugin (#96)

farm-fe · Dec 19, 2024 · 7551a3f · 7551a3f
1 parent 93e7f61
commit 7551a3f
Show file tree

Hide file tree

Showing 20 changed files with 1,443 additions and 205 deletions.
diff --git a/.changeset/pretty-bags-carry.md b/.changeset/pretty-bags-carry.md
@@ -0,0 +1,5 @@
+---
+"@farmfe/js-plugin-babel": patch
+---
+
+babel plugin release
diff --git a/.changeset/serious-dingos-relate.md b/.changeset/serious-dingos-relate.md
@@ -0,0 +1,5 @@
+---
+"@farmfe/js-plugin-react-compiler": patch
+---
+
+release react-compiler plugin
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,3 @@
+[*]
+indent_size = 2
+indent_style = space
diff --git a/examples/babel-react-compiler/farm.config.ts b/examples/babel-react-compiler/farm.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from '@farmfe/core';
+import react from '@farmfe/plugin-react';
+import { reactCompiler } from '@farmfe/js-plugin-react-compiler';
+
+export default defineConfig({
+    compilation: {
+        input: {},
+        output: {},
+        presetEnv: false,
+        minify: false,
+        mode: 'development',
+        persistentCache: false,
+    },
+    plugins: [reactCompiler(), react()],
+});
diff --git a/examples/babel-react-compiler/index.html b/examples/babel-react-compiler/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>react compiler</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script src="./src/index.jsx"></script>
+    </body>
+</html>
diff --git a/examples/babel-react-compiler/package.json b/examples/babel-react-compiler/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "babel-react-compiler",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "private": true,
+  "scripts": {
+    "build": "npx farm build",
+    "start": "npx farm start",
+    "dev": "npm run start"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@farmfe/cli": "^1.0.4",
+    "@farmfe/core": "^1.5.0",
+    "@farmfe/js-plugin-babel": "workspace:*",
+    "@farmfe/js-plugin-react-compiler": "workspace:*",
+    "core-js": "^3.36.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@farmfe/plugin-react": "^1.2.0",
+    "@types/node": "^22.7.4",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.2",
+    "react-refresh": "^0.14.0"
+  }
+}
diff --git a/examples/babel-react-compiler/src/App.jsx b/examples/babel-react-compiler/src/App.jsx
@@ -0,0 +1,18 @@
+import React, { useCallback, useEffect, useState } from 'react';
+
+export default function App() {
+    const [count, setCount] = useState(1);
+
+    useEffect(() => {
+        console.log(count);
+    }, [count]);
+
+    const inc = useCallback(() => setCount(v => v + 1), []);
+
+    return (
+        <div>
+            <h1>hello world {count}</h1>
+            <button onClick={() => inc()}>inc</button>
+        </div>
+    );
+}
diff --git a/examples/babel-react-compiler/src/index.jsx b/examples/babel-react-compiler/src/index.jsx
@@ -0,0 +1,5 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+createRoot(document.getElementById('root')).render(<App />);
diff --git a/js-plugins/babel/README.md b/js-plugins/babel/README.md
@@ -0,0 +1,84 @@
+# @farmfe/js-plugin-babel
+
+farm plugin which support use babel
+
+## Install
+
+```shell
+npm i @farmfe/js-plugin-babel -D
+```
+
+or yarn/pnpm
+
+```shell
+pnpm i @farmfe/js-plugin-babel -D
+```
+
+## Usage
+
+```ts
+// farm.config.ts
+import { babel } from "@farmfe/js-plugin-babel";
+import react from "@farmfe/plugin-react";
+
+defineConfig({
+  plugins: [
+    // transform by compiler, default transform `tsx`, `jsx` files
+    babel(),
+    // transform jsx
+    react(),
+  ],
+});
+```
+
+## Options
+
+### `filters`
+
+- Type: `{ moduleTypes: ModuleType[], resolvedPaths: string[] }`
+- Default:
+
+```ts
+{
+    moduleTypes: ["tsx", "jsx"],
+    resolvedPaths: []
+}
+```
+
+Determines which files to transform
+
+For example, files with the `tsx` extension
+
+```ts
+{
+  resolvedPaths: [".tsx$"];
+}
+```
+
+Or use module types to distinguish
+
+```ts
+{
+  moduleTypes: ["tsx", "jsx"];
+}
+```
+
+The type comes from the return value of the `load` hook and can be customized (`farm` has some default types `js`, `jsx`, `ts`, `tsx`, `css`, `html`, `asset`, `runtime` that can be used directly)
+
+### `transformOptions`
+
+Babel [transform configuration](https://babeljs.io/docs/options)
+
+### `priority`
+
+- Type: `number`
+- Default: `99`
+
+The priority of the farm plugin execution, the higher the priority, the earlier it executes.
+
+### `name`
+
+- Type: `string`
+- Default: `js-plugin:babel`
+
+The name of the farm plugin
diff --git a/js-plugins/babel/farm.config.ts b/js-plugins/babel/farm.config.ts
@@ -0,0 +1,30 @@
+import { defineConfig } from "@farmfe/core";
+import dts from "@farmfe/js-plugin-dts";
+
+export default defineConfig({
+  compilation: {
+    external: ["@farmfe/core", '@babel/core'],
+    input: {
+      index: "./src/index.ts",
+    },
+    output: {
+      targetEnv: "library-node",
+      path: `./dist`,
+      format: "cjs",
+    },
+    partialBundling: {
+      enforceResources: [
+        {
+          name: "index",
+          test: [".+"],
+        },
+      ],
+    },
+    minify: false,
+    sourcemap: true,
+    resolve: {
+      autoExternalFailedResolve: true,
+    },
+  },
+  plugins: [dts()],
+});
diff --git a/js-plugins/babel/package.json b/js-plugins/babel/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "@farmfe/js-plugin-babel",
+  "version": "0.0.1",
+  "description": "",
+  "scripts": {
+    "build": "npm run build:cjs",
+    "build:cjs": "cross-env FARM_FORMAT=cjs farm build",
+    "dev": "npm run build:cjs -- --watch"
+  },
+  "keywords": [
+    "babel",
+    "plugin",
+    "farm",
+    "farmfe",
+    "js",
+    "transform",
+    "bundler",
+    "compiler"
+  ],
+  "author": {
+    "name": "shulandmimi",
+    "email": "sshuang141@163.com",
+    "url": "https://github.com/shulandmimi"
+  },
+  "license": "MIT",
+  "exports": {
+    "require": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "import": "./dist/index.js"
+  },
+  "dependencies": {
+    "@babel/core": "^7.26.0"
+  },
+  "devDependencies": {
+    "@farmfe/cli": "^1.0.4",
+    "@farmfe/core": "^1.5.0",
+    "@farmfe/js-plugin-dts": "^0.6.4",
+    "@types/babel__core": "^7.20.5",
+    "@types/node": "^22.7.4",
+    "cross-env": "^7.0.3"
+  },
+  "peerDependencies": {
+    "@farmfe/core": "^1.5.0"
+  },
+  "files": [
+    "package.json",
+    "README.md",
+    "dist"
+  ]
+}
diff --git a/js-plugins/babel/src/index.ts b/js-plugins/babel/src/index.ts
@@ -0,0 +1,50 @@
+import { transformAsync, type TransformOptions } from "@babel/core";
+import type { ModuleType, JsPlugin } from "@farmfe/core";
+
+export interface NormalizeFilterParams {
+  moduleTypes: ModuleType[];
+  resolvedPaths: string[];
+}
+
+export interface BabelOptions {
+  filters?: Partial<NormalizeFilterParams>;
+  transformOptions?: TransformOptions;
+  /**
+   * the priority of the plugin, large number means first to run
+   * @default 99
+   */
+  priority: number;
+  name?: string;
+}
+
+const defaultFilters: BabelOptions["filters"] = {
+  moduleTypes: ["js", "jsx", "ts", "tsx"],
+  resolvedPaths: [],
+};
+
+export function babel(options: BabelOptions = { priority: 99 }): JsPlugin {
+  return {
+    name: options.name ?? "js-plugin:babel",
+    priority: options.priority,
+
+    processModule: {
+      filters: {
+        moduleTypes: options.filters?.moduleTypes ?? defaultFilters.moduleTypes,
+        resolvedPaths:
+          options.filters?.resolvedPaths ?? defaultFilters.resolvedPaths,
+      },
+      async executor(param) {
+        const { content, moduleId } = param;
+
+        const result = await transformAsync(content, {
+          filename: moduleId,
+          ...options.transformOptions,
+        });
+
+        return {
+          content: result.code,
+        };
+      },
+    },
+  };
+}
diff --git a/js-plugins/babel/tsconfig.json b/js-plugins/babel/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "exclude": ["node_modules"],
+  "include": ["src/**/*"],
+  "compilerOptions": {
+    "noUnusedParameters": false,
+    "noUnusedLocals": false,
+    "outDir": "dist",
+    "rootDir": "src",
+    "lib": ["DOM", "ESNext"],
+    "noImplicitAny": true,
+    "sourceMap": true,
+    "target": "es2020",
+    "module": "ESNext",
+    "declaration": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "skipDefaultLibCheck": true,
+    "skipLibCheck": true,
+    "moduleResolution": "bundler"
+  }
+}