@kaena1/mm-ui-shared-utils 1.25.0-f-poc-EC-3301.2 → 1.25.0-f-poc-EC-3301.4

package/dist/components/ImportMapScripts.js

@@ -1,7 +1,8 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import "react";
 import "react-dom";
-import { generateImportMapJson } from "../services/generateImportMap.js";
+import { generateImportMapJson } from "../services/ImportMapService.js";
+import "next/script";
 const ImportMapScripts = () => /* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsx(
     "script",

package/dist/hooks/useRemoteComponent.js

@@ -1,5 +1,7 @@
 import { useState, useCallback, useEffect } from "react";
 import { moduleLoader } from "../services/moduleLoader.js";
+import "react/jsx-runtime";
+import "next/script";
 function useRemoteComponent(options) {
   const {
     manifest: manifestFromProps,

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
+
 import { default as default_2 } from 'react';
 
 export declare interface ComponentManifest {
@@ -8,13 +10,57 @@ export declare interface ComponentManifest {
 export declare function fetchManifest(manifestUrl: string): Promise<RemoteManifest>;
 
 /**
- * Generates an import map JSON string for ES module dependency resolution
- * This allows remote modules to use bare specifiers like 'react' instead of full CDN URLs
+ * Generate complete import map object for remote components
+ *
+ * @param config - Optional configuration to override default settings
+ * @returns Import map object ready for browser consumption
+ */
+export declare const generateImportMap: (config?: ImportMapConfig) => object;
+
+export declare const generateImportMapJson: (config?: ImportMapConfig) => string;
+
+/**
+ * Get import map script props for Next.js Script component
+ *
+ * @param config - Optional configuration to override default settings
+ * @returns Props object with type and dangerouslySetInnerHTML for Script component
+ * @example
+ * ```tsx
+ * <Script {...getImportMapScriptProps()} strategy="beforeInteractive" />
+ * ```
  */
-export declare function generateImportMapJson(): string;
+export declare const getImportMapScriptProps: (config?: ImportMapConfig) => {
+    type: "importmap-shim";
+    dangerouslySetInnerHTML: {
+        __html: string;
+    };
+};
+
+export declare interface ImportMapConfig {
+    reactVersion?: string;
+    reactDomVersion?: string;
+    customImports?: Record<string, string>;
+}
+
+export declare const ImportMapScript: React.FC<ImportMapScriptProps>;
+
+declare interface ImportMapScriptProps {
+    reactVersion?: string;
+    reactDomVersion?: string;
+    customImports?: Record<string, string>;
+    strategy?: 'beforeInteractive' | 'afterInteractive' | 'lazyOnload';
+}
 
 export declare const ImportMapScripts: default_2.FC;
 
