From c613845eae1a737868c5e1956fa65db4d1a8c49f Mon Sep 17 00:00:00 2001
From: ningmengchongshui <916415899@qq.com>
Date: Mon, 10 Jun 2024 14:10:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E7=83=AD=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91=E8=B7=AF=E7=94=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md              | 10 +++++++-
 example/hello.tsx      |  4 ++-
 example/routes.tsx     | 17 +++++++++++++
 image/main.ts          | 55 ++++++++++++++++++++++++++++++++++++++++++
 image/nodemon.json     |  8 ++++++
 image/tailwindcss.ts   | 14 +++++++++++
 image/types.ts         |  6 +++++
 package.json           |  9 ++++++-
 src/utils/component.ts |  2 +-
 tailwind.config.js     |  4 +--
 tsconfig.json          |  2 +-
 11 files changed, 123 insertions(+), 8 deletions(-)
 create mode 100644 example/routes.tsx
 create mode 100644 image/main.ts
 create mode 100644 image/nodemon.json
 create mode 100644 image/tailwindcss.ts
 create mode 100644 image/types.ts

diff --git a/README.md b/README.md
index 26ae14b..c78684f 100644
--- a/README.md
+++ b/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
diff --git a/example/hello.tsx b/example/hello.tsx
index 7dd4fdc..fe45cb3 100644
--- a/example/hello.tsx
+++ b/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>
+  )
 }
diff --git a/example/routes.tsx b/example/routes.tsx
new file mode 100644
index 0000000..4c8e2ce
--- /dev/null
+++ b/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
diff --git a/image/main.ts b/image/main.ts
new file mode 100644
index 0000000..e3a2672
--- /dev/null
+++ b/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)
+})
diff --git a/image/nodemon.json b/image/nodemon.json
new file mode 100644
index 0000000..98f0093
--- /dev/null
+++ b/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"
+  }
+}
diff --git a/image/tailwindcss.ts b/image/tailwindcss.ts
new file mode 100644
index 0000000..1fb0a71
--- /dev/null
+++ b/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) {
+      //
+    }
+  }
+)
diff --git a/image/types.ts b/image/types.ts
new file mode 100644
index 0000000..ba44fb5
--- /dev/null
+++ b/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
+}[]
diff --git a/package.json b/package.json
index 2b30416..09a4734 100644
--- a/package.json
+++ b/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"
diff --git a/src/utils/component.ts b/src/utils/component.ts
index 77cf9a4..58bedff 100644
--- a/src/utils/component.ts
+++ b/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
diff --git a/tailwind.config.js b/tailwind.config.js
index 5d843d2..8e308fd 100644
--- a/tailwind.config.js
+++ b/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: {}
   },
diff --git a/tsconfig.json b/tsconfig.json
index b25c255..88186d8 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -39,5 +39,5 @@
     "transpileOnly": true,
     "experimentalSpecifierResolution": "node"
   },
-  "include": ["src", "src-koa", "src-image"]
+  "include": ["src", "image", "example"]
 }