Skip to content

Commit

Permalink
fix: cache busting and async quirks when mixing delegates
Browse files Browse the repository at this point in the history
  • Loading branch information
@ScriptedAlchemy
ScriptedAlchemy committed Feb 7, 2023
1 parent 1d50347 commit 1fc6e67
Show file tree
Hide file tree
Showing 10 changed files with 114 additions and 208 deletions.
18 changes: 9 additions & 9 deletions apps/3000-home/next.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,18 @@ const nextConfig = {
const { isServer } = options;
;
const remotes = {
// home: createDelegatedModule(require.resolve('./remote-delegate.js'), {
// remote: `home_app@http://localhost:3000/_next/static/${isServer ? 'ssr' : 'chunks'}/remoteEntry.js`,
// }),
// shop: createDelegatedModule(require.resolve('./remote-delegate.js'), {
// remote: `shop@http://localhost:3001/_next/static/${isServer ? 'ssr' : 'chunks'}/remoteEntry.js`,
// }),
home: createDelegatedModule(require.resolve('./remote-delegate.js'), {
remote: `home_app@http://localhost:3000/_next/static/${isServer ? 'ssr' : 'chunks'}/remoteEntry.js`,
}),
shop: createDelegatedModule(require.resolve('./remote-delegate.js'), {
remote: `shop@http://localhost:3001/_next/static/${isServer ? 'ssr' : 'chunks'}/remoteEntry.js`,
}),
checkout: createDelegatedModule(require.resolve('./remote-delegate.js'), {
remote: `checkout@http://localhost:3002/_next/static/${isServer ? 'ssr' : 'chunks'}/remoteEntry.js`,
}),
shop: `shop@http://localhost:3001/_next/static/${
isServer ? 'ssr' : 'chunks'
}/remoteEntry.js`,
// shop: `shop@http://localhost:3001/_next/static/${
// isServer ? 'ssr' : 'chunks'
// }/remoteEntry.js`,
// checkout: `checkout@http://localhost:3002/_next/static/${
// isServer ? 'ssr' : 'chunks'
// }/remoteEntry.js`,
Expand Down
1 change: 1 addition & 0 deletions apps/3000-home/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ const WebpackSvgRemote = dynamic(() => import('shop/WebpackSvg'), {
const WebpackPngRemote = dynamic(() => import('shop/WebpackPng'), {
ssr: true,
});
console.log('loaded home app', import('shop/WebpackPng'), import('checkout/ButtonOldAnt'));

const Home = () => {
return (
Expand Down
4 changes: 3 additions & 1 deletion apps/3000-home/remote-delegate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,11 @@ module.exports = new Promise((resolve, reject) => {

importDelegatedModule({
global,
url,
url: url + '?' + Date.now()
})
.then(async (remote) => {
console.log(__resourceQuery, 'resolved remote from', __webpack_runtime_id__)

resolve(remote)
})
.catch((err) => reject(err));
Expand Down
20 changes: 10 additions & 10 deletions apps/3001-shop/next.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,15 @@ const nextConfig = {
name: 'shop',
filename: 'static/chunks/remoteEntry.js',
remotes: {
// home: createDelegatedModule(require.resolve('./remote-delegate.js'), {
// remote: `home_app@http://localhost:3000/_next/static/${isServer ? 'ssr' : 'chunks'}/remoteEntry.js`,
// }),
// shop: createDelegatedModule(require.resolve('./remote-delegate.js'), {
// remote: `shop@http://localhost:3001/_next/static/${isServer ? 'ssr' : 'chunks'}/remoteEntry.js`,
// }),
// checkout: createDelegatedModule(require.resolve('./remote-delegate.js'), {
// remote: `checkout@http://localhost:3002/_next/static/${isServer ? 'ssr' : 'chunks'}/remoteEntry.js`,
// }),
home: createDelegatedModule(require.resolve('./remote-delegate.js'), {
remote: `home_app@http://localhost:3000/_next/static/${isServer ? 'ssr' : 'chunks'}/remoteEntry.js`,
}),
shop: createDelegatedModule(require.resolve('./remote-delegate.js'), {
remote: `shop@http://localhost:3001/_next/static/${isServer ? 'ssr' : 'chunks'}/remoteEntry.js`,
}),
checkout: createDelegatedModule(require.resolve('./remote-delegate.js'), {
remote: `checkout@http://localhost:3002/_next/static/${isServer ? 'ssr' : 'chunks'}/remoteEntry.js`,
}),
home: `home_app@http://localhost:3000/_next/static/${
isServer ? 'ssr' : 'chunks'
}/remoteEntry.js`,
Expand All @@ -54,7 +54,7 @@ const nextConfig = {
automaticAsyncBoundary: true,
enableImageLoaderFix: true,
enableUrlLoaderFix: true,
automaticPageStitching: true,
automaticPageStitching: false,
},
})
);
Expand Down
6 changes: 5 additions & 1 deletion apps/3001-shop/remote-delegate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,20 @@ import { importDelegatedModule } from '@module-federation/utilities';

// Delegates are currently not used in this example, but are left here for testing.
module.exports = new Promise((resolve, reject) => {
//eslint-disable-next-line
console.log('Delegate being called for', __resourceQuery);
//eslint-disable-next-line
const currentRequest = new URLSearchParams(__resourceQuery).get('remote');

const [global, url] = currentRequest.split('@');

importDelegatedModule({
global,
url,
url: url + '?' + Date.now()
})
.then(async (remote) => {
console.log(__resourceQuery, 'resolved remote from', __webpack_runtime_id__)

resolve(remote)
})
.catch((err) => reject(err));
Expand Down
36 changes: 18 additions & 18 deletions apps/3002-checkout/next.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,24 +20,24 @@ const nextConfig = {
name: 'checkout',
filename: 'static/chunks/remoteEntry.js',
remotes: {
// home: createDelegatedModule(require.resolve('./remote-delegate.js'), {
// remote: `home_app@http://localhost:3000/_next/static/${isServer ? 'ssr' : 'chunks'}/remoteEntry.js`,
// }),
// shop: createDelegatedModule(require.resolve('./remote-delegate.js'), {
// remote: `shop@http://localhost:3001/_next/static/${isServer ? 'ssr' : 'chunks'}/remoteEntry.js`,
// }),
// checkout: createDelegatedModule(require.resolve('./remote-delegate.js'), {
// remote: `checkout@http://localhost:3002/_next/static/${isServer ? 'ssr' : 'chunks'}/remoteEntry.js`,
// }),
home: `home_app@http://localhost:3000/_next/static/${
isServer ? 'ssr' : 'chunks'
}/remoteEntry.js`,
shop: `shop@http://localhost:3001/_next/static/${
isServer ? 'ssr' : 'chunks'
}/remoteEntry.js`,
checkout: `checkout@http://localhost:3002/_next/static/${
isServer ? 'ssr' : 'chunks'
}/remoteEntry.js`,
home: createDelegatedModule(require.resolve('./remote-delegate.js'), {
remote: `home_app@http://localhost:3000/_next/static/${isServer ? 'ssr' : 'chunks'}/remoteEntry.js`,
}),
shop: createDelegatedModule(require.resolve('./remote-delegate.js'), {
remote: `shop@http://localhost:3001/_next/static/${isServer ? 'ssr' : 'chunks'}/remoteEntry.js`,
}),
checkout: createDelegatedModule(require.resolve('./remote-delegate.js'), {
remote: `checkout@http://localhost:3002/_next/static/${isServer ? 'ssr' : 'chunks'}/remoteEntry.js`,
}),
// home: `home_app@http://localhost:3000/_next/static/${
// isServer ? 'ssr' : 'chunks'
// }/remoteEntry.js`,
// shop: `shop@http://localhost:3001/_next/static/${
// isServer ? 'ssr' : 'chunks'
// }/remoteEntry.js`,
// checkout: `checkout@http://localhost:3002/_next/static/${
// isServer ? 'ssr' : 'chunks'
// }/remoteEntry.js`,
},
exposes: {
'./CheckoutTitle': './components/CheckoutTitle',
Expand Down
6 changes: 5 additions & 1 deletion apps/3002-checkout/remote-delegate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,20 @@ import { importDelegatedModule } from '@module-federation/utilities';

// Delegates are currently not used in this example, but are left here for testing.
module.exports = new Promise((resolve, reject) => {
//eslint-disable-next-line
console.log('Delegate being called for', __resourceQuery);
//eslint-disable-next-line
const currentRequest = new URLSearchParams(__resourceQuery).get('remote');

const [global, url] = currentRequest.split('@');

importDelegatedModule({
global,
url,
url: url + '?' + Date.now()
})
.then(async (remote) => {
console.log(__resourceQuery, 'resolved remote from', __webpack_runtime_id__)

resolve(remote)
})
.catch((err) => reject(err));
Expand Down
12 changes: 5 additions & 7 deletions packages/nextjs-mf/src/internal.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,9 +111,7 @@ export const generateRemoteTemplate = (
};
if(window.remoteLoading[${JSON.stringify(global)}]) {
return window.remoteLoading[${JSON.stringify(
global
)}].then(resolve).catch(reject);
return resolve(window.remoteLoading[${JSON.stringify(global)}])
}
var res, rej;
Expand All @@ -125,16 +123,16 @@ export const generateRemoteTemplate = (
})
if (typeof window[${JSON.stringify(global)}] !== 'undefined') {
res(${global});
return resolve(${global});
res(window[${JSON.stringify(global)}]);
return resolve(window[${JSON.stringify(global)}]);
}
__webpack_require__.l(
url.href,
function (event) {
if (typeof window[${JSON.stringify(global)}] !== 'undefined') {
res(${global});
return resolve(${global});
res(window[${JSON.stringify(global)}]);
return resolve(window[${JSON.stringify(global)}]);
}
var errorType = event && (event.type === 'load' ? 'missing' : event.type);
var realSrc = event && event.target && event.target.src;
Expand Down
35 changes: 25 additions & 10 deletions packages/utilities/src/utils/common.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,27 +75,31 @@ export const importDelegatedModule = async (
) => {
// @ts-ignore
return loadScript(keyOrRuntimeRemoteItem)
.then((asyncContainer) => {
// for legacy reasons, we must mark container a initialized
// here otherwise older promise based implementation will try to init again with diff object
// asyncContainer.__initialized = true;
.then((asyncContainer: WebpackRemoteContainer) => {
return asyncContainer;
})
.then((asyncContainer) => {
.then((asyncContainer: WebpackRemoteContainer) => {
// most of this is only needed because of legacy promise based implementation
// can remove proxies once we remove promise based implementations
if (typeof window === 'undefined') {
//TODO: need to solve chunk flushing with delegated modules
return asyncContainer;
} else {
const proxy = {
get: asyncContainer.get,
//@ts-ignore
init: function (shareScope: any, initScope: any) {
try {
// @ts-ignore
return asyncContainer.init(shareScope, initScope);
} catch (e) {}
//@ts-ignore
proxy.__initialized = true;
//@ts-ignore
asyncContainer.init(shareScope, initScope);
// for legacy reasons, we must mark container a initialized
// here otherwise older promise based implementation will try to init again with diff object
//@ts-ignore
proxy.__initialized = true;
} catch (e) {
return 1
}

},
};
// @ts-ignore
Expand Down Expand Up @@ -171,6 +175,14 @@ const loadScript = (keyOrRuntimeRemoteItem: string | RuntimeRemote) => {
if (typeof window === 'undefined') {
//@ts-ignore
globalScope._config[containerKey] = reference.url;
} else {
// to match promise template system, can be removed once promise template is gone
if(!globalScope.remoteLoading) {
globalScope.remoteLoading = {};
}
if(globalScope.remoteLoading[containerKey]) {
return globalScope.remoteLoading[containerKey]
}
}

asyncContainer = new Promise(function (resolve, reject) {
Expand Down Expand Up @@ -215,6 +227,9 @@ const loadScript = (keyOrRuntimeRemoteItem: string | RuntimeRemote) => {
containerKey
);
});
if(typeof window !== 'undefined') {
globalScope.remoteLoading[containerKey] = asyncContainer;
}
}

return asyncContainer;
Expand Down
Loading

0 comments on commit 1fc6e67

Please sign in to comment.