feat: react.js&tailwind

.gitignore

@@ -146,7 +146,7 @@ yunzai
 /pnpm-lock.yaml
 /entrypoint.sh
 
-
+# mkdir
 dist
-
 docs
+public

README.md

@@ -14,10 +14,6 @@
 
 推荐使用`18.18.2`版本，如果系统不支持，最低要求`16.14.0`,这是新版`puppeteer`的限制
 
-## 开发者
-
-> [开发相关](./md/developer.md)
-
 ## 使用教程
 
 - 安装源码
@@ -69,3 +65,157 @@ npm run start
 ```sh
 npm run kill
 ```
+
+# 开发者需知
+
+支持TS、TSX环境，提供Miao-Yunzai完全的类型声明及其开发文档。
+
+- 提交
+
+```ts
+/**
+ * feature：新功能
+ * update：更新某功能
+ * fix：修补某功能
+ * refactor：重构某个功能
+ * optimize: 优化构建工具或运行时性能
+ * style：仅样式改动
+ * docs：仅文档新增/改动
+ * chore：构建过程或辅助工具的变动
+ */
+```
+
+- 注释风格
+
+```ts
+/**
+ * 返回false
+ * @param T 任意字符串
+ * @returns false
+ */
+function getTest(T: string) {
+  return false
+}
+```
+
+- 命名风格
+
+```ts
+// 获得test值
+function getTest(T: string) {}
+// 设置
+function setTest(T: string) {}
+// 删除
+function delTest(T: string) {}
+// 获取某数据依据为id
+function getDataById(T: string) {}
+
+// 系统常量
+const ENV_TEST = 'dev'
+
+// 局域常量
+const MyName = 'yunzai'
+
+// 可修改变量
+let values = ''
+
+// 禁止使用 var values = ''
+
+// 声明数组
+const Arr = []
+
+// 不推荐  new
+
+// 声明对象
+const Obj = {}
+
+// 不推荐new
+```
+
+## 关于lib目录
+
+lib目录将在未来逐渐放弃，在版本发布后，开发者需要有意识的对此变化做出调整.
+
+```ts
+// 已废弃
+--lib / puppeteer
+// 无扩展性，计划废弃
+--lib / renderer
+// 非机器人框架的核心处理代码
+// 消耗服务器内存，无扩展性，计划废弃
+--lib / tools / web.js / test.js / log.js / ksr.js
+// 计划废弃
+--renderers
+
+// 其他内容逐步优化。。。
+```
+
+## 新版目录
+
+- 核心源码 src/core
+
+- 配置管理 src/config
+
+- 数据管理 src/db
+
+- 接口板块 src/mys
+
+- 工具类 src/utils
+
+## 新开发示例
+
+- 消息回调
+
+```ts
+import { Messages } from './src/core/index.js'
+const message = new Messages({
+  priority: 9000
+})
+message.response(/^你好/, async e => {
+  e.reply('你好')
+})
+```
+
+- 图片组件
+
+你无需再写原生的html，React将为你进行组件和管理
+
+[学习 React.js](https://react.docschina.org/)
+
+你无需再写原生从css !
+
+tailwindcss将识别plugins目录下的tsx和jsx文件
+
+为你自动生成css , 存放在`./publick/output.css`
+
+[学习 tailwindcss](https://www.tailwindcss.cn/)
+
+> 创建组件
+
+```tsx
+import React from 'react'
+type PropsType = {
+  data: {
+    name: string
+  }
+}
+export default function App({ data }: PropsType) {
+  return <div className="text-red-500 p-2 text-xl">Hello, ${data.name}!</div>
+}
+```
+
+> 渲染数据
+
+```tsx
+import React from 'react'
+import Hello from './hello.tsx'
+const component = <Hello data={{ name: 'word' }} />
+```
+
+## 生成开发文档
+
+```sh
+npm run docs
+```
+
+浏览器打开文件`docs/index.html`

index.js

@@ -1,6 +1,21 @@
-import { spawn } from 'child_process'
+import { exec, spawn } from 'child_process'
 const argv = [...process.argv].splice(2)
 const argvs = argv.join(' ').replace(/(\S+\.js|\S+\.ts)/g, '')
+
+/**
+ * **********
+ * 生成css文件
+ * **********
+ */
+exec(
+  'tailwindcss -i ./src/input.css -o ./public/output.css',
+  (error, stdout, stderr) => {
+    if (error) {
+      //
+    }
+  }
+)
+
 /**
  * ***************
  * 启动内部运行脚本

md/developer.md

@@ -1,117 +0,0 @@
-# 开发者需知
-
-未来将支持TS、TSX环境，提供Miao-Yunzai完全的类型声明及其开发文档。
-
-- 提交
-
-```ts
-/**
- * feature：新功能
- * update：更新某功能
- * fix：修补某功能
- * refactor：重构某个功能
- * optimize: 优化构建工具或运行时性能
- * style：仅样式改动
- * docs：仅文档新增/改动
- * chore：构建过程或辅助工具的变动
- */
-```
-
-- 注释风格
-
-```ts
-/**
- * 返回false
- * @param T 任意字符串
- * @returns false
- */
-function getTest(T: string) {
-  return false
-}
-```
-
-- 命名风格
-
-```ts
-// 获得test值
-function getTest(T: string) {}
-// 设置
-function setTest(T: string) {}
-// 删除
-function delTest(T: string) {}
-// 获取某数据依据为id
-function getDataById(T: string) {}
-
-// 系统常量
-const ENV_TEST = 'dev'
-
-// 局域常量
-const MyName = 'yunzai'
-
-// 可修改变量
-let values = ''
-
-// 禁止使用 var values = ''
-
-// 声明数组
-const Arr = []
-
-// 不推荐  new
-
-// 声明对象
-const Obj = {}
-
-// 不推荐new
-```
-
-## 关于lib目录
-
-lib目录将在未来逐渐放弃，在版本发布后，开发者需要有意识的对此变化做出调整.
-
-```ts
-// 已废弃
---lib / puppeteer
-// 无扩展性，计划废弃
---lib / renderer
-// 非机器人框架的核心处理代码
-// 消耗服务器内存，无扩展性，计划废弃
---lib / tools / web.js / test.js / log.js / ksr.js
-// 计划废弃
---renderers
-
-// 其他内容逐步优化。。。
-```
-
-## 新版目录
-
-- 核心源码
-
-src/core
-
-- 配置管理
-
-src/config
-
-- 数据管理
-
-src/db
-
-- 接口板块
-
-src/mys
-
-- 工具类
-
-src/utils
-
-## 生成开发文档
-
-```sh
-npm run docs
-```
-
-浏览器打开文件`docs/index.html`
-
-## 新开发示例
-
-> [开发示例](./example.md)

md/example.md

@@ -1,83 +0,0 @@
-## 新开发示例
-
-- 消息回调
-
-```ts
-import { Messages } from './src/core/index.js'
-const message = new Messages({
-  priority: 9000
-})
-message.response(/^你好/, async e => {
-  e.reply('你好')
-})
-```
-
-- 图片组件
-
-```tsx
-import React from 'react'
-export default function App() {
-  return (
-    <html>
-      <head>
-        <link rel="stylesheet" href="../css/output.css"></link>
-      </head>
-      <body>
-        <div id="root">
-          <div className="text-red-500 p-2 text-xl">Hello, world!</div>
-        </div>
-      </body>
-    </html>
-  )
-}
-```
-
-```ts
-import React from 'react'
-import { renderToString } from 'react-dom/server'
-import { mkdirSync, writeFileSync } from 'fs'
-import { join } from 'path'
-// puppeteer
-import { Puppeteer } from './puppeteer.ts'
-// component
-import HelloComponent from './hello.tsx'
-//
-class Component {
-  puppeteer: typeof Puppeteer.prototype
-  #dir = ''
-  constructor(dir: string) {
-    this.puppeteer = new Puppeteer()
-    this.#dir = dir
-    mkdirSync(this.#dir, {
-      recursive: true
-    })
-  }
-  /**
-   * 渲染字符串
-   * @param element
-   * @param name
-   * @returns
-   */
-  create(element: React.ReactNode, dirs: string, name: string) {
-    const html = renderToString(element)
-    const dir = join(this.#dir, dirs)
-    mkdirSync(dir, {
-      recursive: true
-    })
-    const address = join(dir, name)
-    writeFileSync(address, `<!DOCTYPE html>${html}`)
-    return address
-  }
-  /**
-   *  hello
-   * @param _
-   * @param name
-   * @returns
-   */
-  hello() {
-    return this.puppeteer.render(
-      this.create(<HelloComponent />, 'hello', 'help.html')
-    )
-  }
-}
-```

package.json

@@ -65,6 +65,7 @@
     "eslint-plugin-promise": "^6.1.1",
     "husky": "^9.0.11",
     "nodemon": "^3.0.1",
+    "tailwindcss": "^3.4.3",
     "prettier": "^3.0.3",
     "rollup": "^4.16.4",
     "ts-node": "^10.9.1",

src/hello.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+type PropsType = {
+  data: {
+    name: string
+  }
+}
+export default function App({ data }: PropsType) {
+  return <div className="text-red-500 p-2 text-xl">Hello, ${data.name}!</div>
+}

src/input.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/utils/component.ts

@@ -0,0 +1,44 @@
+import React from 'react'
+import { renderToString } from 'react-dom/server'
+import { mkdirSync, writeFileSync } from 'fs'
+import { join } from 'path'
+
+type ComponentCreateOpsionType = {
+  html_head?: string
+  html_name?: string
+  join_dir?: string
+  html_body?: string
+}
+
+/**
+ * ************
+ * 组件解析
+ * **********
+ */
+export class Component {
+  #dir = ''
+  constructor() {
+    this.#dir = join(process.cwd(), 'html')
+    mkdirSync(this.#dir, {
+      recursive: true
+    })
+  }
+  /**
+   * 渲染字符串
+   * @param element
+   * @param name
+   * @returns
+   */
+  create(element: React.ReactNode, options: ComponentCreateOpsionType) {
+    const str = renderToString(element)
+    const dir = join(this.#dir, options.join_dir)
+    mkdirSync(dir, { recursive: true })
+    const address = join(dir, options.html_name)
+    const DOCTYPE = '<!DOCTYPE html>'
+    const head = `<head>${options.html_head}</head>`
+    const body = `<body>${str}${options.html_body}</body>`
+    const html = `${DOCTYPE}<html>${head}${body}</html>`
+    writeFileSync(address, html)
+    return address
+  }
+}

src/utils/index.ts

@@ -2,3 +2,4 @@ export * from './config.js'
 export * from './puppeteer.js'
 export * from './types.js'
 export * from './common.js'
+export * from './component.js'

src/utils/types.ts

@@ -1,5 +1,5 @@
-import { type ScreenshotOptions, type PuppeteerLifeCycleEvent } from 'puppeteer'
+// import { type ScreenshotOptions, type PuppeteerLifeCycleEvent } from 'puppeteer'
-import queryString from 'querystring'
+// import queryString from 'querystring'
 
 /**
  *
@@ -16,13 +16,13 @@ export interface ScreenshotFileOptions {
 /**
  *
  */
-export interface ScreenshotUrlOptions {
+// export interface ScreenshotUrlOptions {
-  url: string
+//   url: string
-  time?: number
+//   time?: number
-  rand?: ScreenshotOptions
+//   rand?: ScreenshotOptions
-  params?: queryString.ParsedUrlQueryInput
+//   params?: queryString.ParsedUrlQueryInput
-  tab?: string
+//   tab?: string
-  timeout?: number
+//   timeout?: number
-  cache?: boolean
+//   cache?: boolean
-  waitUntil?: PuppeteerLifeCycleEvent | PuppeteerLifeCycleEvent[]
+//   waitUntil?: PuppeteerLifeCycleEvent | PuppeteerLifeCycleEvent[]
-}
+// }

tailwind.config.js

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

tsconfig.json

@@ -4,14 +4,31 @@
     "module": "ESNext",
     "noImplicitAny": false,
     "esModuleInterop": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "removeComments": true,
     "preserveConstEnums": true,
     "ignoreDeprecations": "5.0",
     "jsx": "react",
+    "noEmit": true,
+    "allowImportingTsExtensions": true,
     "allowJs": false,
     "suppressImplicitAnyIndexErrors": true,
     "typeRoots": ["node_modules/@types"],
+
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+
+    /* Linting */
+    // "strict": true, 严格模式
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
     "paths": {
       "#miao": ["./plugins/miao-plugin/components/index.js"],
       "#miao.models": ["./plugins/miao-plugin/models/index.js"]
@@ -22,6 +39,5 @@
     "transpileOnly": true,
     "experimentalSpecifierResolution": "node"
   },
-  "include": ["plugins", "src"],
+  "include": ["src", "src-koa", "src-image"]
-  "exclude": ["node_modules"]
 }