@web-widget/react 0.0.5 → 0.0.7

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.
@@ -1,8 +1,40 @@
1
1
  import * as _web_widget_schema from '@web-widget/schema';
2
2
  export * from '@web-widget/schema/client-helpers';
3
- export { A as ASSET_PLACEHOLDER, C as ClientOptions, D as DefineWebWidgetOptions, W as WebWidget, b as WebWidgetClient, a as WebWidgetClientProps, c as WebWidgetProps, _ as __ENV__, W as default, e as defineClient, f as defineClientOnly, d as defineWebWidget, r as renderServerWidget } from './web-widget-67fd682e.js';
4
- import 'react/jsx-runtime';
5
- import 'react';
3
+ import * as react from 'react';
4
+ import { ReactNode } from 'react';
5
+ import { WebWidgetContainerOptions, Loader } from '@web-widget/web-widget';
6
+
7
+ declare const __ENV__: {
8
+ server: boolean;
9
+ };
10
+ interface WebWidgetProps {
11
+ base?: WebWidgetContainerOptions["base"];
12
+ children?: ReactNode;
13
+ data?: WebWidgetContainerOptions["data"];
14
+ import?: WebWidgetContainerOptions["import"];
15
+ inactive?: WebWidgetContainerOptions["inactive"];
16
+ loader: Loader;
17
+ meta?: WebWidgetContainerOptions["meta"];
18
+ loading?: WebWidgetContainerOptions["loading"];
19
+ name?: WebWidgetContainerOptions["name"];
20
+ renderStage?: WebWidgetContainerOptions["renderStage"];
21
+ renderTarget?: WebWidgetContainerOptions["renderTarget"];
22
+ }
23
+ declare function WebWidget({ children, loader, ...props }: WebWidgetProps): react.FunctionComponentElement<any>;
24
+ interface DefineWebWidgetOptions {
25
+ base?: WebWidgetContainerOptions["base"];
26
+ import?: WebWidgetContainerOptions["import"];
27
+ loading?: WebWidgetContainerOptions["loading"];
28
+ name?: WebWidgetContainerOptions["name"];
29
+ renderStage?: WebWidgetContainerOptions["renderStage"];
30
+ renderTarget?: WebWidgetContainerOptions["renderTarget"];
31
+ }
32
+ interface WebWidgetSuspenseProps {
33
+ children?: ReactNode;
34
+ fallback?: ReactNode;
35
+ renderStage?: WebWidgetContainerOptions["renderStage"];
36
+ }
37
+ declare function defineWebWidget(loader: Loader, options: DefineWebWidgetOptions): ({ children, fallback, renderStage, ...data }: WebWidgetSuspenseProps) => react.FunctionComponentElement<react.SuspenseProps>;
6
38
 
7
39
  declare const render: (context: _web_widget_schema.ClientWidgetRenderContext<unknown> | _web_widget_schema.ClientRouteRenderContext<unknown, Record<string, string>>) => Promise<void | {
8
40
  mount?: (() => void | Promise<void>) | undefined;
@@ -18,4 +50,4 @@ declare const render: (context: _web_widget_schema.ClientWidgetRenderContext<unk
18
50
  }) => void | Promise<void>) | undefined;
19
51
  }>;
20
52
 
