fix(nextjs-mf): deprecate utils use (#2234)

Co-authored-by: ScriptedAlchemy <[email protected]>

Author: ScriptedAlchemy

.changeset/great-radios-check.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/nextjs-mf': patch
+---
+
+deprecate injectScript and module-federation/utilities usage

packages/nextjs-mf/README.md

@@ -165,18 +165,12 @@ new NextFederationPlugin({
   extraOptions: {
     debug: boolean, // `false` by default
     exposePages: boolean, // `false` by default
-    enableImageLoaderFix: boolean, // `false` by default
-    enableUrlLoaderFix: boolean, // `false` by default
-    skipSharingNextInternals: boolean, // `false` by default
   },
 });
 ```
 
 - `debug` – enables debug mode. It will print additional information about what is going on under the hood.
 - `exposePages` – exposes automatically all nextjs pages for you and theirs `./pages-map`.
-- `enableImageLoaderFix` – adds public hostname to all assets bundled by `nextjs-image-loader`. So if you serve remoteEntry from `http://example.com` then all bundled assets will get this hostname in runtime. It's something like Base URL in HTML but for federated modules.
-- `enableUrlLoaderFix` – adds public hostname to all assets bundled by `url-loader`.
-- `skipSharingNextInternals` – disables sharing of next internals. You can use it if you want to share next internals yourself or want to use this plugin on non next applications
 
 ## Demo
 
@@ -273,22 +267,23 @@ new NextFederationPlugin({
 
 Ive added a util for dynamic chunk loading, in the event you need to load remote containers dynamically.
 
-**InjectScript**
 
 ```js
-import { injectScript } from '@module-federation/nextjs-mf/utils';
+import { loadRemote, init } from '@module-federation/runtime';
 // if i have remotes in my federation plugin, i can pass the name of the remote
-injectScript('home').then((remoteContainer) => {
-  remoteContainer.get('./exposedModule');
-});
+loadRemote('home/exposedModule')
 // if i want to load a custom remote not known at build time.
-
-injectScript({
-  global: 'home',
-  url: 'http://somthing.com/remoteEntry.js',
-}).then((remoteContainer) => {
-  remoteContainer.get('./exposedModule');
-});
+init({
+  name: 'hostname',
+  remotes: [
+    {
+      name: 'home',
+      entry: 'http://somthing.com/remoteEntry.js'
+    }
+  ],
+  force: true // may be needed to sideload remotes after the fact. 
+})
+loadRemote('home/exposedModule')
 ```
 
 **revalidate**
@@ -305,14 +300,10 @@ import { revalidate } from '@module-federation/nextjs-mf/utils';
 import Document, { Html, Head, Main, NextScript } from 'next/document';
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
-    const initialProps = await Document.getInitialProps(ctx);
-
-    // can be any lifecycle or implementation you want
-    ctx?.res?.on('finish', () => {
-      revalidate().then((shouldUpdate) => {
-        console.log('finished sending response', shouldUpdate);
-      });
+    await revalidate().then((shouldUpdate) => {
+      console.log('finished sending response', shouldUpdate);
     });
+    const initialProps = await Document.getInitialProps(ctx);
 
     return initialProps;
   }

packages/nextjs-mf/utils/index.ts

@@ -1,14 +1,18 @@
+import * as deadUtils from '@module-federation/utilities';
+
 /**
  * Extracts the URL and global from the module federation utilities.
  * @module @module-federation/utilities/src/utils/pure
  */
 export { extractUrlAndGlobal } from '@module-federation/utilities';
 
-/**
- * Injects a script from the module federation utilities.
- * @module @module-federation/utilities/src/utils/common
- */
-export { injectScript } from '@module-federation/utilities';
+//@ts-ignore
+export const injectScript = (args) => {
+  console.warn(
+    'injectScript is deprecated, use module-federation/runtime and loadRemote',
+  );
+  return deadUtils.injectScript(args);
+};
 
 /**
  * Flushes chunks from the module federation node utilities.