@web-widget/vue2 3.0.0-beta.3 → 3.0.0-beta.6

package/dist/chunk-37GMCFVQ.js

@@ -0,0 +1,103 @@
+// src/components.ts
+import { WebWidgetRenderer } from "@web-widget/web-widget";
+import Vue, { h, defineComponent, useAttrs, getCurrentInstance } from "vue";
+var globalConfigInitialized = false;
+function ensureGlobalVueConfig() {
+  if (globalConfigInitialized) return;
+  globalConfigInitialized = true;
+  if (!Vue.config.ignoredElements.includes("web-widget")) {
+    Vue.config.ignoredElements.push("web-widget");
+  }
+  const prevWarnHandler = Vue.config.warnHandler;
+  Vue.config.warnHandler = (msg, _vm, trace) => {
+    if (msg.includes(`[object Promise]`)) {
+      return;
+    }
+    if (prevWarnHandler) {
+      prevWarnHandler.call(null, msg, _vm, trace);
+    } else {
+      console.error("[Vue warn]: ".concat(msg).concat(trace));
+    }
+  };
+}
+function createWidgetAdapter(renderChildren) {
+  return (loader, options = {}) => {
+    if (!loader) {
+      throw new TypeError(`Missing loader.`);
+    }
+    ensureGlobalVueConfig();
+    return defineComponent({
+      name: "VueWidget",
+      inheritAttrs: false,
+      props: {
+        widget: {
+          type: Object,
+          default: () => ({})
+        }
+      },
+      async serverPrefetch() {
+        const lightChildrenHTML = renderChildren ? await renderChildren(this.$lightChildren) : "";
+        const widget = this.$widget;
+        this.$innerHTML = await widget.renderInnerHTMLToString({
+          children: lightChildrenHTML
+        });
+      },
+      setup(props, { slots }) {
+        if (props.widget && "fallback" in props.widget) {
+          throw new TypeError(
+            `fallback is not supported in Vue2 (no Suspense).`
+          );
+        }
+        const { id, loading = options.loading } = props.widget;
+        const renderOptions = {
+          ...options,
+          clientOnly: props.widget.clientOnly,
+          id,
+          loading: loading != null ? loading : options.loading,
+          serverOnly: props.widget.serverOnly
+        };
+        const attrs = { ...useAttrs() };
+        const slot = typeof attrs.slot === "string" ? attrs.slot : void 0;
+        delete attrs.slot;
+        const rendererOptions = {
+          ...renderOptions,
+          data: attrs,
+          root: options.root,
+          slot
+        };
+        const widget = new WebWidgetRenderer(loader, rendererOptions);
+        const lightChildren = Object.entries(slots).flatMap(
+          ([name, render]) => render ? render().map((node) => {
+            var _a, _b, _c, _d, _e;
+            if (name !== "default") {
+              (_a = node.data) != null ? _a : node.data = {};
+              (_c = (_b = node.data).attrs) != null ? _c : _b.attrs = {};
+              (_e = (_d = node.data.attrs).slot) != null ? _e : _d.slot = name;
+            }
+            return node;
+          }) : []
+        );
+        const instance = getCurrentInstance();
+        instance.proxy.$widget = widget;
+        instance.proxy.$lightChildren = lightChildren;
+        return () => {
+          const activeWidget = instance.proxy.$widget;
+          const innerHTML = instance.proxy.$innerHTML;
+          const children = renderChildren ? void 0 : lightChildren.length ? lightChildren : void 0;
+          return h(
+            activeWidget.localName,
+            {
+              attrs: activeWidget.attributes,
+              ...innerHTML !== void 0 ? { domProps: { innerHTML } } : null
+            },
+            children
+          );
+        };
+      }
+    });
+  };
+}
+
+export {
+  createWidgetAdapter
+};

package/dist/types-BWQUJEPi.d.ts

