From 4d38276ae057b39c7a0de4eeecd9c6cf8b3993fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=8Dcaro=20Guerra?= Date: Wed, 11 Dec 2024 13:43:13 -0300 Subject: [PATCH] refactor(translation): move translation context to host, to allow access to the correct host context in studio GitOrigin-RevId: 3550c13c9af3dba5354c3e5840a0624a51672298 --- packages/host/src/exports.ts | 1 + packages/host/src/translation.tsx | 29 ++++++++++ packages/loader-react/src/loader-server.tsx | 2 + packages/react-web/src/index-common.tsx | 12 ++-- packages/react-web/src/render/ssr.tsx | 19 ++++--- packages/react-web/src/render/translation.tsx | 57 +++++++++---------- 6 files changed, 75 insertions(+), 45 deletions(-) create mode 100644 packages/host/src/translation.tsx diff --git a/packages/host/src/exports.ts b/packages/host/src/exports.ts index c7792894324..854d904753e 100644 --- a/packages/host/src/exports.ts +++ b/packages/host/src/exports.ts @@ -55,3 +55,4 @@ export { default as registerTrait, } from "./registerTrait"; export { default as repeatedElement } from "./repeatedElement"; +export * from "./translation"; diff --git a/packages/host/src/translation.tsx b/packages/host/src/translation.tsx new file mode 100644 index 00000000000..c26932bd4e4 --- /dev/null +++ b/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; +} diff --git a/packages/loader-react/src/loader-server.tsx b/packages/loader-react/src/loader-server.tsx index 784123c4f86..ecaca481b05 100644 --- a/packages/loader-react/src/loader-server.tsx +++ b/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) => , usePlasmicLinkMaybe: () => undefined, diff --git a/packages/react-web/src/index-common.tsx b/packages/react-web/src/index-common.tsx index 91e438e5f90..dde161d1b24 100644 --- a/packages/react-web/src/index-common.tsx +++ b/packages/react-web/src/index-common.tsx @@ -1,5 +1,6 @@ // Utilities used by generated code import _classNames from "classnames"; +export { PlasmicTranslator } from "@plasmicapp/host"; export { PlasmicPageGuard, withPlasmicPageGuard, @@ -7,15 +8,15 @@ export { 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"; diff --git a/packages/react-web/src/render/ssr.tsx b/packages/react-web/src/render/ssr.tsx index 85b9bd27f5f..ef611217442 100644 --- a/packages/react-web/src/render/ssr.tsx +++ b/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,14 +73,14 @@ export function PlasmicRootProvider(props: PlasmicRootProviderProps) { return ( = 18} - wrapper={(children) => ( + wrapper={(children_) => ( )} @@ -87,7 +88,7 @@ export function PlasmicRootProvider(props: PlasmicRootProviderProps) { {children}} + wrapper={(children_) => {children_}} > React.ReactNode; - -export interface PlasmicI18NContextValue { - translator?: PlasmicTranslator; - tagPrefix?: string; -} +// Make the refactor to host backwards compatible for loader +export const PlasmicTranslatorContext = + HostPlasmicTranslatorContext ?? + React.createContext( + 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 { - 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(v: any, key: K): v is Record { return typeof v === "object" && v !== null && key in v; } + +function isIterable(val: any): val is Iterable { + return val != null && typeof val[Symbol.iterator] === "function"; +}