+/**
+ * Validate browser support for import maps
+ *
+ * @returns true if the browser supports import maps, false otherwise
+ * @see https://caniuse.com/import-maps
+ */
+export declare const isImportMapSupported: () => boolean;
+
 export declare class ModuleLoader {
     private loadedModules;
     private importMapInjected;

package/dist/index.js

@@ -1,17 +1,22 @@
 import { fetchManifest } from "./services/fetchManifest.js";
 import { ModuleLoader, moduleLoader } from "./services/moduleLoader.js";
-import { generateImportMapJson } from "./services/generateImportMap.js";
+import { generateImportMap, generateImportMapJson, getImportMapScriptProps, isImportMapSupported } from "./services/ImportMapService.js";
+import { ImportMapScript } from "./services/ImportMapScript.js";
 import { useRemoteComponent } from "./hooks/useRemoteComponent.js";
 import { RemoteRenderer } from "./components/RemoteRenderer.js";
 import { RemoteLinks } from "./components/RemoteLinks.js";
 import { ImportMapScripts } from "./components/ImportMapScripts.js";
 export {
+  ImportMapScript,
   ImportMapScripts,
   ModuleLoader,
   RemoteLinks,
   RemoteRenderer,
   fetchManifest,
+  generateImportMap,
   generateImportMapJson,
+  getImportMapScriptProps,
+  isImportMapSupported,
   moduleLoader,
   useRemoteComponent
 };

package/dist/package.json.js

@@ -0,0 +1,11 @@
+const dependencies = {
+  react: "^18.3.1",
+  "react-dom": "^18.3.1"
+};
+const packageJson = {
+  dependencies
+};
+export {
+  packageJson as default,
+  dependencies
+};

package/dist/services/ImportMapScript.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import Script from "next/script";
+import { getImportMapScriptProps } from "./ImportMapService.js";
+const ImportMapScript = ({
+  reactVersion,
+  reactDomVersion,
+  customImports,
+  strategy = "beforeInteractive"
+}) => {
+  const scriptProps = getImportMapScriptProps({
+    reactVersion,
+    reactDomVersion,
+    customImports
+  });
+  return /* @__PURE__ */ jsx(
+    Script,
+    {
+      id: "remote-components-import-map",
+      strategy,
+      ...scriptProps
+    }
+  );
+};
+export {
+  ImportMapScript
+};

package/dist/services/ImportMapService.js

@@ -0,0 +1,61 @@
+import packageJson from "../package.json.js";
+const cleanVersion = (version) => {
+  return version.replace(/^[\^~]/, "");
+};
+const DEFAULT_CONFIG = {
+  reactVersion: cleanVersion(packageJson.dependencies.react),
+  reactDomVersion: cleanVersion(packageJson.dependencies["react-dom"])
+};
+const generateReactDataUrl = () => {
+  return `data:text/javascript;charset=utf-8,
+const React = window.React;
+export default React;
+export const {
+  Component, PureComponent, createContext, useContext, useState, useEffect,
+  useCallback, useMemo, useRef, forwardRef, createElement, Fragment, memo, lazy, Suspense,
+  useLayoutEffect, useId
+} = React;`;
+};
+const generateJsxRuntimeDataUrl = () => {
+  return `data:text/javascript;charset=utf-8,
+import * as ReactJSXRuntime from 'https://esm.sh/react@18.3.1/jsx-runtime';
+export const jsx = ReactJSXRuntime.jsx;
+export const jsxs = ReactJSXRuntime.jsxs;
+export const Fragment = ReactJSXRuntime.Fragment;`;
+};
+const generateImportMap = (config = {}) => {
+  const finalConfig = { ...DEFAULT_CONFIG, ...config };
+  return {
+    imports: {
+      react: generateReactDataUrl(),
+      "react/jsx-runtime": generateJsxRuntimeDataUrl(),
+      "react/jsx-dev-runtime": generateJsxRuntimeDataUrl(),
+      // Some bundlers emit ".js" suffixed bare specifiers; map those too
+      "react/jsx-runtime.js": generateJsxRuntimeDataUrl(),
+      "react/jsx-dev-runtime.js": generateJsxRuntimeDataUrl(),
+      "react-dom": `https://esm.sh/react-dom@${finalConfig.reactDomVersion}`,
+      "react-dom/client": `https://esm.sh/react-dom@${finalConfig.reactDomVersion}/client`
+    }
+  };
+};
+const generateImportMapJson = (config) => {
+  return JSON.stringify(generateImportMap(config));
+};
+const isImportMapSupported = () => {
+  if (typeof window === "undefined") return false;
+  return "importmap" in document.createElement("script");
+};
+const getImportMapScriptProps = (config) => {
+  return {
+    type: "importmap-shim",
+    dangerouslySetInnerHTML: {
+      __html: generateImportMapJson(config)
+    }
+  };
+};
+export {
+  generateImportMap,
+  generateImportMapJson,
+  getImportMapScriptProps,
+  isImportMapSupported
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaena1/mm-ui-shared-utils",
-  "version": "1.25.0-f-poc-EC-3301.2",
+  "version": "1.25.0-f-poc-EC-3301.4",
   "description": "Shared utilities for loading remote React components in Mint Mobile microfrontends",
   "type": "module",
   "main": "./dist/index.js",
@@ -35,6 +35,10 @@
   ],
   "author": "",
   "license": "ISC",
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
   "peerDependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

package/dist/services/generateImportMap.js

@@ -1,14 +0,0 @@
-function generateImportMapJson() {
-  const importMap = {
-    imports: {
-      react: "react",
-      "react-dom": "react-dom",
-      "react/jsx-runtime": "react/jsx-runtime",
-      "react/jsx-dev-runtime": "react/jsx-dev-runtime"
-    }
-  };
-  return JSON.stringify(importMap);
-}
-export {
-  generateImportMapJson
-};