@@ -0,0 +1,45 @@
+import { WidgetContainerProps, WidgetContainerOptions, WidgetHostProps, ExtractWidgetProps, WidgetModuleLoader } from '@web-widget/schema';
+import Vue, { DefineComponent, Component } from 'vue';
+import { SerializableValue } from '@web-widget/helpers';
+
+/**
+ * A Vue2 component wrapping a widget, with props `T` plus container config.
+ */
+type VueWidgetComponent<T = unknown> = DefineComponent<T & WidgetHostProps & {
+    widget?: Vue2WidgetContainerProps;
+}>;
+type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
+type Vue2WidgetContainerProps = DistributiveOmit<WidgetContainerProps, 'fallback'>;
+/**
+ * Container function (AdapterModule contract).
+ *
+ * Wraps a widget module loader into a Vue2 component with best-effort
+ * props type inference from the source module's default export.
+ */
+interface Vue2WidgetFactory {
+    <M>(loader: () => Promise<M>, options?: WidgetContainerOptions): VueWidgetComponent<ExtractWidgetProps<M>>;
+    <Props>(loader: WidgetModuleLoader, options?: WidgetContainerOptions): VueWidgetComponent<Props>;
+}
+
+interface SerializableObject {
+    [key: string]: SerializableValue;
+}
+interface CreateVueRenderOptions {
+    onBeforeCreateApp?: (context: {
+        container?: Element | DocumentFragment;
+        data: any;
+        progressive?: boolean;
+        recovering?: boolean;
+    }, component: Component, props: any) => Promise<any>;
+    onCreatedApp?: (app: Vue, context: {
+        data: any;
+    }, component: Component, props: any) => Promise<void>;
+    /**@deprecated*/
+    onPrefetchData?: (context: {
+        data: any;
+    }, component: Component, 
+    /**@deprecated*/
+    props: any) => Promise<SerializableObject>;
+}
+
+export type { CreateVueRenderOptions as C, Vue2WidgetFactory as V, Vue2WidgetContainerProps as a, VueWidgetComponent as b };

package/dist/vue2.adapter.client.d.ts

@@ -1,13 +1,14 @@
 import * as _web_widget_schema from '@web-widget/schema';
+export { WidgetContainerOptions } from '@web-widget/schema';
+import { C as CreateVueRenderOptions, V as Vue2WidgetFactory } from './types-BWQUJEPi.js';
+export { a as Vue2WidgetContainerProps, b as VueWidgetComponent } from './types-BWQUJEPi.js';
 import { Component } from 'vue';
-import { C as CreateVueRenderOptions } from './types-DSyp4jjz.js';
-export { D as DefineWebWidgetOptions, V as VueWidgetComponent, W as WidgetContainerConfig, c as container } from './types-DSyp4jjz.js';
 export { asReactWidget, toReact } from './vue2.js';
-import '@web-widget/web-widget';
 import '@web-widget/helpers';
 import 'vue/types/options';
 import '@web-widget/react/adapter';
 
+declare const widget: Vue2WidgetFactory;
 type EnhancedComponent = Component & {
     __name?: string;
 };
