@web-widget/vue 0.11.1 → 0.12.1

package/dist/vite.cjs

@@ -1,6 +1,8 @@
 "use strict";
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
@@ -17,6 +19,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -38,20 +41,27 @@ __export(vite_exports, {
 });
 module.exports = __toCommonJS(vite_exports);
 var import_vite = require("@web-widget/vite");
+var VUE_INTERNAL_REQUEST = /vue\?vue\b.*$/;
+function toArray(value) {
+  return Array.isArray(value) ? value : value ? [value] : [];
+}
 function vueWebWidgetPlugin({
   provide = "@web-widget/vue",
-  toWebWidgets = {},
-  toComponents = {}
+  export: exportWidget = {},
+  import: importWidget = {}
 } = {}) {
   return (0, import_vite.webWidgetPlugin)({
     provide,
-    toWebWidgets: __spreadValues({
-      include: /(?:\.|@)(?:route|widget).*\.vue(\?.*)?$/,
-      exclude: /\?.*\.css$/
-    }, toWebWidgets),
-    toComponents: __spreadValues({
-      include: /(?:\.|@)widget\.[^.]*$/,
-      includeImporter: /.*\.vue(\?.*\.(?:ts|js))?$/
-    }, toComponents)
+    export: __spreadProps(__spreadValues({
+      include: /(?:\.|@)(?:route|widget)\.vue(?:\?.*)?$/
+    }, exportWidget), {
+      exclude: [...toArray(exportWidget.exclude), VUE_INTERNAL_REQUEST]
+    }),
+    import: __spreadProps(__spreadValues({
+      include: /(?:\.|@)widget\..*$/,
+      includeImporter: /.*\.vue(?:\?.*)?$/
+    }, importWidget), {
+      exclude: [...toArray(importWidget.exclude), VUE_INTERNAL_REQUEST]
+    })
   });
 }

package/dist/vite.d.cts

@@ -0,0 +1,8 @@
+import { Plugin } from 'vite';
+import { WebWidgetPluginOptions } from '@web-widget/vite';
+
+interface VueWebWidgetPluginOptions extends WebWidgetPluginOptions {
+}
+declare function vueWebWidgetPlugin({ provide, export: exportWidget, import: importWidget, }?: VueWebWidgetPluginOptions): Plugin[];
+
+export { type VueWebWidgetPluginOptions, vueWebWidgetPlugin as default };

package/dist/vite.d.ts

@@ -3,6 +3,6 @@ import { WebWidgetPluginOptions } from '@web-widget/vite';
 
 interface VueWebWidgetPluginOptions extends WebWidgetPluginOptions {
 }
-declare function vueWebWidgetPlugin({ provide, toWebWidgets, toComponents, }?: VueWebWidgetPluginOptions): Plugin[];
+declare function vueWebWidgetPlugin({ provide, export: exportWidget, import: importWidget, }?: VueWebWidgetPluginOptions): Plugin[];
 
-export { VueWebWidgetPluginOptions, vueWebWidgetPlugin as default };
+export { type VueWebWidgetPluginOptions, vueWebWidgetPlugin as default };

package/dist/vite.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,24 +16,32 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 
 // src/vite.ts
 import { webWidgetPlugin } from "@web-widget/vite";
+var VUE_INTERNAL_REQUEST = /vue\?vue\b.*$/;
+function toArray(value) {
+  return Array.isArray(value) ? value : value ? [value] : [];
+}
 function vueWebWidgetPlugin({
   provide = "@web-widget/vue",
-  toWebWidgets = {},
-  toComponents = {}
+  export: exportWidget = {},
+  import: importWidget = {}
 } = {}) {
   return webWidgetPlugin({
     provide,
-    toWebWidgets: __spreadValues({
-      include: /(?:\.|@)(?:route|widget).*\.vue(\?.*)?$/,
-      exclude: /\?.*\.css$/
-    }, toWebWidgets),
-    toComponents: __spreadValues({
-      include: /(?:\.|@)widget\.[^.]*$/,
-      includeImporter: /.*\.vue(\?.*\.(?:ts|js))?$/
-    }, toComponents)
+    export: __spreadProps(__spreadValues({
+      include: /(?:\.|@)(?:route|widget)\.vue(?:\?.*)?$/
+    }, exportWidget), {
+      exclude: [...toArray(exportWidget.exclude), VUE_INTERNAL_REQUEST]
+    }),
+    import: __spreadProps(__spreadValues({
+      include: /(?:\.|@)widget\..*$/,
+      includeImporter: /.*\.vue(?:\?.*)?$/
+    }, importWidget), {
+      exclude: [...toArray(importWidget.exclude), VUE_INTERNAL_REQUEST]
+    })
   });
 }
 export {

package/dist/vue.client.d.ts

@@ -4,7 +4,7 @@ import * as vue from 'vue';
 import { PropType, VNode, App, Component } from 'vue';
 export * from '@web-widget/schema/client-helpers';
 export { useWidgetAsyncState as useWidgetState } from '@web-widget/schema/client-helpers';
-import { Loader, WebWidgetContainerOptions } from '@web-widget/web-widget';
+import { Loader, WebWidgetRendererOptions } from '@web-widget/web-widget';
 
 declare const WebWidget: vue.DefineComponent<{
     base: {
@@ -47,7 +47,7 @@ declare const WebWidget: vue.DefineComponent<{
     };
 }, () => VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
-}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     base: {
         type: PropType<string | undefined>;
     };
@@ -96,12 +96,12 @@ declare const WebWidget: vue.DefineComponent<{
     renderTarget: "light" | "shadow" | undefined;
 }, {}>;
 interface DefineWebWidgetOptions {
-    base?: WebWidgetContainerOptions["base"];
-    import?: WebWidgetContainerOptions["import"];
-    loading?: WebWidgetContainerOptions["loading"];
-    name?: WebWidgetContainerOptions["name"];
-    renderStage?: WebWidgetContainerOptions["renderStage"];
-    renderTarget?: WebWidgetContainerOptions["renderTarget"];
+    base?: WebWidgetRendererOptions["base"];
+    import?: WebWidgetRendererOptions["import"];
+    loading?: WebWidgetRendererOptions["loading"];
+    name?: WebWidgetRendererOptions["name"];
+    renderStage?: WebWidgetRendererOptions["renderStage"];
+    renderTarget?: WebWidgetRendererOptions["renderTarget"];
 }
 declare function defineWebWidget(loader: Loader, options: DefineWebWidgetOptions): vue.DefineComponent<{
     fallback: {
@@ -123,7 +123,7 @@ declare function defineWebWidget(loader: Loader, options: DefineWebWidgetOptions
     };
 }, () => VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
-}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     fallback: {
         type: PropType<VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
@@ -200,4 +200,4 @@ declare const render: (context: _web_widget_schema.ClientWidgetRenderContext<unk
     }) => void | Promise<void>) | undefined;
 }>;
 
