@ecopages/react 0.2.0-alpha.1

package/src/react.plugin.d.ts

@@ -0,0 +1,147 @@
+/**
+ * This module contains the react plugin for Ecopages
+ * @module
+ */
+import { IntegrationPlugin } from '@ecopages/core/plugins/integration-plugin';
+import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
+import type { HmrStrategy } from '@ecopages/core/hmr/hmr-strategy';
+import type { IHmrManager } from '@ecopages/core/internal-types';
+import type { AssetDefinition } from '@ecopages/core/services/asset-processing-service';
+import type { CompileOptions } from '@mdx-js/mdx';
+import type React from 'react';
+import { ReactRenderer } from './react-renderer.js';
+import type { ReactRouterAdapter } from './router-adapter.js';
+import type { ComponentBoundaryPolicyInput } from '@ecopages/core/plugins/integration-plugin';
+/**
+ * MDX configuration options for the React plugin
+ */
+export type ReactMdxOptions = {
+    /**
+     * Whether to enable MDX support.
+     * @default false
+     */
+    enabled: boolean;
+    /**
+     * Compiler options for MDX.
+     * @default undefined
+     */
+    compilerOptions?: Omit<CompileOptions, 'jsxImportSource' | 'jsxRuntime'>;
+    /**
+     * Remark plugins.
+     * @default undefined
+     */
+    remarkPlugins?: CompileOptions['remarkPlugins'];
+    /**
+     * Rehype plugins.
+     * @default undefined
+     */
+    rehypePlugins?: CompileOptions['rehypePlugins'];
+    /**
+     * Recma plugins.
+     * @default undefined
+     */
+    recmaPlugins?: CompileOptions['recmaPlugins'];
+    /**
+     * Custom extensions to be treated as MDX files.
+     * @default ['.mdx']
+     */
+    extensions?: string[];
+};
+/**
+ * Options for the React plugin
+ */
+export type ReactPluginOptions = {
+    extensions?: string[];
+    dependencies?: AssetDefinition[];
+    /**
+     * Enables explicit client graph mode for React page entries.
+     *
+     * When enabled, React page-entry bundling relies on explicit dependency declarations
+     * and skips AST-based `middleware`/`requires` stripping in the React path.
+     * @default false
+     */
+    explicitGraph?: boolean;
+    /**
+     * Router adapter for SPA navigation.
+     * When provided, pages with layouts will be wrapped in the router for client-side navigation.
+     * @example
+     * ```ts
+     * import { ecoRouter } from '@ecopages/react-router';
+     * reactPlugin({ router: ecoRouter() })
+     * ```
+     */
+    router?: ReactRouterAdapter;
+    /**
+     * MDX configuration for handling .mdx files within the React plugin.
+     * When enabled, MDX files are treated as React pages with full router support.
+     * @example
+     * ```ts
+     * reactPlugin({
+     *   router: ecoRouter(),
+     *   mdx: {
+     *     enabled: true,
+     *     extensions: ['.mdx', '.md'],
+     *     remarkPlugins: [remarkGfm],
+     *     rehypePlugins: [[rehypePrettyCode, { theme: '...' }]],
+     *   }
+     * })
+     * ```
+     */
+    mdx?: ReactMdxOptions;
+};
+/**
+ * The name of the React plugin
+ */
+export declare const PLUGIN_NAME = "react";
+/**
+ * The React plugin class
+ * This plugin provides support for React components in Ecopages
+ */
+export declare class ReactPlugin extends IntegrationPlugin<React.JSX.Element> {
+    renderer: typeof ReactRenderer;
+    routerAdapter: ReactRouterAdapter | undefined;
+    private mdxEnabled;
+    private mdxCompilerOptions?;
+    private mdxExtensions;
+    private mdxLoaderPlugin;
+    private runtimeBundleService;
+    private readonly hmrPageMetadataCache;
+    /**
+     * Indicates whether React explicit graph mode is enabled for renderer/HMR behavior.
+     */
+    private explicitGraphEnabled;
+    constructor(options?: Omit<ReactPluginOptions, 'name'>);
+    get plugins(): EcoBuildPlugin[];
+    setup(): Promise<void>;
+    /**
+     * Provides React-specific HMR strategy with Fast Refresh support.
+     *
+     * The strategy shares a React-only page metadata cache with the renderer so
+     * save-time rebuilds can reuse declared-module analysis without expanding the
+     * core HMR interfaces.
+     *
+     * @returns ReactHmrStrategy instance for handling React component updates
+     */
+    getHmrStrategy(): HmrStrategy | undefined;
+    /**
+     * Override to register React-specific specifier mappings for HMR.
+     */
+    setHmrManager(hmrManager: IHmrManager): void;
+    /**
+     * Declares React's boundary deferral rule for cross-integration rendering.
+     *
+     * React defers when a render pass owned by another integration enters a React
+     * component boundary. That boundary is then resolved later through the marker
+     * graph stage using the React renderer.
+     *
+     * @param input Boundary metadata for the active render pass.
+     * @returns `true` when the boundary should be deferred into the marker pass.
+     */
+    shouldDeferComponentBoundary(input: ComponentBoundaryPolicyInput): boolean;
+}
+/**
+ * Factory function to create a React plugin instance
+ * @param options Configuration options for the React plugin
+ * @returns A new ReactPlugin instance
+ */
+export declare function reactPlugin(options?: ReactPluginOptions): ReactPlugin;

