Environment: ページごとの OGP タグ値の注入ルールを各ルートディレクトリーで定義できるようにする (#77)

docs/design.md

@@ -6,4 +6,4 @@
 ## HTMLの動的生成
 OGPタグの動的生成を実現するため、EJSテンプレートによるレンダリングをバックエンドに導入する。\
 ViteはデフォルトではHTMLファイルを生成するため、生成されたHTMLファイルをベースにEJSファイルを生成する。\
-バックエンドはEJSのレンダリングで使用できるいくつかのパラメータを提供する。\
+バックエンドはEJSのレンダリングで使用できるいくつかのパラメータを提供する。

frontend/.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# generate-template-html.js で生成
+/index.html

frontend/docs/regulations.md

@@ -4,8 +4,9 @@
 
 ドキュメント: https://tanstack.com/router/latest/docs/framework/react/overview
 
-- ページのファイルは`route.tsx`か`route.lazy.tsx`とし、`createFileRoute`か`createLazyFileRoute`を使って`Route`コンポーネントをエクスポートする
-  - lazyで使う場合はlazyを使う
+- ページのファイルは`route.tsx`(lazyで使う場合は`route.lazy.tsx`も)とし\
+  `createFileRoute`(lazyで使う場合は`createLazyFileRoute`も)を使って`Route`コンポーネントをエクスポートする
+- `createFileRoute`@`route.tsx`のオプションの`staticData`プロパティーでページのOpen Graph Protocol情報を定義する
 - ルートを出力しないファイル・フォルダーに関してはファイル先頭に`-`を付ける(`-components/`)など
 - 型定義ファイルを出力するために、`pnpm dev`のほかに`pnpm generate-routes`もしくは`pnpm watch-routes`コマンドを実行する
 - `__root.tsx`はすべてのルートで適用されます

frontend/package.json

@@ -5,9 +5,10 @@
   "type": "module",
   "scripts": {
     "generate-routes": "tsr generate",
+    "generate-html-template": "pnpm exec tsx --tsconfig tsconfig.app.json --import=./scripts/ignore-assets-loader/register.js scripts/generate-template-html.js",
     "watch-routes": "tsr watch",
     "dev": "vite",
-    "build": "generate-routes && tsc -b && vite build && node ./scripts/generate-ejs.js",
+    "build": "pnpm run generate-routes && pnpm run generate-html-template && tsc -b && vite build && node ./scripts/generate-ejs.js",
     "preview": "vite preview",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "lint:fix": "pnpm lint --fix",
@@ -38,6 +39,7 @@
     "eslint-plugin-react-refresh": "^0.4.7",
     "eslint-plugin-unused-imports": "^4.0.0",
     "prettier": "^3.3.2",
+    "tsx": "^4.16.0",
     "typescript": "^5.5.2",
     "vite": "^5.3.1",
     "vite-tsconfig-paths": "^4.3.2"

frontend/scripts/generate-ejs.js

@@ -8,7 +8,7 @@ const distFile = process.cwd() + '/dist/index.ejs';
 const source = fs.readFileSync(sourceFile, { encoding: 'utf8' });
 
 // ejsのコメントを全てejs構文に置換
-const dist = source.replace(/<!--[ \t]*(%.+?%)[ \t]*-->/g, '<$1>');
+const dist = source.replace(/<!--[ \t]*(%.+?%)[ \t]*-->/gs, '<$1>');
 
 // ejsファイルへ書き込み
 fs.writeFileSync(distFile, dist);

frontend/scripts/generate-template-html.js

@@ -0,0 +1,143 @@
+// @ts-check
+
+import fs from "node:fs";
+import path from "node:path";
+import process from "node:process";
+
+import { routeTree } from "../src/routeTree.gen";
+import { BACKEND_EJS_VARIABLE_KEYS } from "../src/staticDataRouteOption";
+
+// Constants
+
+/** 書き出すHTMLファイルのパス */
+const distFile = path.resolve(process.cwd(), "index.html");
+
+// Utilities
+
+/**
+ * 半角スペースとそれに続く `|` がある行はそれらを取り除き\
+ * ない行は行ごと取り除く
+ *
+ * @param {string} text
+ */
+const trimMargin = (text) =>
+  text
+    .split("\n")
+    // 行頭が半角スペース (ない or 任意個数)と | ではない行を取り除く
+    .filter((line) => line.match(/^\s*\|/))
+    // 行頭の半角スペース (ない or 任意個数)と | を取り払う
+    .map((line) => line.replace(/^\s*\|/, ""))
+    .join("\n");
+
+/**
+ * 全ての行にインデントを付与した文字列を返す
+ * @param {string} indentChar
+ * @param {number} indentLevel インデントの個数
+ * @param {string} sourceText
+ */
+const withIndent = (indentChar, indentLevel, sourceText) =>
+  sourceText
+    .split("\n")
+    .map((line) =>
+      line !== "" //
+        ? indentChar.repeat(indentLevel) + line
+        : line,
+    )
+    .join("\n");
+
+/** @typedef {import("../src/staticDataRouteOption").CustomStaticDataRouteOption} CustomStaticDataRouteOption */
+
+/**
+ * @typedef {{
+ *   isRoot: boolean;
+ *   options: {
+ *     path?: string;
+ *     staticData: CustomStaticDataRouteOption;
+ *   }
+ *   children?: RouteTree[];
+ * }} RouteTree TanStack Router の `routeTree.children` の型が謎なのでとりあえず想定の型
+ */
+
+/**
+ * @typedef {{
+ *   fullPath: string;
+ *   openGraph: CustomStaticDataRouteOption["openGraph"];
+ * }} FlattenRoute
+ */
+
+/**
+ * `RouteTree[]` を `FlattenRoute` の一次元配列にフラット化したものを返す
+ *
+ * ネストされた `children` を収集する
+ * @param {Readonly<RouteTree[]>} routes
+ * @param {string} [pathPrefix='']
+ * @return {FlattenRoute[]}
+ */
+const getFlattenRoutes = (routes, pathPrefix = "") =>
+  routes.flatMap((route) => {
+    const fullPath = pathPrefix + route.options.path;
+    return [
+      {
+        fullPath: fullPath,
+        openGraph: route.options.staticData.openGraph,
+      },
+      // 子ルートを収集
+      ...(route.children != null
+        ? getFlattenRoutes(route.children, fullPath)
+        : []),
+    ];
+  });
+const flattenRoutes = getFlattenRoutes(
+  /** @type {RouteTree[]} */ (/** @type {unknown} */ (routeTree.children)),
+);
+
+const html = (() => {
+  const INDENT = "  ";
+
+  const ogs = trimMargin(`
+    |<!-- % switch (${BACKEND_EJS_VARIABLE_KEYS.path}) {
+    ${flattenRoutes
+      .map(
+        (route) => `
+          |  case "${route.fullPath}": % -->
+          |<meta property="og:title" content="${route.openGraph.title}" />
+          |<meta property="og:type" content="${route.openGraph.type}" />
+          |<meta property="og:description" content="${route.openGraph.description}" />
+          |<meta property="og:url" content="<%- ${BACKEND_EJS_VARIABLE_KEYS.origin} + '${route.fullPath}' %>" />${
+            route.openGraph.imageUrl != null
+              ? `|
+                 |<meta property="og:image" content="${route.openGraph.imageUrl}" />`
+              : ""
+          }
+          |  <!-- % break;`,
+      )
+      .join("\n")}
+    |} % -->
+    |
+  `);
+  return (
+    trimMargin(`
+      |<!doctype html>
+      |<html lang="ja">
+      |<head>
+      |  <meta charset="UTF-8" />
+      |  <link rel="icon" type="image/png" href="/logo192.png" />
+      |  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      |  <title>Frost</title>
+      |
+    `) +
+    withIndent(INDENT, 1, ogs) +
+    trimMargin(`
+      |</head>
+      |<body>
+      |  <div id="root"></div>
+      |  <script type="module" src="/src/main.tsx"></script>
+      |</body>
+      |</html>
+      |
+    `)
+  );
+})();
+
+// htmlファイルへ書き込み
+fs.writeFileSync(distFile, html);

frontend/scripts/ignore-assets-loader/implement.js

@@ -0,0 +1,5 @@
+// @ts-check
+
+import { createMockResolver } from "../../../nodejs-mock-loader/src/index.js";
+
+export const resolve = createMockResolver(["GIF"]);

frontend/scripts/ignore-assets-loader/register.js

@@ -0,0 +1,6 @@
+// @ts-check
+
+import { register } from "node:module";
+import { pathToFileURL } from "node:url";
+
+register(pathToFileURL("./scripts/ignore-assets-loader/implement.js"));

frontend/src/routeTree.gen.ts

@@ -8,20 +8,15 @@
 
 // This file is auto-generated by TanStack Router
 
-import { createFileRoute } from '@tanstack/react-router'
-
 // Import Routes
 
 import { Route as rootRoute } from './routes/__root'
+import { Route as LoginRouteImport } from './routes/login/route'
 import { Route as RouteImport } from './routes/route'
 
-// Create Virtual Routes
-
-const LoginRouteLazyImport = createFileRoute('/login')()
-
 // Create/Update Routes
 
-const LoginRouteLazyRoute = LoginRouteLazyImport.update({
+const LoginRouteRoute = LoginRouteImport.update({
   path: '/login',
   getParentRoute: () => rootRoute,
 } as any).lazy(() => import('./routes/login/route.lazy').then((d) => d.Route))
@@ -46,18 +41,15 @@ declare module '@tanstack/react-router' {
       id: '/login'
       path: '/login'
       fullPath: '/login'
-      preLoaderRoute: typeof LoginRouteLazyImport
+      preLoaderRoute: typeof LoginRouteImport
       parentRoute: typeof rootRoute
     }
   }
 }
 
 // Create and export the route tree
 
-export const routeTree = rootRoute.addChildren({
-  RouteRoute,
-  LoginRouteLazyRoute,
-})
+export const routeTree = rootRoute.addChildren({ RouteRoute, LoginRouteRoute })
 
 /* prettier-ignore-end */
 
@@ -75,7 +67,7 @@ export const routeTree = rootRoute.addChildren({
       "filePath": "route.tsx"
     },
     "/login": {
-      "filePath": "login/route.lazy.tsx"
+      "filePath": "login/route.tsx"
     }
   }
 }

frontend/src/routes/__root.tsx

@@ -1,6 +1,8 @@
 import { createRootRoute, Outlet } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/router-devtools";
 
+import type { OpenGraphProtocolType } from "@/staticDataRouteOption";
+
 import { Header } from "@/components/Header";
 
 export const Route = createRootRoute({
@@ -11,4 +13,12 @@ export const Route = createRootRoute({
       <TanStackRouterDevtools />
     </>
   ),
+  staticData: {
+    // RootRouteのOGP情報は使用しないが型定義上何かしら入れる必要がある
+    openGraph: {
+      title: "Don't Care",
+      type: "Don't Care" as OpenGraphProtocolType,
+      description: "Don't Care",
+    },
+  },
 });

frontend/src/routes/login/route.lazy.tsx

@@ -1,17 +1,7 @@
-import { Button } from "@mantine/core";
-import { Link, createLazyFileRoute } from "@tanstack/react-router";
+import { createLazyFileRoute } from "@tanstack/react-router";
+
+import { Login } from "./route";
 
 export const Route = createLazyFileRoute("/login")({
   component: Login,
 });
-
-function Login() {
-  return (
-    <>
-      <p>Login Page</p>
-      <Link to="/">
-        <Button>Top</Button>
-      </Link>
-    </>
-  );
-}