feat(rollup-plugin-html): support video source tags as assets

modernweb-dev · Aug 17, 2022 · ab5295e · ab5295e
1 parent 5857c11
commit ab5295e
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 2 deletions.
diff --git a/.changeset/great-hounds-clean.md b/.changeset/great-hounds-clean.md
@@ -0,0 +1,11 @@
+---
+'@web/rollup-plugin-html': minor
+---
+
+Detect `<source src="*">` tags as assets which means videos get copied and hashed.
+
+```html
+<video controls>
+  <source src="./my-video.mp4" type="video/mp4">
+</video>
+```
diff --git 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
diff --git 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(
+      [
+        '<html>',
+        '  <body>',
+        '    <video controls>',
+        '      <source src="./videos/typer-hydration.mp4" type="video/mp4">',
+        '    </video>',
+        '  </body>',
+        '</html>',
+      ].join(''),
+    );
+
+    const input: InputData = {
+      html: '',
+      name: 'index.html',
+      moduleImports: [],
+      inlineModules: [],
+      assets: [],
+      filePath: '/root/index.html',
+    };
+    const hashed = new Map<string, string>();
+    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 = [
+      '<html><head></head><body>',
+      '<video controls="">',
+      '  <source src="typer-hydration-xxx.mp4" type="video/mp4">',
+      '</video>  </body></html>',
+    ].join('\n');
+    expect(serialize(document).replace(/ {4}/g, '\n')).to.eql(expected);
+  });
+
   it('handles virtual files', () => {
     const document = parse(
       [