package/src/react.plugin.js

@@ -0,0 +1,126 @@
+import { IntegrationPlugin } from "@ecopages/core/plugins/integration-plugin";
+import { Logger } from "@ecopages/logger";
+import { ReactRenderer } from "./react-renderer.js";
+import { ReactHmrStrategy } from "./react-hmr-strategy.js";
+import { ReactRuntimeBundleService } from "./services/react-runtime-bundle.service.js";
+import { ReactHmrPageMetadataCache } from "./services/react-hmr-page-metadata-cache.js";
+const appLogger = new Logger("[ReactPlugin]");
+const PLUGIN_NAME = "react";
+class ReactPlugin extends IntegrationPlugin {
+  renderer = ReactRenderer;
+  routerAdapter;
+  mdxEnabled;
+  mdxCompilerOptions;
+  mdxExtensions;
+  mdxLoaderPlugin;
+  runtimeBundleService;
+  hmrPageMetadataCache = new ReactHmrPageMetadataCache();
+  /**
+   * Indicates whether React explicit graph mode is enabled for renderer/HMR behavior.
+   */
+  explicitGraphEnabled;
+  constructor(options) {
+    const extensions = [".tsx"];
+    const mdxExtensions = options?.mdx?.extensions ?? [".mdx"];
+    if (options?.mdx?.enabled) {
+      extensions.push(...mdxExtensions);
+    } else if (options?.mdx?.extensions?.length) {
+      appLogger.warn(
+        "MDX extensions provided but MDX is disabled. MDX files will not be processed. Set mdx.enabled to true to enable MDX support."
+      );
+    }
+    super({
+      name: PLUGIN_NAME,
+      extensions,
+      ...options
+    });
+    this.mdxEnabled = options?.mdx?.enabled ?? false;
+    this.mdxExtensions = mdxExtensions;
+    if (this.mdxEnabled) {
+      const { compilerOptions, remarkPlugins, rehypePlugins, recmaPlugins } = options?.mdx || {};
+      this.mdxCompilerOptions = {
+        ...compilerOptions,
+        remarkPlugins: [...compilerOptions?.remarkPlugins || [], ...remarkPlugins || []],
+        rehypePlugins: [...compilerOptions?.rehypePlugins || [], ...rehypePlugins || []],
+        recmaPlugins: [...compilerOptions?.recmaPlugins || [], ...recmaPlugins || []],
+        jsxImportSource: "react",
+        jsxRuntime: "automatic",
+        development: process.env.NODE_ENV === "development"
+      };
+      appLogger.debug("MDX mode enabled with React jsx runtime");
+    }
+    this.routerAdapter = options?.router;
+    this.runtimeBundleService = new ReactRuntimeBundleService({
+      routerAdapter: this.routerAdapter
+    });
+    this.explicitGraphEnabled = options?.explicitGraph ?? false;
+    ReactRenderer.routerAdapter = this.routerAdapter;
+    ReactRenderer.mdxCompilerOptions = this.mdxCompilerOptions;
+    ReactRenderer.mdxExtensions = this.mdxExtensions;
+    ReactRenderer.explicitGraphEnabled = this.explicitGraphEnabled;
+    ReactRenderer.hmrPageMetadataCache = this.hmrPageMetadataCache;
+    this.integrationDependencies.unshift(...this.runtimeBundleService.getDependencies());
+  }
+  get plugins() {
+    if (this.mdxLoaderPlugin) {
+      return [this.mdxLoaderPlugin];
+    }
+    return [];
+  }
+  async setup() {
+    if (this.mdxEnabled && this.mdxCompilerOptions) {
+      const { createReactMdxLoaderPlugin } = await import("./utils/react-mdx-loader-plugin.js");
+      this.mdxLoaderPlugin = createReactMdxLoaderPlugin(this.mdxCompilerOptions);
+    }
+    await super.setup();
+  }
+  /**
+   * Provides React-specific HMR strategy with Fast Refresh support.
+   *
+   * The strategy shares a React-only page metadata cache with the renderer so
+   * save-time rebuilds can reuse declared-module analysis without expanding the
+   * core HMR interfaces.
+   *
+   * @returns ReactHmrStrategy instance for handling React component updates
+   */
+  getHmrStrategy() {
+    if (!this.hmrManager || !this.appConfig) {
+      return void 0;
+    }
+    const context = this.hmrManager.getDefaultContext();
+    return new ReactHmrStrategy(
+      context,
+      this.hmrPageMetadataCache,
+      this.mdxCompilerOptions,
+      this.explicitGraphEnabled
+    );
+  }
+  /**
+   * Override to register React-specific specifier mappings for HMR.
+   */
+  setHmrManager(hmrManager) {
+    super.setHmrManager(hmrManager);
+    hmrManager.registerSpecifierMap(this.runtimeBundleService.getSpecifierMap());
+  }
+  /**
+   * Declares React's boundary deferral rule for cross-integration rendering.
+   *
+   * React defers when a render pass owned by another integration enters a React
+   * component boundary. That boundary is then resolved later through the marker
+   * graph stage using the React renderer.
+   *
+   * @param input Boundary metadata for the active render pass.
+   * @returns `true` when the boundary should be deferred into the marker pass.
+   */
+  shouldDeferComponentBoundary(input) {
+    return input.targetIntegration === this.name && input.currentIntegration !== this.name;
+  }
+}
+function reactPlugin(options) {
+  return new ReactPlugin(options);
+}
+export {
+  PLUGIN_NAME,
+  ReactPlugin,
+  reactPlugin
+};

