(dev-mode) devモードの改善 (#12639)

* fix dev-mode

* fix dev-mode

* fix dev-mode

* fix dev-mode

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
This commit is contained in:
おさむのひと 2023-12-14 20:16:02 +09:00 committed by GitHub
parent a2a6a94614
commit 386fcedf35
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 146 additions and 37 deletions

View file

@ -27,7 +27,7 @@
"check:connect": "cd packages/backend && pnpm check:connect", "check:connect": "cd packages/backend && pnpm check:connect",
"migrateandstart": "pnpm migrate && pnpm start", "migrateandstart": "pnpm migrate && pnpm start",
"watch": "pnpm dev", "watch": "pnpm dev",
"dev": "pnpm -r dev", "dev": "node scripts/dev.mjs",
"lint": "pnpm -r lint", "lint": "pnpm -r lint",
"cy:open": "pnpm cypress open --browser --e2e --config-file=cypress.config.ts", "cy:open": "pnpm cypress open --browser --e2e --config-file=cypress.config.ts",
"cy:run": "pnpm cypress run", "cy:run": "pnpm cypress run",

View file

@ -16,7 +16,8 @@
"watch:swc": "swc src -d built -D -w", "watch:swc": "swc src -d built -D -w",
"build:tsc": "tsc -p tsconfig.json && tsc-alias -p tsconfig.json", "build:tsc": "tsc -p tsconfig.json && tsc-alias -p tsconfig.json",
"watch": "node watch.mjs", "watch": "node watch.mjs",
"dev": "node ./built/boot/entry.js", "restart": "pnpm build && pnpm start",
"dev": "nodemon -w src -e ts,js,mjs,cjs,json --exec \"cross-env NODE_ENV=development pnpm run restart\"",
"typecheck": "tsc --noEmit", "typecheck": "tsc --noEmit",
"eslint": "eslint --quiet \"src/**/*.ts\"", "eslint": "eslint --quiet \"src/**/*.ts\"",
"lint": "pnpm typecheck && pnpm eslint", "lint": "pnpm typecheck && pnpm eslint",
@ -226,6 +227,7 @@
"execa": "8.0.1", "execa": "8.0.1",
"jest": "29.7.0", "jest": "29.7.0",
"jest-mock": "29.7.0", "jest-mock": "29.7.0",
"nodemon": "3.0.2",
"simple-oauth2": "5.0.0" "simple-oauth2": "5.0.0"
} }
} }

View file

@ -13,3 +13,6 @@ declare const _PERF_PREFIX_: string;
declare const _DATA_TRANSFER_DRIVE_FILE_: string; declare const _DATA_TRANSFER_DRIVE_FILE_: string;
declare const _DATA_TRANSFER_DRIVE_FOLDER_: string; declare const _DATA_TRANSFER_DRIVE_FOLDER_: string;
declare const _DATA_TRANSFER_DECK_COLUMN_: string; declare const _DATA_TRANSFER_DECK_COLUMN_: string;
// for dev-mode
declare const _LANGS_FULL_: string[][];

View file

@ -8,4 +8,88 @@
// (pnpm start時はpugファイルの中で静的リソースとして読み込むようになっており、この問題は起こっていない) // (pnpm start時はpugファイルの中で静的リソースとして読み込むようになっており、この問題は起こっていない)
import '@tabler/icons-webfont/tabler-icons.scss'; import '@tabler/icons-webfont/tabler-icons.scss';
await main();
import('@/_boot_.js'); import('@/_boot_.js');
/**
* backend/src/server/web/boot.jsで差し込まれている起動処理のうち
*/
async function main() {
const forceError = localStorage.getItem('forceError');
if (forceError != null) {
renderError('FORCED_ERROR', 'This error is forced by having forceError in local storage.');
}
//#region Detect language & fetch translations
// dev-modeの場合は常に取り直す
const supportedLangs = _LANGS_.map(it => it[0]);
let lang: string | null | undefined = localStorage.getItem('lang');
if (lang == null || !supportedLangs.includes(lang)) {
if (supportedLangs.includes(navigator.language)) {
lang = navigator.language;
} else {
lang = supportedLangs.find(x => x.split('-')[0] === navigator.language);
// Fallback
if (lang == null) lang = 'en-US';
}
}
// TODO:今のままだと言語ファイル変更後はpnpm devをリスタートする必要があるので、chokidarを使ったり等で対応できるようにする
const locale = _LANGS_FULL_.find(it => it[0] === lang);
localStorage.setItem('lang', lang);
localStorage.setItem('locale', JSON.stringify(locale[1]));
localStorage.setItem('localeVersion', _VERSION_);
//#endregion
//#region Theme
const theme = localStorage.getItem('theme');
if (theme) {
for (const [k, v] of Object.entries(JSON.parse(theme))) {
document.documentElement.style.setProperty(`--${k}`, v.toString());
// HTMLの theme-color 適用
if (k === 'htmlThemeColor') {
for (const tag of document.head.children) {
if (tag.tagName === 'META' && tag.getAttribute('name') === 'theme-color') {
tag.setAttribute('content', v);
break;
}
}
}
}
}
const colorScheme = localStorage.getItem('colorScheme');
if (colorScheme) {
document.documentElement.style.setProperty('color-scheme', colorScheme);
}
//#endregion
const fontSize = localStorage.getItem('fontSize');
if (fontSize) {
document.documentElement.classList.add('f-' + fontSize);
}
const useSystemFont = localStorage.getItem('useSystemFont');
if (useSystemFont) {
document.documentElement.classList.add('useSystemFont');
}
const wallpaper = localStorage.getItem('wallpaper');
if (wallpaper) {
document.documentElement.style.backgroundImage = `url(${wallpaper})`;
}
const customCss = localStorage.getItem('customCss');
if (customCss && customCss.length > 0) {
const style = document.createElement('style');
style.innerHTML = customCss;
document.head.appendChild(style);
}
}
function renderError(code: string, details?: string) {
console.log(code, details);
}

