feat: implement basic react tech stack

package.json

@@ -58,6 +58,7 @@
     "trailingComma": "all"
   },
   "dependencies": {
+    "@swc/core": "^1.2.224",
     "@types/hast": "^2.3.4",
     "@umijs/core": "^4.0.9",
     "estree-util-to-js": "^1.1.0",

src/features/compile.ts

@@ -1,7 +1,12 @@
+import ReactTechStack from '@/techStacks/react';
 import type { IApi } from '@/types';
 
 export default (api: IApi) => {
-  api.chainWebpack((memo) => {
+  // register react tech stack by default
+  api.registerTechStack(() => new ReactTechStack());
+
+  // configure loader to compile markdown
+  api.chainWebpack(async (memo) => {
     const babelInUmi = memo.module.rule('src').use('babel-loader').entries();
 
     memo.module

src/techStacks/react.ts

@@ -0,0 +1,69 @@
+import type { IDumiTechStack } from '@/types';
+import {
+  transformSync,
+  type ExportDefaultDeclaration,
+  type ExportDefaultExpression,
+  type ModuleDeclaration,
+} from '@swc/core';
+import Visitor from '@swc/core/Visitor';
+
+/**
+ * swc plugin for replace export to return
+ */
+class ReactDemoVisitor extends Visitor {
+  visitExportDefaultDeclaration(
+    n: ExportDefaultDeclaration,
+  ): ModuleDeclaration {
+    return {
+      type: 'ReturnStatement',
+      span: n.span,
+      argument: n.decl,
+    } as any;
+  }
+
+  visitExportDefaultExpression(n: ExportDefaultExpression): ModuleDeclaration {
+    return {
+      type: 'ReturnStatement',
+      span: n.span,
+      argument: n.expression,
+    } as any;
+  }
+}
+
+export default class ReactTechStack implements IDumiTechStack {
+  name = 'react';
+
+  isSupported(...[, lang]: Parameters<IDumiTechStack['isSupported']>) {
+    return ['jsx', 'tsx'].includes(lang);
+  }
+
+  transformCode(...[raw, opts]: Parameters<IDumiTechStack['transformCode']>) {
+    if (opts.type === 'code-block') {
+      const isTSX = opts.fileAbsPath.endsWith('.tsx');
+      const { code } = transformSync(raw, {
+        jsc: {
+          parser: {
+            syntax: isTSX ? 'typescript' : 'ecmascript',
+            [isTSX ? 'tsx' : 'jsx']: true,
+          },
+          target: 'es2022',
+        },
+        module: {
+          // all imports to require
+          type: 'commonjs',
+          // no __esModule flag
+          importInterop: 'none',
+          // no 'use strict'
+          strictMode: false,
+        },
+        plugin: (m) => new ReactDemoVisitor().visitProgram(m),
+      });
+
+      return `(function () {
+${code}
+})()`;
+    }
+
+    return raw;
+  }
+}