feat(eval): support jsx loaders

packages/plugin-eval/package.json

@@ -36,16 +36,19 @@
     "koishi-core": "^3.9.1"
   },
   "optionalDependencies": {
+    "@babel/core": "^7.13.15",
+    "@babel/plugin-transform-react-jsx": "^7.13.12",
+    "coffeescript": "^2.5.1",
     "esbuild": "^0.11.6",
     "json5": "^2.2.0",
-    "typescript": "^4.2.3",
-    "coffeescript": "^2.5.1"
+    "typescript": "^4.2.3"
   },
   "dependencies": {
     "js-yaml": "^4.0.0",
     "simple-git": "^2.37.0"
   },
   "devDependencies": {
+    "@types/babel__core": "^7.1.14",
     "@types/js-yaml": "^4.0.0",
     "koishi-test-utils": "^6.0.0-beta.11"
   }

packages/plugin-eval/src/loaders/coffeescript.ts

@@ -1,7 +1,25 @@
-const { compile } = require('coffeescript')
+import { compile } from 'coffeescript'
+import { transformAsync, TransformOptions } from '@babel/core'
+import { LoaderConfig } from '../worker'
 
 export const name = 'coffeescript'
 
+const options: TransformOptions = {
+  sourceMaps: 'inline',
+  plugins: [],
+}
+
+export function prepare(config: LoaderConfig) {
+  if (config.jsxFactory) {
+    options.plugins.push(['@babel/plugin-transform-react-jsx', {
+      pragma: config.jsxFactory,
+      pragmaFrag: config.jsxFragment,
+      useBuiltIns: true,
+      useSpread: true,
+    }])
+  }
+}
+
 export function extractScript(expr: string) {
   try {
     compile(expr)
@@ -16,7 +34,9 @@ export function extractScript(expr: string) {
 }
 
 export async function transformScript(expr: string) {
-  return compile(expr, { bare: true })
+  const raw = compile(expr, { bare: true })
+  const { code } = await transformAsync(raw, options)
+  return code
 }
 
 export const transformModule = transformScript

packages/plugin-eval/src/loaders/esbuild.ts

@@ -1,16 +1,26 @@
-import esbuild from 'esbuild'
+import { transformSync, transform, Message, TransformOptions } from 'esbuild'
+import { LoaderConfig } from '../worker'
 
 export const name = 'typescript'
 
+const options: TransformOptions = {
+  sourcemap: 'inline',
+  loader: 'ts',
+  charset: 'utf8',
+  target: 'es2020',
+}
+
+export function prepare(config: LoaderConfig) {
+  if (config.jsxFactory) options.loader = 'tsx'
+  options.jsxFactory = config.jsxFactory
+  options.jsxFragment = config.jsxFragment
+}
+
 export function extractScript(expr: string) {
   try {
-    esbuild.transformSync(expr, {
-      loader: 'ts',
-      charset: 'utf8',
-      target: 'es2020',
-    })
+    transformSync(expr, options)
   } catch (e) {
-    const [{ location, text }] = e.errors as esbuild.Message[]
+    const [{ location, text }] = e.errors as Message[]
     if (text === 'Unexpected "}"') {
       const sLines = expr.split('\n')
       return [...sLines.slice(0, location.line - 1), location.lineText.slice(0, location.column)].join('\n')
@@ -20,15 +30,10 @@ export function extractScript(expr: string) {
 
 export async function transformScript(expr: string) {
   try {
-    const { code } = await esbuild.transform(expr, {
-      sourcemap: 'inline',
-      loader: 'ts',
-      charset: 'utf8',
-      target: 'es2020',
-    })
+    const { code } = await transform(expr, options)
     return code
   } catch (e) {
-    const [{ location, text }] = e.errors as esbuild.Message[]
+    const [{ location, text }] = e.errors as Message[]
     throw new Error(`${text}\n    at stdin:${location.line}:${location.column}`)
   }
 }

packages/plugin-eval/src/loaders/json+yaml.ts → packages/plugin-eval/src/loaders/markup.ts

@@ -1,6 +1,6 @@
 import { load } from 'js-yaml'
 
-export const name = 'json+yaml'
+export const name = 'synthetize'
 export const synthetize = true
 
 export function transformModule(source: string, extension: string) {

packages/plugin-eval/src/loaders/typescript.ts

@@ -1,7 +1,7 @@
 import ts from 'typescript'
 import json5 from 'json5'
 import { promises as fs } from 'fs'
-import { WorkerData } from '../worker'
+import { LoaderConfig } from '../worker'
 import { resolve } from 'path'
 import { Logger } from 'koishi-utils'
 
@@ -15,9 +15,12 @@ const compilerOptions: ts.CompilerOptions = {
   target: ts.ScriptTarget.ES2020,
 }
 
-export async function prepare(config: WorkerData) {
+export async function prepare(config: LoaderConfig, root: string) {
+  compilerOptions.jsxFactory = config.jsxFactory
+  compilerOptions.jsxFragmentFactory = config.jsxFragment
+  if (!root) return
   const logger = new Logger('eval:loader')
-  const tsconfigPath = resolve(config.root, 'tsconfig.json')
+  const tsconfigPath = resolve(root, 'tsconfig.json')
   return fs.readFile(tsconfigPath, 'utf8').then((tsconfig) => {
     Object.assign(compilerOptions, json5.parse(tsconfig))
   }, () => {

packages/plugin-eval/src/worker/loader.ts

@@ -165,8 +165,8 @@ function resolveLoader(extension: string) {
   } else if (extension === '.js') {
     return require('../loaders/default')
   } else if (extension === '.json' || extension === '.yml' || extension === '.yaml') {
-    return require('../loaders/json+yaml')
-  } else if (extension === '.ts') {
+    return require('../loaders/markup')
+  } else if (extension === '.ts' || extension === '.jsx' || extension === '.tsx') {
     for (const filename of ['esbuild', 'typescript']) {
       try {
         return require('../loaders/' + filename)