@plasmicapp/loader-react 1.0.205 → 1.0.207

package/dist/loader.d.ts

@@ -1,29 +1,10 @@
 import { ComponentMeta as InternalCodeComponentMeta, GlobalContextMeta as InternalGlobalContextMeta, TraitMeta } from '@plasmicapp/host';
-import { ComponentMeta, LoaderBundleCache, LoaderBundleOutput, PageMeta, TrackRenderOptions } from '@plasmicapp/loader-core';
+import { ComponentMeta, LoaderBundleOutput, TrackRenderOptions } from '@plasmicapp/loader-core';
 import React from 'react';
 import { ComponentLookup } from './component-lookup';
-import { GlobalVariantSpec } from './PlasmicRootProvider';
+import { FetchComponentDataOpts, InitOptions } from './loader-react-server';
+import type { GlobalVariantSpec } from './PlasmicRootProvider';
 import { ComponentLookupSpec } from './utils';
-export interface InitOptions {
-    projects: ProjectOption[];
-    cache?: LoaderBundleCache;
-    platform?: 'react' | 'nextjs' | 'gatsby';
-    preview?: boolean;
-    host?: string;
-    onClientSideFetch?: 'warn' | 'error';
-    i18nKeyScheme?: 'content' | 'hash';
-    /**
-     * By default, fetchComponentData() and fetchPages() calls cached in memory
-     * with the PlasmicComponentLoader instance.  If alwaysFresh is true, then
-     * data is always freshly fetched over the network.
-     */
-    alwaysFresh?: boolean;
-}
-interface ProjectOption {
-    id: string;
-    token: string;
-    version?: string;
-}
 export interface ComponentRenderData {
     entryCompMetas: (ComponentMeta & {
         params?: Record<string, string>;
@@ -31,7 +12,6 @@ export interface ComponentRenderData {
     bundle: LoaderBundleOutput;
     remoteFontUrls: string[];
 }
-export declare function initPlasmicLoader(opts: InitOptions): PlasmicComponentLoader;
 interface PlasmicRootWatcher {
     onDataFetched?: () => void;
 }
@@ -63,16 +43,16 @@ export declare type FetchPagesOpts = {
 };
 export declare class InternalPlasmicComponentLoader {
     private opts;
-    private fetcher;
-    private registry;
+    private readonly reactServerLoader;
+    private readonly registry;
     private subs;
     private roots;
     private globalVariants;
-    private bundle;
     private tracker;
     private substitutedComponents;
     private substitutedGlobalVariantHooks;
     constructor(opts: InitOptions);
+    getBundle(): LoaderBundleOutput;
     setGlobalVariants(globalVariants: GlobalVariantSpec[]): void;
     getGlobalVariants(): GlobalVariantSpec[];
     registerModules(modules: Record<string, any>): void;
@@ -84,18 +64,15 @@ export declare class InternalPlasmicComponentLoader {
     subscribePlasmicRoot(watcher: PlasmicRootWatcher): void;
     unsubscribePlasmicRoot(watcher: PlasmicRootWatcher): void;
     clearCache(): void;
-    private maybeGetCompMetas;
+    getLookup(): ComponentLookup;
     maybeFetchComponentData(specs: ComponentLookupSpec[], opts?: FetchComponentDataOpts): Promise<ComponentRenderData | null>;
     maybeFetchComponentData(...specs: ComponentLookupSpec[]): Promise<ComponentRenderData | null>;
     fetchComponentData(specs: ComponentLookupSpec[], opts?: FetchComponentDataOpts): Promise<ComponentRenderData>;
     fetchComponentData(...specs: ComponentLookupSpec[]): Promise<ComponentRenderData>;
-    fetchPages(opts?: FetchPagesOpts): Promise<PageMeta[]>;
+    fetchPages(opts?: FetchPagesOpts): Promise<import("@plasmicapp/loader-core").PageMeta[]>;
     fetchComponents(): Promise<ComponentMeta[]>;
-    getLookup(): ComponentLookup;
     getActiveSplits(): import("@plasmicapp/loader-core").Split[];
     trackConversion(value?: number): void;
-    private fetchMissingData;
-    private maybeReportClientSideFetch;
     getActiveVariation(opts: {
         traits: Record<string, string | number | boolean>;
         getKnownValue: (key: string) => string | undefined;
@@ -104,10 +81,7 @@ export declare class InternalPlasmicComponentLoader {
     getTeamIds(): string[];
     getProjectIds(): string[];
     trackRender(opts?: TrackRenderOptions): void;
-    private fetchAllData;
-    private mergeBundle;
     private refreshRegistry;
-    private ensureFetcher;
 }
 /**
  * Library for fetching component data, and registering
@@ -172,7 +146,7 @@ export declare class PlasmicComponentLoader {
     /**
      * Returns all the page component metadata for these projects.
      */
-    fetchPages(opts?: FetchPagesOpts): Promise<PageMeta[]>;
+    fetchPages(opts?: FetchPagesOpts): Promise<import("@plasmicapp/loader-core").PageMeta[]>;
     /**
      * Returns all components metadata for these projects.
      */
@@ -191,21 +165,4 @@ export declare class PlasmicComponentLoader {
     trackConversion(value?: number): void;
     clearCache(): void;
 }
-interface FetchComponentDataOpts {
-    /**
-     * Will fetch either code targeting SSR or browser hydration in the
-     * returned bundle.
-     *
-     * By default, the target is browser. That's okay, because even when
-     * doing SSR, as long as you are using the same instance of PlasmicLoader
-     * that was used to fetch component data, it will still know how to get at
-     * the server code.
-     *
-     * But, if you are building your own SSR solution, where fetching and rendering
-     * are using different instances of PlasmicLoader, then you'll want to make
-     * sure that when you fetch, you are fetching the right one to be used in the
-     * right environment for either SSR or browser hydration.
-     */
-    target?: 'server' | 'browser';
-}
 export {};

package/dist/utils.d.ts

@@ -1,4 +1,5 @@
 import { ComponentMeta } from '@plasmicapp/loader-core';
+export declare const isBrowser: boolean;
 export declare type ComponentLookupSpec = string | {
     name: string;
     projectId?: string;

package/dist-react-server/PlasmicComponent.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+export declare function PlasmicComponent(props: {
+    /**
+     * Name of the component to render, or the path of the page component
+     */
+    component: string;
+    /**
+     * Optionally specify a projectId if there are multiple components
+     * of the same name from different projects
+     */
+    projectId?: string;
+    /**
+     * If you used registerComponent(), then if the name matches a registered
+     * component, that component is used.  If you want the Plasmic-generated
+     * component instead, specify forceOriginal.
+     */
+    forceOriginal?: boolean;
+    componentProps?: any;
+}): React.ReactElement | null;

package/dist-react-server/PlasmicRootProvider.d.ts

@@ -0,0 +1,92 @@
+import { PlasmicDataSourceContextValue } from '@plasmicapp/data-sources-context';
+import * as React from 'react';
+import { ComponentRenderData, InternalPlasmicComponentLoader, PlasmicComponentLoader } from './loader';
+interface PlasmicRootContextValue extends PlasmicDataSourceContextValue {
+    globalVariants?: GlobalVariantSpec[];
+    globalContextsProps?: Record<string, any>;
+    loader: InternalPlasmicComponentLoader;
+    variation?: Record<string, string>;
+    translator?: PlasmicTranslator;
+    Head?: React.ComponentType<any>;
+}
+export interface GlobalVariantSpec {
+    name: string;
+    projectId?: string;
+    value: any;
+}
+export declare type PlasmicTranslator = (str: string, opts?: {
+    components?: {
+        [key: string]: React.ReactElement | React.ReactFragment;
+    };
+}) => React.ReactNode;
+/**
+ * PlasmicRootProvider should be used at the root of your page
+ * or application.
+ */
+export declare function PlasmicRootProvider(props: {
+    /**
+     * The global PlasmicComponentLoader instance you created via
+     * initPlasmicLoader().
+     */
+    loader: PlasmicComponentLoader;
+    /**
+     * Global variants to activate for Plasmic components
+     */
+    globalVariants?: GlobalVariantSpec[];
+    children?: React.ReactNode;
+    /**
+     * If true, will skip rendering css
+     */
+    skipCss?: boolean;
+    /**
+     * If true, will skip installing fonts
+     */
+    skipFonts?: boolean;
+    /**
+     * If you have pre-fetched component data via PlasmicComponentLoader,
+     * you can pass them in here; PlasmicComponent will avoid fetching
+     * component data that have already been pre-fetched.
+     */
+    prefetchedData?: ComponentRenderData;
+    /**
+     * If you have pre-fetched data that are needed by usePlasmicQueryData(),
+     * then pass in the pre-fetched cache here, mapping query key to fetched data.
+     */
+    prefetchedQueryData?: Record<string, any>;
+    /**
+     * Specifies whether usePlasmicQueryData() should be operating in suspense mode
+     * (throwing promises).
+     */
+    suspenseForQueryData?: boolean;
+    /**
+     * Override your Global Contexts Provider props. This is a map from
+     * globalContextComponentNameProps to object of props to use for that
+     * component.
+     */
+    globalContextsProps?: Record<string, any>;
+    /**
+     * Specifies a mapping of split id to slice id that should be activated
+     */
+    variation?: Record<string, string>;
+    /**
+     * Translator function to be used for text blocks
+     */
+    translator?: PlasmicTranslator;
+    /**
+     * Head component to use in PlasmicHead component (e.g. Head from next/head
+     * or Helmet from react-helmet).
+     */
+    Head?: React.ComponentType<any>;
+    /**
+     * Page path parameters (e.g. {slug: "foo"} if page path is
+     * /products/[slug] and URI is /products/foo).
+     */
+    pageParams?: Record<string, string | string[] | undefined>;
+    /**
+     * Page query parameters (e.g. {q: "foo"} if page path is
+     * /some/path?q=foo).
+     */
+    pageQuery?: Record<string, string | string[] | undefined>;
+}): JSX.Element;
+export declare function usePlasmicRootContext(): PlasmicRootContextValue | undefined;
+export {};

package/dist-react-server/bundles.d.ts

@@ -0,0 +1,7 @@
+import { ComponentMeta, LoaderBundleOutput } from '@plasmicapp/loader-core';
+import type { ComponentRenderData } from './loader';
+export declare function prepComponentData(bundle: LoaderBundleOutput, compMetas: ComponentMeta[], opts?: {
+    target?: 'browser' | 'server';
+}): ComponentRenderData;
+export declare function mergeBundles(target: LoaderBundleOutput, from: LoaderBundleOutput): LoaderBundleOutput;
+export declare const convertBundlesToComponentRenderData: (bundles: LoaderBundleOutput[], compMetas: ComponentMeta[]) => ComponentRenderData | null;

package/dist-react-server/component-lookup.d.ts

@@ -0,0 +1,21 @@
+import { AssetModule, ComponentMeta, FontMeta, GlobalGroupMeta, LoaderBundleOutput, Registry } from '@plasmicapp/loader-core';
+import * as React from 'react';
+import { ComponentLookupSpec } from './utils';
+export declare class ComponentLookup {
+    private bundle;
+    private registry;
+    constructor(bundle: LoaderBundleOutput, registry: Registry);
+    getComponentMeta(spec: ComponentLookupSpec): ComponentMeta | undefined;
+    getComponent<P extends React.ComponentType = any>(spec: ComponentLookupSpec, opts?: {
+        forceOriginal?: boolean;
+    }): any;
+    hasComponent(spec: ComponentLookupSpec): boolean;
+    getGlobalContexts(): {
+        meta: GlobalGroupMeta;
+        context: any;
+    }[];
+    getGlobalContextsProvider(spec: ComponentLookupSpec): any;
+    getRootProvider(): any;
+    getCss(): AssetModule[];
+    getRemoteFonts(): FontMeta[];
+}

package/dist-react-server/global-variants.d.ts

@@ -0,0 +1,13 @@
+/**
+ * We don't actually make use of the global variant React contexts generated
+ * in the bundle.  That's because we would have to wait until the data is
+ * loaded before we can set up the context providers, but setting up context
+ * providers will mutate the React tree and invalidate all the children. That means
+ * once data comes in, we'll re-render the React tree from the providers down
+ * in a way that will lose all existing React state.  Therefore, instead,
+ * we always have a single context provided -- the PlasmicRootContext -- and we
+ * create these fake useGlobalVariant() hooks that just read from that
+ * PlasmicRootContext.  This allows us to have a stable React tree before and
+ * after the data load.
+ */
+export declare function createUseGlobalVariant(name: string, projectId: string): () => any;

package/dist-react-server/index-react-server.d.ts

@@ -0,0 +1,5 @@
+import 'server-only';
+import { InitOptions, ReactServerPlasmicComponentLoader } from './loader-react-server';
+export * from './index-shared';
+export { ReactServerPlasmicComponentLoader };
+export declare function initPlasmicLoader(opts: InitOptions): ReactServerPlasmicComponentLoader;

package/dist-react-server/index-shared.d.ts

@@ -0,0 +1,6 @@
+/** Shared exports for both "default" and "react-server" exports live here. */
+export type { ComponentMeta, PageMeta, PageMetadata, } from '@plasmicapp/loader-core';
+export { convertBundlesToComponentRenderData } from './bundles';
+export type { ComponentRenderData } from './loader';
+export type { InitOptions } from './loader-react-server';
+export { matchesPagePath } from './utils';

package/dist-react-server/index.d.ts

@@ -0,0 +1,12 @@
+import { InternalPlasmicComponentLoader, PlasmicComponentLoader } from './loader';
+import type { InitOptions } from './loader-react-server';
+export { DataCtxReader, DataProvider, PageParamsProvider, PlasmicCanvasContext, PlasmicCanvasHost, PrimitiveType, PropType, repeatedElement, useDataEnv, usePlasmicCanvasContext, useSelector, useSelectors, } from '@plasmicapp/host';
+export { usePlasmicQueryData } from '@plasmicapp/query';
+export * from './index-shared';
+export { PlasmicComponent } from './PlasmicComponent';
+export { GlobalVariantSpec, PlasmicRootProvider, PlasmicTranslator, } from './PlasmicRootProvider';
+export { extractPlasmicQueryData, plasmicPrepass } from './prepass';
+export { extractPlasmicQueryDataFromElement, hydrateFromElement, renderToElement, renderToString, } from './render';
+export { usePlasmicComponent } from './usePlasmicComponent';
+export { InternalPlasmicComponentLoader, PlasmicComponentLoader };
+export declare function initPlasmicLoader(opts: InitOptions): PlasmicComponentLoader;

package/dist-react-server/index.js

@@ -0,0 +1,8 @@
+
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./loader-react.cjs.production.min.js')
+} else {
+  module.exports = require('./loader-react.cjs.development.js')
+}

package/dist-react-server/loader-react-server.d.ts

@@ -0,0 +1,72 @@
+import { LoaderBundleCache, PageMeta, PlasmicModulesFetcher, PlasmicTracker } from '@plasmicapp/loader-core';
+import { ComponentMeta, LoaderBundleOutput } from '@plasmicapp/loader-fetcher';
+import { ComponentRenderData, FetchPagesOpts } from './loader';
+import { ComponentLookupSpec } from './utils';
+export interface InitOptions {
+    projects: {
+        id: string;
+        token: string;
+        version?: string;
+    }[];
+    cache?: LoaderBundleCache;
+    platform?: 'react' | 'nextjs' | 'gatsby';
+    preview?: boolean;
+    host?: string;
+    onClientSideFetch?: 'warn' | 'error';
+    i18nKeyScheme?: 'content' | 'hash';
+    /**
+     * By default, fetchComponentData() and fetchPages() calls cached in memory
+     * with the PlasmicComponentLoader instance.  If alwaysFresh is true, then
+     * data is always freshly fetched over the network.
+     */
+    alwaysFresh?: boolean;
+}
+/** Subset of loader functionality that works on React Server Components. */
+export declare class ReactServerPlasmicComponentLoader {
+    private readonly opts;
+    private readonly fetcher;
+    private readonly tracker;
+    private readonly onBundleMerged?;
+    private readonly onBundleFetched?;
+    private bundle;
+    constructor(args: {
+        opts: InitOptions;
+        fetcher: PlasmicModulesFetcher;
+        tracker: PlasmicTracker;
+        /** Called after `mergeBundle` (including `fetch` calls). */
+        onBundleMerged?: () => void;
+        /** Called after any `fetch` calls. */
+        onBundleFetched?: () => void;
+    });
+    private maybeGetCompMetas;
+    maybeFetchComponentData(specs: ComponentLookupSpec[], opts?: FetchComponentDataOpts): Promise<ComponentRenderData | null>;
+    maybeFetchComponentData(...specs: ComponentLookupSpec[]): Promise<ComponentRenderData | null>;
+    fetchComponentData(specs: ComponentLookupSpec[], opts?: FetchComponentDataOpts): Promise<ComponentRenderData>;
+    fetchComponentData(...specs: ComponentLookupSpec[]): Promise<ComponentRenderData>;
+    fetchPages(opts?: FetchPagesOpts): Promise<PageMeta[]>;
+    fetchComponents(): Promise<ComponentMeta[]>;
+    getActiveSplits(): import("@plasmicapp/loader-core").Split[];
+    private fetchMissingData;
+    private maybeReportClientSideFetch;
+    private fetchAllData;
+    mergeBundle(bundle: LoaderBundleOutput): void;
+    getBundle(): LoaderBundleOutput;
+    clearCache(): void;
+}
+export interface FetchComponentDataOpts {
+    /**
+     * Will fetch either code targeting SSR or browser hydration in the
+     * returned bundle.
+     *
+     * By default, the target is browser. That's okay, because even when
+     * doing SSR, as long as you are using the same instance of PlasmicLoader
+     * that was used to fetch component data, it will still know how to get at
+     * the server code.
+     *
+     * But, if you are building your own SSR solution, where fetching and rendering
+     * are using different instances of PlasmicLoader, then you'll want to make
+     * sure that when you fetch, you are fetching the right one to be used in the
+     * right environment for either SSR or browser hydration.
+     */
+    target?: 'server' | 'browser';
+}