View file

@ -1,5 +1,6 @@
import dns from 'dns'; import dns from 'dns';
import { defineConfig } from 'vite'; import { defineConfig } from 'vite';
import locales from '../../locales';
import { getConfig } from './vite.config.js'; import { getConfig } from './vite.config.js';
dns.setDefaultResultOrder('ipv4first'); dns.setDefaultResultOrder('ipv4first');
@ -49,6 +50,11 @@ const devConfig = {
input: 'index.html', input: 'index.html',
}, },
}, },
define: {
...defaultConfig.define,
_LANGS_FULL_: JSON.stringify(Object.entries(locales)),
},
}; };
export default defineConfig(({ command, mode }) => devConfig); export default defineConfig(({ command, mode }) => devConfig);

View file

@ -6,6 +6,7 @@
"types": "./built/index.d.ts", "types": "./built/index.d.ts",
"scripts": { "scripts": {
"build": "tsc", "build": "tsc",
"watch": "nodemon -w src -e ts,js,cjs,mjs,json --exec \"pnpm run build\"",
"tsd": "tsd", "tsd": "tsd",
"api": "pnpm api-extractor run --local --verbose", "api": "pnpm api-extractor run --local --verbose",
"api-prod": "pnpm api-extractor run --verbose", "api-prod": "pnpm api-extractor run --verbose",
@ -32,9 +33,10 @@
"jest-fetch-mock": "3.0.3", "jest-fetch-mock": "3.0.3",
"jest-websocket-mock": "2.5.0", "jest-websocket-mock": "2.5.0",
"mock-socket": "9.3.1", "mock-socket": "9.3.1",
"ncp": "2.0.0",
"nodemon": "3.0.2",
"tsd": "0.29.0", "tsd": "0.29.0",
"typescript": "5.3.3", "typescript": "5.3.3"
"ncp": "2.0.0"
}, },
"files": [ "files": [
"built" "built"

View file

@ -2,7 +2,7 @@
"name": "sw", "name": "sw",
"private": true, "private": true,
"scripts": { "scripts": {
"watch": "node build.js watch", "watch": "nodemon -w ../../package.json -e json --exec \"node build.js watch\"",
"build": "node build.js", "build": "node build.js",
"typecheck": "tsc --noEmit", "typecheck": "tsc --noEmit",
"eslint": "eslint --quiet src/**/*.ts", "eslint": "eslint --quiet src/**/*.ts",
@ -18,6 +18,7 @@
"@typescript/lib-webworker": "npm:@types/serviceworker@0.0.67", "@typescript/lib-webworker": "npm:@types/serviceworker@0.0.67",
"eslint": "8.55.0", "eslint": "8.55.0",
"eslint-plugin-import": "2.29.0", "eslint-plugin-import": "2.29.0",
"nodemon": "3.0.2",
"typescript": "5.3.3" "typescript": "5.3.3"
}, },
"type": "module" "type": "module"

View file

@ -643,6 +643,9 @@ importers:
jest-mock: jest-mock:
specifier: 29.7.0 specifier: 29.7.0
version: 29.7.0 version: 29.7.0
nodemon:
specifier: 3.0.2
version: 3.0.2
simple-oauth2: simple-oauth2:
specifier: 5.0.0 specifier: 5.0.0
version: 5.0.0 version: 5.0.0
@ -1041,6 +1044,9 @@ importers:
ncp: ncp:
specifier: 2.0.0 specifier: 2.0.0
version: 2.0.0 version: 2.0.0
nodemon:
specifier: 3.0.2
version: 3.0.2
tsd: tsd:
specifier: 0.29.0 specifier: 0.29.0
version: 0.29.0 version: 0.29.0
@ -1105,6 +1111,9 @@ importers:
eslint-plugin-import: eslint-plugin-import:
specifier: 2.29.0 specifier: 2.29.0
version: 2.29.0(@typescript-eslint/parser@6.14.0)(eslint@8.55.0) version: 2.29.0(@typescript-eslint/parser@6.14.0)(eslint@8.55.0)
nodemon:
specifier: 3.0.2
version: 3.0.2
typescript: typescript:
specifier: 5.3.3 specifier: 5.3.3
version: 5.3.3 version: 5.3.3

View file

@ -95,6 +95,7 @@ if (process.argv.includes("--watch")) {
for await (const event of watcher) { for await (const event of watcher) {
const filename = event.filename?.replaceAll('\\', '/'); const filename = event.filename?.replaceAll('\\', '/');
if (/^[a-z]+-[A-Z]+\.yml/.test(filename)) { if (/^[a-z]+-[A-Z]+\.yml/.test(filename)) {
console.log(`update ${filename} ...`)
locales = buildLocales(); locales = buildLocales();
await copyFrontendLocales() await copyFrontendLocales()
} }

View file

@ -4,7 +4,24 @@
*/ */
const fs = require('fs'); const fs = require('fs');
const meta = require('../package.json'); const packageJsonPath = __dirname + '/../package.json'
fs.mkdirSync(__dirname + '/../built', { recursive: true }); function build() {
fs.writeFileSync(__dirname + '/../built/meta.json', JSON.stringify({ version: meta.version }), 'utf-8'); try {
const json = fs.readFileSync(packageJsonPath, 'utf-8')
const meta = JSON.parse(json);
fs.mkdirSync(__dirname + '/../built', { recursive: true });
fs.writeFileSync(__dirname + '/../built/meta.json', JSON.stringify({ version: meta.version }), 'utf-8');
} catch (e) {
console.error(e)
}
}
build();
if (process.argv.includes("--watch")) {
fs.watch(packageJsonPath, (event, filename) => {
console.log(`update ${filename} ...`)
build()
})
}

View file

@ -3,7 +3,6 @@
* SPDX-License-Identifier: AGPL-3.0-only * SPDX-License-Identifier: AGPL-3.0-only
*/ */
import fs from 'node:fs';
import { dirname } from 'node:path'; import { dirname } from 'node:path';
import { fileURLToPath } from 'node:url'; import { fileURLToPath } from 'node:url';
import { execa } from 'execa'; import { execa } from 'execa';
@ -11,8 +10,6 @@ import { execa } from 'execa';
const _filename = fileURLToPath(import.meta.url); const _filename = fileURLToPath(import.meta.url);
const _dirname = dirname(_filename); const _dirname = dirname(_filename);
const vitePort = process.env.VITE_PORT ? ["--strictPort", "--port", process.env.VITE_PORT] : ["--strictPort"];
await execa('pnpm', ['clean'], { await execa('pnpm', ['clean'], {
cwd: _dirname + '/../', cwd: _dirname + '/../',
stdout: process.stdout, stdout: process.stdout,
@ -31,19 +28,25 @@ await execa('pnpm', ['build-assets'], {
stderr: process.stderr, stderr: process.stderr,
}); });
execa('pnpm', ['build-pre', '--watch'], {
cwd: _dirname + '/../',
stdout: process.stdout,
stderr: process.stderr,
});
execa('pnpm', ['build-assets', '--watch'], { execa('pnpm', ['build-assets', '--watch'], {
cwd: _dirname + '/../', cwd: _dirname + '/../',
stdout: process.stdout, stdout: process.stdout,
stderr: process.stderr, stderr: process.stderr,
}); });
execa('pnpm', ['--filter', 'backend', 'watch'], { execa('pnpm', ['--filter', 'backend', 'dev'], {
cwd: _dirname + '/../', cwd: _dirname + '/../',
stdout: process.stdout, stdout: process.stdout,
stderr: process.stderr, stderr: process.stderr,
}); });
execa('pnpm', ['--filter', 'frontend', 'watch', ...vitePort], { execa('pnpm', ['--filter', 'frontend', 'dev'], {
cwd: _dirname + '/../', cwd: _dirname + '/../',
stdout: process.stdout, stdout: process.stdout,
stderr: process.stderr, stderr: process.stderr,
@ -55,27 +58,8 @@ execa('pnpm', ['--filter', 'sw', 'watch'], {
stderr: process.stderr, stderr: process.stderr,
}); });
const start = async () => { execa('pnpm', ['--filter', 'misskey-js', 'watch'], {
try {
const stat = fs.statSync(_dirname + '/../packages/backend/built/boot/entry.js');
if (!stat) throw new Error('not exist yet');
if (stat.size === 0) throw new Error('not built yet');
const subprocess = await execa('pnpm', ['start'], {
cwd: _dirname + '/../', cwd: _dirname + '/../',
stdout: process.stdout, stdout: process.stdout,
stderr: process.stderr, stderr: process.stderr,
}); });
// なぜかworkerだけが終了してmasterが残るのでその対策
process.on('SIGINT', () => {
subprocess.kill('SIGINT');
process.exit(0);
});
} catch (e) {
await new Promise(resolve => setTimeout(resolve, 3000));
start();
}
};
start();