package/src/react.plugin.ts

@@ -0,0 +1,241 @@
+/**
+ * This module contains the react plugin for Ecopages
+ * @module
+ */
+import { IntegrationPlugin } from '@ecopages/core/plugins/integration-plugin';
+import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
+import type { HmrStrategy } from '@ecopages/core/hmr/hmr-strategy';
+import type { IHmrManager } from '@ecopages/core/internal-types';
+import type { AssetDefinition } from '@ecopages/core/services/asset-processing-service';
+import { Logger } from '@ecopages/logger';
+import type { CompileOptions } from '@mdx-js/mdx';
+import type React from 'react';
+import { ReactRenderer } from './react-renderer.ts';
+import { ReactHmrStrategy } from './react-hmr-strategy.ts';
+import type { ReactRouterAdapter } from './router-adapter.ts';
+import type { ComponentBoundaryPolicyInput } from '@ecopages/core/plugins/integration-plugin';
+import { ReactRuntimeBundleService } from './services/react-runtime-bundle.service.ts';
+import { ReactHmrPageMetadataCache } from './services/react-hmr-page-metadata-cache.ts';
+
+const appLogger = new Logger('[ReactPlugin]');
+
+/**
+ * MDX configuration options for the React plugin
+ */
+export type ReactMdxOptions = {
+	/**
+	 * Whether to enable MDX support.
+	 * @default false
+	 */
+	enabled: boolean;
+	/**
+	 * Compiler options for MDX.
+	 * @default undefined
+	 */
+	compilerOptions?: Omit<CompileOptions, 'jsxImportSource' | 'jsxRuntime'>;
+	/**
+	 * Remark plugins.
+	 * @default undefined
+	 */
+	remarkPlugins?: CompileOptions['remarkPlugins'];
+	/**
+	 * Rehype plugins.
+	 * @default undefined
+	 */
+	rehypePlugins?: CompileOptions['rehypePlugins'];
+	/**
+	 * Recma plugins.
+	 * @default undefined
+	 */
+	recmaPlugins?: CompileOptions['recmaPlugins'];
+	/**
+	 * Custom extensions to be treated as MDX files.
+	 * @default ['.mdx']
+	 */
+	extensions?: string[];
+};
+
+/**
+ * Options for the React plugin
+ */
+export type ReactPluginOptions = {
+	extensions?: string[];
+	dependencies?: AssetDefinition[];
+	/**
+	 * Enables explicit client graph mode for React page entries.
+	 *
+	 * When enabled, React page-entry bundling relies on explicit dependency declarations
+	 * and skips AST-based `middleware`/`requires` stripping in the React path.
+	 * @default false
+	 */
+	explicitGraph?: boolean;
+	/**
+	 * Router adapter for SPA navigation.
+	 * When provided, pages with layouts will be wrapped in the router for client-side navigation.
+	 * @example
+	 * ```ts
+	 * import { ecoRouter } from '@ecopages/react-router';
+	 * reactPlugin({ router: ecoRouter() })
+	 * ```
+	 */
+	router?: ReactRouterAdapter;
+	/**
+	 * MDX configuration for handling .mdx files within the React plugin.
+	 * When enabled, MDX files are treated as React pages with full router support.
+	 * @example
+	 * ```ts
+	 * reactPlugin({
+	 *   router: ecoRouter(),
+	 *   mdx: {
+	 *     enabled: true,
+	 *     extensions: ['.mdx', '.md'],
+	 *     remarkPlugins: [remarkGfm],
+	 *     rehypePlugins: [[rehypePrettyCode, { theme: '...' }]],
+	 *   }
+	 * })
+	 * ```
+	 */
+	mdx?: ReactMdxOptions;
+};
+
+/**
+ * The name of the React plugin
+ */
+export const PLUGIN_NAME = 'react';
+
+/**
+ * The React plugin class
+ * This plugin provides support for React components in Ecopages
+ */
+export class ReactPlugin extends IntegrationPlugin<React.JSX.Element> {
+	renderer = ReactRenderer;
+	routerAdapter: ReactRouterAdapter | undefined;
+	private mdxEnabled: boolean;
+	private mdxCompilerOptions?: CompileOptions;
+	private mdxExtensions: string[];
+	private mdxLoaderPlugin: EcoBuildPlugin | undefined;
+	private runtimeBundleService: ReactRuntimeBundleService;
+	private readonly hmrPageMetadataCache = new ReactHmrPageMetadataCache();
+	/**
+	 * Indicates whether React explicit graph mode is enabled for renderer/HMR behavior.
+	 */
+	private explicitGraphEnabled: boolean;
+
+	constructor(options?: Omit<ReactPluginOptions, 'name'>) {
+		const extensions = ['.tsx'];
+		const mdxExtensions = options?.mdx?.extensions ?? ['.mdx'];
+
+		if (options?.mdx?.enabled) {
+			extensions.push(...mdxExtensions);
+		} else if (options?.mdx?.extensions?.length) {
+			appLogger.warn(
+				'MDX extensions provided but MDX is disabled. MDX files will not be processed. Set mdx.enabled to true to enable MDX support.',
+			);
+		}
+
+		super({
+			name: PLUGIN_NAME,
+			extensions,
+			...options,
+		});
+
+		this.mdxEnabled = options?.mdx?.enabled ?? false;
+		this.mdxExtensions = mdxExtensions;
+
+		if (this.mdxEnabled) {
+			const { compilerOptions, remarkPlugins, rehypePlugins, recmaPlugins } = options?.mdx || {};
+			this.mdxCompilerOptions = {
+				...compilerOptions,
+				remarkPlugins: [...(compilerOptions?.remarkPlugins || []), ...(remarkPlugins || [])],
+				rehypePlugins: [...(compilerOptions?.rehypePlugins || []), ...(rehypePlugins || [])],
+				recmaPlugins: [...(compilerOptions?.recmaPlugins || []), ...(recmaPlugins || [])],
+				jsxImportSource: 'react',
+				jsxRuntime: 'automatic',
+				development: process.env.NODE_ENV === 'development',
+			};
+			appLogger.debug('MDX mode enabled with React jsx runtime');
+		}
+
+		this.routerAdapter = options?.router;
+		this.runtimeBundleService = new ReactRuntimeBundleService({
+			routerAdapter: this.routerAdapter,
+		});
+		this.explicitGraphEnabled = options?.explicitGraph ?? false;
+		ReactRenderer.routerAdapter = this.routerAdapter;
+		ReactRenderer.mdxCompilerOptions = this.mdxCompilerOptions;
+		ReactRenderer.mdxExtensions = this.mdxExtensions;
+		ReactRenderer.explicitGraphEnabled = this.explicitGraphEnabled;
+		ReactRenderer.hmrPageMetadataCache = this.hmrPageMetadataCache;
+		this.integrationDependencies.unshift(...this.runtimeBundleService.getDependencies());
+	}
+
+	override get plugins(): EcoBuildPlugin[] {
+		if (this.mdxLoaderPlugin) {
+			return [this.mdxLoaderPlugin];
+		}
+		return [];
+	}
+
+	override async setup(): Promise<void> {
+		if (this.mdxEnabled && this.mdxCompilerOptions) {
+			const { createReactMdxLoaderPlugin } = await import('./utils/react-mdx-loader-plugin.ts');
+			this.mdxLoaderPlugin = createReactMdxLoaderPlugin(this.mdxCompilerOptions);
+		}
+		await super.setup();
+	}
+
+	/**
+	 * Provides React-specific HMR strategy with Fast Refresh support.
+	 *
+	 * The strategy shares a React-only page metadata cache with the renderer so
+	 * save-time rebuilds can reuse declared-module analysis without expanding the
+	 * core HMR interfaces.
+	 *
+	 * @returns ReactHmrStrategy instance for handling React component updates
+	 */
+	override getHmrStrategy(): HmrStrategy | undefined {
+		if (!this.hmrManager || !this.appConfig) {
+			return undefined;
+		}
+
+		const context = this.hmrManager.getDefaultContext();
+
+		return new ReactHmrStrategy(
+			context,
+			this.hmrPageMetadataCache,
+			this.mdxCompilerOptions,
+			this.explicitGraphEnabled,
+		);
+	}
+
+	/**
+	 * Override to register React-specific specifier mappings for HMR.
+	 */
+	override setHmrManager(hmrManager: IHmrManager): void {
+		super.setHmrManager(hmrManager);
+		hmrManager.registerSpecifierMap(this.runtimeBundleService.getSpecifierMap());
+	}
+
+	/**
+	 * Declares React's boundary deferral rule for cross-integration rendering.
+	 *
+	 * React defers when a render pass owned by another integration enters a React
+	 * component boundary. That boundary is then resolved later through the marker
+	 * graph stage using the React renderer.
+	 *
+	 * @param input Boundary metadata for the active render pass.
+	 * @returns `true` when the boundary should be deferred into the marker pass.
+	 */
+	override shouldDeferComponentBoundary(input: ComponentBoundaryPolicyInput): boolean {
+		return input.targetIntegration === this.name && input.currentIntegration !== this.name;
+	}
+}
+
+/**
+ * Factory function to create a React plugin instance
+ * @param options Configuration options for the React plugin
+ * @returns A new ReactPlugin instance
+ */
+export function reactPlugin(options?: ReactPluginOptions): ReactPlugin {
+	return new ReactPlugin(options);
+}

