embedのbootエントリーポイントを分離

packages/backend/src/config.ts

@@ -161,6 +161,7 @@ export type Config = {
 	driveUrl: string;
 	userAgent: string;
 	clientEntry: string;
+	clientEmbedEntry: string;
 	clientManifestExists: boolean;
 	mediaProxy: string;
 	externalMediaProxyEnabled: boolean;
@@ -199,7 +200,7 @@ export function loadConfig(): Config {
 	const clientManifestExists = fs.existsSync(_dirname + '/../../../built/_vite_/manifest.json');
 	const clientManifest = clientManifestExists ?
 		JSON.parse(fs.readFileSync(`${_dirname}/../../../built/_vite_/manifest.json`, 'utf-8'))
-		: { 'src/_boot_.ts': { file: 'src/_boot_.ts' } };
+		: { 'src/_boot_.ts': { file: 'src/_boot_.ts' }, 'src/_embed_boot_.ts': { file: 'src/_embed_boot_.ts' } };
 	const config = yaml.load(fs.readFileSync(path, 'utf-8')) as Source;
 
 	const url = tryCreateUrl(config.url);
@@ -267,6 +268,7 @@ export function loadConfig(): Config {
 			: null,
 		userAgent: `Misskey/${version} (${config.url})`,
 		clientEntry: clientManifest['src/_boot_.ts'],
+		clientEmbedEntry: clientManifest['src/_embed_boot_.ts'],
 		clientManifestExists: clientManifestExists,
 		perChannelMaxNoteCacheCount: config.perChannelMaxNoteCacheCount ?? 1000,
 		perUserNotificationsMaxCount: config.perUserNotificationsMaxCount ?? 500,

packages/backend/src/server/web/views/base.pug

@@ -1,7 +1,7 @@
 block vars
 
 block loadClientEntry
-	- const clientEntry = config.clientEntry;
+	- const clientEntry = embed ? config.clientEmbedEntry : config.clientEntry;
 
 doctype html
 

packages/frontend/src/_boot_.ts

@@ -7,33 +7,12 @@
 import 'vite/modulepreload-polyfill';
 
 import '@/style.scss';
-import type { CommonBootOptions } from '@/boot/common.js';
 import { mainBoot } from '@/boot/main-boot.js';
 import { subBoot } from '@/boot/sub-boot.js';
-import { isEmbedPage } from '@/scripts/embed-page.js';
-import { setIframeId, postMessageToParentWindow } from '@/scripts/post-message.js';
 
 const subBootPaths = ['/share', '/auth', '/miauth', '/signup-complete'];
 
-if (isEmbedPage()) {
-	const bootOptions: Partial<CommonBootOptions> = {};
-
-	const params = new URLSearchParams(location.search);
-	const color = params.get('colorMode');
-	if (color && ['light', 'dark'].includes(color)) {
-		bootOptions.forceColorMode = color as 'light' | 'dark';
-	}
-
-	window.addEventListener('message', event => {
-		if (event.data?.type === 'misskey:embedParent:registerIframeId' && event.data.payload?.iframeId != null) {
-			setIframeId(event.data.payload.iframeId);
-		}
-	});
-
-	subBoot(bootOptions, true).then(() => {
-		postMessageToParentWindow('misskey:embed:ready');
-	});
-} else if (subBootPaths.some(i => location.pathname === i || location.pathname.startsWith(i + '/'))) {
+if (subBootPaths.some(i => location.pathname === i || location.pathname.startsWith(i + '/'))) {
 	subBoot();
 } else {
 	mainBoot();

packages/frontend/src/_dev_boot_.ts

@@ -7,10 +7,15 @@
 // よって、devモードとして起動されるときはビルド時に組み込む形としておく。
 // (pnpm start時はpugファイルの中で静的リソースとして読み込むようになっており、この問題は起こっていない)
 import '@tabler/icons-webfont/dist/tabler-icons.scss';
+import { isEmbedPage } from '@/scripts/embed-page.js';
 
 await main();
 
-import('@/_boot_.js');
+if (isEmbedPage()) {
+	import('@/_embed_boot_.js');
+} else {
+	import('@/_boot_.js');
+}
 
 /**
  * backend/src/server/web/boot.jsで差し込まれている起動処理のうち、最低限必要なものを模倣するための処理

packages/frontend/src/_embed_boot_.ts

@@ -0,0 +1,35 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+// https://vitejs.dev/config/build-options.html#build-modulepreload
+import 'vite/modulepreload-polyfill';
+
+import '@/style.scss';
+import '@/style.embed.scss';
+import type { CommonBootOptions } from '@/boot/common.js';
+import { subBoot } from '@/boot/sub-boot.js';
+import { setIframeId, postMessageToParentWindow } from '@/scripts/post-message.js';
+
+const bootOptions: Partial<CommonBootOptions> = {};
+
+// カラーモードのオーバーライド
+const params = new URLSearchParams(location.search);
+const color = params.get('colorMode');
+if (color && ['light', 'dark'].includes(color)) {
+	bootOptions.forceColorMode = color as 'light' | 'dark';
+}
+
+// iframeIdの設定
+window.addEventListener('message', event => {
+	if (event.data?.type === 'misskey:embedParent:registerIframeId' && event.data.payload?.iframeId != null) {
+		setIframeId(event.data.payload.iframeId);
+	}
+});
+
+// 起動
+subBoot(bootOptions, true).then(() => {
+	// 起動完了を通知（このあとクライアント側から misskey:embedParent:registerIframeId が送信される）
+	postMessageToParentWindow('misskey:embed:ready');
+});

packages/frontend/src/style.embed.scss

@@ -0,0 +1,18 @@
+@charset "utf-8";
+
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+html.embed {
+	background-color: transparent;
+	overflow: hidden;
+}
+
+html.embed,
+html.embed body,
+html.embed #misskey_app {
+	height: 100%;
+}

packages/frontend/src/style.scss

@@ -90,17 +90,6 @@ html {
 	&.useSystemFont {
 		font-family: system-ui;
 	}
-
-	&.embed {
-		background-color: transparent;
-		overflow: hidden;
-	}
-}
-
-html.embed,
-html.embed body,
-html.embed #misskey_app {
-	height: 100%;
 }
 
 html._themeChanging_ {

packages/frontend/vite.config.ts

@@ -130,6 +130,7 @@ export function getConfig(): UserConfig {
 			rollupOptions: {
 				input: {
 					app: './src/_boot_.ts',
+					embedApp: './src/_embed_boot_.ts',
 				},
 				external: externalPackages.map(p => p.match),
 				output: {