wip

packages/frontend-embed/package.json

@@ -43,6 +43,7 @@
 		"tsconfig-paths": "4.2.0",
 		"typescript": "5.5.4",
 		"uuid": "10.0.0",
+		"json5": "2.2.3",
 		"vite": "5.3.5",
 		"vue": "3.4.37"
 	},

packages/frontend-embed/src/boot.ts

@@ -8,6 +8,9 @@ import 'vite/modulepreload-polyfill';
 
 import '@/style.scss';
 import { createApp, defineAsyncComponent } from 'vue';
+import lightTheme from '@@/themes/l-light.json5';
+import darkTheme from '@@/themes/d-dark.json5';
+import { applyTheme } from './theme.js';
 import { setIframeId } from '@/post-message.js';
 import { parseEmbedParams } from '@/embed-page.js';
 
@@ -18,6 +21,8 @@ const embedParams = parseEmbedParams(params);
 
 console.info(embedParams);
 
+applyTheme(darkTheme);
+
 // サイズの制限
 document.documentElement.style.maxWidth = '500px';
 

packages/frontend-embed/vite.config.ts

@@ -5,6 +5,7 @@ import { type UserConfig, defineConfig } from 'vite';
 import locales from '../../locales/index.js';
 import meta from '../../package.json';
 import packageInfo from './package.json' with { type: 'json' };
+import pluginJson5 from './vite.json5.js';
 
 const extensions = ['.ts', '.tsx', '.js', '.jsx', '.mjs', '.json', '.json5', '.svg', '.sass', '.scss', '.css', '.vue'];
 
@@ -66,6 +67,7 @@ export function getConfig(): UserConfig {
 
 		plugins: [
 			pluginVue(),
+			pluginJson5(),
 		],
 
 		resolve: {

packages/frontend-embed/vite.json5.ts

@@ -0,0 +1,48 @@
+// Original: https://github.com/rollup/plugins/tree/8835dd2aed92f408d7dc72d7cc25a9728e16face/packages/json
+
+import JSON5 from 'json5';
+import { Plugin } from 'rollup';
+import { createFilter, dataToEsm } from '@rollup/pluginutils';
+import { RollupJsonOptions } from '@rollup/plugin-json';
+
+// json5 extends SyntaxError with additional fields (without subclassing)
+// https://github.com/json5/json5/blob/de344f0619bda1465a6e25c76f1c0c3dda8108d9/lib/parse.js#L1111-L1112
+interface Json5SyntaxError extends SyntaxError {
+	lineNumber: number;
+	columnNumber: number;
+}
+
+export default function json5(options: RollupJsonOptions = {}): Plugin {
+	const filter = createFilter(options.include, options.exclude);
+	const indent = 'indent' in options ? options.indent : '\t';
+
+	return {
+		name: 'json5',
+
+		// eslint-disable-next-line no-shadow
+		transform(json, id) {
+			if (id.slice(-6) !== '.json5' || !filter(id)) return null;
+
+			try {
+				const parsed = JSON5.parse(json);
+				return {
+					code: dataToEsm(parsed, {
+						preferConst: options.preferConst,
+						compact: options.compact,
+						namedExports: options.namedExports,
+						indent,
+					}),
+					map: { mappings: '' },
+				};
+			} catch (err) {
+				if (!(err instanceof SyntaxError)) {
+					throw err;
+				}
+				const message = 'Could not parse JSON5 file';
+				const { lineNumber, columnNumber } = err as Json5SyntaxError;
+				this.warn({ message, id, loc: { line: lineNumber, column: columnNumber } });
+				return null;
+			}
+		},
+	};
+}

pnpm-lock.yaml

@@ -1100,6 +1100,9 @@ importers:
       is-file-animated:
         specifier: 1.0.2
         version: 1.0.2
+      json5:
+        specifier: 2.2.3
+        version: 2.2.3
       mfm-js:
         specifier: 0.24.0
         version: 0.24.0