feature: 支持引入模块外的文件

image/main.ts

@@ -5,14 +5,17 @@ import './tailwindcss.js'
 import Koa from 'koa'
 import KoaStatic from 'koa-static'
 import Router from 'koa-router'
-import { Component } from 'yunzai/utils'
+import { Component, createRequire } from 'yunzai/utils'
 import { readdirSync } from 'fs'
 import { join } from 'path'
+import mount from 'koa-mount'
+const require = createRequire(import.meta.url)
 
 const Com = new Component()
 const app = new Koa()
 const router = new Router()
 const Port = 8080
+const PATH = process.cwd()
 
 // 得到plugins目录
 const flies = readdirSync(join(process.cwd(), 'plugins'), {
@@ -40,11 +43,17 @@ for (const flie of flies) {
           console.log(`http://127.0.0.1:${Port}${url}`)
           const options = item?.options ?? {}
           router.get(url, ctx => {
-            ctx.body = Com.create(item.element, {
+            const href = require('../public/output.css')
+            const HTML = Com.create(item.element, {
               ...options,
-              html_head: `${options?.html_head ?? ''}<link rel="stylesheet" href="/output.css">`,
+              html_head: `${options?.html_head ?? ''}<link rel="stylesheet" href="${href}">`,
               file_create: false
             })
+            // 转义路径中的所有反斜杠
+            const escapedPath = PATH.replace(/\\/g, '\\\\')
+            // 创建一个正则表达式，'g' 表示全局匹配
+            const regex = new RegExp(escapedPath, 'g')
+            ctx.body = HTML.replace(regex, '/file')
           })
         }
       }
@@ -53,7 +62,7 @@ for (const flie of flies) {
 }
 
 // static
-app.use(KoaStatic('public'))
+app.use(mount('/file', KoaStatic(PATH)))
 
 // routes
 app.use(router.routes())

image/tailwindcss.ts

@@ -1,14 +1,7 @@
-import { exec } from 'child_process'
+import { execSync } from 'child_process'
 /**
  * **********
  * 生成css文件
  * **********
  */
-exec(
+execSync('tailwindcss -i ./src/input.css -o ./public/output.css --watch')
-  'tailwindcss -i ./src/input.css -o ./public/output.css --watch',
-  (error, _, __) => {
-    if (error) {
-      //
-    }
-  }
-)

index.js

@@ -1,4 +1,4 @@
-import { exec, spawn } from 'child_process'
+import { execSync, spawn } from 'child_process'
 const argv = [...process.argv].splice(2)
 const argvs = argv.join(' ').replace(/(\S+\.js|\S+\.ts)/g, '')
 
@@ -7,14 +7,7 @@ const argvs = argv.join(' ').replace(/(\S+\.js|\S+\.ts)/g, '')
  * 生成css文件
  * **********
  */
-exec(
+execSync('tailwindcss -i ./src/input.css -o ./public/output.css')
-  'tailwindcss -i ./src/input.css -o ./public/output.css',
-  (error, _, __) => {
-    if (error) {
-      //
-    }
-  }
-)
 
 /**
  * ***************

package.json

@@ -31,6 +31,7 @@
     "icqq": "^0.6.10",
     "image-size": "^1.1.1",
     "inquirer": "^9.2.16",
+    "koa-mount": "^4.0.0",
     "lodash": "^4.17.21",
     "log4js": "^6.9.1",
     "md5": "^2.3.0",
@@ -39,7 +40,7 @@
     "node-schedule": "^2.1.1",
     "oicq": "^2.3.1",
     "pm2": "^5.3.1",
-    "puppeteer": "*",
+    "puppeteer": "^22.11.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "redis": "^4.6.13",
@@ -59,6 +60,7 @@
     "@types/lodash": "^4.14.200",
     "@types/node": "^20.8.5",
     "@types/node-schedule": "^2.1.7",
+    "@types/koa-mount": "^4.0.5",
     "@types/react-dom": "^18.2.22",
     "@types/redis": "^4.0.11",
     "@types/ws": "^8.5.7",

src/db/BaseModel.ts

@@ -1,5 +1,5 @@
 import { Sequelize, DataTypes, Model } from 'sequelize'
-import { Data } from '#miao'
+import { Data } from '../miao.js'
 
 Data.createDir('/data/db', 'root')
 

src/miao.ts

@@ -1,63 +1,2 @@
 export { Common, Data, Version } from '#miao'
 export { Character, Weapon } from '#miao.models'
-// import lodash from 'lodash'
-// import { existsSync, mkdirSync } from 'node:fs'
-// import util from 'node:util'
-
-// const rootPath = process.cwd()
-// const _path = rootPath
-
-// const getRoot = (root = '') => {
-//     if (!root) {
-//         root = `${_path}/`
-//     } else if (root === 'root' || root === 'yunzai') {
-//         root = `${_path}/`
-//     } else if (root === 'miao') {
-//         root = `${_path}/plugins/miao-plugin/`
-//     } else {
-//         root = `${_path}/plugins/${root}/`
-//     }
-//     return root
-// }
-
-// export const Data = {
-//     //
-//     createDir(path = '', root = '', includeFile = false) {
-//         root = getRoot(root)
-//         let pathList = path.split('/')
-//         let nowPath = root
-//         pathList.forEach((name, idx) => {
-//             name = name.trim()
-//             if (!includeFile && idx <= pathList.length - 1) {
-//                 nowPath += name + '/'
-//                 if (name) {
-//                     if (!existsSync(nowPath)) {
-//                         mkdirSync(nowPath)
-//                     }
-//                 }
-//             }
-//         })
-//     },
-//     isPromise(data) {
-//         return util.types.isPromise(data)
-//     },
-//     async forEach(data, fn) {
-//         if (lodash.isArray(data)) {
-//             for (let idx = 0; idx < data.length; idx++) {
-//                 let ret = fn(data[idx], idx)
-//                 ret = Data.isPromise(ret) ? await ret : ret
-//                 if (ret === false) {
-//                     break
-//                 }
-//             }
-//         } else if (lodash.isPlainObject(data)) {
-//             for (const idx in data) {
-//                 let ret = fn(data[idx], idx)
-//                 ret = Data.isPromise(ret) ? await ret : ret
-//                 if (ret === false) {
-//                     break
-//                 }
-//             }
-//         }
-//     }
-// }

src/utils/component.ts

@@ -2,7 +2,8 @@ import React from 'react'
 import { renderToString } from 'react-dom/server'
 import { mkdirSync, writeFileSync } from 'fs'
 import { join } from 'path'
-
+import { createRequire } from './module.js'
+const require = createRequire(import.meta.url)
 /**
  *
  */
@@ -41,8 +42,9 @@ export class Component {
     const dir = join(this.#dir, options?.join_dir ?? '')
     mkdirSync(dir, { recursive: true })
     const address = join(dir, options?.html_name ?? 'hello.html')
+    const href = require('../../public/output.css')
     const DOCTYPE = '<!DOCTYPE html>'
-    const Link = `<link rel="stylesheet" href="../public/output.css"></link>`
+    const Link = `<link rel="stylesheet" href="${href}"></link>`
     const head = `<head>${options?.html_head ?? Link}</head>`
     const body = `<body> ${str} ${options?.html_body ?? ''}</body>`
     const html = `${DOCTYPE}<html>${head}${body}</html>`

src/utils/index.ts

@@ -3,6 +3,7 @@ export * from './puppeteer.js'
 export * from './types.js'
 export * from './common.js'
 export * from './component.js'
+export * from './module.js'
 /**
  * 旧版本兼容性方法
  */

src/utils/module.ts

@@ -0,0 +1,20 @@
+import { createRequire as cRequire } from 'module'
+import path from 'path'
+/**
+ * 加载指定资源的本地路径
+ * @param basePath 引入模块地址
+ * @param customExtensions ['.css', '.png', '.jpg', '.less', '.scss']
+ * @returns
+ */
+export function createRequire(
+  basePath,
+  customExtensions = ['.css', '.png', '.jpg', '.less', '.scss']
+) {
+  const require = cRequire(basePath)
+  customExtensions.forEach(ext => {
+    require.extensions[ext] = (module, filename) => {
+      module.exports = path.resolve(filename)
+    }
+  })
+  return require
+}

src/yunzai-env.d.ts

@@ -0,0 +1,242 @@
+// CSS modules
+type CSSModuleClasses = { readonly [key: string]: string }
+
+declare module '*.module.css' {
+  const classes: CSSModuleClasses
+  export default classes
+}
+declare module '*.module.scss' {
+  const classes: CSSModuleClasses
+  export default classes
+}
+declare module '*.module.sass' {
+  const classes: CSSModuleClasses
+  export default classes
+}
+declare module '*.module.less' {
+  const classes: CSSModuleClasses
+  export default classes
+}
+declare module '*.module.styl' {
+  const classes: CSSModuleClasses
+  export default classes
+}
+declare module '*.module.stylus' {
+  const classes: CSSModuleClasses
+  export default classes
+}
+declare module '*.module.pcss' {
+  const classes: CSSModuleClasses
+  export default classes
+}
+declare module '*.module.sss' {
+  const classes: CSSModuleClasses
+  export default classes
+}
+
+// CSS
+declare module '*.css' {}
+declare module '*.scss' {}
+declare module '*.sass' {}
+declare module '*.less' {}
+declare module '*.styl' {}
+declare module '*.stylus' {}
+declare module '*.pcss' {}
+declare module '*.sss' {}
+
+// Built-in asset types
+// see `src/node/constants.ts`
+
+// images
+declare module '*.apng' {
+  const src: string
+  export default src
+}
+declare module '*.png' {
+  const src: string
+  export default src
+}
+declare module '*.jpg' {
+  const src: string
+  export default src
+}
+declare module '*.jpeg' {
+  const src: string
+  export default src
+}
+declare module '*.jfif' {
+  const src: string
+  export default src
+}
+declare module '*.pjpeg' {
+  const src: string
+  export default src
+}
+declare module '*.pjp' {
+  const src: string
+  export default src
+}
+declare module '*.gif' {
+  const src: string
+  export default src
+}
+declare module '*.svg' {
+  const src: string
+  export default src
+}
+declare module '*.ico' {
+  const src: string
+  export default src
+}
+declare module '*.webp' {
+  const src: string
+  export default src
+}
+declare module '*.avif' {
+  const src: string
+  export default src
+}
+
+// media
+declare module '*.mp4' {
+  const src: string
+  export default src
+}
+declare module '*.webm' {
+  const src: string
+  export default src
+}
+declare module '*.ogg' {
+  const src: string
+  export default src
+}
+declare module '*.mp3' {
+  const src: string
+  export default src
+}
+declare module '*.wav' {
+  const src: string
+  export default src
+}
+declare module '*.flac' {
+  const src: string
+  export default src
+}
+declare module '*.aac' {
+  const src: string
+  export default src
+}
+declare module '*.opus' {
+  const src: string
+  export default src
+}
+declare module '*.mov' {
+  const src: string
+  export default src
+}
+declare module '*.m4a' {
+  const src: string
+  export default src
+}
+declare module '*.vtt' {
+  const src: string
+  export default src
+}
+
+// fonts
+declare module '*.woff' {
+  const src: string
+  export default src
+}
+declare module '*.woff2' {
+  const src: string
+  export default src
+}
+declare module '*.eot' {
+  const src: string
+  export default src
+}
+declare module '*.ttf' {
+  const src: string
+  export default src
+}
+declare module '*.otf' {
+  const src: string
+  export default src
+}
+
+// other
+declare module '*.webmanifest' {
+  const src: string
+  export default src
+}
+declare module '*.pdf' {
+  const src: string
+  export default src
+}
+declare module '*.txt' {
+  const src: string
+  export default src
+}
+
+// wasm?init
+declare module '*.wasm?init' {
+  const initWasm: (
+    options?: WebAssembly.Imports
+  ) => Promise<WebAssembly.Instance>
+  export default initWasm
+}
+
+// web worker
+declare module '*?worker' {
+  const workerConstructor: {
+    new (options?: { name?: string }): Worker
+  }
+  export default workerConstructor
+}
+
+declare module '*?worker&inline' {
+  const workerConstructor: {
+    new (options?: { name?: string }): Worker
+  }
+  export default workerConstructor
+}
+
+declare module '*?worker&url' {
+  const src: string
+  export default src
+}
+
+declare module '*?sharedworker' {
+  const sharedWorkerConstructor: {
+    new (options?: { name?: string }): SharedWorker
+  }
+  export default sharedWorkerConstructor
+}
+
+declare module '*?sharedworker&inline' {
+  const sharedWorkerConstructor: {
+    new (options?: { name?: string }): SharedWorker
+  }
+  export default sharedWorkerConstructor
+}
+
+declare module '*?sharedworker&url' {
+  const src: string
+  export default src
+}
+
+declare module '*?raw' {
+  const src: string
+  export default src
+}
+
+declare module '*?url' {
+  const src: string
+  export default src
+}
+
+declare module '*?inline' {
+  const src: string
+  export default src
+}