@ice/stark-module
Installation
$ npm install @ice/stark-module --save
Module LifeCycle
specify module lifeCycle when pack code as a micro module
const SampleComponent = () => {
return <div>Sample</div>;
}
// mount function will be trigger when mount micro module
export function mount(ModuleComponent, targetNode, props) {
ReactDOM.render(<ModuleComponent {...props} />, targetNode);
}
// unmount function will be trigger when unmount micro module
export function unmount(targetNode) {
ReactDOM.unmountComponentAtNode(targetNode);
}
export default SampleComponent;
pack module with module spec UMD
Usage
Basic Usage
import { MicroModule } from '@ice/stark-module';
const App = () => {
const moduleInfo = {
name: 'moduleName',
url: 'https://localhost/module.js',
}
return <MicroModule moduleInfo={moduleInfo} />;
}
Register Modules
import { MicroModule, registerModule, registerModules, getModules } from '@ice/stark-module';
// register single module
registerModule({
url: 'https://localhost/module-a.js',
name: 'module-a',
});
// register multiple modules at once
registerModules([
{
url: 'https://localhost/module-b.js',
name: 'module-b',
},
{
url: 'https://localhost/module-c.js',
name: 'module-c',
},
]);
// get module info registered by API registerModules
const moduleInfo = getModules();
const App = () => {
// after registerMdoules, use micro module by specify module name
return (
<div>
<MicroModule moduleName="module-a" />
<MicroModule moduleName="module-b" />
<MicroModule moduleName="module-c" />
</div>
);
}
Registration Merging
If more than one modules are registered with the same name, only the last one will be kept.
import { registerModule, registerModules, getModules } from '@ice/stark-module';
registerModules([
{
url: 'https://localhost/module-a.js',
name: 'module-a',
},
{
url: 'https://localhost/module-b.js',
name: 'module-a',
},
]);
const modules = getModules();
/** the modules will be:
[{
url: 'https://localhost/module-b.js',
name: 'module-a',
}]
*/
registerModule({
url: 'https://localhost/module-c.js',
name: 'module-a',
});
const modules = getModules();
/** the modules will be:
[{
url: 'https://localhost/module-c.js',
name: 'module-a',
}]
*/
Clear Modules
import { registerModules, clearModules } from '@ice/stark-module';
registerModules([
{
url: 'https://localhost/module-a.js',
name: 'module-a',
},
{
url: 'https://localhost/module-b.js',
name: 'module-b',
},
]);
// clear all modules information and content cache.
clearModules();
Custom Lifecyle
import { MicroModule } from '@ice/stark-module';
const App = () => {
const moduleInfo = {
name: 'moduleName',
url: 'https://localhost/module.js',
mount: (ModuleComponent, mountNode) => {
console.log('custom mount');
ReactDOM.render(<ModuleComponent />, mountNode);
},
}
return <MicroModule moduleInfo={moduleInfo} />;
}
Custom mount component
import { mountModule, unmoutModule } from '@ice/stark-module';
const moduleInfo = {
name: 'moduleName',
url: 'https://localhost/module.js',
};
const ModuleComponent = () => {
const renderNode = useRef(null);
useEffect(() => {
mountModule(moduleInfo, renderNode, {});
return () => {
unmoutModule(moduleInfo, renderNode);
}
}, []);
return (<div ref={renderNode}></div>);
};
Register Local Modules
In some scenarios, it is necessary to support the built-in components. In this case, one can use render
property to render a local module.
import LocalComponent from './localComponent';
registerModules([{
name: 'moduleName',
render: () => LocalComponent,
}]);
const App = () => {
return (
<div>
<MicroModule moduleName="moduleName" />
</div>
);
}
Contributors
Feel free to report any questions as an issue, we'd love to have your helping hand on icestark
.
If you're interested in icestark
, see CONTRIBUTING.md for more information to learn how to get started.