@web-widget/vue2 0.9.1 → 0.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/vite.cjs +20 -10
  2. package/dist/vite.d.ts +2 -2
  3. package/dist/vite.js +20 -10
  4. package/dist/vue2.client.d.ts +9 -106
  5. package/dist/vue2.client.js +71 -132
  6. package/dist/vue2.server.cjs +45 -128
  7. package/dist/vue2.server.d.cts +73 -0
  8. package/dist/vue2.server.d.ts +9 -106
  9. package/dist/vue2.server.js +47 -129
  10. package/package.json +15 -13
package/dist/vite.cjs CHANGED
@@ -1,6 +1,8 @@
1
1
  "use strict";
2
2
  var __defProp = Object.defineProperty;
3
+ var __defProps = Object.defineProperties;
3
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
6
  var __getOwnPropNames = Object.getOwnPropertyNames;
5
7
  var __getOwnPropSymbols = Object.getOwnPropertySymbols;
6
8
  var __hasOwnProp = Object.prototype.hasOwnProperty;
@@ -17,6 +19,7 @@ var __spreadValues = (a, b) => {
17
19
  }
18
20
  return a;
19
21
  };
22
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
23
  var __export = (target, all) => {
21
24
  for (var name in all)
22
25
  __defProp(target, name, { get: all[name], enumerable: true });
@@ -38,20 +41,27 @@ __export(vite_exports, {
38
41
  });
39
42
  module.exports = __toCommonJS(vite_exports);
40
43
  var import_vite = require("@web-widget/vite");
44
+ var VUE_INTERNAL_REQUEST = /vue\?vue\b.*$/;
45
+ function toArray(value) {
46
+ return Array.isArray(value) ? value : value ? [value] : [];
47
+ }
41
48
  function vue2WebWidgetPlugin({
42
49
  provide = "@web-widget/vue2",
43
- toWebWidgets = {},
44
- toComponents = {}
50
+ export: exportWidget = {},
51
+ import: importWidget = {}
45
52
  } = {}) {
46
53
  return (0, import_vite.webWidgetPlugin)({
47
54
  provide,
48
- toWebWidgets: __spreadValues({
49
- include: /(?:\.|@)(route|widget).*\.vue(?:\?.*)?$/,
50
- exclude: /\?.*\.css$/
51
- }, toWebWidgets),
52
- toComponents: __spreadValues({
53
- include: /(?:\.|@)widget\.[^.]*$/,
54
- includeImporter: /.*\.vue(\?.*\.(?:ts|js))?$/
55
- }, toComponents)
55
+ export: __spreadProps(__spreadValues({
56
+ include: /(?:\.|@)(?:route|widget)\.vue(?:\?.*)?$/
57
+ }, exportWidget), {
58
+ exclude: [...toArray(exportWidget.exclude), VUE_INTERNAL_REQUEST]
59
+ }),
60
+ import: __spreadProps(__spreadValues({
61
+ include: /(?:\.|@)widget\..*$/,
62
+ includeImporter: /.*\.vue(?:\?.*)?$/
63
+ }, importWidget), {
64
+ exclude: [...toArray(importWidget.exclude), VUE_INTERNAL_REQUEST]
65
+ })
56
66
  });
57
67
  }
package/dist/vite.d.ts CHANGED
@@ -3,6 +3,6 @@ import { WebWidgetPluginOptions } from '@web-widget/vite';
3
3
 
4
4
  interface Vue2WebWidgetPluginOptions extends WebWidgetPluginOptions {
5
5
  }
6
- declare function vue2WebWidgetPlugin({ provide, toWebWidgets, toComponents, }?: Vue2WebWidgetPluginOptions): Plugin[];
6
+ declare function vue2WebWidgetPlugin({ provide, export: exportWidget, import: importWidget, }?: Vue2WebWidgetPluginOptions): Plugin[];
7
7
 
8
- export { Vue2WebWidgetPluginOptions, vue2WebWidgetPlugin as default };
8
+ export { type Vue2WebWidgetPluginOptions, vue2WebWidgetPlugin as default };
package/dist/vite.js CHANGED
@@ -1,4 +1,6 @@
1
1
  var __defProp = Object.defineProperty;
2
+ var __defProps = Object.defineProperties;
3
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
2
4
  var __getOwnPropSymbols = Object.getOwnPropertySymbols;
3
5
  var __hasOwnProp = Object.prototype.hasOwnProperty;
4
6
  var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,24 +16,32 @@ var __spreadValues = (a, b) => {
14
16
  }
15
17
  return a;
16
18
  };
19
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
17
20
 
18
21
  // src/vite.ts
19
22
  import { webWidgetPlugin } from "@web-widget/vite";
23
+ var VUE_INTERNAL_REQUEST = /vue\?vue\b.*$/;
24
+ function toArray(value) {
25
+ return Array.isArray(value) ? value : value ? [value] : [];
26
+ }
20
27
  function vue2WebWidgetPlugin({
21
28
  provide = "@web-widget/vue2",
22
- toWebWidgets = {},
23
- toComponents = {}
29
+ export: exportWidget = {},
30
+ import: importWidget = {}
24
31
  } = {}) {
25
32
  return webWidgetPlugin({
26
33
  provide,
27
- toWebWidgets: __spreadValues({
28
- include: /(?:\.|@)(route|widget).*\.vue(?:\?.*)?$/,
29
- exclude: /\?.*\.css$/
30
- }, toWebWidgets),
31
- toComponents: __spreadValues({
32
- include: /(?:\.|@)widget\.[^.]*$/,
33
- includeImporter: /.*\.vue(\?.*\.(?:ts|js))?$/
34
- }, toComponents)
34
+ export: __spreadProps(__spreadValues({
35
+ include: /(?:\.|@)(?:route|widget)\.vue(?:\?.*)?$/
36
+ }, exportWidget), {
37
+ exclude: [...toArray(exportWidget.exclude), VUE_INTERNAL_REQUEST]
38
+ }),
39
+ import: __spreadProps(__spreadValues({
40
+ include: /(?:\.|@)widget\..*$/,
41
+ includeImporter: /.*\.vue(?:\?.*)?$/
42
+ }, importWidget), {
43
+ exclude: [...toArray(importWidget.exclude), VUE_INTERNAL_REQUEST]
44
+ })
35
45
  });
36
46
  }
