feat: add defineTechStack api

src/techStacks/utils.ts

@@ -1,5 +1,7 @@
 import type { ParserConfig } from '@swc/core';
 import { transformSync } from '@swc/core';
+import type { Element } from 'hast';
+import { IDumiTechStack } from '../types';
 
 export {
   IDumiTechStack,
@@ -59,3 +61,42 @@ export function wrapDemoWithFn(code: string, opts: IWrapDemoWithFnOptions) {
   ${result.code}
 }`;
 }
+
+export interface IDefineTechStackOptions
+  extends Omit<IDumiTechStack, 'isSupported'> {
+  /**
+   * Is the lang supported by the current tech stack?
+   * @param lang
+   * @param node hast Element https://github.com/syntax-tree/hast?tab=readme-ov-file#element
+   */
+  isSupported: (lang: string, node?: Element) => boolean;
+}
+
+/**
+ * Define a tech stack
+ * @param options techstack options
+ * @returns function that returns {@link IDumiTechStack}, can be used to register a techstack
+ *
+ * @example
+ * const ReactTechStack = defineTechStack({
+ *   name: 'jsx',
+ *   isSupported(lang) {
+ *     return ['jsx', 'tsx'].includes(lang);
+ *   },
+ *   transformCode() {
+ *     // ...
+ *     return '';
+ *   },
+ * });
+ *
+ * api.registerTechStack(ReactTechStack);
+ */
+export function defineTechStack(options: IDefineTechStackOptions) {
+  const isSupported = options.isSupported;
+  return () =>
+    ({
+      ...options,
+      isSupported: (...args: Parameters<IDumiTechStack['isSupported']>) =>
+        isSupported(args[1], args[0]),
+    } satisfies IDumiTechStack);
+}

src/types.ts

@@ -103,7 +103,9 @@ export abstract class IDumiTechStack {
    */
   abstract runtimeOpts?: IDumiTechStackRuntimeOpts;
   /**
-   * transform code
+   * Is the lang supported by the current tech stack?
+   * @param lang
+   * @param node hast Element https://github.com/syntax-tree/hast?tab=readme-ov-file#element
    */
   abstract isSupported(node: Element, lang: string): boolean;
   /**

suites/preset-vue/src/vue/techStack/index.ts

@@ -2,8 +2,8 @@ import { BABEL_STANDALONE_CDN, getPkgPath, getPluginPath } from '@/shared';
 import type { IApi } from 'dumi';
 import { fsExtra } from 'dumi/plugin-utils';
 import { join } from 'path';
-import VueJSXTechStack from './jsx';
-import VueSfcTechStack from './sfc';
+import { VueJSXTechStack } from './jsx';
+import { VueSfcTechStack } from './sfc';
 
 const COMPILE_FILENAME = 'compiler.mjs';
 const RENDERER_FILENAME = 'renderer.mjs';
@@ -54,12 +54,12 @@ export default function registerTechStack(api: IApi) {
   api.register({
     key: 'registerTechStack',
     stage: 0,
-    fn: () => new VueJSXTechStack(runtimeOpts),
+    fn: VueJSXTechStack(runtimeOpts),
   });
 
   api.register({
     key: 'registerTechStack',
     stage: 1,
-    fn: () => new VueSfcTechStack(runtimeOpts),
+    fn: VueSfcTechStack(runtimeOpts),
   });
 }

suites/preset-vue/src/vue/techStack/jsx.ts

@@ -1,62 +1,48 @@
 import { compile } from '@/compiler/node';
-import type {
-  IDumiTechStack,
-  IDumiTechStackOnBlockLoadArgs,
-  IDumiTechStackOnBlockLoadResult,
-  IDumiTechStackRuntimeOpts,
-} from 'dumi/tech-stack-utils';
-import { wrapDemoWithFn } from 'dumi/tech-stack-utils';
+import type { IDumiTechStackRuntimeOpts } from 'dumi/tech-stack-utils';
+import { defineTechStack, wrapDemoWithFn } from 'dumi/tech-stack-utils';
 import hashId from 'hash-sum';
-import type { Element } from 'hast';
 
-export default class VueJSXTechStack implements IDumiTechStack {
-  name = 'vue3-tsx';
-
-  runtimeOpts!: IDumiTechStackRuntimeOpts;
-
-  constructor(runtimeOpts: IDumiTechStackRuntimeOpts) {
-    this.runtimeOpts = runtimeOpts;
-  }
-
-  isSupported(_: Element, lang: string) {
-    return ['jsx', 'tsx'].includes(lang);
-  }
-
-  onBlockLoad(
-    args: IDumiTechStackOnBlockLoadArgs,
-  ): IDumiTechStackOnBlockLoadResult | null {
-    if (!args.path.endsWith('.tsx') && !args.path.endsWith('.jsx')) return null;
-    const { filename } = args;
-    return {
-      type: 'tsx',
-      content: compile({
-        id: filename,
-        filename,
-        code: args.entryPointCode,
-      }) as string,
-    };
-  }
-
-  transformCode(...[raw, opts]: Parameters<IDumiTechStack['transformCode']>) {
-    if (opts.type === 'code-block') {
-      const filename = opts.fileAbsPath;
-
-      const result = compile({
-        id: hashId(raw),
-        filename,
-        code: raw,
-      }) as string;
-
-      if (result) {
-        const code = wrapDemoWithFn(result, {
+export const VueJSXTechStack = (runtimeOpts: IDumiTechStackRuntimeOpts) =>
+  defineTechStack({
+    name: 'vue3-tsx',
+    runtimeOpts,
+    isSupported(lang: string) {
+      return ['jsx', 'tsx'].includes(lang);
+    },
+    onBlockLoad(args) {
+      if (!args.path.endsWith('.tsx') && !args.path.endsWith('.jsx'))
+        return null;
+      const { filename } = args;
+      return {
+        type: 'tsx',
+        content: compile({
+          id: filename,
+          filename,
+          code: args.entryPointCode,
+        }) as string,
+      };
+    },
+    transformCode(raw, opts) {
+      if (opts.type === 'code-block') {
+        const filename = opts.fileAbsPath;
+
+        const result = compile({
+          id: hashId(raw),
           filename,
-          parserConfig: {
-            syntax: 'ecmascript',
-          },
-        });
-        return `(${code})()`;
+          code: raw,
+        }) as string;
+
+        if (result) {
+          const code = wrapDemoWithFn(result, {
+            filename,
+            parserConfig: {
+              syntax: 'ecmascript',
+            },
+          });
+          return `(${code})()`;
+        }
       }
-    }
-    return raw;
-  }
-}
+      return raw;
+    },
+  });

suites/preset-vue/src/vue/techStack/sfc.ts

@@ -1,61 +1,47 @@
 import { compile, compiler } from '@/compiler/node';
-import type {
-  IDumiTechStack,
-  IDumiTechStackOnBlockLoadArgs,
-  IDumiTechStackOnBlockLoadResult,
-  IDumiTechStackRuntimeOpts,
-} from 'dumi/tech-stack-utils';
-import { wrapDemoWithFn } from 'dumi/tech-stack-utils';
+import type { IDumiTechStackRuntimeOpts } from 'dumi/tech-stack-utils';
+import { defineTechStack, wrapDemoWithFn } from 'dumi/tech-stack-utils';
 import hashId from 'hash-sum';
-import type { Element } from 'hast';
 import { logger } from 'umi/plugin-utils';
 
-export default class VueSfcTechStack implements IDumiTechStack {
-  name = 'vue3-sfc';
-  runtimeOpts!: IDumiTechStackRuntimeOpts;
-
-  constructor(runtimeOpts: IDumiTechStackRuntimeOpts) {
-    this.runtimeOpts = runtimeOpts;
-  }
-
-  isSupported(_: Element, lang: string) {
-    return ['vue'].includes(lang);
-  }
-
-  onBlockLoad(
-    args: IDumiTechStackOnBlockLoadArgs,
-  ): IDumiTechStackOnBlockLoadResult | null {
-    if (!args.path.endsWith('.vue')) return null;
-    const result = compiler.compileSFC({
-      id: args.path,
-      code: args.entryPointCode,
-      filename: args.filename,
-    });
-    return {
-      type: 'tsx',
-      content: Array.isArray(result) ? '' : result.js,
-    };
-  }
+export const VueSfcTechStack = (runtimeOpts: IDumiTechStackRuntimeOpts) =>
+  defineTechStack({
+    name: 'vue3-sfc',
+    runtimeOpts,
+    isSupported(lang: string) {
+      return ['vue'].includes(lang);
+    },
+    onBlockLoad(args) {
+      if (!args.path.endsWith('.vue')) return null;
+      const result = compiler.compileSFC({
+        id: args.path,
+        code: args.entryPointCode,
+        filename: args.filename,
+      });
+      return {
+        type: 'tsx',
+        content: Array.isArray(result) ? '' : result.js,
+      };
+    },
+    transformCode(raw, opts) {
+      if (opts.type === 'code-block') {
+        const filename = opts.fileAbsPath;
+        const id = hashId(raw);
 
-  transformCode(...[raw, opts]: Parameters<IDumiTechStack['transformCode']>) {
-    if (opts.type === 'code-block') {
-      const filename = opts.fileAbsPath;
-      const id = hashId(raw);
+        const js = compile({ id, filename, code: raw });
+        if (Array.isArray(js)) {
+          logger.error(js);
+          return '';
+        }
 
-      const js = compile({ id, filename, code: raw });
-      if (Array.isArray(js)) {
-        logger.error(js);
-        return '';
+        const code = wrapDemoWithFn(js, {
+          filename,
+          parserConfig: {
+            syntax: 'ecmascript',
+          },
+        });
+        return `(${code})()`;
       }
-
-      const code = wrapDemoWithFn(js, {
-        filename,
-        parserConfig: {
-          syntax: 'ecmascript',
-        },
-      });
-      return `(${code})()`;
-    }
-    return raw;
-  }
-}
+      return raw;
+    },
+  });