refactor(console): extract type definition gen process

extract the type definition gen step to the build time. As typescript is not available at run time.

.gitignore

@@ -35,3 +35,6 @@ dump.rdb
 
 # connectors
 /packages/core/connectors
+
+# console auto generated files
+/packages/console/src/consts/jwt-customizer-type-definition.ts

packages/console/generate.sh

@@ -0,0 +1,12 @@
+#!/bin/sh
+
+# Clean up
+rm -rf scripts-js/
+# build the jwt-customizer-type-definition generate script
+pnpm exec tsc -p tsconfig.scripts.gen.json
+# clean up the existing generated jwt-customizer-type-definition file
+rm -f src/consts/jwt-customizer-type-definition.ts
+# run script
+node scripts-js/generate-jwt-customizer-type-definition.js
+# Clean up
+rm -rf scripts-js/

packages/console/package.json

@@ -11,6 +11,8 @@
     "dist"
   ],
   "scripts": {
+    "prepack": "pnpm generate",
+    "generate": "./generate.sh",
     "precommit": "lint-staged",
     "start": "parcel src/index.html",
     "dev": "cross-env PORT=5002 parcel src/index.html --public-url ${CONSOLE_PUBLIC_URL:-/console} --no-cache --hmr-port 6002",
@@ -142,6 +144,12 @@
   },
   "eslintConfig": {
     "extends": "@silverhand/react",
+    "parserOptions": {
+      "project": [
+        "./tsconfig.json",
+        "./tsconfig.scripts.gen.json"
+      ]
+    },
     "rules": {
       "react/function-component-definition": [
         "error",

packages/console/scripts/generate-jwt-customizer-type-definition.ts

@@ -0,0 +1,60 @@
+import fs from 'node:fs';
+
+import {
+  jwtCustomizerUserContextGuard,
+  accessTokenPayloadGuard,
+  clientCredentialsPayloadGuard,
+} from '@logto/schemas';
+import { type ZodTypeAny } from 'zod';
+import { zodToTs, printNode } from 'zod-to-ts';
+
+const filePath = 'src/consts/jwt-customizer-type-definition.ts';
+
+const typeIdentifiers = `export enum JwtCustomizerTypeDefinitionKey {
+  JwtCustomizerUserContext = 'JwtCustomizerUserContext',
+  AccessTokenPayload = 'AccessTokenPayload',
+  ClientCredentialsPayload = 'ClientCredentialsPayload',
+  EnvironmentVariables = 'EnvironmentVariables',
+};`;
+
+const inferTsDefinitionFromZod = (zodSchema: ZodTypeAny, identifier: string): string => {
+  const { node } = zodToTs(zodSchema, identifier);
+  const typeDefinition = printNode(node);
+
+  return `type ${identifier} = ${typeDefinition};`;
+};
+
+// Create the jwt-customizer-type-definition.ts file
+const createJwtCustomizerTypeDefinitions = () => {
+  const jwtCustomizerUserContextTypeDefinition = inferTsDefinitionFromZod(
+    jwtCustomizerUserContextGuard,
+    'JwtCustomizerUserContext'
+  );
+
+  const accessTokenPayloadTypeDefinition = inferTsDefinitionFromZod(
+    accessTokenPayloadGuard,
+    'AccessTokenPayload'
+  );
+
+  const clientCredentialsPayloadTypeDefinition = inferTsDefinitionFromZod(
+    clientCredentialsPayloadGuard,
+    'ClientCredentialsPayload'
+  );
+
+  const fileContent = `/* This file is auto-generated. Do not modify it manually. */
+${typeIdentifiers}
+
+export const jwtCustomizerUserContextTypeDefinition = \`
+  ${jwtCustomizerUserContextTypeDefinition}\`;
+
+export const accessTokenPayloadTypeDefinition = \`
+  ${accessTokenPayloadTypeDefinition}\`;
+
+export const clientCredentialsPayloadTypeDefinition = 
+  \`${clientCredentialsPayloadTypeDefinition}\`;
+`;
+
+  fs.writeFileSync(filePath, fileContent);
+};
+
+createJwtCustomizerTypeDefinitions();

packages/console/src/pages/JwtClaims/Main.tsx

@@ -104,7 +104,7 @@ function Main({
         onDiscard={reset}
         onSubmit={onSubmitHandler}
       />
-      <UnsavedChangesAlertModal hasUnsavedChanges={isDirty && !isSubmitting} />
+      <UnsavedChangesAlertModal hasUnsavedChanges={isDirty && !isSubmitting} onConfirm={reset} />
     </>
   );
 }

packages/console/src/pages/JwtClaims/utils/type-definitions.ts

@@ -1,59 +1,22 @@
 import {
-  jwtCustomizerUserContextGuard,
-  accessTokenPayloadGuard,
-  clientCredentialsPayloadGuard,
-} from '@logto/schemas';
-import { type ZodTypeAny } from 'zod';
-import { zodToTs, printNode } from 'zod-to-ts';
+  JwtCustomizerTypeDefinitionKey,
+  accessTokenPayloadTypeDefinition,
+  jwtCustomizerUserContextTypeDefinition,
+  clientCredentialsPayloadTypeDefinition,
+} from '@/consts/jwt-customizer-type-definition';
 
 import { type JwtClaimsFormType } from '../type';
 
-const inferTsDefinitionFromZod = (zodSchema: ZodTypeAny, identifier: string): string => {
-  const { node } = zodToTs(zodSchema, identifier);
-
-  return printNode(node);
-};
-
-export enum JwtCustomizerTypeDefinitionKey {
-  JwtCustomizerUserContext = 'JwtCustomizerUserContext',
-  AccessTokenPayload = 'AccessTokenPayload',
-  ClientCredentialsPayload = 'ClientCredentialsPayload',
-  EnvironmentVariables = 'EnvironmentVariables',
-}
-
-const getJwtCustomizerUserContextTsDefinition = () =>
-  inferTsDefinitionFromZod(
-    jwtCustomizerUserContextGuard,
-    JwtCustomizerTypeDefinitionKey.JwtCustomizerUserContext
-  );
-
-const getAccessTokenPayloadTsDefinition = () =>
-  inferTsDefinitionFromZod(
-    accessTokenPayloadGuard,
-    JwtCustomizerTypeDefinitionKey.AccessTokenPayload
-  );
-
-const getClientCredentialsPayloadTsDefinition = () =>
-  inferTsDefinitionFromZod(
-    clientCredentialsPayloadGuard,
-    JwtCustomizerTypeDefinitionKey.JwtCustomizerUserContext
-  );
+export { JwtCustomizerTypeDefinitionKey } from '@/consts/jwt-customizer-type-definition';
 
 export const buildAccessTokenJwtCustomizerContextTsDefinition = () => {
-  return `declare type ${
-    JwtCustomizerTypeDefinitionKey.JwtCustomizerUserContext
-  } = ${getJwtCustomizerUserContextTsDefinition()};
+  return `declare ${jwtCustomizerUserContextTypeDefinition}
 
-  declare type ${
-    JwtCustomizerTypeDefinitionKey.AccessTokenPayload
-  } = ${getAccessTokenPayloadTsDefinition()};
-  `;
+  declare ${accessTokenPayloadTypeDefinition}`;
 };
 
-export const buildClientCredentialsJwtCustomizerContextTsDefinition = () => `declare type ${
-  JwtCustomizerTypeDefinitionKey.ClientCredentialsPayload
-} = ${getClientCredentialsPayloadTsDefinition()};
-`;
+export const buildClientCredentialsJwtCustomizerContextTsDefinition = () =>
+  `declare ${clientCredentialsPayloadTypeDefinition}`;
 
 export const buildEnvironmentVariablesTypeDefinition = (
   envVariables?: JwtClaimsFormType['environmentVariables']

packages/console/tsconfig.scripts.gen.json

@@ -0,0 +1,7 @@
+{
+  "extends": "@silverhand/ts-config/tsconfig.base",
+  "compilerOptions": {
+    "outDir": "scripts-js"
+  },
+  "include": ["scripts"]
+}