37
47
  export {
package/dist/vue2.client.d.ts CHANGED
@@ -4,112 +4,15 @@ import * as vue from 'vue';
4
4
  import vue__default, { PropType, Component } from 'vue';
5
5
  export * from '@web-widget/schema/client-helpers';
6
6
  export { useWidgetSyncState as useWidgetState } from '@web-widget/schema/client-helpers';
7
- import * as vue_types_v3_component_options_js from 'vue/types/v3-component-options.js';
8
- import { Loader, WebWidgetContainerOptions } from '@web-widget/web-widget';
7
+ import { WebWidgetRendererOptions, Loader } from '@web-widget/web-widget';
9
8
 
10
- declare const WebWidget: vue.DefineComponent<{
11
- base: {
12
- type: PropType<string | undefined>;
13
- };
14
- data: {
15
- type: PropType<{
16
- [x: string]: string | number | boolean | {
17
- [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)[])[])[])[])[])[])[])[])[])[])[];
18
- } | (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)[])[])[])[])[])[])[])[])[])[])[];
19
- } | undefined>;
20
- default: {};
21
- };
22
- import: {
23
- type: PropType<string | undefined>;
24
- };
25
- inactive: {
26
- type: PropType<boolean | undefined>;
27
- default: undefined;
28
- };
29
- loader: {
30
- type: PropType<Loader>;
31
- required: true;
32
- };
33
- loading: {
34
- type: PropType<"lazy" | "eager" | "idle" | undefined>;
35
- };
36
- meta: {
37
- type: PropType<_web_widget_schema.Meta | undefined>;
38
- };
39
- name: {
40
- type: PropType<string | undefined>;
41
- };
42
- renderStage: {
43
- type: PropType<"server" | "client" | undefined>;
44
- };
45
- renderTarget: {
46
- type: PropType<"light" | "shadow" | undefined>;
47
- default: string;
48
- };
49
- fallback: {
50
- type: PropType<Component>;
51
- default: undefined;
52
- };
53
- }, () => vue.VNode, {}, {}, {}, vue_types_v3_component_options_js.ComponentOptionsMixin, vue_types_v3_component_options_js.ComponentOptionsMixin, {}, string, Readonly<vue.ExtractPropTypes<{
54
- base: {
55
- type: PropType<string | undefined>;
56
- };
57
- data: {
58
- type: PropType<{
59
- [x: string]: string | number | boolean | {
60
- [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)[])[])[])[])[])[])[])[])[])[])[];
61
- } | (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)[])[])[])[])[])[])[])[])[])[])[];
62
- } | undefined>;
63
- default: {};
64
- };
65
- import: {
66
- type: PropType<string | undefined>;
67
- };
68
- inactive: {
69
- type: PropType<boolean | undefined>;
70
- default: undefined;
71
- };
72
- loader: {
73
- type: PropType<Loader>;
74
- required: true;
75
- };
76
- loading: {
77
- type: PropType<"lazy" | "eager" | "idle" | undefined>;
78
- };
79
- meta: {
80
- type: PropType<_web_widget_schema.Meta | undefined>;
81
- };
82
- name: {
83
- type: PropType<string | undefined>;
84
- };
85
- renderStage: {
86
- type: PropType<"server" | "client" | undefined>;
87
- };
88
- renderTarget: {
89
- type: PropType<"light" | "shadow" | undefined>;
90
- default: string;
91
- };
92
- fallback: {
93
- type: PropType<Component>;
94
- default: undefined;
95
- };
96
- }>>, {
97
- data: {
98
- [x: string]: string | number | boolean | {
99
- [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)[])[])[])[])[])[])[])[])[])[])[];
100
- } | (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)[])[])[])[])[])[])[])[])[])[])[];
101
- } | undefined;
102
- inactive: boolean | undefined;
103
- renderTarget: "light" | "shadow" | undefined;
104
- fallback: Component;
105
- }>;
106
9
  interface DefineWebWidgetOptions {
107
- base?: WebWidgetContainerOptions["base"];
108
- import?: WebWidgetContainerOptions["import"];
109
- loading?: WebWidgetContainerOptions["loading"];
110
- name?: WebWidgetContainerOptions["name"];
111
- renderStage?: WebWidgetContainerOptions["renderStage"];
112
- renderTarget?: WebWidgetContainerOptions["renderTarget"];
10
+ base?: WebWidgetRendererOptions["base"];
11
+ import?: WebWidgetRendererOptions["import"];
12
+ loading?: WebWidgetRendererOptions["loading"];
13
+ name?: WebWidgetRendererOptions["name"];
14
+ renderStage?: WebWidgetRendererOptions["renderStage"];
15
+ renderTarget?: WebWidgetRendererOptions["renderTarget"];
113
16
  }
114
17
  declare function defineWebWidget(loader: Loader, options: DefineWebWidgetOptions): vue.DefineComponent<{
115
18
  fallback: {
@@ -127,7 +30,7 @@ declare function defineWebWidget(loader: Loader, options: DefineWebWidgetOptions
127
30
  type: PropType<"light" | "shadow" | undefined>;
128
31
  default: "light" | "shadow";
129
32
  };
130
- }, () => vue.VNode, {}, {}, {}, vue_types_v3_component_options_js.ComponentOptionsMixin, vue_types_v3_component_options_js.ComponentOptionsMixin, {}, string, Readonly<vue.ExtractPropTypes<{
33
+ }, () => vue.VNode, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, Readonly<vue.ExtractPropTypes<{
131
34
  fallback: {
132
35
  type: PropType<Component>;
133
36
  };
@@ -203,4 +106,4 @@ declare const render: (context: _web_widget_schema.ClientWidgetRenderContext<unk
203
106
  }) => void | Promise<void>) | undefined;
204
107
  }>;
205
108
 
206
- export { DefineWebWidgetOptions, WebWidget, createVueRender, defineVueRender, defineWebWidget, render };
109
+ export { type DefineWebWidgetOptions, createVueRender, defineVueRender, defineWebWidget, render };
package/dist/vue2.client.js CHANGED
@@ -17,18 +17,6 @@ var __spreadValues = (a, b) => {
17
17
  return a;
18
18
  };
