From 4a8590bff779223b70a7162cfe57e700e1b55ab9 Mon Sep 17 00:00:00 2001 From: ScriptedAlchemy Date: Tue, 19 Dec 2023 15:36:23 -0800 Subject: [PATCH 1/2] fix: clean up next app configs --- apps/3000-home/cypress.config.ts | 1 + apps/3000-home/next.config.js | 31 ++++++++---- apps/3000-home/pages/_app.tsx | 7 +-- apps/3000-home/pages/index.tsx | 2 +- apps/3001-shop/cypress.config.ts | 1 + apps/3001-shop/next.config.js | 4 +- apps/3001-shop/pages/_app.tsx | 9 ++-- apps/3001-shop/pages/shop/index.tsx | 50 +++++++++++++++---- .../components/CheckoutTitle.tsx | 2 + apps/3002-checkout/cypress.config.ts | 1 + apps/3002-checkout/next.config.js | 1 - apps/3002-checkout/pages/_app.tsx | 4 +- apps/3002-checkout/pages/checkout/index.tsx | 19 +++++-- apps/node-host/tsconfig.json | 2 +- apps/node-host/webpack.config.js | 10 ++-- 15 files changed, 103 insertions(+), 41 deletions(-) diff --git a/apps/3000-home/cypress.config.ts b/apps/3000-home/cypress.config.ts index 1ec2a0d1261..3d66abaa6e5 100644 --- a/apps/3000-home/cypress.config.ts +++ b/apps/3000-home/cypress.config.ts @@ -3,4 +3,5 @@ import { defineConfig } from 'cypress'; export default defineConfig({ e2e: nxE2EPreset(__filename, { cypressDir: 'cypress' }), + defaultCommandTimeout: 20000, }); diff --git a/apps/3000-home/next.config.js b/apps/3000-home/next.config.js index b80dd750aca..7e12ca32750 100644 --- a/apps/3000-home/next.config.js +++ b/apps/3000-home/next.config.js @@ -44,9 +44,6 @@ try { } catch (e) { /* empty */ } -const { - createDelegatedModule, -} = require('@module-federation/nextjs-mf/utilities'); /** * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions} @@ -59,14 +56,27 @@ const nextConfig = { }, webpack(config, options) { const { isServer } = options; - // used for testing build output snapshots const remotes = { - shop: createDelegatedModule(require.resolve('./remote-delegate.js'), { - remote: `shop@http://localhost:3001/_next/static/${ - isServer ? 'ssr' : 'chunks' - }/remoteEntry.js`, - }), + // shop: { + // name: 'shop', + // alias: 'shop', + // entry: `http://localhost:3001/_next/static/${ + // isServer ? 'ssr' : 'chunks' + // }/remoteEntry.js`, + // }, + // checkout: { + // name: 'checkout', + // alias: 'checkout', + // entry: `http://localhost:3002/_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`, // }), @@ -77,6 +87,9 @@ const nextConfig = { checkout: `checkout@http://localhost:3002/_next/static/${ isServer ? 'ssr' : 'chunks' }/remoteEntry.js`, + shop: `shop@http://localhost:3001/_next/static/${ + isServer ? 'ssr' : 'chunks' + }/remoteEntry.js`, }; config.plugins.push( diff --git a/apps/3000-home/pages/_app.tsx b/apps/3000-home/pages/_app.tsx index 77d250cc496..7bfd5c70b1a 100644 --- a/apps/3000-home/pages/_app.tsx +++ b/apps/3000-home/pages/_app.tsx @@ -3,8 +3,7 @@ import { useState } from 'react'; import App from 'next/app'; import { Layout, version } from 'antd'; import Router, { useRouter } from 'next/router'; - -import SharedNav from '../components/SharedNav'; +const SharedNav = React.lazy(() => import('../components/SharedNav')); import HostAppMenu from '../components/menu'; import 'antd/dist/antd.css'; function MyApp(props) { @@ -38,7 +37,9 @@ function MyApp(props) { return ( - + + + diff --git a/apps/3000-home/pages/index.tsx b/apps/3000-home/pages/index.tsx index 41f2c462904..8c02633157e 100644 --- a/apps/3000-home/pages/index.tsx +++ b/apps/3000-home/pages/index.tsx @@ -76,7 +76,7 @@ const Home = () => { Loading remote component (CheckoutTitle) from localhost:3002
- dynamic(()=>import('checkout/CheckoutTitle')) + lazy(()=>import('checkout/CheckoutTitle'))
diff --git a/apps/3001-shop/cypress.config.ts b/apps/3001-shop/cypress.config.ts index 1ec2a0d1261..1b53a12014c 100644 --- a/apps/3001-shop/cypress.config.ts +++ b/apps/3001-shop/cypress.config.ts @@ -3,4 +3,5 @@ import { defineConfig } from 'cypress'; export default defineConfig({ e2e: nxE2EPreset(__filename, { cypressDir: 'cypress' }), + defaultCommandTimeout: 10000, }); diff --git a/apps/3001-shop/next.config.js b/apps/3001-shop/next.config.js index a275b95818d..5a2667e0172 100644 --- a/apps/3001-shop/next.config.js +++ b/apps/3001-shop/next.config.js @@ -5,9 +5,7 @@ const path = require('path'); const { registerTsConfigPaths } = require('nx/src/plugins/js/utils/register'); registerTsConfigPaths(path.join(workspaceRoot, 'tsconfig.tmp.json')); const NextFederationPlugin = require('@module-federation/nextjs-mf'); - -// const { createDelegatedModule } = require('@module-federation/nextjs-mf/utilities'); - +const fs = require('fs'); /** * @type {import('@nx/next/plugins/with-nx').WithNxOptions} **/ diff --git a/apps/3001-shop/pages/_app.tsx b/apps/3001-shop/pages/_app.tsx index bd36735741a..e2a88e7b60e 100644 --- a/apps/3001-shop/pages/_app.tsx +++ b/apps/3001-shop/pages/_app.tsx @@ -1,6 +1,5 @@ -import React, { useState } from 'react'; +import React, { Suspense, useState, lazy } from 'react'; import App from 'next/app'; -import dynamic from 'next/dynamic'; import { Layout, version } from 'antd'; import Router, { useRouter } from 'next/router'; @@ -8,7 +7,7 @@ import HostAppMenu from '../components/menu'; import 'antd/dist/antd.css'; -const SharedNav = dynamic(() => import('home/SharedNav'), { ssr: true }); +const SharedNav = lazy(() => import('home/SharedNav')); function MyApp({ Component, pageProps }) { const { asPath } = useRouter(); @@ -40,7 +39,9 @@ function MyApp({ Component, pageProps }) { return ( - + + + diff --git a/apps/3001-shop/pages/shop/index.tsx b/apps/3001-shop/pages/shop/index.tsx index c00352b7336..1f403279641 100644 --- a/apps/3001-shop/pages/shop/index.tsx +++ b/apps/3001-shop/pages/shop/index.tsx @@ -45,17 +45,47 @@ const Shop = (props) => { ); }; - Shop.getInitialProps = async () => { - try { - return await fetch('https://swapi.dev/api/people/1').then((res) => - res.json(), - ); - } catch (e) { - return { - apiFail: true, - }; - } + const timeout = (ms: number) => + new Promise((resolve) => setTimeout(resolve, ms)); + + const fetchPromise = fetch('https://swapi.dev/api/people/1').then((res) => + res.json(), + ); + + const fallback = { + name: 'Luke Skywalker', + height: '172', + mass: '77', + hair_color: 'blond', + skin_color: 'fair', + eye_color: 'blue', + birth_year: '19BBY', + gender: 'male', + homeworld: 'https://swapi.dev/api/planets/1/', + films: [ + 'https://swapi.dev/api/films/1/', + 'https://swapi.dev/api/films/2/', + 'https://swapi.dev/api/films/3/', + 'https://swapi.dev/api/films/6/', + ], + species: [], + vehicles: [ + 'https://swapi.dev/api/vehicles/14/', + 'https://swapi.dev/api/vehicles/30/', + ], + starships: [ + 'https://swapi.dev/api/starships/12/', + 'https://swapi.dev/api/starships/22/', + ], + created: '2014-12-09T13:50:51.644000Z', + edited: '2014-12-20T21:17:56.891000Z', + url: 'https://swapi.dev/api/people/1/', + }; + + const timerPromise = timeout(3000).then(() => fallback); + + return Promise.race([fetchPromise, timerPromise]); }; export default Shop; diff --git a/apps/3002-checkout/components/CheckoutTitle.tsx b/apps/3002-checkout/components/CheckoutTitle.tsx index c464de57161..eb832dc8143 100644 --- a/apps/3002-checkout/components/CheckoutTitle.tsx +++ b/apps/3002-checkout/components/CheckoutTitle.tsx @@ -1,10 +1,12 @@ import React, { useEffect, useState } from 'react'; + const CheckoutTitle = () => { const [hookData, setHookData] = useState(''); useEffect(() => { setHookData('with hooks data'); }, []); + console.log('CHECKOUT TITLE Componnet'); return (

diff --git a/apps/3002-checkout/cypress.config.ts b/apps/3002-checkout/cypress.config.ts index 1ec2a0d1261..82aa9031ccc 100644 --- a/apps/3002-checkout/cypress.config.ts +++ b/apps/3002-checkout/cypress.config.ts @@ -3,4 +3,5 @@ import { defineConfig } from 'cypress'; export default defineConfig({ e2e: nxE2EPreset(__filename, { cypressDir: 'cypress' }), + defaultCommandTimeout: 15000, }); diff --git a/apps/3002-checkout/next.config.js b/apps/3002-checkout/next.config.js index af60713ad47..ff94ff872b1 100644 --- a/apps/3002-checkout/next.config.js +++ b/apps/3002-checkout/next.config.js @@ -19,7 +19,6 @@ const nextConfig = { }, webpack(config, options) { const { isServer } = options; - config.plugins.push( new NextFederationPlugin({ name: 'checkout', diff --git a/apps/3002-checkout/pages/_app.tsx b/apps/3002-checkout/pages/_app.tsx index 998f5a143fe..c372ec5a55e 100644 --- a/apps/3002-checkout/pages/_app.tsx +++ b/apps/3002-checkout/pages/_app.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { Suspense, lazy, useState } from 'react'; import App from 'next/app'; import dynamic from 'next/dynamic'; import { Layout, version } from 'antd'; @@ -7,7 +7,7 @@ import Router, { useRouter } from 'next/router'; import HostAppMenu from '../components/menu'; import 'antd/dist/antd.css'; -const SharedNav = dynamic(() => import('home/SharedNav'), { ssr: true }); +const SharedNav = lazy(() => import('home/SharedNav')); function MyApp({ Component, pageProps }) { const { asPath } = useRouter(); diff --git a/apps/3002-checkout/pages/checkout/index.tsx b/apps/3002-checkout/pages/checkout/index.tsx index bb54bd3dcbb..4044a403f74 100644 --- a/apps/3002-checkout/pages/checkout/index.tsx +++ b/apps/3002-checkout/pages/checkout/index.tsx @@ -43,8 +43,21 @@ const Checkout = (props) => ( ); Checkout.getInitialProps = async () => { - return await fetch('https://jsonplaceholder.typicode.com/todos/1').then( - (res) => res.json(), - ); + const timeout = (ms: number) => + new Promise((resolve) => setTimeout(resolve, ms)); + + const fetchPromise = fetch( + 'https://jsonplaceholder.typicode.com/todos/1', + ).then((res) => res.json()); + + // this will resolve after 3 seconds + const timerPromise = timeout(3000).then(() => ({ + userId: 1, + id: 1, + title: 'delectus aut autem', + completed: false, + })); + + return Promise.race([fetchPromise, timerPromise]); }; export default Checkout; diff --git a/apps/node-host/tsconfig.json b/apps/node-host/tsconfig.json index c1e2dd4e8be..5e6b1c1d484 100644 --- a/apps/node-host/tsconfig.json +++ b/apps/node-host/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "../../tsconfig.base.json", + "extends": "../../tsconfig.tmp.json", "files": [], "include": [], "references": [ diff --git a/apps/node-host/webpack.config.js b/apps/node-host/webpack.config.js index fb314ff27ed..c554a79359d 100644 --- a/apps/node-host/webpack.config.js +++ b/apps/node-host/webpack.config.js @@ -1,6 +1,9 @@ -const { registerPluginTSTranspiler } = require('nx/src/utils/nx-plugin.js'); +const { registerTsConfigPaths } = require('nx/src/plugins/js/utils/register'); +const { workspaceRoot } = require('nx/src/utils/workspace-root'); +const path = require('path'); + +registerTsConfigPaths(path.join(workspaceRoot, 'tsconfig.tmp.json')); -registerPluginTSTranspiler(); const { composePlugins, withNx } = require('@nx/webpack'); const { UniversalFederationPlugin } = require('@module-federation/node'); @@ -18,10 +21,9 @@ module.exports = composePlugins(withNx(), (config) => { isServer: true, name: 'node_host', remotes: { - node_local_remote: 'commonjs ../node-local-remote/remoteEntry.js', + // node_local_remote: 'commonjs ../node-local-remote/remoteEntry.js', node_remote: 'node_remote@http://localhost:3002/remoteEntry.js', }, - experiments: {}, }), ); return config; From f6cd44f3b5511df026753c192e70b8edd8b44c4a Mon Sep 17 00:00:00 2001 From: ScriptedAlchemy Date: Tue, 19 Dec 2023 15:55:11 -0800 Subject: [PATCH 2/2] docs: remove TS sync cmds --- apps/3000-home/cypress/e2e/app.cy.ts | 5 +- apps/3001-shop/cypress/e2e/app.cy.ts | 10 +++- apps/3002-checkout/cypress/e2e/app.cy.ts | 9 ++-- package-lock.json | 1 - package.json | 3 -- packages/enhanced/pullts.js | 65 ------------------------ 6 files changed, 18 insertions(+), 75 deletions(-) delete mode 100644 packages/enhanced/pullts.js diff --git a/apps/3000-home/cypress/e2e/app.cy.ts b/apps/3000-home/cypress/e2e/app.cy.ts index 8d555e21747..70c648c35c2 100644 --- a/apps/3000-home/cypress/e2e/app.cy.ts +++ b/apps/3000-home/cypress/e2e/app.cy.ts @@ -32,13 +32,16 @@ describe('3000-home/', () => { describe('Routing checks', () => { it('check that clicking back and forwards in client side routeing still renders the content correctly', () => { + cy.visit('/'); cy.visit('/shop'); cy.url().should('include', '/shop'); getH1().contains('Shop Page'); + cy.wait(300); cy.get('.home-menu-link').click(); //eslint-disable-next-line - cy.wait(2999); + cy.wait(5000); cy.url().should('include', '/'); + cy.wait(300); getH1().contains('This is SPA combined'); }); }); diff --git a/apps/3001-shop/cypress/e2e/app.cy.ts b/apps/3001-shop/cypress/e2e/app.cy.ts index 7d1cd0db694..26a67bdcd9f 100644 --- a/apps/3001-shop/cypress/e2e/app.cy.ts +++ b/apps/3001-shop/cypress/e2e/app.cy.ts @@ -31,14 +31,20 @@ describe('3001-shop/', () => { }); describe('Routing checks', () => { - it('check that clicking back and forwards in client side routeing still renders the content correctly', () => { + it('check that clicking back and forwards in client-side routing still renders the content correctly', () => { + cy.visit('/'); cy.visit('/shop'); cy.url().should('include', '/shop'); + cy.wait(1000); getH1().contains('Shop Page'); + cy.wait(1000); cy.get('.home-menu-link').click(); //eslint-disable-next-line - cy.wait(2999); + cy.wait(1999); + cy.get('.home-menu-link').click(); + cy.wait(1000); cy.url().should('include', '/'); + cy.wait(1000); getH1().contains('This is SPA combined'); }); }); diff --git a/apps/3002-checkout/cypress/e2e/app.cy.ts b/apps/3002-checkout/cypress/e2e/app.cy.ts index fbaf0433cc5..593c8ae21b3 100644 --- a/apps/3002-checkout/cypress/e2e/app.cy.ts +++ b/apps/3002-checkout/cypress/e2e/app.cy.ts @@ -31,14 +31,17 @@ describe('3002-checkout/', () => { }); describe('Routing checks', () => { - it('check that clicking back and forwards in client side routeing still renders the content correctly', () => { + it('check that clicking back and forwards in client-side routing still renders the content correctly', () => { + cy.visit('/checkout'); + cy.visit('/'); cy.visit('/checkout'); cy.url().should('include', '/checkout'); getH1().contains('checkout page'); + cy.wait(1000); cy.get('.home-menu-link').click(); - //eslint-disable-next-line - cy.wait(2999); + cy.wait(8000); cy.url().should('include', '/'); + cy.wait(2000); getH1().contains('This is SPA combined'); }); }); diff --git a/package-lock.json b/package-lock.json index 2cfdeefd750..01fc4304e76 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,7 +7,6 @@ "": { "name": "module-federation", "version": "0.0.0", - "hasInstallScript": true, "license": "MIT", "dependencies": { "adm-zip": "0.5.10", diff --git a/package.json b/package.json index 1186fa83018..b12a2fe5967 100644 --- a/package.json +++ b/package.json @@ -28,9 +28,6 @@ "serve:website": "nx run website:serve", "build:website": "nx run website:build.netlify", "extract-i18n:website": "nx run website:extract-i18n", - "postinstall": "npm run sync:types:webpack", - "sync:types:webpack": "cp -rf ./webpack/* ./node_modules/webpack", - "sync:pullMFTypes": "concurrently \"node ./packages/enhanced/pullts.js\"", "app:next:dev": "nx run-many --target=build --configuration=development -p enhanced utils nextjs-mf && nx run-many --target=serve --configuration=development -p 3000-home 3001-shop 3002-checkout", "app:next:prod": "nx run-many --target=build --configuration=production -p 3000-home 3001-shop 3002-checkout && nx run-many --target=serve --configuration=production -p 3000-home 3001-shop 3002-checkout", "app:runtime:dev": "nx run-many --target=serve -p runtime_demo_host runtime_demo_remote1", diff --git a/packages/enhanced/pullts.js b/packages/enhanced/pullts.js deleted file mode 100644 index 9213f9be951..00000000000 --- a/packages/enhanced/pullts.js +++ /dev/null @@ -1,65 +0,0 @@ -const fs = require('fs'); -const path = require('path'); - -function modifyAndWriteImports(filePath, outputDir) { - let content = fs.readFileSync(filePath, 'utf-8'); - - // Replace all strings starting with " and containing relative paths - content = content.replace( - /("|')(\.\.\/[^"']+|\.\/[^"']+)("|')/g, - (match, p1, p2, p3) => { - const resolvedPath = path - .resolve(path.dirname(filePath), p2) - .split('node_modules/webpack')[1]; - return `${p1}webpack${resolvedPath}${p3}`; - }, - ); - - // Make import paths relative if they are within the same directory - const currentDir = path.dirname(filePath).split('node_modules/webpack')[1]; - const regex = new RegExp( - `"webpack${currentDir.replace(/\//g, '\\/')}/([^"]+)"`, - 'g', - ); - content = content.replace(regex, '"./$1"'); - - const resolvedPath = path.resolve(filePath).split('node_modules/webpack')[1]; - const outputPath = path.join(outputDir, resolvedPath); - - // Create the directory for the file - fs.mkdirSync(path.dirname(outputPath), { recursive: true }); - - // Write the content to the file - fs.writeFileSync(outputPath, content); -} - -function traverseAndWrite(dir, outputDir) { - const files = fs.readdirSync(dir); - for (const file of files) { - const filePath = path.join(dir, file); - const stat = fs.statSync(filePath); - if (stat.isDirectory()) { - traverseAndWrite(filePath, outputDir); - } else if (filePath.endsWith('.d.ts')) { - modifyAndWriteImports(filePath, outputDir); - } - } -} - -// Find the path to the webpack package in node_modules -const webpackPath = path.dirname(require.resolve('webpack/package.json')); - -// Output directory where the modified files will be written -const outputDir = './src'; - -// Start the traversal and modification -traverseAndWrite(path.join(webpackPath, 'lib/container'), outputDir); -traverseAndWrite(path.join(webpackPath, 'lib/sharing'), outputDir); -traverseAndWrite( - path.join(webpackPath, 'declarations/plugins/container'), - outputDir, -); -traverseAndWrite( - path.join(webpackPath, 'declarations/plugins/sharing'), - outputDir, -);