fix: update STREAM_API_GRPC_ADDR and refactor secure-json-transformer usage

.deploy/stream.ui-production.yaml

@@ -7,7 +7,7 @@ metadata:
   labels:
     app: stream-ui
 data:
-  STREAM_API_GRPC_ADDR: "stream.api-svc:9000"
+  STREAM_API_GRPC_ADDR: "stream.api-svc"
   GOOGLE_AUTH_FINALIZE_PATH: "/auth/google/finalize"
   STREAM_INTERNAL_AUTH_MARKER: "stream_maker_123xxx"
   STREAM_UI_JWT_SECRET: "xxx_stream_maker_123_xxx"

components.d.ts

@@ -38,6 +38,7 @@ declare module 'vue' {
     CheckMarkIcon: typeof import('./src/components/icons/CheckMarkIcon.vue')['default']
     ClientOnly: typeof import('./src/components/ClientOnly.tsx')['default']
     CoinsIcon: typeof import('./src/components/icons/CoinsIcon.vue')['default']
+    copy: typeof import('./src/components/icons/UserIcon copy.vue')['default']
     Credit: typeof import('./src/components/icons/Credit.vue')['default']
     CreditCardIcon: typeof import('./src/components/icons/CreditCardIcon.vue')['default']
     DashboardLayout: typeof import('./src/components/DashboardLayout.vue')['default']
@@ -131,6 +132,7 @@ declare global {
   const CheckMarkIcon: typeof import('./src/components/icons/CheckMarkIcon.vue')['default']
   const ClientOnly: typeof import('./src/components/ClientOnly.tsx')['default']
   const CoinsIcon: typeof import('./src/components/icons/CoinsIcon.vue')['default']
+  const copy: typeof import('./src/components/icons/UserIcon copy.vue')['default']
   const Credit: typeof import('./src/components/icons/Credit.vue')['default']
   const CreditCardIcon: typeof import('./src/components/icons/CreditCardIcon.vue')['default']
   const DashboardLayout: typeof import('./src/components/DashboardLayout.vue')['default']

src/api/rpcclient.ts

@@ -7,9 +7,7 @@ const publicEndpoint = "/rpc-public";
 const url = import.meta.env.SSR ? "http://localhost" : "";
 const publicMethods = ["login", "register", "forgotPassword", "resetPassword", "getGoogleLoginUrl"];
 // src/client/trpc-client-transformer.ts
-import {
+import clientJSON from "@/shared/secure-json-transformer";
-  clientJSON
-} from "@/shared/secure-json-transformer";
 
 
 // export function createTrpcClientTransformer(cfg: ServerPublicKeyConfig) {
@@ -26,12 +24,7 @@ export const client = proxyTinyRpc<RpcRoutes>({
       return await httpClientAdapter({
         url: `${url}${targetEndpoint}`,
         pathsForGET: ["health"],
-        JSON: {
+        JSON: clientJSON,
-          // parse: clientJSON.parse,
-          parse: (v, fn) => JSON.parse(v),
-          // stringify: clientJSON.stringify,
-          stringify: (v, fn) => JSON.stringify(v),
-        },
         headers: () => Promise.resolve({})
       }).send(data);
     },

src/lib/translation/index.ts

@@ -2,7 +2,7 @@ import i18next from "i18next";
 import I18NextHttpBackend, { HttpBackendOptions } from "i18next-http-backend";
 
 const backendOptions: HttpBackendOptions = {
-    loadPath: `${process.env.FRONTEND_BASE_URL || ''}/locales/{{lng}}/{{ns}}.json`,
+    loadPath: `${import.meta.env.SSR ? process.env.FRONTEND_BASE_URL : ''}/locales/{{lng}}/{{ns}}.json`,
     
     request: async (_options, url, _payload, callback) => {
         try {

src/server/routes/rpc/index.ts

@@ -1,6 +1,6 @@
 import { authenticate } from "@/server/middlewares/authenticate";
 import { getGrpcMetadataFromContext } from "@/server/services/grpcClient";
-import { parse, stringify } from "@/shared/secure-json-transformer";
+import clientJSON from "@/shared/secure-json-transformer";
 import { Metadata } from "@grpc/grpc-js";
 import { exposeTinyRpc, httpServerAdapter } from "@hiogawa/tiny-rpc";
 import { Hono } from "hono";
@@ -33,9 +33,9 @@ export const pathsForGET: (keyof typeof protectedRoutes)[] = ["health"];
 
 export function registerRpcRoutes(app: Hono) {
   const JSONProcessor: JsonTransformer = {
-    parse: (v) => parse(v, () => getContext()?.req.header()),
+    parse: (v) => clientJSON.parse(v, () => getContext()?.req.header()),
     stringify: (v) =>
-      stringify(v, (headers) => {
+      clientJSON.stringify(v, (headers) => {
         const ctx = getContext();
         if (ctx) {
           Object.entries(headers).forEach(([k, v]) => {
@@ -48,7 +48,7 @@ export function registerRpcRoutes(app: Hono) {
   const protectedHandler = exposeTinyRpc({
     routes: protectedRoutes,
     adapter: httpServerAdapter({ endpoint: "/rpc", 
-      // JSON: JSONProcessor
+      JSON: JSONProcessor
      }),
   });
   app.use(publicEndpoint, async (c, next) => {
@@ -56,7 +56,7 @@ export function registerRpcRoutes(app: Hono) {
       routes: publicRoutes,
       adapter: httpServerAdapter({
         endpoint: "/rpc-public",
-        // JSON: JSONProcessor,
+        JSON: JSONProcessor,
       }),
     });
     const res = await publicHandler({ request: c.req.raw });

src/shared/secure-json-transformer.ts

@@ -152,7 +152,10 @@ export function parse(d: string, getHeader?: () => Record<string, string>): any
       const parsed = JSON.parse(utf8Decode(opened));
       return superjson.deserialize(parsed);
     }
-export const clientJSON: JsonTransformer = {
+export default import.meta.env.DEV ? {
+  parse: (v: string, fn: any) => JSON.parse(v),
+  stringify: (v: any, fn: any) => JSON.stringify(v),
+} : {
   stringify,
   parse,
 }