Shared Helpers (@glideroggan/mfe-helpers)

Helpers and widgets for the Import POC, packaged for reuse with strict code-splitting via subpath exports.

Install (as published package)

• Package name: @glideroggan/mfe-helpers
• Subpaths:
  • @glideroggan/mfe-helpers/react → hoistReactApp
  • @glideroggan/mfe-helpers/angular → hoistAngularApp
  • @glideroggan/mfe-helpers/modal → openSharedModal
  • @glideroggan/mfe-helpers → minimal core (WidgetWrapper types only)

Usage

React 18/19:

import * as ReactDOMClient from 'react-dom/client'
import React from 'react'
import App from './App'
import { hoistReactApp } from '@glideroggan/mfe-helpers/react'

hoistReactApp('mfe-react-xx', { React, App, ReactDOMClient }, { cssUrls: new URL('mfe.css', import.meta.url).href })

React 17:

import React from 'react'
import { render, unmountComponentAtNode } from 'react-dom'
import App from './App'
import { hoistReactApp } from '@glideroggan/mfe-helpers/react'

hoistReactApp('mfe-react-17', { React, App, ReactDOM: { render, unmountComponentAtNode } as any })

Angular 18/20:

import { createCustomElement } from '@angular/elements'
import { EnvironmentInjector } from '@angular/core'
import { hoistAngularApp } from '@glideroggan/mfe-helpers/angular'

export function defineMfe(injector: EnvironmentInjector) {
  hoistAngularApp('mfe-angular-xx', { createCustomElement, injector, component: MfeAngularXXComponent })
}

Shared modal:

const { openSharedModal } = await import('@glideroggan/mfe-helpers/modal')
openSharedModal(document.querySelector('widget-wrapper')!, { title: 'Details', description: '...' })

Build (from source in this repo)

• Build JS + types to dist/:
  • yarn build (esbuild + tsc emit .d.ts)
• Serve for local importmap dev:
  • yarn serve (http://localhost:8083)

Publish

Update package metadata and publish:

1. Set final package name and un-private it:

• package.json → name: "@your-org/mfe-helpers", remove private, add license, repository, homepage, bugs.

2. Ensure files are scoped:

• Add files: ["dist", "README.md", "LICENSE"]

3. Ensure types are exported per subpath:

• exports: include types fields for ., ./react, ./angular, ./modal.

4. Login and publish:

• npm login
• npm publish --access public

Export map (dist)

• dist/index.js (+ index.d.ts): minimal core (WidgetWrapper types).
• dist/entry-react.js (+ entry-react.d.ts): React helpers.
• dist/entry-angular.js (+ entry-angular.d.ts): Angular helpers.
• dist/entry-modal.js (+ entry-modal.d.ts): Modal helpers.

Design notes

• Subpath-only adapters enforce code-splitting: React MFEs never fetch Angular code.
• No bare @angular/* in main entry to avoid loading Angular on non-Angular pages.
• Shadow DOM default mounting for consistent styling.