@web-widget/react 0.0.4 → 0.0.6

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,38 @@
1
1
  import * as _web_widget_schema from '@web-widget/schema';
2
2
  export * from '@web-widget/schema/client-helpers';
3
- export { 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-ec342172.js';
4
- import 'react/jsx-runtime';
5
- import 'react';
3
+ import * as react from 'react';
4
+ import { ReactNode } from 'react';
5
+ import { WebWidgetContainerProps, Loader } from '@web-widget/web-widget';
6
+
7
+ declare const __ENV__: {
8
+ server: boolean;
9
+ };
10
+ interface WebWidgetProps {
11
+ base?: WebWidgetContainerProps["base"];
12
+ children?: ReactNode;
13
+ data?: WebWidgetContainerProps["data"];
14
+ import?: WebWidgetContainerProps["import"];
15
+ loader: Loader;
16
+ loading?: WebWidgetContainerProps["loading"];
17
+ name?: WebWidgetContainerProps["name"];
18
+ recovering: WebWidgetContainerProps["recovering"];
19
+ renderTarget?: WebWidgetContainerProps["renderTarget"];
20
+ }
21
+ declare function WebWidget({ children, loader, ...props }: WebWidgetProps): react.FunctionComponentElement<any>;
22
+ interface DefineWebWidgetOptions {
23
+ base?: WebWidgetContainerProps["base"];
24
+ import?: WebWidgetContainerProps["import"];
25
+ loading?: WebWidgetContainerProps["loading"];
26
+ name?: WebWidgetContainerProps["name"];
27
+ recovering?: WebWidgetContainerProps["recovering"];
28
+ renderTarget?: WebWidgetContainerProps["renderTarget"];
29
+ }
30
+ interface WebWidgetSuspenseProps {
31
+ children?: ReactNode;
32
+ clientOnly?: boolean;
33
+ fallback?: ReactNode;
34
+ }
35
+ declare function defineWebWidget(loader: Loader, options: DefineWebWidgetOptions): ({ children, clientOnly, fallback, ...data }: WebWidgetSuspenseProps) => react.FunctionComponentElement<react.SuspenseProps>;
6
36
 
7
37
  declare const render: (context: _web_widget_schema.ClientWidgetRenderContext<unknown> | _web_widget_schema.ClientRouteRenderContext<unknown, Record<string, string>>) => Promise<void | {
8
38
  mount?: (() => void | Promise<void>) | undefined;
@@ -18,4 +48,4 @@ declare const render: (context: _web_widget_schema.ClientWidgetRenderContext<unk
18
48
  }) => void | Promise<void>) | undefined;
19
49
  }>;
20
50
 
