Security News
RubyGems.org Adds New Maintainer Role
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
@module-federation/runtime
Advanced tools
- Can be combined with the build plug-in to share basic dependencies according to policies to reduce the number of module downloads and improve the loading speed of modules. - Only consume part of the export of the remote module and will not fully downloa
@module-federation/runtime
// Can load modules using only the runtime SDK without relying on build plugins
// When not using build plugins, shared dependencies cannot be automatically reused
import { init, loadRemote } from '@module-federation/runtime';
init({
name: '@demo/app-main',
remotes: [
{
name: "@demo/app2",
entry: "http://localhost:3006/remoteEntry.js"
},
{
name: "@demo/app3",
alias: "app3",
entry: "http://localhost:2001/module-federation-manifest.json"
},
],
});
// Load by alias
loadRemote<{add: (...args: Array<number>)=> number }>("app3/util").then((md)=>{
md.add(1,2,3);
});
init(options: InitOptions): void
type InitOptions {
name: string;
version?: string;
shared?: ShareInfos;
};
type RemoteInfo = (RemotesWithEntry | RemotesWithVersion) & {
alias?: string;
};
interface RemotesWithVersion {
name: string;
version: string;
}
interface RemotesWithEntry {
name: string;
entry: string;
}
type ShareInfos = {
// Package name and dependency basic information and sharing strategy
[pkgName: string]: Share;
};
type Share = {
// Versions of shared dependencies
version: string;
// Which modules consume the current shared dependencies?
useIn?: Array<string>;
// Which module does the shared dependency come from?
from?: string;
// Get the factory function of the shared dependency instance. When the cached shared instance cannot be loaded, its own shared dependency will be loaded.
lib: () => Module;
// Sharing strategy, what strategy will be used to determine the reuse of shared dependencies
shareConfig?: SharedConfig;
// Dependencies between shares
deps?: Array<string>;
// The scope under which the current shared dependencies are placed, the default is default
scope?: string | Array<string>;
};
import { init, loadRemote } from '@module-federation/runtime';
init({
name: '@demo/main-app',
remotes: [
{
name: '@demo/app2',
entry: 'http://localhost:3006/remoteEntry.js',
},
{
name: '@demo/app3',
alias: 'app3',
entry: 'http://localhost:2001/module-federation-manifest.json',
},
],
});
Type: loadRemote(id: string)
Used to load initialized remote modules, when used with build plugins, it can be loaded directly through native import("remoteName/expose")
syntax, and the build plugin will automatically convert it into loadRemote
usage.
Example
import { init, loadRemote } from '@module-federation/runtime';
init({
name: '@demo/main-app',
remotes: [
{
name: '@demo/app3',
alias: 'app3',
entry: 'http://localhost:2001/module-federation-manifest.json',
},
],
});
// remoteName + expose
loadRemote('@demo/app3/util').then((m) => m.add(1, 2, 3));
// alias + expose
loadRemote('app3/util').then((m) => m.add(1, 2, 3));
Type: loadShare(pkgName: string)
Gets the share
dependency. When there are share
dependencies that match the current host
in the global environment, the existing and satisfying share
dependencies will be reused first. Otherwise, load its own dependencies and store them in the global cache.
This API
is generally not called directly by users, but is used by build plugins to convert their own dependencies.
Example
import { init, loadRemote, loadShare } from '@module-federation/runtime';
import React from 'react';
import ReactDOM from 'react-dom';
init({
name: '@demo/main-app',
remotes: [],
shared: {
react: {
version: '17.0.0',
scope: 'default',
lib: () => React,
shareConfig: {
singleton: true,
requiredVersion: '^17.0.0',
},
},
'react-dom': {
version: '17.0.0',
scope: 'default',
lib: () => ReactDOM,
shareConfig: {
singleton: true,
requiredVersion: '^17.0.0',
},
},
},
});
loadShare('react').then((reactFactory) => {
console.log(reactFactory());
});
Used to extend the internal loading process of ModuleFederation
, affecting the entire loading process through hook triggers and return values.
import { init } from '@module-federation/runtime';
// mock get remote data remotes config
function getDataConfig() {
return new Promise((resolve) => {
setTimeout(() => {
resolve({
remotes: [
{
name: '@demo/sub',
alias: 'sub',
entry: 'http://localhost:2001/module-federation-manifest.json',
},
],
});
}, 2000);
});
}
function RemotesDataPlugin() {
return {
name: 'data-config',
async beforeRequest(args) {
const remotes = await getDataConfig();
origin.initOptions({
remotes,
});
return args;
},
};
}
init({
name: '@demo/micro-app',
remotes: [],
pluigns: [RemotesDataPlugin()],
});
loadRemote('sub/utils').then((m) => {
m.add(1, 2, 3, 4);
});
type Plugin = {
name: string;
core: {
beforeRequest: AsyncWaterfallHook<{
id: string;
options: Options;
origin: VmokHost;
}>;
};
snapshot: {};
};
type usePlugin = (plugin: Plugin) => void;
async function preloadRemote(preloadOptions: Array<PreloadRemoteArgs>) {}
type depsPreloadArg = Omit<PreloadRemoteArgs, 'depsRemote'>;
type PreloadRemoteArgs = {
// Preload the name and alias of the remote
nameOrAlias: string;
// Expose to be preloaded
// Default to preload all exposes
// Only the required expose will be loaded when an expose is provided
exposes?: Array<string>; // Default request
// Default is sync, only load synchronous code referenced in the expose
// Set to all to load synchronous and asynchronous references
resourceCategory?: 'all' | 'sync';
// Load all dependencies when no value is configured
// Only the resources needed will be loaded after configuring the dependency
depsRemote?: boolean | Array<depsPreloadArg>;
// No filtering of resources when not configured
// Will filter out unwanted resources after configuring
filter?: (assetUrl: string) => boolean;
};
Through preloadRemote
, module resources can be preloaded at an earlier stage to avoid waterfall requests. preloadRemote
can preload the following content:
remoteEntry
of remote
expose
of remote
remote
remote
resources that remote
depends onimport { init, preloadRemote } from '@module-federation/runtime';
init({
name: '@demo/preload-remote',
remotes: [
{
name: '@demo/sub1',
entry: 'http://localhost:2001/vmok-manifest.json',
},
{
name: '@demo/sub2',
entry: 'http://localhost:2001/vmok-manifest.json',
},
{
name: '@demo/sub3',
entry: 'http://localhost:2001/vmok-manifest.json',
},
],
});
FAQs
- Can be combined with the build plug-in to share basic dependencies according to policies to reduce the number of module downloads and improve the loading speed of modules. - Only consume part of the export of the remote module and will not fully downloa
The npm package @module-federation/runtime receives a total of 478,107 weekly downloads. As such, @module-federation/runtime popularity was classified as popular.
We found that @module-federation/runtime demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 8 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.