@kaena1/ecomm-contained-utils 1.0.3 → 1.0.5

package/README.md

@@ -25,14 +25,19 @@ packages/ecomm-contained-utils/
 │   │   └── RemoteRenderer.tsx      # Renders remote components ('use client')
 │   ├── hooks/               # React hooks
 │   │   └── useRemoteComponent.ts   # Hook for loading remote components ('use client')
+│   ├── lib/                 # Business logic
+│   │   ├── api/server/            # Server-side API functions
+│   │   │   └── getMintLayoutProps/ # Fetches MintLayout props from ecomm API
+│   │   └── mappers/               # Data mappers
+│   │       └── mapMintLayoutResponseToProps.ts
 │   ├── services/            # Core services
 │   │   ├── fetchManifest.ts        # Fetches component manifests
 │   │   ├── ImportMapService.ts     # Generates import map JSON
 │   │   └── moduleLoader.ts         # ES module loader service
 │   ├── types/               # TypeScript definitions
-│   ├── index.ts             # Main entry point (exports everything)
 │   ├── server.ts            # Server-safe exports for App Router
-│   └── client.ts            # Client-only exports for App Router
+│   ├── client.ts            # Client-only exports for App Router
+│   └── types.ts             # Type-only exports entry point
 ├── dist/                    # Built files (generated)
 ├── vite.config.ts          # Build configuration
 ├── package.json
@@ -44,16 +49,18 @@ packages/ecomm-contained-utils/
 
 The package provides three entry points for different use cases:
 
-| Entry Point | Import Path | Use Case |
-|-------------|-------------|----------|
-| Main | `ecomm-contained-utils` | Everything (Pages Router, or when you need all exports) |
-| Server | `ecomm-contained-utils/server` | Server Components (App Router RSC) |
-| Client | `ecomm-contained-utils/client` | Client Components (App Router) |
+| Entry Point | Import Path                            | Use Case                                             |
+| ----------- | -------------------------------------- | ---------------------------------------------------- |
+| Server      | `@kaena1/ecomm-contained-utils/server` | Server Components (App Router RSC, Pages Router SSR) |
+| Client      | `@kaena1/ecomm-contained-utils/client` | Client Components (App Router, Pages Router CSR)     |
+| Types       | `@kaena1/ecomm-contained-utils/types`  | Type-only imports                                    |
 
-**Server exports:** `fetchManifest`, `ImportMapScripts`, `RemoteLinks`, `generateImportMap`, `generateImportMapJson`, all types
+**Server exports:** `fetchManifest`, `getRemoteManifest`, `ImportMapScripts`, `RemoteLinks`, `generateImportMap`, `generateImportMapJson`, `getMintLayoutProps`, `mapMintLayoutResponseToProps`
 
 **Client exports:** `RemoteRenderer`, `useRemoteComponent`, `moduleLoader`, `ModuleLoader`
 
+**Types exports:** `ComponentManifest`, `RemoteManifest`, `MintLayoutProps`, `MintLayoutPropsAPIResponse`, WP REST API types
+
 ## Installation
 
 ### In Consumer Applications (e.g., mm-mf-features)
@@ -63,17 +70,17 @@ The package provides three entry points for different use cases:
 Always get the latest version from the POC branch:
 
 ```bash
-npm install ecomm-contained-utils@f-poc-EC-3301
+npm install @kaena1/ecomm-contained-utils@f-poc-EC-3570
 ```
 
-This installs the latest version tagged with `f-poc-EC-3301`. You don't need to track specific version numbers.
+This installs the latest version tagged with `f-poc-EC-3570`. You don't need to track specific version numbers.
 
 #### Option 2: Install Specific Version
 
 If you need a specific version:
 
 ```bash
-npm install ecomm-contained-utils@1.25.0-f-poc-EC-3301.5
+npm install @kaena1/ecomm-contained-utils@1.0.3
 ```
 
 #### Updating to Latest
@@ -82,10 +89,10 @@ To update to the latest POC version:
 
 ```bash
 # Update and save to package.json
-npm install ecomm-contained-utils@f-poc-EC-3301 --save
+npm install @kaena1/ecomm-contained-utils@f-poc-EC-3570 --save
 
 # Or use npm update (if version is already in package.json with the tag)
-npm update ecomm-contained-utils
+npm update @kaena1/ecomm-contained-utils
 ```
 
 #### For Local Development
