Skip to content

feat: provide a mechanism to extend the remotes and shared fields of webpack config #382

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

Merged
merged 3 commits into from
Jan 14, 2021
Merged

feat: provide a mechanism to extend the remotes and shared fields of webpack config #382

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0a02718
feat(npm-scripts): shim `path` package from node
izaera Jan 13, 2021
c380ba0
feat(npm-scripts): let `remotes` and `shared` fields of webpack be au…
izaera Jan 13, 2021
c79aaea
fix(npm-scripts): don't fail for default exports
izaera Jan 13, 2021
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
1 change: 1 addition & 0 deletions projects/npm-tools/packages/npm-scripts/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
"metal-tools-soy": "4.3.2",
"mini-css-extract-plugin": "0.11.2",
"minimist": "^1.2.0",
"path-browserify": "^1.0.1",
Copy link
Member Author

@izaera izaera Jan 13, 2021

Choose a reason for hiding this comment

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

I'm sure @wincent will love this 😍

Copy link
Contributor

@wincent wincent Jan 18, 2021

Choose a reason for hiding this comment

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

predictable

"prettier": "^2.1.2",
"react": "*",
"react-dom": "*",
Expand Down
1 change: 1 addition & 0 deletions projects/npm-tools/packages/npm-scripts/src/transform/js/relocateImports.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ module.exports = function (previousDirRelPath) {

if (
NODE_TYPES.has(node.type) &&
source &&
source.value.startsWith('./')
) {
source.value = source.value.replace(/^\./, dotReplacement);
Expand Down
185 changes: 156 additions & 29 deletions projects/npm-tools/packages/npm-scripts/src/utils/createFederationConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,37 +9,153 @@ const {
} = require('webpack');

const createTempFile = require('./createTempFile');
const getMergedConfig = require('./getMergedConfig');
const parseBnd = require('./parseBnd');
const writeWebpackFederationEntryPoint = require('./writeWebpackFederationEntryPoint');

/**
* This object must represent the current configuration status of the portal's
* project if we don't want to break the build. It contains, for each
* federation-enabled project, the packages that are federated.
* The following two arrays are roughly equivalent to the old default preset
Copy link
Member Author

@izaera izaera Jan 13, 2021

Choose a reason for hiding this comment

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

Turns out that I was wrong in the previous PR and it didn't make too much sense to mix imports and federation because the model is a bit different.

* imports for bundler 2.
*
* Note that there's no real need to define federated packages per project as
* the relation is not used for anything. However, it is better to do it this
* way, because if we mix all together we end up with a very entangled
* configuration.
* In the case of `DEFAULT_REMOTES` it serves the same purpose as the `"/"`
* imports.
*
* Note also that when you want to include a project in the federated build to
* consume other packages (even if it doesn't publish any package) you must
* declare it here.
* The `DEFAULT_SHARED` array contains the list of external dependencies that
* must be shared across all projects.
*/
const FEDERATED_PACKAGES = {
'frontend-js-react-web': [
'classnames',
'formik',
'prop-types',
'react',
'react-dnd',
'react-dnd-html5-backend',
'react-dom',
],
'frontend-js-web': [],
'frontend-taglib-clay': ['@clayui/icon'],
'portal-template-react-renderer-impl': [],
};
const DEFAULT_REMOTES = [
'frontend-js-components-web',
'frontend-js-metal-web',
'frontend-js-react-web',
'frontend-js-spa-web',
'frontend-js-web',
'frontend-taglib',
'frontend-taglib-chart',
'frontend-taglib-clay',
];
const DEFAULT_SHARED = [
'@clayui/alert',
'@clayui/autocomplete',
'@clayui/badge',
'@clayui/breadcrumb',
'@clayui/button',
'@clayui/card',
'@clayui/charts',
'@clayui/color-picker',
'@clayui/css',
'@clayui/data-provider',
'@clayui/date-picker',
'@clayui/drop-down',
'@clayui/empty-state',
'@clayui/form',
'@clayui/icon',
'@clayui/label',
'@clayui/layout',
'@clayui/link',
'@clayui/list',
'@clayui/loading-indicator',
'@clayui/management-toolbar',
'@clayui/modal',
'@clayui/multi-select',
'@clayui/multi-step-nav',
'@clayui/nav',
'@clayui/navigation-bar',
'@clayui/pagination',
'@clayui/pagination-bar',
'@clayui/panel',
'@clayui/popover',
'@clayui/progress-bar',
'@clayui/shared',
'@clayui/slider',
'@clayui/sticker',
'@clayui/table',
'@clayui/tabs',
'@clayui/time-picker',
'@clayui/tooltip',
'@clayui/upper-toolbar',
'classnames',
'clay',
'clay-alert',
'clay-autocomplete',
'clay-badge',
'clay-button',
'clay-card',
'clay-card-grid',
'clay-checkbox',
'clay-collapse',
'clay-component',
'clay-data-provider',
'clay-dataset-display',
'clay-dropdown',
'clay-icon',
'clay-label',
'clay-link',
'clay-list',
'clay-loading-indicator',
'clay-management-toolbar',
'clay-modal',
'clay-multi-select',
'clay-navigation-bar',
'clay-pagination',
'clay-pagination-bar',
'clay-portal',
'clay-progress-bar',
'clay-radio',
'clay-select',
'clay-sticker',
'clay-table',
'clay-tooltip',
'formik',
'incremental-dom',
'incremental-dom-string',
'lodash.escape',
'lodash.groupby',
'lodash.isequal',
'lodash.memoize',
'lodash.unescape',
'metal',
'metal-affix',
'metal-ajax',
'metal-anim',
'metal-aop',
'metal-assertions',
'metal-clipboard',
'metal-component',
'metal-debounce',
'metal-dom',
'metal-drag-drop',
'metal-events',
'metal-incremental-dom',
'metal-jsx',
'metal-key',
'metal-keyboard-focus',
'metal-multimap',
'metal-pagination',
'metal-path-parser',
'metal-position',
'metal-promise',
'metal-router',
'metal-scrollspy',
'metal-soy',
'metal-soy-bundle',
'metal-state',
'metal-storage',
'metal-structs',
'metal-throttle',
'metal-toggler',
'metal-uri',
'metal-useragent',
'metal-web-component',
'prop-types',
'querystring',
'react',
'react-dnd',
'react-dnd-html5-backend',
'react-dom',
'svg4everybody',
'uuid',
'xss-filters',
];

/**
* Create a webpack configuration to inject federation support to the build.
Expand All @@ -63,6 +179,11 @@ module.exports = async function () {

await writeWebpackFederationEntryPoint(mainFilePath);

let {remotes, shared} = getMergedConfig('npmscripts', 'federation');

remotes = remotes || [];
shared = shared || [];

return {
context: process.cwd(),
devtool: 'source-map',
Expand Down Expand Up @@ -108,7 +229,7 @@ module.exports = async function () {
},
name,
remoteType: 'script',
remotes: Object.keys(FEDERATED_PACKAGES).reduce(
remotes: [...DEFAULT_REMOTES, ...remotes].reduce(
(remotes, name) => {
remotes[
name
Expand All @@ -118,14 +239,20 @@ module.exports = async function () {
},
{}
),
shared: []
.concat(...Object.values(FEDERATED_PACKAGES))
.reduce((shared, name) => {
shared: [...DEFAULT_SHARED, ...shared].reduce(
(shared, name) => {
shared[name] = {singleton: true};

return shared;
}, {}),
},
{}
),
}),
],
resolve: {
fallback: {
path: require.resolve('path-browserify'),
},
},
};
};
5 changes: 5 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11804,6 +11804,11 @@ passwd-user@^3.0.0:
dependencies:
execa "^1.0.0"

path-browserify@^1.0.1:
Copy link
Member Author

@izaera izaera Jan 13, 2021

Choose a reason for hiding this comment

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

Mmmm, I love the smell of new dependencies in the morning....

🚁 🔥

version "1.0.1"
resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-1.0.1.tgz#d98454a9c3753d5790860f16f68867b9e46be1fd"
integrity sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==

path-dirname@^1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
Expand Down