21
- export { render };
51
+ export { DefineWebWidgetOptions, WebWidget, WebWidgetProps, WebWidgetSuspenseProps, __ENV__, WebWidget as default, defineWebWidget, render };
@@ -1,168 +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}`);
79
- }
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
- if (!base) {
93
- throw new Error(`Missing base`);
39
+ function WebWidget(_a) {
40
+ var _b = _a, {
41
+ children,
42
+ loader
43
+ } = _b, props = __objRest(_b, [
44
+ "children",
45
+ "loader"
46
+ ]);
47
+ if (props.recovering && !loader) {
48
+ throw new TypeError(`Missing loader.`);
94
49
  }
95
50
  if (children) {
96
- throw new Error(`No support for 'children'`);
51
+ throw new TypeError(`No support children.`);
97
52
  }
98
- if (recovering && !loader) {
99
- throw new Error(`Missing loader`);
100
- }
101
- const WebWidgetClientFactory = lazy(async () => {
102
- let innerHTML = "";
103
- if (__ENV__.server && recovering && loader) {
104
- innerHTML = await renderServerWidget(loader, data);
105
- }
106
- return {
107
- default: function WebWidgetClientFactory2() {
108
- return /* @__PURE__ */ jsx(
109
- WebWidgetClient,
110
- {
111
- ...{
112
- base,
113
- data,
114
- import: url,
115
- loading,
116
- name,
117
- innerHTML,
118
- recovering
119
- }
120
- }
121
- );
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();
122
64
  }
123
- };
124
- });
125
- 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
+ );
126
76
  }
127
- function defineWebWidget(loader, base, { loading, name, recovering = true } = {}) {
128
- const url = getFilename(loader);
129
- return function WebWidgetFactory({
130
- children,
131
- fallback,
132
- ...data
133
- }) {
134
- return /* @__PURE__ */ jsx(
135
- WebWidget,
136
- {
137
- ...{
138
- base,
139
- data,
140
- fallback,
141
- import: url,
142
- loader,
143
- loading,
144
- name,
145
- recovering
146
- },
147
- children
148
- }
149
- );
77
+ function defineWebWidget(loader, options) {
78
+ options.renderTarget = "light";
79
+ return function WebWidgetSuspense(_a) {
80
+ var _b = _a, {
81
+ children,
82
+ clientOnly = !options.recovering,
83
+ fallback
84
+ } = _b, data = __objRest(_b, [
85
+ "children",
86
+ "clientOnly",
87
+ "fallback"
88
+ ]);
89
+ return createElement(Suspense, {
90
+ fallback,
91
+ children: createElement(WebWidget, __spreadProps(__spreadValues({}, options), {
92
+ children,
93
+ data,
94
+ loader,
95
+ recovering: !clientOnly
96
+ }))
97
+ });
150
98
  };
151
99
  }
152
- function defineClient(loader, base, { loading, name } = {}) {
153
- return defineWebWidget(loader, base, {
154
- loading,
155
- name,
156
- recovering: true
157
- });
158
- }
159
- function defineClientOnly(loader, base, { loading, name } = {}) {
160
- return defineWebWidget(loader, base, {
161
- loading,
162
- name,
163
- recovering: false
164
- });
165
- }
166
100
 
167
101
  // src/client.ts
168
102
  import { createElement as createElement2 } from "react";
@@ -194,19 +128,15 @@ var render = defineRender(async (context, component, props) => {
194
128
  }
195
129
  },
196
130
  async unmount() {
197
- root?.unmount();
131
+ root == null ? void 0 : root.unmount();
198
132
  root = null;
199
133
  }
200
134
  };
201
135
  });
202
136
  export {
203
137
  WebWidget,
204
- WebWidgetClient,
205
138
  __ENV__,
206
139
  WebWidget as default,
207
- defineClient,
208
- defineClientOnly,
209
140
  defineWebWidget,
210
- render,
211
- renderServerWidget
141
+ render
212
142
  };
@@ -1,9 +1,39 @@
1
1
  import * as _web_widget_schema from '@web-widget/schema';
2
2
  export * from '@web-widget/schema/server-helpers';
3
- export { 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-ec342172.js';
4
- import 'react/jsx-runtime';
5
- import 'react';
3
+ import * as react from 'react';
4
+ import { ReactNode } from 'react';
5
+ import { WebWidgetContainerProps, Loader } from '@web-widget/web-widget';
6
+
7
+ declare const __ENV__: {
8
+ server: boolean;
9
+ };
10
+ interface WebWidgetProps {
11
+ base?: WebWidgetContainerProps["base"];
12
+ children?: ReactNode;
13
+ data?: WebWidgetContainerProps["data"];
14
+ import?: WebWidgetContainerProps["import"];
15
+ loader: Loader;
16
+ loading?: WebWidgetContainerProps["loading"];
17
+ name?: WebWidgetContainerProps["name"];
18
+ recovering: WebWidgetContainerProps["recovering"];
19
+ renderTarget?: WebWidgetContainerProps["renderTarget"];
20
+ }
21
+ declare function WebWidget({ children, loader, ...props }: WebWidgetProps): react.FunctionComponentElement<any>;
22
+ interface DefineWebWidgetOptions {
23
+ base?: WebWidgetContainerProps["base"];
24
+ import?: WebWidgetContainerProps["import"];
25
+ loading?: WebWidgetContainerProps["loading"];
26
+ name?: WebWidgetContainerProps["name"];
27
+ recovering?: WebWidgetContainerProps["recovering"];
28
+ renderTarget?: WebWidgetContainerProps["renderTarget"];
29
+ }
30
+ interface WebWidgetSuspenseProps {
31
+ children?: ReactNode;
32
+ clientOnly?: boolean;
33
+ fallback?: ReactNode;
34
+ }
35
+ declare function defineWebWidget(loader: Loader, options: DefineWebWidgetOptions): ({ children, clientOnly, fallback, ...data }: WebWidgetSuspenseProps) => react.FunctionComponentElement<react.SuspenseProps>;
6
36
 
7
37
  declare const render: (context: _web_widget_schema.ServerWidgetRenderContext<unknown> | _web_widget_schema.ServerRouteRenderContext<unknown, Record<string, string>>) => Promise<string | ReadableStream<any>>;
8
38
 
9
- export { render };
39
+ export { DefineWebWidgetOptions, WebWidget, WebWidgetProps, WebWidgetSuspenseProps, __ENV__, WebWidget as default, defineWebWidget, render };
@@ -1,168 +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}`);
79
- }
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
- if (!base) {
93
- throw new Error(`Missing base`);
39
+ function WebWidget(_a) {
40
+ var _b = _a, {
41
+ children,
42
+ loader
43
+ } = _b, props = __objRest(_b, [
44
+ "children",
45
+ "loader"
46
+ ]);
47
+ if (props.recovering && !loader) {
48
+ throw new TypeError(`Missing loader.`);
94
49
  }
95
50
  if (children) {
96
- throw new Error(`No support for 'children'`);
97
- }
98
- if (recovering && !loader) {
99
- throw new Error(`Missing loader`);
51
+ throw new TypeError(`No support children.`);
100
52
  }
101
- const WebWidgetClientFactory = lazy(async () => {
102
- let innerHTML = "";
103
- if (__ENV__.server && recovering && loader) {
104
- innerHTML = await renderServerWidget(loader, data);
105
- }
106
- return {
107
- default: function WebWidgetClientFactory2() {
108
- return /* @__PURE__ */ jsx(
109
- WebWidgetClient,
110
- {
111
- ...{
112
- base,
113
- data,
114
- import: url,
115
- loading,
116
- name,
117
- innerHTML,
118
- recovering
119
- }
120
- }
121
- );
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();
122
64
  }
123
- };
124
- });
125
- 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
+ );
126
76
  }
