@Dream.mf Dev Portal

DMF Utilities Package

The @dream.mf/utilities package provides essential utilities for working with dynamic module federation and remote module loading in Dream Packages applications.

Installation

npm install @dream.mf/utilities
# or
yarn add @dream.mf/utilities

Core Features

Remote Module Loading

importRemote

Imports a remote module for use with module federation.

import { importRemote } from '@dream.mf/utilities';

const MyRemoteComponent = await importRemote({
  remoteUrl: 'http://localhost:3001/remoteEntry.js',
  scope: 'remote_app',
  module: './Button',
  enableNoCache: false
});

preloadRemote

Preloads a remote module for later use.

import { preloadRemote } from '@dream.mf/utilities';

await preloadRemote({
  url: 'http://localhost:3001/remoteEntry.js',
  scope: 'remote_app',
  enableNoCache: false
});

Remote Origin Service (ROS) Utilities

getRemotesByAccessKey

Retrieves remotes attached to a host using an access key.

import { getRemotesByAccessKey } from '@dream.mf/utilities';

const remotes = await getRemotesByAccessKey('your-access-key');

getRemoteByKeyPair

Gets a specific remote and its modules using access key and remote key.

import { getRemoteByKeyPair } from '@dream.mf/utilities';

const remote = await getRemoteByKeyPair('your-access-key', 'remote-key');

importRemoteUsingROS

Imports a remote module using ROS configuration.

import { importRemoteUsingROS } from '@dream.mf/utilities';

const component = await importRemoteUsingROS(
  'your-access-key',
  'remote-key',
  './Button'
);

Types

ImportRemoteOptions

interface ImportRemoteOptions {
  remoteUrl: string;
  scope: string;
  module: string;
  remoteUrlFallback?: string | null;
  enableNoCache?: boolean;
}

LoadRemoteOptions

interface LoadRemoteOptions {
  url: string;
  scope: string;
  enableNoCache?: boolean;
}

WebpackContainerScope

interface WebpackContainerScope {
  __initialized: boolean;
  __initializing: boolean;
  init(scopes: unknown): Promise<Record<string, unknown>>;
}

Constants

const REMOTE_ENTRY_FILE = 'remoteEntry.js';
const ROS_URL_GET_HOST = (accessKey: string) => `/api/v1/host/${accessKey}`;
const ROS_URL_LIST_REMOTES = (accessKey: string) => `/api/v1/remotes/${accessKey}`;
const ROS_URL_GETREMOTE = (accessKey: string, remoteName: string) => 
  `/api/v1/remote/${accessKey}/${remoteName}`;

Example Usage

Basic Remote Module Loading

import { importRemote } from '@dream.mf/utilities';

async function loadRemoteComponent() {
  const RemoteButton = await importRemote({
    remoteUrl: 'http://localhost:3001/remoteEntry.js',
    scope: 'remote_app',
    module: './Button',
    remoteUrlFallback: 'http://backup-server.com/remoteEntry.js',
    enableNoCache: true
  });

  return RemoteButton;
}

Using ROS for Remote Module Management

import { 
  getRemotesByAccessKey, 
  importRemoteUsingROS 
} from '@dream.mf/utilities';

async function loadRemoteComponents() {
  // Get all available remotes
  const remotes = await getRemotesByAccessKey('your-access-key');

  // Import a specific component
  const RemoteComponent = await importRemoteUsingROS(
    'your-access-key',
    'ui-components',
    './Button'
  );

  return RemoteComponent;
}

Preloading Remote Modules

import { preloadRemote, importRemote } from '@dream.mf/utilities';

async function loadApplication() {
  // Preload remote modules
  await preloadRemote({
    url: 'http://localhost:3001/remoteEntry.js',
    scope: 'remote_app',
    enableNoCache: false
  });

  // Later use them when needed
  const RemoteComponent = await importRemote({
    remoteUrl: 'http://localhost:3001/remoteEntry.js',
    scope: 'remote_app',
    module: './Component'
  });

  return RemoteComponent;
}