chore: covered varFileName example with e2e

Author: crutch12

e2e/vite-webpack-rspack/tests/index.spec.ts

@@ -38,7 +38,7 @@ test.describe('Vite Host Tests', () => {
   });
 });
 
-test.describe('Vite remote', () => {
+test.describe('Vite module remote', () => {
   test('has title', async ({ page, baseURL }) => {
     await page.goto(baseURL!);
     const productHeader = page.getByRole('heading', {
@@ -78,6 +78,19 @@ test.describe('Vite remote', () => {
   });
 });
 
+test.describe('Vite var remote', () => {
+  test('has title', async ({ page, baseURL }) => {
+    await page.goto(baseURL!);
+    const purchasesCountHeader = page.getByRole('heading', {
+      level: 2,
+      name: 'Count of purchases',
+      exact: true,
+    });
+
+    await expect(purchasesCountHeader).toBeVisible();
+  });
+});
+
 test.describe('Rspack remote', () => {
   test('has title', async ({ page, baseURL }) => {
     await page.goto(baseURL!);
@@ -139,7 +152,11 @@ test.describe('Dynamic remote', () => {
     // Check that lodash version is displayed in SpecialPromo banner
     await showAdToggle.check({ force: true });
 
-    const specialPromoBanner = page.getByRole('heading', { level: 2, name: 'Up to 50% off!', exact: true });
+    const specialPromoBanner = page.getByRole('heading', {
+      level: 2,
+      name: 'Up to 50% off!',
+      exact: true,
+    });
     await expect(specialPromoBanner).toBeVisible();
 
     const lodashVersionDisplay = page.getByTestId('lodash-version-display');

examples/vite-vite/vite-host/src/App.jsx

@@ -10,16 +10,9 @@ import { MuiDemo } from '@namespace/viteViteRemote/MuiDemo';
 import StyledDemo from '@namespace/viteViteRemote/StyledDemo';
 import { ref } from 'vue';
 
-import { mf } from './mf';
-
 console.log('Share Vue', ref);
 console.log('Share React', R, RD);
 
-// @namespace/viteViteRemote is not valid name variable, thus we have to load it with loadRemote instaed of basic usage
-const LazyVarApp = R.lazy(() => {
-  return mf.loadRemote('@namespace/viteViteRemote')
-})
-
 export default function () {
   return (
     <div style={{ background: 'lightgray' }}>
@@ -51,11 +44,6 @@ export default function () {
       <EmotionDemo />
 
       <hr />
-
-      <h2>LazyVarApp</h2>
-      <R.Suspense fallback="loading...">
-        <LazyVarApp />
-      </R.Suspense>
     </div>
   );
 }

examples/vite-vite/vite-host/src/mf.js

@@ -29,7 +29,7 @@ export default defineConfig({
       },
       dts: false,
       filename: 'remoteEntry-[hash].js',
-      varFilename: 'varRemoteEntry.js',
+      varFilename: 'varRemoteEntry.js', // in cases when host's config requires remote's "type": "var"
       manifest: true,
       shared: {
         vue: {},

examples/vite-vite/vite-remote/vite.config.js

@@ -10,10 +10,15 @@ import './index.css';
 import _ from 'lodash';
 _.VERSION;
 
-const RemoteProduct = lazy(
+const ModuleRemoteProduct = lazy(
   () =>
     // @ts-ignore
-    import('remote/Product')
+    import('moduleRemote/Product')
+);
+const VarRemotePurchasesCount = lazy(
+  () =>
+    // @ts-ignore
+    import('remote/PurchasesCount')
 );
 const RspackReviews = lazy(
   () =>
@@ -68,7 +73,10 @@ const App = () => {
           <Toggle label="Show Dynamic Ad" checked={showAd} onValueChange={setShowAd} />
           {showAd && <Suspense fallback="Loading...">{Banner ? <Banner /> : null}</Suspense>}
           <Suspense fallback="Loading...">
-            <RemoteProduct />
+            <ModuleRemoteProduct />
+          </Suspense>
+          <Suspense fallback="Loading...">
+            <VarRemotePurchasesCount />
           </Suspense>
           <Suspense fallback="Loading...">
             <RspackReviews />

examples/vite-webpack-rspack/host/src/App.tsx

@@ -5,10 +5,17 @@ import { defineConfig } from 'vite';
 const mfConfig = {
   name: 'host',
   remotes: {
-    remote: {
+    // vite remote (module)
+    moduleRemote: {
+      name: 'moduleRemote', // should not conflict with "var" remote name // todo: related to https://github.com/module-federation/vite/issues/352
       entry: 'http://localhost:4001/custom-filename.js',
       type: 'module',
     },
+    // vite remote (var)
+    remote: {
+      entry: 'http://localhost:4001/varRemoteEntry.js',
+      type: 'var',
+    },
     webpack: {
       entry: 'http://localhost:8080/remoteEntry.js',
       type: 'var',

examples/vite-webpack-rspack/host/vite.config.js

@@ -0,0 +1,17 @@
+export default () => {
+  return (
+    <section aria-labelledby="purchases-count" className="mt-16 sm:mt-24">
+      <h2 className="text-lg font-medium text-gray-900">Count of purchases </h2>
+
+      <div className="mt-6">
+        <h3 className="text-sm font-medium text-gray-900">Total</h3>
+        <div className="mt-3 space-y-6 text-sm text-gray-500">1928</div>
+      </div>
+
+      <div className="mt-6">
+        <h3 className="text-sm font-medium text-gray-900">For the last 30 days</h3>
+        <div className="mt-3 space-y-6 text-sm text-gray-500">155</div>
+      </div>
+    </section>
+  );
+};

examples/vite-webpack-rspack/remote/src/PurchasesCount.jsx

@@ -9,9 +9,11 @@ export default defineConfig({
     federation({
       name: 'remote',
       filename: 'custom-filename.js',
+      varFilename: 'varRemoteEntry.js',
       // Modules to expose
       exposes: {
         './Product': './src/Product.jsx',
+        './PurchasesCount': './src/PurchasesCount.jsx',
       },
       shared: ['react', 'react-dom'],
     }),