From 2fe86fd86937b47969447d91bb987b7e0233afd5 Mon Sep 17 00:00:00 2001 From: tamaina Date: Tue, 20 Dec 2022 13:05:36 +0900 Subject: [PATCH] enhance: Vite HMR while yarn dev, and more build tuning (#9361) * enhance: Vite HMR while yarn dev, and more build tuning * use localhost Co-authored-by: syuilo --- CONTRIBUTING.md | 14 +++++-- package.json | 3 +- packages/backend/package.json | 1 + packages/backend/src/config.ts | 7 +++- .../src/server/web/ClientServerService.ts | 22 +++++++++-- packages/backend/src/server/web/boot.js | 2 +- .../backend/src/server/web/views/base.pug | 9 +++-- packages/client/package.json | 2 +- .../src/components/MkFileListForAdmin.vue | 1 - packages/client/src/pages/admin/overview.vue | 2 - packages/client/vite.config.ts | 9 ++--- scripts/build-pre.js | 5 +++ scripts/clean-all.js | 1 + scripts/dev.js | 10 +++++ yarn.lock | 37 ++++++++++++++++++- 15 files changed, 102 insertions(+), 23 deletions(-) create mode 100644 scripts/build-pre.js diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 36a4feb7e0..4689543d50 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -99,9 +99,17 @@ If your language is not listed in Crowdin, please open an issue. ![Crowdin](https://d322cqt584bo4o.cloudfront.net/misskey/localized.svg) ## Development -During development, it is useful to use the `yarn dev` command. -This command monitors the server-side and client-side source files and automatically builds them if they are modified. -In addition, it will also automatically start the Misskey server process. +During development, it is useful to use the + +``` +yarn dev +``` + +command. + +- Server-side source files and automatically builds them if they are modified. Automatically start the server process(es). +- Vite HMR (just the `vite` command) is available. The behavior may be different from production. +- Service Worker is watched by esbuild. ## Testing - Test codes are located in [`/test`](/test). diff --git a/package.json b/package.json index 01aabc099b..1090c8eb1c 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,8 @@ ], "private": true, "scripts": { - "build": "yarn workspaces foreach run build && yarn run gulp", + "build-pre": "node ./scripts/build-pre.js", + "build": "yarn build-pre && yarn workspaces foreach run build && yarn run gulp", "start": "cd packages/backend && node ./built/boot/index.js", "start:test": "cd packages/backend && cross-env NODE_ENV=test node ./built/boot/index.js", "init": "yarn migrate", diff --git a/packages/backend/package.json b/packages/backend/package.json index ae39fd591c..b4cf30d359 100644 --- a/packages/backend/package.json +++ b/packages/backend/package.json @@ -28,6 +28,7 @@ "@fastify/accepts": "4.1.0", "@fastify/cookie": "^8.3.0", "@fastify/cors": "8.2.0", + "@fastify/http-proxy": "^8.4.0", "@fastify/multipart": "7.3.0", "@fastify/static": "6.6.0", "@fastify/view": "7.3.0", diff --git a/packages/backend/src/config.ts b/packages/backend/src/config.ts index 11d8db5c04..025d7acdeb 100644 --- a/packages/backend/src/config.ts +++ b/packages/backend/src/config.ts @@ -91,6 +91,7 @@ export type Mixin = { driveUrl: string; userAgent: string; clientEntry: string; + clientManifestExists: boolean; }; export type Config = Source & Mixin; @@ -112,7 +113,10 @@ const path = process.env.NODE_ENV === 'test' export function loadConfig() { const meta = JSON.parse(fs.readFileSync(`${_dirname}/../../../built/meta.json`, 'utf-8')); - const clientManifest = JSON.parse(fs.readFileSync(`${_dirname}/../../../built/_client_dist_/manifest.json`, 'utf-8')); + const clientManifestExists = fs.existsSync(_dirname + '/../../../built/_vite_/manifest.json') + const clientManifest = clientManifestExists ? + JSON.parse(fs.readFileSync(`${_dirname}/../../../built/_vite_/manifest.json`, 'utf-8')) + : { 'src/init.ts': { file: 'src/init.ts' } }; const config = yaml.load(fs.readFileSync(path, 'utf-8')) as Source; const mixin = {} as Mixin; @@ -134,6 +138,7 @@ export function loadConfig() { mixin.driveUrl = `${mixin.scheme}://${mixin.host}/files`; mixin.userAgent = `Misskey/${meta.version} (${config.url})`; mixin.clientEntry = clientManifest['src/init.ts']; + mixin.clientManifestExists = clientManifestExists; if (!config.redis.prefix) config.redis.prefix = mixin.host; diff --git a/packages/backend/src/server/web/ClientServerService.ts b/packages/backend/src/server/web/ClientServerService.ts index 58452ae826..c537d9a369 100644 --- a/packages/backend/src/server/web/ClientServerService.ts +++ b/packages/backend/src/server/web/ClientServerService.ts @@ -12,6 +12,7 @@ import { In, IsNull } from 'typeorm'; import fastifyStatic from '@fastify/static'; import fastifyView from '@fastify/view'; import fastifyCookie from '@fastify/cookie'; +import fastifyProxy from '@fastify/http-proxy'; import type { Config } from '@/config.js'; import { getNoteSummary } from '@/misc/get-note-summary.js'; import { DI } from '@/di-symbols.js'; @@ -39,6 +40,7 @@ const staticAssets = `${_dirname}/../../../assets/`; const clientAssets = `${_dirname}/../../../../client/assets/`; const assets = `${_dirname}/../../../../../built/_client_dist_/`; const swAssets = `${_dirname}/../../../../../built/_sw_dist_/`; +const viteOut = `${_dirname}/../../../../../built/_vite_/`; @Injectable() export class ClientServerService { @@ -151,9 +153,6 @@ export class ClientServerService { }, defaultContext: { version: this.config.version, - getClientEntry: () => process.env.NODE_ENV === 'production' ? - this.config.clientEntry : - JSON.parse(readFileSync(`${_dirname}/../../../../../built/_client_dist_/manifest.json`, 'utf-8'))['src/init.ts'], config: this.config, }, }); @@ -164,6 +163,23 @@ export class ClientServerService { done(); }); + //#region vite assets + if (this.config.clientManifestExists) { + fastify.register(fastifyStatic, { + root: viteOut, + prefix: '/vite/', + maxAge: ms('30 days'), + decorateReply: false, + }); + } else { + fastify.register(fastifyProxy, { + upstream: 'http://localhost:5173', // TODO: port configuration + prefix: '/vite', + rewritePrefix: '/vite', + }); + } + //#endregion + //#region static assets fastify.register(fastifyStatic, { diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js index ffd8b8941c..86df3308ec 100644 --- a/packages/backend/src/server/web/boot.js +++ b/packages/backend/src/server/web/boot.js @@ -57,7 +57,7 @@ //#region Script function importAppScript() { - import(`/assets/${CLIENT_ENTRY}`) + import(`/vite/${CLIENT_ENTRY}`) .catch(async e => { await checkUpdate(); console.error(e); diff --git a/packages/backend/src/server/web/views/base.pug b/packages/backend/src/server/web/views/base.pug index 1b3ac82d2e..0c3c5c9b7e 100644 --- a/packages/backend/src/server/web/views/base.pug +++ b/packages/backend/src/server/web/views/base.pug @@ -1,7 +1,7 @@ block vars block loadClientEntry - - const clientEntry = getClientEntry(); + - const clientEntry = config.clientEntry; doctype html @@ -35,11 +35,14 @@ html link(rel='prefetch' href='https://xn--931a.moe/assets/not-found.jpg') link(rel='prefetch' href='https://xn--931a.moe/assets/error.jpg') link(rel='stylesheet' href='/assets/tabler-icons/tabler-icons.css') - link(rel='modulepreload' href=`/assets/${clientEntry.file}`) + link(rel='modulepreload' href=`/vite/${clientEntry.file}`) + + if !config.clientManifestExists + script(type="module" src="/vite/@vite/client") if Array.isArray(clientEntry.css) each href in clientEntry.css - link(rel='stylesheet' href=`/assets/${href}`) + link(rel='stylesheet' href=`/vite/${href}`) title block title diff --git a/packages/client/package.json b/packages/client/package.json index 6ed9c5d1fe..87ef6e3638 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -2,7 +2,7 @@ "name": "client", "private": true, "scripts": { - "watch": "vite build --watch --mode development", + "watch": "vite", "build": "vite build", "lint": "vue-tsc --noEmit && eslint --quiet \"src/**/*.{ts,vue}\"" }, diff --git a/packages/client/src/components/MkFileListForAdmin.vue b/packages/client/src/components/MkFileListForAdmin.vue index b6429eaf8d..4910506a95 100644 --- a/packages/client/src/components/MkFileListForAdmin.vue +++ b/packages/client/src/components/MkFileListForAdmin.vue @@ -34,7 +34,6 @@