feat: 支持热开发路由

README.md

@@ -92,13 +92,21 @@ tailwindcss将识别plugins目录下的tsx和jsx文件
 
 [查看 开发示例](./example/index.tsx)
 
-> 执行尝试生产html
+> 执行尝试生产 html
 
 ```sh
 npm run css
 npx ts-node ./example/index.ts
 ```
 
+> 热开发图片启动
+
+```sh
+npm run image
+```
+
+[查看 配置示例](./example/routes.tsx)
+
 ## 生成开发文档
 
 ```sh

example/hello.tsx

@@ -6,5 +6,7 @@ export type PropsType = {
   data: DataType
 }
 export default function App({ data }: PropsType) {
-  return <div className="text-red-500 p-2 text-xl">Hello, {data.name}!</div>
+  return (
+    <div className="text-red-500 p-2 text-xl m-80">Hello, {data.name}!</div>
+  )
 }

example/routes.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { type RouterType } from '../image/types.js'
+import Hello from './hello.tsx'
+/**
+ * *********
+ * 该应该放置于插件目录下，
+ * 命名为 routes.jsx
+ * 或 routes.tsx
+ * 启动热开发时，将读取该配置
+ * *********
+ */
+export default [
+  {
+    url: '/',
+    element: <Hello data={{ name: 'word' }}></Hello>
+  }
+] as RouterType

image/main.ts

@@ -0,0 +1,55 @@
+import Koa from 'koa'
+import KoaStatic from 'koa-static'
+import Router from 'koa-router'
+import { Component } from '../src/utils/index.js'
+import { readdirSync } from 'fs'
+import { join } from 'path'
+import './tailwindcss.js'
+
+const Com = new Component()
+const app = new Koa()
+const router = new Router()
+const Port = 8080
+
+// 得到plugins目录
+const flies = readdirSync(join(process.cwd(), 'plugins'), {
+  withFileTypes: true
+}).filter(flie => !flie.isFile())
+
+// 解析路由
+for (const flie of flies) {
+  const plugins = readdirSync(join(flie.path, flie.name), {
+    withFileTypes: true
+  }).filter(flie => flie.isFile())
+  for (const plugin of plugins) {
+    if (/^(routes.jsx|routes.tsx)$/.test(plugin.name)) {
+      const routes = (await import(`file://${join(plugin.path, plugin.name)}`))
+        ?.default
+      if (!routes) continue
+      if (Array.isArray(routes)) {
+        for (const item of routes) {
+          const url = `/${flie.name}${item.url}`
+          console.log(`http://127.0.0.1:${Port}${url}`)
+          router.get(url, ctx => {
+            ctx.body = Com.create(item.element, {
+              ...item.options,
+              html_head: `${item?.html_head ?? ''}<link rel="stylesheet" href="/output.css">`,
+              file_create: false
+            })
+          })
+        }
+      }
+    }
+  }
+}
+
+// static
+app.use(KoaStatic('public'))
+
+// routes
+app.use(router.routes())
+
+// listen 8000
+app.listen(Port, () => {
+  console.log('Server is running on port ' + Port)
+})

image/nodemon.json

@@ -0,0 +1,8 @@
+{
+  "watch": ["plugins"],
+  "ext": "tsx,jsx",
+  "exec": "node --no-warnings=ExperimentalWarning --loader ts-node/esm image/main.ts",
+  "env": {
+    "NODE_ENV": "development"
+  }
+}

image/tailwindcss.ts

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

image/types.ts

@@ -0,0 +1,6 @@
+import { type ComponentCreateOpsionType } from '../src/utils/component.js'
+export type RouterType = {
+  url: string
+  element: React.ReactNode
+  options: ComponentCreateOpsionType
+}[]

package.json

@@ -16,6 +16,7 @@
     "logs": "pm2 logs",
     "monit": "pm2 monit",
     "pm2": "pm2",
+    "image": "nodemon --config image/nodemon.json",
     "docs": "typedoc --options typedoc.json",
     "css": "tailwindcss -i ./src/input.css -o ./public/output.css",
     "format": "prettier --write .",
@@ -53,6 +54,9 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.3",
     "@types/inquirer": "^9.0.7",
+    "@types/koa": "^2.15.0",
+    "@types/koa-router": "^7.4.8",
+    "@types/koa-static": "^4.0.4",
     "@types/lodash": "^4.14.200",
     "@types/node": "^20.8.5",
     "@types/node-schedule": "^2.1.7",
@@ -65,10 +69,13 @@
     "eslint-plugin-n": "^16.6.2",
     "eslint-plugin-promise": "^6.1.1",
     "husky": "^9.0.11",
+    "koa": "^2.15.3",
+    "koa-router": "^12.0.1",
+    "koa-static": "^5.0.0",
     "nodemon": "^3.0.1",
-    "tailwindcss": "^3.4.3",
     "prettier": "^3.0.3",
     "rollup": "^4.16.4",
+    "tailwindcss": "^3.4.3",
     "ts-node": "^10.9.1",
     "typedoc": "^0.25.4",
     "typescript": "^5.0.4"

src/utils/component.ts

@@ -3,7 +3,7 @@ import { renderToString } from 'react-dom/server'
 import { mkdirSync, writeFileSync } from 'fs'
 import { join } from 'path'
 
-type ComponentCreateOpsionType = {
+export type ComponentCreateOpsionType = {
   html_head?: string
   html_name?: string
   join_dir?: string

tailwind.config.js

@@ -1,10 +1,8 @@
-// import { createRequire } from 'module'
-// const require = createRequire(import.meta.url)
 /**
  * @type {import('tailwindcss').Config}
  */
 export default {
-  content: ['./plugins/**/*.{jsx,tsx}', './src/**/*.{jsx,tsx}'],
+  content: ['./plugins/**/*.{jsx,tsx}', './example/**/*.{jsx,tsx}'],
   theme: {
     extend: {}
   },

tsconfig.json

@@ -39,5 +39,5 @@
     "transpileOnly": true,
     "experimentalSpecifierResolution": "node"
   },
-  "include": ["src", "src-koa", "src-image"]
+  "include": ["src", "image", "example"]
 }