@ecopages/react 0.2.0-alpha.2 → 0.2.0-alpha.21

package/src/services/react-bundle.service.js

@@ -1,13 +1,23 @@
 import { createClientGraphBoundaryPlugin } from "../utils/client-graph-boundary-plugin.js";
+import {
+  buildReactRuntimeSpecifierMap,
+  getReactClientGraphAllowSpecifiers,
+  getReactRuntimeExternalSpecifiers
+} from "../utils/react-runtime-specifier-map.js";
+import { createUseSyncExternalStoreShimPlugin } from "../utils/use-sync-external-store-shim-plugin.js";
+import { createRuntimeSpecifierAliasPlugin } from "@ecopages/core/build/runtime-specifier-alias-plugin";
+import { createForeignJsxOverridePlugin } from "@ecopages/core/plugins/foreign-jsx-override-plugin";
 import { ReactRuntimeBundleService } from "./react-runtime-bundle.service.js";
 class ReactBundleService {
+  runtimeBundleService;
+  config;
   constructor(config) {
     this.config = config;
     this.runtimeBundleService = new ReactRuntimeBundleService({
+      rootDir: config.rootDir,
       routerAdapter: config.routerAdapter
     });
   }
-  runtimeBundleService;
   /**
    * Returns resolved runtime import paths for the React runtime.
    */
@@ -24,8 +34,9 @@ class ReactBundleService {
    */
   async createBundleOptions(componentName, isMdx, declaredModules) {
     const runtimeImports = this.getRuntimeImports();
+    const runtimeSpecifierMap = buildReactRuntimeSpecifierMap(runtimeImports, this.config.routerAdapter);
     const options = {
-      external: ["react", "react-dom", "react/jsx-runtime", "react/jsx-dev-runtime", "react-dom/client"],
+      external: getReactRuntimeExternalSpecifiers(),
       mainFields: ["module", "browser", "main"],
       naming: `${componentName}.[ext]`,
       ...import.meta.env?.NODE_ENV === "production" && {
@@ -37,24 +48,35 @@ class ReactBundleService {
     const graphBoundaryPlugin = createClientGraphBoundaryPlugin({
       absWorkingDir: this.config.rootDir,
       declaredModules,
-      alwaysAllowSpecifiers: [
-        "@ecopages/core",
-        "react",
-        "react-dom",
-        "react/jsx-runtime",
-        "react/jsx-dev-runtime",
-        "react-dom/client",
-        ...this.config.routerAdapter ? [this.config.routerAdapter.importMapKey] : []
-      ]
+      alwaysAllowSpecifiers: getReactClientGraphAllowSpecifiers([], this.config.routerAdapter)
+    });
+    const foreignJsxOverridePlugin = createForeignJsxOverridePlugin({
+      name: "react-renderer-foreign-jsx-override",
+      hostJsxImportSource: this.config.jsxImportSource ?? "react",
+      foreignExtensions: this.config.nonReactExtensions ?? []
+    });
+    const runtimeAliasPlugin = this.createRuntimeAliasPlugin(runtimeSpecifierMap);
+    const useSyncExternalStoreShimPlugin = createUseSyncExternalStoreShimPlugin({
+      name: "react-renderer-use-sync-external-store-shim",
+      namespace: "ecopages-react-renderer-shim"
     });
-    const runtimeAliasPlugin = this.createRuntimeAliasPlugin(runtimeImports);
-    const useSyncExternalStoreShimPlugin = this.createSyncExternalStorePlugin();
     if (isMdx && this.config.mdxCompilerOptions) {
       const { createReactMdxLoaderPlugin } = await import("../utils/react-mdx-loader-plugin.js");
       const mdxPlugin = createReactMdxLoaderPlugin(this.config.mdxCompilerOptions);
-      options.plugins = [runtimeAliasPlugin, mdxPlugin, useSyncExternalStoreShimPlugin, graphBoundaryPlugin];
+      options.plugins = [
+        foreignJsxOverridePlugin,
+        graphBoundaryPlugin,
+        runtimeAliasPlugin,
+        mdxPlugin,
+        useSyncExternalStoreShimPlugin
+      ];
     } else {
-      options.plugins = [runtimeAliasPlugin, useSyncExternalStoreShimPlugin, graphBoundaryPlugin];
+      options.plugins = [
+        foreignJsxOverridePlugin,
+        graphBoundaryPlugin,
+        runtimeAliasPlugin,
+        useSyncExternalStoreShimPlugin
+      ];
     }
     return options;
   }
@@ -62,82 +84,8 @@ class ReactBundleService {
    * Creates the esbuild plugin that rewrites bare React specifiers
    * to their runtime asset URLs.
    */
-  createRuntimeAliasPlugin(runtimeImports) {
-    const aliases = /* @__PURE__ */ new Map([
-      ["react", runtimeImports.react],
-      ["react-dom/client", runtimeImports.reactDomClient],
-      ["react/jsx-runtime", runtimeImports.reactJsxRuntime],
-      ["react/jsx-dev-runtime", runtimeImports.reactJsxDevRuntime],
-      ["react-dom", runtimeImports.reactDom]
-    ]);
-    if (this.config.routerAdapter && runtimeImports.router) {
-      aliases.set(this.config.routerAdapter.importMapKey, runtimeImports.router);
-    }
-    const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-    const pattern = new RegExp(
-      `^(${Array.from(aliases.keys()).map((key) => escapeRegExp(key)).join("|")})$`
-    );
-    return {
-      name: "react-runtime-import-alias",
-      setup(build) {
-        build.onResolve({ filter: pattern }, (args) => {
-          const mappedPath = aliases.get(args.path);
-          if (!mappedPath) {
-            return void 0;
-          }
-          return {
-            path: mappedPath,
-            external: true
-          };
-        });
-      }
-    };
-  }
-  /**
-   * Creates the esbuild plugin that shims `use-sync-external-store/shim`
-   * to re-export from React's built-in `useSyncExternalStore`.
-   * This is needed because some packages use `use-sync-external-store/shim`
-   * but React 18+ has built-in `useSyncExternalStore`.
-   */
-  createSyncExternalStorePlugin() {
-    return {
-      name: "react-renderer-use-sync-external-store-shim",
-      setup(build) {
-        build.onResolve({ filter: /^use-sync-external-store\/shim(?:\/index\.js)?$/ }, () => ({
-          path: "use-sync-external-store/shim",
-          namespace: "ecopages-react-renderer-shim"
-        }));
-        build.onLoad(
-          { filter: /^use-sync-external-store\/shim$/, namespace: "ecopages-react-renderer-shim" },
-          () => ({
-            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"
-          })
-        );
-      }
-    };
+  createRuntimeAliasPlugin(runtimeSpecifierMap) {
+    return createRuntimeSpecifierAliasPlugin(runtimeSpecifierMap, { name: "react-runtime-import-alias" });
   }
 }
 export {

package/src/services/react-hmr-page-metadata-cache.d.ts

@@ -6,6 +6,11 @@
  */
 export declare class ReactHmrPageMetadataCache {
     private readonly declaredModulesByEntrypoint;
+    private readonly ownedEntrypoints;
+    /**
+     * Marks an HMR entrypoint as React-owned.
+     */
+    markOwnedEntrypoint(entrypointPath: string): void;
     /**
      * Stores the declared browser modules for a page entrypoint.
      */
@@ -14,4 +19,8 @@ export declare class ReactHmrPageMetadataCache {
      * Returns the last known declared browser modules for a page entrypoint.
      */
     getDeclaredModules(entrypointPath: string): string[] | undefined;
+    /**
+     * Returns true when the watched entrypoint is owned by the React integration.
+     */
+    ownsEntrypoint(entrypointPath: string): boolean;
 }

package/src/services/react-hmr-page-metadata-cache.js

@@ -1,18 +1,34 @@
+import path from "node:path";
 class ReactHmrPageMetadataCache {
   declaredModulesByEntrypoint = /* @__PURE__ */ new Map();
+  ownedEntrypoints = /* @__PURE__ */ new Set();
+  /**
+   * Marks an HMR entrypoint as React-owned.
+   */
+  markOwnedEntrypoint(entrypointPath) {
+    this.ownedEntrypoints.add(path.resolve(entrypointPath));
+  }
   /**
    * Stores the declared browser modules for a page entrypoint.
    */
   setDeclaredModules(entrypointPath, declaredModules) {
-    this.declaredModulesByEntrypoint.set(entrypointPath, [...declaredModules]);
+    const resolvedEntrypointPath = path.resolve(entrypointPath);
+    this.markOwnedEntrypoint(resolvedEntrypointPath);
+    this.declaredModulesByEntrypoint.set(resolvedEntrypointPath, [...declaredModules]);
   }
   /**
    * Returns the last known declared browser modules for a page entrypoint.
    */
   getDeclaredModules(entrypointPath) {
-    const declaredModules = this.declaredModulesByEntrypoint.get(entrypointPath);
+    const declaredModules = this.declaredModulesByEntrypoint.get(path.resolve(entrypointPath));
     return declaredModules ? [...declaredModules] : void 0;
   }
+  /**
+   * Returns true when the watched entrypoint is owned by the React integration.
+   */
+  ownsEntrypoint(entrypointPath) {
+    return this.ownedEntrypoints.has(path.resolve(entrypointPath));
+  }
 }
 export {
   ReactHmrPageMetadataCache

package/src/services/react-hydration-asset.service.d.ts

@@ -23,21 +23,24 @@ export interface ReactHydrationAssetServiceConfig {
     bundleService: ReactBundleService;
     hmrPageMetadataCache?: ReactHmrPageMetadataCache;
 }
+export declare function getReactIslandComponentKey(componentFile: string, config?: EcoComponentConfig): string;
 /**
  * Manages the creation of client-side hydration assets for React pages and component islands.
  */
 export declare class ReactHydrationAssetService {
     private readonly config;
     constructor(config: ReactHydrationAssetServiceConfig);
+    private getIslandBundleName;
+    private getIslandHydrationName;
     /**
      * Resolves the import path for the bundled page component.
      * Uses HMR manager for development or constructs static path for production.
      *
      * @param pagePath - Absolute path to the page source file
-     * @param componentName - Generated unique component name
+     * @param assetName - Generated asset name
      * @returns The resolved import path for the bundled component
      */
-    resolveAssetImportPath(pagePath: string, componentName: string): Promise<string>;
+    resolveAssetImportPath(pagePath: string, assetName: string): Promise<string>;
     /**
      * Creates the asset dependencies for a page: the bundled component and hydration script.
      *
@@ -54,15 +57,13 @@ export declare class ReactHydrationAssetService {
     /**
      * Builds client-side assets for a React component island.
      *
-     * Includes the bundled component entry and an inline hydration bootstrap script.
+     * Includes the bundled component entry and a shared hydration bootstrap script.
      *
      * @param componentFile - Absolute path to the component source file
-     * @param componentInstanceId - Unique instance ID for DOM targeting
-     * @param props - Serialized props for client-side hydration
      * @param config - Optional component config with `__eco` metadata
      * @returns Processed assets ready for injection
      */
-    buildComponentRenderAssets(componentFile: string, componentInstanceId: string, props: Record<string, unknown>, config?: EcoComponentConfig): Promise<ProcessedAsset[]>;
+    buildComponentRenderAssets(componentFile: string, config?: EcoComponentConfig): Promise<ProcessedAsset[]>;
     /**
      * Builds all client-side route assets for a page.
      *

package/src/services/react-hydration-asset.service.js

@@ -4,27 +4,36 @@ import { RESOLVED_ASSETS_DIR } from "@ecopages/core/constants";
 import {
   AssetFactory
 } from "@ecopages/core/services/asset-processing-service";
-import { createHydrationScript } from "../utils/hydration-scripts.js";
-import { createIslandHydrationScript } from "../utils/hydration-scripts.js";
+import { createHydrationScript, createIslandHydrationScript } from "../utils/hydration-scripts.js";
 import { collectDeclaredModulesInConfig } from "../utils/declared-modules.js";
+function getReactIslandComponentKey(componentFile, config) {
+  return rapidhash(`${componentFile}:${config?.__eco?.id ?? ""}`).toString();
+}
 class ReactHydrationAssetService {
+  config;
   constructor(config) {
     this.config = config;
   }
+  getIslandBundleName(componentFile) {
+    return `ecopages-react-island-${rapidhash(componentFile)}`;
+  }
+  getIslandHydrationName(bundleName, componentKey) {
+    return `${bundleName}-hydration-${componentKey}`;
+  }
   /**
    * Resolves the import path for the bundled page component.
    * Uses HMR manager for development or constructs static path for production.
    *
    * @param pagePath - Absolute path to the page source file
-   * @param componentName - Generated unique component name
+   * @param assetName - Generated asset name
    * @returns The resolved import path for the bundled component
    */
-  async resolveAssetImportPath(pagePath, componentName) {
+  async resolveAssetImportPath(pagePath, assetName) {
     const hmrManager = this.config.assetProcessingService?.getHmrManager();
     if (hmrManager?.isEnabled()) {
       return hmrManager.registerEntrypoint(pagePath);
     }
-    return `/${path.join(RESOLVED_ASSETS_DIR, path.relative(this.config.srcDir, pagePath)).replace(path.basename(pagePath), `${componentName}.js`).replace(/\\/g, "/")}`;
+    return `/${path.join(RESOLVED_ASSETS_DIR, path.relative(this.config.srcDir, pagePath)).replace(path.basename(pagePath), `${assetName}.js`).replace(/\\/g, "/")}`;
   }
   /**
    * Creates the asset dependencies for a page: the bundled component and hydration script.
@@ -59,7 +68,7 @@ class ReactHydrationAssetService {
       dependencies.push(
         AssetFactory.createContentScript({
           position: "head",
-          content: `window.__ECO_PAGE__={module:"${importPath}",props:${JSON.stringify(props)}};`,
+          content: `window.__ECO_PAGES__=window.__ECO_PAGES__||{};window.__ECO_PAGES__.page={module:"${importPath}",props:${JSON.stringify(props)}};`,
           name: `${componentName}-props`,
           bundle: false,
           attributes: {
@@ -96,19 +105,22 @@ class ReactHydrationAssetService {
   /**
    * Builds client-side assets for a React component island.
    *
-   * Includes the bundled component entry and an inline hydration bootstrap script.
+   * Includes the bundled component entry and a shared hydration bootstrap script.
    *
    * @param componentFile - Absolute path to the component source file
-   * @param componentInstanceId - Unique instance ID for DOM targeting
-   * @param props - Serialized props for client-side hydration
    * @param config - Optional component config with `__eco` metadata
    * @returns Processed assets ready for injection
    */
-  async buildComponentRenderAssets(componentFile, componentInstanceId, props, config) {
-    const componentName = `ecopages-react-island-${rapidhash(`${componentFile}:${componentInstanceId}`)}`;
-    const importPath = await this.resolveAssetImportPath(componentFile, componentName);
+  async buildComponentRenderAssets(componentFile, config) {
+    const componentName = this.getIslandBundleName(componentFile);
+    const componentKey = getReactIslandComponentKey(componentFile, config);
+    const hydrationName = this.getIslandHydrationName(componentName, componentKey);
     const hmrManager = this.config.assetProcessingService?.getHmrManager();
     const isDevelopment = hmrManager?.isEnabled() ?? false;
+    if (isDevelopment) {
+      this.config.hmrPageMetadataCache?.markOwnedEntrypoint(componentFile);
+    }
+    const importPath = await this.resolveAssetImportPath(componentFile, componentName);
     const declaredModules = collectDeclaredModulesInConfig(config);
     const bundleOptions = await this.config.bundleService.createBundleOptions(
       componentName,
@@ -136,19 +148,18 @@ class ReactHydrationAssetService {
           importPath,
           reactImportPath: runtimeImports.react,
           reactDomClientImportPath: runtimeImports.reactDomClient,
-          targetSelector: `[data-eco-component-id="${componentInstanceId}"]`,
-          props,
+          targetSelector: `[data-eco-component-key="${componentKey}"]`,
           componentRef: config?.__eco?.id,
           componentFile,
           isDevelopment
         }),
-        name: `${componentName}-hydration`,
+        name: hydrationName,
         bundle: false,
         attributes: {
           type: "module",
           defer: "",
           "data-eco-rerun": "true",
-          "data-eco-script-id": `${componentName}-hydration`,
+          "data-eco-script-id": hydrationName,
           "data-eco-persist": "true"
         }
       })
@@ -194,5 +205,6 @@ class ReactHydrationAssetService {
   }
 }
 export {
-  ReactHydrationAssetService
+  ReactHydrationAssetService,
+  getReactIslandComponentKey
 };

package/src/services/react-mdx-config-dependency.service.d.ts

@@ -0,0 +1,36 @@
+import type { EcoComponent, EcoComponentConfig } from '@ecopages/core';
+import { type AssetProcessingService, type ProcessedAsset } from '@ecopages/core/services/asset-processing-service';
+import type { ReactPageModuleService } from './react-page-module.service.js';
+type MdxConfigDependencyProcessor = (components: Partial<EcoComponent>[]) => Promise<ProcessedAsset[]>;
+export interface ReactMdxConfigDependencyServiceConfig {
+    integrationName: string;
+    pageModuleService: Pick<ReactPageModuleService, 'ensureConfigFileMetadata'>;
+    assetProcessingService?: Pick<AssetProcessingService, 'processDependencies'>;
+}
+/**
+ * Resolves MDX-owned config dependencies that live outside the normal React component tree.
+ *
+ * React MDX pages can declare dependencies on the page config itself or on a
+ * resolved layout config. Those roots need to be materialized as synthetic
+ * component configs so the shared dependency pipeline can process them without
+ * growing more MDX-specific logic inside the renderer.
+ */
+export declare class ReactMdxConfigDependencyService {
+    private readonly config;
+    constructor(config: ReactMdxConfigDependencyServiceConfig);
+    /**
+     * Processes MDX-owned config dependencies and eagerly emits any SSR-marked lazy scripts.
+     */
+    processMdxConfigDependencies(options: {
+        pagePath: string;
+        config?: EcoComponentConfig;
+        processComponentDependencies: MdxConfigDependencyProcessor;
+    }): Promise<ProcessedAsset[]>;
+    private createOwnedConfigComponents;
+    private processDeclaredSsrLazyDependencies;
+    /**
+     * Collects `lazy` script dependencies that also opt into SSR from an MDX config graph.
+     */
+    private collectDeclaredSsrLazyDependencies;
+}
+export {};

package/src/services/react-mdx-config-dependency.service.js

@@ -0,0 +1,122 @@
+import path from "node:path";
+import { rapidhash } from "@ecopages/core/hash";
+import {
+  AssetFactory
+} from "@ecopages/core/services/asset-processing-service";
+import { collectFromConfigForest, getComponentConfigs } from "../utils/component-config-traversal.js";
+class ReactMdxConfigDependencyService {
+  config;
+  constructor(config) {
+    this.config = config;
+  }
+  /**
+   * Processes MDX-owned config dependencies and eagerly emits any SSR-marked lazy scripts.
+   */
+  async processMdxConfigDependencies(options) {
+    const components = this.createOwnedConfigComponents(options.pagePath, options.config);
+    if (components.length === 0) {
+      return [];
+    }
+    const processedDependencies = await options.processComponentDependencies(components);
+    const eagerSsrLazyDependencies = await this.processDeclaredSsrLazyDependencies(components, options.pagePath);
+    return [...processedDependencies, ...eagerSsrLazyDependencies];
+  }
+  createOwnedConfigComponents(pagePath, config) {
+    const components = [];
+    const resolvedLayout = config?.layout;
+    if (resolvedLayout?.config?.dependencies) {
+      const layoutConfig = this.config.pageModuleService.ensureConfigFileMetadata(
+        resolvedLayout.config,
+        pagePath
+      );
+      components.push({ config: layoutConfig });
+    }
+    if (config?.dependencies) {
+      components.push({
+        config: {
+          ...config,
+          __eco: {
+            id: rapidhash(pagePath).toString(36),
+            file: pagePath,
+            integration: this.config.integrationName
+          }
+        }
+      });
+    }
+    return components;
+  }
+  async processDeclaredSsrLazyDependencies(components, pagePath) {
+    if (!this.config.assetProcessingService?.processDependencies) {
+      return [];
+    }
+    const dependencies = this.collectDeclaredSsrLazyDependencies(components);
+    if (dependencies.length === 0) {
+      return [];
+    }
+    return this.config.assetProcessingService.processDependencies(
+      dependencies,
+      `${this.config.integrationName}-mdx-ssr-lazy:${pagePath}`
+    );
+  }
+  /**
+   * Collects `lazy` script dependencies that also opt into SSR from an MDX config graph.
+   */
+  collectDeclaredSsrLazyDependencies(components) {
+    const dependencies = [];
+    const seenKeys = /* @__PURE__ */ new Set();
+    const normalizeAttributes = (attributes) => ({
+      type: "module",
+      defer: "",
+      ...attributes ?? {}
+    });
+    collectFromConfigForest(getComponentConfigs(components), (config) => {
+      const componentFile = config.__eco?.file;
+      if (!componentFile) {
+        return [];
+      }
+      const componentDir = path.dirname(componentFile);
+      for (const script of config.dependencies?.scripts ?? []) {
+        if (typeof script === "string" || !script.lazy || script.ssr !== true) {
+          continue;
+        }
+        const attributes = normalizeAttributes(script.attributes);
+        if (script.content) {
+          const key2 = `content:${script.content}:${JSON.stringify(attributes)}`;
+          if (seenKeys.has(key2)) {
+            continue;
+          }
+          seenKeys.add(key2);
+          dependencies.push(
+            AssetFactory.createContentScript({
+              position: "head",
+              content: script.content,
+              attributes
+            })
+          );
+          continue;
+        }
+        if (!script.src) {
+          continue;
+        }
+        const resolvedPath = path.resolve(componentDir, script.src);
+        const key = `file:${resolvedPath}:${JSON.stringify(attributes)}`;
+        if (seenKeys.has(key)) {
+          continue;
+        }
+        seenKeys.add(key);
+        dependencies.push(
+          AssetFactory.createFileScript({
+            filepath: resolvedPath,
+            position: "head",
+            attributes
+          })
+        );
+      }
+      return [];
+    });
+    return dependencies;
+  }
+}
+export {
+  ReactMdxConfigDependencyService
+};

package/src/services/react-page-module.service.d.ts

@@ -7,6 +7,7 @@
  * @module
  */
 import type { EcoComponentConfig, EcoPageFile } from '@ecopages/core';
+import type { BuildExecutor } from '@ecopages/core/build/build-adapter';
 import type { CompileOptions } from '@mdx-js/mdx';
 /**
  * Configuration for the ReactPageModuleService.
@@ -14,6 +15,8 @@ import type { CompileOptions } from '@mdx-js/mdx';
 export interface ReactPageModuleServiceConfig {
     rootDir: string;
     distDir: string;
+    workDir: string;
+    buildExecutor: BuildExecutor;
     layoutsDir?: string;
     componentsDir?: string;
     mdxCompilerOptions?: CompileOptions;
@@ -40,7 +43,10 @@ export declare class ReactPageModuleService {
      * @param filePath - Absolute path to the MDX file
      * @returns The imported module
      */
-    importMdxPageFile(filePath: string): Promise<unknown>;
+    importMdxPageFile(filePath: string, options?: {
+        bypassCache?: boolean;
+        cacheScope?: string;
+    }): Promise<unknown>;
     /**
      * Ensures that an EcoComponentConfig has proper `__eco` metadata attached.
      * Resolves the file path from dependency declarations when not already set.
@@ -54,7 +60,7 @@ export declare class ReactPageModuleService {
      * Recursively checks whether a component config tree declares any browser modules.
      * Used to determine if a page needs hydration.
      */
-    hasModulesInConfig(config: EcoComponentConfig | undefined, visited?: Set<EcoComponentConfig>): boolean;
+    hasModulesInConfig(config: EcoComponentConfig | undefined): boolean;
     /**
      * Determines whether a page needs client-side hydration.
      *