(wip) build time config

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

Hide file tree

Showing 3 changed files with 58 additions and 29 deletions.
diff --git a/app/root.tsx b/app/root.tsx
@@ -23,7 +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 { CONFIG_SCRIPT_PLACEHOLDER_V2, publicConfig } from "./utils/config";
 import { ConfigPlaceholder } from "./utils/config-placeholder";
 import { useFlashMessages } from "./utils/flash-message-hook";
 import { RootLoaderData, useRootLoaderData } from "./utils/loader-utils";
@@ -73,10 +73,13 @@ export default function DefaultComponent() {
         </title>
         <Meta />
         <Links />
-        <ConfigPlaceholder />
+        {/* <ConfigPlaceholder /> */}
         <ThemeScript />
         <HideRecaptchaBadge />
-        <script dangerouslySetInnerHTML={{ __html: `` }} />
+        <script
+          suppressHydrationWarning
+          dangerouslySetInnerHTML={{ __html: CONFIG_SCRIPT_PLACEHOLDER_V2 }}
+        />
       </head>
       <body className="h-full">
         {/* TODO: default position="top" is fine? */}

diff --git a/app/utils/config.ts b/app/utils/config.ts
@@ -29,13 +29,22 @@ 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 let buildConfig = uninitialized as z.infer<typeof Z_BUILD_CONFIG>;
+
 export const CONFIG_SCRIPT_ID = "__configScript";
 
 export const CONFIG_SCRIPT_PLACEHOLDER = "@@__configScriptPlaceholder@@";
+export const CONFIG_SCRIPT_PLACEHOLDER_V2 = "/*@@INJECT_CONFIG_SCRIPT@@*/";
 
 //
 // server
@@ -44,21 +53,29 @@ export const CONFIG_SCRIPT_PLACEHOLDER = "@@__configScriptPlaceholder@@";
 export const initializeConfigServer = once(() => {
   serverConfig = Z_SERVER_CONFIG.parse(process.env);
   publicConfig = Z_PUBLIC_CONFIG.parse(process.env);
+  buildConfig = Z_BUILD_CONFIG.parse(process.env.__DEFINE_BUILD_CONFIG ?? {});
 });
 
+// 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_V2, code);
 }
 
 //
 // client
 //
 
 export const initializeConfigClient = once(() => {
-  const el = document.querySelector("#" + CONFIG_SCRIPT_ID);
-  tinyassert(el);
-  publicConfig = JSON.parse(el.innerHTML);
+  // const el = document.querySelector("#" + CONFIG_SCRIPT_ID);
+  // tinyassert(el);
+  publicConfig = __publicConfig;
+  buildConfig = __buildConfig;
 });
diff --git a/misc/build/bundle-vercel.ts b/misc/build/bundle-vercel.ts
@@ -9,25 +9,32 @@ import esbuild from "esbuild";
 // - https://esbuild.github.io/plugins/
 // - https://github.com/evanw/esbuild/issues/1685#issuecomment-944916409
 
-esbuild.build({
-  logLevel: "info",
-  entryPoints: ["./build/remix/production/server/index.js"],
-  outfile: "./build/remix/production/server/index-bundled.js",
-  bundle: true,
-  sourcemap: "inline",
-  platform: "node",
-  external: [
-    // exclude knex drivers except "mysql2"
-    "mysql",
-    "sqlite3",
-    "better-sqlite3",
-    "tedious",
-    "pg",
-    "oracledb",
-    "pg-query-stream",
-  ],
-  plugins: [noSourceMapNodeModulesPlugin()],
-});
+async function main() {
+  await esbuild.build({
+    logLevel: "info",
+    entryPoints: ["./build/remix/production/server/index.js"],
+    outfile: "./build/remix/production/server/index-bundled.js",
+    bundle: true,
+    sourcemap: "inline",
+    platform: "node",
+    external: [
+      // exclude knex drivers except "mysql2"
+      "mysql",
+      "sqlite3",
+      "better-sqlite3",
+      "tedious",
+      "pg",
+      "oracledb",
+      "pg-query-stream",
+    ],
+    plugins: [noSourceMapNodeModulesPlugin()],
+    define: {
+      "process.env.__DEFINE_BUILD_CONFIG": JSON.stringify({
+        GIT_COMMIT_REF: `xxx`,
+      }),
+    },
+  });
+}
 
 // https://github.com/evanw/esbuild/issues/1685#issuecomment-944916409
 function noSourceMapNodeModulesPlugin(): esbuild.Plugin {
@@ -47,3 +54,5 @@ function noSourceMapNodeModulesPlugin(): esbuild.Plugin {
     },
   };
 }
+
+main();