fix: Ensure federated types are downloaded before type compiling/ type checking

- Adds a function to the webpack.config and documentation to make sure host types are downloaded to the plugin before the first type compile/ type check is happening

Avoids an error where on cold start the types were not yet downloaded but types were already checked.

src/frontend/apps/impress-plugin/src/MyCustomComponent.tsx

@@ -443,7 +443,7 @@ const MyCustomComponent: React.FC<ComponentProps> = ({
           >
             <Loading />
             <Text $size="s" style={{ marginTop: '16px', color: '#666' }}>
-              Loading plugin data...
+              Fake Loading...
             </Text>
           </Box>
         ) : (

src/frontend/apps/impress-plugin/src/ThemingDemo.tsx

@@ -153,8 +153,7 @@ const ThemingDemo: React.FC = () => {
           color: 'var(--c--theme--colors--greyscale-600)',
           lineHeight: '1.4',
         }}>
-          💡 This demo overrides primary-500, primary-600, and secondary-500 tokens.
-          Any component using these tokens will update!
+          💡 This demo overrides primary-500, primary-600, and secondary-500 css variables. It only works with CSS.
         </div>
       </div>
     </>

src/frontend/apps/impress-plugin/webpack.config.js

@@ -1,6 +1,11 @@
 const path = require('path');
-const { NativeFederationTypeScriptHost } = require('@module-federation/native-federation-typescript/webpack');
 const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
+const {
+  NativeFederationTypeScriptHost,
+} = require('@module-federation/native-federation-typescript/webpack');
+const {
+  NativeFederationTypeScriptHost: NativeFederationTypeScriptHostCore,
+} = require('@module-federation/native-federation-typescript');
 
 const moduleFederationConfig = {
   name: 'plugin_frontend',
@@ -31,6 +36,24 @@ const moduleFederationConfig = {
   },
 };
 
+let mfTypesReady;
+const ensureFederatedTypesPlugin = {
+  apply(compiler) {
+    compiler.hooks.beforeCompile.tapPromise(
+      'EnsureFederatedTypes',
+      async () => {
+        if (!mfTypesReady) {
+          const downloader = NativeFederationTypeScriptHostCore.raw({
+            moduleFederationConfig,
+          });
+          mfTypesReady = downloader.writeBundle();
+        }
+        await mfTypesReady;
+      },
+    );
+  },
+};
+
 module.exports = (env, argv) => {
   const dev = argv.mode !== 'production';
 
@@ -70,10 +93,11 @@ module.exports = (env, argv) => {
       new ModuleFederationPlugin(moduleFederationConfig),
       ...(dev
         ? [
-            NativeFederationTypeScriptHost({
-              moduleFederationConfig,
-            }),
-          ]
+          ensureFederatedTypesPlugin,
+          NativeFederationTypeScriptHost({
+            moduleFederationConfig,
+          }),
+        ]
         : []),
     ],
   };

src/frontend/apps/impress/next.config.js

@@ -28,9 +28,15 @@ const nextConfig = {
     NEXT_PUBLIC_BUILD_ID: buildId,
   },
   webpack(config, { isServer, dev }) {
-    // Prevent rebuild loops by ignoring node_modules and build outputs
+    // Prevent rebuild loops by ignoring node_modules and generated types/outputs
     config.watchOptions = {
-      ignored: ['**/node_modules/**', '**/.next/**', '**/dist/**'],
+      ignored: [
+        '**/node_modules/**',
+        '**/.next/**',
+        '**/dist/**',
+        '**/@mf-types/**',
+        '**/@mf-types.zip',
+      ],
     };
 
     // Grab the existing rule that handles SVG imports