@web-widget/vue 0.1.1 → 0.1.2

package/dist/vue.client.d.ts

@@ -1,7 +1,7 @@
 import * as _web_widget_schema from '@web-widget/schema';
+import { RenderContext, ComponentProps } from '@web-widget/schema';
 import * as vue from 'vue';
-import { PropType, VNode, App, Component } from 'vue';
-import { RenderContext, ComponentProps } from '@web-widget/schema/client-helpers';
+import { PropType, VNode, Component, App } from 'vue';
 export * from '@web-widget/schema/client-helpers';
 import { Loader, WebWidgetContainerOptions } from '@web-widget/web-widget';
 
@@ -131,10 +131,19 @@ declare function defineWebWidget(loader: Loader, options: DefineWebWidgetOptions
     renderStage: "server" | "client" | undefined;
 }, {}>;
 
+type JSONValue = string | number | boolean | {
+    [x: string]: JSONValue;
+} | Array<JSONValue>;
+type JSONProps = {
+    [x: string]: JSONValue;
+};
 interface DefineVueRenderOptions {
-    onCreatedApp?: (app: App, context: RenderContext, component: Component, props: ComponentProps) => void;
+    onBeforeCreateApp?: (context: RenderContext, component: Component, props: ComponentProps) => any;
+    onCreatedApp?: (app: App<Element>, context: RenderContext, component: Component, props: ComponentProps) => void;
+    onPrefetchData?: (context: RenderContext, component: Component, props: ComponentProps) => Promise<JSONProps>;
 }
-declare const defineVueRender: ({ onCreatedApp, }?: DefineVueRenderOptions) => (context: _web_widget_schema.ClientWidgetRenderContext<unknown> | _web_widget_schema.ClientRouteRenderContext<unknown, Record<string, string>>) => Promise<void | {
+
+declare const defineVueRender: ({ onCreatedApp, 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 }: {
@@ -161,4 +170,4 @@ declare const render: (context: _web_widget_schema.ClientWidgetRenderContext<unk
     }) => void | Promise<void>) | undefined;
 }>;
 
-export { DefineVueRenderOptions, DefineWebWidgetOptions, WebWidget, __ENV__, defineVueRender, defineWebWidget, render };
+export { DefineWebWidgetOptions, WebWidget, __ENV__, defineVueRender, defineWebWidget, render };

package/dist/vue.client.js

