@plasmicapp/loader-react 1.0.399 → 1.0.400

package/dist/index.d.ts

@@ -159,7 +159,7 @@ declare class ComponentLookup {
         context: any;
     }[];
     /** Returns StyleTokensProvider if the project has style token overrides. */
-    maybeGetStyleTokensProvider(spec: ComponentLookupSpec): any;
+    maybeGetStyleTokensProvider(spec: ComponentLookupSpec, styleTokenOverridesProjectId?: string): any;
     getGlobalContextsProvider(spec: ComponentLookupSpec): any;
     getRootProvider(): any;
     getCss(): AssetModule[];
@@ -581,6 +581,13 @@ export declare function PlasmicRootProvider(props: {
      * Fallback value for React.Suspense boundary
      */
     suspenseFallback?: React_2.ReactNode;
+    /**
+     * When Plasmic loads components from multiple projects, we must choose a style token overrides to use that will apply to all components under the root PlasmicComponent.
+     *
+     * If styleTokenOverridesProjectId is set, all PlasmicComponents and their subtrees will use the specified project's style token overrides.
+     * If styleTokenOverridesProjectId it not set, each PlasmicComponent and its subtree will use the style token overrides of the root PlasmicComponent's project.
+     */
+    styleTokenOverridesProjectId?: string;
 } & PlasmicDataSourceContextValue): React_2.JSX.Element;
 
 declare interface PlasmicRootWatcher {

package/dist/index.esm.js

@@ -295,7 +295,8 @@ function PlasmicRootProvider(props) {
     pageQuery,
     suspenseFallback,
     disableLoadingBoundary,
-    disableRootLoadingBoundary
+    disableRootLoadingBoundary,
+    styleTokenOverridesProjectId
   } = props;
   const loader = props.loader.__internal;
   if (prefetchedData) {
@@ -357,7 +358,8 @@ function PlasmicRootProvider(props) {
       disableLoadingBoundary: withCurrentContextValueFallback(
         disableLoadingBoundary,
         "disableLoadingBoundary"
-      )
+      ),
+      styleTokenOverridesProjectId
     };
   }, [
     globalVariants,
@@ -374,6 +376,7 @@ function PlasmicRootProvider(props) {
     authRedirectUri,
     suspenseFallback,
     disableLoadingBoundary,
+    styleTokenOverridesProjectId,
     currentContextValue
   ]);
   React2.useEffect(() => {
@@ -706,9 +709,24 @@ var ComponentLookup = class {
     }));
   }
   /** Returns StyleTokensProvider if the project has style token overrides. */
-  maybeGetStyleTokensProvider(spec) {
+  maybeGetStyleTokensProvider(spec, styleTokenOverridesProjectId) {
     const compMeta = getFirstCompMeta(this.bundle.components, spec);
-    const projectMeta = compMeta ? this.bundle.projects.find((x) => x.id === compMeta.projectId) : void 0;
+    let projectMeta;
+    if (styleTokenOverridesProjectId) {
+      projectMeta = this.bundle.projects.find(
+        (x) => x.id === styleTokenOverridesProjectId
+      );
+      if (!projectMeta) {
+        console.warn(
+          `styleTokenOverridesProjectId "${styleTokenOverridesProjectId}" not found. Defaulting to root component's project.`
+        );
+      }
+    }
+    if (!projectMeta && (compMeta == null ? void 0 : compMeta.projectId)) {
+      projectMeta = this.bundle.projects.find(
+        (x) => x.id === compMeta.projectId
+      );
+    }
     if (!projectMeta || !projectMeta.styleTokensProviderFileName || !this.registry.hasModule(projectMeta.styleTokensProviderFileName) || !projectMeta.hasStyleTokenOverrides) {
       return void 0;
     }
@@ -1365,10 +1383,13 @@ function PlasmicComponent(props) {
     if (isRootLoader) {
       const lookup = loader.getLookup();
       const ReactWebRootProvider = lookup.getRootProvider();
-      const StyleTokensProvider = lookup.maybeGetStyleTokensProvider({
-        name: component,
-        projectId
-      });
+      const StyleTokensProvider = lookup.maybeGetStyleTokensProvider(
+        {
+          name: component,
+          projectId
+        },
+        rootContext.styleTokenOverridesProjectId
+      );
       const GlobalContextsProvider = lookup.getGlobalContextsProvider({
         name: component,
         projectId