package/src/router-adapter.d.ts

@@ -0,0 +1,87 @@
+/**
+ * Router adapter interface for React integration.
+ * Allows pluggable SPA routers to be used with the React plugin.
+ * @module
+ */
+/**
+ * Configuration for a React router adapter.
+ * Implement this interface to create custom router integrations.
+ *
+ * @example
+ * ```ts
+ * const myRouter: ReactRouterAdapter = {
+ *   name: 'my-router',
+ *   bundle: {
+ *     importPath: '@my/router/browser.ts',
+ *     outputName: 'my-router',
+ *     externals: ['react', 'react-dom'],
+ *   },
+ *   importMapKey: '@my/router',
+ *   components: {
+ *     router: 'MyRouter',
+ *     pageContent: 'PageOutlet',
+ *   },
+ *   getRouterProps: (page, props) => `{ page: ${page}, pageProps: ${props} }`,
+ * };
+ * ```
+ */
+export interface ReactRouterAdapter {
+    /**
+     * Unique identifier for caching and debugging.
+     */
+    name: string;
+    /**
+     * Runtime bundle configuration.
+     */
+    bundle: {
+        /**
+         * Node module import path for the browser-compatible entry.
+         * @example '@ecopages/react-router/browser.ts'
+         */
+        importPath: string;
+        /**
+         * Output filename (without extension).
+         * @example 'react-router-esm'
+         */
+        outputName: string;
+        /**
+         * Packages to externalize when bundling.
+         * These should be available via import map.
+         * @example ['react', 'react-dom', 'react/jsx-runtime']
+         */
+        externals: string[];
+    };
+    /**
+     * Bare specifier for the import map entry.
+     * This is what the hydration script will import from.
+     * @example '@ecopages/react-router'
+     */
+    importMapKey: string;
+    /**
+     * Component names to import from the router package.
+     */
+    components: {
+        /**
+         * The router component that wraps the layout.
+         * @example 'EcoRouter'
+         */
+        router: string;
+        /**
+         * The component that renders the current page content.
+         * @example 'PageContent'
+         */
+        pageContent: string;
+    };
+    /**
+     * Generate the props object for the router component.
+     * @param page - Variable name holding the page component
+     * @param props - Variable name holding the page props
+     * @returns Code string for the router props
+     * @example
+     * ```ts
+     * getRouterProps: (page, props) => `{ page: ${page}, pageProps: ${props} }`
+     * // Results in: { page: Component, pageProps: props }
+     * ```
+     */
+    getRouterProps(page: string, props: string): string;
+}

