{"id":15704,"library":"mini-star","title":"mini-star","description":"mini-star is a robust frontend micro-kernel framework, bundler, and loader designed to help projects implement a plugin-based architecture. It facilitates the independent development and deployment of features as separate plugins. The library, currently at version 2.1.8, supports TypeScript natively and is framework-agnostic, meaning it can be integrated with React, Vue, Angular, jQuery, or other modern web frameworks. Key differentiators include its bundler for building AMD-based plugins, automatic processing of plugin and dependency paths, dynamic asynchronous module loading to optimize project size, and a powerful mechanism for sharing common dependencies across all plugins, reducing boilerplate and bundle size. Unlike `requirejs`, `mini-star` operates at a module level, aligning with modern frontend practices, and it distinguishes itself from micro-frontend solutions like `qiankun` by prioritizing dependency reuse and an isomorphic technology stack rather than isolation for heterogeneous applications. It offers a complete toolchain encompassing CLI, runtime, and bundler functionalities. The project appears to have an active development and maintenance cadence, with recent documentation updates indicating ongoing support.","status":"active","version":"2.1.8","language":"javascript","source_language":"en","source_url":"https://github.com/moonrailgun/mini-star#readme","tags":["javascript","micro-service","frontend","plugin","plugins","typescript"],"install":[{"cmd":"npm install mini-star","lang":"bash","label":"npm"},{"cmd":"yarn add mini-star","lang":"bash","label":"yarn"},{"cmd":"pnpm add mini-star","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The `MiniStar` class is the primary entry point for the runtime, enabling plugin loading and management. CommonJS `require` syntax is not recommended for modern usage and may lead to issues with ESM-only builds since v2.","wrong":"const MiniStar = require('mini-star');","symbol":"MiniStar","correct":"import { MiniStar } from 'mini-star';"},{"note":"To ensure type safety when configuring the `MiniStar` instance, import `MiniStarConfig` for the configuration object. TypeScript types are shipped with the package.","symbol":"MiniStarConfig","correct":"import type { MiniStarConfig } from 'mini-star';"},{"note":"When defining or interacting with plugin structures, import the `Plugin` type to leverage TypeScript's type-checking capabilities for plugin interfaces.","symbol":"Plugin","correct":"import type { Plugin } from 'mini-star';"}],"quickstart":{"code":"import { MiniStar } from 'mini-star';\n\ninterface MyPluginInstance {\n  render: (selector: string) => void;\n  // ... other methods/properties exposed by the plugin\n}\n\nasync function initializeMiniStar() {\n  const ministar = new MiniStar({\n    // Optional: Configure base path for plugins, e.g., for local development or CDN\n    base: '/plugins/', \n    // Optional: Global error handler for plugin loading failures\n    errorHandler: (error, pluginName) => {\n      console.error(`Failed to load plugin ${pluginName}:`, error);\n    }\n  });\n\n  // Register shared dependencies that plugins might use, preventing duplication\n  // This should be done before loading plugins that depend on them.\n  ministar.registerShared('react', window.React || require('react'));\n  ministar.registerShared('react-dom', window.ReactDOM || require('react-dom'));\n  console.log('Shared dependencies registered.');\n\n  try {\n    // Load a plugin by its registered name or path\n    const myPlugin = await ministar.loadPlugin<MyPluginInstance>('my-plugin-entry');\n    console.log('Plugin loaded successfully:', myPlugin);\n\n    // Assume the plugin exports a render function\n    if (myPlugin && typeof myPlugin.render === 'function') {\n      myPlugin.render('#app-root');\n      console.log('Plugin rendered to #app-root');\n    }\n  } catch (error) {\n    console.error('Error during plugin loading or rendering:', error);\n  }\n}\n\n// Ensure React and ReactDOM are available globally for demonstration if not bundled\n// In a real app, these would be proper imports in your host application\n(window as any).React = require('react');\n(window as any).ReactDOM = require('react-dom');\n\ninitializeMiniStar();","lang":"typescript","description":"This quickstart demonstrates how to initialize `mini-star`, register shared dependencies like React and ReactDOM, and dynamically load a plugin. It shows basic configuration, error handling, and how a plugin's exposed methods can be invoked."},"warnings":[{"fix":"Call `ministar.registerShared('dependencyName', dependencyObject);` for all common libraries (e.g., React, Vue, lodash) in your host application's initialization phase, prior to any `ministar.loadPlugin()` calls.","message":"Ensure all shared dependencies are registered with `ministar.registerShared()` *before* attempting to load any plugins that rely on those dependencies. Failing to do so will result in runtime errors within the plugin due to missing globals.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Thoroughly test plugin loading paths. For production, consider using absolute URLs or a CDN-based `base` path in `MiniStar` configuration. Ensure your bundler outputs plugins to the expected location and that the host application can access them.","message":"Plugin path resolution can be tricky, especially when moving between development and production environments. Relative paths or incorrect `base` configuration in `MiniStar` can lead to 'Plugin not found' errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always use `import { ... } from 'mini-star';` for consuming the `mini-star` library in your host application. Ensure your project's build setup (e.g., Webpack, Rollup) correctly handles ESM.","message":"`mini-star` has moved towards a modern module approach. Older CommonJS `require()` patterns for the main `mini-star` library itself might not work as expected or could lead to compatibility issues in projects configured for ESM.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Provide a custom `errorHandler` function in the `MiniStar` constructor options to log detailed information, capture stack traces, or report to an error monitoring service, enabling quicker debugging of plugin issues.","message":"When a plugin fails to load or execute, `mini-star`'s default error handling might be generic. Implementing a custom `errorHandler` in `MiniStarConfig` is crucial for better diagnostics in production.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure `React` (and other global dependencies) are properly imported and then registered using `ministar.registerShared('react', React);` in the host application before any plugins are loaded.","cause":"A plugin attempted to use `React` but it was not globally available or registered as a shared dependency with `mini-star`.","error":"Uncaught ReferenceError: React is not defined"},{"fix":"Verify the `base` path in `MiniStar` configuration. Check the network tab in browser dev tools for 404s on the plugin URL. Ensure the plugin's bundle is correctly built and accessible at the expected location.","cause":"The specified plugin script could not be fetched from the `base` URL or parsed correctly due to network issues, incorrect path, or syntax errors in the plugin bundle.","error":"Error: Plugin 'my-plugin-name' not found or failed to load. (Network error, or script parsing error)"},{"fix":"Ensure your plugin's entry file explicitly exports the `render` function (or whatever methods you expect). If using TypeScript, cast the loaded plugin to its specific interface: `await ministar.loadPlugin<MyPluginInterface>('my-plugin');`","cause":"The loaded plugin object does not match the expected interface, often because the plugin itself does not correctly expose the `render` method or the TypeScript type assertion is incorrect.","error":"TypeScript Error: Property 'render' does not exist on type 'Plugin'"}],"ecosystem":"npm"}