From 29033bd460c29d6b26d38050aed7c24afc1f9486 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Fri, 7 Jun 2024 16:50:13 +0900
Subject: [PATCH] =?UTF-8?q?embed=E3=81=AEboot=E3=82=A8=E3=83=B3=E3=83=88?=
 =?UTF-8?q?=E3=83=AA=E3=83=BC=E3=83=9D=E3=82=A4=E3=83=B3=E3=83=88=E3=82=92?=
 =?UTF-8?q?=E5=88=86=E9=9B=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/backend/src/config.ts                |  4 ++-
 .../backend/src/server/web/views/base.pug     |  2 +-
 packages/frontend/src/_boot_.ts               | 23 +-----------
 packages/frontend/src/_dev_boot_.ts           |  7 +++-
 packages/frontend/src/_embed_boot_.ts         | 35 +++++++++++++++++++
 packages/frontend/src/style.embed.scss        | 18 ++++++++++
 packages/frontend/src/style.scss              | 11 ------
 packages/frontend/vite.config.ts              |  1 +
 8 files changed, 65 insertions(+), 36 deletions(-)
 create mode 100644 packages/frontend/src/_embed_boot_.ts
 create mode 100644 packages/frontend/src/style.embed.scss

diff --git a/packages/backend/src/config.ts b/packages/backend/src/config.ts
index 0ac521d409..63ba633f8e 100644
--- a/packages/backend/src/config.ts
+++ b/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,
diff --git a/packages/backend/src/server/web/views/base.pug b/packages/backend/src/server/web/views/base.pug
index 51b868cd1b..8ddc056783 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 = config.clientEntry;
+	- const clientEntry = embed ? config.clientEmbedEntry : config.clientEntry;
 
 doctype html
 
diff --git a/packages/frontend/src/_boot_.ts b/packages/frontend/src/_boot_.ts
index 8efeddd4a8..875353f8a4 100644
--- a/packages/frontend/src/_boot_.ts
+++ b/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();
diff --git a/packages/frontend/src/_dev_boot_.ts b/packages/frontend/src/_dev_boot_.ts
index 7c6e537fbc..89509262c2 100644
--- a/packages/frontend/src/_dev_boot_.ts
+++ b/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で差し込まれている起動処理のうち、最低限必要なものを模倣するための処理
diff --git a/packages/frontend/src/_embed_boot_.ts b/packages/frontend/src/_embed_boot_.ts
new file mode 100644
index 0000000000..e83d7efb2e
--- /dev/null
+++ b/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');
+});
diff --git a/packages/frontend/src/style.embed.scss b/packages/frontend/src/style.embed.scss
new file mode 100644
index 0000000000..a40bc35431
--- /dev/null
+++ b/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%;
+}
diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
index 27aa020e0a..250a2616a7 100644
--- a/packages/frontend/src/style.scss
+++ b/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_ {
diff --git a/packages/frontend/vite.config.ts b/packages/frontend/vite.config.ts
index 82eb2af464..e6a5be62b2 100644
--- a/packages/frontend/vite.config.ts
+++ b/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: {