@web-widget/react 0.0.7 → 0.0.9

package/dist/react.client.d.ts

@@ -1,7 +1,8 @@
 import * as _web_widget_schema from '@web-widget/schema';
-export * from '@web-widget/schema/client-helpers';
+import { RenderContext, ComponentProps } from '@web-widget/schema';
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ReactNode, Component } from 'react';
+export * from '@web-widget/schema/client-helpers';
 import { WebWidgetContainerOptions, Loader } from '@web-widget/web-widget';
 
 declare const __ENV__: {
@@ -36,6 +37,29 @@ interface WebWidgetSuspenseProps {
 }
 declare function defineWebWidget(loader: Loader, options: DefineWebWidgetOptions): ({ children, fallback, renderStage, ...data }: WebWidgetSuspenseProps) => react.FunctionComponentElement<react.SuspenseProps>;
 
+type JSONValue = string | number | boolean | {
+    [x: string]: JSONValue;
+} | Array<JSONValue>;
+type JSONProps = {
+    [x: string]: JSONValue;
+};
+interface DefineVueRenderOptions {
+    onPrefetchData?: (context: RenderContext, component: Component, props: ComponentProps) => Promise<JSONProps>;
+}
+
+declare const defineReactRender: ({ onPrefetchData, }?: DefineVueRenderOptions) => (context: _web_widget_schema.ClientWidgetRenderContext<unknown> | _web_widget_schema.ClientRouteRenderContext<unknown, Record<string, string>>) => Promise<void | {
+    mount?: (() => void | Promise<void>) | undefined;
+    unmount?: (() => void | Promise<void>) | undefined;
+    update?: (({ data }: {
+        data: Record<string, any>;
+    }) => void | Promise<void>) | undefined;
+} | {
+    mount?: (() => void | Promise<void>) | undefined;
+    unmount?: (() => void | Promise<void>) | undefined;
+    update?: (({ data }: {
+        data: Record<string, any>;
+    }) => void | Promise<void>) | undefined;
+}>;
 declare const render: (context: _web_widget_schema.ClientWidgetRenderContext<unknown> | _web_widget_schema.ClientRouteRenderContext<unknown, Record<string, string>>) => Promise<void | {
     mount?: (() => void | Promise<void>) | undefined;
     unmount?: (() => void | Promise<void>) | undefined;
@@ -50,4 +74,4 @@ declare const render: (context: _web_widget_schema.ClientWidgetRenderContext<unk
     }) => void | Promise<void>) | undefined;
 }>;
 
-export { DefineWebWidgetOptions, WebWidget, WebWidgetProps, WebWidgetSuspenseProps, __ENV__, WebWidget as default, defineWebWidget, render };
+export { DefineWebWidgetOptions, WebWidget, WebWidgetProps, WebWidgetSuspenseProps, __ENV__, defineReactRender, defineWebWidget, render };

package/dist/react.client.js

@@ -106,37 +106,51 @@ export * from "@web-widget/schema/client-helpers";
 Reflect.defineProperty(__ENV__, "server", {
   value: false
 });
