@web-widget/vue2 0.0.11 → 0.0.14
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.
- package/dist/types-000d9dee.d.ts +147 -0
- package/dist/vite.d.ts +8 -0
- package/dist/vite.js +25 -0
- package/dist/vue2.client.d.ts +4 -2
- package/dist/vue2.client.js +143 -4
- package/dist/vue2.server.d.ts +4 -2
- package/dist/vue2.server.js +164 -13
- package/package.json +15 -5
- package/dist/types-e1e66865.d.ts +0 -18
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
import * as vue_types_v3_component_options_js from 'vue/types/v3-component-options.js';
|
|
2
|
+
import * as vue from 'vue';
|
|
3
|
+
import vue__default, { PropType, Component } from 'vue';
|
|
4
|
+
import * as _web_widget_schema from '@web-widget/schema';
|
|
5
|
+
import { RenderContext, ComponentProps } from '@web-widget/schema';
|
|
6
|
+
import { Loader, WebWidgetContainerOptions } from '@web-widget/web-widget';
|
|
7
|
+
|
|
8
|
+
declare const __ENV__: {
|
|
9
|
+
server: boolean;
|
|
10
|
+
};
|
|
11
|
+
declare const WebWidget: vue.DefineComponent<{
|
|
12
|
+
base: {
|
|
13
|
+
type: PropType<string | undefined>;
|
|
14
|
+
};
|
|
15
|
+
data: {
|
|
16
|
+
type: PropType<{
|
|
17
|
+
[x: string]: string | number | boolean | {
|
|
18
|
+
[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)[])[])[])[])[])[])[])[])[])[])[];
|
|
19
|
+
} | (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)[])[])[])[])[])[])[])[])[])[])[];
|
|
20
|
+
} | undefined>;
|
|
21
|
+
default: {};
|
|
22
|
+
};
|
|
23
|
+
import: {
|
|
24
|
+
type: PropType<string | undefined>;
|
|
25
|
+
};
|
|
26
|
+
inactive: {
|
|
27
|
+
type: PropType<boolean | undefined>;
|
|
28
|
+
default: undefined;
|
|
29
|
+
};
|
|
30
|
+
loader: {
|
|
31
|
+
type: PropType<Loader>;
|
|
32
|
+
required: true;
|
|
33
|
+
};
|
|
34
|
+
loading: {
|
|
35
|
+
type: PropType<"lazy" | "eager" | undefined>;
|
|
36
|
+
};
|
|
37
|
+
meta: {
|
|
38
|
+
type: PropType<_web_widget_schema.Meta | undefined>;
|
|
39
|
+
};
|
|
40
|
+
name: {
|
|
41
|
+
type: PropType<string | undefined>;
|
|
42
|
+
};
|
|
43
|
+
renderStage: {
|
|
44
|
+
type: PropType<"server" | "client" | undefined>;
|
|
45
|
+
};
|
|
46
|
+
renderTarget: {
|
|
47
|
+
type: PropType<"light" | "shadow" | undefined>;
|
|
48
|
+
default: string;
|
|
49
|
+
};
|
|
50
|
+
fallback: {
|
|
51
|
+
type: PropType<Component>;
|
|
52
|
+
default: undefined;
|
|
53
|
+
};
|
|
54
|
+
}, () => vue.VNode, {}, {}, {}, vue_types_v3_component_options_js.ComponentOptionsMixin, vue_types_v3_component_options_js.ComponentOptionsMixin, {}, string, Readonly<vue.ExtractPropTypes<{
|
|
55
|
+
base: {
|
|
56
|
+
type: PropType<string | undefined>;
|
|
57
|
+
};
|
|
58
|
+
data: {
|
|
59
|
+
type: PropType<{
|
|
60
|
+
[x: string]: string | number | boolean | {
|
|
61
|
+
[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)[])[])[])[])[])[])[])[])[])[])[];
|
|
62
|
+
} | (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)[])[])[])[])[])[])[])[])[])[])[];
|
|
63
|
+
} | undefined>;
|
|
64
|
+
default: {};
|
|
65
|
+
};
|
|
66
|
+
import: {
|
|
67
|
+
type: PropType<string | undefined>;
|
|
68
|
+
};
|
|
69
|
+
inactive: {
|
|
70
|
+
type: PropType<boolean | undefined>;
|
|
71
|
+
default: undefined;
|
|
72
|
+
};
|
|
73
|
+
loader: {
|
|
74
|
+
type: PropType<Loader>;
|
|
75
|
+
required: true;
|
|
76
|
+
};
|
|
77
|
+
loading: {
|
|
78
|
+
type: PropType<"lazy" | "eager" | undefined>;
|
|
79
|
+
};
|
|
80
|
+
meta: {
|
|
81
|
+
type: PropType<_web_widget_schema.Meta | undefined>;
|
|
82
|
+
};
|
|
83
|
+
name: {
|
|
84
|
+
type: PropType<string | undefined>;
|
|
85
|
+
};
|
|
86
|
+
renderStage: {
|
|
87
|
+
type: PropType<"server" | "client" | undefined>;
|
|
88
|
+
};
|
|
89
|
+
renderTarget: {
|
|
90
|
+
type: PropType<"light" | "shadow" | undefined>;
|
|
91
|
+
default: string;
|
|
92
|
+
};
|
|
93
|
+
fallback: {
|
|
94
|
+
type: PropType<Component>;
|
|
95
|
+
default: undefined;
|
|
96
|
+
};
|
|
97
|
+
}>>, {
|
|
98
|
+
data: {
|
|
99
|
+
[x: string]: string | number | boolean | {
|
|
100
|
+
[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)[])[])[])[])[])[])[])[])[])[])[];
|
|
101
|
+
} | (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)[])[])[])[])[])[])[])[])[])[])[];
|
|
102
|
+
} | undefined;
|
|
103
|
+
inactive: boolean | undefined;
|
|
104
|
+
renderTarget: "light" | "shadow" | undefined;
|
|
105
|
+
fallback: Component;
|
|
106
|
+
}>;
|
|
107
|
+
interface DefineWebWidgetOptions {
|
|
108
|
+
base?: WebWidgetContainerOptions["base"];
|
|
109
|
+
import?: WebWidgetContainerOptions["import"];
|
|
110
|
+
loading?: WebWidgetContainerOptions["loading"];
|
|
111
|
+
name?: WebWidgetContainerOptions["name"];
|
|
112
|
+
renderStage?: WebWidgetContainerOptions["renderStage"];
|
|
113
|
+
renderTarget?: WebWidgetContainerOptions["renderTarget"];
|
|
114
|
+
}
|
|
115
|
+
declare function defineWebWidget(loader: Loader, options: DefineWebWidgetOptions): vue.DefineComponent<{
|
|
116
|
+
renderStage: {
|
|
117
|
+
type: PropType<"server" | "client" | undefined>;
|
|
118
|
+
default: "server" | "client" | undefined;
|
|
119
|
+
};
|
|
120
|
+
fallback: {
|
|
121
|
+
type: PropType<Component>;
|
|
122
|
+
};
|
|
123
|
+
}, () => vue.VNode, {}, {}, {}, vue_types_v3_component_options_js.ComponentOptionsMixin, vue_types_v3_component_options_js.ComponentOptionsMixin, {}, string, Readonly<vue.ExtractPropTypes<{
|
|
124
|
+
renderStage: {
|
|
125
|
+
type: PropType<"server" | "client" | undefined>;
|
|
126
|
+
default: "server" | "client" | undefined;
|
|
127
|
+
};
|
|
128
|
+
fallback: {
|
|
129
|
+
type: PropType<Component>;
|
|
130
|
+
};
|
|
131
|
+
}>>, {
|
|
132
|
+
renderStage: "server" | "client" | undefined;
|
|
133
|
+
}>;
|
|
134
|
+
|
|
135
|
+
type JSONValue = string | number | boolean | {
|
|
136
|
+
[x: string]: JSONValue;
|
|
137
|
+
} | Array<JSONValue>;
|
|
138
|
+
type JSONProps = {
|
|
139
|
+
[x: string]: JSONValue;
|
|
140
|
+
};
|
|
141
|
+
interface DefineVueRenderOptions {
|
|
142
|
+
onBeforeCreateApp?: (context: RenderContext, component: Component, props: ComponentProps) => any;
|
|
143
|
+
onCreatedApp?: (app: vue__default, context: RenderContext, component: Component, props: ComponentProps) => void;
|
|
144
|
+
onPrefetchData?: (context: RenderContext, component: Component, props: ComponentProps) => Promise<JSONProps>;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
export { DefineVueRenderOptions as D, WebWidget as W, __ENV__ as _, DefineWebWidgetOptions as a, defineWebWidget as d };
|
package/dist/vite.d.ts
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Plugin } from 'vite';
|
|
2
|
+
import { WebWidgetPluginOptions } from '@web-widget/vite';
|
|
3
|
+
|
|
4
|
+
interface Vue2WebWidgetPluginOptions extends WebWidgetPluginOptions {
|
|
5
|
+
}
|
|
6
|
+
declare function vue2WebWidgetPlugin({ provide, toWebWidgets, toComponents, }?: Vue2WebWidgetPluginOptions): Plugin[];
|
|
7
|
+
|
|
8
|
+
export { Vue2WebWidgetPluginOptions, vue2WebWidgetPlugin as default };
|
package/dist/vite.js
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
// src/vite.ts
|
|
2
|
+
import { webWidgetPlugin } from "@web-widget/vite";
|
|
3
|
+
function vue2WebWidgetPlugin({
|
|
4
|
+
provide = "@web-widget/vue2",
|
|
5
|
+
toWebWidgets = {
|
|
6
|
+
include: [
|
|
7
|
+
/\b(routes|widgets).*\.vue(\?.*\.(ts|js))?$/,
|
|
8
|
+
/(\.route|widget).*\.vue(\?.*\.(ts|js))?$/
|
|
9
|
+
]
|
|
10
|
+
},
|
|
11
|
+
toComponents = {
|
|
12
|
+
include: ["widgets/**/*", "**/*.widget.*"],
|
|
13
|
+
exclude: /.vue\?.*$/,
|
|
14
|
+
includeImporter: /.*\.vue(\?.*\.(ts|js))?$/
|
|
15
|
+
}
|
|
16
|
+
} = {}) {
|
|
17
|
+
return webWidgetPlugin({
|
|
18
|
+
provide,
|
|
19
|
+
toWebWidgets,
|
|
20
|
+
toComponents
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
export {
|
|
24
|
+
vue2WebWidgetPlugin as default
|
|
25
|
+
};
|
package/dist/vue2.client.d.ts
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import * as _web_widget_schema from '@web-widget/schema';
|
|
2
|
-
import { D as DefineVueRenderOptions } from './types-
|
|
3
|
-
export { d as defineWebWidget } from './types-
|
|
2
|
+
import { D as DefineVueRenderOptions } from './types-000d9dee.js';
|
|
3
|
+
export { a as DefineWebWidgetOptions, W as WebWidget, _ as __ENV__, d as defineWebWidget } from './types-000d9dee.js';
|
|
4
4
|
export * from '@web-widget/schema/client-helpers';
|
|
5
|
+
import 'vue/types/v3-component-options.js';
|
|
5
6
|
import 'vue';
|
|
7
|
+
import '@web-widget/web-widget';
|
|
6
8
|
|
|
7
9
|
declare const defineVueRender: ({ onBeforeCreateApp, onCreatedApp, onPrefetchData, }?: DefineVueRenderOptions) => (context: _web_widget_schema.ClientWidgetRenderContext<unknown> | _web_widget_schema.ClientRouteRenderContext<unknown, Record<string, string>>) => Promise<void | {
|
|
8
10
|
mount?: (() => void | Promise<void>) | undefined;
|
package/dist/vue2.client.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,6 +16,19 @@ var __spreadValues = (a, b) => {
|
|
|
14
16
|
}
|
|
15
17
|
return a;
|
|
16
18
|
};
|
|
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
|
+
};
|
|
17
32
|
|
|
18
33
|
// src/client.ts
|
|
19
34
|
import Vue from "vue";
|
|
@@ -21,8 +36,124 @@ import { defineRender as defineRenderHelper } from "@web-widget/schema/client-he
|
|
|
21
36
|
export * from "@web-widget/schema/client-helpers";
|
|
22
37
|
|
|
23
38
|
// src/web-widget.ts
|
|
24
|
-
|
|
25
|
-
|
|
39
|
+
import { parse } from "@web-widget/web-widget";
|
|
40
|
+
import { h, defineComponent, defineAsyncComponent, useAttrs } from "vue";
|
|
41
|
+
var __ENV__ = {
|
|
42
|
+
server: true
|
|
43
|
+
};
|
|
44
|
+
var WebWidget = /* @__PURE__ */ defineComponent({
|
|
45
|
+
name: "WebWidget",
|
|
46
|
+
props: {
|
|
47
|
+
base: {
|
|
48
|
+
type: String
|
|
49
|
+
},
|
|
50
|
+
data: {
|
|
51
|
+
type: Object,
|
|
52
|
+
default: {}
|
|
53
|
+
},
|
|
54
|
+
import: {
|
|
55
|
+
type: String
|
|
56
|
+
},
|
|
57
|
+
inactive: {
|
|
58
|
+
type: Boolean,
|
|
59
|
+
// NOTE: If the default value is not set, it will be false here.
|
|
60
|
+
default: void 0
|
|
61
|
+
},
|
|
62
|
+
loader: {
|
|
63
|
+
type: Function,
|
|
64
|
+
required: true
|
|
65
|
+
},
|
|
66
|
+
loading: {
|
|
67
|
+
type: String
|
|
68
|
+
},
|
|
69
|
+
meta: {
|
|
70
|
+
type: Object
|
|
71
|
+
},
|
|
72
|
+
name: {
|
|
73
|
+
type: String
|
|
74
|
+
},
|
|
75
|
+
renderStage: {
|
|
76
|
+
type: String
|
|
77
|
+
},
|
|
78
|
+
renderTarget: {
|
|
79
|
+
type: String,
|
|
80
|
+
default: "light"
|
|
81
|
+
},
|
|
82
|
+
// -----
|
|
83
|
+
fallback: {
|
|
84
|
+
type: Object,
|
|
85
|
+
// NOTE: If the default value is not set, it will be false here.
|
|
86
|
+
default: void 0
|
|
87
|
+
}
|
|
88
|
+
},
|
|
89
|
+
setup(_a, { slots }) {
|
|
90
|
+
var _b = _a, { fallback, loader } = _b, props = __objRest(_b, ["fallback", "loader"]);
|
|
91
|
+
if (!loader) {
|
|
92
|
+
throw new TypeError(`Missing loader.`);
|
|
93
|
+
}
|
|
94
|
+
if (Object.keys(slots).length > 0) {
|
|
95
|
+
throw new TypeError(`No support slot.`);
|
|
96
|
+
}
|
|
97
|
+
const AsyncComponent = defineAsyncComponent({
|
|
98
|
+
loader: async () => {
|
|
99
|
+
const children = "";
|
|
100
|
+
const [tag, attrs, innerHTML] = await parse(loader, __spreadProps(__spreadValues({}, props), {
|
|
101
|
+
children
|
|
102
|
+
}));
|
|
103
|
+
if (!__ENV__.server) {
|
|
104
|
+
console.warn(`Client components are experimental.`);
|
|
105
|
+
await customElements.whenDefined(tag);
|
|
106
|
+
const element = Object.assign(document.createElement(tag), props);
|
|
107
|
+
await element.bootstrap();
|
|
108
|
+
}
|
|
109
|
+
return defineComponent({
|
|
110
|
+
render(h2) {
|
|
111
|
+
return h2(tag, {
|
|
112
|
+
attrs,
|
|
113
|
+
domProps: {
|
|
114
|
+
innerHTML
|
|
115
|
+
}
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
});
|
|
119
|
+
},
|
|
120
|
+
delay: 200,
|
|
121
|
+
timeout: 3e3,
|
|
122
|
+
errorComponent: fallback,
|
|
123
|
+
loadingComponent: fallback
|
|
124
|
+
});
|
|
125
|
+
return () => h(AsyncComponent);
|
|
126
|
+
}
|
|
127
|
+
});
|
|
128
|
+
function defineWebWidget(loader, options) {
|
|
129
|
+
console.warn(`defineWebWidget of vue2 is an experimental feature.`);
|
|
130
|
+
options.renderTarget = "light";
|
|
131
|
+
options.loading = "lazy";
|
|
132
|
+
return /* @__PURE__ */ defineComponent({
|
|
133
|
+
name: "WebWidgetSuspense",
|
|
134
|
+
props: {
|
|
135
|
+
renderStage: {
|
|
136
|
+
type: String,
|
|
137
|
+
default: options.renderStage
|
|
138
|
+
},
|
|
139
|
+
fallback: {
|
|
140
|
+
type: Object
|
|
141
|
+
}
|
|
142
|
+
},
|
|
143
|
+
setup({ fallback, renderStage }, { slots }) {
|
|
144
|
+
const data = useAttrs();
|
|
145
|
+
return () => h(WebWidget, {
|
|
146
|
+
props: __spreadProps(__spreadValues({}, options), {
|
|
147
|
+
data,
|
|
148
|
+
loader,
|
|
149
|
+
renderStage,
|
|
150
|
+
// -----
|
|
151
|
+
fallback
|
|
152
|
+
}),
|
|
153
|
+
scopedSlots: slots
|
|
154
|
+
});
|
|
155
|
+
}
|
|
156
|
+
});
|
|
26
157
|
}
|
|
27
158
|
|
|
28
159
|
// src/client.ts
|
|
@@ -40,19 +171,25 @@ var defineVueRender = ({
|
|
|
40
171
|
return {
|
|
41
172
|
async mount() {
|
|
42
173
|
const shellTag = "web-widget.shell";
|
|
174
|
+
const vue2rootAttr = "data-vue2root";
|
|
175
|
+
const vue2ssrAttr = "data-server-rendered";
|
|
43
176
|
const shell = context.recovering && context.container.querySelector(shellTag.replace(".", "\\.")) || context.container.appendChild(document.createElement(shellTag));
|
|
177
|
+
const componentRoot = context.recovering ? shell.querySelector(`[${vue2rootAttr}]`) : null;
|
|
44
178
|
const state = context.recovering ? context.container.querySelector(
|
|
45
179
|
"script[as=state]"
|
|
46
180
|
) : null;
|
|
47
181
|
const stateContent = context.recovering && state ? JSON.parse(state.textContent) : onPrefetchData ? await onPrefetchData(context, component, props) : void 0;
|
|
48
182
|
state == null ? void 0 : state.remove();
|
|
183
|
+
shell.removeAttribute(vue2ssrAttr);
|
|
184
|
+
componentRoot == null ? void 0 : componentRoot.removeAttribute(vue2rootAttr);
|
|
185
|
+
componentRoot == null ? void 0 : componentRoot.setAttribute(vue2ssrAttr, "true");
|
|
49
186
|
const mergedProps = stateContent ? Object.assign(stateContent, props) : props;
|
|
50
187
|
const vNodeData = {
|
|
51
188
|
props: mergedProps
|
|
52
189
|
};
|
|
53
190
|
app = new Vue(__spreadValues({
|
|
54
|
-
render(
|
|
55
|
-
return
|
|
191
|
+
render(h2) {
|
|
192
|
+
return h2(component, vNodeData);
|
|
56
193
|
}
|
|
57
194
|
}, onBeforeCreateApp(context, component, mergedProps)));
|
|
58
195
|
onCreatedApp(app, context, component, mergedProps);
|
|
@@ -70,6 +207,8 @@ var defineVueRender = ({
|
|
|
70
207
|
};
|
|
71
208
|
var render = defineVueRender();
|
|
72
209
|
export {
|
|
210
|
+
WebWidget,
|
|
211
|
+
__ENV__,
|
|
73
212
|
defineVueRender,
|
|
74
213
|
defineWebWidget,
|
|
75
214
|
render
|
package/dist/vue2.server.d.ts
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import * as _web_widget_schema from '@web-widget/schema';
|
|
2
|
-
import { D as DefineVueRenderOptions } from './types-
|
|
3
|
-
export { d as defineWebWidget } from './types-
|
|
2
|
+
import { D as DefineVueRenderOptions } from './types-000d9dee.js';
|
|
3
|
+
export { a as DefineWebWidgetOptions, W as WebWidget, _ as __ENV__, d as defineWebWidget } from './types-000d9dee.js';
|
|
4
4
|
export * from '@web-widget/schema/server-helpers';
|
|
5
|
+
import 'vue/types/v3-component-options.js';
|
|
5
6
|
import 'vue';
|
|
7
|
+
import '@web-widget/web-widget';
|
|
6
8
|
|
|
7
9
|
declare const defineVueRender: ({ onBeforeCreateApp, onCreatedApp, onPrefetchData, }?: DefineVueRenderOptions) => (context: _web_widget_schema.ServerWidgetRenderContext<unknown> | _web_widget_schema.ServerRouteRenderContext<unknown, Record<string, string>>) => Promise<string | ReadableStream<any>>;
|
|
8
10
|
declare const render: (context: _web_widget_schema.ServerWidgetRenderContext<unknown> | _web_widget_schema.ServerRouteRenderContext<unknown, Record<string, string>>) => Promise<string | ReadableStream<any>>;
|
package/dist/vue2.server.js
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,16 +16,146 @@ var __spreadValues = (a, b) => {
|
|
|
14
16
|
}
|
|
15
17
|
return a;
|
|
16
18
|
};
|
|
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
|
+
};
|
|
17
32
|
|
|
18
33
|
// src/server.ts
|
|
34
|
+
import { defineRender } from "@web-widget/schema/server-helpers";
|
|
35
|
+
import { Readable } from "stream";
|
|
19
36
|
import Vue from "vue";
|
|
20
37
|
import { createRenderer } from "vue-server-renderer";
|
|
21
|
-
import { defineRender } from "@web-widget/schema/server-helpers";
|
|
22
38
|
export * from "@web-widget/schema/server-helpers";
|
|
23
39
|
|
|
24
40
|
// src/web-widget.ts
|
|
25
|
-
|
|
26
|
-
|
|
41
|
+
import { parse } from "@web-widget/web-widget";
|
|
42
|
+
import { h, defineComponent, defineAsyncComponent, useAttrs } from "vue";
|
|
43
|
+
var __ENV__ = {
|
|
44
|
+
server: true
|
|
45
|
+
};
|
|
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 (!__ENV__.server) {
|
|
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
|
+
function defineWebWidget(loader, options) {
|
|
131
|
+
console.warn(`defineWebWidget of vue2 is an experimental feature.`);
|
|
132
|
+
options.renderTarget = "light";
|
|
133
|
+
options.loading = "lazy";
|
|
134
|
+
return /* @__PURE__ */ defineComponent({
|
|
135
|
+
name: "WebWidgetSuspense",
|
|
136
|
+
props: {
|
|
137
|
+
renderStage: {
|
|
138
|
+
type: String,
|
|
139
|
+
default: options.renderStage
|
|
140
|
+
},
|
|
141
|
+
fallback: {
|
|
142
|
+
type: Object
|
|
143
|
+
}
|
|
144
|
+
},
|
|
145
|
+
setup({ fallback, renderStage }, { slots }) {
|
|
146
|
+
const data = useAttrs();
|
|
147
|
+
return () => h(WebWidget, {
|
|
148
|
+
props: __spreadProps(__spreadValues({}, options), {
|
|
149
|
+
data,
|
|
150
|
+
loader,
|
|
151
|
+
renderStage,
|
|
152
|
+
// -----
|
|
153
|
+
fallback
|
|
154
|
+
}),
|
|
155
|
+
scopedSlots: slots
|
|
156
|
+
});
|
|
157
|
+
}
|
|
158
|
+
});
|
|
27
159
|
}
|
|
28
160
|
|
|
29
161
|
// src/server.ts
|
|
@@ -44,28 +176,47 @@ var defineVueRender = ({
|
|
|
44
176
|
onPrefetchData
|
|
45
177
|
} = {}) => {
|
|
46
178
|
return defineRender(async (context, component, props) => {
|
|
179
|
+
const shellTag = "web-widget.shell";
|
|
47
180
|
const state = onPrefetchData ? await onPrefetchData(context, component, props) : void 0;
|
|
48
181
|
const mergedProps = state ? Object.assign(state, props) : props;
|
|
182
|
+
const renderer = createRenderer();
|
|
49
183
|
const vNodeData = {
|
|
184
|
+
attrs: {
|
|
185
|
+
"data-vue2root": "true"
|
|
186
|
+
},
|
|
50
187
|
props: mergedProps
|
|
51
188
|
};
|
|
52
|
-
const
|
|
189
|
+
const shellTagVNodeData = {};
|
|
190
|
+
let render2;
|
|
191
|
+
if (state) {
|
|
192
|
+
const stateStringify = htmlEscapeJsonString(JSON.stringify(state));
|
|
193
|
+
render2 = (h2) => h2(shellTag, shellTagVNodeData, [
|
|
194
|
+
h2(component, vNodeData),
|
|
195
|
+
h2(
|
|
196
|
+
"script",
|
|
197
|
+
{
|
|
198
|
+
attrs: {
|
|
199
|
+
as: "state",
|
|
200
|
+
type: "application/json"
|
|
201
|
+
}
|
|
202
|
+
},
|
|
203
|
+
stateStringify
|
|
204
|
+
)
|
|
205
|
+
]);
|
|
206
|
+
} else {
|
|
207
|
+
render2 = (h2) => h2(shellTag, shellTagVNodeData, [h2(component, vNodeData)]);
|
|
208
|
+
}
|
|
53
209
|
const app = new Vue(__spreadValues({
|
|
54
|
-
render
|
|
55
|
-
return h(component, vNodeData);
|
|
56
|
-
}
|
|
210
|
+
render: render2
|
|
57
211
|
}, onBeforeCreateApp(context, component, mergedProps)));
|
|
58
212
|
onCreatedApp(app, context, component, mergedProps);
|
|
59
|
-
|
|
60
|
-
const stateStringify = state ? htmlEscapeJsonString(JSON.stringify(state)) : void 0;
|
|
61
|
-
return [
|
|
62
|
-
`<web-widget.shell>${content}</web-widget.shell>`,
|
|
63
|
-
stateStringify ? `<script as="state" type="application/json">${stateStringify}</script>` : ""
|
|
64
|
-
].join("");
|
|
213
|
+
return Readable.toWeb ? Readable.toWeb(renderer.renderToStream(app)) : renderer.renderToString(app);
|
|
65
214
|
});
|
|
66
215
|
};
|
|
67
216
|
var render = defineVueRender();
|
|
68
217
|
export {
|
|
218
|
+
WebWidget,
|
|
219
|
+
__ENV__,
|
|
69
220
|
defineVueRender,
|
|
70
221
|
defineWebWidget,
|
|
71
222
|
render
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@web-widget/vue2",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.14",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
@@ -12,21 +12,31 @@
|
|
|
12
12
|
"types": "./dist/vue2.server.d.ts",
|
|
13
13
|
"default": "./dist/vue2.server.js"
|
|
14
14
|
}
|
|
15
|
+
},
|
|
16
|
+
"./vite": {
|
|
17
|
+
"types": "./dist/vite.d.ts",
|
|
18
|
+
"default": "./dist/vite.js"
|
|
15
19
|
}
|
|
16
20
|
},
|
|
17
21
|
"files": [
|
|
18
22
|
"dist"
|
|
19
23
|
],
|
|
20
24
|
"dependencies": {
|
|
21
|
-
"@web-widget/
|
|
22
|
-
|
|
23
|
-
|
|
25
|
+
"@web-widget/vite": "0.5.1",
|
|
26
|
+
"@web-widget/schema": "0.0.10",
|
|
27
|
+
"@web-widget/web-widget": "1.0.0-alpha.10",
|
|
24
28
|
"vue": "^2.7.14",
|
|
25
29
|
"vue-server-renderer": "^2.7.14"
|
|
26
30
|
},
|
|
27
31
|
"devDependencies": {
|
|
32
|
+
"@types/node": "^20.5.7",
|
|
28
33
|
"tsup": "^7.0.0",
|
|
29
|
-
"typescript": "^5.0.4"
|
|
34
|
+
"typescript": "^5.0.4",
|
|
35
|
+
"vite": "^4.4.9"
|
|
36
|
+
},
|
|
37
|
+
"peerDependencies": {
|
|
38
|
+
"vue": "^2.7.14",
|
|
39
|
+
"vue-server-renderer": "^2.7.14"
|
|
30
40
|
},
|
|
31
41
|
"publishConfig": {
|
|
32
42
|
"access": "public"
|
package/dist/types-e1e66865.d.ts
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import Vue, { Component } from 'vue';
|
|
2
|
-
import { RenderContext, ComponentProps } from '@web-widget/schema';
|
|
3
|
-
|
|
4
|
-
declare function defineWebWidget(): void;
|
|
5
|
-
|
|
6
|
-
type JSONValue = string | number | boolean | {
|
|
7
|
-
[x: string]: JSONValue;
|
|
8
|
-
} | Array<JSONValue>;
|
|
9
|
-
type JSONProps = {
|
|
10
|
-
[x: string]: JSONValue;
|
|
11
|
-
};
|
|
12
|
-
interface DefineVueRenderOptions {
|
|
13
|
-
onBeforeCreateApp?: (context: RenderContext, component: Component, props: ComponentProps) => any;
|
|
14
|
-
onCreatedApp?: (app: Vue, context: RenderContext, component: Component, props: ComponentProps) => void;
|
|
15
|
-
onPrefetchData?: (context: RenderContext, component: Component, props: ComponentProps) => Promise<JSONProps>;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export { DefineVueRenderOptions as D, defineWebWidget as d };
|