19
19
  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
- var __objRest = (source, exclude) => {
21
- var target = {};
22
- for (var prop in source)
23
- if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
24
- target[prop] = source[prop];
25
- if (source != null && __getOwnPropSymbols)
26
- for (var prop of __getOwnPropSymbols(source)) {
27
- if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
28
- target[prop] = source[prop];
29
- }
30
- return target;
31
- };
32
20
 
33
21
  // src/client.ts
34
22
  import {
@@ -40,97 +28,14 @@ export * from "@web-widget/schema/client-helpers";
40
28
  import { useWidgetSyncState } from "@web-widget/schema/client-helpers";
41
29
 
42
30
  // src/components.ts
43
- import { parse } from "@web-widget/web-widget";
44
- import { h, defineComponent, defineAsyncComponent, useAttrs } from "vue";
31
+ import { WebWidgetRenderer } from "@web-widget/web-widget";
32
+ import { h, defineComponent, useAttrs, getCurrentInstance } from "vue";
45
33
  import { IS_BROWSER } from "@web-widget/schema/helpers";
46
- var WebWidget = /* @__PURE__ */ defineComponent({
47
- name: "WebWidget",
48
- props: {
49
- base: {
50
- type: String
51
- },
52
- data: {
53
- type: Object,
54
- default: {}
55
- },
56
- import: {
57
- type: String
58
- },
59
- inactive: {
60
- type: Boolean,
61
- // NOTE: If the default value is not set, it will be false here.
62
- default: void 0
63
- },
64
- loader: {
65
- type: Function,
66
- required: true
67
- },
68
- loading: {
69
- type: String
70
- },
71
- meta: {
72
- type: Object
73
- },
74
- name: {
75
- type: String
76
- },
77
- renderStage: {
78
- type: String
79
- },
80
- renderTarget: {
81
- type: String,
82
- default: "light"
83
- },
84
- // -----
85
- fallback: {
86
- type: Object,
87
- // NOTE: If the default value is not set, it will be false here.
88
- default: void 0
89
- }
90
- },
91
- setup(_a, { slots }) {
92
- var _b = _a, { fallback, loader } = _b, props = __objRest(_b, ["fallback", "loader"]);
93
- if (!loader) {
94
- throw new TypeError(`Missing loader.`);
95
- }
96
- if (Object.keys(slots).length > 0) {
97
- throw new TypeError(`No support slot.`);
98
- }
99
- const AsyncComponent = defineAsyncComponent({
100
- loader: async () => {
101
- const children = "";
102
- const [tag, attrs, innerHTML] = await parse(loader, __spreadProps(__spreadValues({}, props), {
103
- children
104
- }));
105
- if (IS_BROWSER) {
106
- console.warn(`Client components are experimental.`);
107
- await customElements.whenDefined(tag);
108
- const element = Object.assign(document.createElement(tag), props);
109
- await element.bootstrap();
110
- }
111
- return defineComponent({
112
- render(h2) {
113
- return h2(tag, {
114
- attrs,
115
- domProps: {
116
- innerHTML
117
- }
118
- });
119
- }
120
- });
121
- },
122
- delay: 200,
123
- timeout: 3e3,
124
- errorComponent: fallback,
125
- loadingComponent: fallback
126
- });
127
- return () => h(AsyncComponent);
128
- }
129
- });
130
34
  function defineWebWidget(loader, options) {
131
35
  var _a, _b;
132
36
  return defineComponent({
133
- name: "WebWidgetSuspense",
37
+ name: "WebWidgetRoot",
38
+ inheritAttrs: false,
134
39
  props: {
135
40
  fallback: {
136
41
  type: Object
@@ -148,25 +53,50 @@ function defineWebWidget(loader, options) {
148
53
  default: (_b = options.renderTarget) != null ? _b : "light"
149
54
  }
150
55
  },
56
+ async serverPrefetch() {
57
+ const widget = this.$widget;
58
+ const innerHTML = await widget.renderInnerHTMLToString();
59
+ this.$innerHTML = innerHTML;
60
+ },
61
+ // async mounted() {
62
+ // if (!(this as any).$innerHTML) {
63
+ // const widget = (this as any).$widget as WebWidgetRenderer;
64
+ // const innerHTML = await widget.renderInnerHTMLToString();
65
+ // (this as any).$innerHTML = innerHTML;
66
+ // }
67
+ // },
151
68
  setup({
152
69
  fallback,
153
70
  experimental_loading,
154
71
  renderStage,
155
72
  experimental_renderTarget
156
73
  }, { slots }) {
74
+ if (!loader) {
75
+ throw new TypeError(`Missing loader.`);
76
+ }
77
+ if (Object.keys(slots).length > 0) {
78
+ throw new TypeError(`No support slot.`);
79
+ }
157
80
  const data = useAttrs();
158
- return () => h(WebWidget, {
159
- props: __spreadProps(__spreadValues({}, options), {
160
- data,
161
- loader,
162
- loading: experimental_loading,
163
- renderStage,
164
- renderTarget: experimental_renderTarget,
165
- // -----
166
- fallback
167
- }),
168
- scopedSlots: slots
169
- });
81
+ const widget = new WebWidgetRenderer(loader, __spreadProps(__spreadValues({}, options), {
82
+ data,
83
+ loading: experimental_loading,
84
+ renderStage,
85
+ renderTarget: experimental_renderTarget
86
+ }));
87
+ const instance = getCurrentInstance();
88
+ instance.proxy.$widget = widget;
89
+ if (IS_BROWSER) {
90
+ }
91
+ return () => {
92
+ const innerHTML = instance.proxy.$innerHTML;
93
+ return h(widget.localName, {
94
+ attrs: widget.attributes,
95
+ domProps: {
96
+ innerHTML
97
+ }
98
+ });
99
+ };
170
100
  }
171
101
  });
172
102
  }
@@ -181,36 +111,46 @@ var createVueRender = ({
181
111
  return defineRender(async (context) => {
182
112
  const componentDescriptor = getComponentDescriptor(context);
183
113
  const { component, props } = componentDescriptor;
184
- if (!context.container) {
114
+ const container = context.container;
115
+ if (!container) {
185
116
  throw new Error(`Container required.`);
186
117
  }
118
+ if (component.__name) {
119
+ component.__name = component.__name.replace("@", ".");
120
+ }
187
121
  let app;
188
122
  return {
189
123
  async mount() {
190
- const shellTag = "web-widget.shell";
191
- const vue2rootAttr = "data-vue2root";
192
- const vue2ssrAttr = "data-server-rendered";
193
- const shell = context.recovering && context.container.querySelector(shellTag.replace(".", "\\.")) || context.container.appendChild(document.createElement(shellTag));
194
- const componentRoot = context.recovering ? shell.querySelector(`[${vue2rootAttr}]`) : null;
195
- const state = context.recovering ? context.container.querySelector(
196
- "script[as=state]"
197
- ) : null;
198
- const stateContent = context.recovering && state ? JSON.parse(state.textContent) : onPrefetchData ? await onPrefetchData(context, component, props) : void 0;
199
- state == null ? void 0 : state.remove();
200
- shell.removeAttribute(vue2ssrAttr);
201
- componentRoot == null ? void 0 : componentRoot.removeAttribute(vue2rootAttr);
202
- componentRoot == null ? void 0 : componentRoot.setAttribute(vue2ssrAttr, "true");
203
- const mergedProps = stateContent ? Object.assign(stateContent, props) : props;
204
- const vNodeData = {
205
- props: mergedProps
206
- };
124
+ let element = container;
125
+ let mergedProps = props;
126
+ if (context.recovering) {
127
+ const vue2ssrAttrSelector = `[data-server-rendered="true"]`;
128
+ const ssrRoot = container.querySelector(vue2ssrAttrSelector) || container.firstElementChild;
129
+ const state = container.querySelector(
130
+ "script[as=state]"
131
+ );
132
+ const stateContent = state ? JSON.parse(state.textContent) : onPrefetchData ? await onPrefetchData(context, component, props) : void 0;
133
+ if (!ssrRoot) {
134
+ throw new Error(
135
+ `No element found for hydration: ${vue2ssrAttrSelector}`
136
+ );
137
+ }
138
+ element = ssrRoot;
139
+ mergedProps = stateContent ? Object.assign(stateContent, props) : props;
140
+ }
207
141
  app = new Vue(__spreadValues({
208
142
  render(h2) {
209
- return h2(component, vNodeData);
143
+ return h2(component, {
144
+ props: mergedProps
145
+ });
210
146
  }
211
147
  }, await onBeforeCreateApp(context, component, mergedProps)));
212
148
  await onCreatedApp(app, context, component, mergedProps);
213
- app.$mount(shell);
149
+ if (context.recovering) {
150
+ app.$mount(element, context.recovering);
151
+ } else {
152
+ container.appendChild(app.$mount().$el);
153
+ }
214
154
  },
215
155
  async unmount() {
216
156
  app == null ? void 0 : app.$destroy();
@@ -225,7 +165,6 @@ var createVueRender = ({
225
165
  var defineVueRender = createVueRender;
226
166
  var render = createVueRender();
227
167
  export {
228
- WebWidget,
229
168
  createVueRender,
230
169
  defineVueRender,
231
170
  defineWebWidget,
package/dist/vue2.server.cjs CHANGED
@@ -22,18 +22,6 @@ var __spreadValues = (a, b) => {
22
22
  return a;
23
23
  };
24
24
  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
25
- var __objRest = (source, exclude) => {
26
- var target = {};
27
- for (var prop in source)
28
- if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
29
- target[prop] = source[prop];
30
- if (source != null && __getOwnPropSymbols)
31
- for (var prop of __getOwnPropSymbols(source)) {
32
- if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
33
- target[prop] = source[prop];
34
- }
35
- return target;
36
- };
37
25
  var __export = (target, all) => {
38
26
  for (var name in all)
39
27
  __defProp(target, name, { get: all[name], enumerable: true });
@@ -60,7 +48,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
60
48
  // src/server.ts
61
49
  var server_exports = {};
62
50
  __export(server_exports, {
63
- WebWidget: () => WebWidget,
64
51
  createVueRender: () => createVueRender,
65
52
  defineVueRender: () => defineVueRender,
66
53
  defineWebWidget: () => defineWebWidget,
@@ -78,94 +65,11 @@ var import_server_helpers2 = require("@web-widget/schema/server-helpers");
78
65
  var import_web_widget = require("@web-widget/web-widget");
79
66
  var import_vue = require("vue");
80
67
  var import_helpers = require("@web-widget/schema/helpers");
81
- var WebWidget = /* @__PURE__ */ (0, import_vue.defineComponent)({
82
- name: "WebWidget",
83
- props: {
84
- base: {
85
- type: String
86
- },
87
- data: {
88
- type: Object,
89
- default: {}
90
- },
91
- import: {
92
- type: String
93
- },
94
- inactive: {
95
- type: Boolean,
96
- // NOTE: If the default value is not set, it will be false here.
97
- default: void 0
98
- },
99
- loader: {
100
- type: Function,
101
- required: true
102
- },
103
- loading: {
104
- type: String
105
- },
106
- meta: {
107
- type: Object
108
- },
109
- name: {
110
- type: String
111
- },
112
- renderStage: {
113
- type: String
114
- },
115
- renderTarget: {
116
- type: String,
117
- default: "light"
118
- },
119
- // -----
120
- fallback: {
121
- type: Object,
122
- // NOTE: If the default value is not set, it will be false here.
123
- default: void 0
124
- }
125
- },
126
- setup(_a, { slots }) {
127
- var _b = _a, { fallback, loader } = _b, props = __objRest(_b, ["fallback", "loader"]);
128
- if (!loader) {
129
- throw new TypeError(`Missing loader.`);
130
- }
131
- if (Object.keys(slots).length > 0) {
132
- throw new TypeError(`No support slot.`);
133
- }
134
- const AsyncComponent = (0, import_vue.defineAsyncComponent)({
135
- loader: async () => {
136
- const children = "";
137
- const [tag, attrs, innerHTML] = await (0, import_web_widget.parse)(loader, __spreadProps(__spreadValues({}, props), {
138
- children
139
- }));
140
- if (import_helpers.IS_BROWSER) {
141
- console.warn(`Client components are experimental.`);
142
- await customElements.whenDefined(tag);
143
- const element = Object.assign(document.createElement(tag), props);
144
- await element.bootstrap();
145
- }
146
- return (0, import_vue.defineComponent)({
147
- render(h2) {
148
- return h2(tag, {
149
- attrs,
150
- domProps: {
151
- innerHTML
152
- }
153
- });
154
- }
155
- });
156
- },
157
- delay: 200,
158
- timeout: 3e3,
159
- errorComponent: fallback,
160
- loadingComponent: fallback
161
- });
162
- return () => (0, import_vue.h)(AsyncComponent);
163
- }
164
- });
165
68
  function defineWebWidget(loader, options) {
166
69
  var _a, _b;
167
70
  return (0, import_vue.defineComponent)({
168
- name: "WebWidgetSuspense",
71
+ name: "WebWidgetRoot",
72
+ inheritAttrs: false,
169
73
  props: {
170
74
  fallback: {
171
75
  type: Object
@@ -183,25 +87,50 @@ function defineWebWidget(loader, options) {
183
87
  default: (_b = options.renderTarget) != null ? _b : "light"
184
88
  }
185
89
  },
90
+ async serverPrefetch() {
91
+ const widget = this.$widget;
92
+ const innerHTML = await widget.renderInnerHTMLToString();
93
+ this.$innerHTML = innerHTML;
94
+ },
95
+ // async mounted() {
96
+ // if (!(this as any).$innerHTML) {
97
+ // const widget = (this as any).$widget as WebWidgetRenderer;
98
+ // const innerHTML = await widget.renderInnerHTMLToString();
99
+ // (this as any).$innerHTML = innerHTML;
100
+ // }
101
+ // },
186
102
  setup({
187
103
  fallback,
188
104
  experimental_loading,
189
105
  renderStage,
190
106
  experimental_renderTarget
191
107
  }, { slots }) {
108
+ if (!loader) {
109
+ throw new TypeError(`Missing loader.`);
110
+ }
111
+ if (Object.keys(slots).length > 0) {
112
+ throw new TypeError(`No support slot.`);
113
+ }
192
114
  const data = (0, import_vue.useAttrs)();
193
- return () => (0, import_vue.h)(WebWidget, {
194
- props: __spreadProps(__spreadValues({}, options), {
195
- data,
196
- loader,
197
- loading: experimental_loading,
198
- renderStage,
199
- renderTarget: experimental_renderTarget,
200
- // -----
201
- fallback
202
- }),
203
- scopedSlots: slots
204
- });
115
+ const widget = new import_web_widget.WebWidgetRenderer(loader, __spreadProps(__spreadValues({}, options), {
116
+ data,
117
+ loading: experimental_loading,
118
+ renderStage,
119
+ renderTarget: experimental_renderTarget
120
+ }));
121
+ const instance = (0, import_vue.getCurrentInstance)();
122
+ instance.proxy.$widget = widget;
123
+ if (import_helpers.IS_BROWSER) {
124
+ }
125
+ return () => {
126
+ const innerHTML = instance.proxy.$innerHTML;
127
+ return (0, import_vue.h)(widget.localName, {
128
+ attrs: widget.attributes,
129
+ domProps: {
130
+ innerHTML
131
+ }
132
+ });
133
+ };
205
134
  }
206
135
  });
207
136
  }
@@ -232,27 +161,16 @@ var createVueRender = ({
232
161
  return (0, import_server_helpers.defineRender)(async (context) => {
233
162
  const componentDescriptor = (0, import_server_helpers.getComponentDescriptor)(context);
234
163
  const { component, props } = componentDescriptor;
235
- const shellTag = "web-widget.shell";
164
+ if (component.__name) {
165
+ component.__name = component.__name.replace("@", "-");
166
+ }
236
167
  const state = onPrefetchData ? await onPrefetchData(context, component, props) : void 0;
237
168
  const mergedProps = state ? Object.assign({}, state, props) : props;
238
169
  const renderer = (0, import_vue_server_renderer.createRenderer)();
239
170
  const app = new import_vue2.default(__spreadValues({
240
- render: (h2) => h2(
241
- shellTag,
242
- {
243
- style: {
244
- display: "contents"
245
- }
246
- },
247
- [
248
- h2(component, {
249
- attrs: {
250
- "data-vue2root": "true"
251
- },
252
- props: mergedProps
253
- })
254
- ]
255
- )
171
+ render: (h2) => h2(component, {
172
+ props: mergedProps
173
+ })
256
174
  }, await onBeforeCreateApp(context, component, mergedProps)));
257
175
  await onCreatedApp(app, context, component, mergedProps);
258
176
  const result = await renderer.renderToString(app);
@@ -270,7 +188,6 @@ var defineVueRender = createVueRender;
270
188
  var render = createVueRender();
271
189
  // Annotate the CommonJS export names for ESM import in node:
272
190
  0 && (module.exports = {
273
- WebWidget,
274
191
  createVueRender,
275
192
  defineVueRender,
276
193
  defineWebWidget,
package/dist/vue2.server.d.cts ADDED
@@ -0,0 +1,73 @@
1
+ import * as _web_widget_schema from '@web-widget/schema';
2
+ import { RenderContext, ComponentProps } from '@web-widget/schema';
3
+ import * as vue from 'vue';
4
+ import vue__default, { PropType, Component } from 'vue';
5
+ export * from '@web-widget/schema/server-helpers';
6
+ export { useWidgetSyncState as useWidgetState } from '@web-widget/schema/server-helpers';
7
+ import { WebWidgetRendererOptions, Loader } from '@web-widget/web-widget';
8
+
9
+ interface DefineWebWidgetOptions {
10
+ base?: WebWidgetRendererOptions["base"];
11
+ import?: WebWidgetRendererOptions["import"];
12
+ loading?: WebWidgetRendererOptions["loading"];
13
+ name?: WebWidgetRendererOptions["name"];
14
+ renderStage?: WebWidgetRendererOptions["renderStage"];
15
+ renderTarget?: WebWidgetRendererOptions["renderTarget"];
16
+ }
17
+ declare function defineWebWidget(loader: Loader, options: DefineWebWidgetOptions): vue.DefineComponent<{
18
+ fallback: {
19
+ type: PropType<Component>;
20
+ };
21
+ experimental_loading: {
22
+ type: PropType<"lazy" | "eager" | "idle" | undefined>;
23
+ default: "lazy" | "eager" | "idle";
24
+ };
25
+ renderStage: {
26
+ type: PropType<"server" | "client" | undefined>;
27
+ default: "server" | "client" | undefined;
28
+ };
29
+ experimental_renderTarget: {
30
+ type: PropType<"light" | "shadow" | undefined>;
31
+ default: "light" | "shadow";
32
+ };
33
+ }, () => vue.VNode, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, Readonly<vue.ExtractPropTypes<{
34
+ fallback: {
35
+ type: PropType<Component>;
36
+ };
37
+ experimental_loading: {
38
+ type: PropType<"lazy" | "eager" | "idle" | undefined>;
39
+ default: "lazy" | "eager" | "idle";
40
+ };
41
+ renderStage: {
42
+ type: PropType<"server" | "client" | undefined>;
43
+ default: "server" | "client" | undefined;
44
+ };
45
+ experimental_renderTarget: {
46
+ type: PropType<"light" | "shadow" | undefined>;
47
+ default: "light" | "shadow";
48
+ };
49
+ }>>, {
50
+ renderStage: "server" | "client" | undefined;
51
+ experimental_loading: "lazy" | "eager" | "idle" | undefined;
52
+ experimental_renderTarget: "light" | "shadow" | undefined;
53
+ }>;
54
+
55
+ type JSONValue = string | number | boolean | {
56
+ [x: string]: JSONValue;
57
+ } | Array<JSONValue>;
58
+ type JSONProps = {
59
+ [x: string]: JSONValue;
60
+ };
61
+ interface CreateVueRenderOptions {
62
+ onBeforeCreateApp?: (context: RenderContext, component: Component, props: ComponentProps) => Promise<any>;
63
+ onCreatedApp?: (app: vue__default, context: RenderContext, component: Component, props: ComponentProps) => Promise<void>;
64
+ /**@deprecated*/
65
+ onPrefetchData?: (context: RenderContext, component: Component, props: ComponentProps) => Promise<JSONProps>;
66
+ }
67
+
68
+ declare const createVueRender: ({ onBeforeCreateApp, onCreatedApp, onPrefetchData, }?: CreateVueRenderOptions) => (context: _web_widget_schema.ServerWidgetRenderContext<unknown> | _web_widget_schema.ServerRouteRenderContext<unknown, Record<string, string>>, renderOptions: any) => Promise<string | ReadableStream<any> | ReadableStream<any>>;
69
+ /**@deprecated Please use `createVueRender` instead.*/
70
+ declare const defineVueRender: ({ onBeforeCreateApp, onCreatedApp, onPrefetchData, }?: CreateVueRenderOptions) => (context: _web_widget_schema.ServerWidgetRenderContext<unknown> | _web_widget_schema.ServerRouteRenderContext<unknown, Record<string, string>>, renderOptions: any) => Promise<string | ReadableStream<any> | ReadableStream<any>>;
71
+ 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>>;
72
+
73
+ export { type DefineWebWidgetOptions, createVueRender, defineVueRender, defineWebWidget, render };
package/dist/vue2.server.d.ts CHANGED
@@ -4,112 +4,15 @@ import * as vue from 'vue';
4
4
  import vue__default, { PropType, Component } from 'vue';
5
5
  export * from '@web-widget/schema/server-helpers';
6
6
  export { useWidgetSyncState as useWidgetState } from '@web-widget/schema/server-helpers';
7
- import * as vue_types_v3_component_options_js from 'vue/types/v3-component-options.js';
8
- import { Loader, WebWidgetContainerOptions } from '@web-widget/web-widget';
7
+ import { WebWidgetRendererOptions, Loader } from '@web-widget/web-widget';
9
8
 
10
- declare const WebWidget: vue.DefineComponent<{
11
- base: {
12
- type: PropType<string | undefined>;
13
- };
14
- data: {
15
- type: PropType<{
16
- [x: string]: string | number | boolean | {
17
- [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)[])[])[])[])[])[])[])[])[])[])[];
18
- } | (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)[])[])[])[])[])[])[])[])[])[])[];
19
- } | undefined>;
20
- default: {};
21
- };
22
- import: {
23
- type: PropType<string | undefined>;
24
- };
25
- inactive: {
26
- type: PropType<boolean | undefined>;
27
- default: undefined;
28
- };
29
- loader: {
30
- type: PropType<Loader>;
31
- required: true;
32
- };
33
- loading: {
34
- type: PropType<"lazy" | "eager" | "idle" | undefined>;
35
- };
36
- meta: {
37
- type: PropType<_web_widget_schema.Meta | undefined>;
38
- };
39
- name: {
40
- type: PropType<string | undefined>;
41
- };
42
- renderStage: {
43
- type: PropType<"server" | "client" | undefined>;
44
- };
45
- renderTarget: {
46
- type: PropType<"light" | "shadow" | undefined>;
47
- default: string;
48
- };
49
- fallback: {
50
- type: PropType<Component>;
51
- default: undefined;
52
- };
53
- }, () => vue.VNode, {}, {}, {}, vue_types_v3_component_options_js.ComponentOptionsMixin, vue_types_v3_component_options_js.ComponentOptionsMixin, {}, string, Readonly<vue.ExtractPropTypes<{
54
- base: {
55
- type: PropType<string | undefined>;
56
- };
57
- data: {
58
- type: PropType<{
59
- [x: string]: string | number | boolean | {
60
- [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)[])[])[])[])[])[])[])[])[])[])[];
61
- } | (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)[])[])[])[])[])[])[])[])[])[])[];
62
- } | undefined>;
63
- default: {};
64
- };
65
- import: {
66
- type: PropType<string | undefined>;
67
- };
68
- inactive: {
69
- type: PropType<boolean | undefined>;
70
- default: undefined;
71
- };
72
- loader: {
73
- type: PropType<Loader>;
74
- required: true;
75
- };
76
- loading: {
77
- type: PropType<"lazy" | "eager" | "idle" | undefined>;
78
- };
79
- meta: {
80
- type: PropType<_web_widget_schema.Meta | undefined>;
81
- };
82
- name: {
83
- type: PropType<string | undefined>;
84
- };
85
- renderStage: {
86
- type: PropType<"server" | "client" | undefined>;
87
- };
88
- renderTarget: {
89
- type: PropType<"light" | "shadow" | undefined>;
90
- default: string;
91
- };
92
- fallback: {
93
- type: PropType<Component>;
94
- default: undefined;
95
- };
96
- }>>, {
97
- data: {
98
- [x: string]: string | number | boolean | {
99
- [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)[])[])[])[])[])[])[])[])[])[])[];
100
- } | (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)[])[])[])[])[])[])[])[])[])[])[];
101
- } | undefined;
102
- inactive: boolean | undefined;
103
- renderTarget: "light" | "shadow" | undefined;
104
- fallback: Component;
105
- }>;
106
9
  interface DefineWebWidgetOptions {
107
- base?: WebWidgetContainerOptions["base"];
108
- import?: WebWidgetContainerOptions["import"];
109
- loading?: WebWidgetContainerOptions["loading"];
110
- name?: WebWidgetContainerOptions["name"];
111
- renderStage?: WebWidgetContainerOptions["renderStage"];
112
- renderTarget?: WebWidgetContainerOptions["renderTarget"];
10
+ base?: WebWidgetRendererOptions["base"];
11
+ import?: WebWidgetRendererOptions["import"];
12
+ loading?: WebWidgetRendererOptions["loading"];
13
+ name?: WebWidgetRendererOptions["name"];
14
+ renderStage?: WebWidgetRendererOptions["renderStage"];
15
+ renderTarget?: WebWidgetRendererOptions["renderTarget"];
113
16
  }
