@web-widget/vue2 0.0.11 → 0.0.12

package/dist/types-1f1d9d7c.d.ts

@@ -0,0 +1,147 @@
+import * as vue_types_v3_component_options_js from 'vue/types/v3-component-options.js';
+import * as vue from 'vue';
+import vue__default, { PropType, Component } from 'vue';
+import * as _web_widget_schema from '@web-widget/schema';
+import { RenderContext, ComponentProps } from '@web-widget/schema';
+import { Loader, WebWidgetContainerOptions } from '@web-widget/web-widget';
+
+declare const __ENV__: {
+    server: boolean;
+};
+declare const WebWidget: vue.DefineComponent<{
+    base: {
+        type: PropType<string | undefined>;
+    };
+    data: {
+        type: PropType<{
+            [x: string]: string | number | boolean | {
+                [x: string]: string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | any)[])[])[])[])[])[])[])[])[])[])[];
+            } | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | any)[])[])[])[])[])[])[])[])[])[])[];
+        } | undefined>;
+        default: {};
+    };
+    import: {
+        type: PropType<string | undefined>;
+    };
+    inactive: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+    loader: {
+        type: PropType<Loader>;
+        required: true;
+    };
+    loading: {
+        type: PropType<string | undefined>;
+    };
+    meta: {
+        type: PropType<_web_widget_schema.Meta | undefined>;
+    };
+    name: {
+        type: PropType<string | undefined>;
+    };
+    renderStage: {
+        type: PropType<"server" | "client" | undefined>;
+    };
+    renderTarget: {
+        type: PropType<"light" | "shadow" | undefined>;
+        default: string;
+    };
+    fallback: {
+        type: PropType<Component>;
+        default: undefined;
+    };
+}, () => vue.VNode, {}, {}, {}, vue_types_v3_component_options_js.ComponentOptionsMixin, vue_types_v3_component_options_js.ComponentOptionsMixin, {}, string, Readonly<vue.ExtractPropTypes<{
+    base: {
+        type: PropType<string | undefined>;
+    };
+    data: {
+        type: PropType<{
+            [x: string]: string | number | boolean | {
+                [x: string]: string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | any)[])[])[])[])[])[])[])[])[])[])[];
+            } | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | any)[])[])[])[])[])[])[])[])[])[])[];
+        } | undefined>;
+        default: {};
+    };
+    import: {
+        type: PropType<string | undefined>;
+    };
+    inactive: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+    loader: {
+        type: PropType<Loader>;
+        required: true;
+    };
+    loading: {
+        type: PropType<string | undefined>;
+    };
+    meta: {
+        type: PropType<_web_widget_schema.Meta | undefined>;
+    };
+    name: {
+        type: PropType<string | undefined>;
+    };
+    renderStage: {
+        type: PropType<"server" | "client" | undefined>;
+    };
+    renderTarget: {
+        type: PropType<"light" | "shadow" | undefined>;
+        default: string;
+    };
+    fallback: {
+        type: PropType<Component>;
+        default: undefined;
+    };
+}>>, {
+    data: {
+        [x: string]: string | number | boolean | {
+            [x: string]: string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | any)[])[])[])[])[])[])[])[])[])[])[];
+        } | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | (string | number | boolean | any | any)[])[])[])[])[])[])[])[])[])[])[];
+    } | undefined;
+    inactive: boolean | undefined;
+    renderTarget: "light" | "shadow" | undefined;
+    fallback: Component;
+}>;
+interface DefineWebWidgetOptions {
+    base?: WebWidgetContainerOptions["base"];
+    import?: WebWidgetContainerOptions["import"];
+    loading?: WebWidgetContainerOptions["loading"];
+    name?: WebWidgetContainerOptions["name"];
+    renderStage?: WebWidgetContainerOptions["renderStage"];
+    renderTarget?: WebWidgetContainerOptions["renderTarget"];
+}
+declare function defineWebWidget(loader: Loader, options: DefineWebWidgetOptions): vue.DefineComponent<{
+    renderStage: {
+        type: PropType<"server" | "client" | undefined>;
+        default: "server" | "client" | undefined;
+    };
+    fallback: {
+        type: PropType<Component>;
+    };
+}, () => vue.VNode, {}, {}, {}, vue_types_v3_component_options_js.ComponentOptionsMixin, vue_types_v3_component_options_js.ComponentOptionsMixin, {}, string, Readonly<vue.ExtractPropTypes<{
+    renderStage: {
+        type: PropType<"server" | "client" | undefined>;
+        default: "server" | "client" | undefined;
+    };
+    fallback: {
+        type: PropType<Component>;
+    };
+}>>, {
+    renderStage: "server" | "client" | undefined;
+}>;
+
+type JSONValue = string | number | boolean | {
+    [x: string]: JSONValue;
+} | Array<JSONValue>;
+type JSONProps = {
+    [x: string]: JSONValue;
+};
+interface DefineVueRenderOptions {
+    onBeforeCreateApp?: (context: RenderContext, component: Component, props: ComponentProps) => any;
+    onCreatedApp?: (app: vue__default, context: RenderContext, component: Component, props: ComponentProps) => void;
+    onPrefetchData?: (context: RenderContext, component: Component, props: ComponentProps) => Promise<JSONProps>;
+}
+
+export { DefineVueRenderOptions as D, WebWidget as W, __ENV__ as _, DefineWebWidgetOptions as a, defineWebWidget as d };

