refactor: simplify publicConfig + add buildConfig

hi-ogawa · May 9, 2023 · d90fe9b · d90fe9b
1 parent 544716c
commit d90fe9b
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 44 deletions.
diff --git a/app/root.tsx b/app/root.tsx
@@ -23,8 +23,7 @@ import type { UserTable } from "./db/models";
 import { $R, R } from "./misc/routes";
 import { HideRecaptchaBadge } from "./routes/users/register";
 import { trpc } from "./trpc/client";
-import { publicConfig } from "./utils/config";
-import { ConfigPlaceholder } from "./utils/config-placeholder";
+import { CONFIG_SCRIPT_PLACEHOLDER, publicConfig } from "./utils/config";
 import { useFlashMessages } from "./utils/flash-message-hook";
 import { RootLoaderData, useRootLoaderData } from "./utils/loader-utils";
 import { makeLoader } from "./utils/loader-utils.server";
@@ -73,10 +72,19 @@ export default function DefaultComponent() {
         </title>
         <Meta />
         <Links />
-        <ConfigPlaceholder />
-        <ThemeScript />
         <HideRecaptchaBadge />
-        <script dangerouslySetInnerHTML={{ __html: `` }} />
+        <script
+          suppressHydrationWarning
+          dangerouslySetInnerHTML={{ __html: CONFIG_SCRIPT_PLACEHOLDER }}
+        />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `\
+              globalThis.__themeStorageKey = "ytsub:theme";
+              ${require("@hiogawa/utils-experimental/dist/theme-script.global.js?loader=text")}
+            `,
+          }}
+        />
       </head>
       <body className="h-full">
         {/* TODO: default position="top" is fine? */}
@@ -99,19 +107,6 @@ export default function DefaultComponent() {
   );
 }
 
-function ThemeScript() {
-  return (
-    <script
-      dangerouslySetInnerHTML={{
-        __html: `\
-globalThis.__themeStorageKey = "ytsub:theme";
-${require("@hiogawa/utils-experimental/dist/theme-script.global.js?loader=text")}
-`,
-      }}
-    />
-  );
-}
-
 function Root() {
   const data = useRootLoaderData();
   useFlashMessages(data.flashMessages);

diff --git a/app/utils/config-placeholder.tsx b/app/utils/config-placeholder.tsx
diff --git a/app/utils/config.ts b/app/utils/config.ts
@@ -1,5 +1,5 @@
 import * as process from "process";
-import { once, tinyassert } from "@hiogawa/utils";
+import { once } from "@hiogawa/utils";
 import { z } from "zod";
 import { uninitialized } from "./misc";
 
@@ -29,13 +29,19 @@ const Z_PUBLIC_CONFIG = z.object({
   VERCEL_ENV: z.string().optional(),
 });
 
+// prettier-ignore
+const Z_BUILD_CONFIG = z.object({
+  // build time constants injected via esbuild "define" options
+  GIT_COMMIT_REF: z.string().optional(),
+});
+
 export let serverConfig = uninitialized as z.infer<typeof Z_SERVER_CONFIG>;
 
 export let publicConfig = uninitialized as z.infer<typeof Z_PUBLIC_CONFIG>;
 
-export const CONFIG_SCRIPT_ID = "__configScript";
+export let buildConfig = uninitialized as z.infer<typeof Z_BUILD_CONFIG>;
 
-export const CONFIG_SCRIPT_PLACEHOLDER = "@@__configScriptPlaceholder@@";
+export const CONFIG_SCRIPT_PLACEHOLDER = "/*@@INJECT_CONFIG_SCRIPT@@*/";
 
 //
 // server
@@ -44,21 +50,28 @@ export const CONFIG_SCRIPT_PLACEHOLDER = "@@__configScriptPlaceholder@@";
 export const initializeConfigServer = once(() => {
   serverConfig = Z_SERVER_CONFIG.parse(process.env);
   publicConfig = Z_PUBLIC_CONFIG.parse(process.env);
+  // esbuild injects BUILD_CONFIG_DEFINE on release build
+  buildConfig = Z_BUILD_CONFIG.parse(process.env.BUILD_CONFIG_DEFINE ?? {});
 });
 
+// pass data to client via global script
+declare let __publicConfig: any;
+declare let __buildConfig: any;
+
 export function injectConfigScript(markup: string): string {
-  return markup.replace(
-    CONFIG_SCRIPT_PLACEHOLDER,
-    JSON.stringify(publicConfig)
-  );
+  // TODO: need to escape?
+  const code = `
+globalThis.__publicConfig = ${JSON.stringify(publicConfig)};
+globalThis.__buildConfig = ${JSON.stringify(buildConfig)};
+`;
+  return markup.replace(CONFIG_SCRIPT_PLACEHOLDER, code);
 }
 
 //
 // client
 //
 
 export const initializeConfigClient = once(() => {
-  const el = document.querySelector("#" + CONFIG_SCRIPT_ID);
-  tinyassert(el);
-  publicConfig = JSON.parse(el.innerHTML);
+  publicConfig = __publicConfig;
+  buildConfig = __buildConfig;
 });
diff --git a/misc/build/bundle-vercel.ts b/misc/build/bundle-vercel.ts
@@ -1,5 +1,7 @@
+import { execSync } from "child_process";
 import fs from "node:fs";
 import esbuild from "esbuild";
+import type { buildConfig } from "../../app/utils/config";
 
 // used by scripts/vercel.sh to
 // - bundle server app for simpler vercel deployment
@@ -9,6 +11,14 @@ import esbuild from "esbuild";
 // - https://esbuild.github.io/plugins/
 // - https://github.com/evanw/esbuild/issues/1685#issuecomment-944916409
 
+const GIT_COMMIT_REF = execSync("git rev-parse HEAD", {
+  encoding: "utf8",
+}).trim();
+
+const BUILD_CONFIG_DEFINE: typeof buildConfig = {
+  GIT_COMMIT_REF,
+};
+
 esbuild.build({
   logLevel: "info",
   entryPoints: ["./build/remix/production/server/index.js"],
@@ -27,6 +37,9 @@ esbuild.build({
     "pg-query-stream",
   ],
   plugins: [noSourceMapNodeModulesPlugin()],
+  define: {
+    "process.env.BUILD_CONFIG_DEFINE": JSON.stringify(BUILD_CONFIG_DEFINE),
+  },
 });
 
 // https://github.com/evanw/esbuild/issues/1685#issuecomment-944916409