@ecopages/react 0.2.0-alpha.4 → 0.2.0-alpha.41

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.
Files changed (70) hide show
  1. package/README.md +161 -18
  2. package/package.json +16 -12
  3. package/src/eco-embed.d.ts +11 -0
  4. package/src/eco-embed.js +11 -0
  5. package/src/react-hmr-strategy.d.ts +42 -32
  6. package/src/react-hmr-strategy.js +103 -124
  7. package/src/react-renderer.d.ts +169 -42
  8. package/src/react-renderer.js +484 -164
  9. package/src/react.constants.d.ts +1 -0
  10. package/src/react.constants.js +4 -0
  11. package/src/react.plugin.d.ts +38 -111
  12. package/src/react.plugin.js +132 -61
  13. package/src/react.types.d.ts +88 -0
  14. package/src/react.types.js +0 -0
  15. package/src/router-adapter.d.ts +7 -14
  16. package/src/services/react-bundle.service.d.ts +15 -26
  17. package/src/services/react-bundle.service.js +45 -93
  18. package/src/services/react-hmr-page-metadata-cache.d.ts +9 -0
  19. package/src/services/react-hmr-page-metadata-cache.js +18 -2
  20. package/src/services/react-hydration-asset.service.d.ts +26 -19
  21. package/src/services/react-hydration-asset.service.js +72 -66
  22. package/src/services/react-mdx-config-dependency.service.d.ts +36 -0
  23. package/src/services/react-mdx-config-dependency.service.js +122 -0
  24. package/src/services/react-page-module.service.d.ts +10 -2
  25. package/src/services/react-page-module.service.js +47 -39
  26. package/src/services/react-page-payload.service.d.ts +46 -0
  27. package/src/services/react-page-payload.service.js +67 -0
  28. package/src/services/react-runtime-bundle.service.d.ts +15 -13
  29. package/src/services/react-runtime-bundle.service.js +103 -180
  30. package/src/utils/client-graph-boundary-plugin.d.ts +1 -1
  31. package/src/utils/client-graph-boundary-plugin.js +149 -11
  32. package/src/utils/component-config-traversal.d.ts +36 -0
  33. package/src/utils/component-config-traversal.js +54 -0
  34. package/src/utils/declared-modules.d.ts +1 -1
  35. package/src/utils/declared-modules.js +7 -16
  36. package/src/utils/dynamic.test.browser.d.ts +1 -0
  37. package/src/utils/dynamic.test.browser.js +33 -0
  38. package/src/utils/hydration-scripts.d.ts +25 -6
  39. package/src/utils/hydration-scripts.js +150 -44
  40. package/src/utils/hydration-scripts.test.browser.d.ts +1 -0
  41. package/src/utils/hydration-scripts.test.browser.js +198 -0
  42. package/src/utils/reachability-analyzer.d.ts +12 -1
  43. package/src/utils/reachability-analyzer.js +101 -5
  44. package/src/utils/react-dom-runtime-interop-plugin.d.ts +5 -0
  45. package/src/utils/react-dom-runtime-interop-plugin.js +29 -0
  46. package/src/utils/react-mdx-loader-plugin.d.ts +1 -1
  47. package/src/utils/react-mdx-loader-plugin.js +13 -5
  48. package/src/utils/react-runtime-alias-map.d.ts +6 -0
  49. package/src/utils/react-runtime-alias-map.js +33 -0
  50. package/src/utils/use-sync-external-store-shim-plugin.d.ts +5 -0
  51. package/src/utils/use-sync-external-store-shim-plugin.js +41 -0
  52. package/CHANGELOG.md +0 -62
  53. package/src/react-hmr-strategy.ts +0 -444
  54. package/src/react-renderer.ts +0 -403
  55. package/src/react.plugin.ts +0 -241
  56. package/src/router-adapter.ts +0 -95
  57. package/src/services/react-bundle.service.ts +0 -212
  58. package/src/services/react-hmr-page-metadata-cache.ts +0 -24
  59. package/src/services/react-hydration-asset.service.ts +0 -260
  60. package/src/services/react-page-module.service.ts +0 -214
  61. package/src/services/react-runtime-bundle.service.ts +0 -271
  62. package/src/utils/client-graph-boundary-plugin.ts +0 -590
  63. package/src/utils/client-only.ts +0 -27
  64. package/src/utils/declared-modules.ts +0 -99
  65. package/src/utils/dynamic.ts +0 -27
  66. package/src/utils/hmr-scripts.ts +0 -47
  67. package/src/utils/html-boundary.ts +0 -66
  68. package/src/utils/hydration-scripts.ts +0 -338
  69. package/src/utils/reachability-analyzer.ts +0 -440
  70. package/src/utils/react-mdx-loader-plugin.ts +0 -40