package/dist/vue2.client.d.ts

@@ -1,8 +1,10 @@
 import * as _web_widget_schema from '@web-widget/schema';
-import { D as DefineVueRenderOptions } from './types-e1e66865.js';
-export { d as defineWebWidget } from './types-e1e66865.js';
+import { D as DefineVueRenderOptions } from './types-1f1d9d7c.js';
+export { a as DefineWebWidgetOptions, W as WebWidget, _ as __ENV__, d as defineWebWidget } from './types-1f1d9d7c.js';
 export * from '@web-widget/schema/client-helpers';
+import 'vue/types/v3-component-options.js';
 import 'vue';
+import '@web-widget/web-widget';
 
 declare const defineVueRender: ({ onBeforeCreateApp, onCreatedApp, onPrefetchData, }?: DefineVueRenderOptions) => (context: _web_widget_schema.ClientWidgetRenderContext<unknown> | _web_widget_schema.ClientRouteRenderContext<unknown, Record<string, string>>) => Promise<void | {
     mount?: (() => void | Promise<void>) | undefined;

package/dist/vue2.client.js

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,6 +16,19 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 
 // src/client.ts
 import Vue from "vue";
@@ -21,8 +36,123 @@ import { defineRender as defineRenderHelper } from "@web-widget/schema/client-he
 export * from "@web-widget/schema/client-helpers";
 
 // src/web-widget.ts
-function defineWebWidget() {
-  throw new TypeError(`Not yet implemented.`);
+import { parse } from "@web-widget/web-widget";
+import { h, defineComponent, defineAsyncComponent, useAttrs } from "vue";
+var __ENV__ = {
+  server: true
+};
+var WebWidget = /* @__PURE__ */ defineComponent({
+  name: "WebWidget",
+  props: {
+    base: {
+      type: String
+    },
+    data: {
+      type: Object,
+      default: {}
+    },
+    import: {
+      type: String
+    },
+    inactive: {
+      type: Boolean,
+      // NOTE: If the default value is not set, it will be false here.
+      default: void 0
+    },
+    loader: {
+      type: Function,
+      required: true
+    },
+    loading: {
+      type: String
+    },
+    meta: {
+      type: Object
+    },
+    name: {
+      type: String
+    },
+    renderStage: {
+      type: String
+    },
+    renderTarget: {
+      type: String,
+      default: "light"
+    },
+    // -----
+    fallback: {
+      type: Object,
+      // NOTE: If the default value is not set, it will be false here.
+      default: void 0
+    }
+  },
+  setup(_a, { slots }) {
+    var _b = _a, { fallback, loader } = _b, props = __objRest(_b, ["fallback", "loader"]);
+    if (!loader) {
+      throw new TypeError(`Missing loader.`);
+    }
+    if (Object.keys(slots).length > 0) {
+      throw new TypeError(`No support slot.`);
+    }
+    const AsyncComponent = defineAsyncComponent({
+      loader: async () => {
+        const children = "";
+        const [tag, attrs, innerHTML] = await parse(loader, __spreadProps(__spreadValues({}, props), {
+          children
+        }));
+        if (!__ENV__.server) {
+          console.warn(`Client components are experimental.`);
+          await customElements.whenDefined(tag);
+          const element = Object.assign(document.createElement(tag), props);
+          await element.bootstrap();
+        }
+        return defineComponent({
+          render(h2) {
+            return h2(tag, {
+              attrs,
+              domProps: {
+                innerHTML
+              }
+            });
+          }
+        });
+      },
+      delay: 200,
+      timeout: 3e3,
+      errorComponent: fallback,
+      loadingComponent: fallback
+    });
+    return () => h(AsyncComponent);
+  }
+});
+function defineWebWidget(loader, options) {
+  console.warn(`defineWebWidget of vue2 is an experimental feature.`);
+  options.renderTarget = "light";
+  return /* @__PURE__ */ defineComponent({
+    name: "WebWidgetSuspense",
+    props: {
+      renderStage: {
+        type: String,
+        default: options.renderStage
+      },
+      fallback: {
+        type: Object
+      }
+    },
+    setup({ fallback, renderStage }, { slots }) {
+      const data = useAttrs();
+      return () => h(WebWidget, {
+        props: __spreadProps(__spreadValues({}, options), {
+          data,
+          loader,
+          renderStage,
+          // -----
+          fallback
+        }),
+        scopedSlots: slots
+      });
+    }
+  });
 }
 
 // src/client.ts
@@ -40,19 +170,25 @@ var defineVueRender = ({
     return {
       async mount() {
         const shellTag = "web-widget.shell";
+        const vue2rootAttr = "data-vue2root";
+        const vue2ssrAttr = "data-server-rendered";
         const shell = context.recovering && context.container.querySelector(shellTag.replace(".", "\\.")) || context.container.appendChild(document.createElement(shellTag));
+        const componentRoot = context.recovering ? shell.querySelector(`[${vue2rootAttr}]`) : null;
         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();
+        shell.removeAttribute(vue2ssrAttr);
+        componentRoot == null ? void 0 : componentRoot.removeAttribute(vue2rootAttr);
+        componentRoot == null ? void 0 : componentRoot.setAttribute(vue2ssrAttr, "true");
         const mergedProps = stateContent ? Object.assign(stateContent, props) : props;
         const vNodeData = {
           props: mergedProps
         };
         app = new Vue(__spreadValues({
-          render(h) {
-            return h(component, vNodeData);
+          render(h2) {
+            return h2(component, vNodeData);
           }
         }, onBeforeCreateApp(context, component, mergedProps)));
         onCreatedApp(app, context, component, mergedProps);
@@ -70,6 +206,8 @@ var defineVueRender = ({
 };
 var render = defineVueRender();
 export {
+  WebWidget,
+  __ENV__,
   defineVueRender,
   defineWebWidget,
   render

package/dist/vue2.server.d.ts

@@ -1,8 +1,10 @@
 import * as _web_widget_schema from '@web-widget/schema';
-import { D as DefineVueRenderOptions } from './types-e1e66865.js';
-export { d as defineWebWidget } from './types-e1e66865.js';
+import { D as DefineVueRenderOptions } from './types-1f1d9d7c.js';
+export { a as DefineWebWidgetOptions, W as WebWidget, _ as __ENV__, d as defineWebWidget } from './types-1f1d9d7c.js';
 export * from '@web-widget/schema/server-helpers';
+import 'vue/types/v3-component-options.js';
 import 'vue';
+import '@web-widget/web-widget';
 
 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>>;

package/dist/vue2.server.js

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,16 +16,145 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 
 // src/server.ts
+import { defineRender } from "@web-widget/schema/server-helpers";
+import { Readable } from "stream";
 import Vue from "vue";
 import { createRenderer } from "vue-server-renderer";
-import { defineRender } from "@web-widget/schema/server-helpers";
 export * from "@web-widget/schema/server-helpers";
 
 // src/web-widget.ts
-function defineWebWidget() {
-  throw new TypeError(`Not yet implemented.`);
+import { parse } from "@web-widget/web-widget";
+import { h, defineComponent, defineAsyncComponent, useAttrs } from "vue";
+var __ENV__ = {
+  server: true
+};
+var WebWidget = /* @__PURE__ */ defineComponent({
+  name: "WebWidget",
+  props: {
+    base: {
+      type: String
+    },
+    data: {
+      type: Object,
+      default: {}
+    },
+    import: {
+      type: String
+    },
+    inactive: {
+      type: Boolean,
+      // NOTE: If the default value is not set, it will be false here.
+      default: void 0
+    },
+    loader: {
+      type: Function,
+      required: true
+    },
+    loading: {
+      type: String
+    },
+    meta: {
+      type: Object
+    },
+    name: {
+      type: String
+    },
+    renderStage: {
+      type: String
+    },
+    renderTarget: {
+      type: String,
+      default: "light"
+    },
+    // -----
+    fallback: {
+      type: Object,
+      // NOTE: If the default value is not set, it will be false here.
+      default: void 0
+    }
+  },
+  setup(_a, { slots }) {
+    var _b = _a, { fallback, loader } = _b, props = __objRest(_b, ["fallback", "loader"]);
+    if (!loader) {
+      throw new TypeError(`Missing loader.`);
+    }
+    if (Object.keys(slots).length > 0) {
+      throw new TypeError(`No support slot.`);
+    }
+    const AsyncComponent = defineAsyncComponent({
+      loader: async () => {
+        const children = "";
+        const [tag, attrs, innerHTML] = await parse(loader, __spreadProps(__spreadValues({}, props), {
+          children
+        }));
+        if (!__ENV__.server) {
+          console.warn(`Client components are experimental.`);
+          await customElements.whenDefined(tag);
+          const element = Object.assign(document.createElement(tag), props);
+          await element.bootstrap();
+        }
+        return defineComponent({
+          render(h2) {
+            return h2(tag, {
+              attrs,
+              domProps: {
+                innerHTML
+              }
+            });
+          }
+        });
+      },
+      delay: 200,
+      timeout: 3e3,
+      errorComponent: fallback,
+      loadingComponent: fallback
+    });
+    return () => h(AsyncComponent);
+  }
+});
+function defineWebWidget(loader, options) {
+  console.warn(`defineWebWidget of vue2 is an experimental feature.`);
+  options.renderTarget = "light";
+  return /* @__PURE__ */ defineComponent({
+    name: "WebWidgetSuspense",
+    props: {
+      renderStage: {
+        type: String,
+        default: options.renderStage
+      },
+      fallback: {
+        type: Object
+      }
+    },
+    setup({ fallback, renderStage }, { slots }) {
+      const data = useAttrs();
+      return () => h(WebWidget, {
+        props: __spreadProps(__spreadValues({}, options), {
+          data,
+          loader,
+          renderStage,
+          // -----
+          fallback
+        }),
+        scopedSlots: slots
+      });
+    }
+  });
 }
 
 // src/server.ts
@@ -44,28 +175,47 @@ var defineVueRender = ({
   onPrefetchData
 } = {}) => {
   return defineRender(async (context, component, props) => {
+    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 renderer = createRenderer();
+    const shellTagVNodeData = {};
+    let render2;
+    if (state) {
+      const stateStringify = htmlEscapeJsonString(JSON.stringify(state));
+      render2 = (h2) => h2(shellTag, shellTagVNodeData, [
+        h2(component, vNodeData),
+        h2(
+          "script",
+          {
+            attrs: {
+              as: "state",
+              type: "application/json"
+            }
+          },
+          stateStringify
+        )
+      ]);
+    } else {
+      render2 = (h2) => h2(shellTag, shellTagVNodeData, [h2(component, vNodeData)]);
+    }
     const app = new Vue(__spreadValues({
-      render(h) {
-        return h(component, vNodeData);
-      }
+      render: render2
     }, onBeforeCreateApp(context, component, mergedProps)));
     onCreatedApp(app, context, component, mergedProps);
-    const content = await renderer.renderToString(app);
-    const stateStringify = state ? htmlEscapeJsonString(JSON.stringify(state)) : void 0;
-    return [
-      `<web-widget.shell>${content}</web-widget.shell>`,
-      stateStringify ? `<script as="state" type="application/json">${stateStringify}</script>` : ""
-    ].join("");
+    return Readable.toWeb ? Readable.toWeb(renderer.renderToStream(app)) : renderer.renderToString(app);
   });
 };
 var render = defineVueRender();
 export {
+  WebWidget,
+  __ENV__,
   defineVueRender,
   defineWebWidget,
   render

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web-widget/vue2",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "type": "module",
   "exports": {
     ".": {
@@ -18,13 +18,17 @@
     "dist"
   ],
   "dependencies": {
-    "@web-widget/schema": "0.0.9"
+    "@web-widget/schema": "0.0.9",
+    "@web-widget/web-widget": "1.0.0-alpha.9",
+    "vue": "^2.7.14",
+    "vue-server-renderer": "^2.7.14"
   },
   "peerDependencies": {
     "vue": "^2.7.14",
     "vue-server-renderer": "^2.7.14"
   },
   "devDependencies": {
+    "@types/node": "^20.5.7",
     "tsup": "^7.0.0",
     "typescript": "^5.0.4"
   },

package/dist/types-e1e66865.d.ts

@@ -1,18 +0,0 @@
-import Vue, { Component } from 'vue';
-import { RenderContext, ComponentProps } from '@web-widget/schema';
-
-declare function defineWebWidget(): void;
-
-type JSONValue = string | number | boolean | {
-    [x: string]: JSONValue;
-} | Array<JSONValue>;
-type JSONProps = {
-    [x: string]: JSONValue;
-};
-interface DefineVueRenderOptions {
-    onBeforeCreateApp?: (context: RenderContext, component: Component, props: ComponentProps) => any;
-    onCreatedApp?: (app: Vue, context: RenderContext, component: Component, props: ComponentProps) => void;
-    onPrefetchData?: (context: RenderContext, component: Component, props: ComponentProps) => Promise<JSONProps>;
-}
-
-export { DefineVueRenderOptions as D, defineWebWidget as d };