114
17
  declare function defineWebWidget(loader: Loader, options: DefineWebWidgetOptions): vue.DefineComponent<{
115
18
  fallback: {
@@ -127,7 +30,7 @@ declare function defineWebWidget(loader: Loader, options: DefineWebWidgetOptions
127
30
  type: PropType<"light" | "shadow" | undefined>;
128
31
  default: "light" | "shadow";
129
32
  };
130
- }, () => vue.VNode, {}, {}, {}, vue_types_v3_component_options_js.ComponentOptionsMixin, vue_types_v3_component_options_js.ComponentOptionsMixin, {}, string, Readonly<vue.ExtractPropTypes<{
33
+ }, () => vue.VNode, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, Readonly<vue.ExtractPropTypes<{
131
34
  fallback: {
132
35
  type: PropType<Component>;
133
36
  };
@@ -167,4 +70,4 @@ declare const createVueRender: ({ onBeforeCreateApp, onCreatedApp, onPrefetchDat
167
70
  declare const defineVueRender: ({ onBeforeCreateApp, onCreatedApp, onPrefetchData, }?: CreateVueRenderOptions) => (context: _web_widget_schema.ServerWidgetRenderContext<unknown> | _web_widget_schema.ServerRouteRenderContext<unknown, Record<string, string>>, renderOptions: any) => Promise<string | ReadableStream<any> | ReadableStream<any>>;
168
71
  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>>;
169
72
 
170
- export { DefineWebWidgetOptions, WebWidget, createVueRender, defineVueRender, defineWebWidget, render };
73
+ export { type DefineWebWidgetOptions, createVueRender, defineVueRender, defineWebWidget, render };
package/dist/vue2.server.js CHANGED
@@ -17,18 +17,6 @@ var __spreadValues = (a, b) => {
17
17
  return a;
18
18
  };
19
19
  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
- var __objRest = (source, exclude) => {
21
- var target = {};
22
- for (var prop in source)
23
- if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
24
- target[prop] = source[prop];
25
- if (source != null && __getOwnPropSymbols)
26
- for (var prop of __getOwnPropSymbols(source)) {
27
- if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
28
- target[prop] = source[prop];
29
- }
30
- return target;
31
- };
32
20
 
33
21
  // src/server.ts
34
22
  import {
@@ -41,97 +29,14 @@ export * from "@web-widget/schema/server-helpers";
41
29
  import { useWidgetSyncState } from "@web-widget/schema/server-helpers";
42
30
 
43
31
  // src/components.ts
44
- import { parse } from "@web-widget/web-widget";
45
- import { h, defineComponent, defineAsyncComponent, useAttrs } from "vue";
32
+ import { WebWidgetRenderer } from "@web-widget/web-widget";
33
+ import { h, defineComponent, useAttrs, getCurrentInstance } from "vue";
46
34
  import { IS_BROWSER } from "@web-widget/schema/helpers";
47
- var WebWidget = /* @__PURE__ */ defineComponent({
48
- name: "WebWidget",
49
- props: {
50
- base: {
51
- type: String
52
- },
53
- data: {
54
- type: Object,
55
- default: {}
56
- },
57
- import: {
58
- type: String
59
- },
60
- inactive: {
61
- type: Boolean,
62
- // NOTE: If the default value is not set, it will be false here.
63
- default: void 0
64
- },
65
- loader: {
66
- type: Function,
67
- required: true
68
- },
69
- loading: {
70
- type: String
71
- },
72
- meta: {
73
- type: Object
74
- },
75
- name: {
76
- type: String
77
- },
78
- renderStage: {
79
- type: String
80
- },
81
- renderTarget: {
82
- type: String,
83
- default: "light"
84
- },
85
- // -----
86
- fallback: {
87
- type: Object,
88
- // NOTE: If the default value is not set, it will be false here.
89
- default: void 0
90
- }
91
- },
92
- setup(_a, { slots }) {
93
- var _b = _a, { fallback, loader } = _b, props = __objRest(_b, ["fallback", "loader"]);
94
- if (!loader) {
95
- throw new TypeError(`Missing loader.`);
96
- }
97
- if (Object.keys(slots).length > 0) {
98
- throw new TypeError(`No support slot.`);
99
- }
100
- const AsyncComponent = defineAsyncComponent({
101
- loader: async () => {
102
- const children = "";
103
- const [tag, attrs, innerHTML] = await parse(loader, __spreadProps(__spreadValues({}, props), {
104
- children
105
- }));
106
- if (IS_BROWSER) {
107
- console.warn(`Client components are experimental.`);
108
- await customElements.whenDefined(tag);
109
- const element = Object.assign(document.createElement(tag), props);
110
- await element.bootstrap();
111
- }
112
- return defineComponent({
113
- render(h2) {
114
- return h2(tag, {
115
- attrs,
116
- domProps: {
117
- innerHTML
118
- }
119
- });
120
- }
121
- });
122
- },
123
- delay: 200,
124
- timeout: 3e3,
125
- errorComponent: fallback,
126
- loadingComponent: fallback
127
- });
128
- return () => h(AsyncComponent);
129
- }
130
- });
131
35
  function defineWebWidget(loader, options) {
132
36
  var _a, _b;
133
37
  return defineComponent({
134
- name: "WebWidgetSuspense",
38
+ name: "WebWidgetRoot",
39
+ inheritAttrs: false,
135
40
  props: {
136
41
  fallback: {
137
42
  type: Object
@@ -149,25 +54,50 @@ function defineWebWidget(loader, options) {
149
54
  default: (_b = options.renderTarget) != null ? _b : "light"
150
55
  }
151
56
  },
57
+ async serverPrefetch() {
58
+ const widget = this.$widget;
59
+ const innerHTML = await widget.renderInnerHTMLToString();
60
+ this.$innerHTML = innerHTML;
61
+ },
62
+ // async mounted() {
63
+ // if (!(this as any).$innerHTML) {
64
+ // const widget = (this as any).$widget as WebWidgetRenderer;
65
+ // const innerHTML = await widget.renderInnerHTMLToString();
66
+ // (this as any).$innerHTML = innerHTML;
67
+ // }
68
+ // },
152
69
  setup({
153
70
  fallback,
154
71
  experimental_loading,
155
72
  renderStage,
156
73
  experimental_renderTarget
157
74
  }, { slots }) {
75
+ if (!loader) {
76
+ throw new TypeError(`Missing loader.`);
77
+ }
78
+ if (Object.keys(slots).length > 0) {
79
+ throw new TypeError(`No support slot.`);
80
+ }
158
81
  const data = useAttrs();
159
- return () => h(WebWidget, {
160
- props: __spreadProps(__spreadValues({}, options), {
161
- data,
162
- loader,
163
- loading: experimental_loading,
164
- renderStage,
165
- renderTarget: experimental_renderTarget,
166
- // -----
167
- fallback
168
- }),
169
- scopedSlots: slots
170
- });
82
+ const widget = new WebWidgetRenderer(loader, __spreadProps(__spreadValues({}, options), {
83
+ data,
84
+ loading: experimental_loading,
85
+ renderStage,
86
+ renderTarget: experimental_renderTarget
87
+ }));
88
+ const instance = getCurrentInstance();
89
+ instance.proxy.$widget = widget;
90
+ if (IS_BROWSER) {
91
+ }
92
+ return () => {
93
+ const innerHTML = instance.proxy.$innerHTML;
94
+ return h(widget.localName, {
95
+ attrs: widget.attributes,
96
+ domProps: {
97
+ innerHTML
98
+ }
99
+ });
100
+ };
171
101
  }
172
102
  });
173
103
  }
@@ -198,27 +128,16 @@ var createVueRender = ({
198
128
  return defineRender(async (context) => {
199
129
  const componentDescriptor = getComponentDescriptor(context);
200
130
  const { component, props } = componentDescriptor;
201
- const shellTag = "web-widget.shell";
131
+ if (component.__name) {
132
+ component.__name = component.__name.replace("@", "-");
133
+ }
202
134
  const state = onPrefetchData ? await onPrefetchData(context, component, props) : void 0;
203
135
  const mergedProps = state ? Object.assign({}, state, props) : props;
204
136
  const renderer = createRenderer();
205
137
  const app = new Vue(__spreadValues({
206
- render: (h2) => h2(
207
- shellTag,
208
- {
209
- style: {
210
- display: "contents"
211
- }
212
- },
213
- [
214
- h2(component, {
215
- attrs: {
216
- "data-vue2root": "true"
217
- },
218
- props: mergedProps
219
- })
220
- ]
221
- )
138
+ render: (h2) => h2(component, {
139
+ props: mergedProps
140
+ })
222
141
  }, await onBeforeCreateApp(context, component, mergedProps)));
223
142
  await onCreatedApp(app, context, component, mergedProps);
224
143
  const result = await renderer.renderToString(app);
@@ -235,7 +154,6 @@ var createVueRender = ({
235
154
  var defineVueRender = createVueRender;
236
155
  var render = createVueRender();
237
156
  export {
238
- WebWidget,
239
157
  createVueRender,
240
158
  defineVueRender,
241
159
  defineWebWidget,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@web-widget/vue2",
3
- "version": "0.9.1",
3
+ "version": "0.10.1",
4
4
  "type": "module",
5
5
  "exports": {
6
6
  ".": {
@@ -27,22 +27,24 @@
27
27
  "files": [
28
28
  "dist"
29
29
  ],
30
- "dependencies": {
31
- "@web-widget/vite": "2.10.0",
32
- "@web-widget/schema": "0.4.3",
33
- "@web-widget/web-widget": "1.7.2",
34
- "vue": "^2.7.14",
35
- "vue-server-renderer": "^2.7.14"
36
- },
30
+ "dependencies": {},
37
31
  "devDependencies": {
38
32
  "@types/node": "^20.5.7",
39
- "tsup": "^7.0.0",
40
- "typescript": "^5.0.4",
41
- "vite": "^4.4.9"
33
+ "@web-widget/schema": "0.4.3",
34
+ "@web-widget/vite": "2.11.1",
35
+ "@web-widget/web-widget": "1.8.0",
36
+ "tsup": "^8.0.1",
37
+ "typescript": "^5.3.3",
38
+ "vite": "^5.0.11",
39
+ "vue": "^2.7.16",
40
+ "vue-server-renderer": "^2.7.16"
42
41
  },
43
42
  "peerDependencies": {
44
- "vue": "^2.7.14",
45
- "vue-server-renderer": "^2.7.14"
43
+ "@web-widget/schema": "0.4.3",
44
+ "@web-widget/vite": "2.11.1",
45
+ "@web-widget/web-widget": "1.8.0",
46
+ "vue": "^2.7.16",
47
+ "vue-server-renderer": "^2.7.16"
46
48
  },
47
49
  "publishConfig": {
48
50
  "access": "public"