Skip to content

Commit 219df67

Browse files
ScriptedAlchemyScriptedAlchemy
committed
fix(SSR+mono): start exposes sequentially and wait for both client/server remoteEntry.js; start federated-css consumers sequentially with per-port waits; fix(vue2-in-vue3): implement BaseMethods.checkInfoOnNonDefaultHost
1 parent dce9b7b commit 219df67

File tree

3 files changed

+143
-56
lines changed

3 files changed

+143
-56
lines changed

‎federated-css-react-ssr/scripts/start-exposes.cjs‎

Lines changed: 41 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -8,33 +8,48 @@ function run(cmd, args, opts = {}) {
88
return spawn(cmd, args, { stdio: 'inherit', cwd: root, shell: true, ...opts });
99
}
1010

11-
async function main() {
12-
// build all exposes, then serve all
13-
console.log('[exposes] building all expose apps...');
14-
await new Promise((resolve, reject) => {
15-
const p = run('pnpm', ['--filter', '"federated-css-react-ssr_expose-*"', '-r', 'run', 'build']);
16-
p.on('exit', code => (code === 0 ? resolve() : reject(new Error('build exposes failed'))));
17-
});
18-
console.log('[exposes] starting static servers for exposes...');
19-
const pServe = run('pnpm', ['--filter', '"federated-css-react-ssr_expose-*"', '-r', 'run', 'serve']);
20-
21-
// Wait for remoteEntry.js endpoints (server side) to be reachable before proceeding
22-
await waitOn({
23-
resources: [
24-
'http://localhost:3001/server/remoteEntry.js',
25-
'http://localhost:3002/server/remoteEntry.js',
26-
'http://localhost:3003/server/remoteEntry.js',
27-
'http://localhost:3004/server/remoteEntry.js',
28-
'http://localhost:3005/server/remoteEntry.js',
29-
'http://localhost:3006/server/remoteEntry.js',
30-
'http://localhost:3007/server/remoteEntry.js',
31-
],
32-
timeout: 480000,
33-
validateStatus: s => s >= 200 && s < 500,
11+
async function exec(cmd, args, opts = {}) {
12+
return new Promise((resolve, reject) => {
13+
const p = run(cmd, args, opts);
14+
p.on('exit', code => (code === 0 ? resolve() : reject(new Error(`${cmd} ${args.join(' ')} failed (${code})`))));
3415
});
35-
console.log('[exposes] all server remoteEntry.js endpoints are up.');
36-
process.on('SIGINT', () => pServe.kill('SIGINT'));
37-
process.on('SIGTERM', () => pServe.kill('SIGTERM'));
16+
}
17+
18+
async function main() {
19+
// Build and serve each expose sequentially, waiting for both server/client remoteEntry.js
20+
const exposes = [
21+
{ dir: 'expose-css', port: 3001 },
22+
{ dir: 'expose-jss', port: 3002 },
23+
{ dir: 'expose-tailwind-css', port: 3003 },
24+
{ dir: 'expose-scss', port: 3004 },
25+
{ dir: 'expose-styled-component', port: 3005 },
26+
{ dir: 'expose-css-module', port: 3006 },
27+
{ dir: 'expose-less', port: 3007 },
28+
];
29+
30+
const procs = [];
31+
for (const { dir, port } of exposes) {
32+
const cwd = path.join('expose-apps', dir);
33+
console.log(`[exposes] building ${dir}...`);
34+
await exec('pnpm', ['-C', cwd, 'run', 'build']);
35+
console.log(`[exposes] serving ${dir} on ${port}...`);
36+
const p = run('pnpm', ['-C', cwd, 'run', 'serve']);
37+
procs.push(p);
38+
await waitOn({
39+
resources: [
40+
`http://localhost:${port}/server/remoteEntry.js`,
41+
`http://localhost:${port}/client/remoteEntry.js`,
42+
],
43+
timeout: 480000,
44+
validateStatus: s => s >= 200 && s < 500,
45+
});
46+
console.log(`[exposes] ${dir} ready on ${port}.`);
47+
}
48+
49+
const killAll = sig => procs.forEach(pr => pr.kill(sig));
50+
process.on('SIGINT', () => killAll('SIGINT'));
51+
process.on('SIGTERM', () => killAll('SIGTERM'));
52+
3853
// keep process alive
3954
await new Promise(() => {});
4055
}

‎federated-css/scripts/start-all.cjs‎

Lines changed: 82 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -9,38 +9,90 @@ function run(cmd, args) {
99
}
1010

1111
async function main() {
12-
// Start consumers-react in dev (avoid heavy prod builds), build+serve exposes, and start Next dev servers
13-
console.log('[federated-css] starting consumers-react (dev servers)...');
14-
const pReact = run('pnpm', ['--filter', '"@federated-css/*"', '-r', 'run', 'start']);
15-
16-
console.log('[federated-css] building expose apps...');
17-
await new Promise((res, rej) => {
18-
const p = run('pnpm', ['--filter', '"federated-css-mono_expose-*"', '-r', 'run', 'build']);
19-
p.on('exit', c => (c === 0 ? res() : rej(new Error('build exposes failed'))));
20-
});
21-
console.log('[federated-css] serving expose apps...');
22-
const pExposes = run('pnpm', ['--filter', '"federated-css-mono_expose-*"', '-r', 'run', 'serve']);
23-
24-
console.log('[federated-css] starting Next consumers (dev servers)...');
25-
const pNext = run('pnpm', ['--filter', '"@federated-css/next-*"', '-r', 'run', 'start']);
26-
27-
await waitOn({
28-
resources: [
29-
// consumers-react ports
30-
'http://localhost:3001', 'http://localhost:3002', 'http://localhost:3003',
31-
'http://localhost:3004', 'http://localhost:3005', 'http://localhost:3006', 'http://localhost:3007',
32-
// exposes ports
33-
'http://localhost:4000', 'http://localhost:4001', 'http://localhost:4002', 'http://localhost:4003',
34-
'http://localhost:4004', 'http://localhost:4005', 'http://localhost:4006', 'http://localhost:4007',
35-
// next consumers
36-
'http://localhost:8081', 'http://localhost:8082', 'http://localhost:8083', 'http://localhost:8084'
37-
],
38-
timeout: 480000,
39-
validateStatus: s => s >= 200 && s < 500,
40-
});
12+
const reactConsumers = [
13+
{ dir: 'combination-of-4', port: 3001 },
14+
{ dir: 'combination-of-5', port: 3002 },
15+
{ dir: 'css-and-styled-component', port: 3003 },
16+
{ dir: 'css-module-and-jss', port: 3004 },
17+
{ dir: 'less-and-scss', port: 3005 },
18+
{ dir: 'tailwind-global-and-less', port: 3006 },
19+
{ dir: 'tailwind-module-and-jss', port: 3007 },
20+
];
21+
22+
const exposes = [4000, 4001, 4002, 4003, 4004, 4005, 4006, 4007];
23+
24+
const nextConsumers = [
25+
{ dir: 'combination-of-4', port: 8081 },
26+
{ dir: 'jss-and-tailwind-global', port: 8082 },
27+
{ dir: 'jss-css-and-tailwind-module', port: 8083 },
28+
{ dir: 'less-and-styled-component', port: 8084 },
29+
];
30+
31+
const procs = [];
32+
33+
console.log('[federated-css] starting consumers-react (sequential dev servers)...');
34+
for (const { dir, port } of reactConsumers) {
35+
const cwd = path.join('consumers-react', dir);
36+
const p = run('pnpm', ['-C', cwd, 'run', 'start']);
37+
procs.push(p);
38+
await waitOn({ resources: [`http://localhost:${port}`], timeout: 480000, validateStatus: s => s >= 200 && s < 500 });
39+
console.log(`[federated-css] consumers-react ${dir} up at ${port}`);
40+
}
41+
42+
console.log('[federated-css] building expose apps (sequential)...');
43+
for (const port of exposes) {
44+
const dirMap = {
45+
4000: 'expose-css',
46+
4001: 'expose-css-module',
47+
4002: 'expose-jss',
48+
4003: 'expose-less',
49+
4004: 'expose-scss',
50+
4005: 'expose-styled-component',
51+
4006: 'expose-tailwind-css-global',
52+
4007: 'expose-tailwind-css-module',
53+
};
54+
const dir = dirMap[port];
55+
if (!dir) continue;
56+
const cwd = path.join('expose-remotes', dir);
57+
await new Promise((res, rej) => {
58+
const p = run('pnpm', ['-C', cwd, 'run', 'build']);
59+
p.on('exit', c => (c === 0 ? res() : rej(new Error(`build ${dir} failed`))));
60+
});
61+
}
62+
63+
console.log('[federated-css] serving expose apps (sequential)...');
64+
for (const port of exposes) {
65+
const dirMap = {
66+
4000: 'expose-css',
67+
4001: 'expose-css-module',
68+
4002: 'expose-jss',
69+
4003: 'expose-less',
70+
4004: 'expose-scss',
71+
4005: 'expose-styled-component',
72+
4006: 'expose-tailwind-css-global',
73+
4007: 'expose-tailwind-css-module',
74+
};
75+
const dir = dirMap[port];
76+
if (!dir) continue;
77+
const cwd = path.join('expose-remotes', dir);
78+
const p = run('pnpm', ['-C', cwd, 'run', 'serve']);
79+
procs.push(p);
80+
await waitOn({ resources: [`http://localhost:${port}`], timeout: 480000, validateStatus: s => s >= 200 && s < 500 });
81+
console.log(`[federated-css] expose ${dir} up at ${port}`);
82+
}
83+
84+
console.log('[federated-css] starting Next consumers (sequential dev servers)...');
85+
for (const { dir, port } of nextConsumers) {
86+
const cwd = path.join('consumers-nextjs', dir);
87+
const p = run('pnpm', ['-C', cwd, 'run', 'start']);
88+
procs.push(p);
89+
await waitOn({ resources: [`http://localhost:${port}`], timeout: 480000, validateStatus: s => s >= 200 && s < 500 });
90+
console.log(`[federated-css] next ${dir} up at ${port}`);
91+
}
92+
4193
console.log('[federated-css] all ports are up.');
4294

43-
const killAll = sig => { pReact.kill(sig); pExposes.kill(sig); pNext.kill(sig); };
95+
const killAll = sig => { procs.forEach(pr => pr.kill(sig)); };
4496
process.on('SIGINT', () => killAll('SIGINT'));
4597
process.on('SIGTERM', () => killAll('SIGTERM'));
4698

‎playwright-e2e/common/base.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,26 @@ export class BaseMethods {
9494
return this.resolveLocatorForPage(this.page, selector, options);
9595
}
9696

97+
async checkInfoOnNonDefaultHost(opts: {
98+
host: number;
99+
element: string;
100+
existedText: string;
101+
notExistedText?: string;
102+
}): Promise<void> {
103+
const { host, element, existedText, notExistedText } = opts;
104+
const remote = await this.page.context().newPage();
105+
try {
106+
await remote.goto(`http://localhost:${host}/`, { waitUntil: 'domcontentloaded' });
107+
const locator = remote.locator(element);
108+
await expect(locator.filter({ hasText: existedText }).first()).toBeVisible();
109+
if (notExistedText) {
110+
await expect(locator.filter({ hasText: notExistedText })).toHaveCount(0);
111+
}
112+
} finally {
113+
await remote.close();
114+
}
115+
}
116+
97117
private resolveLocatorForPage(
98118
page: Page,
99119
selector: string,

0 commit comments

Comments
 (0)