21
- export { render };
53
+ export { DefineWebWidgetOptions, WebWidget, WebWidgetProps, WebWidgetSuspenseProps, __ENV__, WebWidget as default, defineWebWidget, render };
@@ -1,174 +1,102 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __defProps = Object.defineProperties;
3
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
+ var __spreadValues = (a, b) => {
9
+ for (var prop in b || (b = {}))
10
+ if (__hasOwnProp.call(b, prop))
11
+ __defNormalProp(a, prop, b[prop]);
12
+ if (__getOwnPropSymbols)
13
+ for (var prop of __getOwnPropSymbols(b)) {
14
+ if (__propIsEnum.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ }
17
+ return a;
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
+ };
32
+
1
33
  // src/web-widget.tsx
34
+ import { parse } from "@web-widget/web-widget";
2
35
  import { Suspense, createElement, lazy } from "react";
3
- import { jsx } from "react/jsx-runtime";
4
36
  var __ENV__ = {
5
37
  server: true
6
38
  };
7
- var MODULE_REG = /\b(?:import|__vite_ssr_dynamic_import__)\(["']([^"']*)["']\)/;
8
- function getFilename(loader) {
9
- const match = String(loader).match(MODULE_REG);
10
- const id = match?.[1];
11
- if (!id) {
12
- throw new Error(`The url for the module was not found: ${loader}`);
13
- }
14
- return id;
15
- }
16
- async function readableStreamToString(stream) {
17
- const decoder = new TextDecoder();
18
- const reader = stream.getReader();
19
- let result = "";
20
- try {
21
- while (true) {
22
- const { done, value } = await reader.read();
23
- if (done)
24
- break;
25
- const chunk = decoder.decode(value, { stream: true });
26
- result += chunk;
27
- }
28
- } finally {
29
- reader.releaseLock();
30
- }
31
- return result;
32
- }
33
- function WebWidgetClient({
34
- base,
35
- data,
36
- import: url,
37
- innerHTML = "",
38
- loading,
39
- name,
40
- recovering
41
- }) {
42
- const attrs = {
43
- base,
44
- data: JSON.stringify(data),
45
- import: url,
46
- loading,
47
- name,
48
- rendertarget: "light"
49
- };
50
- if (recovering && typeof recovering !== "string") {
51
- Object.assign(attrs, {
52
- recovering: ""
53
- });
54
- }
55
- return createElement("web-widget", {
56
- ...attrs,
57
- dangerouslySetInnerHTML: { __html: innerHTML }
58
- });
59
- }
60
- async function renderServerWidget(loader, data) {
61
- const module = await loader();
62
- if (typeof module.render !== "function") {
63
- const url = getFilename(loader);
64
- throw new Error(`The module does not export a 'render' method: ${url}`);
65
- }
66
- const result = await module.render({
67
- meta: module.meta ?? {},
68
- // TODO 处理 Meta 中的相对路径资产
69
- module,
70
- data
71
- });
72
- if (result instanceof ReadableStream) {
73
- return await readableStreamToString(result);
74
- } else if (typeof result === "string") {
75
- return result;
76
- } else {
77
- const url = getFilename(loader);
78
- throw new Error(`Render results in an unknown format: ${url}`);
39
+ function WebWidget(_a) {
40
+ var _b = _a, {
41
+ children,
42
+ loader
43
+ } = _b, props = __objRest(_b, [
44
+ "children",
45
+ "loader"
46
+ ]);
47
+ if (!loader) {
48
+ throw new TypeError(`Missing loader.`);
79
49
  }
80
- }
81
- function WebWidget({
82
- base,
83
- children,
84
- data,
85
- fallback,
86
- import: url,
87
- loader,
88
- loading,
89
- name,
90
- recovering
91
- }) {
92
50
  if (children) {
93
- throw new Error(`No support for 'children'`);
51
+ throw new TypeError(`No support children.`);
94
52
  }
95
- if (recovering && !loader) {
96
- throw new Error(`Missing loader`);
97
- }
98
- const WebWidgetClientFactory = lazy(async () => {
99
- let innerHTML = "";
100
- if (__ENV__.server && recovering && loader) {
101
- innerHTML = await renderServerWidget(loader, data);
102
- }
103
- return {
104
- default: function WebWidgetClientFactory2() {
105
- return /* @__PURE__ */ jsx(
106
- WebWidgetClient,
107
- {
108
- ...{
109
- base,
110
- data,
111
- import: url,
112
- loading,
113
- name,
114
- innerHTML,
115
- recovering
116
- }
117
- }
118
- );
53
+ return /* @__PURE__ */ createElement(
54
+ lazy(async () => {
55
+ const [tag, attrs, innerHTML] = await parse(loader, __spreadProps(__spreadValues({}, props), {
56
+ // TODO Render children
57
+ children: ""
58
+ }));
59
+ if (!__ENV__.server) {
60
+ console.warn(`Client components are experimental.`);
61
+ await customElements.whenDefined(tag);
62
+ const element = Object.assign(document.createElement(tag), props);
63
+ await element.bootstrap();
119
64
  }
120
- };
121
- });
122
- return /* @__PURE__ */ jsx(Suspense, { fallback, children: /* @__PURE__ */ jsx(WebWidgetClientFactory, {}) });
65
+ return {
66
+ default: function WebWidgetContainer() {
67
+ return createElement(tag, __spreadProps(__spreadValues({}, attrs), {
68
+ dangerouslySetInnerHTML: {
69
+ __html: innerHTML
70
+ }
71
+ }));
72
+ }
73
+ };
74
+ })
75
+ );
123
76
  }
124
- var ASSET_PLACEHOLDER = "asset://";
125
- function defineWebWidget(loader, {
126
- base,
127
- import: url,
128
- loading,
129
- name,
130
- recovering = true
131
- }) {
132
- const clientImport = url && !url.startsWith(ASSET_PLACEHOLDER) ? url : getFilename(loader);
133
- return function WebWidgetFactory({
134
- children,
135
- fallback,
136
- ...data
137
- }) {
138
- return /* @__PURE__ */ jsx(
139
- WebWidget,
140
- {
141
- ...{
142
- base,
143
- data,
144
- fallback,
145
- import: clientImport,
146
- loader,
147
- loading,
148
- name,
149
- recovering
150
- },
151
- children
152
- }
153
- );
77
+ function defineWebWidget(loader, options) {
78
+ options.renderTarget = "light";
79
+ return function WebWidgetSuspense(_a) {
80
+ var _b = _a, {
81
+ children,
82
+ fallback,
83
+ renderStage = options.renderStage
84
+ } = _b, data = __objRest(_b, [
85
+ "children",
86
+ "fallback",
87
+ "renderStage"
88
+ ]);
89
+ return createElement(Suspense, {
90
+ fallback,
91
+ children: createElement(WebWidget, __spreadProps(__spreadValues({}, options), {
92
+ children,
93
+ data,
94
+ loader,
95
+ renderStage
96
+ }))
97
+ });
154
98
  };
155
99
  }
156
- function defineClient(loader, { base, loading, name } = {}) {
157
- return defineWebWidget(loader, {
158
- base,
159
- loading,
160
- name,
161
- recovering: true
162
- });
163
- }
164
- function defineClientOnly(loader, { base, loading, name } = {}) {
165
- return defineWebWidget(loader, {
166
- base,
167
- loading,
168
- name,
169
- recovering: false
170
- });
171
- }
172
100
 
173
101
  // src/client.ts
174
102
  import { createElement as createElement2 } from "react";
@@ -200,20 +128,15 @@ var render = defineRender(async (context, component, props) => {
200
128
  }
201
129
  },
202
130
  async unmount() {
203
- root?.unmount();
131
+ root == null ? void 0 : root.unmount();
204
132
  root = null;
205
133
  }
206
134
  };
207
135
  });
208
136
  export {
209
- ASSET_PLACEHOLDER,
210
137
  WebWidget,
211
- WebWidgetClient,
212
138
  __ENV__,
213
139
  WebWidget as default,
214
- defineClient,
215
- defineClientOnly,
216
140
  defineWebWidget,
217
- render,
218
- renderServerWidget
141
+ render
219
142
  };
@@ -1,9 +1,41 @@
1
1
  import * as _web_widget_schema from '@web-widget/schema';
2
2
  export * from '@web-widget/schema/server-helpers';
3
- export { A as ASSET_PLACEHOLDER, C as ClientOptions, D as DefineWebWidgetOptions, W as WebWidget, b as WebWidgetClient, a as WebWidgetClientProps, c as WebWidgetProps, _ as __ENV__, W as default, e as defineClient, f as defineClientOnly, d as defineWebWidget, r as renderServerWidget } from './web-widget-67fd682e.js';
4
- import 'react/jsx-runtime';
5
- import 'react';
3
+ import * as react from 'react';
4
+ import { ReactNode } from 'react';
5
+ import { WebWidgetContainerOptions, Loader } from '@web-widget/web-widget';
6
+
7
+ declare const __ENV__: {
8
+ server: boolean;
9
+ };
10
+ interface WebWidgetProps {
11
+ base?: WebWidgetContainerOptions["base"];
12
+ children?: ReactNode;
13
+ data?: WebWidgetContainerOptions["data"];
14
+ import?: WebWidgetContainerOptions["import"];
15
+ inactive?: WebWidgetContainerOptions["inactive"];
16
+ loader: Loader;
17
+ meta?: WebWidgetContainerOptions["meta"];
18
+ loading?: WebWidgetContainerOptions["loading"];
19
+ name?: WebWidgetContainerOptions["name"];
20
+ renderStage?: WebWidgetContainerOptions["renderStage"];
21
+ renderTarget?: WebWidgetContainerOptions["renderTarget"];
22
+ }
23
+ declare function WebWidget({ children, loader, ...props }: WebWidgetProps): react.FunctionComponentElement<any>;
24
+ interface DefineWebWidgetOptions {
25
+ base?: WebWidgetContainerOptions["base"];
26
+ import?: WebWidgetContainerOptions["import"];
27
+ loading?: WebWidgetContainerOptions["loading"];
28
+ name?: WebWidgetContainerOptions["name"];
29
+ renderStage?: WebWidgetContainerOptions["renderStage"];
30
+ renderTarget?: WebWidgetContainerOptions["renderTarget"];
31
+ }
32
+ interface WebWidgetSuspenseProps {
33
+ children?: ReactNode;
34
+ fallback?: ReactNode;
35
+ renderStage?: WebWidgetContainerOptions["renderStage"];
36
+ }
37
+ declare function defineWebWidget(loader: Loader, options: DefineWebWidgetOptions): ({ children, fallback, renderStage, ...data }: WebWidgetSuspenseProps) => react.FunctionComponentElement<react.SuspenseProps>;
6
38
 
7
39
  declare const render: (context: _web_widget_schema.ServerWidgetRenderContext<unknown> | _web_widget_schema.ServerRouteRenderContext<unknown, Record<string, string>>) => Promise<string | ReadableStream<any>>;
8
40
 
9
- export { render };
41
+ export { DefineWebWidgetOptions, WebWidget, WebWidgetProps, WebWidgetSuspenseProps, __ENV__, WebWidget as default, defineWebWidget, render };
@@ -1,174 +1,102 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __defProps = Object.defineProperties;
3
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
+ var __spreadValues = (a, b) => {
9
+ for (var prop in b || (b = {}))
10
+ if (__hasOwnProp.call(b, prop))
11
+ __defNormalProp(a, prop, b[prop]);
12
+ if (__getOwnPropSymbols)
13
+ for (var prop of __getOwnPropSymbols(b)) {
14
+ if (__propIsEnum.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ }
17
+ return a;
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
+ };
32
+
1
33
  // src/web-widget.tsx
34
+ import { parse } from "@web-widget/web-widget";
2
35
  import { Suspense, createElement, lazy } from "react";
3
- import { jsx } from "react/jsx-runtime";
4
36
  var __ENV__ = {
5
37
  server: true
6
38
  };
7
- var MODULE_REG = /\b(?:import|__vite_ssr_dynamic_import__)\(["']([^"']*)["']\)/;
8
- function getFilename(loader) {
9
- const match = String(loader).match(MODULE_REG);
10
- const id = match?.[1];
11
- if (!id) {
12
- throw new Error(`The url for the module was not found: ${loader}`);
13
- }
14
- return id;
15
- }
16
- async function readableStreamToString(stream) {
17
- const decoder = new TextDecoder();
18
- const reader = stream.getReader();
19
- let result = "";
20
- try {
21
- while (true) {
22
- const { done, value } = await reader.read();
23
- if (done)
24
- break;
25
- const chunk = decoder.decode(value, { stream: true });
26
- result += chunk;
27
- }
28
- } finally {
29
- reader.releaseLock();
30
- }
31
- return result;
32
- }
33
- function WebWidgetClient({
34
- base,
35
- data,
36
- import: url,
37
- innerHTML = "",
38
- loading,
39
- name,
40
- recovering
41
- }) {
42
- const attrs = {
43
- base,
44
- data: JSON.stringify(data),
45
- import: url,
46
- loading,
47
- name,
48
- rendertarget: "light"
49
- };
50
- if (recovering && typeof recovering !== "string") {
51
- Object.assign(attrs, {
52
- recovering: ""
53
- });
54
- }
55
- return createElement("web-widget", {
56
- ...attrs,
57
- dangerouslySetInnerHTML: { __html: innerHTML }
58
- });
59
- }
60
- async function renderServerWidget(loader, data) {
61
- const module = await loader();
62
- if (typeof module.render !== "function") {
63
- const url = getFilename(loader);
64
- throw new Error(`The module does not export a 'render' method: ${url}`);
65
- }
66
- const result = await module.render({
67
- meta: module.meta ?? {},
68
- // TODO 处理 Meta 中的相对路径资产
69
- module,
70
- data
71
- });
72
- if (result instanceof ReadableStream) {
73
- return await readableStreamToString(result);
74
- } else if (typeof result === "string") {
75
- return result;
76
- } else {
77
- const url = getFilename(loader);
78
- throw new Error(`Render results in an unknown format: ${url}`);
39
+ function WebWidget(_a) {
40
+ var _b = _a, {
41
+ children,
42
+ loader
43
+ } = _b, props = __objRest(_b, [
44
+ "children",
45
+ "loader"
46
+ ]);
47
+ if (!loader) {
48
+ throw new TypeError(`Missing loader.`);
79
49
  }
80
- }
81
- function WebWidget({
82
- base,
83
- children,
84
- data,
85
- fallback,
86
- import: url,
87
- loader,
88
- loading,
89
- name,
90
- recovering
91
- }) {
92
50
  if (children) {
93
- throw new Error(`No support for 'children'`);
51
+ throw new TypeError(`No support children.`);
94
52
  }
95
- if (recovering && !loader) {
96
- throw new Error(`Missing loader`);
97
- }
98
- const WebWidgetClientFactory = lazy(async () => {
99
- let innerHTML = "";
100
- if (__ENV__.server && recovering && loader) {
101
- innerHTML = await renderServerWidget(loader, data);
102
- }
103
- return {
104
- default: function WebWidgetClientFactory2() {
105
- return /* @__PURE__ */ jsx(
106
- WebWidgetClient,
107
- {
108
- ...{
109
- base,
110
- data,
111
- import: url,
112
- loading,
113
- name,
114
- innerHTML,
115
- recovering
116
- }
117
- }
118
- );
53
+ return /* @__PURE__ */ createElement(
54
+ lazy(async () => {
55
+ const [tag, attrs, innerHTML] = await parse(loader, __spreadProps(__spreadValues({}, props), {
56
+ // TODO Render children
57
+ children: ""
58
+ }));
59
+ if (!__ENV__.server) {
60
+ console.warn(`Client components are experimental.`);
61
+ await customElements.whenDefined(tag);
62
+ const element = Object.assign(document.createElement(tag), props);
63
+ await element.bootstrap();
119
64
  }
120
- };
121
- });
122
- return /* @__PURE__ */ jsx(Suspense, { fallback, children: /* @__PURE__ */ jsx(WebWidgetClientFactory, {}) });
65
+ return {
66
+ default: function WebWidgetContainer() {
67
+ return createElement(tag, __spreadProps(__spreadValues({}, attrs), {
68
+ dangerouslySetInnerHTML: {
69
+ __html: innerHTML
70
+ }
71
+ }));
72
+ }
73
+ };
74
+ })
75
+ );
123
76
  }
124
- var ASSET_PLACEHOLDER = "asset://";
125
- function defineWebWidget(loader, {
126
- base,
127
- import: url,
128
- loading,
129
- name,
130
- recovering = true
131
- }) {
132
- const clientImport = url && !url.startsWith(ASSET_PLACEHOLDER) ? url : getFilename(loader);
133
- return function WebWidgetFactory({
134
- children,
135
- fallback,
136
- ...data
137
- }) {
138
- return /* @__PURE__ */ jsx(
139
- WebWidget,
140
- {
141
- ...{
142
- base,
143
- data,
144
- fallback,
145
- import: clientImport,
146
- loader,
147
- loading,
148
- name,
149
- recovering
150
- },
151
- children
152
- }
153
- );
77
+ function defineWebWidget(loader, options) {
78
+ options.renderTarget = "light";
79
+ return function WebWidgetSuspense(_a) {
80
+ var _b = _a, {
81
+ children,
82
+ fallback,
83
+ renderStage = options.renderStage
84
+ } = _b, data = __objRest(_b, [
85
+ "children",
86
+ "fallback",
87
+ "renderStage"
88
+ ]);
89
+ return createElement(Suspense, {
90
+ fallback,
91
+ children: createElement(WebWidget, __spreadProps(__spreadValues({}, options), {
92
+ children,
93
+ data,
94
+ loader,
95
+ renderStage
96
+ }))
97
+ });
154
98
  };
155
99
  }
156
- function defineClient(loader, { base, loading, name } = {}) {
157
- return defineWebWidget(loader, {
158
- base,
159
- loading,
160
- name,
161
- recovering: true
162
- });
163
- }
164
- function defineClientOnly(loader, { base, loading, name } = {}) {
165
- return defineWebWidget(loader, {
166
- base,
167
- loading,
168
- name,
169
- recovering: false
170
- });
171
- }
172
100
 
173
101
  // src/server.ts
174
102
  import { createElement as createElement2 } from "react";
@@ -188,14 +116,9 @@ var render = defineRender(async (context, component, props) => {
188
116
  return ReactDOMServer.renderToReadableStream(vnode);
189
117
  });
190
118
  export {
191
- ASSET_PLACEHOLDER,
192
119
  WebWidget,
193
- WebWidgetClient,
194
120
  __ENV__,
195
121
  WebWidget as default,
196
- defineClient,
197
- defineClientOnly,
198
122
  defineWebWidget,
199
- render,
200
- renderServerWidget
123
+ render
201
124
  };
package/globals.d.ts CHANGED
@@ -1,11 +1,29 @@
1
- import type { ReactNode } from "react";
1
+ import type { ReactNode, ComponentProps } from "react";
2
2
 
3
- type _IntrinsicAttributes = IntrinsicAttributes;
3
+ declare global {
4
+ declare namespace JSX {
5
+ interface IntrinsicAttributes {
6
+ key?: Key | null | undefined;
7
+ renderStage?: "server" | "client";
8
+ fallback?: ReactNode;
9
+ }
10
+ }
11
+ }
4
12
 
5
- declare namespace JSX {
6
- interface IntrinsicAttributes extends _IntrinsicAttributes {
7
- as?: "web-widget" | "web-widget:server" | "web-widget:client" | any;
8
- loading?: "lazy" | any;
13
+ interface ReactWidgetComponent extends ComponentProps<any> {
14
+ (props: {
15
+ children?: ReactNode;
16
+ renderStage?: "server" | "client";
9
17
  fallback?: ReactNode;
10
- }
18
+ }): ReactNode;
19
+ }
20
+
21
+ declare module "*.widget.jsx" {
22
+ const reactWidgetComponent: ReactWidgetComponent;
23
+ export default reactWidgetComponent;
24
+ }
25
+
26
+ declare module "*.route.tsx" {
27
+ const reactWidgetComponent: ReactWidgetComponent;
28
+ export default reactWidgetComponent;
11
29
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@web-widget/react",
3
- "version": "0.0.5",
3
+ "version": "0.0.7",
4
4
  "type": "module",
5
5
  "exports": {
6
6
  ".": {
@@ -17,14 +17,6 @@
17
17
  "default": "./dist/react.server.js"
18
18
  }
19
19
  },
20
- "./babel-plugin": {
21
- "types": "./dist/babel-plugin.d.ts",
22
- "default": "./dist/babel-plugin.js"
23
- },
24
- "./vite-plugin": {
25
- "types": "./dist/vite-plugin.d.ts",
26
- "default": "./dist/vite-plugin.js"
27
- },
28
20
  "./globals": "./globals.d.ts"
29
21
  },
30
22
  "files": [
@@ -36,7 +28,8 @@
36
28
  "@babel/helper-module-imports": "^7.22.5",
37
29
  "@babel/helper-plugin-utils": "^7.22.5",
38
30
  "@babel/traverse": "^7.22.5",
39
- "@web-widget/schema": "0.0.7"
31
+ "@web-widget/schema": "0.0.9",
32
+ "@web-widget/web-widget": "1.0.0-alpha.7"
40
33
  },
41
34
  "peerDependencies": {
42
35
  "@vitejs/plugin-react": "^4.0.2",
@@ -53,7 +46,7 @@
53
46
  "@types/react-dom": "^18.0.6",
54
47
  "tsup": "^7.0.0",
55
48
  "typescript": "^5.0.4",
56
- "vite": "^4.3.9"
49
+ "vite": "^4.4.9"
57
50
  },
58
51
  "publishConfig": {
59
52
  "access": "public"
@@ -1,14 +0,0 @@
1
- import { PluginPass } from '@babel/core';
2
- import { Visitor } from '@babel/traverse';
3
-
4
- type Config = {
5
- base: string;
6
- root: string;
7
- isServer: boolean;
8
- };
9
- declare const _default: (api: object, options: Record<string, any> | null | undefined, dirname: string) => {
10
- name: string;
11
- visitor: Visitor<PluginPass>;
12
- };
13
-
14
- export { Config, _default as default };
@@ -1,139 +0,0 @@
1
- // src/babel-plugin.ts
2
- import { dirname, join, relative } from "path";
3
-
4
- // src/web-widget.tsx
5
- import { Suspense, createElement, lazy } from "react";
6
- import { jsx } from "react/jsx-runtime";
7
- var ASSET_PLACEHOLDER = "asset://";
8
-
9
- // src/babel-plugin.ts
10
- import { addNamed } from "@babel/helper-module-imports";
11
- import { declare } from "@babel/helper-plugin-utils";
12
- import { types as t } from "@babel/core";
13
- var TAGNAME = "web-widget";
14
- function createWebWidgetVariableDeclaration(definer, component, source, options) {
15
- const getType = (object) => Object.prototype.toString.call(object).slice(8, -1).toLocaleLowerCase();
16
- return t.variableDeclaration("const", [
17
- t.variableDeclarator(
18
- t.identifier(component),
19
- t.callExpression(t.identifier(definer), [
20
- t.arrowFunctionExpression(
21
- [],
22
- t.callExpression(t.import(), [t.stringLiteral(source)])
23
- ),
24
- t.objectExpression(
25
- Object.keys(options).map((key) => {
26
- const value = options[key];
27
- const type = getType(value);
28
- switch (type) {
29
- case "string":
30
- return t.objectProperty(
31
- t.identifier(key),
32
- t.stringLiteral(value)
33
- );
34
- case "number":
35
- return t.objectProperty(
36
- t.identifier(key),
37
- t.numericLiteral(value)
38
- );
39
- case "boolean":
40
- return t.objectProperty(
41
- t.identifier(key),
42
- t.booleanLiteral(value)
43
- );
44
- case "null":
45
- return t.objectProperty(t.identifier(key), t.nullLiteral());
46
- }
47
- throw new Error(`Type not supported: ${key}=${value}`);
48
- })
49
- )
50
- ])
51
- )
52
- ]);
53
- }
54
- var babel_plugin_default = declare((api) => {
55
- api.assertVersion(7);
56
- let config;
57
- const visitor = {
58
- Program: {
59
- enter(path, { opts }) {
60
- config = opts;
61
- }
62
- },
63
- JSXOpeningElement(path, state) {
64
- if (!state.filename) {
65
- return;
66
- }
67
- const name = path.node.name;
68
- let bindingName;
69
- if (t.isJSXIdentifier(name)) {
70
- bindingName = name.name;
71
- } else if (t.isJSXMemberExpression(name)) {
72
- let object = name.object;
73
- while (t.isJSXMemberExpression(object)) {
74
- object = object.object;
75
- }
76
- bindingName = object.name;
77
- } else if (t.isJSXNamespacedName(name)) {
78
- bindingName = name.namespace.name;
79
- } else {
80
- return;
81
- }
82
- const binding = path.scope.getBinding(bindingName);
83
- if (binding && t.isImportDeclaration(binding.path.parent)) {
84
- const container = path.container;
85
- if (!t.isJSXElement(container)) {
86
- return;
87
- }
88
- if (!t.isJSXIdentifier(container.openingElement.name)) {
89
- return;
90
- }
91
- const attributes = container.openingElement.attributes;
92
- const widgetAttr = attributes.find(
93
- (attr) => t.isJSXAttribute(attr) && attr.name.name === "as" && t.isStringLiteral(attr.value) && attr.value.value.startsWith(TAGNAME)
94
- );
95
- if (!widgetAttr) {
96
- return;
97
- }
98
- const mode = t.isStringLiteral(widgetAttr.value) ? widgetAttr.value.value.replace(TAGNAME + ":", "") : "";
99
- const loadingAttr = attributes.find(
100
- (attr) => t.isJSXAttribute(attr) && attr.name.name === "loading"
101
- ) || void 0;
102
- container.openingElement.attributes = container.openingElement.attributes.filter(
103
- (attr) => attr !== widgetAttr && attr !== loadingAttr
104
- );
105
- const importDeclaration = binding.path.parent;
106
- const source = importDeclaration.source.value;
107
- const importName = addNamed(
108
- path,
109
- "defineWebWidget",
110
- "@web-widget/react"
111
- );
112
- const options = {
113
- // base: config.base,
114
- import: ASSET_PLACEHOLDER + relative(config.root, join(dirname(state.filename), source)),
115
- name: container.openingElement.name.name,
116
- recovering: config.isServer && mode !== "client"
117
- };
118
- if (loadingAttr && loadingAttr.value && t.isStringLiteral(loadingAttr.value)) {
119
- options.loading = loadingAttr.value.value;
120
- }
121
- binding.path.parentPath?.replaceWith(
122
- createWebWidgetVariableDeclaration(
123
- importName.name,
124
- container.openingElement.name.name,
125
- source,
126
- options
127
- )
128
- );
129
- }
130
- }
131
- };
132
- return {
133
- name: "@web-widget/react:web-widget",
134
- visitor
135
- };
136
- });
137
- export {
138
- babel_plugin_default as default
139
- };
@@ -1,6 +0,0 @@
1
- import { Plugin, PluginOption } from 'vite';
2
- import { Options } from '@vitejs/plugin-react';
3
-
4
- declare function ReactWebWidgetVitePlugin(options?: Options): Plugin | PluginOption;
5
-
6
- export { ReactWebWidgetVitePlugin as default };
@@ -1,57 +0,0 @@
1
- // src/vite-plugin.ts
2
- import react from "@vitejs/plugin-react";
3
- function ReactWebWidgetVitePlugin(options = {}) {
4
- let config;
5
- return [
6
- {
7
- name: "@web-widget/react:get-config",
8
- enforce: "pre",
9
- config(config2) {
10
- var _a;
11
- config2.resolve || (config2.resolve = {});
12
- (_a = config2.resolve).alias || (_a.alias = {});
13
- const aliases = [
14
- { find: "react-dom/server", replacement: "react-dom/server.browser" }
15
- ];
16
- if (Array.isArray(config2.resolve.alias)) {
17
- config2.resolve.alias = [...config2.resolve.alias, ...aliases];
18
- } else {
19
- for (const alias of aliases) {
20
- config2.resolve.alias[alias.find] = alias.replacement;
21
- }
22
- }
23
- },
24
- configResolved(resolvedConfig) {
25
- config = resolvedConfig;
26
- }
27
- },
28
- ...react({
29
- ...options,
30
- babel: {
31
- ...options?.babel,
32
- plugins: [
33
- // @ts-expect-error
34
- ...options?.babel?.plugins || [],
35
- [
36
- "@web-widget/react/babel-plugin",
37
- {
38
- get base() {
39
- const isServer = !!config.build.ssr;
40
- return isServer ? config.base + config.build.assetsDir + "/" : config.base;
41
- },
42
- get root() {
43
- return config.root;
44
- },
45
- get isServer() {
46
- return !!config.build.ssr || config.command === "serve";
47
- }
48
- }
49
- ]
50
- ]
51
- }
52
- })
53
- ];
54
- }
55
- export {
56
- ReactWebWidgetVitePlugin as default
57
- };
@@ -1,64 +0,0 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import * as react from 'react';
3
- import { ReactNode } from 'react';
4
- import { WidgetModule } from '@web-widget/schema';
5
-
6
- declare const __ENV__: {
7
- server: boolean;
8
- };
9
- type JSONValue = string | number | boolean | {
10
- [x: string]: JSONValue;
11
- } | Array<JSONValue>;
12
- type JSONProps = {
13
- [x: string]: JSONValue;
14
- };
15
- type Loader = () => Promise<WidgetModule>;
16
- interface WebWidgetClientProps {
17
- base?: string;
18
- data: JSONProps;
19
- import: string;
20
- innerHTML?: string;
21
- loading?: string;
22
- name?: string;
23
- recovering: boolean;
24
- }
25
- declare function WebWidgetClient({ base, data, import: url, innerHTML, loading, name, recovering, }: WebWidgetClientProps): react.DOMElement<{
26
- dangerouslySetInnerHTML: {
27
- __html: string;
28
- };
29
- base: string | undefined;
30
- data: string;
31
- import: string;
32
- loading: string | undefined;
33
- name: string | undefined;
34
- rendertarget: string;
35
- }, Element>;
36
- declare function renderServerWidget(loader: Loader, data: any): Promise<string>;
37
- interface WebWidgetProps extends WebWidgetClientProps {
38
- fallback?: ReactNode;
39
- children?: ReactNode | undefined;
40
- loader?: Loader;
41
- }
42
- declare function WebWidget({ base, children, data, fallback, import: url, loader, loading, name, recovering, }: WebWidgetProps): react_jsx_runtime.JSX.Element;
43
- type WebWidgetFactoryProps = JSONProps & {
44
- children?: ReactNode;
45
- fallback?: ReactNode;
46
- };
47
- interface DefineWebWidgetOptions {
48
- base?: string;
49
- import?: string;
50
- loading?: string;
51
- name?: string;
52
- recovering?: boolean;
53
- }
54
- declare const ASSET_PLACEHOLDER = "asset://";
55
- declare function defineWebWidget(loader: Loader, { base, import: url, loading, name, recovering, }: DefineWebWidgetOptions): ({ children, fallback, ...data }: WebWidgetFactoryProps) => react_jsx_runtime.JSX.Element;
56
- interface ClientOptions {
57
- base?: string;
58
- loading?: "lazy";
59
- name?: string;
60
- }
61
- declare function defineClient(loader: Loader, { base, loading, name }?: ClientOptions): ({ children, fallback, ...data }: WebWidgetFactoryProps) => react_jsx_runtime.JSX.Element;
62
- declare function defineClientOnly(loader: Loader, { base, loading, name }?: ClientOptions): ({ children, fallback, ...data }: WebWidgetFactoryProps) => react_jsx_runtime.JSX.Element;
63
-
64
- export { ASSET_PLACEHOLDER as A, ClientOptions as C, DefineWebWidgetOptions as D, WebWidget as W, __ENV__ as _, WebWidgetClientProps as a, WebWidgetClient as b, WebWidgetProps as c, defineWebWidget as d, defineClient as e, defineClientOnly as f, renderServerWidget as r };