refactor(translation): move translation context to host, to allow acc…

…ess to the correct host context in studio

GitOrigin-RevId: 3550c13c9af3dba5354c3e5840a0624a51672298

packages/host/src/exports.ts

@@ -55,3 +55,4 @@ export {
   default as registerTrait,
 } from "./registerTrait";
 export { default as repeatedElement } from "./repeatedElement";
+export * from "./translation";

packages/host/src/translation.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+export type PlasmicTranslator = (
+  str: string,
+  opts?: {
+    components?: {
+      [key: string]: React.ReactElement;
+    };
+  }
+) => React.ReactNode;
+
+export interface PlasmicI18NContextValue {
+  translator?: PlasmicTranslator;
+  tagPrefix?: string;
+}
+
+export const PlasmicTranslatorContext = React.createContext<
+  PlasmicI18NContextValue | PlasmicTranslator | undefined
+>(undefined);
+
+export function usePlasmicTranslator() {
+  const _t = React.useContext(PlasmicTranslatorContext);
+  const translator = _t
+    ? typeof _t === "function"
+      ? _t
+      : _t.translator
+    : undefined;
+  return translator;
+}

packages/loader-react/src/loader-server.tsx

@@ -384,6 +384,8 @@ export class InternalPrepassPlasmicLoader extends BaseInternalPlasmicComponentLo
                   get: () => noop,
                 }
               ),
+            usePlasmicTranslator: () => undefined,
+            PlasmicTranslatorContext: { _currentValue: undefined } as any,
             usePlasmicCanvasContext: () => false,
             usePlasmicLink: () => (props) => <a {...props} />,
             usePlasmicLinkMaybe: () => undefined,

packages/react-web/src/index-common.tsx

@@ -1,21 +1,22 @@
 // Utilities used by generated code
 import _classNames from "classnames";
+export { PlasmicTranslator } from "@plasmicapp/host";
 export {
   PlasmicPageGuard,
   withPlasmicPageGuard,
 } from "./auth/PlasmicPageGuard";
 export { omit, pick } from "./common";
 export { HTMLElementRefOf, StrictProps } from "./react-utils";
 export {
+  Flex,
+  MultiChoiceArg,
+  SingleBooleanChoiceArg,
+  SingleChoiceArg,
   createPlasmicElementProxy,
   deriveRenderOpts,
-  Flex,
   hasVariant,
   makeFragment,
   mergeVariantsWithStates,
-  MultiChoiceArg,
-  SingleBooleanChoiceArg,
-  SingleChoiceArg,
   wrapWithClassName,
 } from "./render/elements";
 export { ensureGlobalVariants } from "./render/global-variants";
@@ -33,9 +34,8 @@ export {
 } from "./render/ssr";
 export { Stack } from "./render/Stack";
 export {
-  genTranslatableString,
-  PlasmicTranslator,
   Trans,
+  genTranslatableString,
   usePlasmicTranslator,
 } from "./render/translation";
 export { useTrigger } from "./render/triggers";

packages/react-web/src/render/ssr.tsx

@@ -2,16 +2,17 @@ import {
   PlasmicDataSourceContextProvider,
   PlasmicDataSourceContextValue,
 } from "@plasmicapp/data-sources-context";
-import { DataProvider, PlasmicLinkProvider } from "@plasmicapp/host";
+import {
+  DataProvider,
+  PlasmicI18NContextValue,
+  PlasmicLinkProvider,
+  PlasmicTranslator,
+} from "@plasmicapp/host";
 import { SSRProvider, useIsSSR as useAriaIsSSR } from "@react-aria/ssr";
 import * as React from "react";
 import { PlasmicHeadContext } from "./PlasmicHead";
 import { PlasmicLinkInternal } from "./PlasmicLink";
-import {
-  PlasmicI18NContextValue,
-  PlasmicTranslator,
-  PlasmicTranslatorContext,
-} from "./translation";
+import { PlasmicTranslatorContext } from "./translation";
 export {
   PlasmicDataSourceContextProvider,
   useCurrentUser,
@@ -72,22 +73,22 @@ export function PlasmicRootProvider(props: PlasmicRootProviderProps) {
   return (
     <MaybeWrap
       cond={!disableLoadingBoundary && reactMajorVersion >= 18}
-      wrapper={(children) => (
+      wrapper={(children_) => (
         <DataProvider
           name="plasmicInternalEnableLoadingBoundary"
           hidden
           data={true}
         >
           <React.Suspense fallback={suspenseFallback ?? "Loading..."}>
-            {children}
+            {children_}
           </React.Suspense>
         </DataProvider>
       )}
     >
       <PlasmicRootContext.Provider value={context}>
         <MaybeWrap
           cond={reactMajorVersion < 18}
-          wrapper={(children) => <SSRProvider>{children}</SSRProvider>}
+          wrapper={(children_) => <SSRProvider>{children_}</SSRProvider>}
         >
           <PlasmicDataSourceContextProvider value={dataSourceContextValue}>
             <PlasmicTranslatorContext.Provider

packages/react-web/src/render/translation.tsx

@@ -1,42 +1,35 @@
+import {
+  PlasmicTranslatorContext as HostPlasmicTranslatorContext,
+  PlasmicI18NContextValue,
+  PlasmicTranslator,
+  usePlasmicTranslator as useHostPlasmicTranslator,
+} from "@plasmicapp/host";
 import React from "react";
 
-export type PlasmicTranslator = (
-  str: string,
-  opts?: {
-    components?: {
-      [key: string]: React.ReactElement;
-    };
-  }
-) => React.ReactNode;
-
-export interface PlasmicI18NContextValue {
-  translator?: PlasmicTranslator;
-  tagPrefix?: string;
-}
+// Make the refactor to host backwards compatible for loader
+export const PlasmicTranslatorContext =
+  HostPlasmicTranslatorContext ??
+  React.createContext<PlasmicI18NContextValue | PlasmicTranslator | undefined>(
+    undefined
+  );
 
-export const PlasmicTranslatorContext = React.createContext<
-  PlasmicI18NContextValue | PlasmicTranslator | undefined
->(undefined);
+export const usePlasmicTranslator =
+  useHostPlasmicTranslator ??
+  (() => {
+    const _t = React.useContext(PlasmicTranslatorContext);
+    const translator = _t
+      ? typeof _t === "function"
+        ? _t
+        : _t.translator
+      : undefined;
+    return translator;
+  });
 
 export interface TransProps {
   transKey?: string;
   children?: React.ReactNode;
 }
 
-function isIterable(val: any): val is Iterable<any> {
-  return val != null && typeof val[Symbol.iterator] === "function";
-}
-
-export function usePlasmicTranslator() {
-  const _t = React.useContext(PlasmicTranslatorContext);
-  const translator = _t
-    ? typeof _t === "function"
-      ? _t
-      : _t.translator
-    : undefined;
-  return translator;
-}
-
 export function genTranslatableString(
   elt: React.ReactNode,
   opts?: {
@@ -135,3 +128,7 @@ function warnNoTranslationFunctionAtMostOnce() {
 function hasKey<K extends string>(v: any, key: K): v is Record<K, any> {
   return typeof v === "object" && v !== null && key in v;
 }
+
+function isIterable(val: any): val is Iterable<any> {
+  return val != null && typeof val[Symbol.iterator] === "function";
+}