[wip] Feature: TanStackのルート定義からOGP分岐付きのindex.htmlを生成

frost-community · Jul 2, 2024 · 959417a · 959417a
1 parent a7bd0f5
commit 959417a
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 0 deletions.
diff --git a/frontend/scripts/generate-template-html.js b/frontend/scripts/generate-template-html.js
@@ -0,0 +1,71 @@
+// @ts-check
+
+import fs from "node:fs";
+import process from "node:process";
+
+import { routeTree } from "../src/routeTree.gen";
+
+/** @typedef {import("../src/staticDataRouteOption").CustomStaticDataRouteOption} CustomStaticDataRouteOption */
+
+/** 書き出すHTMLファイルのパス */
+const distFile = process.cwd() + "/dist/index.html";
+
+/** TanStack RouterのRouteの型の扱い方がよくわかんにゃいのでとりあえず */
+/**
+ * @typedef {{
+ *   children?: Record<string, RouteTree>;
+ *   fullPath: string;
+ *   options: {
+ *     staticData: CustomStaticDataRouteOption;
+ *   }
+ * }} RouteTree;
+ */
+
+/**
+ * Generate flatten routes array. Nested children will be pettanko. (Nippongo ga utenai in VS code, naniyue?)
+ * @param {RouteTree} parent
+ */
+const getFlattenRoutes = (parent) => {
+  /** @type {RouteTree[]} */
+  const flattenRoutes = [];
+  flattenRoutes.push(parent);
+  if (parent.children != null) {
+    // 子孫ルートを収集
+    for (const child of Object.values(parent.children)) {
+      flattenRoutes.push(...getFlattenRoutes(child));
+    }
+  }
+  return flattenRoutes;
+};
+
+const flattenRoutes = getFlattenRoutes(/** @type {RouteTree} */ (routeTree));
+const html = `<!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" />
+    <!-- % switch (path) {
+${(() =>
+  flattenRoutes.map(
+    (route) => `      case ${route.fullPath}: % -->
+    <meta property="og:title" content="${route.options.staticData.ogp.title}" />
+    <meta property="og:description" content="${route.options.staticData.ogp.description}" />
+    <meta property="og:url" content="<%- host + '${route.fullPath}' %>" />${
+      route.options.staticData.ogp.imageUrl != null
+        ? `
+    <meta property="og:image" content="<%- host + '${route.options.staticData.ogp.imageUrl}' %>" />`
+        : ""
+    }`,
+  ))()}>
+    <!-- %- ogpTag % -->
+    <title>Frost</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>`;
+
+// htmlファイルへ書き込み
+fs.writeFileSync(distFile, html);
diff --git a/frontend/src/routes/__root.tsx b/frontend/src/routes/__root.tsx
@@ -11,4 +11,10 @@ export const Route = createRootRoute({
       <TanStackRouterDevtools />
     </>
   ),
+  staticData: {
+    ogp: {
+      title: "",
+      description: "",
+    },
+  },
 });
diff --git a/frontend/src/routes/route.tsx b/frontend/src/routes/route.tsx
@@ -5,6 +5,12 @@ import { DeleteParrot } from "./-components/DeleteParrot";
 
 export const Route = createFileRoute("/")({
   component: Home,
+  staticData: {
+    ogp: {
+      title: "Frost",
+      description: "Top",
+    },
+  },
 });
 
 function Home() {

diff --git a/frontend/src/staticDataRouteOption.ts b/frontend/src/staticDataRouteOption.ts
@@ -0,0 +1,11 @@
+export interface CustomStaticDataRouteOption {
+  ogp: {
+    title: string;
+    description: string;
+    imageUrl?: string;
+  };
+}
+
+declare module "@tanstack/react-router" {
+  interface StaticDataRouteOption extends CustomStaticDataRouteOption {}
+}