127
- function defineWebWidget(loader, base, { loading, name, recovering = true } = {}) {
128
- const url = getFilename(loader);
129
- return function WebWidgetFactory({
130
- children,
131
- fallback,
132
- ...data
133
- }) {
134
- return /* @__PURE__ */ jsx(
135
- WebWidget,
136
- {
137
- ...{
138
- base,
139
- data,
140
- fallback,
141
- import: url,
142
- loader,
143
- loading,
144
- name,
145
- recovering
146
- },
147
- children
148
- }
149
- );
77
+ function defineWebWidget(loader, options) {
78
+ options.renderTarget = "light";
79
+ return function WebWidgetSuspense(_a) {
80
+ var _b = _a, {
81
+ children,
82
+ clientOnly = !options.recovering,
83
+ fallback
84
+ } = _b, data = __objRest(_b, [
85
+ "children",
86
+ "clientOnly",
87
+ "fallback"
88
+ ]);
89
+ return createElement(Suspense, {
90
+ fallback,
91
+ children: createElement(WebWidget, __spreadProps(__spreadValues({}, options), {
92
+ children,
93
+ data,
94
+ loader,
95
+ recovering: !clientOnly
96
+ }))
97
+ });
150
98
  };
151
99
  }
152
- function defineClient(loader, base, { loading, name } = {}) {
153
- return defineWebWidget(loader, base, {
154
- loading,
155
- name,
156
- recovering: true
157
- });
158
- }
159
- function defineClientOnly(loader, base, { loading, name } = {}) {
160
- return defineWebWidget(loader, base, {
161
- loading,
162
- name,
163
- recovering: false
164
- });
165
- }
166
100
 
167
101
  // src/server.ts
168
102
  import { createElement as createElement2 } from "react";
@@ -183,12 +117,8 @@ var render = defineRender(async (context, component, props) => {
183
117
  });
184
118
  export {
185
119
  WebWidget,
186
- WebWidgetClient,
187
120
  __ENV__,
188
121
  WebWidget as default,
189
- defineClient,
190
- defineClientOnly,
191
122
  defineWebWidget,
192
- render,
193
- renderServerWidget
123
+ render
194
124
  };
package/globals.d.ts CHANGED
@@ -1,11 +1,30 @@
1
- import type { ReactNode } from "react";
1
+ import type { ReactNode, ComponentProps } from "react";
2
2
 
3
3
  type _IntrinsicAttributes = IntrinsicAttributes;
4
4
 
5
5
  declare namespace JSX {
6
6
  interface IntrinsicAttributes extends _IntrinsicAttributes {
7
7
  as?: "web-widget" | "web-widget:server" | "web-widget:client" | any;
8
+ clientOnly?: boolean;
8
9
  loading?: "lazy" | any;
9
10
  fallback?: ReactNode;
10
11
  }
11
12
  }
13
+
14
+ interface ReactWidgetComponent extends ComponentProps<any> {
15
+ (props: {
16
+ children?: ReactNode;
17
+ clientOnly?: boolean;
18
+ fallback?: ReactNode;
19
+ }): ReactNode;
20
+ }
21
+
22
+ declare module "*.widget.jsx" {
23
+ const reactWidgetComponent: ReactWidgetComponent;
24
+ export default reactWidgetComponent;
25
+ }
26
+
27
+ declare module "*.widget.tsx" {
28
+ const reactWidgetComponent: ReactWidgetComponent;
29
+ export default reactWidgetComponent;
30
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@web-widget/react",
3
- "version": "0.0.4",
3
+ "version": "0.0.6",
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.8",
32
+ "@web-widget/web-widget": "1.0.0-alpha.6"
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,34 +0,0 @@
1
- import { PluginPass } from '@babel/core';
2
- import { Visitor } from '@babel/traverse';
3
-
4
- /**
5
- * This adds web-widget source path to JSX tags.
6
- *
7
- * == JSX Literals ==
8
- *
9
- * import MyComponent from "../widgets/my-component.jsx";
10
- * ...
11
- * <MyComponent as="web-widget" title="My component" />
12
- *
13
- * becomes:
14
- *
15
- * import { defineWebWidget } from "@web-widget/react/web-widget";
16
- * const MyComponent = defineWebWidget(() => import("../widgets/my-component.jsx"), "/routes/", {
17
- * name: "MyComponent",
18
- * recovering: true
19
- * });
20
- * ...
21
- * <MyComponent title="My component" />
22
- */
23
-
24
- type Config = {
25
- base: string;
26
- root: string;
27
- isServer: boolean;
28
- };
29
- declare const _default: (api: object, options: Record<string, any> | null | undefined, dirname: string) => {
30
- name: string;
31
- visitor: Visitor<PluginPass>;
32
- };
33
-
34
- export { Config, _default as default };
@@ -1,132 +0,0 @@
1
- // src/babel-plugin.ts
2
- import { addNamed } from "@babel/helper-module-imports";
3
- import { declare } from "@babel/helper-plugin-utils";
4
- import { types as t } from "@babel/core";
5
- var TAGNAME = "web-widget";
6
- function createWebWidgetVariableDeclaration(definer, component, source, base, options) {
7
- const getType = (object) => Object.prototype.toString.call(object).slice(8, -1).toLocaleLowerCase();
8
- return t.variableDeclaration("const", [
9
- t.variableDeclarator(
10
- t.identifier(component),
11
- t.callExpression(t.identifier(definer), [
12
- t.arrowFunctionExpression(
13
- [],
14
- t.callExpression(t.import(), [t.stringLiteral(source)])
15
- ),
16
- t.stringLiteral(base),
17
- t.objectExpression(
18
- Object.keys(options).map((key) => {
19
- const value = options[key];
20
- const type = getType(value);
21
- switch (type) {
22
- case "string":
23
- return t.objectProperty(
24
- t.identifier(key),
25
- t.stringLiteral(value)
26
- );
27
- case "number":
28
- return t.objectProperty(
29
- t.identifier(key),
30
- t.numericLiteral(value)
31
- );
32
- case "boolean":
33
- return t.objectProperty(
34
- t.identifier(key),
35
- t.booleanLiteral(value)
36
- );
37
- case "null":
38
- return t.objectProperty(t.identifier(key), t.nullLiteral());
39
- }
40
- throw new Error(`Type not supported: ${key}=${value}`);
41
- })
42
- )
43
- ])
44
- )
45
- ]);
46
- }
47
- var babel_plugin_default = declare((api) => {
48
- api.assertVersion(7);
49
- let config;
50
- const visitor = {
51
- Program: {
52
- enter(path, { opts }) {
53
- config = opts;
54
- }
55
- },
56
- JSXOpeningElement(path, state) {
57
- if (!state.filename) {
58
- return;
59
- }
60
- const name = path.node.name;
61
- let bindingName;
62
- if (t.isJSXIdentifier(name)) {
63
- bindingName = name.name;
64
- } else if (t.isJSXMemberExpression(name)) {
65
- let object = name.object;
66
- while (t.isJSXMemberExpression(object)) {
67
- object = object.object;
68
- }
69
- bindingName = object.name;
70
- } else if (t.isJSXNamespacedName(name)) {
71
- bindingName = name.namespace.name;
72
- } else {
73
- return;
74
- }
75
- const binding = path.scope.getBinding(bindingName);
76
- if (binding && t.isImportDeclaration(binding.path.parent)) {
77
- const container = path.container;
78
- if (!t.isJSXElement(container)) {
79
- return;
80
- }
81
- if (!t.isJSXIdentifier(container.openingElement.name)) {
82
- return;
83
- }
84
- const attributes = container.openingElement.attributes;
85
- const widgetAttr = attributes.find(
86
- (attr) => t.isJSXAttribute(attr) && attr.name.name === "as" && t.isStringLiteral(attr.value) && attr.value.value.startsWith(TAGNAME)
87
- );
88
- if (!widgetAttr) {
89
- return;
90
- }
91
- const mode = t.isStringLiteral(widgetAttr.value) ? widgetAttr.value.value.replace(TAGNAME + ":", "") : "";
92
- const loadingAttr = attributes.find(
93
- (attr) => t.isJSXAttribute(attr) && attr.name.name === "loading"
94
- ) || void 0;
95
- container.openingElement.attributes = container.openingElement.attributes.filter(
96
- (attr) => attr !== widgetAttr && attr !== loadingAttr
97
- );
98
- const options = {
99
- name: container.openingElement.name.name,
100
- recovering: config.isServer && mode !== "client"
101
- };
102
- if (loadingAttr && loadingAttr.value && t.isStringLiteral(loadingAttr.value)) {
103
- options.loading = loadingAttr.value.value;
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 base = config.base;
113
- binding.path.parentPath?.replaceWith(
114
- createWebWidgetVariableDeclaration(
115
- importName.name,
116
- container.openingElement.name.name,
117
- source,
118
- base,
119
- options
120
- )
121
- );
122
- }
123
- }
124
- };
125
- return {
126
- name: "@web-widget/react:web-widget",
127
- visitor
128
- };
129
- });
130
- export {
131
- babel_plugin_default as default
132
- };
@@ -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,60 +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;
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
- loading?: string;
49
- name?: string;
50
- recovering?: boolean;
51
- }
52
- declare function defineWebWidget(loader: Loader, base: string, { loading, name, recovering }?: DefineWebWidgetOptions): ({ children, fallback, ...data }: WebWidgetFactoryProps) => react_jsx_runtime.JSX.Element;
53
- interface ClientOptions {
54
- loading?: "lazy";
55
- name?: string;
56
- }
57
- declare function defineClient(loader: Loader, base: string, { loading, name }?: ClientOptions): ({ children, fallback, ...data }: WebWidgetFactoryProps) => react_jsx_runtime.JSX.Element;
58
- declare function defineClientOnly(loader: Loader, base: string, { loading, name }?: ClientOptions): ({ children, fallback, ...data }: WebWidgetFactoryProps) => react_jsx_runtime.JSX.Element;
59
-
60
- export { 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 };