Markdown Widgetlet

A React component for rendering Markdown, designed to be used as a Micro Frontend via Module Federation.

Features

• Renders Markdown with GFM support.
• Syntax highlighting.
• Can be consumed as a remote module.

Installation

npm install @microservicios/markdown-widgetlet

Usage

Module Federation

To use this component as a remote module in your Federated application, configure your host application to consume the remote entry.

Remote Entry URL: https://unpkg.com/@microservicios/markdown-widgetlet/assets/remoteEntry.js

Configuration Example:

"component": {
  "remoteUrl": "https://unpkg.com/@microservicios/markdown-widgetlet/assets/remoteEntry.js",
  "scope": "remoteApp",
  "module": "./MarkdownViewer"
}

Local Development

1. Install dependencies:

   yarn install

2. Start the development server:

   yarn dev

3. Build for production:

   yarn build

4. Publish push to origin

Important:

If you add libraries to the remote, you must add them to the loadRemote.ts file.

src/framework/loader/loadRemote.ts

import * as React from 'react'; import * as ReactDOM from 'react-dom'; // @ts-ignore import * as jsxRuntime from 'react/jsx-runtime'; import * as xyflow from '@xyflow/react'; import * as lucide from 'lucide-react'; import dagre from 'dagre';