@web-widget/react 2.3.1 → 3.0.0-beta.2
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/chunk-VQFEYZQS.js +131 -0
- package/dist/components-BdC3VZlV.d.ts +104 -0
- package/dist/react.adapter.client.d.ts +9 -0
- package/dist/{react.client.js → react.adapter.client.js} +10 -10
- package/dist/{react.server.d.ts → react.adapter.server.d.ts} +4 -5
- package/dist/{react.server.js → react.adapter.server.js} +17 -14
- package/dist/react.d.ts +2 -0
- package/dist/react.js +0 -0
- package/globals.d.ts +30 -27
- package/package.json +31 -20
- package/dist/chunk-RYJ3BJDY.js +0 -69
- package/dist/components-BlwPaPdf.d.ts +0 -30
- package/dist/react.client.d.ts +0 -10
- package/dist/vite.d.ts +0 -9
- package/dist/vite.js +0 -43
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
// src/components.ts
|
|
2
|
+
import { WebWidgetRenderer } from "@web-widget/web-widget";
|
|
3
|
+
import {
|
|
4
|
+
Component,
|
|
5
|
+
Fragment,
|
|
6
|
+
Suspense,
|
|
7
|
+
createElement,
|
|
8
|
+
isValidElement,
|
|
9
|
+
use,
|
|
10
|
+
memo
|
|
11
|
+
} from "react";
|
|
12
|
+
var renderWebWidget = function({
|
|
13
|
+
children,
|
|
14
|
+
loader,
|
|
15
|
+
...props
|
|
16
|
+
}) {
|
|
17
|
+
if (!loader) {
|
|
18
|
+
throw new TypeError(`Missing loader.`);
|
|
19
|
+
}
|
|
20
|
+
if (children) {
|
|
21
|
+
throw new TypeError(`Children not supported.`);
|
|
22
|
+
}
|
|
23
|
+
const widget = new WebWidgetRenderer(loader, {
|
|
24
|
+
...props,
|
|
25
|
+
// TODO children
|
|
26
|
+
children: ""
|
|
27
|
+
});
|
|
28
|
+
const localName = widget.localName;
|
|
29
|
+
const attributes = widget.attributes;
|
|
30
|
+
const innerHTML = widget.renderInnerHTMLToString().catch(
|
|
31
|
+
(err) => err instanceof Error ? err : new Error(String(err))
|
|
32
|
+
);
|
|
33
|
+
return {
|
|
34
|
+
localName,
|
|
35
|
+
attributes,
|
|
36
|
+
innerHTML
|
|
37
|
+
};
|
|
38
|
+
};
|
|
39
|
+
function WebWidget({
|
|
40
|
+
localName,
|
|
41
|
+
attributes,
|
|
42
|
+
innerHTML,
|
|
43
|
+
errorFallback
|
|
44
|
+
}) {
|
|
45
|
+
const html = use(innerHTML);
|
|
46
|
+
if (html instanceof Error) {
|
|
47
|
+
console.error("[ReactWidget] Rendering error:", html);
|
|
48
|
+
return createElement(Fragment, null, errorFallback);
|
|
49
|
+
}
|
|
50
|
+
return createElement(localName, {
|
|
51
|
+
...attributes,
|
|
52
|
+
dangerouslySetInnerHTML: { __html: html },
|
|
53
|
+
// NOTE: Since the innerHTML property of a widget
|
|
54
|
+
// will inevitably differ between the server and the client,
|
|
55
|
+
// this turns off hydration mismatch warnings.
|
|
56
|
+
suppressHydrationWarning: true
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
function resolveFallback(fallback) {
|
|
60
|
+
var _a;
|
|
61
|
+
if (fallback !== null && typeof fallback === "object" && !isValidElement(fallback) && !Array.isArray(fallback) && ("pending" in fallback || "error" in fallback)) {
|
|
62
|
+
const obj = fallback;
|
|
63
|
+
return {
|
|
64
|
+
pendingFallback: obj.pending,
|
|
65
|
+
errorFallback: (_a = obj.error) != null ? _a : obj.pending
|
|
66
|
+
};
|
|
67
|
+
}
|
|
68
|
+
return {
|
|
69
|
+
pendingFallback: fallback,
|
|
70
|
+
errorFallback: fallback
|
|
71
|
+
};
|
|
72
|
+
}
|
|
73
|
+
var WidgetErrorBoundary = class extends Component {
|
|
74
|
+
constructor() {
|
|
75
|
+
super(...arguments);
|
|
76
|
+
this.state = { hasError: false };
|
|
77
|
+
}
|
|
78
|
+
static getDerivedStateFromError() {
|
|
79
|
+
return { hasError: true };
|
|
80
|
+
}
|
|
81
|
+
componentDidCatch(error) {
|
|
82
|
+
console.error("[ReactWidget] Rendering error:", error);
|
|
83
|
+
}
|
|
84
|
+
render() {
|
|
85
|
+
var _a;
|
|
86
|
+
if (this.state.hasError) {
|
|
87
|
+
return (_a = this.props.fallback) != null ? _a : null;
|
|
88
|
+
}
|
|
89
|
+
return this.props.children;
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
function container(loader, options = {}) {
|
|
93
|
+
return memo(function ReactWidget({
|
|
94
|
+
children,
|
|
95
|
+
widget: {
|
|
96
|
+
fallback,
|
|
97
|
+
loading = ((_a) => (_a = options.loading) != null ? _a : "lazy")(),
|
|
98
|
+
serverOnly,
|
|
99
|
+
clientOnly
|
|
100
|
+
} = {},
|
|
101
|
+
...data
|
|
102
|
+
}) {
|
|
103
|
+
var _a2;
|
|
104
|
+
const renderStage = serverOnly ? "server" : clientOnly ? "client" : options.renderStage;
|
|
105
|
+
const { pendingFallback, errorFallback } = resolveFallback(fallback);
|
|
106
|
+
return createElement(
|
|
107
|
+
WidgetErrorBoundary,
|
|
108
|
+
{ fallback: errorFallback },
|
|
109
|
+
createElement(Suspense, {
|
|
110
|
+
fallback: pendingFallback,
|
|
111
|
+
children: createElement(WebWidget, {
|
|
112
|
+
errorFallback,
|
|
113
|
+
...renderWebWidget({
|
|
114
|
+
...options,
|
|
115
|
+
children,
|
|
116
|
+
data,
|
|
117
|
+
loader,
|
|
118
|
+
loading,
|
|
119
|
+
renderStage,
|
|
120
|
+
renderTarget: (_a2 = options.renderTarget) != null ? _a2 : "light"
|
|
121
|
+
})
|
|
122
|
+
})
|
|
123
|
+
})
|
|
124
|
+
);
|
|
125
|
+
});
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
export {
|
|
129
|
+
resolveFallback,
|
|
130
|
+
container
|
|
131
|
+
};
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import { WebWidgetRendererOptions, Loader } from '@web-widget/web-widget';
|
|
2
|
+
import { ExtractWidgetProps } from '@web-widget/schema';
|
|
3
|
+
import { FunctionComponent, ReactNode } from 'react';
|
|
4
|
+
|
|
5
|
+
interface ReactWidgetComponent<T> extends FunctionComponent<T & ReactWidgetProps> {
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* Extract the props type `P` from a widget module's default export.
|
|
9
|
+
*
|
|
10
|
+
* Handles multiple component paradigms so that cross-framework widgets
|
|
11
|
+
* (e.g. Vue imported into React) retain their props types:
|
|
12
|
+
*
|
|
13
|
+
* - React: `ComponentType<P>`, `FunctionComponent<P>`, etc.
|
|
14
|
+
* - Vue: components expose `$props` via a constructor signature.
|
|
15
|
+
* - Fallback: `unknown` when no pattern matches.
|
|
16
|
+
*/
|
|
17
|
+
interface WebWidgetProps {
|
|
18
|
+
base?: WebWidgetRendererOptions['base'];
|
|
19
|
+
children?: ReactNode;
|
|
20
|
+
data?: WebWidgetRendererOptions['data'];
|
|
21
|
+
import?: WebWidgetRendererOptions['import'];
|
|
22
|
+
inactive?: WebWidgetRendererOptions['inactive'];
|
|
23
|
+
loader: Loader;
|
|
24
|
+
meta?: WebWidgetRendererOptions['meta'];
|
|
25
|
+
loading?: WebWidgetRendererOptions['loading'];
|
|
26
|
+
name?: WebWidgetRendererOptions['name'];
|
|
27
|
+
renderStage?: WebWidgetRendererOptions['renderStage'];
|
|
28
|
+
renderTarget?: WebWidgetRendererOptions['renderTarget'];
|
|
29
|
+
}
|
|
30
|
+
type DefineWebWidgetOptions = Partial<Pick<WebWidgetRendererOptions, 'base' | 'import' | 'loading' | 'name' | 'renderStage' | 'renderTarget'>>;
|
|
31
|
+
type WidgetFallback = ReactNode | {
|
|
32
|
+
pending?: ReactNode;
|
|
33
|
+
error?: ReactNode;
|
|
34
|
+
};
|
|
35
|
+
/**
|
|
36
|
+
* Resolve a WidgetFallback into separate pending and error UI.
|
|
37
|
+
* - `ReactNode`: used for both pending and error.
|
|
38
|
+
* - `{ pending?, error? }`: error defaults to pending if omitted.
|
|
39
|
+
*/
|
|
40
|
+
declare function resolveFallback(fallback: WidgetFallback | undefined): {
|
|
41
|
+
pendingFallback: ReactNode;
|
|
42
|
+
errorFallback: ReactNode;
|
|
43
|
+
};
|
|
44
|
+
type WidgetContainerConfig = {
|
|
45
|
+
/**
|
|
46
|
+
* Fallback UI for loading and error states.
|
|
47
|
+
*
|
|
48
|
+
* Only effective during server-side rendering: loading UI shows while the
|
|
49
|
+
* widget module renders; error UI shows if rendering fails. Both are
|
|
50
|
+
* serialized into the HTML stream — no client-side retry exists in the
|
|
51
|
+
* islands architecture.
|
|
52
|
+
*
|
|
53
|
+
* - `ReactNode` — used for both pending (Suspense) and error (ErrorBoundary).
|
|
54
|
+
* - `{ pending?, error? }` — specify independently; `error` defaults to `pending`.
|
|
55
|
+
*
|
|
56
|
+
* @example
|
|
57
|
+
* // Simple: same UI for both states
|
|
58
|
+
* <Widget widget={{ fallback: <Spinner /> }} />
|
|
59
|
+
*
|
|
60
|
+
* // Differentiated: separate pending and error UI
|
|
61
|
+
* <Widget widget={{ fallback: { pending: <Spinner />, error: <ErrorUI /> } }} />
|
|
62
|
+
*/
|
|
63
|
+
fallback?: WidgetFallback;
|
|
64
|
+
/** Client-side module loading strategy: `'lazy'` loads on first render, `'eager'` on module parse, `'idle'` on browser idle. */
|
|
65
|
+
loading?: WebWidgetRendererOptions['loading'];
|
|
66
|
+
/** Widget renders only on the server (SSR), producing static HTML with no client-side mount. Mutually exclusive with `clientOnly`. */
|
|
67
|
+
serverOnly?: true;
|
|
68
|
+
/** Widget renders only on the client, producing no server HTML (empty placeholder until client mount). Mutually exclusive with `serverOnly`. */
|
|
69
|
+
clientOnly?: true;
|
|
70
|
+
};
|
|
71
|
+
interface ReactWidgetProps {
|
|
72
|
+
children?: ReactNode;
|
|
73
|
+
/** Container configuration, isolated from widget's own props */
|
|
74
|
+
widget?: WidgetContainerConfig;
|
|
75
|
+
}
|
|
76
|
+
/**
|
|
77
|
+
* Container function (WebWidgetAdapter protocol).
|
|
78
|
+
*
|
|
79
|
+
* Wraps a widget module loader into a React component with full props
|
|
80
|
+
* type inference from the source module's default export.
|
|
81
|
+
*
|
|
82
|
+
* For same-framework imports (React → React), props types are inferred
|
|
83
|
+
* automatically. Cross-framework imports use explicit `container()` calls;
|
|
84
|
+
* sources without a structural props contract can use `container<Props>()`.
|
|
85
|
+
*
|
|
86
|
+
* @example
|
|
87
|
+
* ```tsx
|
|
88
|
+
* import { container } from '@web-widget/react/adapter';
|
|
89
|
+
*
|
|
90
|
+
* // Same-framework: full type inference
|
|
91
|
+
* const Counter = container(() => import('./Counter@widget.tsx'));
|
|
92
|
+
* // ^? ReactWidgetComponent<{ count: number }>
|
|
93
|
+
*
|
|
94
|
+
* <Counter count={42} /> // type-checked: ✓
|
|
95
|
+
*
|
|
96
|
+
* // Cross-framework: explicit container() recommended
|
|
97
|
+
* const VueCounter = container(() => import('./Counter@widget.vue'));
|
|
98
|
+
* <VueCounter count={42} /> // type-checked: ✓
|
|
99
|
+
* ```
|
|
100
|
+
*/
|
|
101
|
+
declare function container<M>(loader: () => Promise<M>, options?: DefineWebWidgetOptions): ReactWidgetComponent<ExtractWidgetProps<M>>;
|
|
102
|
+
declare function container<Props>(loader: Loader, options?: DefineWebWidgetOptions): ReactWidgetComponent<Props>;
|
|
103
|
+
|
|
104
|
+
export { type DefineWebWidgetOptions as D, type ReactWidgetComponent as R, type WebWidgetProps as W, type ReactWidgetProps as a, type WidgetContainerConfig as b, type WidgetFallback as c, container as d, resolveFallback as r };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as _web_widget_schema from '@web-widget/schema';
|
|
2
|
+
import { FunctionComponent } from 'react';
|
|
3
|
+
export * from '@web-widget/helpers';
|
|
4
|
+
export { D as DefineWebWidgetOptions, R as ReactWidgetComponent, a as ReactWidgetProps, W as WebWidgetProps, b as WidgetContainerConfig, c as WidgetFallback, d as container, r as resolveFallback } from './components-BdC3VZlV.js';
|
|
5
|
+
import '@web-widget/web-widget';
|
|
6
|
+
|
|
7
|
+
declare const render: _web_widget_schema.ClientRender<FunctionComponent<{}>, unknown, _web_widget_schema.ClientRenderOptions, void | _web_widget_schema.ClientRenderResult<unknown>>;
|
|
8
|
+
|
|
9
|
+
export { render };
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import {
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
container,
|
|
3
|
+
resolveFallback
|
|
4
|
+
} from "./chunk-VQFEYZQS.js";
|
|
4
5
|
|
|
5
|
-
// src/client.ts
|
|
6
|
+
// src/adapter.client.ts
|
|
6
7
|
import { defineClientRender } from "@web-widget/helpers";
|
|
7
8
|
import { createElement, StrictMode } from "react";
|
|
8
9
|
import { createRoot, hydrateRoot } from "react-dom/client";
|
|
9
10
|
export * from "@web-widget/helpers";
|
|
10
|
-
import { useWidgetSyncState } from "@web-widget/helpers/state";
|
|
11
11
|
var render = defineClientRender(
|
|
12
|
-
async (component, data, { recovering, container }) => {
|
|
12
|
+
async (component, data, { recovering, container: container2 }) => {
|
|
13
13
|
data = data != null ? data : {};
|
|
14
14
|
if (!component) {
|
|
15
15
|
throw new TypeError(`Missing component.`);
|
|
16
16
|
}
|
|
17
|
-
if (!
|
|
17
|
+
if (!container2) {
|
|
18
18
|
throw new Error(`Missing container.`);
|
|
19
19
|
}
|
|
20
20
|
let root;
|
|
@@ -24,9 +24,9 @@ var render = defineClientRender(
|
|
|
24
24
|
let vNode = isAsyncFunction ? await component(data) : createElement(component, data);
|
|
25
25
|
vNode = createElement(StrictMode, null, vNode);
|
|
26
26
|
if (recovering) {
|
|
27
|
-
root = hydrateRoot(
|
|
27
|
+
root = hydrateRoot(container2, vNode);
|
|
28
28
|
} else {
|
|
29
|
-
root = createRoot(
|
|
29
|
+
root = createRoot(container2);
|
|
30
30
|
root.render(vNode);
|
|
31
31
|
}
|
|
32
32
|
},
|
|
@@ -38,7 +38,7 @@ var render = defineClientRender(
|
|
|
38
38
|
}
|
|
39
39
|
);
|
|
40
40
|
export {
|
|
41
|
-
|
|
41
|
+
container,
|
|
42
42
|
render,
|
|
43
|
-
|
|
43
|
+
resolveFallback
|
|
44
44
|
};
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
export * from '@web-widget/helpers';
|
|
1
|
+
import * as _web_widget_schema from '@web-widget/schema';
|
|
3
2
|
import { FunctionComponent } from 'react';
|
|
4
3
|
import { PrerenderOptions } from 'react-dom/static';
|
|
5
|
-
export
|
|
6
|
-
export { D as DefineWebWidgetOptions, R as ReactWidgetComponent, W as WebWidgetProps,
|
|
4
|
+
export * from '@web-widget/helpers';
|
|
5
|
+
export { D as DefineWebWidgetOptions, R as ReactWidgetComponent, a as ReactWidgetProps, W as WebWidgetProps, b as WidgetContainerConfig, c as WidgetFallback, d as container, r as resolveFallback } from './components-BdC3VZlV.js';
|
|
7
6
|
import { RenderToReadableStreamOptions } from 'react-dom/server';
|
|
8
7
|
import '@web-widget/web-widget';
|
|
9
8
|
|
|
@@ -26,6 +25,6 @@ type StreamOptions = {
|
|
|
26
25
|
interface ReactRenderOptions {
|
|
27
26
|
react?: StreamOptions;
|
|
28
27
|
}
|
|
29
|
-
declare const render:
|
|
28
|
+
declare const render: _web_widget_schema.ServerRender<FunctionComponent<{}>, unknown, _web_widget_schema.ServerRenderOptions, _web_widget_schema.ServerRenderResult>;
|
|
30
29
|
|
|
31
30
|
export { type ReactRenderOptions, render };
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import {
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
container,
|
|
3
|
+
resolveFallback
|
|
4
|
+
} from "./chunk-VQFEYZQS.js";
|
|
4
5
|
|
|
5
|
-
// src/server.ts
|
|
6
|
+
// src/adapter.server.ts
|
|
6
7
|
import { defineServerRender } from "@web-widget/helpers";
|
|
7
8
|
import { createElement, StrictMode } from "react";
|
|
8
9
|
|
|
@@ -26,9 +27,8 @@ async function readableStreamToString(readableStream) {
|
|
|
26
27
|
return result;
|
|
27
28
|
}
|
|
28
29
|
|
|
29
|
-
// src/server.ts
|
|
30
|
+
// src/adapter.server.ts
|
|
30
31
|
export * from "@web-widget/helpers";
|
|
31
|
-
import { useWidgetSyncState } from "@web-widget/helpers/state";
|
|
32
32
|
var DEFAULT_TIMEOUT_MS = 1e3 * 10;
|
|
33
33
|
var render = defineServerRender(
|
|
34
34
|
async (component, data, { progressive, react }) => {
|
|
@@ -37,32 +37,35 @@ var render = defineServerRender(
|
|
|
37
37
|
throw new TypeError(`Missing component.`);
|
|
38
38
|
}
|
|
39
39
|
const reactRenderOptions = Object.create(react != null ? react : null);
|
|
40
|
-
let error;
|
|
41
40
|
const { onError, awaitAllReady, signal } = reactRenderOptions;
|
|
42
41
|
reactRenderOptions.signal = signal != null ? signal : AbortSignal.timeout(DEFAULT_TIMEOUT_MS);
|
|
42
|
+
const preShellErrors = [];
|
|
43
|
+
let shellRendered = false;
|
|
43
44
|
reactRenderOptions.onError = (e, i) => {
|
|
44
|
-
|
|
45
|
-
onError == null ? void 0 : onError(e instanceof Error ? e : new Error(String(e)), i);
|
|
46
|
-
if (!onError && progressive && !awaitAllReady) {
|
|
45
|
+
if (shellRendered) {
|
|
47
46
|
console.error(e);
|
|
47
|
+
} else {
|
|
48
|
+
preShellErrors.push(e);
|
|
48
49
|
}
|
|
50
|
+
onError == null ? void 0 : onError(e instanceof Error ? e : new Error(String(e)), i);
|
|
49
51
|
};
|
|
50
52
|
const isAsyncFunction = Object.prototype.toString.call(component) === "[object AsyncFunction]";
|
|
51
53
|
let vNode = isAsyncFunction ? await component(data) : createElement(component, data);
|
|
52
54
|
vNode = createElement(StrictMode, null, vNode);
|
|
53
55
|
const renderMethod = progressive ? renderToReadableStream : renderToString;
|
|
54
56
|
const result = await renderMethod(vNode, reactRenderOptions);
|
|
57
|
+
shellRendered = true;
|
|
58
|
+
for (const e of preShellErrors) {
|
|
59
|
+
console.error(e);
|
|
60
|
+
}
|
|
55
61
|
if (progressive && awaitAllReady && "allReady" in result) {
|
|
56
62
|
await result.allReady;
|
|
57
63
|
}
|
|
58
|
-
if (error) {
|
|
59
|
-
throw error;
|
|
60
|
-
}
|
|
61
64
|
return result;
|
|
62
65
|
}
|
|
63
66
|
);
|
|
64
67
|
export {
|
|
65
|
-
|
|
68
|
+
container,
|
|
66
69
|
render,
|
|
67
|
-
|
|
70
|
+
resolveFallback
|
|
68
71
|
};
|
package/dist/react.d.ts
ADDED
package/dist/react.js
ADDED
|
File without changes
|
package/globals.d.ts
CHANGED
|
@@ -1,47 +1,50 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
type WebWidgetFallback = ReactNode | { pending?: ReactNode; error?: ReactNode };
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Container configuration, isolated from the widget's own props.
|
|
7
|
+
*/
|
|
8
|
+
type WidgetContainerConfig = {
|
|
9
|
+
/**
|
|
10
|
+
* Fallback UI for pending and error states.
|
|
11
|
+
*
|
|
12
|
+
* Only effective during server-side rendering: pending UI shows while the
|
|
13
|
+
* widget module renders; error UI shows if rendering fails. Both are
|
|
14
|
+
* serialized into the HTML stream — no client-side retry exists in the
|
|
15
|
+
* islands architecture.
|
|
16
|
+
*
|
|
17
|
+
* - `ReactNode` — used for both pending (Suspense) and error (ErrorBoundary).
|
|
18
|
+
* - `{ pending?, error? }` — specify independently; `error` defaults to `pending`.
|
|
19
|
+
*/
|
|
20
|
+
fallback?: WebWidgetFallback;
|
|
21
|
+
/** Client-side module loading strategy: `'lazy'` loads on first render, `'eager'` on module parse, `'idle'` on browser idle. */
|
|
22
|
+
loading?: 'lazy' | 'eager' | 'idle';
|
|
23
|
+
/** Widget renders only on the server (SSR), producing static HTML with no client-side mount. Mutually exclusive with `clientOnly`. */
|
|
24
|
+
serverOnly?: true;
|
|
25
|
+
/** Widget renders only on the client, producing no server HTML (empty placeholder until client mount). Mutually exclusive with `serverOnly`. */
|
|
26
|
+
clientOnly?: true;
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
interface ReactWidgetProps {
|
|
30
|
+
widget?: WidgetContainerConfig;
|
|
8
31
|
}
|
|
9
32
|
|
|
10
33
|
interface ReactWidgetComponent<T = unknown> extends ComponentProps<any> {
|
|
11
34
|
(
|
|
12
35
|
props: {
|
|
13
36
|
children?: ReactNode;
|
|
14
|
-
} &
|
|
37
|
+
} & ReactWidgetProps &
|
|
15
38
|
T
|
|
16
39
|
): ReactNode;
|
|
17
40
|
}
|
|
18
41
|
|
|
19
42
|
declare namespace JSX {
|
|
20
|
-
interface IntrinsicAttributes extends
|
|
43
|
+
interface IntrinsicAttributes extends ReactWidgetProps {
|
|
21
44
|
key?: Key | null | undefined;
|
|
22
45
|
}
|
|
23
46
|
}
|
|
24
47
|
|
|
25
|
-
declare module '*.widget.jsx' {
|
|
26
|
-
const reactWidgetComponent: ReactWidgetComponent;
|
|
27
|
-
export default reactWidgetComponent;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
declare module '*.widget.tsx' {
|
|
31
|
-
const reactWidgetComponent: ReactWidgetComponent;
|
|
32
|
-
export default reactWidgetComponent;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
declare module '*?as=jsx' {
|
|
36
|
-
const reactWidgetComponent: ReactWidgetComponent<any>;
|
|
37
|
-
export default reactWidgetComponent;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
declare module '*?as=tsx' {
|
|
41
|
-
const reactWidgetComponent: ReactWidgetComponent<any>;
|
|
42
|
-
export default reactWidgetComponent;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
48
|
declare module 'react-dom/server.edge' {
|
|
46
49
|
import type { ReactNode } from 'react';
|
|
47
50
|
import type {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@web-widget/react",
|
|
3
3
|
"description": "React adapter",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "3.0.0-beta.2",
|
|
5
5
|
"homepage": "https://github.com/web-widget/web-widget#readme",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -13,56 +13,66 @@
|
|
|
13
13
|
},
|
|
14
14
|
"license": "MIT",
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@
|
|
17
|
-
"@web-widget/
|
|
18
|
-
"@web-widget/
|
|
19
|
-
"@web-widget/vite-plugin": "2.3.1",
|
|
20
|
-
"@web-widget/web-widget": "2.3.1"
|
|
16
|
+
"@web-widget/helpers": "3.0.0-beta.2",
|
|
17
|
+
"@web-widget/schema": "3.0.0-beta.2",
|
|
18
|
+
"@web-widget/web-widget": "3.0.0-beta.2"
|
|
21
19
|
},
|
|
22
20
|
"devDependencies": {
|
|
21
|
+
"@types/jest": "^29.5.12",
|
|
23
22
|
"@types/react": "^19.2.14",
|
|
24
23
|
"@types/react-dom": "^19.2.3",
|
|
24
|
+
"jest": "^29.7.0",
|
|
25
25
|
"react": "^19.2.6",
|
|
26
26
|
"react-dom": "^19.2.6",
|
|
27
|
+
"ts-jest": "29.2.1",
|
|
27
28
|
"tsup": "^8.3.4",
|
|
28
|
-
"typescript": "^5.
|
|
29
|
+
"typescript": "^5.9.3",
|
|
29
30
|
"vite": "^8.0.12"
|
|
30
31
|
},
|
|
31
32
|
"exports": {
|
|
32
33
|
".": {
|
|
34
|
+
"types": "./dist/react.d.ts",
|
|
35
|
+
"default": "./dist/react.js"
|
|
36
|
+
},
|
|
37
|
+
"./adapter": {
|
|
33
38
|
"worker": {
|
|
34
|
-
"types": "./dist/react.server.d.ts",
|
|
35
|
-
"default": "./dist/react.server.js"
|
|
39
|
+
"types": "./dist/react.adapter.server.d.ts",
|
|
40
|
+
"default": "./dist/react.adapter.server.js"
|
|
36
41
|
},
|
|
37
42
|
"browser": {
|
|
38
|
-
"types": "./dist/react.client.d.ts",
|
|
39
|
-
"default": "./dist/react.client.js"
|
|
43
|
+
"types": "./dist/react.adapter.client.d.ts",
|
|
44
|
+
"default": "./dist/react.adapter.client.js"
|
|
40
45
|
},
|
|
41
46
|
"default": {
|
|
42
|
-
"types": "./dist/react.server.d.ts",
|
|
43
|
-
"default": "./dist/react.server.js"
|
|
47
|
+
"types": "./dist/react.adapter.server.d.ts",
|
|
48
|
+
"default": "./dist/react.adapter.server.js"
|
|
44
49
|
}
|
|
45
50
|
},
|
|
46
|
-
"./vite": {
|
|
47
|
-
"types": "./dist/vite.d.ts",
|
|
48
|
-
"default": "./dist/vite.js"
|
|
49
|
-
},
|
|
50
51
|
"./globals": {
|
|
51
52
|
"types": "./globals.d.ts"
|
|
52
53
|
}
|
|
53
54
|
},
|
|
55
|
+
"webWidgetAdapter": {
|
|
56
|
+
"version": "1.0.0",
|
|
57
|
+
"name": "react",
|
|
58
|
+
"extensions": [
|
|
59
|
+
".tsx",
|
|
60
|
+
".jsx"
|
|
61
|
+
],
|
|
62
|
+
"adapter": "./adapter"
|
|
63
|
+
},
|
|
54
64
|
"files": [
|
|
55
65
|
"dist",
|
|
56
66
|
"globals.d.ts"
|
|
57
67
|
],
|
|
58
68
|
"peerDependencies": {
|
|
59
69
|
"react": "^19.0.0",
|
|
60
|
-
"react-dom": "^19.0.0"
|
|
61
|
-
"vite": "^8.0.12"
|
|
70
|
+
"react-dom": "^19.0.0"
|
|
62
71
|
},
|
|
63
72
|
"publishConfig": {
|
|
64
73
|
"access": "public"
|
|
65
74
|
},
|
|
75
|
+
"sideEffects": false,
|
|
66
76
|
"type": "module",
|
|
67
77
|
"scripts": {
|
|
68
78
|
"build": "pnpm exec tsup",
|
|
@@ -70,6 +80,7 @@
|
|
|
70
80
|
"clean:node": "rm -rf node_modules",
|
|
71
81
|
"dev": "pnpm exec tsup --watch",
|
|
72
82
|
"lint": "eslint src",
|
|
73
|
-
"prebuild": "pnpm run clean:build"
|
|
83
|
+
"prebuild": "pnpm run clean:build",
|
|
84
|
+
"test": "jest"
|
|
74
85
|
}
|
|
75
86
|
}
|
package/dist/chunk-RYJ3BJDY.js
DELETED
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
// src/components.ts
|
|
2
|
-
import { WebWidgetRenderer } from "@web-widget/web-widget";
|
|
3
|
-
import { Suspense, createElement, use, memo } from "react";
|
|
4
|
-
var renderWebWidget = function({
|
|
5
|
-
children,
|
|
6
|
-
loader,
|
|
7
|
-
...props
|
|
8
|
-
}) {
|
|
9
|
-
if (!loader) {
|
|
10
|
-
throw new TypeError(`Missing loader.`);
|
|
11
|
-
}
|
|
12
|
-
if (children) {
|
|
13
|
-
throw new TypeError(`Children not supported.`);
|
|
14
|
-
}
|
|
15
|
-
const widget = new WebWidgetRenderer(loader, {
|
|
16
|
-
...props,
|
|
17
|
-
// TODO children
|
|
18
|
-
children: ""
|
|
19
|
-
});
|
|
20
|
-
const localName = widget.localName;
|
|
21
|
-
const attributes = widget.attributes;
|
|
22
|
-
const innerHTML = widget.renderInnerHTMLToString();
|
|
23
|
-
return {
|
|
24
|
-
localName,
|
|
25
|
-
attributes,
|
|
26
|
-
innerHTML
|
|
27
|
-
};
|
|
28
|
-
};
|
|
29
|
-
function WebWidget({ localName, attributes, innerHTML }) {
|
|
30
|
-
const html = use(innerHTML);
|
|
31
|
-
return createElement(localName, {
|
|
32
|
-
...attributes,
|
|
33
|
-
dangerouslySetInnerHTML: { __html: html },
|
|
34
|
-
// NOTE: Since the innerHTML property of a widget
|
|
35
|
-
// will inevitably differ between the server and the client,
|
|
36
|
-
// this turns off hydration mismatch warnings.
|
|
37
|
-
suppressHydrationWarning: true
|
|
38
|
-
});
|
|
39
|
-
}
|
|
40
|
-
function defineWebWidget(loader, options) {
|
|
41
|
-
return memo(function WebWidgetSuspense({
|
|
42
|
-
children,
|
|
43
|
-
fallback,
|
|
44
|
-
experimental_loading = ((_a) => (_a = options.loading) != null ? _a : "lazy")(),
|
|
45
|
-
renderStage = options.renderStage,
|
|
46
|
-
experimental_renderTarget = ((_b) => (_b = options.renderTarget) != null ? _b : "light")(),
|
|
47
|
-
...data
|
|
48
|
-
}) {
|
|
49
|
-
return createElement(Suspense, {
|
|
50
|
-
fallback,
|
|
51
|
-
children: createElement(
|
|
52
|
-
WebWidget,
|
|
53
|
-
renderWebWidget({
|
|
54
|
-
...options,
|
|
55
|
-
children,
|
|
56
|
-
data,
|
|
57
|
-
loader,
|
|
58
|
-
loading: experimental_loading,
|
|
59
|
-
renderStage,
|
|
60
|
-
renderTarget: experimental_renderTarget
|
|
61
|
-
})
|
|
62
|
-
)
|
|
63
|
-
});
|
|
64
|
-
});
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
export {
|
|
68
|
-
defineWebWidget
|
|
69
|
-
};
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import * as react from 'react';
|
|
2
|
-
import { FunctionComponent, ReactNode } from 'react';
|
|
3
|
-
import { WebWidgetRendererOptions, Loader } from '@web-widget/web-widget';
|
|
4
|
-
|
|
5
|
-
interface ReactWidgetComponent<T> extends FunctionComponent<T & WebWidgetSuspenseProps> {
|
|
6
|
-
}
|
|
7
|
-
interface WebWidgetProps {
|
|
8
|
-
base?: WebWidgetRendererOptions['base'];
|
|
9
|
-
children?: ReactNode;
|
|
10
|
-
data?: WebWidgetRendererOptions['data'];
|
|
11
|
-
import?: WebWidgetRendererOptions['import'];
|
|
12
|
-
inactive?: WebWidgetRendererOptions['inactive'];
|
|
13
|
-
loader: Loader;
|
|
14
|
-
meta?: WebWidgetRendererOptions['meta'];
|
|
15
|
-
loading?: WebWidgetRendererOptions['loading'];
|
|
16
|
-
name?: WebWidgetRendererOptions['name'];
|
|
17
|
-
renderStage?: WebWidgetRendererOptions['renderStage'];
|
|
18
|
-
renderTarget?: WebWidgetRendererOptions['renderTarget'];
|
|
19
|
-
}
|
|
20
|
-
type DefineWebWidgetOptions = Partial<Pick<WebWidgetRendererOptions, 'base' | 'import' | 'loading' | 'name' | 'renderStage' | 'renderTarget'>>;
|
|
21
|
-
interface WebWidgetSuspenseProps {
|
|
22
|
-
children?: ReactNode;
|
|
23
|
-
fallback?: ReactNode;
|
|
24
|
-
experimental_loading?: WebWidgetRendererOptions['loading'];
|
|
25
|
-
renderStage?: WebWidgetRendererOptions['renderStage'];
|
|
26
|
-
experimental_renderTarget?: WebWidgetRendererOptions['renderTarget'];
|
|
27
|
-
}
|
|
28
|
-
declare function defineWebWidget(loader: Loader, options: DefineWebWidgetOptions): react.NamedExoticComponent<WebWidgetSuspenseProps>;
|
|
29
|
-
|
|
30
|
-
export { type DefineWebWidgetOptions as D, type ReactWidgetComponent as R, type WebWidgetProps as W, type WebWidgetSuspenseProps as a, defineWebWidget as d };
|
package/dist/react.client.d.ts
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import * as _web_widget_helpers from '@web-widget/helpers';
|
|
2
|
-
export * from '@web-widget/helpers';
|
|
3
|
-
import { FunctionComponent } from 'react';
|
|
4
|
-
export { useWidgetSyncState as useWidgetState } from '@web-widget/helpers/state';
|
|
5
|
-
export { D as DefineWebWidgetOptions, R as ReactWidgetComponent, W as WebWidgetProps, a as WebWidgetSuspenseProps, d as defineWebWidget } from './components-BlwPaPdf.js';
|
|
6
|
-
import '@web-widget/web-widget';
|
|
7
|
-
|
|
8
|
-
declare const render: _web_widget_helpers.ClientRender<FunctionComponent<{}>, unknown, _web_widget_helpers.ClientRenderOptions, void | _web_widget_helpers.ClientRenderResult<unknown>>;
|
|
9
|
-
|
|
10
|
-
export { render };
|
package/dist/vite.d.ts
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import * as vite from 'vite';
|
|
2
|
-
import { WebWidgetUserConfig } from '@web-widget/vite-plugin';
|
|
3
|
-
|
|
4
|
-
interface ReactWebWidgetPluginOptions extends Partial<WebWidgetUserConfig> {
|
|
5
|
-
workspace?: string;
|
|
6
|
-
}
|
|
7
|
-
declare function reactWebWidgetPlugin(options?: ReactWebWidgetPluginOptions): vite.Plugin<any>[];
|
|
8
|
-
|
|
9
|
-
export { type ReactWebWidgetPluginOptions, reactWebWidgetPlugin as default };
|
package/dist/vite.js
DELETED
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
// src/vite.ts
|
|
2
|
-
import { webWidgetPlugin } from "@web-widget/vite-plugin";
|
|
3
|
-
import { posix } from "path";
|
|
4
|
-
import { normalizePath } from "@rollup/pluginutils";
|
|
5
|
-
function escapeRegExp(path) {
|
|
6
|
-
return path.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
|
|
7
|
-
}
|
|
8
|
-
function appendSlash(path) {
|
|
9
|
-
return path.endsWith(posix.sep) ? path : `${path}${posix.sep}`;
|
|
10
|
-
}
|
|
11
|
-
function reactWebWidgetPlugin(options) {
|
|
12
|
-
const {
|
|
13
|
-
provide = "@web-widget/react",
|
|
14
|
-
workspace = "",
|
|
15
|
-
export: exportWidget = {},
|
|
16
|
-
import: importWidget = {},
|
|
17
|
-
manifest
|
|
18
|
-
} = options != null ? options : {};
|
|
19
|
-
const workspacePattern = workspace ? escapeRegExp(normalizePath(appendSlash(workspace))) : workspace;
|
|
20
|
-
const widgetPattern = `[.@]widget`;
|
|
21
|
-
const modulesPattern = `[.@](?:route|widget)`;
|
|
22
|
-
const extensionPattern = `\\.(?:tsx|jsx)`;
|
|
23
|
-
return webWidgetPlugin({
|
|
24
|
-
manifest,
|
|
25
|
-
provide,
|
|
26
|
-
export: {
|
|
27
|
-
include: new RegExp(
|
|
28
|
-
`^${workspacePattern}[^?]*${modulesPattern}${extensionPattern}$`
|
|
29
|
-
),
|
|
30
|
-
...exportWidget
|
|
31
|
-
},
|
|
32
|
-
import: {
|
|
33
|
-
include: new RegExp(`^[^?]*${widgetPattern}\\.[^?]*$`),
|
|
34
|
-
includeImporter: new RegExp(
|
|
35
|
-
`^${workspacePattern}[^?]*${extensionPattern}$`
|
|
36
|
-
),
|
|
37
|
-
...importWidget
|
|
38
|
-
}
|
|
39
|
-
});
|
|
40
|
-
}
|
|
41
|
-
export {
|
|
42
|
-
reactWebWidgetPlugin as default
|
|
43
|
-
};
|