refactor: migrate to monorepo & add e2e tests

.github/workflows/ci.yml

@@ -19,23 +19,23 @@ jobs:
       - uses: pnpm/action-setup@v2
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: lts/*
           cache: pnpm
 
       - name: Install
         run: pnpm install
 
       - name: Lint
         run: pnpm run lint
-  
+
   typecheck:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
       - uses: pnpm/action-setup@v2
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: lts/*
           cache: pnpm
 
       - name: Install

.github/workflows/gh-pages.yml

@@ -20,7 +20,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node_version }}
-          cache: 'pnpm'
+          cache: pnpm
 
       - name: Install Dependencies
         run: pnpm install --frozen-lockfile
@@ -32,5 +32,5 @@ jobs:
         uses: peaceiris/actions-gh-pages@v3
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./dist
+          publish_dir: ./packages/react/dist
           force_orphan: true

.github/workflows/playwright.yml

@@ -0,0 +1,34 @@
+name: Playwright Tests
+
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        with:
+          run_install: true
+
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+      - name: Run Playwright tests
+        run: pnpm exec playwright test
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -10,7 +10,6 @@ package-lock.json
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
 /.pnp
 .pnp.js
 
@@ -34,6 +33,11 @@ yarn-error.log*
 # jetbrains
 .idea
 
+node_modules
 dist
 dist-ssr
 *.local
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.npmrc

@@ -1,2 +1,3 @@
 shamefully-hoist=true
 strict-peer-dependencies=false
+ignore-workspace-root-check=true

.vscode/settings.json

@@ -1,32 +1,27 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
 
-    // Enable the ESlint flat config support
-    "eslint.experimental.useFlatConfig": true,
-
-    // Disable the default formatter, use eslint instead
-    "prettier.enable": false,
-    "editor.formatOnSave": false,
-
-    // Auto fix
-    "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": "explicit",
-      "source.organizeImports": "never"
-    },
-
-
-    // Enable eslint for all supported languages
-    "eslint.validate": [
-      "javascript",
-      "javascriptreact",
-      "typescript",
-      "typescriptreact",
-      "vue",
-      "html",
-      "markdown",
-      "json",
-      "jsonc",
-      "yaml",
-      "toml"
-    ]
+  // Enable the ESlint flat config support
+  "eslint.experimental.useFlatConfig": true,
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml"
+  ]
 }

README.md

@@ -19,9 +19,11 @@ Air Conditioner
 
 > 前世今生：[云空调，便携小空调｜云游君的小站](https://www.yunyoujun.cn/posts/air-conditioner/)
 
-- 裸机[main]：[ac.yunyoujun.cn](https://ac.yunyoujun.cn)
-- 测试机[dev]：[ac.yyj.moe](https://ac.yyj.moe)
-- 样板房：<https://www.yunyoujun.cn/air-conditioner-room/>
+| 仓库 | 类型 | 链接 |
+| --- | --- | --- |
+| 裸机 | main | [ac.yunyoujun.cn](https://ac.yunyoujun.cn) |
+| 测试机 | dev | [ac.yyj.moe](https://ac.yyj.moe) |
+| 样板房 | 空调房 | [https://www.yunyoujun.cn/air-conditioner-room/](https://www.yunyoujun.cn/air-conditioner-room/) |
 
 ## Features
 

package.json

@@ -1,21 +1,27 @@
 {
   "name": "air-conditioner",
-  "description": "云空调，便携小空调",
-  "packageManager": "[email protected]",
   "type": "module",
   "version": "0.1.3",
   "private": true,
+  "packageManager": "[email protected]",
+  "description": "云空调，便携小空调",
   "author": {
     "url": "https://www.yunyoujun.cn",
     "email": "[email protected]",
     "name": "YunYouJun"
   },
+  "homepage": "https://ac.yunyoujun.cn/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/YunYouJun/air-conditioner"
+  },
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "serve": "vite preview",
-    "lint": "eslint \"**/*.{tsx,ts,js}\"",
-    "lint:fix": "eslint \"**/*.{tsx,ts,js}\" --fix",
+    "build": "pnpm -r run build",
+    "react:dev": "pnpm -C packages/react run dev",
+    "react:build": "pnpm -C packages/react run build",
+    "vue:dev": "pnpm -C packages/vue run dev",
+    "vue:build": "pnpm -C packages/vue run build",
+    "lint": "eslint .",
     "typecheck": "tsc --noEmit"
   },
   "browserslist": {
@@ -30,40 +36,13 @@
       "last 1 safari version"
     ]
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/YunYouJun/air-conditioner"
-  },
-  "homepage": "https://ac.yunyoujun.cn/",
-  "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-ga": "^3.3.1",
-    "react-gtm-module": "2.0.11",
-    "react-router-dom": "^6.22.0",
-    "sass": "^1.70.0",
-    "web-vitals": "^3.5.2"
-  },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.6.3",
-    "@emotion/react": "^11.11.3",
-    "@emotion/styled": "^11.11.0",
-    "@iconify-json/ic": "^1.1.17",
-    "@iconify-json/mdi": "^1.1.64",
-    "@mui/material": "^5.15.7",
-    "@types/node": "^20.11.16",
-    "@types/react": "^18.2.52",
-    "@types/react-dom": "^18.2.18",
-    "@types/react-gtm-module": "2.0.3",
-    "@types/react-router-dom": "^5.3.3",
-    "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.56.0",
-    "react-transition-group": "^4.4.5",
-    "typescript": "^5.3.3",
-    "unocss": "^0.58.4",
-    "usehooks-ts": "^2.12.1",
-    "vite": "^5.0.12",
-    "vite-plugin-pages": "^0.32.0",
-    "vite-plugin-pwa": "^0.17.5"
+    "@antfu/eslint-config": "^3.11.2",
+    "@iconify-json/ic": "^1.2.1",
+    "@iconify-json/mdi": "^1.2.1",
+    "@playwright/test": "^1.49.0",
+    "@types/node": "^22.10.1",
+    "eslint": "^9.16.0",
+    "typescript": "^5.6.3"
   }
 }