package/src/router-adapter.ts

@@ -0,0 +1,95 @@
+/**
+ * Router adapter interface for React integration.
+ * Allows pluggable SPA routers to be used with the React plugin.
+ * @module
+ */
+
+/**
+ * Configuration for a React router adapter.
+ * Implement this interface to create custom router integrations.
+ *
+ * @example
+ * ```ts
+ * const myRouter: ReactRouterAdapter = {
+ *   name: 'my-router',
+ *   bundle: {
+ *     importPath: '@my/router/browser.ts',
+ *     outputName: 'my-router',
+ *     externals: ['react', 'react-dom'],
+ *   },
+ *   importMapKey: '@my/router',
+ *   components: {
+ *     router: 'MyRouter',
+ *     pageContent: 'PageOutlet',
+ *   },
+ *   getRouterProps: (page, props) => `{ page: ${page}, pageProps: ${props} }`,
+ * };
+ * ```
+ */
+export interface ReactRouterAdapter {
+	/**
+	 * Unique identifier for caching and debugging.
+	 */
+	name: string;
+
+	/**
+	 * Runtime bundle configuration.
+	 */
+	bundle: {
+		/**
+		 * Node module import path for the browser-compatible entry.
+		 * @example '@ecopages/react-router/browser.ts'
+		 */
+		importPath: string;
+
+		/**
+		 * Output filename (without extension).
+		 * @example 'react-router-esm'
+		 */
+		outputName: string;
+
+		/**
+		 * Packages to externalize when bundling.
+		 * These should be available via import map.
+		 * @example ['react', 'react-dom', 'react/jsx-runtime']
+		 */
+		externals: string[];
+	};
+
+	/**
+	 * Bare specifier for the import map entry.
+	 * This is what the hydration script will import from.
+	 * @example '@ecopages/react-router'
+	 */
+	importMapKey: string;
+
+	/**
+	 * Component names to import from the router package.
+	 */
+	components: {
+		/**
+		 * The router component that wraps the layout.
+		 * @example 'EcoRouter'
+		 */
+		router: string;
+
+		/**
+		 * The component that renders the current page content.
+		 * @example 'PageContent'
+		 */
+		pageContent: string;
+	};
+
+	/**
+	 * Generate the props object for the router component.
+	 * @param page - Variable name holding the page component
+	 * @param props - Variable name holding the page props
+	 * @returns Code string for the router props
+	 * @example
+	 * ```ts
+	 * getRouterProps: (page, props) => `{ page: ${page}, pageProps: ${props} }`
+	 * // Results in: { page: Component, pageProps: props }
+	 * ```
+	 */
+	getRouterProps(page: string, props: string): string;
+}