@ecopages/react 0.2.0-alpha.4 → 0.2.0-alpha.40
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/README.md +161 -18
- package/package.json +16 -12
- package/src/eco-embed.d.ts +11 -0
- package/src/eco-embed.js +11 -0
- package/src/react-hmr-strategy.d.ts +42 -32
- package/src/react-hmr-strategy.js +103 -124
- package/src/react-renderer.d.ts +169 -42
- package/src/react-renderer.js +484 -164
- package/src/react.constants.d.ts +1 -0
- package/src/react.constants.js +4 -0
- package/src/react.plugin.d.ts +38 -111
- package/src/react.plugin.js +132 -61
- package/src/react.types.d.ts +88 -0
- package/src/react.types.js +0 -0
- package/src/router-adapter.d.ts +7 -14
- package/src/services/react-bundle.service.d.ts +15 -26
- package/src/services/react-bundle.service.js +45 -93
- package/src/services/react-hmr-page-metadata-cache.d.ts +9 -0
- package/src/services/react-hmr-page-metadata-cache.js +18 -2
- package/src/services/react-hydration-asset.service.d.ts +26 -19
- package/src/services/react-hydration-asset.service.js +72 -66
- package/src/services/react-mdx-config-dependency.service.d.ts +36 -0
- package/src/services/react-mdx-config-dependency.service.js +122 -0
- package/src/services/react-page-module.service.d.ts +10 -2
- package/src/services/react-page-module.service.js +47 -39
- package/src/services/react-page-payload.service.d.ts +46 -0
- package/src/services/react-page-payload.service.js +67 -0
- package/src/services/react-runtime-bundle.service.d.ts +15 -13
- package/src/services/react-runtime-bundle.service.js +103 -180
- package/src/utils/client-graph-boundary-plugin.d.ts +1 -1
- package/src/utils/client-graph-boundary-plugin.js +149 -11
- package/src/utils/component-config-traversal.d.ts +36 -0
- package/src/utils/component-config-traversal.js +54 -0
- package/src/utils/declared-modules.d.ts +1 -1
- package/src/utils/declared-modules.js +7 -16
- package/src/utils/dynamic.test.browser.d.ts +1 -0
- package/src/utils/dynamic.test.browser.js +33 -0
- package/src/utils/hydration-scripts.d.ts +25 -6
- package/src/utils/hydration-scripts.js +150 -44
- package/src/utils/hydration-scripts.test.browser.d.ts +1 -0
- package/src/utils/hydration-scripts.test.browser.js +198 -0
- package/src/utils/reachability-analyzer.d.ts +12 -1
- package/src/utils/reachability-analyzer.js +101 -5
- package/src/utils/react-dom-runtime-interop-plugin.d.ts +5 -0
- package/src/utils/react-dom-runtime-interop-plugin.js +29 -0
- package/src/utils/react-mdx-loader-plugin.d.ts +1 -1
- package/src/utils/react-mdx-loader-plugin.js +13 -5
- package/src/utils/react-runtime-alias-map.d.ts +6 -0
- package/src/utils/react-runtime-alias-map.js +33 -0
- package/src/utils/use-sync-external-store-shim-plugin.d.ts +5 -0
- package/src/utils/use-sync-external-store-shim-plugin.js +41 -0
- package/CHANGELOG.md +0 -62
- package/src/react-hmr-strategy.ts +0 -444
- package/src/react-renderer.ts +0 -403
- package/src/react.plugin.ts +0 -241
- package/src/router-adapter.ts +0 -95
- package/src/services/react-bundle.service.ts +0 -212
- package/src/services/react-hmr-page-metadata-cache.ts +0 -24
- package/src/services/react-hydration-asset.service.ts +0 -260
- package/src/services/react-page-module.service.ts +0 -214
- package/src/services/react-runtime-bundle.service.ts +0 -271
- package/src/utils/client-graph-boundary-plugin.ts +0 -590
- package/src/utils/client-only.ts +0 -27
- package/src/utils/declared-modules.ts +0 -99
- package/src/utils/dynamic.ts +0 -27
- package/src/utils/hmr-scripts.ts +0 -47
- package/src/utils/html-boundary.ts +0 -66
- package/src/utils/hydration-scripts.ts +0 -338
- package/src/utils/reachability-analyzer.ts +0 -440
- package/src/utils/react-mdx-loader-plugin.ts +0 -40
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const REACT_PLUGIN_NAME = "react";
|
package/src/react.plugin.d.ts
CHANGED
|
@@ -1,94 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
* This module contains the react plugin for Ecopages
|
|
3
|
-
* @module
|
|
4
|
-
*/
|
|
5
|
-
import { IntegrationPlugin } from '@ecopages/core/plugins/integration-plugin';
|
|
6
|
-
import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
|
|
1
|
+
import { IntegrationPlugin, type EcoBuildPlugin } from '@ecopages/core/plugins/integration-plugin';
|
|
7
2
|
import type { HmrStrategy } from '@ecopages/core/hmr/hmr-strategy';
|
|
8
|
-
import type { IHmrManager } from '@ecopages/core/internal-types';
|
|
9
|
-
import type { AssetDefinition } from '@ecopages/core/services/asset-processing-service';
|
|
10
|
-
import type { CompileOptions } from '@mdx-js/mdx';
|
|
11
3
|
import type React from 'react';
|
|
12
4
|
import { ReactRenderer } from './react-renderer.js';
|
|
13
|
-
import type {
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
* MDX configuration options for the React plugin
|
|
17
|
-
*/
|
|
18
|
-
export type ReactMdxOptions = {
|
|
19
|
-
/**
|
|
20
|
-
* Whether to enable MDX support.
|
|
21
|
-
* @default false
|
|
22
|
-
*/
|
|
23
|
-
enabled: boolean;
|
|
24
|
-
/**
|
|
25
|
-
* Compiler options for MDX.
|
|
26
|
-
* @default undefined
|
|
27
|
-
*/
|
|
28
|
-
compilerOptions?: Omit<CompileOptions, 'jsxImportSource' | 'jsxRuntime'>;
|
|
29
|
-
/**
|
|
30
|
-
* Remark plugins.
|
|
31
|
-
* @default undefined
|
|
32
|
-
*/
|
|
33
|
-
remarkPlugins?: CompileOptions['remarkPlugins'];
|
|
34
|
-
/**
|
|
35
|
-
* Rehype plugins.
|
|
36
|
-
* @default undefined
|
|
37
|
-
*/
|
|
38
|
-
rehypePlugins?: CompileOptions['rehypePlugins'];
|
|
39
|
-
/**
|
|
40
|
-
* Recma plugins.
|
|
41
|
-
* @default undefined
|
|
42
|
-
*/
|
|
43
|
-
recmaPlugins?: CompileOptions['recmaPlugins'];
|
|
44
|
-
/**
|
|
45
|
-
* Custom extensions to be treated as MDX files.
|
|
46
|
-
* @default ['.mdx']
|
|
47
|
-
*/
|
|
48
|
-
extensions?: string[];
|
|
49
|
-
};
|
|
50
|
-
/**
|
|
51
|
-
* Options for the React plugin
|
|
52
|
-
*/
|
|
53
|
-
export type ReactPluginOptions = {
|
|
54
|
-
extensions?: string[];
|
|
55
|
-
dependencies?: AssetDefinition[];
|
|
56
|
-
/**
|
|
57
|
-
* Enables explicit client graph mode for React page entries.
|
|
58
|
-
*
|
|
59
|
-
* When enabled, React page-entry bundling relies on explicit dependency declarations
|
|
60
|
-
* and skips AST-based `middleware`/`requires` stripping in the React path.
|
|
61
|
-
* @default false
|
|
62
|
-
*/
|
|
63
|
-
explicitGraph?: boolean;
|
|
64
|
-
/**
|
|
65
|
-
* Router adapter for SPA navigation.
|
|
66
|
-
* When provided, pages with layouts will be wrapped in the router for client-side navigation.
|
|
67
|
-
* @example
|
|
68
|
-
* ```ts
|
|
69
|
-
* import { ecoRouter } from '@ecopages/react-router';
|
|
70
|
-
* reactPlugin({ router: ecoRouter() })
|
|
71
|
-
* ```
|
|
72
|
-
*/
|
|
73
|
-
router?: ReactRouterAdapter;
|
|
74
|
-
/**
|
|
75
|
-
* MDX configuration for handling .mdx files within the React plugin.
|
|
76
|
-
* When enabled, MDX files are treated as React pages with full router support.
|
|
77
|
-
* @example
|
|
78
|
-
* ```ts
|
|
79
|
-
* reactPlugin({
|
|
80
|
-
* router: ecoRouter(),
|
|
81
|
-
* mdx: {
|
|
82
|
-
* enabled: true,
|
|
83
|
-
* extensions: ['.mdx', '.md'],
|
|
84
|
-
* remarkPlugins: [remarkGfm],
|
|
85
|
-
* rehypePlugins: [[rehypePrettyCode, { theme: '...' }]],
|
|
86
|
-
* }
|
|
87
|
-
* })
|
|
88
|
-
* ```
|
|
89
|
-
*/
|
|
90
|
-
mdx?: ReactMdxOptions;
|
|
91
|
-
};
|
|
5
|
+
import type { ReactPluginOptions } from './react.types.js';
|
|
6
|
+
export type { ReactMdxOptions, ReactPluginOptions, ReactRendererConfig } from './react.types.js';
|
|
92
7
|
/**
|
|
93
8
|
* The name of the React plugin
|
|
94
9
|
*/
|
|
@@ -97,21 +12,48 @@ export declare const PLUGIN_NAME = "react";
|
|
|
97
12
|
* The React plugin class
|
|
98
13
|
* This plugin provides support for React components in Ecopages
|
|
99
14
|
*/
|
|
100
|
-
export declare class ReactPlugin extends IntegrationPlugin<React.
|
|
15
|
+
export declare class ReactPlugin extends IntegrationPlugin<React.ReactNode> {
|
|
101
16
|
renderer: typeof ReactRenderer;
|
|
102
|
-
|
|
103
|
-
private mdxEnabled;
|
|
104
|
-
private mdxCompilerOptions?;
|
|
105
|
-
private mdxExtensions;
|
|
17
|
+
private readonly routerAdapter;
|
|
18
|
+
private readonly mdxEnabled;
|
|
19
|
+
private readonly mdxCompilerOptions?;
|
|
20
|
+
private readonly mdxExtensions;
|
|
106
21
|
private mdxLoaderPlugin;
|
|
107
|
-
private runtimeBundleService;
|
|
22
|
+
private readonly runtimeBundleService;
|
|
108
23
|
private readonly hmrPageMetadataCache;
|
|
24
|
+
private runtimeDependenciesInitialized;
|
|
109
25
|
/**
|
|
110
26
|
* Indicates whether React explicit graph mode is enabled for renderer/HMR behavior.
|
|
111
27
|
*/
|
|
112
|
-
private explicitGraphEnabled;
|
|
113
|
-
|
|
28
|
+
private readonly explicitGraphEnabled;
|
|
29
|
+
private readonly rendererConfig;
|
|
30
|
+
constructor(options?: ReactPluginOptions);
|
|
31
|
+
/**
|
|
32
|
+
* Creates a React renderer with instance-owned runtime configuration.
|
|
33
|
+
*
|
|
34
|
+
* React renderers depend on plugin-owned router, MDX, and HMR metadata state.
|
|
35
|
+
* Keeping that state on the instance avoids cross-plugin static mutation while
|
|
36
|
+
* preserving the same runtime services the base initializer wires up.
|
|
37
|
+
*/
|
|
38
|
+
initializeRenderer(options?: {
|
|
39
|
+
rendererModules?: unknown;
|
|
40
|
+
}): ReactRenderer;
|
|
41
|
+
private ensureRuntimeDependencies;
|
|
114
42
|
get plugins(): EcoBuildPlugin[];
|
|
43
|
+
/**
|
|
44
|
+
* Ensures the optional React MDX loader exists before either config-time
|
|
45
|
+
* manifest sealing or runtime setup needs it.
|
|
46
|
+
*/
|
|
47
|
+
private ensureMdxLoaderPlugin;
|
|
48
|
+
/**
|
|
49
|
+
* Prepares React's build-facing loader contributions before config build seals
|
|
50
|
+
* the app manifest.
|
|
51
|
+
*/
|
|
52
|
+
prepareBuildContributions(): Promise<void>;
|
|
53
|
+
/**
|
|
54
|
+
* Performs runtime-only React setup after build contributions are already
|
|
55
|
+
* materialized.
|
|
56
|
+
*/
|
|
115
57
|
setup(): Promise<void>;
|
|
116
58
|
/**
|
|
117
59
|
* Provides React-specific HMR strategy with Fast Refresh support.
|
|
@@ -123,21 +65,6 @@ export declare class ReactPlugin extends IntegrationPlugin<React.JSX.Element> {
|
|
|
123
65
|
* @returns ReactHmrStrategy instance for handling React component updates
|
|
124
66
|
*/
|
|
125
67
|
getHmrStrategy(): HmrStrategy | undefined;
|
|
126
|
-
/**
|
|
127
|
-
* Override to register React-specific specifier mappings for HMR.
|
|
128
|
-
*/
|
|
129
|
-
setHmrManager(hmrManager: IHmrManager): void;
|
|
130
|
-
/**
|
|
131
|
-
* Declares React's boundary deferral rule for cross-integration rendering.
|
|
132
|
-
*
|
|
133
|
-
* React defers when a render pass owned by another integration enters a React
|
|
134
|
-
* component boundary. That boundary is then resolved later through the marker
|
|
135
|
-
* graph stage using the React renderer.
|
|
136
|
-
*
|
|
137
|
-
* @param input Boundary metadata for the active render pass.
|
|
138
|
-
* @returns `true` when the boundary should be deferred into the marker pass.
|
|
139
|
-
*/
|
|
140
|
-
shouldDeferComponentBoundary(input: ComponentBoundaryPolicyInput): boolean;
|
|
141
68
|
}
|
|
142
69
|
/**
|
|
143
70
|
* Factory function to create a React plugin instance
|
package/src/react.plugin.js
CHANGED
|
@@ -1,11 +1,68 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {
|
|
2
|
+
IntegrationPlugin
|
|
3
|
+
} from "@ecopages/core/plugins/integration-plugin";
|
|
2
4
|
import { Logger } from "@ecopages/logger";
|
|
5
|
+
import { REACT_PLUGIN_NAME } from "./react.constants.js";
|
|
3
6
|
import { ReactRenderer } from "./react-renderer.js";
|
|
4
7
|
import { ReactHmrStrategy } from "./react-hmr-strategy.js";
|
|
5
8
|
import { ReactRuntimeBundleService } from "./services/react-runtime-bundle.service.js";
|
|
6
9
|
import { ReactHmrPageMetadataCache } from "./services/react-hmr-page-metadata-cache.js";
|
|
10
|
+
import { createReactMdxLoaderPlugin } from "./utils/react-mdx-loader-plugin.js";
|
|
7
11
|
const appLogger = new Logger("[ReactPlugin]");
|
|
8
|
-
const PLUGIN_NAME =
|
|
12
|
+
const PLUGIN_NAME = REACT_PLUGIN_NAME;
|
|
13
|
+
const mergePluginLists = (...lists) => {
|
|
14
|
+
const merged = lists.flatMap((list) => list ? [...list] : []);
|
|
15
|
+
return merged.length > 0 ? merged : void 0;
|
|
16
|
+
};
|
|
17
|
+
const appendMdxExtensions = (target, mdxExtensions) => {
|
|
18
|
+
for (const extension of mdxExtensions) {
|
|
19
|
+
if (!target.includes(extension)) {
|
|
20
|
+
target.push(extension);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
const resolveReactMdxCompilerOptions = (mdxOptions) => {
|
|
25
|
+
const { compilerOptions, remarkPlugins, rehypePlugins, recmaPlugins } = mdxOptions;
|
|
26
|
+
const resolved = {
|
|
27
|
+
...compilerOptions,
|
|
28
|
+
jsxImportSource: "react",
|
|
29
|
+
jsxRuntime: "automatic",
|
|
30
|
+
development: process.env.NODE_ENV === "development"
|
|
31
|
+
};
|
|
32
|
+
const mergedRemark = mergePluginLists(compilerOptions?.remarkPlugins, remarkPlugins);
|
|
33
|
+
const mergedRehype = mergePluginLists(compilerOptions?.rehypePlugins, rehypePlugins);
|
|
34
|
+
const mergedRecma = mergePluginLists(compilerOptions?.recmaPlugins, recmaPlugins);
|
|
35
|
+
if (mergedRemark) resolved.remarkPlugins = mergedRemark;
|
|
36
|
+
if (mergedRehype) resolved.rehypePlugins = mergedRehype;
|
|
37
|
+
if (mergedRecma) resolved.recmaPlugins = mergedRecma;
|
|
38
|
+
return resolved;
|
|
39
|
+
};
|
|
40
|
+
const resolveReactPluginOptions = (options) => {
|
|
41
|
+
const { extensions: userExtensions, router, mdx, explicitGraph, dependencies, ...baseConfig } = options ?? {};
|
|
42
|
+
const extensions = [...userExtensions ?? [".tsx"]];
|
|
43
|
+
const mdxEnabled = mdx?.enabled ?? false;
|
|
44
|
+
const mdxExtensions = mdx?.extensions ?? [".mdx"];
|
|
45
|
+
if (mdxEnabled) {
|
|
46
|
+
appendMdxExtensions(extensions, mdxExtensions);
|
|
47
|
+
} else if (mdx?.extensions?.length) {
|
|
48
|
+
appLogger.warn(
|
|
49
|
+
"MDX extensions provided but MDX is disabled. MDX files will not be processed. Set mdx.enabled to true to enable MDX support."
|
|
50
|
+
);
|
|
51
|
+
}
|
|
52
|
+
const rendererConfig = {
|
|
53
|
+
routerAdapter: router,
|
|
54
|
+
mdxCompilerOptions: mdxEnabled && mdx ? resolveReactMdxCompilerOptions(mdx) : void 0,
|
|
55
|
+
mdxExtensions,
|
|
56
|
+
hmrPageMetadataCache: new ReactHmrPageMetadataCache(),
|
|
57
|
+
explicitGraphEnabled: explicitGraph ?? false
|
|
58
|
+
};
|
|
59
|
+
return {
|
|
60
|
+
...baseConfig,
|
|
61
|
+
extensions,
|
|
62
|
+
integrationDependencies: dependencies,
|
|
63
|
+
rendererConfig
|
|
64
|
+
};
|
|
65
|
+
};
|
|
9
66
|
class ReactPlugin extends IntegrationPlugin {
|
|
10
67
|
renderer = ReactRenderer;
|
|
11
68
|
routerAdapter;
|
|
@@ -14,52 +71,63 @@ class ReactPlugin extends IntegrationPlugin {
|
|
|
14
71
|
mdxExtensions;
|
|
15
72
|
mdxLoaderPlugin;
|
|
16
73
|
runtimeBundleService;
|
|
17
|
-
hmrPageMetadataCache
|
|
74
|
+
hmrPageMetadataCache;
|
|
75
|
+
runtimeDependenciesInitialized = false;
|
|
18
76
|
/**
|
|
19
77
|
* Indicates whether React explicit graph mode is enabled for renderer/HMR behavior.
|
|
20
78
|
*/
|
|
21
79
|
explicitGraphEnabled;
|
|
80
|
+
rendererConfig;
|
|
22
81
|
constructor(options) {
|
|
23
|
-
const
|
|
24
|
-
const
|
|
25
|
-
if (options?.mdx?.enabled) {
|
|
26
|
-
extensions.push(...mdxExtensions);
|
|
27
|
-
} else if (options?.mdx?.extensions?.length) {
|
|
28
|
-
appLogger.warn(
|
|
29
|
-
"MDX extensions provided but MDX is disabled. MDX files will not be processed. Set mdx.enabled to true to enable MDX support."
|
|
30
|
-
);
|
|
31
|
-
}
|
|
82
|
+
const config = resolveReactPluginOptions(options);
|
|
83
|
+
const { extensions, rendererConfig, integrationDependencies, ...baseConfig } = config;
|
|
32
84
|
super({
|
|
33
85
|
name: PLUGIN_NAME,
|
|
34
86
|
extensions,
|
|
35
|
-
|
|
87
|
+
jsxImportSource: "react",
|
|
88
|
+
integrationDependencies,
|
|
89
|
+
...baseConfig
|
|
36
90
|
});
|
|
37
|
-
this.
|
|
38
|
-
this.
|
|
91
|
+
this.routerAdapter = rendererConfig.routerAdapter;
|
|
92
|
+
this.mdxCompilerOptions = rendererConfig.mdxCompilerOptions;
|
|
93
|
+
this.mdxEnabled = Boolean(rendererConfig.mdxCompilerOptions);
|
|
94
|
+
this.mdxExtensions = rendererConfig.mdxExtensions ?? [".mdx"];
|
|
95
|
+
this.hmrPageMetadataCache = rendererConfig.hmrPageMetadataCache ?? new ReactHmrPageMetadataCache();
|
|
96
|
+
this.explicitGraphEnabled = rendererConfig.explicitGraphEnabled ?? false;
|
|
97
|
+
this.rendererConfig = {
|
|
98
|
+
...rendererConfig,
|
|
99
|
+
mdxExtensions: this.mdxExtensions,
|
|
100
|
+
hmrPageMetadataCache: this.hmrPageMetadataCache,
|
|
101
|
+
explicitGraphEnabled: this.explicitGraphEnabled
|
|
102
|
+
};
|
|
39
103
|
if (this.mdxEnabled) {
|
|
40
|
-
const { compilerOptions, remarkPlugins, rehypePlugins, recmaPlugins } = options?.mdx || {};
|
|
41
|
-
this.mdxCompilerOptions = {
|
|
42
|
-
...compilerOptions,
|
|
43
|
-
remarkPlugins: [...compilerOptions?.remarkPlugins || [], ...remarkPlugins || []],
|
|
44
|
-
rehypePlugins: [...compilerOptions?.rehypePlugins || [], ...rehypePlugins || []],
|
|
45
|
-
recmaPlugins: [...compilerOptions?.recmaPlugins || [], ...recmaPlugins || []],
|
|
46
|
-
jsxImportSource: "react",
|
|
47
|
-
jsxRuntime: "automatic",
|
|
48
|
-
development: process.env.NODE_ENV === "development"
|
|
49
|
-
};
|
|
50
104
|
appLogger.debug("MDX mode enabled with React jsx runtime");
|
|
51
105
|
}
|
|
52
|
-
this.routerAdapter = options?.router;
|
|
53
106
|
this.runtimeBundleService = new ReactRuntimeBundleService({
|
|
54
107
|
routerAdapter: this.routerAdapter
|
|
55
108
|
});
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
109
|
+
}
|
|
110
|
+
/**
|
|
111
|
+
* Creates a React renderer with instance-owned runtime configuration.
|
|
112
|
+
*
|
|
113
|
+
* React renderers depend on plugin-owned router, MDX, and HMR metadata state.
|
|
114
|
+
* Keeping that state on the instance avoids cross-plugin static mutation while
|
|
115
|
+
* preserving the same runtime services the base initializer wires up.
|
|
116
|
+
*/
|
|
117
|
+
initializeRenderer(options) {
|
|
118
|
+
const renderer = new this.renderer({
|
|
119
|
+
...this.createRendererOptions(options),
|
|
120
|
+
reactConfig: this.rendererConfig
|
|
121
|
+
});
|
|
122
|
+
return this.attachRendererRuntimeServices(renderer);
|
|
123
|
+
}
|
|
124
|
+
ensureRuntimeDependencies() {
|
|
125
|
+
if (this.runtimeDependenciesInitialized) {
|
|
126
|
+
return;
|
|
127
|
+
}
|
|
128
|
+
this.runtimeBundleService.setRootDir(this.appConfig?.rootDir);
|
|
62
129
|
this.integrationDependencies.unshift(...this.runtimeBundleService.getDependencies());
|
|
130
|
+
this.runtimeDependenciesInitialized = true;
|
|
63
131
|
}
|
|
64
132
|
get plugins() {
|
|
65
133
|
if (this.mdxLoaderPlugin) {
|
|
@@ -67,11 +135,31 @@ class ReactPlugin extends IntegrationPlugin {
|
|
|
67
135
|
}
|
|
68
136
|
return [];
|
|
69
137
|
}
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
138
|
+
/**
|
|
139
|
+
* Ensures the optional React MDX loader exists before either config-time
|
|
140
|
+
* manifest sealing or runtime setup needs it.
|
|
141
|
+
*/
|
|
142
|
+
async ensureMdxLoaderPlugin() {
|
|
143
|
+
if (!this.mdxEnabled || !this.mdxCompilerOptions || this.mdxLoaderPlugin) {
|
|
144
|
+
return;
|
|
74
145
|
}
|
|
146
|
+
this.mdxLoaderPlugin = createReactMdxLoaderPlugin(this.mdxCompilerOptions);
|
|
147
|
+
}
|
|
148
|
+
/**
|
|
149
|
+
* Prepares React's build-facing loader contributions before config build seals
|
|
150
|
+
* the app manifest.
|
|
151
|
+
*/
|
|
152
|
+
async prepareBuildContributions() {
|
|
153
|
+
this.ensureRuntimeDependencies();
|
|
154
|
+
await this.ensureMdxLoaderPlugin();
|
|
155
|
+
}
|
|
156
|
+
/**
|
|
157
|
+
* Performs runtime-only React setup after build contributions are already
|
|
158
|
+
* materialized.
|
|
159
|
+
*/
|
|
160
|
+
async setup() {
|
|
161
|
+
this.ensureRuntimeDependencies();
|
|
162
|
+
await this.ensureMdxLoaderPlugin();
|
|
75
163
|
await super.setup();
|
|
76
164
|
}
|
|
77
165
|
/**
|
|
@@ -88,32 +176,15 @@ class ReactPlugin extends IntegrationPlugin {
|
|
|
88
176
|
return void 0;
|
|
89
177
|
}
|
|
90
178
|
const context = this.hmrManager.getDefaultContext();
|
|
91
|
-
return new ReactHmrStrategy(
|
|
179
|
+
return new ReactHmrStrategy({
|
|
92
180
|
context,
|
|
93
|
-
this.hmrPageMetadataCache,
|
|
94
|
-
this.
|
|
95
|
-
this.
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
*/
|
|
101
|
-
setHmrManager(hmrManager) {
|
|
102
|
-
super.setHmrManager(hmrManager);
|
|
103
|
-
hmrManager.registerSpecifierMap(this.runtimeBundleService.getSpecifierMap());
|
|
104
|
-
}
|
|
105
|
-
/**
|
|
106
|
-
* Declares React's boundary deferral rule for cross-integration rendering.
|
|
107
|
-
*
|
|
108
|
-
* React defers when a render pass owned by another integration enters a React
|
|
109
|
-
* component boundary. That boundary is then resolved later through the marker
|
|
110
|
-
* graph stage using the React renderer.
|
|
111
|
-
*
|
|
112
|
-
* @param input Boundary metadata for the active render pass.
|
|
113
|
-
* @returns `true` when the boundary should be deferred into the marker pass.
|
|
114
|
-
*/
|
|
115
|
-
shouldDeferComponentBoundary(input) {
|
|
116
|
-
return input.targetIntegration === this.name && input.currentIntegration !== this.name;
|
|
181
|
+
pageMetadataCache: this.hmrPageMetadataCache,
|
|
182
|
+
runtimeAliasMap: new Map(Object.entries(this.runtimeBundleService.getRuntimeAliasMap("development"))),
|
|
183
|
+
mdxCompilerOptions: this.mdxCompilerOptions,
|
|
184
|
+
ownedTemplateExtensions: this.extensions,
|
|
185
|
+
allTemplateExtensions: this.appConfig.templatesExt,
|
|
186
|
+
explicitGraphEnabled: this.explicitGraphEnabled
|
|
187
|
+
});
|
|
117
188
|
}
|
|
118
189
|
}
|
|
119
190
|
function reactPlugin(options) {
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import type { AssetDefinition } from '@ecopages/core/services/asset-processing-service';
|
|
2
|
+
import type { CompileOptions } from '@mdx-js/mdx';
|
|
3
|
+
import type { ReactRouterAdapter } from './router-adapter.js';
|
|
4
|
+
import type { ReactHmrPageMetadataCache } from './services/react-hmr-page-metadata-cache.js';
|
|
5
|
+
/**
|
|
6
|
+
* MDX configuration options for the React plugin.
|
|
7
|
+
*/
|
|
8
|
+
export type ReactMdxOptions = {
|
|
9
|
+
/**
|
|
10
|
+
* Whether to enable MDX support.
|
|
11
|
+
* @default false
|
|
12
|
+
*/
|
|
13
|
+
enabled: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* Compiler options for MDX.
|
|
16
|
+
* @default undefined
|
|
17
|
+
*/
|
|
18
|
+
compilerOptions?: Omit<CompileOptions, 'jsxImportSource' | 'jsxRuntime'>;
|
|
19
|
+
/**
|
|
20
|
+
* Remark plugins.
|
|
21
|
+
* @default undefined
|
|
22
|
+
*/
|
|
23
|
+
remarkPlugins?: CompileOptions['remarkPlugins'];
|
|
24
|
+
/**
|
|
25
|
+
* Rehype plugins.
|
|
26
|
+
* @default undefined
|
|
27
|
+
*/
|
|
28
|
+
rehypePlugins?: CompileOptions['rehypePlugins'];
|
|
29
|
+
/**
|
|
30
|
+
* Recma plugins.
|
|
31
|
+
* @default undefined
|
|
32
|
+
*/
|
|
33
|
+
recmaPlugins?: CompileOptions['recmaPlugins'];
|
|
34
|
+
/**
|
|
35
|
+
* Custom extensions to be treated as MDX files.
|
|
36
|
+
* @default ['.mdx']
|
|
37
|
+
*/
|
|
38
|
+
extensions?: string[];
|
|
39
|
+
};
|
|
40
|
+
/**
|
|
41
|
+
* Options for the React plugin.
|
|
42
|
+
*/
|
|
43
|
+
export type ReactPluginOptions = {
|
|
44
|
+
extensions?: string[];
|
|
45
|
+
dependencies?: AssetDefinition[];
|
|
46
|
+
/**
|
|
47
|
+
* Enables explicit client graph mode for React page entries.
|
|
48
|
+
*
|
|
49
|
+
* When enabled, React page-entry bundling relies on explicit dependency declarations
|
|
50
|
+
* and skips AST-based `middleware`/`requires` stripping in the React path.
|
|
51
|
+
* @default false
|
|
52
|
+
*/
|
|
53
|
+
explicitGraph?: boolean;
|
|
54
|
+
/**
|
|
55
|
+
* Router adapter for SPA navigation.
|
|
56
|
+
* When provided, pages with layouts will be wrapped in the router for client-side navigation.
|
|
57
|
+
* @example
|
|
58
|
+
* ```ts
|
|
59
|
+
* import { ecoRouter } from '@ecopages/react-router';
|
|
60
|
+
* reactPlugin({ router: ecoRouter() })
|
|
61
|
+
* ```
|
|
62
|
+
*/
|
|
63
|
+
router?: ReactRouterAdapter;
|
|
64
|
+
/**
|
|
65
|
+
* MDX configuration for handling .mdx files within the React plugin.
|
|
66
|
+
* When enabled, MDX files are treated as React pages with full router support.
|
|
67
|
+
* @example
|
|
68
|
+
* ```ts
|
|
69
|
+
* reactPlugin({
|
|
70
|
+
* router: ecoRouter(),
|
|
71
|
+
* mdx: {
|
|
72
|
+
* enabled: true,
|
|
73
|
+
* extensions: ['.mdx', '.md'],
|
|
74
|
+
* remarkPlugins: [remarkGfm],
|
|
75
|
+
* rehypePlugins: [[rehypePrettyCode, { theme: '...' }]],
|
|
76
|
+
* }
|
|
77
|
+
* })
|
|
78
|
+
* ```
|
|
79
|
+
*/
|
|
80
|
+
mdx?: ReactMdxOptions;
|
|
81
|
+
};
|
|
82
|
+
export type ReactRendererConfig = {
|
|
83
|
+
routerAdapter?: ReactRouterAdapter;
|
|
84
|
+
mdxCompilerOptions?: CompileOptions;
|
|
85
|
+
mdxExtensions?: string[];
|
|
86
|
+
hmrPageMetadataCache?: ReactHmrPageMetadataCache;
|
|
87
|
+
explicitGraphEnabled?: boolean;
|
|
88
|
+
};
|
|
File without changes
|
package/src/router-adapter.d.ts
CHANGED
|
@@ -12,11 +12,10 @@
|
|
|
12
12
|
* const myRouter: ReactRouterAdapter = {
|
|
13
13
|
* name: 'my-router',
|
|
14
14
|
* bundle: {
|
|
15
|
-
* importPath: '@my/router/browser
|
|
15
|
+
* importPath: '@my/router/browser',
|
|
16
16
|
* outputName: 'my-router',
|
|
17
17
|
* externals: ['react', 'react-dom'],
|
|
18
18
|
* },
|
|
19
|
-
* importMapKey: '@my/router',
|
|
20
19
|
* components: {
|
|
21
20
|
* router: 'MyRouter',
|
|
22
21
|
* pageContent: 'PageOutlet',
|
|
@@ -36,39 +35,33 @@ export interface ReactRouterAdapter {
|
|
|
36
35
|
bundle: {
|
|
37
36
|
/**
|
|
38
37
|
* Node module import path for the browser-compatible entry.
|
|
39
|
-
* @example '@ecopages/react-router/browser
|
|
38
|
+
* @example '@ecopages/react-router/browser'
|
|
40
39
|
*/
|
|
41
40
|
importPath: string;
|
|
42
41
|
/**
|
|
43
42
|
* Output filename (without extension).
|
|
44
|
-
* @example '
|
|
43
|
+
* @example 'my-router'
|
|
45
44
|
*/
|
|
46
45
|
outputName: string;
|
|
47
46
|
/**
|
|
48
47
|
* Packages to externalize when bundling.
|
|
49
|
-
* These should
|
|
50
|
-
* @example ['react', 'react-dom'
|
|
48
|
+
* These should stay as bare runtime dependencies for the router bundle.
|
|
49
|
+
* @example ['react', 'react-dom']
|
|
51
50
|
*/
|
|
52
51
|
externals: string[];
|
|
53
52
|
};
|
|
54
|
-
/**
|
|
55
|
-
* Bare specifier for the import map entry.
|
|
56
|
-
* This is what the hydration script will import from.
|
|
57
|
-
* @example '@ecopages/react-router'
|
|
58
|
-
*/
|
|
59
|
-
importMapKey: string;
|
|
60
53
|
/**
|
|
61
54
|
* Component names to import from the router package.
|
|
62
55
|
*/
|
|
63
56
|
components: {
|
|
64
57
|
/**
|
|
65
58
|
* The router component that wraps the layout.
|
|
66
|
-
* @example '
|
|
59
|
+
* @example 'MyRouter'
|
|
67
60
|
*/
|
|
68
61
|
router: string;
|
|
69
62
|
/**
|
|
70
63
|
* The component that renders the current page content.
|
|
71
|
-
* @example '
|
|
64
|
+
* @example 'PageOutlet'
|
|
72
65
|
*/
|
|
73
66
|
pageContent: string;
|
|
74
67
|
};
|
|
@@ -16,13 +16,25 @@ export interface ReactBundleServiceConfig {
|
|
|
16
16
|
rootDir: string;
|
|
17
17
|
routerAdapter?: ReactRouterAdapter;
|
|
18
18
|
mdxCompilerOptions?: CompileOptions;
|
|
19
|
+
nonReactExtensions?: string[];
|
|
20
|
+
jsxImportSource?: string;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Optional flags that adjust how a React client entry is bundled.
|
|
24
|
+
*/
|
|
25
|
+
export interface ReactClientBundleOptions {
|
|
26
|
+
/**
|
|
27
|
+
* When `true`, bundle React runtime dependencies into the emitted entry instead of
|
|
28
|
+
* rewriting them to external runtime specifiers.
|
|
29
|
+
*/
|
|
30
|
+
includeRuntime?: boolean;
|
|
19
31
|
}
|
|
20
32
|
/**
|
|
21
33
|
* Manages esbuild bundle configuration and plugin creation for React page/component builds.
|
|
22
34
|
*/
|
|
23
35
|
export declare class ReactBundleService {
|
|
24
|
-
private readonly config;
|
|
25
36
|
private readonly runtimeBundleService;
|
|
37
|
+
private readonly config;
|
|
26
38
|
constructor(config: ReactBundleServiceConfig);
|
|
27
39
|
/**
|
|
28
40
|
* Returns resolved runtime import paths for the React runtime.
|
|
@@ -36,33 +48,10 @@ export declare class ReactBundleService {
|
|
|
36
48
|
* @param declaredModules - Explicitly declared browser module specifiers
|
|
37
49
|
* @returns Bundle options object for the build adapter
|
|
38
50
|
*/
|
|
39
|
-
createBundleOptions(componentName: string, isMdx: boolean, declaredModules: string[]): Promise<Record<string, unknown>>;
|
|
51
|
+
createBundleOptions(componentName: string, isMdx: boolean, declaredModules: string[], bundleOptions?: ReactClientBundleOptions): Promise<Record<string, unknown>>;
|
|
40
52
|
/**
|
|
41
53
|
* Creates the esbuild plugin that rewrites bare React specifiers
|
|
42
54
|
* to their runtime asset URLs.
|
|
43
55
|
*/
|
|
44
|
-
createRuntimeAliasPlugin(
|
|
45
|
-
name: string;
|
|
46
|
-
setup(build: {
|
|
47
|
-
onResolve: (options: {
|
|
48
|
-
filter: RegExp;
|
|
49
|
-
namespace?: string;
|
|
50
|
-
}, callback: (args: {
|
|
51
|
-
path: string;
|
|
52
|
-
importer: string;
|
|
53
|
-
namespace: string;
|
|
54
|
-
}) => {
|
|
55
|
-
path?: string;
|
|
56
|
-
namespace?: string;
|
|
57
|
-
external?: boolean;
|
|
58
|
-
} | undefined) => void;
|
|
59
|
-
}): void;
|
|
60
|
-
};
|
|
61
|
-
/**
|
|
62
|
-
* Creates the esbuild plugin that shims `use-sync-external-store/shim`
|
|
63
|
-
* to re-export from React's built-in `useSyncExternalStore`.
|
|
64
|
-
* This is needed because some packages use `use-sync-external-store/shim`
|
|
65
|
-
* but React 18+ has built-in `useSyncExternalStore`.
|
|
66
|
-
*/
|
|
67
|
-
private createSyncExternalStorePlugin;
|
|
56
|
+
createRuntimeAliasPlugin(runtimeAliasMap: Record<string, string>): import("@ecopages/core/build/build-types").EcoBuildPlugin | null;
|
|
68
57
|
}
|