@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.
@@ -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
- defineWebWidget
3
- } from "./chunk-RYJ3BJDY.js";
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 (!container) {
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(container, vNode);
27
+ root = hydrateRoot(container2, vNode);
28
28
  } else {
29
- root = createRoot(container);
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
- defineWebWidget,
41
+ container,
42
42
  render,
43
- useWidgetSyncState as useWidgetState
43
+ resolveFallback
44
44
  };
@@ -1,9 +1,8 @@
1
- import * as _web_widget_helpers from '@web-widget/helpers';
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 { useWidgetSyncState as useWidgetState } from '@web-widget/helpers/state';
6
- export { D as DefineWebWidgetOptions, R as ReactWidgetComponent, W as WebWidgetProps, a as WebWidgetSuspenseProps, d as defineWebWidget } from './components-BlwPaPdf.js';
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: _web_widget_helpers.ServerRender<FunctionComponent<{}>, unknown, _web_widget_helpers.ServerRenderOptions, _web_widget_helpers.ServerRenderResult>;
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
- defineWebWidget
3
- } from "./chunk-RYJ3BJDY.js";
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
- error = e;
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
- defineWebWidget,
68
+ container,
66
69
  render,
67
- useWidgetSyncState as useWidgetState
70
+ resolveFallback
68
71
  };
@@ -0,0 +1,2 @@
1
+
2
+ export { }
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
- interface WebWidgetSuspenseProps {
4
- fallback?: ReactNode;
5
- experimental_loading?: 'lazy' | 'eager' | 'idle';
6
- renderStage?: 'server' | 'client';
7
- experimental_renderTarget?: 'light' | 'shadow';
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
- } & WebWidgetSuspenseProps &
37
+ } & ReactWidgetProps &
15
38
  T
16
39
  ): ReactNode;
17
40
  }
18
41
 
19
42
  declare namespace JSX {
20
- interface IntrinsicAttributes extends WebWidgetSuspenseProps {
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": "2.3.1",
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
- "@rollup/pluginutils": "^5.1.4",
17
- "@web-widget/helpers": "2.3.1",
18
- "@web-widget/schema": "2.3.1",
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.5.4",
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
  }
@@ -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 };
@@ -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
- };