Run code before SSR and CSR in RC

I'm upgrading to RC from 1.120.

Prior RC, I had i18n setup with lingui similar to https://github.com/lingui/js-lingui/tree/main/examples/tanstack-start

// ssr.ts
/// <reference types="vinxi/types/server" />
import { i18n } from "@lingui/core"
import {
  createStartHandler,
  defaultStreamHandler,
  defineEventHandler,
} from "@tanstack/react-start/server"
import { getRouterManifest } from "@tanstack/react-start/router-manifest"

import { createRouter } from "./router"
import { setupLocaleFromRequest } from "./modules/lingui/i18n.server"

export default defineEventHandler(async (event) => {
  await setupLocaleFromRequest()

  return createStartHandler({
    createRouter: () => {
      return createRouter({ i18n })
    },
    getRouterManifest,
  })(defaultStreamHandler)(event)
})

// ssr.ts
/// <reference types="vinxi/types/server" />
import { i18n } from "@lingui/core"
import {
  createStartHandler,
  defaultStreamHandler,
  defineEventHandler,
} from "@tanstack/react-start/server"
import { getRouterManifest } from "@tanstack/react-start/router-manifest"

import { createRouter } from "./router"
import { setupLocaleFromRequest } from "./modules/lingui/i18n.server"

export default defineEventHandler(async (event) => {
  await setupLocaleFromRequest()

  return createStartHandler({
    createRouter: () => {
      return createRouter({ i18n })
    },
    getRouterManifest,
  })(defaultStreamHandler)(event)
})

// __root.tsx
function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html lang={i18n.locale}>

// __root.tsx
function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html lang={i18n.locale}>

// client.ts
/// <reference types="vinxi/types/client" />
import { i18n } from "@lingui/core"
import { hydrateRoot } from "react-dom/client"
import { StartClient } from "@tanstack/react-start"
import { dynamicActivate } from "./modules/lingui/i18n"

import { createRouter } from "./router"

// The lang should be set by the server
dynamicActivate(document.documentElement.lang)

const router = createRouter({ i18n })

hydrateRoot(document, <StartClient router={router} />)

// client.ts
/// <reference types="vinxi/types/client" />
import { i18n } from "@lingui/core"
import { hydrateRoot } from "react-dom/client"
import { StartClient } from "@tanstack/react-start"
import { dynamicActivate } from "./modules/lingui/i18n"

import { createRouter } from "./router"

// The lang should be set by the server
dynamicActivate(document.documentElement.lang)

const router = createRouter({ i18n })

hydrateRoot(document, <StartClient router={router} />)

In RC, client.ts is the same but I don't know how to inject it to

server.ts

server.ts

The problem I want to solve is to call

dynamicActivate

dynamicActivate

(which internally imports messages and sets the active locale) before SSR and CSR

I considered global middleware at

start.ts

start.ts

(1/2)

GitHub

js-lingui/examples/tanstack-start at main · lingui/js-lingui

A readable, automated, and optimized (2 kb) internationalization for JavaScript - lingui/js-lingui

js-lingui/examples/tanstack-start at main · lingui/js-lingui

TanStack•6mo ago•

28 replies

abstract-purple

Run code before SSR and CSR in RC

I'm upgrading to RC from 1.120.

Prior RC, I had i18n setup with lingui similar to https://github.com/lingui/js-lingui/tree/main/examples/tanstack-start

// ssr.ts
/// <reference types="vinxi/types/server" />
import { i18n } from "@lingui/core"
import {
  createStartHandler,
  defaultStreamHandler,
  defineEventHandler,
} from "@tanstack/react-start/server"
import { getRouterManifest } from "@tanstack/react-start/router-manifest"

import { createRouter } from "./router"
import { setupLocaleFromRequest } from "./modules/lingui/i18n.server"

export default defineEventHandler(async (event) => {
  await setupLocaleFromRequest()

  return createStartHandler({
    createRouter: () => {
      return createRouter({ i18n })
    },
    getRouterManifest,
  })(defaultStreamHandler)(event)
})

// ssr.ts
/// <reference types="vinxi/types/server" />
import { i18n } from "@lingui/core"
import {
  createStartHandler,
  defaultStreamHandler,
  defineEventHandler,
} from "@tanstack/react-start/server"
import { getRouterManifest } from "@tanstack/react-start/router-manifest"

import { createRouter } from "./router"
import { setupLocaleFromRequest } from "./modules/lingui/i18n.server"

export default defineEventHandler(async (event) => {
  await setupLocaleFromRequest()

  return createStartHandler({
    createRouter: () => {
      return createRouter({ i18n })
    },
    getRouterManifest,
  })(defaultStreamHandler)(event)
})

// __root.tsx
function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html lang={i18n.locale}>

// __root.tsx
function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html lang={i18n.locale}>

// client.ts
/// <reference types="vinxi/types/client" />
import { i18n } from "@lingui/core"
import { hydrateRoot } from "react-dom/client"
import { StartClient } from "@tanstack/react-start"
import { dynamicActivate } from "./modules/lingui/i18n"

import { createRouter } from "./router"

// The lang should be set by the server
dynamicActivate(document.documentElement.lang)

const router = createRouter({ i18n })

hydrateRoot(document, <StartClient router={router} />)

// client.ts
/// <reference types="vinxi/types/client" />
import { i18n } from "@lingui/core"
import { hydrateRoot } from "react-dom/client"
import { StartClient } from "@tanstack/react-start"
import { dynamicActivate } from "./modules/lingui/i18n"

import { createRouter } from "./router"

// The lang should be set by the server
dynamicActivate(document.documentElement.lang)

const router = createRouter({ i18n })

hydrateRoot(document, <StartClient router={router} />)

In RC, client.ts is the same but I don't know how to inject it to

server.ts

server.ts

The problem I want to solve is to call

dynamicActivate

dynamicActivate

(which internally imports messages and sets the active locale) before SSR and CSR

I considered global middleware at

start.ts

start.ts

(1/2)

GitHub

js-lingui/examples/tanstack-start at main · lingui/js-lingui

A readable, automated, and optimized (2 kb) internationalization for JavaScript - lingui/js-lingui

Run code before SSR and CSR in RC

Run code before SSR and CSR in RC

Similar Threads

Similar Threads

Similar Threads