@mexty/block

React components for MEXT federation modules with author namespace support.

Installation

npm install @mexty/block

Quick Start

Global Components (Traditional)

import { Chart, VideoPlayer, Form } from '@mexty/block';

function MyApp() {
  return (
    <div>
      <Chart data={chartData} />
      <VideoPlayer src="video.mp4" />
      <Form onSubmit={handleSubmit} />
    </div>
  );
}

Author-Specific Components (New!)

// Import specific components from different authors
import { Fps, GameEngine } from '@mexty/block/fabiensabatie';
import { Chart as JohnChart } from '@mexty/block/johnsmith';
import { Dashboard } from '@mexty/block/alicejohnson';

function MyApp() {
  return (
    <div>
      <Fps config={fpsConfig} />
      <GameEngine settings={gameSettings} />
      <JohnChart data={chartData} />
      <Dashboard metrics={dashboardData} />
    </div>
  );
}

Dynamic Loading

import { AuthorBlock } from '@mexty/block';

function DynamicComponent({ author, component, ...props }) {
  return (
    <AuthorBlock 
      author={author} 
      component={component} 
      {...props}
    />
  );
}

// Usage
<DynamicComponent 
  author="fabiensabatie" 
  component="Fps" 
  config={fpsConfig} 
/>

How It Works

Federation Loading: Components are loaded as federated modules from the MEXT server
Author Namespaces: Each user gets a unique namespace for their components
Direct Imports: Import components directly using @mexty/block/authorname
Type Safety: Full TypeScript support with proper type definitions

CLI Integration

Use mexty sync to update available components:

npx @mexty/cli sync

This generates:

Global namespace exports in the main package
Author-specific entry files for direct imports
TypeScript definitions for all components

Available Import Patterns

// Global namespace (backward compatible)
import { Chart } from '@mexty/block';

// Author-specific named imports
import { Fps, Chart as FabienChart } from '@mexty/block/fabiensabatie';

// Author-specific default import
import fabiensabatieComponents from '@mexty/block/fabiensabatie';

// Dynamic loading
import { AuthorBlock } from '@mexty/block';

Benefits

No Naming Conflicts: Multiple authors can create components with the same name
Author Attribution: Clear visibility of who created each component
Trusted Sources: Use components from specific authors you trust
Tree Shaking: Import only the components you need
Type Safety: Full TypeScript support across all patterns

Learn More

License

MIT