Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 | 2x 2x 2x 2x 2x 2x 36x 36x 36x 36x 36x 36x 36x 36x 36x 40x 39x 40x 36x 45x 45x 45x 45x 100x 100x 95x 95x 95x 95x 6x 89x 89x 88x 86x 88x 88x 88x 49x 88x 6x 88x 88x 12x 18x 18x 16x 45x 36x 86x 39x 39x 39x 47x 47x 47x 47x 47x 45x 45x 45x 47x 36x 39x 39x 39x 39x 39x 40x 40x 40x 40x 40x 58x 58x 40x 36x 36x 86x 47x 1x 1x 1x 36x 36x 39x 39x 39x 39x 39x 39x 39x 40x 40x 95x 39x 39x 39x 39x 39x | import type { Plugin, OutputBundle, OutputChunk } from "rollup";
import path from "path";
import picomatch from "picomatch";
import { parseDocument } from "htmlparser2";
import { selectAll } from "css-select";
import type { Element } from "domhandler";
import type { IsomorphicRollupFs } from "../fs-iface";
const DEFAULT_EXCLUDE_PATTERNS = [
"**/node_modules/**",
"**/dist/**",
"**/build/**",
"**/.now/**",
"**/.git/**",
"**/*.min.js",
"**/*.bundle.js",
];
export interface UiPageSourceManifestOptions {
/**
* Project root directory for resolving relative paths.
*/
rootDir: string;
/**
* Client directory for resolving relative path for HTML file.
*/
clientDir: string;
/**
* Glob patterns for files to exclude from the manifest.
* Defaults to common build/dependency directories.
* @default DEFAULT_EXCLUDE_PATTERNS
*/
excludePatterns?: string[];
/**
* @deprecated No longer used.
*/
fs?: IsomorphicRollupFs;
}
export interface UiPageSourceManifest {
/**
* The HTML source file path (relative to rootDir).
* Example: "src/client/index.html"
*/
html: string;
/**
* The main JavaScript/TypeScript entry point (relative to rootDir).
* Example: "src/client/main.tsx"
*/
entry: string;
/**
* Array of all source file paths used in the bundle (relative to rootDir).
* Example: ["src/client/app.tsx", "src/client/components/Button.tsx"]
*/
files: string[];
/**
* Vendor chunks extracted from node_modules for this entry.
* Each tuple is [fileName, contentHash].
* Example: [["vendor-react-dom--d217b640.jsdbx", "d217b640"]]
*/
vendors: [string, string][];
}
/**
* Rollup plugin that generates source manifest files for each entry point.
*
* This plugin tracks all source files used in each chunk and generates a JSON manifest
* file that maps entry points to their source files. This is useful for:
* - Source code tracking and versioning
* - Debugging and development workflows
* - IDE integrations that need to know the original source files
*
* @example
* ```typescript
* import { uiPageSourceManifest } from '@servicenow/isomorphic-rollup';
*
* export default {
* plugins: [
* uiPageSourceManifest({
* rootDir: "/project",
* clientDir: "/project/src/client",
* excludePatterns: ['**\/node_modules\/**', '**\/dist\/**'],
* }),
* ],
* };
* ```
*/
export default function uiPageSourceManifest(
options: UiPageSourceManifestOptions,
): Plugin {
const {
rootDir,
clientDir,
excludePatterns = DEFAULT_EXCLUDE_PATTERNS,
} = options;
const isExcluded = picomatch(excludePatterns);
return {
name: "source-manifest",
async generateBundle(_, bundle: OutputBundle) {
// ──────────────────────────────────────────────────────────────
// Flow overview (multi-entry HTML apps):
//
// Given: login.html → app-login.tsx, dashboard.html → app-dash.tsx
//
// 1. COLLECT — Walk the bundle once, building lookup maps:
//
// entryToSources "app-login" → {app-login.tsx}
// chunk name → direct source files in that chunk
//
// entryToFacadePath "app-login" → "client/src/app-login.tsx"
// chunk name → original entry file (rollup facadeModuleId)
//
// chunkFileNameToEntry "app-login.js" → "app-login"
// output fileName → chunk name (used to match HTML refs)
//
// htmlFiles ["login.html", "dashboard.html"]
//
// 2. MATCH — For each HTML, determine which entries belong to it.
// htmlScriptEntrypoints has already rewritten <script src="…">
// to point at output chunk fileNames, so we search the HTML
// source for those quoted references.
// e.g. login.html contains src="app-login.jsdbx" → "app-login".
//
// 3. EMIT — For each HTML→entries group, collect source files
// from each entry's chunk and emit a
// <name>.ui-source-manifest.json asset.
//
// Note: Each HTML entry is built as a separate rollup invocation
// (see rollup/index.ts), so shared chunks between entries do not
// exist. However, dynamic imports within a single entry still
// produce separate chunks (e.g. import('./log-formatter')). These
// dynamic chunks' sources are merged into the entry's manifest.
// ──────────────────────────────────────────────────────────────
const htmlToEntries = new Map<string, Set<string>>();
const entryToSources = new Map<string, Set<string>>();
const entryToFacadePath = new Map<string, string>();
const chunkFileNameToEntry = new Map<string, string>();
const htmlFiles: string[] = [];
const addHtmlEntry = (htmlFileName: string, entryName: string) => {
if (!htmlToEntries.has(htmlFileName)) {
htmlToEntries.set(htmlFileName, new Set());
}
htmlToEntries.get(htmlFileName)!.add(entryName);
};
// Walk rollup's module graph from a starting module, following
// both static and dynamic imports. This captures ALL resolved
// source files including those that rollup tree-shook (which
// would be missing from chunk.modules).
const collectModuleGraphSources = (
startModuleId: string,
): Set<string> => {
const sources = new Set<string>();
const visited = new Set<string>();
const queue = [startModuleId];
while (queue.length > 0) {
const moduleId = queue.shift()!;
if (visited.has(moduleId)) continue;
visited.add(moduleId);
Iif (moduleId.startsWith("\0")) continue;
const basename = path.basename(moduleId);
if (basename.includes("$insertStyle") || basename.startsWith("___")) {
continue;
}
// Convert absolute module ID to a rootDir-relative path.
// Modules outside the project root (e.g. platform externals
// like /uxasset/externals/@servicenow/now-button) resolve to
// paths starting with ".." — skip these since they are not
// user source files.
const relativePath = path
.relative(rootDir, moduleId)
.replace(/\\/g, "/");
if (relativePath.startsWith("..")) continue;
if (!isExcluded(relativePath)) {
sources.add(relativePath);
}
const info = this.getModuleInfo(moduleId);
Eif (info) {
for (const id of info.importedIds) {
queue.push(id);
}
for (const id of info.dynamicallyImportedIds) {
queue.push(id);
}
// Pick up assets resolved by the css-url plugin (images,
// fonts, etc. referenced via CSS url() imports). These are
// not part of Rollup's module graph but are stored in the
// module's metadata by the css-url transform hook.
const cssUrlAssets: string[] | undefined =
info.meta?.["css-url"]?.assets;
if (cssUrlAssets) {
for (const assetPath of cssUrlAssets) {
const relPath = path
.relative(rootDir, assetPath)
.replace(/\\/g, "/");
if (!relPath.startsWith("..") && !isExcluded(relPath)) {
sources.add(relPath);
}
}
}
}
}
return sources;
};
for (const output of Object.values(bundle)) {
if (output.type === "asset") {
/**
* ui-page rollup plugin supports XML files as well.
* Currently, source code tracking is only supported for HTML files, so we only consider .html assets here.
* TODO: If BYOUI or other workflows require source tracking for XML files, we need to bring in XML assets and fix fluent ui-page-plugin
*
*/
Eif (output.fileName.endsWith(".html")) {
htmlFiles.push(output.fileName);
}
continue;
}
Iif (output.type !== "chunk") continue;
const chunk = output as OutputChunk;
const entryName = chunk.name;
Iif (!entryName) continue;
if (!entryToFacadePath.has(entryName) && chunk.facadeModuleId) {
const entryPath = path
.relative(rootDir, chunk.facadeModuleId)
.replace(/\\/g, "/");
entryToFacadePath.set(entryName, entryPath);
// Walk the full module graph from this entry to collect all
// source files — including tree-shaken modules that don't
// appear in chunk.modules.
entryToSources.set(
entryName,
collectModuleGraphSources(chunk.facadeModuleId),
);
}
chunkFileNameToEntry.set(chunk.fileName, entryName);
}
for (const fileName of htmlFiles) {
const htmlAsset = bundle[fileName];
const htmlSource =
htmlAsset &&
htmlAsset.type === "asset" &&
typeof htmlAsset.source === "string"
? htmlAsset.source
: "";
// Match by chunk references in the HTML source.
// The htmlScriptEntrypoints plugin rewrites <script src="…"> to
// include the chunk — either as a bare name ("app.js") or inside
// a URL ("/path/to/app.jsdbx?v=1"). The extension may differ
// from the chunk fileName (e.g. .js → .jsdbx via updateSrcPath),
// so we compare by stem (name without extension).
const document = parseDocument(htmlSource, {
decodeEntities: false,
xmlMode: true,
});
const scriptElements = selectAll(
"script[src]",
document.children,
) as Element[];
for (const el of scriptElements) {
const src = el.attribs?.src;
Iif (!src) continue;
const pathname = new URL(src, "http://x").pathname;
const srcStem = path.parse(path.basename(pathname)).name;
for (const [chunkFileName, entryName] of chunkFileNameToEntry) {
const chunkStem = path.parse(chunkFileName).name;
if (srcStem === chunkStem) {
addHtmlEntry(fileName, entryName);
}
}
}
}
// Collect vendor chunks from bundle. Each HTML builds in
// isolation (separate rollup invocation), so ALL vendor chunks
// in this bundle belong to this entry.
const vendors: [string, string][] = [];
for (const output of Object.values(bundle)) {
if (output.type !== "chunk") continue;
if (!output.name?.startsWith("vendor-")) continue;
const hashMatch = output.fileName.match(/--([a-f0-9]+)\./);
const hash = hashMatch ? hashMatch[1] : "";
vendors.push([output.fileName, hash]);
}
vendors.sort((a, b) => a[0].localeCompare(b[0], "en"));
for (const [htmlFile, entries] of htmlToEntries.entries()) {
const htmlName = path.parse(htmlFile).name;
const htmlDir = path.dirname(htmlFile);
const manifestFileName = path
.join(htmlDir, `${htmlName}.ui-source-manifest.json`)
.replace(/\\/g, "/");
const htmlFilePathWithClientDir = path.join(clientDir, htmlFile);
const htmlFilePathWithRootDir = path
.relative(rootDir, htmlFilePathWithClientDir)
.replace(/\\/g, "/");
const allSources = new Set<string>([htmlFilePathWithRootDir]);
for (const entryName of entries) {
const sources = entryToSources.get(entryName);
Eif (sources) {
sources.forEach((source) => allSources.add(source));
}
}
const sortedFiles = Array.from(allSources).sort();
const firstEntryName = Array.from(entries).sort()[0];
const entryPoint = entryToFacadePath.get(firstEntryName) || "";
const manifest: UiPageSourceManifest = {
html: htmlFilePathWithRootDir,
entry: entryPoint,
files: sortedFiles,
vendors,
};
this.emitFile({
type: "asset",
fileName: manifestFileName,
source: JSON.stringify(manifest, null, 2),
});
}
},
};
}
|