@@ -142,7 +142,8 @@ Reflect.defineProperty(__ENV__, "server", {
 });
 var defineVueRender = ({
   onCreatedApp = () => {
-  }
+  },
+  onPrefetchData
 } = {}) => {
   return defineRender(async (context, component, props) => {
     if (!context.container) {
@@ -151,14 +152,19 @@ var defineVueRender = ({
     let app;
     return {
       async mount() {
-        const rootProps = props;
+        const shell = context.recovering && context.container.querySelector("[webwidgetshell]") || context.container;
+        const state = context.recovering ? context.container.querySelector(
+          "[webwidgetstate]"
+        ) : null;
+        const stateContent = context.recovering && state ? JSON.parse(state.textContent) : onPrefetchData ? await onPrefetchData(context, component, props) : void 0;
+        const mergedProps = stateContent ? Object.assign({}, stateContent, props) : props;
         if (context.recovering) {
-          app = createSSRApp(component, rootProps);
+          app = createSSRApp(component, mergedProps);
         } else {
-          app = createApp(component, rootProps);
+          app = createApp(component, mergedProps);
         }
-        onCreatedApp(app, context, component, props);
-        app.mount(context.container);
+        onCreatedApp(app, context, component, mergedProps);
+        app.mount(shell);
       },
       async unmount() {
         app == null ? void 0 : app.unmount();

package/dist/vue.server.d.ts

@@ -1,7 +1,7 @@
 import * as _web_widget_schema from '@web-widget/schema';
+import { RenderContext, ComponentProps } from '@web-widget/schema';
 import * as vue from 'vue';
-import { PropType, VNode, App, Component } from 'vue';
-import { RenderContext, ComponentProps } from '@web-widget/schema/server-helpers';
+import { PropType, VNode, Component, App } from 'vue';
 export * from '@web-widget/schema/server-helpers';
 import { Loader, WebWidgetContainerOptions } from '@web-widget/web-widget';
 
@@ -131,10 +131,19 @@ declare function defineWebWidget(loader: Loader, options: DefineWebWidgetOptions
     renderStage: "server" | "client" | undefined;
 }, {}>;
 
+type JSONValue = string | number | boolean | {
+    [x: string]: JSONValue;
+} | Array<JSONValue>;
+type JSONProps = {
+    [x: string]: JSONValue;
+};
 interface DefineVueRenderOptions {
-    onCreatedApp?: (app: App, context: RenderContext, component: Component, props: ComponentProps) => void;
+    onBeforeCreateApp?: (context: RenderContext, component: Component, props: ComponentProps) => any;
+    onCreatedApp?: (app: App<Element>, context: RenderContext, component: Component, props: ComponentProps) => void;
+    onPrefetchData?: (context: RenderContext, component: Component, props: ComponentProps) => Promise<JSONProps>;
 }
-declare const defineVueRender: ({ onCreatedApp, }?: DefineVueRenderOptions) => (context: _web_widget_schema.ServerWidgetRenderContext<unknown> | _web_widget_schema.ServerRouteRenderContext<unknown, Record<string, string>>) => Promise<string | ReadableStream<any>>;
+
+declare const defineVueRender: ({ onCreatedApp, 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 { DefineVueRenderOptions, DefineWebWidgetOptions, WebWidget, __ENV__, defineVueRender, defineWebWidget, render };
+export { DefineWebWidgetOptions, WebWidget, __ENV__, defineVueRender, defineWebWidget, render };

package/dist/vue.server.js

@@ -134,22 +134,49 @@ function defineWebWidget(loader, options) {
 }
 
 // src/server.ts
-import { createSSRApp } from "vue";
+import { createSSRApp, h as h2, Fragment } from "vue";
 import { defineRender } from "@web-widget/schema/server-helpers";
 import { renderToWebStream } from "vue/server-renderer";
 export * from "@web-widget/schema/server-helpers";
 Reflect.defineProperty(__ENV__, "server", {
   value: true
 });
+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 defineVueRender = ({
   onCreatedApp = () => {
-  }
+  },
+  onPrefetchData
 } = {}) => {
   return defineRender(async (context, component, props) => {
-    const rootProps = props;
-    const app = createSSRApp(component, rootProps);
-    onCreatedApp(app, context, component, props);
-    return renderToWebStream(app);
+    const state = onPrefetchData ? await onPrefetchData(context, component, props) : void 0;
+    const mergedProps = state ? Object.assign({}, state, props) : props;
+    if (state) {
+      const stateStringify = htmlEscapeJsonString(JSON.stringify(state));
+      const vNode = h2(Fragment, null, [
+        h2(component, mergedProps),
+        h2("script", {
+          webwidgetstate: "",
+          type: "application/json",
+          innerHTML: stateStringify
+        })
+      ]);
+      const app = createSSRApp(vNode);
+      onCreatedApp(app, context, component, props);
+      return renderToWebStream(app);
+    } else {
+      const app = createSSRApp(component, mergedProps);
+      onCreatedApp(app, context, component, props);
+      return renderToWebStream(app);
+    }
   });
 };
 var render = defineVueRender();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web-widget/vue",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "exports": {
     ".": {
@@ -22,6 +22,7 @@
     "dist"
   ],
   "dependencies": {
+    "@web-widget/html": "0.0.4",
     "@web-widget/schema": "0.0.9",
     "@web-widget/web-widget": "1.0.0-alpha.7"
   },