-var render = defineRender(async (context, component, props) => {
-  const { recovering, container } = context;
-  if (!container) {
-    throw new Error(`Container required.`);
-  }
-  let root;
-  return {
-    async mount() {
-      let vnode;
-      if (typeof component === "function" && component.constructor.name === "AsyncFunction") {
-        vnode = await component(props);
-      } else {
-        vnode = createElement2(component, props);
-      }
-      if (recovering) {
-        root = hydrateRoot(container, vnode);
-      } else {
-        root = createRoot(container);
-        root.render(vnode);
-      }
-    },
-    async unmount() {
-      root == null ? void 0 : root.unmount();
-      root = null;
+var defineReactRender = ({
+  onPrefetchData
+} = {}) => {
+  return defineRender(async (context, component, props) => {
+    const { recovering, container } = context;
+    if (!container) {
+      throw new Error(`Container required.`);
     }
-  };
-});
+    let root;
+    return {
+      async mount() {
+        const state = context.recovering ? context.container.querySelector(
+          "script[as=state]"
+        ) : null;
+        const stateContent = context.recovering && state ? JSON.parse(state.textContent) : onPrefetchData ? await onPrefetchData(context, component, props) : void 0;
+        state == null ? void 0 : state.remove();
+        const mergedProps = stateContent ? Object.assign({}, stateContent, props) : props;
+        let vNode;
+        if (typeof component === "function" && component.constructor.name === "AsyncFunction") {
+          vNode = await component(mergedProps);
+        } else {
+          vNode = createElement2(
+            component,
+            mergedProps
+          );
+        }
+        if (recovering) {
+          root = hydrateRoot(context.container, vNode);
+        } else {
+          root = createRoot(context.container);
+          root.render(vNode);
+        }
+      },
+      async unmount() {
+        root == null ? void 0 : root.unmount();
+        root = null;
+      }
+    };
+  });
+};
+var render = defineReactRender();
 export {
   WebWidget,
   __ENV__,
-  WebWidget as default,
+  defineReactRender,
   defineWebWidget,
   render
 };

package/dist/react.server.d.ts

@@ -1,7 +1,8 @@
 import * as _web_widget_schema from '@web-widget/schema';
-export * from '@web-widget/schema/server-helpers';
+import { RenderContext, ComponentProps } from '@web-widget/schema';
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ReactNode, Component } from 'react';
+export * from '@web-widget/schema/server-helpers';
 import { WebWidgetContainerOptions, Loader } from '@web-widget/web-widget';
 
 declare const __ENV__: {
@@ -36,6 +37,17 @@ interface WebWidgetSuspenseProps {
 }
 declare function defineWebWidget(loader: Loader, options: DefineWebWidgetOptions): ({ children, fallback, renderStage, ...data }: WebWidgetSuspenseProps) => react.FunctionComponentElement<react.SuspenseProps>;
 
+type JSONValue = string | number | boolean | {
+    [x: string]: JSONValue;
+} | Array<JSONValue>;
+type JSONProps = {
+    [x: string]: JSONValue;
+};
+interface DefineVueRenderOptions {
+    onPrefetchData?: (context: RenderContext, component: Component, props: ComponentProps) => Promise<JSONProps>;
+}
+
+declare const defineReactRender: ({ onPrefetchData, }?: DefineVueRenderOptions) => (context: _web_widget_schema.ServerWidgetRenderContext<unknown> | _web_widget_schema.ServerRouteRenderContext<unknown, Record<string, string>>) => Promise<string | ReadableStream<any>>;
 declare const render: (context: _web_widget_schema.ServerWidgetRenderContext<unknown> | _web_widget_schema.ServerRouteRenderContext<unknown, Record<string, string>>) => Promise<string | ReadableStream<any>>;
 
-export { DefineWebWidgetOptions, WebWidget, WebWidgetProps, WebWidgetSuspenseProps, __ENV__, WebWidget as default, defineWebWidget, render };
+export { DefineWebWidgetOptions, WebWidget, WebWidgetProps, WebWidgetSuspenseProps, __ENV__, defineReactRender, defineWebWidget, render };

package/dist/react.server.js

@@ -99,6 +99,7 @@ function defineWebWidget(loader, options) {
 }
 
 // src/server.ts
+import { Fragment } from "react";
 import { createElement as createElement2 } from "react";
 import * as ReactDOMServer from "react-dom/server.browser";
 import { defineRender } from "@web-widget/schema/server-helpers";
@@ -106,19 +107,51 @@ export * from "@web-widget/schema/server-helpers";
 Reflect.defineProperty(__ENV__, "server", {
   value: true
 });
-var render = defineRender(async (context, component, props) => {
-  let vnode;
-  if (typeof component === "function" && component.constructor.name === "AsyncFunction") {
-    vnode = await component(props);
-  } else {
-    vnode = createElement2(component, props);
-  }
-  return ReactDOMServer.renderToReadableStream(vnode);
-});
+var ESCAPE_LOOKUP = {
+  ">": "\\u003e",
+  "<": "\\u003c",
+  "\u2028": "\\u2028",
+  "\u2029": "\\u2029"
+};
+var ESCAPE_REGEX = /[><\u2028\u2029]/g;
+function htmlEscapeJsonString(str) {
+  return str.replace(ESCAPE_REGEX, (match) => ESCAPE_LOOKUP[match]);
+}
+var defineReactRender = ({
+  onPrefetchData
+} = {}) => {
+  return defineRender(async (context, component, props) => {
+    const state = onPrefetchData ? await onPrefetchData(context, component, props) : void 0;
+    const mergedProps = state ? Object.assign({}, state, props) : props;
+    let vNode;
+    if (typeof component === "function" && component.constructor.name === "AsyncFunction") {
+      vNode = await component(mergedProps);
+    } else {
+      vNode = createElement2(component, mergedProps);
+    }
+    if (state) {
+      return ReactDOMServer.renderToReadableStream(
+        createElement2(Fragment, null, [
+          vNode,
+          createElement2("script", {
+            as: "state",
+            type: "application/json",
+            dangerouslySetInnerHTML: {
+              __html: htmlEscapeJsonString(JSON.stringify(state))
+            }
+          })
+        ])
+      );
+    } else {
+      return ReactDOMServer.renderToReadableStream(vNode);
+    }
+  });
+};
+var render = defineReactRender();
 export {
   WebWidget,
   __ENV__,
-  WebWidget as default,
+  defineReactRender,
   defineWebWidget,
   render
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web-widget/react",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "type": "module",
   "exports": {
     ".": {
@@ -28,13 +28,9 @@
     "@babel/helper-module-imports": "^7.22.5",
     "@babel/helper-plugin-utils": "^7.22.5",
     "@babel/traverse": "^7.22.5",
+    "@web-widget/html": "0.0.4",
     "@web-widget/schema": "0.0.9",
-    "@web-widget/web-widget": "1.0.0-alpha.7"
-  },
-  "peerDependencies": {
-    "@vitejs/plugin-react": "^4.0.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@web-widget/web-widget": "1.0.0-alpha.8"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.1",
@@ -48,6 +44,11 @@
     "typescript": "^5.0.4",
     "vite": "^4.4.9"
   },
+  "peerDependencies": {
+    "@vitejs/plugin-react": "^4.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
   "publishConfig": {
     "access": "public"
   },