feat: [v7] Async boundary runtime (#835)

* feat: install an async boundary runtime module

makes next async at startup. Effectively resolving any and all support issues.

* fix: improve startup inversion

* fix: improve eager modularization

* refactor: improve jsonp loading

* feat: eager load initial consumes

* fix: improve module and async module loading in runtmie module

* chore: move LoadDependenciesTemplate to own file, write tests

* chore: fix logs

* fix: improve stability of chunk push

* fix: prevent hmr destroying share scope

* fix: implement exact version resolution

* chore: move runtime module to single file again

* chore: remove dead hooks

* feat: [7] Async boundary runtime server (#851)

* feat: server async runtime boundary

- using inverse startup initialization to queue incoming require calls to entry points, await webpack to initialize and resolve share scope, then replay / resume execution of next/entrypoints.

- also patched an issue with HMR that caused share scope to tear server side. next deletes require cache too, in order to hmr, when they do that they also re-require webpack, which clears in memory share scope. To solve this, when detecting that share scope has torn, i clear the memory namespace i designated for remotes to attach to.
This will cause webpack to re-negotiate share scope with containers, sync, then push updated entry back into next.

* feat: support eager containers

* feat: async on server

* chore: Tear free async sharing (#864)

* feat: tear-free share scope!

* chore: begin cleanup

* feat: client use server inverter method

* feat: client using new chunk effect tracking

* fix: withstand module invalidation

* chore: add debug code

* fix: remove automaticAsyncBoundary options

* fix: dont crash on hasJsMatcher runtime module

* feat: consolidate async startup design

- using same central runtime modules for server and browser
- use scope persistence and inner container

* fix: enable embedded container in host runtime

* chore: remove async boundary options

* refactor: move methods from async inverter to inverted container plugin

* chore: remove old deps

* feat: remove automatic async boundary

BREAKING CHANGE: automaticAsyncBoundary option has been removed

* fix: exclude specific pages from page map automatically

* refactor: conslidate codebase

* fix: improve hot reload share recovery

* refactor: remove server jsonp template

* chore: remove dead code from runtime modules

* fix: clean up jsonp getCustomJsonpCode

getting chunk loading global from compiler output options

* feat: adding cleanInitArrays runtime helper

* chore: remove share scope hoist and module hoisting system

* chore: cleanup code

* chore: remove dead code from add module runtime plugin

likely can remove whole plugin in future

* chore: remove logs from delegate modules

* chore: remove old utils

* fix: add warning on auto page stitch

* fix: remove commented out code from InvertedContainerPlugin.ts

* chore: improve logging to see if its local load or remote load

* chore: clean up old custom promises factories

* fix: remove container proxy code

* fix: remove container proxy code

apps/3000-home/next.config.js

@@ -14,9 +14,6 @@ const nextConfig = {
   webpack(config, options) {
     const { isServer } = options;
     // used for testing build output snapshots
-    config.optimization.minimize = false;
-    config.optimization.chunkIds = 'named';
-    config.optimization.moduleIds = 'named';
 
     const remotes = {
       // shop: createDelegatedModule(require.resolve('./remote-delegate.js'), {
@@ -53,7 +50,6 @@ const nextConfig = {
           antd: {},
         },
         extraOptions: {
-          automaticAsyncBoundary: true,
           exposePages: true,
           enableImageLoaderFix: true,
           enableUrlLoaderFix: true,

apps/3000-home/pages/checkout/index.tsx

@@ -1,8 +1,7 @@
 //@ts-ignore
 import Page from 'checkout/pages/checkout/index';
-
+const Checkout = Page;
 // the data loading method needs to be here so next can static analyze it properly.
 // eslint-disable-next-line no-self-assign
-Page.getInitialProps = Page.getInitialProps;
-
-export default Page;
+Checkout.getInitialProps = Page.getInitialProps;
+export default Checkout;

apps/3000-home/pages/index.tsx

@@ -1,9 +1,17 @@
 import React, { Suspense, lazy } from 'react';
 import Head from 'next/head';
-
-const CheckoutTitle = lazy(() => import('checkout/CheckoutTitle'));
-const ButtonOldAnt = lazy(() => import('checkout/ButtonOldAnt'));
-const WebpackSvgRemote = lazy(() => import('shop/WebpackSvg'));
+import CheckoutTitle from 'checkout/CheckoutTitle';
+import ButtonOldAnt from 'checkout/ButtonOldAnt';
+console.log(ButtonOldAnt);
+// console.log('cc', cc);
+// const CheckoutTitle = lazy(() => import('checkout/CheckoutTitle'));
+// const ButtonOldAnt = lazy(() => import('checkout/ButtonOldAnt'));
+const WebpackSvgRemote = lazy(() =>
+  import('shop/WebpackSvg').then((m) => {
+    console.log(m);
+    return m;
+  })
+);
 const WebpackPngRemote = lazy(() => import('shop/WebpackPng'));
 
 const Home = () => {
@@ -54,7 +62,6 @@ const Home = () => {
           <b>checkout</b>
         </li>
       </ul>
-
       <h2 style={{ marginTop: '30px' }}>Federation test cases</h2>
       <table border={1} cellPadding={5}>
         <thead>

apps/3001-shop/next.config.js

@@ -60,7 +60,6 @@ const nextConfig = {
         },
         extraOptions: {
           exposePages: true,
-          automaticAsyncBoundary: true,
           enableImageLoaderFix: true,
           enableUrlLoaderFix: true,
           automaticPageStitching: false,

apps/3002-checkout/components/CheckoutTitle.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-
 const CheckoutTitle = () => {
   const [hookData, setHookData] = useState('');
 

apps/3002-checkout/next.config.js

@@ -49,7 +49,6 @@ const nextConfig = {
           antd: {},
         },
         extraOptions: {
-          automaticAsyncBoundary: true,
           exposePages: true,
           enableImageLoaderFix: true,
           enableUrlLoaderFix: true,