Dockerfile → packages/react/Dockerfile

@@ -10,5 +10,5 @@ RUN pnpm install && npm run build
 FROM nginx:alpine
 
 ENV AC_NGINX_PORT=80 AC_NGINX_DOMAIN=localhost
-COPY --from=builder /app/dist /usr/share/nginx/html
+COPY --from=builder /app/packages/react/dist /usr/share/nginx/html
 EXPOSE 80

packages/react/netlify.toml

@@ -0,0 +1,19 @@
+[build]
+publish = "dist"
+command = "npx pnpm i --store=node_modules/.pnpm-store && npx pnpm run build"
+
+[build.environment]
+# bypass npm auto install
+NPM_FLAGS = "--version"
+NODE_VERSION = "16"
+
+[[redirects]]
+from = "/*"
+to = "/index.html"
+status = 200
+
+[[headers]]
+for = "/manifest.webmanifest"
+
+[headers.values]
+Content-Type = "application/manifest+json"

packages/react/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@air-conditioner/react",
+  "type": "module",
+  "version": "0.1.3",
+  "private": true,
+  "packageManager": "[email protected]",
+  "description": "云空调，便携小空调",
+  "author": {
+    "url": "https://www.yunyoujun.cn",
+    "email": "[email protected]",
+    "name": "YunYouJun"
+  },
+  "homepage": "https://ac.yunyoujun.cn/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/YunYouJun/air-conditioner"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "lint": "eslint \"**/*.{tsx,ts,js}\"",
+    "lint:fix": "eslint \"**/*.{tsx,ts,js}\" --fix",
+    "typecheck": "tsc --noEmit"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-ga": "^3.3.1",
+    "react-gtm-module": "2.0.11",
+    "react-router-dom": "^6.28.0",
+    "sass": "^1.82.0",
+    "web-vitals": "^4.2.4"
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.13.5",
+    "@emotion/styled": "^11.13.5",
+    "@iconify-json/ic": "^1.2.1",
+    "@iconify-json/mdi": "^1.2.1",
+    "@mui/material": "^5.16.9",
+    "@types/react": "^18.3.14",
+    "@types/react-dom": "^18.3.2",
+    "@types/react-gtm-module": "2.0.3",
+    "@types/react-router-dom": "^5.3.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "react-transition-group": "^4.4.5",
+    "unocss": "^0.65.1",
+    "usehooks-ts": "^3.1.0",
+    "vite": "^6.0.3",
+    "vite-plugin-pages": "^0.32.4",
+    "vite-plugin-pwa": "^0.21.1"
+  }
+}

src/App.tsx → packages/react/src/App.tsx

@@ -1,13 +1,13 @@
 import type { FC } from 'react'
 import { Suspense, useEffect } from 'react'
-import './App.scss'
-
 import { BrowserRouter as Router, useRoutes } from 'react-router-dom'
-import pkg from '../package.json'
-import Copyright from '~/components/layouts/Copyright'
 
 // @ts-expect-error vite-plugin-pages
 import routes from '~react-pages'
+import Copyright from '~/components/layouts/Copyright'
+import pkg from '../package.json'
+
+import './App.scss'
 
 /**
  * 控制台输出信息

src/components/Fade.tsx → packages/react/src/components/Fade.tsx

@@ -1,6 +1,6 @@
 import type { TransitionStatus } from 'react-transition-group'
-import { Transition } from 'react-transition-group'
 import React, { useRef } from 'react'
+import { Transition } from 'react-transition-group'
 
 const duration = 300