@ecopages/react 0.2.0-alpha.5 → 0.2.0-alpha.7

package/src/utils/react-mdx-loader-plugin.js

@@ -1,11 +1,18 @@
 import { readFileSync } from "node:fs";
 import path from "node:path";
 import { compile } from "@mdx-js/mdx";
-import { SourceMapGenerator } from "source-map";
+import sourceMap from "source-map";
 import { VFile } from "vfile";
+function resolveCompileFormat(filePath, compilerOptions) {
+  const configuredFormat = compilerOptions?.format;
+  if (configuredFormat && configuredFormat !== "detect") {
+    return configuredFormat;
+  }
+  return path.extname(filePath).toLowerCase() === ".md" ? "mdx" : configuredFormat;
+}
 function createReactMdxLoaderPlugin(compilerOptions) {
   const mdxExtensions = compilerOptions?.mdxExtensions ?? [".mdx"];
-  const mdExtensions = compilerOptions?.mdExtensions ?? [".md"];
+  const mdExtensions = compilerOptions?.mdExtensions ?? [];
   const allExtensions = [...mdxExtensions, ...mdExtensions];
   const escapedExts = allExtensions.map((ext) => ext.replace(".", "\\."));
   const filter = new RegExp(`(${escapedExts.join("|")})(\\?.*)?$`);
@@ -18,13 +25,14 @@ function createReactMdxLoaderPlugin(compilerOptions) {
         const file = new VFile({ path: filePath, value: source });
         const compiled = await compile(file, {
           ...compilerOptions,
-          SourceMapGenerator
+          format: resolveCompileFormat(filePath, compilerOptions),
+          SourceMapGenerator: sourceMap.SourceMapGenerator
         });
-        const sourceMap = compiled.map ? `
+        const inlineSourceMap = compiled.map ? `
 //# sourceMappingURL=data:application/json;base64,${Buffer.from(JSON.stringify(compiled.map)).toString("base64")}
 ` : "";
         return {
-          contents: `${String(compiled.value)}${sourceMap}`,
+          contents: `${String(compiled.value)}${inlineSourceMap}`,
           loader: compilerOptions?.jsx ? "jsx" : "js",
           resolveDir: path.dirname(args.path)
         };

package/src/utils/react-mdx-loader-plugin.ts

@@ -2,12 +2,34 @@ import { readFileSync } from 'node:fs';
 import path from 'node:path';
 import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
 import { type CompileOptions, compile } from '@mdx-js/mdx';
-import { SourceMapGenerator } from 'source-map';
+import sourceMap from 'source-map';
 import { VFile } from 'vfile';
 
+/**
+ * Resolves the MDX parser mode for a React-backed MDX source file.
+ *
+ * When `.md` files are explicitly opted into the React MDX loader they still
+ * need to compile as MDX, not plain markdown. Otherwise top-level ESM exports
+ * like `config` are treated as literal text and the route cannot execute as a
+ * page module.
+ *
+ * @param filePath Absolute or relative source file path.
+ * @param compilerOptions User-provided MDX compiler options.
+ * @returns The compile format that should be passed to `@mdx-js/mdx`.
+ */
+function resolveCompileFormat(filePath: string, compilerOptions?: CompileOptions): CompileOptions['format'] {
+	const configuredFormat = compilerOptions?.format;
+
+	if (configuredFormat && configuredFormat !== 'detect') {
+		return configuredFormat;
+	}
+
+	return path.extname(filePath).toLowerCase() === '.md' ? 'mdx' : configuredFormat;
+}
+
 export function createReactMdxLoaderPlugin(compilerOptions?: CompileOptions): EcoBuildPlugin {
 	const mdxExtensions = compilerOptions?.mdxExtensions ?? ['.mdx'];
-	const mdExtensions = compilerOptions?.mdExtensions ?? ['.md'];
+	const mdExtensions = compilerOptions?.mdExtensions ?? [];
 	const allExtensions = [...mdxExtensions, ...mdExtensions];
 	const escapedExts = allExtensions.map((ext) => ext.replace('.', '\\.'));
 	const filter = new RegExp(`(${escapedExts.join('|')})(\\?.*)?$`);
@@ -22,15 +44,16 @@ export function createReactMdxLoaderPlugin(compilerOptions?: CompileOptions): Ec
 
 				const compiled = await compile(file, {
 					...compilerOptions,
-					SourceMapGenerator,
+					format: resolveCompileFormat(filePath, compilerOptions),
+					SourceMapGenerator: sourceMap.SourceMapGenerator,
 				});
 
-				const sourceMap = compiled.map
+				const inlineSourceMap = compiled.map
 					? `\n//# sourceMappingURL=data:application/json;base64,${Buffer.from(JSON.stringify(compiled.map)).toString('base64')}\n`
 					: '';
 
 				return {
-					contents: `${String(compiled.value)}${sourceMap}`,
+					contents: `${String(compiled.value)}${inlineSourceMap}`,
 					loader: compilerOptions?.jsx ? 'jsx' : 'js',
 					resolveDir: path.dirname(args.path),
 				};

package/src/utils/react-runtime-specifier-map.d.ts

@@ -0,0 +1,6 @@
+import type { ReactRouterAdapter } from '../router-adapter.js';
+import type { ReactRuntimeImports } from '../services/react-runtime-bundle.service.js';
+export declare const REACT_RUNTIME_SPECIFIERS: readonly ["react", "react-dom", "react/jsx-runtime", "react/jsx-dev-runtime", "react-dom/client"];
+export declare function buildReactRuntimeSpecifierMap(runtimeImports: ReactRuntimeImports, routerAdapter?: ReactRouterAdapter): Record<string, string>;
+export declare function getReactRuntimeExternalSpecifiers(): string[];
+export declare function getReactClientGraphAllowSpecifiers(runtimeSpecifiers: Iterable<string>, routerAdapter?: ReactRouterAdapter): string[];

package/src/utils/react-runtime-specifier-map.js

@@ -0,0 +1,37 @@
+const REACT_RUNTIME_SPECIFIERS = [
+  "react",
+  "react-dom",
+  "react/jsx-runtime",
+  "react/jsx-dev-runtime",
+  "react-dom/client"
+];
+function buildReactRuntimeSpecifierMap(runtimeImports, routerAdapter) {
+  const map = {
+    react: runtimeImports.react,
+    "react/jsx-runtime": runtimeImports.reactJsxRuntime,
+    "react/jsx-dev-runtime": runtimeImports.reactJsxDevRuntime,
+    "react-dom": runtimeImports.reactDom,
+    "react-dom/client": runtimeImports.reactDomClient
+  };
+  if (routerAdapter && runtimeImports.router) {
+    map[routerAdapter.importMapKey] = runtimeImports.router;
+  }
+  return map;
+}
+function getReactRuntimeExternalSpecifiers() {
+  return [...REACT_RUNTIME_SPECIFIERS];
+}
+function getReactClientGraphAllowSpecifiers(runtimeSpecifiers, routerAdapter) {
+  return [
+    "@ecopages/core",
+    ...REACT_RUNTIME_SPECIFIERS,
+    ...routerAdapter ? [routerAdapter.importMapKey] : [],
+    ...Array.from(runtimeSpecifiers)
+  ];
+}
+export {
+  REACT_RUNTIME_SPECIFIERS,
+  buildReactRuntimeSpecifierMap,
+  getReactClientGraphAllowSpecifiers,
+  getReactRuntimeExternalSpecifiers
+};

package/src/utils/react-runtime-specifier-map.ts

@@ -0,0 +1,45 @@
+import type { ReactRouterAdapter } from '../router-adapter.ts';
+import type { ReactRuntimeImports } from '../services/react-runtime-bundle.service.ts';
+
+export const REACT_RUNTIME_SPECIFIERS = [
+	'react',
+	'react-dom',
+	'react/jsx-runtime',
+	'react/jsx-dev-runtime',
+	'react-dom/client',
+] as const;
+
+export function buildReactRuntimeSpecifierMap(
+	runtimeImports: ReactRuntimeImports,
+	routerAdapter?: ReactRouterAdapter,
+): Record<string, string> {
+	const map: Record<string, string> = {
+		react: runtimeImports.react,
+		'react/jsx-runtime': runtimeImports.reactJsxRuntime,
+		'react/jsx-dev-runtime': runtimeImports.reactJsxDevRuntime,
+		'react-dom': runtimeImports.reactDom,
+		'react-dom/client': runtimeImports.reactDomClient,
+	};
+
+	if (routerAdapter && runtimeImports.router) {
+		map[routerAdapter.importMapKey] = runtimeImports.router;
+	}
+
+	return map;
+}
+
+export function getReactRuntimeExternalSpecifiers(): string[] {
+	return [...REACT_RUNTIME_SPECIFIERS];
+}
+
+export function getReactClientGraphAllowSpecifiers(
+	runtimeSpecifiers: Iterable<string>,
+	routerAdapter?: ReactRouterAdapter,
+): string[] {
+	return [
+		'@ecopages/core',
+		...REACT_RUNTIME_SPECIFIERS,
+		...(routerAdapter ? [routerAdapter.importMapKey] : []),
+		...Array.from(runtimeSpecifiers),
+	];
+}

package/src/utils/use-sync-external-store-shim-plugin.d.ts

@@ -0,0 +1,5 @@
+import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
+export declare function createUseSyncExternalStoreShimPlugin(options?: {
+    name?: string;
+    namespace?: string;
+}): EcoBuildPlugin;

package/src/utils/use-sync-external-store-shim-plugin.js

@@ -0,0 +1,41 @@
+function createUseSyncExternalStoreShimPlugin(options) {
+  const namespace = options?.namespace ?? "ecopages-react-use-sync-external-store-shim";
+  return {
+    name: options?.name ?? "react-use-sync-external-store-shim",
+    setup(build) {
+      build.onResolve({ filter: /^use-sync-external-store\/shim(?:\/index\.js)?$/ }, () => ({
+        path: "use-sync-external-store/shim",
+        namespace
+      }));
+      build.onLoad({ filter: /^use-sync-external-store\/shim$/, namespace }, () => ({
+        contents: "export { useSyncExternalStore } from 'react';",
+        loader: "js"
+      }));
+      build.onLoad({ filter: /[\\/]use-sync-external-store[\\/]shim[\\/]index\.js$/ }, () => ({
+        contents: "export { useSyncExternalStore } from 'react';",
+        loader: "js"
+      }));
+      build.onLoad(
+        {
+          filter: /[\\/]use-sync-external-store[\\/]cjs[\\/]use-sync-external-store-shim\.development\.js$/
+        },
+        () => ({
+          contents: "export { useSyncExternalStore } from 'react';",
+          loader: "js"
+        })
+      );
+      build.onLoad(
+        {
+          filter: /[\\/]use-sync-external-store[\\/]cjs[\\/]use-sync-external-store-shim\.production\.js$/
+        },
+        () => ({
+          contents: "export { useSyncExternalStore } from 'react';",
+          loader: "js"
+        })
+      );
+    }
+  };
+}
+export {
+  createUseSyncExternalStoreShimPlugin
+};

package/src/utils/use-sync-external-store-shim-plugin.ts

@@ -0,0 +1,45 @@
+import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
+
+export function createUseSyncExternalStoreShimPlugin(options?: { name?: string; namespace?: string }): EcoBuildPlugin {
+	const namespace = options?.namespace ?? 'ecopages-react-use-sync-external-store-shim';
+
+	return {
+		name: options?.name ?? 'react-use-sync-external-store-shim',
+		setup(build) {
+			build.onResolve({ filter: /^use-sync-external-store\/shim(?:\/index\.js)?$/ }, () => ({
+				path: 'use-sync-external-store/shim',
+				namespace,
+			}));
+
+			build.onLoad({ filter: /^use-sync-external-store\/shim$/, namespace }, () => ({
+				contents: "export { useSyncExternalStore } from 'react';",
+				loader: 'js',
+			}));
+
+			build.onLoad({ filter: /[\\/]use-sync-external-store[\\/]shim[\\/]index\.js$/ }, () => ({
+				contents: "export { useSyncExternalStore } from 'react';",
+				loader: 'js',
+			}));
+
+			build.onLoad(
+				{
+					filter: /[\\/]use-sync-external-store[\\/]cjs[\\/]use-sync-external-store-shim\.development\.js$/,
+				},
+				() => ({
+					contents: "export { useSyncExternalStore } from 'react';",
+					loader: 'js',
+				}),
+			);
+
+			build.onLoad(
+				{
+					filter: /[\\/]use-sync-external-store[\\/]cjs[\\/]use-sync-external-store-shim\.production\.js$/,
+				},
+				() => ({
+					contents: "export { useSyncExternalStore } from 'react';",
+					loader: 'js',
+				}),
+			);
+		},
+	};
+}