@@ -0,0 +1 @@
1
+ export declare const REACT_PLUGIN_NAME = "react";
@@ -0,0 +1,4 @@
1
+ const REACT_PLUGIN_NAME = "react";
2
+ export {
3
+ REACT_PLUGIN_NAME
4
+ };
@@ -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 { ReactRouterAdapter } from './router-adapter.js';
14
- import type { ComponentBoundaryPolicyInput } from '@ecopages/core/plugins/integration-plugin';
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.JSX.Element> {
15
+ export declare class ReactPlugin extends IntegrationPlugin<React.ReactNode> {
101
16
  renderer: typeof ReactRenderer;
102
- routerAdapter: ReactRouterAdapter | undefined;
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
- constructor(options?: Omit<ReactPluginOptions, 'name'>);
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
@@ -1,11 +1,68 @@
1
- import { IntegrationPlugin } from "@ecopages/core/plugins/integration-plugin";
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 = "react";
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 = new ReactHmrPageMetadataCache();
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 extensions = [".tsx"];
24
- const mdxExtensions = options?.mdx?.extensions ?? [".mdx"];
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
- ...options
87
+ jsxImportSource: "react",
88
+ integrationDependencies,
89
+ ...baseConfig
36
90
  });
37
- this.mdxEnabled = options?.mdx?.enabled ?? false;
38
- this.mdxExtensions = mdxExtensions;
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
- this.explicitGraphEnabled = options?.explicitGraph ?? false;
57
- ReactRenderer.routerAdapter = this.routerAdapter;
58
- ReactRenderer.mdxCompilerOptions = this.mdxCompilerOptions;
59
- ReactRenderer.mdxExtensions = this.mdxExtensions;
60
- ReactRenderer.explicitGraphEnabled = this.explicitGraphEnabled;
61
- ReactRenderer.hmrPageMetadataCache = this.hmrPageMetadataCache;
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
- async setup() {
71
- if (this.mdxEnabled && this.mdxCompilerOptions) {
72
- const { createReactMdxLoaderPlugin } = await import("./utils/react-mdx-loader-plugin.js");
73
- this.mdxLoaderPlugin = createReactMdxLoaderPlugin(this.mdxCompilerOptions);
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.mdxCompilerOptions,
95
- this.explicitGraphEnabled
96
- );
97
- }
98
- /**
99
- * Override to register React-specific specifier mappings for HMR.
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
@@ -12,11 +12,10 @@
12
12
  * const myRouter: ReactRouterAdapter = {
13
13
  * name: 'my-router',
14
14
  * bundle: {
15
- * importPath: '@my/router/browser.ts',
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.ts'
38
+ * @example '@ecopages/react-router/browser'
40
39
  */
41
40
  importPath: string;
42
41
  /**
43
42
  * Output filename (without extension).
44
- * @example 'react-router-esm'
43
+ * @example 'my-router'
45
44
  */
46
45
  outputName: string;
47
46
  /**
48
47
  * Packages to externalize when bundling.
49
- * These should be available via import map.
50
- * @example ['react', 'react-dom', 'react/jsx-runtime']
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 'EcoRouter'
59
+ * @example 'MyRouter'
67
60
  */
68
61
  router: string;
69
62
  /**
70
63
  * The component that renders the current page content.
71
- * @example 'PageContent'
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(runtimeImports: ReactRuntimeImports): {
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
  }