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 = {}; - - 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 = {}; + +// カラーモードのオーバーライド +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: {