@plasmicapp/loader-react 1.0.395 → 2.0.0-alpha.1

package/dist/index.d.ts

@@ -36,6 +36,7 @@ import { react } from 'react';
 import * as React_2 from 'react';
 import { default as React_3 } from 'react';
 import { reactDom } from 'react-dom';
+import ReactDOMClient from 'react-dom/client';
 import { reactJsxDevRuntime } from 'react/jsx-dev-runtime';
 import { reactJsxRuntime } from 'react/jsx-runtime';
 import { Registry } from '@plasmicapp/loader-core';
@@ -237,6 +238,11 @@ export { DataProvider }
  */
 export declare function extractPlasmicQueryData(element: React.ReactElement): Promise<Record<string, any>>;
 
+/**
+ * Pre-renders a Plasmic tree to extract query data.
+ *
+ * This is intended to be used for server-rendered apps.
+ */
 export declare function extractPlasmicQueryDataFromElement(loader: PlasmicComponentLoader, lookup: ComponentLookupSpec, opts?: {
     prefetchedData?: ComponentRenderData;
     componentProps?: any;
@@ -275,7 +281,7 @@ export { GlobalActionsContext }
 
 export { GlobalActionsProvider }
 
-export declare type GlobalContextMeta<P> = Omit<GlobalContextMeta_2<P>, "importPath"> & {
+declare type GlobalContextMeta<P> = Omit<GlobalContextMeta_2<P>, "importPath"> & {
     /**
      * The path to be used when importing the component in the generated code.
      * It can be the name of the package that contains the component, or the path
@@ -291,12 +297,18 @@ export declare interface GlobalVariantSpec {
     value: any;
 }
 
+/**
+ * Hydrates a Plasmic tree in the target element.
+ *
+ * Uses React DOM client API `hydrateRoot`, which is intended to be used from
+ * server-rendered apps.
+ */
 export declare function hydrateFromElement(loader: PlasmicComponentLoader, target: HTMLElement, lookup: ComponentLookupSpec, opts?: {
     prefetchedData?: ComponentRenderData;
     componentProps?: any;
     globalVariants?: GlobalVariantSpec[];
     prefetchedQueryData?: Record<string, any>;
-}): Promise<void>;
+}): ReactDOMClient.Root;
 
 export declare interface InitOptions {
     projects: {
@@ -620,6 +632,12 @@ declare interface ReactServerOps {
     fetchData: typeof useMutablePlasmicQueryData;
 }
 
+/**
+ * Renders a Plasmic tree in the target element.
+ *
+ * Uses React DOM client API `createRoot`, which is intended to be used from
+ * client-rendered apps.
+ */
 export declare function renderToElement(loader: PlasmicComponentLoader, target: HTMLElement, lookup: ComponentLookupSpec, opts?: {
     prefetchedData?: ComponentRenderData;
     componentProps?: any;
@@ -627,8 +645,14 @@ export declare function renderToElement(loader: PlasmicComponentLoader, target:
     prefetchedQueryData?: Record<string, any>;
     pageParams?: Record<string, any>;
     pageQuery?: Record<string, any>;
-}): Promise<void>;
+}): ReactDOMClient.Root;
 
+/**
+ * Renders a Plasmic tree to a string.
+ *
+ * Uses React DOM server API `renderToString`, which is intended to be used for
+ * server-rendered apps.
+ */
 export declare function renderToString(loader: PlasmicComponentLoader, lookup: ComponentLookupSpec, opts?: {
     prefetchedData?: ComponentRenderData;
     componentProps?: any;

package/dist/index.esm.js

@@ -1419,19 +1419,11 @@ function plasmicPrepass(element) {
 // src/render.tsx
 import { extractPlasmicQueryData as extractPlasmicQueryData2 } from "@plasmicapp/prepass";
 import React6 from "react";
-import ReactDOM2 from "react-dom";
-import { renderToString as reactRenderToString } from "react-dom/server";
-function renderToElement(_0, _1, _2) {
-  return __async(this, arguments, function* (loader, target, lookup, opts = {}) {
-    return new Promise((resolve) => {
-      const element = makeElement(loader, lookup, opts);
-      ReactDOM2.render(element, target, () => resolve());
-    });
-  });
-}
+import ReactDOMClient from "react-dom/client";
+import ReactDOMServer from "react-dom/server";
 function renderToString(loader, lookup, opts = {}) {
   const element = makeElement(loader, lookup, opts);
-  return reactRenderToString(element);
+  return ReactDOMServer.renderToString(element);
 }
 function extractPlasmicQueryDataFromElement(_0, _1) {
   return __async(this, arguments, function* (loader, lookup, opts = {}) {
@@ -1439,13 +1431,15 @@ function extractPlasmicQueryDataFromElement(_0, _1) {
     return extractPlasmicQueryData2(element);
   });
 }
-function hydrateFromElement(_0, _1, _2) {
-  return __async(this, arguments, function* (loader, target, lookup, opts = {}) {
-    return new Promise((resolve) => {
-      const element = makeElement(loader, lookup, opts);
-      ReactDOM2.hydrate(element, target, () => resolve());
-    });
-  });
+function renderToElement(loader, target, lookup, opts = {}) {
+  const element = makeElement(loader, lookup, opts);
+  const root = ReactDOMClient.createRoot(target);
+  root.render(element);
+  return root;
+}
+function hydrateFromElement(loader, target, lookup, opts = {}) {
+  const element = makeElement(loader, lookup, opts);
+  return ReactDOMClient.hydrateRoot(target, element);
 }
 function makeElement(loader, lookup, opts = {}) {
   return /* @__PURE__ */ React6.createElement(