Skip to content

feat: add moduleFederation option #938

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
Open

feat: add moduleFederation option #938

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
6c24c14
feat: add new moduleFederation option
brunos3d Dec 15, 2022
bf7dda7
feat: add check to verify if process.isBrowser is defined as false
brunos3d Dec 20, 2022
f1b058c
feat: add warnings to avoid misconfiguration
brunos3d Dec 20, 2022
c6939b8
feat: update warning messages
brunos3d Dec 20, 2022
ae04c10
feat: use DefinePlugin to declare isBrowser at process
brunos3d Dec 22, 2022
be7f129
feat: update warning messages
brunos3d Dec 22, 2022
14cd316
feat: remove unecessary warning
brunos3d Dec 22, 2022
50d8406
feat: use unified option structure
brunos3d Dec 22, 2022
66e6786
fix: solve boolean logic error
brunos3d Dec 22, 2022
90ced6f
fix: force injection of serverSideModuleFederation option
brunos3d Dec 23, 2022
36158cc
fix: remove unused variable
brunos3d Dec 23, 2022
3f582c9
fix: remove wrong condition and error
brunos3d Dec 28, 2022
3b2c37d
feat: move serverSideFederation option to process.env
brunos3d Dec 30, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions packages/babel-plugin/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@ const properties = [

const LOADABLE_COMMENT = '#__LOADABLE__'

const loadablePlugin = declare((api, { defaultImportSpecifier = 'loadable' }) => {
const loadablePlugin = declare((api, babelOptions) => {
const { defaultImportSpecifier = 'loadable' } = babelOptions

const { types: t } = api

function collectImportCallPaths(startPath) {
Expand All @@ -33,7 +35,7 @@ const loadablePlugin = declare((api, { defaultImportSpecifier = 'loadable' }) =>
return imports
}

const propertyFactories = properties.map(init => init(api))
const propertyFactories = properties.map(init => init(api, babelOptions))

function isValidIdentifier(path, loadableImportSpecifier, lazyImportSpecifier) {
// `loadable()`
Expand Down
38 changes: 28 additions & 10 deletions packages/babel-plugin/src/properties/resolve.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,24 @@
import { getImportArg } from '../util'

export default function resolveProperty({ types: t, template }) {
const buildStatements = template`
if (require.resolveWeak) {
return require.resolveWeak(ID)
}

return eval('require.resolve')(ID)
`
const templates = {
federated: template`
require(ID)

if (require.resolveWeak) {
return require.resolveWeak(ID)
}

return eval('require.resolve')(ID)
`,
standard: template`
if (require.resolveWeak) {
return require.resolveWeak(ID)
}

return eval('require.resolve')(ID)
`,
}

function getCallValue(callPath) {
const importArg = getImportArg(callPath)
Expand All @@ -27,11 +38,18 @@ export default function resolveProperty({ types: t, template }) {
return t.stringLiteral(importArg.node.value)
}

return ({ callPath, funcPath }) =>
t.objectMethod(
return ({ callPath, funcPath }) => {
const targetTemplate = process.serverSideModuleFederation
? 'federated'
: 'standard'

return t.objectMethod(
'method',
t.identifier('resolve'),
funcPath.node.params,
t.blockStatement(buildStatements({ ID: getCallValue(callPath) })),
t.blockStatement(
templates[targetTemplate]({ ID: getCallValue(callPath) }),
),
)
}
}
27 changes: 26 additions & 1 deletion packages/webpack-plugin/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,16 @@ class LoadablePlugin {
writeToDisk,
outputAsset = true,
chunkLoadingGlobal = '__LOADABLE_LOADED_CHUNKS__',
serverSideModuleFederation = false,
} = {}) {
this.opts = { filename, writeToDisk, outputAsset, path, chunkLoadingGlobal }
this.opts = {
filename,
writeToDisk,
outputAsset,
path,
chunkLoadingGlobal,
serverSideModuleFederation,
}

// The Webpack compiler instance
this.compiler = null
Expand Down Expand Up @@ -101,6 +109,23 @@ class LoadablePlugin {
apply(compiler) {
this.compiler = compiler

if (
this.opts.serverSideModuleFederation === true &&
(compiler.options.target === 'web' ||
compiler.options.target === undefined)
) {
throw new Error(
`Enabling server-side module federation support for a client-side Webpack target (${compiler.options.target}) is unnecessary and will effectively disable all code-splitting.`,
)
}

if (this.opts.serverSideModuleFederation) {
Object.defineProperty(process, 'serverSideModuleFederation', {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 that's a fancy way to "teleport" settings.
However, the particular way you did it will break some assumptions of node creating a hard to understand "gap" for a few (rare) users of thread-loader or similar stuff.

Ease to fix. Just store what is required in process.env - a special place designed for this.

value: true,
writable: false,
})
}

const version = 'jsonpFunction' in compiler.options.output ? 4 : 5

// Add a custom chunk loading callback
Expand Down