Skip to content

Commit

Permalink
chore: export plugin name
Browse files Browse the repository at this point in the history
  • Loading branch information
@2heal1
2heal1 committed Nov 13, 2024
1 parent 4495e8b commit d310df7
Show file tree
Hide file tree
Showing 4 changed files with 149 additions and 152 deletions.
5 changes: 5 additions & 0 deletions .changeset/spicy-roses-hear.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@module-federation/storybook-addon': patch
---

chore: export plugin name
246 changes: 121 additions & 125 deletions packages/rsbuild-plugin/src/cli/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,146 +17,142 @@ type ModuleFederationOptions =

const PLUGIN_MODULE_FEDERATION_NAME = 'rsbuild:module-federation-enhanced';

export const setupRsbuildConfig: (
export { PLUGIN_MODULE_FEDERATION_NAME };

export const pluginModuleFederation = (
moduleFederationOptions: ModuleFederationOptions,
) => RsbuildPlugin['setup'] = (moduleFederationOptions) => (api) => {
const sharedOptions: [string, sharePlugin.SharedConfig][] = parseOptions(
moduleFederationOptions.shared || [],
(item, key) => {
if (typeof item !== 'string')
throw new Error('Unexpected array in shared');
const config: sharePlugin.SharedConfig =
item === key || !isRequiredVersion(item)
? {
import: item,
}
: {
import: key,
requiredVersion: item,
};
return config;
},
(item) => item,
);
// shared[0] is the shared name
const shared = sharedOptions.map((shared) =>
shared[0].endsWith('/') ? shared[0].slice(0, -1) : shared[0],
);

api.modifyRsbuildConfig((config) => {
// Change some default configs for remote modules
if (moduleFederationOptions.exposes) {
config.dev ||= {};

// For remote modules, Rsbuild should send the ws request to the provider's dev server.
// This allows the provider to do HMR when the provider module is loaded in the consumer's page.
if (config.server?.port && !config.dev.client?.port) {
config.dev.client ||= {};
config.dev.client.port = config.server.port;
}
): RsbuildPlugin => ({
name: PLUGIN_MODULE_FEDERATION_NAME,
setup: (api) => {
const sharedOptions: [string, sharePlugin.SharedConfig][] = parseOptions(
moduleFederationOptions.shared || [],
(item, key) => {
if (typeof item !== 'string')
throw new Error('Unexpected array in shared');
const config: sharePlugin.SharedConfig =
item === key || !isRequiredVersion(item)
? {
import: item,
}
: {
import: key,
requiredVersion: item,
};
return config;
},
(item) => item,
);
// shared[0] is the shared name
const shared = sharedOptions.map((shared) =>
shared[0].endsWith('/') ? shared[0].slice(0, -1) : shared[0],
);

api.modifyRsbuildConfig((config) => {
// Change some default configs for remote modules
if (moduleFederationOptions.exposes) {
config.dev ||= {};

// For remote modules, Rsbuild should send the ws request to the provider's dev server.
// This allows the provider to do HMR when the provider module is loaded in the consumer's page.
if (config.server?.port && !config.dev.client?.port) {
config.dev.client ||= {};
config.dev.client.port = config.server.port;
}

// Change the default assetPrefix to `true` for remote modules.
// This ensures that the remote module's assets can be requested by consumer apps with the correct URL.
const originalConfig = api.getRsbuildConfig('original');
if (
originalConfig.dev?.assetPrefix === undefined &&
config.dev.assetPrefix === config.server?.base
) {
config.dev.assetPrefix = true;
// Change the default assetPrefix to `true` for remote modules.
// This ensures that the remote module's assets can be requested by consumer apps with the correct URL.
const originalConfig = api.getRsbuildConfig('original');
if (
originalConfig.dev?.assetPrefix === undefined &&
config.dev.assetPrefix === config.server?.base
) {
config.dev.assetPrefix = true;
}
}
}
});

api.modifyEnvironmentConfig((config, { mergeEnvironmentConfig }) => {
/**
* Currently, splitChunks will take precedence over module federation shared modules.
* So we need to disable the default split chunks rules to make shared modules to work properly.
* @see https://github.com/module-federation/module-federation-examples/issues/3161
*/
if (config.performance?.chunkSplit?.strategy === 'split-by-experience') {
config.performance.chunkSplit = {
...config.performance.chunkSplit,
strategy: 'custom',
};
}

// Module Federation runtime uses ES6+ syntax,
// adding to include and let SWC transform it
config.source.include = [
...(config.source.include || []),
/@module-federation[\\/]sdk/,
/@module-federation[\\/]runtime/,
];

// filter external with shared config,
const externals = config.output.externals;
if (Array.isArray(externals)) {
const sharedModules = new Set<string>();
config.output.externals = externals.filter((ext) => {
let sharedModule;
if (isRegExp(ext)) {
const match = shared.some((dep) => {
if (
(ext as RegExp).test(dep) ||
(ext as RegExp).test(pkgJson.name)
) {
sharedModule = dep;
return true;
}
return false;
});
});

match && sharedModule && sharedModules.add(sharedModule);
return !match;
}
api.modifyEnvironmentConfig((config, { mergeEnvironmentConfig }) => {
/**
* Currently, splitChunks will take precedence over module federation shared modules.
* So we need to disable the default split chunks rules to make shared modules to work properly.
* @see https://github.com/module-federation/module-federation-examples/issues/3161
*/
if (config.performance?.chunkSplit?.strategy === 'split-by-experience') {
config.performance.chunkSplit = {
...config.performance.chunkSplit,
strategy: 'custom',
};
}

if (typeof ext === 'string') {
if (ext === pkgJson.name) {
return false;
// Module Federation runtime uses ES6+ syntax,
// adding to include and let SWC transform it
config.source.include = [
...(config.source.include || []),
/@module-federation[\\/]sdk/,
/@module-federation[\\/]runtime/,
];

// filter external with shared config,
const externals = config.output.externals;
if (Array.isArray(externals)) {
const sharedModules = new Set<string>();
config.output.externals = externals.filter((ext) => {
let sharedModule;
if (isRegExp(ext)) {
const match = shared.some((dep) => {
if (
(ext as RegExp).test(dep) ||
(ext as RegExp).test(pkgJson.name)
) {
sharedModule = dep;
return true;
}
return false;
});

match && sharedModule && sharedModules.add(sharedModule);
return !match;
}

const match = shared.some((dep) => {
if (dep === ext) {
sharedModule = dep;
if (typeof ext === 'string') {
if (ext === pkgJson.name) {
return false;
}

const match = shared.some((dep) => {
if (dep === ext) {
sharedModule = dep;
}
return dep === ext;
});
if (match) {
sharedModule && sharedModules.add(sharedModule);
return false;
}
return dep === ext;
});
if (match) {
sharedModule && sharedModules.add(sharedModule);
return false;
return true;
}
return true;
}
return true;
});
if (sharedModules.size > 0) {
for (const sharedModule of sharedModules) {
logger.log(
`${sharedModule} is removed from externals because it is a shared module.`,
);
});
if (sharedModules.size > 0) {
for (const sharedModule of sharedModules) {
logger.log(
`${sharedModule} is removed from externals because it is a shared module.`,
);
}
}
}
}

const mfConfig: EnvironmentConfig = {
tools: {
rspack: {
output: {
chunkLoading: 'jsonp',
const mfConfig: EnvironmentConfig = {
tools: {
rspack: {
output: {
chunkLoading: 'jsonp',
},
},
},
},
};
return mergeEnvironmentConfig(config, mfConfig);
});
};

export const pluginModuleFederation = (
moduleFederationOptions: ModuleFederationOptions,
): RsbuildPlugin => ({
name: PLUGIN_MODULE_FEDERATION_NAME,
setup: (api) => {
setupRsbuildConfig(moduleFederationOptions)(api);
};
return mergeEnvironmentConfig(config, mfConfig);
});

api.modifyBundlerChain(async (chain) => {
chain
Expand Down
1 change: 1 addition & 0 deletions packages/storybook-addon/preset.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,4 @@ export default {
});
},
};
export { PLUGIN_NAME } from './src/utils/with-module-federation-enhanced-rsbuild';
49 changes: 22 additions & 27 deletions packages/storybook-addon/src/utils/with-module-federation-enhanced-rsbuild.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { correctImportPath } from './correctImportPath';
import type { RsbuildConfig, RsbuildPlugin } from '@rsbuild/core';
import type { moduleFederationPlugin } from '@module-federation/sdk';

export const PLUGIN_NAME = 'module-federation-storybook-addon';
// add bootstrap for host project
const bootstrapPath = path.resolve(
process.cwd(),
Expand Down Expand Up @@ -47,36 +48,30 @@ export const withModuleFederation = async (
// remoteEntry already includes one hmr runtime, and an additional one is not necessary.
hmr: false,
},
tools: {
rspack: (config) => {
config.output ??= {};
config.output.chunkLoadingGlobal =
'module-federation-storybook-addon';
config.plugins?.push(
new ModuleFederationPlugin({
name: options.name || 'module-federation-storybook-addon',
shared: {
react: {
singleton: true,
},
'react-dom': {
singleton: true,
},
...options.shared,
},
remotes: {
...options.remotes,
},
shareStrategy: options.shareStrategy,
}),
);
return config;
},
},
};

return mergeRsbuildConfig(config, mfConfig);
});

api.modifyBundlerChain(async (chain) => {
chain.plugin(PLUGIN_NAME).use(ModuleFederationPlugin, [
{
name: options.name || PLUGIN_NAME,
shared: {
react: {
singleton: true,
},
'react-dom': {
singleton: true,
},
...options.shared,
},
remotes: {
...options.remotes,
},
shareStrategy: options.shareStrategy,
},
]);
});
},
};

Expand Down

0 comments on commit d310df7

Please sign in to comment.