|
| 1 | +/** |
| 2 | + * Validates that per-component imports let a bundler code-split Ionic components. |
| 3 | + * Inspects `www/stats.json`, the esbuild metafile, to see which output chunk a |
| 4 | + * component landed in. `ion-toggle` is used by only the home page, so it |
| 5 | + * should not be bundled with the landing page. |
| 6 | + * |
| 7 | + * Build core and the angular package before running this test. |
| 8 | + */ |
| 9 | + |
| 10 | +const fs = require('fs-extra'); |
| 11 | +const path = require('path'); |
| 12 | +const { execSync } = require('node:child_process'); |
| 13 | + |
| 14 | +const PROJECT_DIR = path.join(__dirname, '../test/code-split'); |
| 15 | +const STATS_FILE = path.join(PROJECT_DIR, 'www/stats.json'); |
| 16 | + |
| 17 | + |
| 18 | +function collectChunks(stats, startChunkName, chunkSet) |
| 19 | +{ |
| 20 | + chunkSet.add(startChunkName); |
| 21 | + const chunk = stats.outputs[startChunkName] |
| 22 | + for (const imported of chunk.imports) { |
| 23 | + if (imported.kind === "import-statement" && !chunkSet.has(imported.path)) { |
| 24 | + collectChunks(stats, imported.path, chunkSet); |
| 25 | + } |
| 26 | + } |
| 27 | +} |
| 28 | + |
| 29 | +function findChunksForPage(stats, page) { |
| 30 | + const chunkSet = new Set(); |
| 31 | + |
| 32 | + for (const [chunkName, chunkData] of Object.entries(stats.outputs || {})) { |
| 33 | + if (chunkName.endsWith('.js')) { |
| 34 | + const importFound = Object.keys(chunkData.inputs).some(input => input.endsWith(page)); |
| 35 | + if (importFound) { |
| 36 | + collectChunks(stats, chunkName, chunkSet); |
| 37 | + } |
| 38 | + } |
| 39 | + } |
| 40 | + |
| 41 | + return chunkSet; |
| 42 | +} |
| 43 | + |
| 44 | +function hasComponentAsInput(stats, chunks, component) { |
| 45 | + for (const chunk of chunks) { |
| 46 | + for (const inputName of Object.keys(stats.outputs[chunk].inputs)) { |
| 47 | + if (inputName.endsWith(component)) { |
| 48 | + return true; |
| 49 | + } |
| 50 | + } |
| 51 | + } |
| 52 | + return false; |
| 53 | +} |
| 54 | + |
| 55 | +function main() { |
| 56 | + try { |
| 57 | + execSync('npm i', { cwd: PROJECT_DIR }); |
| 58 | + execSync('./sync.sh', { cwd: PROJECT_DIR }); |
| 59 | + execSync(`npm run build`, { cwd: PROJECT_DIR, stdio: 'inherit' }); |
| 60 | + |
| 61 | + const stats = fs.readJsonSync(STATS_FILE); |
| 62 | + const landingPageChunks = findChunksForPage(stats, 'landing.page.ts'); |
| 63 | + const homePageChunks = findChunksForPage(stats, 'home.page.ts'); |
| 64 | + |
| 65 | + if (!hasComponentAsInput(stats, landingPageChunks, 'ion-header.js')) { |
| 66 | + throw new Error(`ion-header was not included in landing page.`); |
| 67 | + } |
| 68 | + if (hasComponentAsInput(stats, landingPageChunks, 'ion-toggle.js')) { |
| 69 | + throw new Error(`ion-toggle was not split from landing page.`); |
| 70 | + } |
| 71 | + |
| 72 | + if (!hasComponentAsInput(stats, homePageChunks, 'ion-header.js')) { |
| 73 | + throw new Error(`ion-header was not included in home page.`); |
| 74 | + } |
| 75 | + if (!hasComponentAsInput(stats, homePageChunks, 'ion-toggle.js')) { |
| 76 | + throw new Error(`ion-toggle was not included in home page.`); |
| 77 | + } |
| 78 | + |
| 79 | + console.log('✅ verified code-split'); |
| 80 | + } catch (error) { |
| 81 | + process.exitCode = 1; |
| 82 | + console.error(error); |
| 83 | + } |
| 84 | +} |
| 85 | + |
| 86 | +main(); |
0 commit comments