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

package/dist/index.d.ts

@@ -36,9 +36,9 @@ 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 { registerFunction } from '@plasmicapp/host';
 import { Registry } from '@plasmicapp/loader-core';
 import { repeatedElement } from '@plasmicapp/host';
 import { Split } from '@plasmicapp/loader-fetcher';
@@ -122,7 +122,6 @@ declare interface BuiltinRegisteredModules {
     "@plasmicapp/query": plasmicappQuery;
     "@plasmicapp/data-sources-context": plasmicappDataSourcesContext;
     "@plasmicapp/host": plasmicappHost;
-    "@plasmicapp/host/registerFunction": registerFunction;
     "@plasmicapp/loader-runtime-registry": {
         components: Record<string, React.ComponentType<any>>;
         globalVariantHooks: Record<string, () => any>;
@@ -239,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;
@@ -293,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: {
@@ -622,6 +632,27 @@ 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;
+    globalVariants?: GlobalVariantSpec[];
+    prefetchedQueryData?: Record<string, any>;
+    pageParams?: Record<string, any>;
+    pageQuery?: Record<string, any>;
+}): 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

@@ -1176,7 +1176,6 @@ var InternalPlasmicComponentLoader = class extends BaseInternalPlasmicComponentL
         "@plasmicapp/query": PlasmicQuery,
         "@plasmicapp/data-sources-context": PlasmicDataSourcesContext,
         "@plasmicapp/host": PlasmicHost,
-        "@plasmicapp/host/registerFunction": internalSetRegisteredFunction,
         "@plasmicapp/loader-runtime-registry": {
           components: SUBSTITUTED_COMPONENTS,
           globalVariantHooks: SUBSTITUTED_GLOBAL_VARIANT_HOOKS,
@@ -1420,11 +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";
+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 = {}) {
@@ -1432,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(
@@ -1487,6 +1488,7 @@ export {
   initPlasmicLoader,
   matchesPagePath,
   plasmicPrepass,
+  renderToElement,
   renderToString,
   repeatedElement,
   useDataEnv,