@web-widget/vue2 1.56.1 → 1.57.0

package/dist/{chunk-DALLV7RU.js → chunk-3ANIDHOH.js}

@@ -1,16 +1,18 @@
 // src/components.ts
 import { WebWidgetRenderer } from "@web-widget/web-widget";
 import Vue, { h, defineComponent, useAttrs, getCurrentInstance } from "vue";
-import { IS_CLIENT } from "@web-widget/helpers/env";
 Vue.config.ignoredElements = ["web-widget"];
-Vue.config.warnHandler = (msg, vm, trace) => {
-  if (msg === `Error in setup: "[object Promise]"`) {
+Vue.config.warnHandler = (msg, _vm, trace) => {
+  if (msg.includes(`[object Promise]`)) {
     return;
   }
   console.error("[Vue warn]: ".concat(msg).concat(trace));
 };
 function defineWebWidget(loader, options) {
   var _a, _b;
+  if (!loader) {
+    throw new TypeError(`Missing loader.`);
+  }
   return defineComponent({
     name: "WebWidgetRoot",
     inheritAttrs: false,
@@ -33,25 +35,9 @@ function defineWebWidget(loader, options) {
     },
     async serverPrefetch() {
       const widget = this.$widget;
-      const innerHTML = await widget.renderInnerHTMLToString();
-      this.$innerHTML = innerHTML;
+      this.$innerHTML = await widget.renderInnerHTMLToString();
     },
-    // async mounted() {
-    //   if (!(this as any).$innerHTML) {
-    //     const widget = (this as any).$widget as WebWidgetRenderer;
-    //     const innerHTML = await widget.renderInnerHTMLToString();
-    //     (this as any).$innerHTML = innerHTML;
-    //   }
-    // },
-    setup({
-      fallback,
-      experimental_loading,
-      renderStage,
-      experimental_renderTarget
-    }, { slots }) {
-      if (!loader) {
-        throw new TypeError(`Missing loader.`);
-      }
+    setup(props, { slots }) {
       if (Object.keys(slots).length > 0) {
         throw new TypeError(`Slot not supported.`);
       }
@@ -59,21 +45,17 @@ function defineWebWidget(loader, options) {
       const widget = new WebWidgetRenderer(loader, {
         ...options,
         data,
-        loading: experimental_loading,
-        renderStage,
-        renderTarget: experimental_renderTarget
+        loading: props.experimental_loading,
+        renderStage: props.renderStage,
+        renderTarget: props.experimental_renderTarget
       });
       const instance = getCurrentInstance();
       instance.proxy.$widget = widget;
-      if (IS_CLIENT) {
-      }
       return () => {
         const innerHTML = instance.proxy.$innerHTML;
         return h(widget.localName, {
           attrs: widget.attributes,
-          domProps: {
-            innerHTML
-          }
+          domProps: { innerHTML }
         });
       };
     }

package/dist/{types-ByGZXCRo.d.ts → types-4o3Qq_l9.d.ts}

@@ -3,7 +3,7 @@ import vue__default, { PropType, Component, ComponentPublicInstance } from 'vue'
 import { WebWidgetRendererOptions, Loader } from '@web-widget/web-widget';
 import { ReactWidgetComponent } from '@web-widget/react';
 import { DefaultProps } from 'vue/types/options';
-import { RenderContext, ComponentProps, SerializableValue } from '@web-widget/helpers';
+import { SerializableValue } from '@web-widget/helpers';
 
 interface DefineWebWidgetOptions {
     base?: WebWidgetRendererOptions['base'];
@@ -59,10 +59,21 @@ interface SerializableObject {
     [key: string]: SerializableValue;
 }
 interface CreateVueRenderOptions {
-    onBeforeCreateApp?: (context: RenderContext, component: Component, props: ComponentProps) => Promise<any>;
-    onCreatedApp?: (app: vue__default, context: RenderContext, component: Component, props: ComponentProps) => Promise<void>;
+    onBeforeCreateApp?: (context: {
+        container?: Element | DocumentFragment;
+        data: any;
+        progressive?: boolean;
+        recovering?: boolean;
+    }, component: Component, props: any) => Promise<any>;
+    onCreatedApp?: (app: vue__default, context: {
+        data: any;
+    }, component: Component, props: any) => Promise<void>;
     /**@deprecated*/
-    onPrefetchData?: (context: RenderContext, component: Component, props: ComponentProps) => Promise<SerializableObject>;
+    onPrefetchData?: (context: {
+        data: any;
+    }, component: Component, 
+    /**@deprecated*/
+    props: any) => Promise<SerializableObject>;
 }
 
 export { type CreateVueRenderOptions as C, type DefineWebWidgetOptions as D, defineWebWidget as d, toReact as t };

package/dist/vue2.client.d.ts

@@ -1,16 +1,19 @@
 import * as _web_widget_helpers from '@web-widget/helpers';
 export * from '@web-widget/helpers';
-import { C as CreateVueRenderOptions } from './types-ByGZXCRo.js';
-export { D as DefineWebWidgetOptions, d as defineWebWidget, t as toReact } from './types-ByGZXCRo.js';
+import { Component } from 'vue';
+import { C as CreateVueRenderOptions } from './types-4o3Qq_l9.js';
+export { D as DefineWebWidgetOptions, d as defineWebWidget, t as toReact } from './types-4o3Qq_l9.js';
 export { useWidgetSyncState as useWidgetState } from '@web-widget/helpers/state';
-import 'vue';
 import '@web-widget/web-widget';
 import '@web-widget/react';
 import 'vue/types/options';
 
-declare const createVueRender: ({ onBeforeCreateApp, onCreatedApp, onPrefetchData, }?: CreateVueRenderOptions) => (context: _web_widget_helpers.WidgetRenderContext<unknown>, renderOptions: _web_widget_helpers.WidgetRenderOptions) => Promise<_web_widget_helpers.WidgetRenderResult>;
+type EnhancedComponent = Component & {
+    __name?: string;
+};
+declare const createVueRender: ({ onBeforeCreateApp, onCreatedApp, onPrefetchData, }?: CreateVueRenderOptions) => _web_widget_helpers.ClientRender<EnhancedComponent, unknown, _web_widget_helpers.ClientRenderOptions, void | _web_widget_helpers.ClientRenderResult<unknown>>;
 /**@deprecated Please use `createVueRender` instead.*/
-declare const defineVueRender: ({ onBeforeCreateApp, onCreatedApp, onPrefetchData, }?: CreateVueRenderOptions) => (context: _web_widget_helpers.WidgetRenderContext<unknown>, renderOptions: _web_widget_helpers.WidgetRenderOptions) => Promise<_web_widget_helpers.WidgetRenderResult>;
-declare const render: (context: _web_widget_helpers.WidgetRenderContext<unknown>, renderOptions: _web_widget_helpers.WidgetRenderOptions) => Promise<_web_widget_helpers.WidgetRenderResult>;
+declare const defineVueRender: ({ onBeforeCreateApp, onCreatedApp, onPrefetchData, }?: CreateVueRenderOptions) => _web_widget_helpers.ClientRender<EnhancedComponent, unknown, _web_widget_helpers.ClientRenderOptions, void | _web_widget_helpers.ClientRenderResult<unknown>>;
+declare const render: _web_widget_helpers.ClientRender<EnhancedComponent, unknown, _web_widget_helpers.ClientRenderOptions, void | _web_widget_helpers.ClientRenderResult<unknown>>;
 
 export { createVueRender, defineVueRender, render };

package/dist/vue2.client.js

@@ -1,94 +1,99 @@
 import {
   defineWebWidget,
   toReact
-} from "./chunk-DALLV7RU.js";
+} from "./chunk-3ANIDHOH.js";
 
 // src/client.ts
-import { defineRender, getComponentDescriptor } from "@web-widget/helpers";
+import { defineClientRender } from "@web-widget/helpers";
 import { cacheProviderIsLoading } from "@web-widget/helpers/cache";
 import Vue from "vue";
 export * from "@web-widget/helpers";
 import { useWidgetSyncState } from "@web-widget/helpers/state";
+function sanitizeComponentName(name) {
+  return name.replace("@", ".");
+}
+function clearContainerContent(container) {
+  if ("innerHTML" in container) {
+    container.innerHTML = "";
+  }
+}
 var createVueRender = ({
   onBeforeCreateApp = async () => ({}),
   onCreatedApp = async () => {
   },
   onPrefetchData
 } = {}) => {
-  return defineRender(async (context) => {
-    let { recovering, container } = context;
-    const componentDescriptor = getComponentDescriptor(context);
-    const component = componentDescriptor.component;
-    const props = componentDescriptor.props;
-    if (!container) {
-      throw new Error(`Container required.`);
-    }
-    if (component.__name) {
-      component.__name = component.__name.replace("@", ".");
-    }
-    let app;
-    return {
-      async mount() {
-        let ssrRoot = container;
-        let mergedProps = props;
-        if (recovering) {
-          const vue2ssrAttrSelector = `[data-server-rendered="true"]`;
-          const root = container.querySelector(vue2ssrAttrSelector) || container.firstElementChild;
-          const state = container.querySelector(
-            "script[as=state]"
-          );
-          const stateContent = state ? JSON.parse(state.textContent) : onPrefetchData ? await onPrefetchData(context, component, props) : void 0;
-          if (!root) {
-            throw new Error(
-              `No element found for hydration: ${vue2ssrAttrSelector}`
+  return defineClientRender(
+    async (component, data, { recovering, container }) => {
+      if (!component) {
+        throw new TypeError(`Missing component.`);
+      }
+      if (!container) {
+        throw new Error(`Missing container.`);
+      }
+      if (component.__name) {
+        component.__name = sanitizeComponentName(component.__name);
+      }
+      let app;
+      const context = { data, recovering, container };
+      return {
+        async mount() {
+          let ssrRoot = container;
+          let mergedProps = data;
+          if (recovering) {
+            const vue2ssrAttrSelector = `[data-server-rendered="true"]`;
+            const root = container.querySelector(vue2ssrAttrSelector) || container.firstElementChild;
+            const state = container.querySelector(
+              "script[as=state]"
             );
-          }
-          ssrRoot = root;
-          mergedProps = stateContent ? Object.assign(stateContent, props) : props;
-          state == null ? void 0 : state.remove();
-        }
-        let loading;
-        app = new Vue({
-          render(h) {
-            return h(component, {
-              props: mergedProps
-            });
-          },
-          errorCaptured: (err, vm, info) => {
-            if (cacheProviderIsLoading(err)) {
-              loading = err;
-              return false;
-            } else {
-              throw err;
+            const stateContent = state ? JSON.parse(state.textContent) : onPrefetchData ? await onPrefetchData(context, component, data) : void 0;
+            if (!root) {
+              throw new Error(
+                `No element found for hydration: ${vue2ssrAttrSelector}`
+              );
             }
-          },
-          ...await onBeforeCreateApp(context, component, mergedProps)
-        });
-        await onCreatedApp(app, context, component, mergedProps);
-        if (recovering) {
-          app.$mount(ssrRoot, recovering);
-        } else {
-          container.appendChild(app.$mount().$el);
-        }
-        if (loading) {
-          recovering = false;
-          clearInsterHTML(container);
-          throw loading;
+            ssrRoot = root;
+            mergedProps = stateContent ? Object.assign(stateContent, data) : data;
+            state == null ? void 0 : state.remove();
+          }
+          let loading;
+          app = new Vue({
+            render(h) {
+              return h(component, {
+                props: mergedProps
+              });
+            },
+            errorCaptured: (err, _vm, _info) => {
+              if (cacheProviderIsLoading(err)) {
+                loading = err;
+                return false;
+              } else {
+                throw err;
+              }
+            },
+            ...await onBeforeCreateApp(context, component, mergedProps)
+          });
+          await onCreatedApp(app, context, component, mergedProps);
+          if (recovering) {
+            app.$mount(ssrRoot, recovering);
+          } else {
+            container.appendChild(app.$mount().$el);
+          }
+          if (loading) {
+            recovering = false;
+            clearContainerContent(container);
+            throw loading;
+          }
+        },
+        async unmount() {
+          app == null ? void 0 : app.$destroy();
+          clearContainerContent(container);
+          app = null;
         }
-      },
-      async unmount() {
-        app == null ? void 0 : app.$destroy();
-        clearInsterHTML(container);
-        app = null;
-      }
-    };
-  });
+      };
+    }
+  );
 };
-function clearInsterHTML(container) {
-  if ("innerHTML" in container) {
-    container.innerHTML = "";
-  }
-}
 var defineVueRender = createVueRender;
 var render = createVueRender();
 export {

package/dist/vue2.server.d.ts

@@ -1,16 +1,19 @@
 import * as _web_widget_helpers from '@web-widget/helpers';
 export * from '@web-widget/helpers';
-import { C as CreateVueRenderOptions } from './types-ByGZXCRo.js';
-export { D as DefineWebWidgetOptions, d as defineWebWidget, t as toReact } from './types-ByGZXCRo.js';
+import { Component } from 'vue';
+import { C as CreateVueRenderOptions } from './types-4o3Qq_l9.js';
+export { D as DefineWebWidgetOptions, d as defineWebWidget, t as toReact } from './types-4o3Qq_l9.js';
 export { useWidgetSyncState as useWidgetState } from '@web-widget/helpers/state';
-import 'vue';
 import '@web-widget/web-widget';
 import '@web-widget/react';
 import 'vue/types/options';
 
-declare const createVueRender: ({ onBeforeCreateApp, onCreatedApp, onPrefetchData, }?: CreateVueRenderOptions) => (context: _web_widget_helpers.RouteRenderContext<unknown, Record<string, string>>, renderOptions: _web_widget_helpers.RouteRenderOptions) => Promise<_web_widget_helpers.RouteRenderResult>;
+type BuildedComponent = Component & {
+    __name?: string;
+};
+declare const createVueRender: ({ onBeforeCreateApp, onCreatedApp, onPrefetchData, }?: CreateVueRenderOptions) => _web_widget_helpers.ServerRender<BuildedComponent, unknown, _web_widget_helpers.ServerRenderOptions, _web_widget_helpers.ServerRenderResult>;
 /**@deprecated Please use `createVueRender` instead.*/
-declare const defineVueRender: ({ onBeforeCreateApp, onCreatedApp, onPrefetchData, }?: CreateVueRenderOptions) => (context: _web_widget_helpers.RouteRenderContext<unknown, Record<string, string>>, renderOptions: _web_widget_helpers.RouteRenderOptions) => Promise<_web_widget_helpers.RouteRenderResult>;
-declare const render: (context: _web_widget_helpers.RouteRenderContext<unknown, Record<string, string>>, renderOptions: _web_widget_helpers.RouteRenderOptions) => Promise<_web_widget_helpers.RouteRenderResult>;
+declare const defineVueRender: ({ onBeforeCreateApp, onCreatedApp, onPrefetchData, }?: CreateVueRenderOptions) => _web_widget_helpers.ServerRender<BuildedComponent, unknown, _web_widget_helpers.ServerRenderOptions, _web_widget_helpers.ServerRenderResult>;
+declare const render: _web_widget_helpers.ServerRender<BuildedComponent, unknown, _web_widget_helpers.ServerRenderOptions, _web_widget_helpers.ServerRenderResult>;
 
 export { createVueRender, defineVueRender, render };

package/dist/vue2.server.js

@@ -1,31 +1,35 @@
 import {
   defineWebWidget,
   toReact
-} from "./chunk-DALLV7RU.js";
+} from "./chunk-3ANIDHOH.js";
 
 // src/server.ts
-import { defineRender, getComponentDescriptor } from "@web-widget/helpers";
+import { defineServerRender } from "@web-widget/helpers";
 import { escapeJson } from "@web-widget/helpers/purify";
 import Vue from "vue";
 import { createRenderer } from "vue-server-renderer";
 export * from "@web-widget/helpers";
 import { useWidgetSyncState } from "@web-widget/helpers/state";
+function sanitizeComponentName(name) {
+  return name.replace("@", "-");
+}
 var createVueRender = ({
   onBeforeCreateApp = async () => ({}),
   onCreatedApp = async () => {
   },
   onPrefetchData
 } = {}) => {
-  return defineRender(
-    async (context, { progressive }) => {
-      const componentDescriptor = getComponentDescriptor(context);
-      const component = componentDescriptor.component;
-      const props = componentDescriptor.props;
+  return defineServerRender(
+    async (component, data, { progressive }) => {
+      if (!component) {
+        throw new TypeError(`Missing component.`);
+      }
       if (component.__name) {
-        component.__name = component.__name.replace("@", "-");
+        component.__name = sanitizeComponentName(component.__name);
       }
-      const state = onPrefetchData ? await onPrefetchData(context, component, props) : void 0;
-      const mergedProps = state ? Object.assign({}, state, props) : props;
+      const context = { data, progressive };
+      const state = onPrefetchData ? await onPrefetchData(context, component, data) : void 0;
+      const mergedProps = state ? Object.assign({}, state, data) : data;
       const renderer = createRenderer();
       const app = new Vue({
         render: (h) => h(component, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@web-widget/vue2",
   "description": "Vue2 adapter",
-  "version": "1.56.1",
+  "version": "1.57.0",
   "homepage": "https://github.com/web-widget/web-widget#readme",
   "repository": {
     "type": "git",
@@ -14,10 +14,10 @@
   "license": "MIT",
   "dependencies": {
     "@rollup/pluginutils": "^5.1.4",
-    "@web-widget/helpers": "1.56.1",
-    "@web-widget/vite-plugin": "1.56.1",
-    "@web-widget/web-widget": "1.56.1",
-    "@web-widget/react": "1.56.1"
+    "@web-widget/helpers": "1.57.0",
+    "@web-widget/vite-plugin": "1.57.0",
+    "@web-widget/web-widget": "1.57.0",
+    "@web-widget/react": "1.57.0"
   },
   "devDependencies": {
     "@types/node": "^22.2.0",