|
| 1 | +const SRC_SELECTOR = [ |
| 2 | + "audio source[src]", // audio |
| 3 | + "audio[src]", // audio |
| 4 | + "img[src]", // images |
| 5 | + "picture source[src]", // images |
| 6 | + "video source[src]", // videos |
| 7 | + "video[src]" // videos |
| 8 | +].join(); |
| 9 | + |
| 10 | +const SRCSET_SELECTOR = [ |
| 11 | + "img[srcset]", // images |
| 12 | + "picture source[srcset]" // images |
| 13 | +].join(); |
| 14 | + |
| 15 | +const HREF_SELECTOR = [ |
| 16 | + "a[href][download]", // download links |
| 17 | + "link[href]" // stylesheets |
| 18 | +].join(); |
| 19 | + |
| 20 | +const ASSET_ATTRIBUTES = [ |
| 21 | + [SRC_SELECTOR, "src"], |
| 22 | + [SRCSET_SELECTOR, "srcset"], |
| 23 | + [HREF_SELECTOR, "href"] |
| 24 | +]; |
| 25 | + |
| 26 | +/** Populates the asset keys from the specified root. */ |
| 27 | +export function collectAssets(assets: Set<string>, root: Element): void { |
| 28 | + for (const [selector, name] of ASSET_ATTRIBUTES) { |
| 29 | + for (const element of root.querySelectorAll(selector)) { |
| 30 | + if (isRelExternal(element)) continue; |
| 31 | + const source = decodeURI(element.getAttribute(name)!); |
| 32 | + if (name === "srcset") { |
| 33 | + for (const s of parseSrcset(source)) { |
| 34 | + if (isSourcePath(s)) { |
| 35 | + assets.add(asImportPath(s)); |
| 36 | + } |
| 37 | + } |
| 38 | + } else if (isSourcePath(source)) { |
| 39 | + assets.add(asImportPath(source)); |
| 40 | + } |
| 41 | + } |
| 42 | + } |
| 43 | +} |
| 44 | + |
| 45 | +/** Mutates the specified root to apply the specified asset mapping. */ |
| 46 | +export function mapAssets(root: Element, assets: Map<string, string>): void { |
| 47 | + const resolve = (s: string) => assets.get(asImportPath(s)) ?? s; |
| 48 | + for (const [selector, src] of ASSET_ATTRIBUTES) { |
| 49 | + for (const element of root.querySelectorAll(selector)) { |
| 50 | + if (isRelExternal(element)) continue; |
| 51 | + const source = decodeURI(element.getAttribute(src)!); |
| 52 | + if (src === "srcset") element.setAttribute(src, resolveSrcset(source, resolve)); |
| 53 | + else element.setAttribute(src, resolve(source)); |
| 54 | + } |
| 55 | + } |
| 56 | +} |
| 57 | + |
| 58 | +/** Returns true if the specified element has rel=external. */ |
| 59 | +function isRelExternal(a: Element): boolean { |
| 60 | + return /(?:^|\s)external(?:\s|$)/i.test(a.getAttribute("rel") ?? ""); // e.g., <a href rel="external"> |
| 61 | +} |
| 62 | + |
| 63 | +/** Strips the query string and anchor fragment from the specified source. */ |
| 64 | +function asPath(source: string): string { |
| 65 | + const i = source.indexOf("?"); |
| 66 | + const j = source.indexOf("#"); |
| 67 | + const k = i >= 0 && j >= 0 ? Math.min(i, j) : i >= 0 ? i : j; |
| 68 | + return k >= 0 ? source.slice(0, k) : source; // strip query string or anchor fragment |
| 69 | +} |
| 70 | + |
| 71 | +/** Converts the specified source into an import path, typically with ./. */ |
| 72 | +function asImportPath(source: string): string { |
| 73 | + const path = asPath(source); |
| 74 | + return isImportPath(path) ? path : `./${path}`; |
| 75 | +} |
| 76 | + |
| 77 | +/** |
| 78 | + * Returns true if the specified import specifier is a path, as opposed to a |
| 79 | + * bare module specifier or a URL; import paths start with ./, ../, or /. |
| 80 | + */ |
| 81 | +function isImportPath(specifier: string): boolean { |
| 82 | + return ["./", "../", "/"].some((prefix) => specifier.startsWith(prefix)); |
| 83 | +} |
| 84 | + |
| 85 | +/** |
| 86 | + * Returns true if the specified source (such as an img element src attribute) |
| 87 | + * is a path; this is anything that doesn’t start with a protocol or a hash. |
| 88 | + */ |
| 89 | +function isSourcePath(specifier: string): boolean { |
| 90 | + return !/^(\w+:|#)/.test(specifier); |
| 91 | +} |
| 92 | + |
| 93 | +/** Parses the specified srcset attribute, returning the array of sources. */ |
| 94 | +function parseSrcset(srcset: string): string[] { |
| 95 | + return srcset |
| 96 | + .trim() |
| 97 | + .split(/\s*,\s*/) |
| 98 | + .filter((src) => src) |
| 99 | + .map((src) => src.split(/\s+/)[0]); |
| 100 | +} |
| 101 | + |
| 102 | +/** Resolves the specified srcset attribute, resolving any sources. */ |
| 103 | +function resolveSrcset(srcset: string, resolve: (src: string) => string): string { |
| 104 | + return srcset |
| 105 | + .trim() |
| 106 | + .split(/\s*,\s*/) |
| 107 | + .filter((src) => src) |
| 108 | + .map((src) => { |
| 109 | + const parts = src.split(/\s+/); |
| 110 | + const path = resolve(parts[0]); |
| 111 | + if (path) parts[0] = encodeURI(path); |
| 112 | + return parts.join(" "); |
| 113 | + }) |
| 114 | + .join(", "); |
| 115 | +} |
0 commit comments