@web-widget/vue2 0.2.0 → 0.2.1

package/dist/vue2.client.d.ts

@@ -145,7 +145,7 @@ interface DefineVueRenderOptions {
     onPrefetchData?: (context: RenderContext, component: Component, props: ComponentProps) => Promise<JSONProps>;
 }
 
-declare const defineVueRender: ({ onBeforeCreateApp, onCreatedApp, onPrefetchData, }?: DefineVueRenderOptions) => (context: _web_widget_schema.ClientWidgetRenderContext<unknown> | _web_widget_schema.ClientRouteRenderContext<unknown, Record<string, string>>) => Promise<void | {
+declare const defineVueRender: ({ onBeforeCreateApp, onCreatedApp, onPrefetchData, }?: DefineVueRenderOptions) => (context: _web_widget_schema.ClientWidgetRenderContext<unknown> | _web_widget_schema.ClientRouteRenderContext<unknown, Record<string, string>>, renderOptions: any) => Promise<void | {
     mount?: (() => void | Promise<void>) | undefined;
     unmount?: (() => void | Promise<void>) | undefined;
     update?: (({ data }: {
@@ -158,7 +158,7 @@ declare const defineVueRender: ({ onBeforeCreateApp, onCreatedApp, onPrefetchDat
         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 | {
+declare const render: (context: _web_widget_schema.ClientWidgetRenderContext<unknown> | _web_widget_schema.ClientRouteRenderContext<unknown, Record<string, string>>, renderOptions: any) => Promise<void | {
     mount?: (() => void | Promise<void>) | undefined;
     unmount?: (() => void | Promise<void>) | undefined;
     update?: (({ data }: {

package/dist/vue2.client.js

@@ -31,8 +31,11 @@ var __objRest = (source, exclude) => {
 };
 
 // src/client.ts
+import {
+  defineRender,
+  getComponentDescriptor
+} from "@web-widget/schema/client-helpers";
 import Vue from "vue";
-import { defineRender as defineRenderHelper } from "@web-widget/schema/client-helpers";
 export * from "@web-widget/schema/client-helpers";
 
 // src/web-widget.ts
@@ -163,7 +166,9 @@ var defineVueRender = ({
   },
   onPrefetchData
 } = {}) => {
-  return defineRenderHelper(async (context, component, props) => {
+  return defineRender(async (context) => {
+    const componentDescriptor = getComponentDescriptor(context);
+    const { component, props } = componentDescriptor;
     if (!context.container) {
       throw new Error(`Container required.`);
     }

package/dist/vue2.server.cjs

@@ -69,6 +69,7 @@ __export(server_exports, {
 module.exports = __toCommonJS(server_exports);
 var import_server_helpers = require("@web-widget/schema/server-helpers");
 var import_node_stream = require("stream");
+var import_web = require("stream/web");
 var import_vue2 = __toESM(require("vue"), 1);
 var import_vue_server_renderer = require("vue-server-renderer");
 __reExport(server_exports, require("@web-widget/schema/server-helpers"), module.exports);
@@ -195,6 +196,7 @@ function defineWebWidget(loader, options) {
 }
 
 // src/server.ts
+var __FEATURE_STREAM__ = false;
 var ESCAPE_LOOKUP = {
   ">": "\\u003e",
   "<": "\\u003c",
@@ -205,47 +207,49 @@ var ESCAPE_REGEX = /[><\u2028\u2029]/g;
 function htmlEscapeJsonString(str) {
   return str.replace(ESCAPE_REGEX, (match) => ESCAPE_LOOKUP[match]);
 }
+function appendStringToReadableStream(stream, text) {
+  const encoder = new TextEncoder();
+  const uint8Array = encoder.encode(text);
+  return stream.pipeThrough(
+    new import_web.TransformStream({
+      flush(controller) {
+        controller.enqueue(uint8Array);
+      }
+    })
+  );
+}
 var defineVueRender = ({
   onBeforeCreateApp = () => ({}),
   onCreatedApp = () => {
   },
   onPrefetchData
 } = {}) => {
-  return (0, import_server_helpers.defineRender)(async (context, component, props) => {
+  return (0, import_server_helpers.defineRender)(async (context) => {
+    const componentDescriptor = (0, import_server_helpers.getComponentDescriptor)(context);
+    const { component, props } = componentDescriptor;
     const shellTag = "web-widget.shell";
     const state = onPrefetchData ? await onPrefetchData(context, component, props) : void 0;
     const mergedProps = state ? Object.assign({}, state, props) : props;
     const renderer = (0, import_vue_server_renderer.createRenderer)();
-    const vNodeData = {
-      attrs: {
-        "data-vue2root": "true"
-      },
-      props: mergedProps
-    };
-    const shellTagVNodeData = {};
-    let render2;
-    if (state) {
-      const stateStringify = htmlEscapeJsonString(JSON.stringify(state));
-      render2 = (h2) => h2(shellTag, shellTagVNodeData, [
-        h2(component, vNodeData),
-        h2("script", {
+    const app = new import_vue2.default(__spreadValues({
+      render: (h2) => h2(shellTag, {}, [
+        h2(component, {
           attrs: {
-            as: "state",
-            type: "application/json"
+            "data-vue2root": "true"
           },
-          domProps: {
-            innerHTML: stateStringify
-          }
+          props: mergedProps
         })
-      ]);
-    } else {
-      render2 = (h2) => h2(shellTag, shellTagVNodeData, [h2(component, vNodeData)]);
-    }
-    const app = new import_vue2.default(__spreadValues({
-      render: render2
+      ])
     }, onBeforeCreateApp(context, component, mergedProps)));
     onCreatedApp(app, context, component, mergedProps);
-    return import_node_stream.Readable.toWeb ? import_node_stream.Readable.toWeb(renderer.renderToStream(app)) : renderer.renderToString(app);
+    const result = __FEATURE_STREAM__ && import_node_stream.Readable.toWeb ? import_node_stream.Readable.toWeb(renderer.renderToStream(app)) : await renderer.renderToString(app);
+    if (state) {
+      const json = htmlEscapeJsonString(JSON.stringify(state));
+      const script = `<script as="state" type="application/json">${json}</script>`;
+      return typeof result === "string" ? result + script : appendStringToReadableStream(result, script);
+    } else {
+      return result;
+    }
   });
 };
 var render = defineVueRender();

package/dist/vue2.server.d.ts

@@ -145,7 +145,7 @@ interface DefineVueRenderOptions {
     onPrefetchData?: (context: RenderContext, component: Component, props: ComponentProps) => Promise<JSONProps>;
 }
 
-declare const defineVueRender: ({ onBeforeCreateApp, 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>>;
+declare const defineVueRender: ({ onBeforeCreateApp, onCreatedApp, onPrefetchData, }?: DefineVueRenderOptions) => (context: _web_widget_schema.ServerWidgetRenderContext<unknown> | _web_widget_schema.ServerRouteRenderContext<unknown, Record<string, string>>, renderOptions: any) => Promise<string | ReadableStream<any> | ReadableStream<any>>;
+declare const render: (context: _web_widget_schema.ServerWidgetRenderContext<unknown> | _web_widget_schema.ServerRouteRenderContext<unknown, Record<string, string>>, renderOptions: any) => Promise<string | ReadableStream<any> | ReadableStream<any>>;
 
 export { DefineWebWidgetOptions, WebWidget, __ENV__, defineVueRender, defineWebWidget, render };

package/dist/vue2.server.js

@@ -31,8 +31,12 @@ var __objRest = (source, exclude) => {
 };
 
 // src/server.ts
-import { defineRender } from "@web-widget/schema/server-helpers";
+import {
+  defineRender,
+  getComponentDescriptor
+} from "@web-widget/schema/server-helpers";
 import { Readable } from "stream";
+import { TransformStream } from "stream/web";
 import Vue from "vue";
 import { createRenderer } from "vue-server-renderer";
 export * from "@web-widget/schema/server-helpers";
@@ -159,6 +163,7 @@ function defineWebWidget(loader, options) {
 }
 
 // src/server.ts
+var __FEATURE_STREAM__ = false;
 var ESCAPE_LOOKUP = {
   ">": "\\u003e",
   "<": "\\u003c",
@@ -169,47 +174,49 @@ var ESCAPE_REGEX = /[><\u2028\u2029]/g;
 function htmlEscapeJsonString(str) {
   return str.replace(ESCAPE_REGEX, (match) => ESCAPE_LOOKUP[match]);
 }
+function appendStringToReadableStream(stream, text) {
+  const encoder = new TextEncoder();
+  const uint8Array = encoder.encode(text);
+  return stream.pipeThrough(
+    new TransformStream({
+      flush(controller) {
+        controller.enqueue(uint8Array);
+      }
+    })
+  );
+}
 var defineVueRender = ({
   onBeforeCreateApp = () => ({}),
   onCreatedApp = () => {
   },
   onPrefetchData
 } = {}) => {
-  return defineRender(async (context, component, props) => {
+  return defineRender(async (context) => {
+    const componentDescriptor = getComponentDescriptor(context);
+    const { component, props } = componentDescriptor;
     const shellTag = "web-widget.shell";
     const state = onPrefetchData ? await onPrefetchData(context, component, props) : void 0;
     const mergedProps = state ? Object.assign({}, state, props) : props;
     const renderer = createRenderer();
-    const vNodeData = {
-      attrs: {
-        "data-vue2root": "true"
-      },
-      props: mergedProps
-    };
-    const shellTagVNodeData = {};
-    let render2;
-    if (state) {
-      const stateStringify = htmlEscapeJsonString(JSON.stringify(state));
-      render2 = (h2) => h2(shellTag, shellTagVNodeData, [
-        h2(component, vNodeData),
-        h2("script", {
+    const app = new Vue(__spreadValues({
+      render: (h2) => h2(shellTag, {}, [
+        h2(component, {
           attrs: {
-            as: "state",
-            type: "application/json"
+            "data-vue2root": "true"
           },
-          domProps: {
-            innerHTML: stateStringify
-          }
+          props: mergedProps
         })
-      ]);
-    } else {
-      render2 = (h2) => h2(shellTag, shellTagVNodeData, [h2(component, vNodeData)]);
-    }
-    const app = new Vue(__spreadValues({
-      render: render2
+      ])
     }, onBeforeCreateApp(context, component, mergedProps)));
     onCreatedApp(app, context, component, mergedProps);
-    return Readable.toWeb ? Readable.toWeb(renderer.renderToStream(app)) : renderer.renderToString(app);
+    const result = __FEATURE_STREAM__ && Readable.toWeb ? Readable.toWeb(renderer.renderToStream(app)) : await renderer.renderToString(app);
+    if (state) {
+      const json = htmlEscapeJsonString(JSON.stringify(state));
+      const script = `<script as="state" type="application/json">${json}</script>`;
+      return typeof result === "string" ? result + script : appendStringToReadableStream(result, script);
+    } else {
+      return result;
+    }
   });
 };
 var render = defineVueRender();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web-widget/vue2",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
   "exports": {
     ".": {
@@ -24,9 +24,9 @@
     "dist"
   ],
   "dependencies": {
-    "@web-widget/vite": "1.1.0",
-    "@web-widget/schema": "0.0.10",
-    "@web-widget/web-widget": "1.0.0-alpha.10",
+    "@web-widget/vite": "2.0.1",
+    "@web-widget/schema": "0.1.1",
+    "@web-widget/web-widget": "1.0.0",
     "vue": "^2.7.14",
     "vue-server-renderer": "^2.7.14"
   },