@@ -16,4 +17,4 @@ declare const createVueRender: ({ onBeforeCreateApp, onCreatedApp, onPrefetchDat
 declare const defineVueRender: ({ onBeforeCreateApp, onCreatedApp, onPrefetchData, }?: CreateVueRenderOptions) => _web_widget_schema.ClientRender<EnhancedComponent, unknown, _web_widget_schema.ClientRenderOptions, void | _web_widget_schema.ClientRenderResult<unknown>>;
 declare const render: _web_widget_schema.ClientRender<EnhancedComponent, unknown, _web_widget_schema.ClientRenderOptions, void | _web_widget_schema.ClientRenderResult<unknown>>;
 
-export { createVueRender, defineVueRender, render };
+export { Vue2WidgetFactory, createVueRender, defineVueRender, render, widget };

package/dist/vue2.adapter.client.js

@@ -1,6 +1,6 @@
 import {
-  container
-} from "./chunk-B5NQMGE5.js";
+  createWidgetAdapter
+} from "./chunk-37GMCFVQ.js";
 import {
   asReactWidget,
   toReact
@@ -10,12 +10,13 @@ import {
 import { defineClientRender } from "@web-widget/helpers";
 import { cacheProviderIsLoading } from "@web-widget/helpers/cache";
 import Vue from "vue";
+var widget = createWidgetAdapter();
 function sanitizeComponentName(name) {
   return name.replace("@", "-");
 }
-function clearContainerContent(container2) {
-  if ("innerHTML" in container2) {
-    container2.innerHTML = "";
+function clearContainerContent(container) {
+  if ("innerHTML" in container) {
+    container.innerHTML = "";
   }
 }
 var createVueRender = ({
@@ -25,27 +26,27 @@ var createVueRender = ({
   onPrefetchData
 } = {}) => {
   return defineClientRender(
-    async (component, data, { recovering, container: container2 }) => {
+    async (component, data, { recovering, container }) => {
       data = data != null ? data : {};
       if (!component) {
         throw new TypeError(`Missing component.`);
       }
-      if (!container2) {
+      if (!container) {
         throw new Error(`Missing container.`);
       }
       if (component.__name) {
         component.__name = sanitizeComponentName(component.__name);
       }
       let app;
-      const context = { data, recovering, container: container2 };
+      const context = { data, recovering, container };
       return {
         async mount() {
-          let ssrRoot = container2;
+          let ssrRoot = container;
           let mergedProps = data;
           if (recovering) {
             const vue2ssrAttrSelector = `[data-server-rendered="true"]`;
-            const root = container2.querySelector(vue2ssrAttrSelector) || container2.firstElementChild;
-            const state = container2.querySelector(
+            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, data) : void 0;
@@ -79,17 +80,17 @@ var createVueRender = ({
           if (recovering) {
             app.$mount(ssrRoot, recovering);
           } else {
-            container2.appendChild(app.$mount().$el);
+            container.appendChild(app.$mount().$el);
           }
           if (loading) {
             recovering = false;
-            clearContainerContent(container2);
+            clearContainerContent(container);
             throw loading;
           }
         },
         async unmount() {
           app == null ? void 0 : app.$destroy();
-          clearContainerContent(container2);
+          clearContainerContent(container);
           app = null;
         }
       };
@@ -100,9 +101,9 @@ var defineVueRender = createVueRender;
 var render = createVueRender();
 export {
   asReactWidget,
-  container,
   createVueRender,
   defineVueRender,
   render,
-  toReact
+  toReact,
+  widget
 };

package/dist/vue2.adapter.server.d.ts

@@ -1,13 +1,14 @@
 import * as _web_widget_schema from '@web-widget/schema';
+export { WidgetContainerOptions } from '@web-widget/schema';
+import { C as CreateVueRenderOptions, V as Vue2WidgetFactory } from './types-BWQUJEPi.js';
+export { a as Vue2WidgetContainerProps, b as VueWidgetComponent } from './types-BWQUJEPi.js';
 import { Component } from 'vue';
-import { C as CreateVueRenderOptions } from './types-DSyp4jjz.js';
-export { D as DefineWebWidgetOptions, V as VueWidgetComponent, W as WidgetContainerConfig, c as container } from './types-DSyp4jjz.js';
 export { asReactWidget, toReact } from './vue2.js';
-import '@web-widget/web-widget';
 import '@web-widget/helpers';
 import 'vue/types/options';
 import '@web-widget/react/adapter';
 
+declare const widget: Vue2WidgetFactory;
 type BuildedComponent = Component & {
     __name?: string;
 };
@@ -16,4 +17,4 @@ declare const createVueRender: ({ onBeforeCreateApp, onCreatedApp, onPrefetchDat
 declare const defineVueRender: ({ onBeforeCreateApp, onCreatedApp, onPrefetchData, }?: CreateVueRenderOptions) => _web_widget_schema.ServerRender<BuildedComponent, unknown, _web_widget_schema.ServerRenderOptions, _web_widget_schema.ServerRenderResult>;
 declare const render: _web_widget_schema.ServerRender<BuildedComponent, unknown, _web_widget_schema.ServerRenderOptions, _web_widget_schema.ServerRenderResult>;
 
-export { createVueRender, defineVueRender, render };
+export { Vue2WidgetFactory, createVueRender, defineVueRender, render, widget };

package/dist/vue2.adapter.server.js

@@ -1,6 +1,6 @@
 import {
-  container
-} from "./chunk-B5NQMGE5.js";
+  createWidgetAdapter
+} from "./chunk-37GMCFVQ.js";
 import {
   asReactWidget,
   toReact
@@ -11,6 +11,15 @@ import { defineServerRender } from "@web-widget/helpers";
 import { escapeJson } from "@web-widget/helpers/purify";
 import Vue from "vue";
 import { createRenderer } from "vue-server-renderer";
+var widget = createWidgetAdapter(async (children) => {
+  if (!children.length) return "";
+  const renderer = createRenderer();
+  return (await Promise.all(
+    children.map(
+      (node) => renderer.renderToString(new Vue({ render: () => node }))
+    )
+  )).join("");
+});
 function sanitizeComponentName(name) {
   return name.replace("@", "-");
 }
@@ -41,7 +50,9 @@ var createVueRender = ({
       });
       await onCreatedApp(app, context, component, mergedProps);
       if (progressive) {
-        console.warn(`Vue2 does not support progressive rendering.`);
+        console.warn(
+          `Vue 2 does not support progressive server rendering; falling back to buffered rendering.`
+        );
       }
       const ssrContext = {};
       const result = await renderer.renderToString(app, ssrContext);
@@ -60,9 +71,9 @@ var defineVueRender = createVueRender;
 var render = createVueRender();
 export {
   asReactWidget,
-  container,
   createVueRender,
   defineVueRender,
   render,
-  toReact
+  toReact,
+  widget
 };

package/dist/vue2.d.ts

@@ -5,15 +5,15 @@ import { ReactWidgetComponent } from '@web-widget/react/adapter';
 /**
  * Adapt Vue component types to React widget component types.
  *
- * @deprecated Use `container()` from `@web-widget/react/adapter` instead.
+ * @deprecated Use `widget()` from `@web-widget/react/adapter` instead.
  * The build tool automatically infers props types for both static imports
- * and explicit `container(() => import(...))` calls.
+ * and explicit `widget(() => import(...))` calls.
  *
  * This is a type-level cast only — the actual cross-framework rendering
  * is handled by the `@widget` system.
  */
 declare function asReactWidget<T extends DefaultProps>(component: Component<never, never, never, T, never>): ReactWidgetComponent<Omit<T, keyof ComponentPublicInstance | "$route" | "$router">>;
-/** @deprecated Use `container()` from `@web-widget/react/adapter` instead. */
+/** @deprecated Use `widget()` from `@web-widget/react/adapter` instead. */
 declare const toReact: typeof asReactWidget;
 
 export { asReactWidget, toReact };

package/dist/vue2.transform.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+    name: string;
+    extensions: string[];
+    adapter: string;
+    deriveExports: {
+        name: string;
+        default: string;
+    }[];
+};
+
+export { _default as default };

package/dist/vue2.transform.js

@@ -0,0 +1,13 @@
+// src/transform.ts
+var transform_default = {
+  name: "vue2",
+  extensions: [".vue"],
+  adapter: "@web-widget/vue2/adapter",
+  deriveExports: [
+    { name: "handler", default: "{GET({render}){return render()}}" },
+    { name: "meta", default: "{}" }
+  ]
+};
+export {
+  transform_default as default
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@web-widget/vue2",
   "description": "Vue2 adapter",
-  "version": "3.0.0-beta.3",
+  "version": "3.0.0-beta.6",
   "homepage": "https://github.com/web-widget/web-widget#readme",
   "repository": {
     "type": "git",
@@ -13,15 +13,17 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@web-widget/helpers": "3.0.0-beta.3",
-    "@web-widget/schema": "3.0.0-beta.3",
-    "@web-widget/react": "3.0.0-beta.3",
-    "@web-widget/web-widget": "3.0.0-beta.3"
+    "@web-widget/helpers": "3.0.0-beta.6",
+    "@web-widget/schema": "3.0.0-beta.6",
+    "@web-widget/web-widget": "3.0.0-beta.6",
+    "@web-widget/react": "3.0.0-beta.6"
   },
   "devDependencies": {
     "@types/node": "^22.2.0",
+    "happy-dom": "14.12.3",
     "tsup": "^8.3.4",
     "typescript": "^5.9.3",
+    "vitest": "^4.1.6",
     "vue": "^2.7.16",
     "vue-server-renderer": "^2.7.16"
   },
@@ -30,6 +32,10 @@
       "types": "./dist/vue2.d.ts",
       "default": "./dist/vue2.js"
     },
+    "./transform": {
+      "types": "./dist/vue2.transform.d.ts",
+      "default": "./dist/vue2.transform.js"
+    },
     "./adapter": {
       "worker": {
         "types": "./dist/vue2.adapter.server.d.ts",
@@ -45,24 +51,6 @@
       }
     }
   },
-  "webWidgetAdapter": {
-    "version": "1.0.0",
-    "name": "vue2",
-    "extensions": [
-      ".vue"
-    ],
-    "adapter": "./adapter",
-    "deriveExports": [
-      {
-        "name": "handler",
-        "default": "{GET({render}){return render()}}"
-      },
-      {
-        "name": "meta",
-        "default": "{}"
-      }
-    ]
-  },
   "files": [
     "dist"
   ],
@@ -81,6 +69,7 @@
     "clean:node": "rm -rf node_modules",
     "dev": "pnpm exec tsup --watch",
     "lint": "eslint src",
-    "prebuild": "pnpm run clean:build"
+    "prebuild": "pnpm run clean:build",
+    "test": "vitest run"
   }
 }

package/dist/chunk-B5NQMGE5.js

@@ -1,76 +0,0 @@
-// src/components.ts
-import { WebWidgetRenderer } from "@web-widget/web-widget";
-import Vue, { h, defineComponent, useAttrs, getCurrentInstance } from "vue";
-var globalConfigInitialized = false;
-function ensureGlobalVueConfig() {
-  if (globalConfigInitialized) return;
-  globalConfigInitialized = true;
-  Vue.config.ignoredElements = ["web-widget"];
-  const prevWarnHandler = Vue.config.warnHandler;
-  Vue.config.warnHandler = (msg, _vm, trace) => {
-    if (msg.includes(`[object Promise]`)) {
-      return;
-    }
-    if (prevWarnHandler) {
-      prevWarnHandler.call(null, msg, _vm, trace);
-    } else {
-      console.error("[Vue warn]: ".concat(msg).concat(trace));
-    }
-  };
-}
-function container(loader, options = {}) {
-  if (!loader) {
-    throw new TypeError(`Missing loader.`);
-  }
-  ensureGlobalVueConfig();
-  return defineComponent({
-    name: "VueWidget",
-    inheritAttrs: false,
-    props: {
-      widget: {
-        type: Object,
-        default: () => ({})
-      }
-    },
-    async serverPrefetch() {
-      const widget = this.$widget;
-      this.$innerHTML = await widget.renderInnerHTMLToString();
-    },
-    setup(props, { slots }) {
-      var _a, _b;
-      if (Object.keys(slots).length > 0) {
-        throw new TypeError(`Slot not supported.`);
-      }
-      if (props.widget && "fallback" in props.widget) {
-        throw new TypeError(`fallback is not supported in Vue2 (no Suspense).`);
-      }
-      const {
-        loading = (_a = options.loading) != null ? _a : "lazy",
-        serverOnly,
-        clientOnly
-      } = props.widget;
-      const renderStage = serverOnly ? "server" : clientOnly ? "client" : options.renderStage;
-      const data = useAttrs();
-      const widget = new WebWidgetRenderer(loader, {
-        ...options,
-        data,
-        loading,
-        renderStage,
-        renderTarget: (_b = options.renderTarget) != null ? _b : "light"
-      });
-      const instance = getCurrentInstance();
-      instance.proxy.$widget = widget;
-      return () => {
-        const innerHTML = instance.proxy.$innerHTML;
-        return h(widget.localName, {
-          attrs: widget.attributes,
-          domProps: { innerHTML }
-        });
-      };
-    }
-  });
-}
-
-export {
-  container
-};

package/dist/types-DSyp4jjz.d.ts

@@ -1,60 +0,0 @@
-import { WebWidgetRendererOptions, Loader } from '@web-widget/web-widget';
-import { ExtractWidgetProps } from '@web-widget/schema';
-import Vue, { DefineComponent, Component } from 'vue';
-import { SerializableValue } from '@web-widget/helpers';
-
-/**
- * A Vue2 component wrapping a widget, with props `T` plus container config.
- */
-type VueWidgetComponent<T = unknown> = DefineComponent<{
-    widget?: WidgetContainerConfig;
-}> & {
-    attrs: T;
-};
-interface DefineWebWidgetOptions {
-    base?: WebWidgetRendererOptions['base'];
-    import?: WebWidgetRendererOptions['import'];
-    loading?: WebWidgetRendererOptions['loading'];
-    name?: WebWidgetRendererOptions['name'];
-    renderStage?: WebWidgetRendererOptions['renderStage'];
-    renderTarget?: WebWidgetRendererOptions['renderTarget'];
-}
-interface WidgetContainerConfig {
-    /** Client-side module loading strategy */
-    loading?: WebWidgetRendererOptions['loading'];
-    /** Widget renders only on the server, not mounted on the client. Mutually exclusive with `clientOnly`. */
-    serverOnly?: true;
-    /** Widget renders only on the client, producing no server HTML. Mutually exclusive with `serverOnly`. */
-    clientOnly?: true;
-}
-/**
- * Container function (WebWidgetAdapter protocol).
- *
- * Wraps a widget module loader into a Vue2 component with best-effort
- * props type inference from the source module's default export.
- */
-declare function container<M>(loader: () => Promise<M>, options?: DefineWebWidgetOptions): VueWidgetComponent<ExtractWidgetProps<M>>;
-declare function container<Props>(loader: Loader, options?: DefineWebWidgetOptions): VueWidgetComponent<Props>;
-
-interface SerializableObject {
-    [key: string]: SerializableValue;
-}
-interface CreateVueRenderOptions {
-    onBeforeCreateApp?: (context: {
-        container?: Element | DocumentFragment;
-        data: any;
-        progressive?: boolean;
-        recovering?: boolean;
-    }, component: Component, props: any) => Promise<any>;
-    onCreatedApp?: (app: Vue, context: {
-        data: any;
-    }, component: Component, props: any) => Promise<void>;
-    /**@deprecated*/
-    onPrefetchData?: (context: {
-        data: any;
-    }, component: Component, 
-    /**@deprecated*/
-    props: any) => Promise<SerializableObject>;
-}
-
-export { type CreateVueRenderOptions as C, type DefineWebWidgetOptions as D, type VueWidgetComponent as V, type WidgetContainerConfig as W, container as c };