@vc-shell/framework

Modularity Plugin

The Modularity Plugin provides two main features:

• Dynamic Module Loading
• Extensions System

Dynamic Module Loading

The Dynamic Module Loading system allows you to load Vue.js modules at runtime.

Usage

import { useDynamicModules } from '@framework/core/plugins/modularity';
import { createApp } from 'vue';
import { createRouter } from 'vue-router';
const app = createApp(App);
const router = createRouter(/ router config /);
const { load, extensionsHelper } = useDynamicModules(app, {
    router,
    appName: 'your-app-name'
  }, 
  {
    baseUrl: 'https://your-modules-host.com/',
    manifestFileName: 'manifest.json', // optional, default: 'manifest.json'
  });
// Load all modules
await load();

Module Structure

Each module should have:

1. A manifest file (manifest.json) describing module files generated by Vite during build time
2. An entry point file that exports a Vue plugin
3. Optional CSS files

Example manifest.json:

{
  "entry": {
  "file": "index.js",
    "isEntry": true
  },
  "styles": {
    "file": "styles.css"
  }
}

Example module:

export default {
  install(app, options) {
  // Plugin installation code
  },
  extensions: {
  // Optional extensions configuration
  }
}

Extensions System

The Extensions System enables communication between the application and its modules.

Types of Extensions

1. Inbound Extensions: Extensions that allow the application to customize and extend the module's functionality
2. Outbound Extensions: Extensions that the module provides to extend the application's functionality

Registering Extensions

// In your module
export default {
  install(app) {
  // Plugin installation code
  },
  extensions: {
    inbound: {
      'customization-point': {
        // Extensions that this module accepts
        someConfig: true
      }
    },
    outbound: {
      'extension-point': [
        // Extensions this module provides
        {
          id: 'MyExtension',
          component: MyComponent,
        }
      ]
    }
  }
}

Using Extensions Helper

import { useExtensionsHelper } from '@vc-shell/framework';
import { inject } from 'vue';

// In your component setup
const extensionsHelper = inject(extensionsHelperSymbol);
// Get extensions provided by other modules
const outboundExtensions = extensionsHelper.getOutboundExtensions('extension-point');
// Get extensions configured for your module
const inboundExtensions = extensionsHelper.getInboundExtensions('your-module-id', 'customization-point');
// Get all extensions for a module
const moduleExtensions = extensionsHelper.getModuleExtensions('your-module-id');

Extension Types

1. Component Extensions

interface ExtensionPoint = {
  id: string;
  component: Component;
}

1. Composable Function Extensions

interface ComposableFunction = {
  id: string;
  fn: (...args: unknown[]) => unknown;
}

1. Configuration Object Extensions

type Extension = Record<string, unknown>;

Best Practices

1. Always provide unique IDs for extensions
2. Document your module's extension points
3. Handle missing or failed extensions gracefully
4. Use TypeScript interfaces for type safety
5. Keep extension configurations simple and serializable