diff --git a/.changeset/great-hounds-clean.md b/.changeset/great-hounds-clean.md new file mode 100644 index 000000000..3d247da6b --- /dev/null +++ b/.changeset/great-hounds-clean.md @@ -0,0 +1,11 @@ +--- +'@web/rollup-plugin-html': minor +--- + +Detect `` tags as assets which means videos get copied and hashed. + +```html + +``` diff --git a/packages/rollup-plugin-html/src/assets/utils.ts b/packages/rollup-plugin-html/src/assets/utils.ts index 430ff82d9..665f65ba3 100644 --- a/packages/rollup-plugin-html/src/assets/utils.ts +++ b/packages/rollup-plugin-html/src/assets/utils.ts @@ -34,7 +34,11 @@ function isAsset(node: Element) { path = getAttribute(node, 'src') ?? ''; break; case 'source': - path = extractFirstUrlOfSrcSet(node) ?? ''; + if (getAttribute(node, 'src')) { + path = getAttribute(node, 'src') ?? ''; + } else { + path = extractFirstUrlOfSrcSet(node) ?? ''; + } break; case 'link': if (linkRels.includes(getAttribute(node, 'rel') ?? '')) { @@ -104,7 +108,7 @@ export function getSourceAttribute(node: Element) { return 'src'; } case 'source': { - return 'srcset'; + return getAttribute(node, 'src') ? 'src' : 'srcset'; } case 'link': { return 'href'; diff --git a/packages/rollup-plugin-html/test/fixtures/assets/videos/typer-hydration.mp4 b/packages/rollup-plugin-html/test/fixtures/assets/videos/typer-hydration.mp4 new file mode 100644 index 000000000..53176ab71 Binary files /dev/null and b/packages/rollup-plugin-html/test/fixtures/assets/videos/typer-hydration.mp4 differ diff --git a/packages/rollup-plugin-html/test/src/output/injectedUpdatedAssetPaths.test.ts b/packages/rollup-plugin-html/test/src/output/injectedUpdatedAssetPaths.test.ts index eb4b48f97..353a6399a 100644 --- a/packages/rollup-plugin-html/test/src/output/injectedUpdatedAssetPaths.test.ts +++ b/packages/rollup-plugin-html/test/src/output/injectedUpdatedAssetPaths.test.ts @@ -120,6 +120,50 @@ describe('injectedUpdatedAssetPaths()', () => { expect(serialize(document).replace(/ {4}/g, '\n')).to.eql(expected); }); + it('handles video tag using source tags with src', () => { + const document = parse( + [ + '', + ' ', + ' ', + ' ', + '', + ].join(''), + ); + + const input: InputData = { + html: '', + name: 'index.html', + moduleImports: [], + inlineModules: [], + assets: [], + filePath: '/root/index.html', + }; + const hashed = new Map(); + hashed.set( + path.join(path.sep, 'root', 'videos', 'typer-hydration.mp4'), + 'typer-hydration-xxx.mp4', + ); + + injectedUpdatedAssetPaths({ + document, + input, + outputDir: '/root/dist/', + rootDir: '/root/', + emittedAssets: { static: new Map(), hashed }, + }); + + const expected = [ + '', + ' ', + ].join('\n'); + expect(serialize(document).replace(/ {4}/g, '\n')).to.eql(expected); + }); + it('handles virtual files', () => { const document = parse( [