-export { DefineWebWidgetOptions, WebWidget, createVueRender, defineVueRender, defineWebWidget, render };
+export { type DefineWebWidgetOptions, WebWidget, createVueRender, defineVueRender, defineWebWidget, render };

package/dist/vue.client.js

@@ -40,7 +40,7 @@ export * from "@web-widget/schema/client-helpers";
 import { useWidgetAsyncState } from "@web-widget/schema/client-helpers";
 
 // src/components.ts
-import { parse } from "@web-widget/web-widget";
+import { WebWidgetRenderer } from "@web-widget/web-widget";
 import {
   h,
   defineComponent,
@@ -49,7 +49,7 @@ import {
 } from "vue";
 import { IS_BROWSER } from "@web-widget/schema/helpers";
 var WebWidget = /* @__PURE__ */ defineComponent({
-  name: "WebWidget",
+  name: "WebWidgetRoot",
   props: {
     base: {
       type: String
@@ -95,17 +95,18 @@ var WebWidget = /* @__PURE__ */ defineComponent({
     if (Object.keys(slots).length > 0) {
       throw new TypeError(`No support slot.`);
     }
-    const children = "";
-    const [tag, attrs, innerHTML] = await parse(loader, __spreadProps(__spreadValues({}, props), {
-      children
+    const widget = new WebWidgetRenderer(loader, __spreadProps(__spreadValues({}, props), {
+      // TODO slots.default
+      children: ""
     }));
+    const tag = widget.localName;
+    const attrs = widget.attributes;
+    const innerHTML = await widget.renderInnerHTMLToString();
     if (IS_BROWSER) {
-      console.warn(`Client components are experimental.`);
-      await customElements.whenDefined(tag);
-      const element = Object.assign(document.createElement(tag), props);
-      await element.bootstrap();
     }
     return () => h(tag, __spreadProps(__spreadValues({}, attrs), {
+      // NOTE: Use attr instead of props.
+      "^data": attrs.data,
       innerHTML
     }));
   }
@@ -114,6 +115,7 @@ function defineWebWidget(loader, options) {
   var _a, _b;
   return defineComponent({
     name: "WebWidgetSuspense",
+    inheritAttrs: false,
     props: {
       fallback: {
         type: Object

package/dist/vue.server.d.ts

@@ -5,7 +5,7 @@ import * as vue from 'vue';
 import { PropType, VNode, App, Component } from 'vue';
 export * from '@web-widget/schema/server-helpers';
 export { useWidgetAsyncState as useWidgetState } from '@web-widget/schema/server-helpers';
-import { Loader, WebWidgetContainerOptions } from '@web-widget/web-widget';
+import { Loader, WebWidgetRendererOptions } from '@web-widget/web-widget';
 
 declare const WebWidget: vue.DefineComponent<{
     base: {
@@ -48,7 +48,7 @@ declare const WebWidget: vue.DefineComponent<{
     };
 }, () => VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
-}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     base: {
         type: PropType<string | undefined>;
     };
@@ -97,12 +97,12 @@ declare const WebWidget: vue.DefineComponent<{
     renderTarget: "light" | "shadow" | undefined;
 }, {}>;
 interface DefineWebWidgetOptions {
-    base?: WebWidgetContainerOptions["base"];
-    import?: WebWidgetContainerOptions["import"];
-    loading?: WebWidgetContainerOptions["loading"];
-    name?: WebWidgetContainerOptions["name"];
-    renderStage?: WebWidgetContainerOptions["renderStage"];
-    renderTarget?: WebWidgetContainerOptions["renderTarget"];
+    base?: WebWidgetRendererOptions["base"];
+    import?: WebWidgetRendererOptions["import"];
+    loading?: WebWidgetRendererOptions["loading"];
+    name?: WebWidgetRendererOptions["name"];
+    renderStage?: WebWidgetRendererOptions["renderStage"];
+    renderTarget?: WebWidgetRendererOptions["renderTarget"];
 }
 declare function defineWebWidget(loader: Loader, options: DefineWebWidgetOptions): vue.DefineComponent<{
     fallback: {
@@ -124,7 +124,7 @@ declare function defineWebWidget(loader: Loader, options: DefineWebWidgetOptions
     };
 }, () => VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
-}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     fallback: {
         type: PropType<VNode<vue.RendererNode, vue.RendererElement, {
             [key: string]: any;
@@ -168,4 +168,4 @@ declare const createVueRender: ({ onCreatedApp, onPrefetchData, }?: CreateVueRen
 declare const defineVueRender: ({ onCreatedApp, onPrefetchData, }?: CreateVueRenderOptions) => (context: _web_widget_schema.ServerWidgetRenderContext<unknown> | _web_widget_schema.ServerRouteRenderContext<unknown, Record<string, string>>, renderOptions: ResponseInit & VueRenderOptions) => Promise<string | ReadableStream<any> | ReadableStream<any>>;
 declare const render: (context: _web_widget_schema.ServerWidgetRenderContext<unknown> | _web_widget_schema.ServerRouteRenderContext<unknown, Record<string, string>>, renderOptions: ResponseInit & VueRenderOptions) => Promise<string | ReadableStream<any> | ReadableStream<any>>;
 
-export { DefineWebWidgetOptions, VueRenderOptions, WebWidget, createVueRender, defineVueRender, defineWebWidget, render };
+export { type DefineWebWidgetOptions, type VueRenderOptions, WebWidget, createVueRender, defineVueRender, defineWebWidget, render };

package/dist/vue.server.js

@@ -41,7 +41,7 @@ export * from "@web-widget/schema/server-helpers";
 import { useWidgetAsyncState } from "@web-widget/schema/server-helpers";
 
 // src/components.ts
-import { parse } from "@web-widget/web-widget";
+import { WebWidgetRenderer } from "@web-widget/web-widget";
 import {
   h,
   defineComponent,
@@ -50,7 +50,7 @@ import {
 } from "vue";
 import { IS_BROWSER } from "@web-widget/schema/helpers";
 var WebWidget = /* @__PURE__ */ defineComponent({
-  name: "WebWidget",
+  name: "WebWidgetRoot",
   props: {
     base: {
       type: String
@@ -96,17 +96,18 @@ var WebWidget = /* @__PURE__ */ defineComponent({
     if (Object.keys(slots).length > 0) {
       throw new TypeError(`No support slot.`);
     }
-    const children = "";
-    const [tag, attrs, innerHTML] = await parse(loader, __spreadProps(__spreadValues({}, props), {
-      children
+    const widget = new WebWidgetRenderer(loader, __spreadProps(__spreadValues({}, props), {
+      // TODO slots.default
+      children: ""
     }));
+    const tag = widget.localName;
+    const attrs = widget.attributes;
+    const innerHTML = await widget.renderInnerHTMLToString();
     if (IS_BROWSER) {
-      console.warn(`Client components are experimental.`);
-      await customElements.whenDefined(tag);
-      const element = Object.assign(document.createElement(tag), props);
-      await element.bootstrap();
     }
     return () => h(tag, __spreadProps(__spreadValues({}, attrs), {
+      // NOTE: Use attr instead of props.
+      "^data": attrs.data,
       innerHTML
     }));
   }
@@ -115,6 +116,7 @@ function defineWebWidget(loader, options) {
   var _a, _b;
   return defineComponent({
     name: "WebWidgetSuspense",
+    inheritAttrs: false,
     props: {
       fallback: {
         type: Object

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web-widget/vue",
-  "version": "0.11.1",
+  "version": "0.12.1",
   "type": "module",
   "exports": {
     ".": {
@@ -27,17 +27,20 @@
     "dist"
   ],
   "dependencies": {
-    "@web-widget/vite": "2.10.0",
-    "@web-widget/html": "0.1.8",
+    "@web-widget/html": "0.1.9",
     "@web-widget/schema": "0.4.3",
-    "@web-widget/web-widget": "1.7.2"
+    "@web-widget/vite": "2.11.1"
   },
   "devDependencies": {
-    "tsup": "^7.0.0",
-    "typescript": "^5.0.4",
-    "vite": "^4.4.9"
+    "@web-widget/web-widget": "1.8.0",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11",
+    "vue": ">3.3.3"
   },
   "peerDependencies": {
+    "@web-widget/web-widget": "1.8.0",
+    "vite": "^5.0.11",
     "vue": ">3.3.3"
   },
   "publishConfig": {