@@ -99,10 +106,10 @@ Due to React's requirement of a single instance, `npm link` causes "Invalid hook
 cd packages/ecomm-contained-utils
 npm run build
 npm pack
-# This generates: ecomm-contained-utils-X.X.X.tgz
+# This generates: kaena1-ecomm-contained-utils-X.X.X.tgz
 
 # In the consumer application (mm-mf-features)
-npm install /absolute/path/to/ecomm-contained-utils-X.X.X.tgz
+npm install /absolute/path/to/kaena1-ecomm-contained-utils-X.X.X.tgz
 ```
 
 ## Usage
@@ -117,7 +124,7 @@ The setup differs slightly between Next.js Pages Router and App Router.
 
 ```typescript
 import { Html, Head, Main, NextScript } from 'next/document';
-import { ImportMapScripts } from 'ecomm-contained-utils';
+import { ImportMapScripts } from '@kaena1/ecomm-contained-utils/server';
 
 export default function Document() {
   return (
@@ -139,18 +146,13 @@ export default function Document() {
 
 ```typescript
 import type { AppProps, AppContext } from 'next/app';
-import {
-  RemoteRenderer,
-  RemoteLinks,
-  fetchManifest,
-} from 'ecomm-contained-utils';
+import { RemoteLinks, getRemoteManifest } from '@kaena1/ecomm-contained-utils/server';
+import { RemoteRenderer } from '@kaena1/ecomm-contained-utils/client';
 
 App.getInitialProps = async (ctx: AppContext) => {
-  const manifestUrl = `https://assets-qa.mintmobile.com/contained-components/manifest-poc/f-poc-live-update/manifest.json?_ts=${Date.now()}`;
-
   let remoteManifest;
   try {
-    remoteManifest = await fetchManifest(manifestUrl);
+    remoteManifest = await getRemoteManifest(process.env.MANIFEST_URL);
   } catch (e) {
     console.error('Failed to fetch manifest:', e);
     remoteManifest = null;
@@ -200,8 +202,10 @@ export default function App({ Component, pageProps }: AppProps) {
 #### App Router Setup
 
 > **Note:** App Router is fully supported. The package provides separate entry points for server and client code:
-> - `ecomm-contained-utils/server` - Server-safe exports (fetchManifest, ImportMapScripts, RemoteLinks, types)
-> - `ecomm-contained-utils/client` - Client-only exports (RemoteRenderer, useRemoteComponent, moduleLoader)
+>
+> - `@kaena1/ecomm-contained-utils/server` - Server-safe exports (fetchManifest, getRemoteManifest, ImportMapScripts, RemoteLinks, getMintLayoutProps, mapMintLayoutResponseToProps)
+> - `@kaena1/ecomm-contained-utils/client` - Client-only exports (RemoteRenderer, useRemoteComponent, moduleLoader)
+> - `@kaena1/ecomm-contained-utils/types` - Type-only exports
 
 ##### Add Import Map Scripts to `app/layout.tsx`
 
@@ -210,29 +214,18 @@ export default function App({ Component, pageProps }: AppProps) {
 import {
   ImportMapScripts,
   RemoteLinks,
-  fetchManifest
-} from 'ecomm-contained-utils/server';
+  getRemoteManifest,
+} from '@kaena1/ecomm-contained-utils/server';
 
 // Use /client for client components (in separate 'use client' files)
-// import { RemoteRenderer } from 'ecomm-contained-utils/client';
-
-// Fetch manifest at build time
-async function getRemoteManifest() {
-  try {
-    const manifestUrl = `https://assets-qa.mintmobile.com/contained-components/manifest-poc/f-poc-live-update/manifest.json?_ts=${Date.now()}`;
-    return await fetchManifest(manifestUrl);
-  } catch (e) {
-    console.error('Failed to fetch manifest:', e);
-    return null;
-  }
-}
+// import { RemoteRenderer } from '@kaena1/ecomm-contained-utils/client';
 
 export default async function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  const remoteManifest = await getRemoteManifest();
+  const remoteManifest = await getRemoteManifest(process.env.MANIFEST_URL);
   const layoutManifest = remoteManifest?.components?.MintLayout;
 
   return (
@@ -268,7 +261,7 @@ export default async function RootLayout({
 ### 2. Using Remote Components in Pages
 
 ```typescript
-import { RemoteRenderer } from 'ecomm-contained-utils';
+import { RemoteRenderer } from '@kaena1/ecomm-contained-utils/client';
 
 export default function MyPage({ remoteManifest }) {
   const pocComponentManifest = remoteManifest?.components?.PocComponent;
@@ -411,23 +404,56 @@ return <Component {...props} />;
 
 ---
 
-### Services
+### Data fetching (server-side)
 
-#### `fetchManifest(manifestUrl: string): Promise<RemoteManifest>`
+#### `getRemoteManifest(environment, cookieStore): Promise<RemoteManifest>`
 
-Fetches and validates a remote component manifest.
+Server-side function that fetches the remote component manifest. Encapsulates URL construction (cache-busting timestamp) and the fetch call.
 
 **Parameters:**
 
-- `manifestUrl`: `string` - URL to the manifest JSON file
+- `environment`: `Environment` - Environment variable value set in the consumer app's repository. Can be `production` or `develop`. Defaults to `production`.
+- `cookieBranch`: `string | undefined` - f-branch can be set as a cookie with the name `cont-comp`. If it's not set or none is provided, it will default to `f-poc-live-update` for develop, and `master` for production.
 
 **Returns:** `Promise<RemoteManifest>`
 
+**Usage (NextJS):**
+
+```typescript
+import { getRemoteManifest } from '@kaena1/ecomm-contained-utils/server';
+import { cookies } from 'next/headers';
+
+const cookieStore = await cookies();
+const branchCookie = cookieStore.get('cont-comp')?.value;
+const remoteManifest = await getRemoteManifest(
+  process.env.NEXT_PUBLIC_ENVIRONMENT,
+  branchCookie,
+);
+```
+
+---
+
+#### `getMintLayoutProps(NEXT_PUBLIC_SITE_URL, ECOMM_API_URL, ECOMM_API_STANDALONE_DEVICE_CREDS): Promise<MintLayoutProps>`
+
+Server-side function that fetches MintLayout props from the ecomm API and maps them to the expected format.
+
+**Parameters:**
+
+- `NEXT_PUBLIC_SITE_URL`: `string` - The public site URL
+- `ECOMM_API_URL`: `string` - The ecomm API base URL
+- `ECOMM_API_STANDALONE_DEVICE_CREDS`: `string` - Credentials in `username|password` format
+
+**Returns:** `Promise<MintLayoutProps>`
+
 **Usage:**
 
 ```typescript
-const manifest = await fetchManifest(
-  'https://assets-qa.mintmobile.com/.../manifest.json',
+import { getMintLayoutProps } from '@kaena1/ecomm-contained-utils/server';
+
+const mintLayoutProps = await getMintLayoutProps(
+  process.env.NEXT_PUBLIC_SITE_URL,
+  process.env.ECOMM_API_URL,
+  process.env.ECOMM_API_STANDALONE_DEVICE_CREDS,
 );
 ```
 
@@ -470,7 +496,7 @@ npm run lint
 
    ```json
    {
-     "version": "1.25.0-f-poc-EC-3301.5"
+     "version": "1.0.3"
    }
    ```
 
@@ -483,17 +509,17 @@ npm run lint
 3. **Publish to npm:**
 
    ```bash
-   npm publish --tag f-poc-live-update
+   npm publish --tag f-poc-EC-3570 --access public
    ```
 
 4. **Install in consumer apps:**
 
    ```bash
    # Specific version
-   npm install ecomm-contained-utils@1.25.0-f-poc-EC-3301.5
+   npm install @kaena1/ecomm-contained-utils@1.0.3
 
    # Or use the tag for latest POC version
-   npm install ecomm-contained-utils@f-poc-live-update
+   npm install @kaena1/ecomm-contained-utils@f-poc-EC-3570
    ```
 
 ### Enabling Automatic Publishing (Future)
@@ -546,12 +572,12 @@ docs: update README with usage examples
 
 #### Release Rules
 
-| Commit Type | Scope          | Release Type  |
-| ----------- | -------------- | ------------- |
+| Commit Type | Scope                   | Release Type  |
+| ----------- | ----------------------- | ------------- |
 | `feat`      | `ecomm-contained-utils` | Minor (1.x.0) |
 | `fix`       | `ecomm-contained-utils` | Patch (1.0.x) |
-| `feat`      | Any            | Minor         |
-| `fix`       | Any            | Patch         |
+| `feat`      | Any                     | Minor         |
+| `fix`       | Any                     | Patch         |
 
 ### POC Branch Strategy
 
@@ -568,8 +594,8 @@ For the POC, we use the branch pattern `f-poc-*` with a specific prerelease iden
 
 This means:
 
-- Branch `f-poc-EC-3301` → publishes as `1.25.0-f-poc-EC-3301.1`
-- Branch `f-poc-live-update` → publishes as `1.25.0-f-poc-live-update.1`
+- Branch `f-poc-EC-3570` → publishes as `1.0.3-f-poc-EC-3570.1`
+- Branch `f-poc-live-update` → publishes as `1.0.3-f-poc-live-update.1`
 
 ## How It Works
 

package/dist/lib/api/server/getRemoteManifest/getRemoteManifest.js

@@ -0,0 +1,15 @@
+"use server";
+import { fetchManifest as t } from "../../../../services/fetchManifest.js";
+import "react";
+import "react-dom";
+import { mapManifestUrl as r } from "../../../mappers/mapManifestUrl.js";
+async function f(e, i) {
+  try {
+    return await t(r(e, i));
+  } catch {
+    return await t(r("production", void 0));
+  }
+}
+export {
+  f as getRemoteManifest
+};

package/dist/lib/mappers/mapManifestUrl.js

@@ -0,0 +1,21 @@
+const n = "manifest.json", c = "https://assets.mintmobile.com", a = "https://assets-qa.mintmobile.com", p = (t, s) => {
+  const e = r(t), o = m(t, s);
+  return `${e}/contained-components/manifest-poc/${o}/${n}?_ts=${Date.now()}`;
+}, r = (t) => {
+  switch (t) {
+    case "production":
+      return c;
+    case "develop":
+      return a;
+  }
+}, m = (t, s) => {
+  switch (t) {
+    case "production":
+      return s || "master";
+    case "develop":
+      return s || "f-poc-live-update";
+  }
+};
+export {
+  p as mapManifestUrl
+};

package/dist/server.d.ts

@@ -12,29 +12,14 @@ declare interface CountdownbannerProps {
     message: string;
 }
 
-export declare function fetchManifest(manifestUrl: string): Promise<RemoteManifest>;
-
-/**
- * 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;
+declare type Environment = 'develop' | 'production';
 
 export declare function getMintLayoutProps(NEXT_PUBLIC_SITE_URL: string, ECOMM_API_URL: string, ECOMM_API_STANDALONE_DEVICE_CREDS: string): Promise<MintLayoutProps>;
 
-declare interface ImportMapConfig {
-    reactVersion?: string;
-    reactDomVersion?: string;
-}
+export declare function getRemoteManifest(environment: Environment, cookieBranch: string | undefined): Promise<RemoteManifest>;
 
 export declare const ImportMapScripts: () => JSX.Element;
 
-export declare const mapMintLayoutResponseToProps: (NEXT_PUBLIC_SITE_URL: string, data: MintLayoutPropsAPIResponse) => MintLayoutProps;
-
 declare interface MintFooterProps {
     footerNav: WP_REST_API_Nav_Menu_Items;
     subfooterNav: WP_REST_API_Nav_Menu_Items;
@@ -58,17 +43,6 @@ declare interface MintLayoutProps {
     slimBannerProps?: Partial<SlimbannerProps>;
 }
 
-declare interface MintLayoutPropsAPIResponse {
-    theme: WP_REST_API_Theme;
-    widgets: WP_REST_API_Widget[];
-    menuItems: {
-        'primary-navigation-left': WP_REST_API_Nav_Menu_Items;
-        'primary-navigation-right': WP_REST_API_Nav_Menu_Items;
-        'footer-menu': WP_REST_API_Nav_Menu_Items;
-        'footer-legal-pages': WP_REST_API_Nav_Menu_Items;
-    };
-}
-
 export declare const RemoteLinks: ({ manifest }: RemoteLinksProps) => JSX.Element;
 
 declare interface RemoteLinksProps {
@@ -115,22 +89,4 @@ declare interface WP_REST_API_Nav_Menu_Item {
 
 declare type WP_REST_API_Nav_Menu_Items = WP_REST_API_Nav_Menu_Item[];
 
-declare interface WP_REST_API_Theme {
-    countdown: {
-        is_enabled: boolean;
-        start_datetime: string;
-        start_timezone: string;
-        end_datetime: string;
-        end_timezone: string;
-        start_datetime_utc: string;
-        end_datetime_utc: string;
-        is_server_now_between: boolean;
-    };
-}
-
-declare interface WP_REST_API_Widget {
-    name: string;
-    data: WP_REST_API_Content;
-}
-
 export { }

package/dist/server.js

@@ -1,15 +1,10 @@
-import { fetchManifest as t } from "./services/fetchManifest.js";
-import { generateImportMap as p, generateImportMapJson as m } from "./services/ImportMapService.js";
-import { ImportMapScripts as f } from "./components/ImportMapScripts.js";
-import { RemoteLinks as s } from "./components/RemoteLinks.js";
-import { getMintLayoutProps as M } from "./lib/api/server/getMintLayoutProps/getMintLayoutProps.js";
-import { mapMintLayoutResponseToProps as g } from "./lib/mappers/mapMintLayoutResponseToProps.js";
+import { ImportMapScripts as e } from "./components/ImportMapScripts.js";
+import { RemoteLinks as p } from "./components/RemoteLinks.js";
+import { getMintLayoutProps as f } from "./lib/api/server/getMintLayoutProps/getMintLayoutProps.js";
+import { getRemoteManifest as s } from "./lib/api/server/getRemoteManifest/getRemoteManifest.js";
 export {
-  f as ImportMapScripts,
-  s as RemoteLinks,
-  t as fetchManifest,
-  p as generateImportMap,
-  m as generateImportMapJson,
-  M as getMintLayoutProps,
-  g as mapMintLayoutResponseToProps
+  e as ImportMapScripts,
+  p as RemoteLinks,
+  f as getMintLayoutProps,
+  s as getRemoteManifest
 };

package/dist/types.d.ts

@@ -10,6 +10,8 @@ declare interface CountdownbannerProps {
     message: string;
 }
 
+export declare type Environment = 'develop' | 'production';
+
 export declare interface ImportMapConfig {
     reactVersion?: string;
     reactDomVersion?: string;
@@ -38,17 +40,6 @@ export declare interface MintLayoutProps {
     slimBannerProps?: Partial<SlimbannerProps>;
 }
 
-export declare interface MintLayoutPropsAPIResponse {
-    theme: WP_REST_API_Theme;
-    widgets: WP_REST_API_Widget[];
-    menuItems: {
-        'primary-navigation-left': WP_REST_API_Nav_Menu_Items;
-        'primary-navigation-right': WP_REST_API_Nav_Menu_Items;
-        'footer-menu': WP_REST_API_Nav_Menu_Items;
-        'footer-legal-pages': WP_REST_API_Nav_Menu_Items;
-    };
-}
-
 export declare interface ModuleLoadOptions {
     bundleUrl: string;
     componentName: string;
@@ -87,12 +78,12 @@ export declare interface UseRemoteComponentReturn extends RemoteComponentState {
     clearError: () => void;
 }
 
-export declare interface WP_REST_API_Content {
+declare interface WP_REST_API_Content {
     rendered: string;
     raw: string;
 }
 
-export declare interface WP_REST_API_Nav_Menu_Item {
+declare interface WP_REST_API_Nav_Menu_Item {
     id: number;
     title: WP_REST_API_Content;
     status: string;
@@ -114,24 +105,6 @@ export declare interface WP_REST_API_Nav_Menu_Item {
     _links: Record<string, []>;
 }
 
-export declare type WP_REST_API_Nav_Menu_Items = WP_REST_API_Nav_Menu_Item[];
-
-export declare interface WP_REST_API_Theme {
-    countdown: {
-        is_enabled: boolean;
-        start_datetime: string;
-        start_timezone: string;
-        end_datetime: string;
-        end_timezone: string;
-        start_datetime_utc: string;
-        end_datetime_utc: string;
-        is_server_now_between: boolean;
-    };
-}
-
-export declare interface WP_REST_API_Widget {
-    name: string;
-    data: WP_REST_API_Content;
-}
+declare type WP_REST_API_Nav_Menu_Items = WP_REST_API_Nav_Menu_Item[];
 
 export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaena1/ecomm-contained-utils",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Shared utilities for loading remote React components in Mint Mobile microfrontends",
   "type": "module",
   "exports": {