Generate the HTML file with the preload for the font tancredi#236

linuxonrails · Apr 11, 2022 · 6dbf115 · 6dbf115
1 parent d7ec1f7
commit 6dbf115
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 11 deletions.
diff --git a/src/generators/asset-types/__tests__/__snapshots__/html.ts.snap b/src/generators/asset-types/__tests__/__snapshots__/html.ts.snap
@@ -52,6 +52,8 @@ exports[`\`HTML\` asset generator renders HTML correctly with prefix and tag nam
         }
     </style>
 
+    <link rel=\\"preload\\" href=\\"/fonts/bootstrap-icons.woff2\\" as=\\"font\\" type=\\"font/woff2\\" crossorigin>
+
     <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"test-font.css\\" />
 </head>
 <body>

diff --git a/src/generators/asset-types/__tests__/html.ts b/src/generators/asset-types/__tests__/html.ts
@@ -11,9 +11,13 @@ const mockOptions = {
   }
 } as any;
 
+jest.mock('../../../utils/css', () => ({
+  renderUrlsAttribute: jest.fn(() => ['/fonts/bootstrap-icons.woff2' ])
+}));
+
 describe('`HTML` asset generator', () => {
   test('renders HTML correctly with prefix and tag name options', async () => {
-    expect(await htmlGen.generate(mockOptions, null)).toMatchSnapshot();
+    expect(await htmlGen.generate(mockOptions, Buffer.from(''))).toMatchSnapshot();
   });
 
   test('rendered HTML contains expected CSS path', async () => {

diff --git a/src/generators/asset-types/html.ts b/src/generators/asset-types/html.ts
@@ -1,9 +1,16 @@
 import { FontGenerator } from '../../types/generator';
+import { FontAssetType } from '../../types/misc';
 import { renderTemplate } from '../../utils/template';
+import { renderUrlsAttribute } from '../../utils/css';
 
-const generator: FontGenerator = {
-  generate: async options => {
-    return renderTemplate(options.templates.html, options);
+const generator: FontGenerator<Buffer> = {
+  dependsOn: FontAssetType.SVG,
+
+  generate: async (options, svg: Buffer) => {
+    return renderTemplate(options.templates.html, {
+      ...options,
+      fontUrls: renderUrlsAttribute(options, svg)
+    });
   }
 };
 

diff --git a/src/utils/__tests__/css.ts b/src/utils/__tests__/css.ts
@@ -1,4 +1,4 @@
-import { renderSrcAttribute } from '../css';
+import { renderSrcAttribute, renderUrlsAttribute } from '../css';
 import { FontAssetType } from '../../types/misc';
 import * as hashUtils from '../hash';
 
@@ -32,6 +32,16 @@ describe('CSS utilities', () => {
           'url("./my-font.svg?::hashed(::font-content::)::#my-font") format("svg")'
         ].join('\n')
       );
+
+      expect(renderUrlsAttribute(options as any, font)).toEqual(
+        [
+          './my-font.eot?::hashed(::font-content::)::#iefix',
+          './my-font.woff2?::hashed(::font-content::)::',
+          './my-font.woff?::hashed(::font-content::)::',
+          './my-font.ttf?::hashed(::font-content::)::',
+          './my-font.svg?::hashed(::font-content::)::#my-font'
+        ]
+      );
     });
 
     it('only renders given font types', () => {
@@ -47,6 +57,13 @@ describe('CSS utilities', () => {
           'url("./my-font.svg?::hashed(::font-content::)::#my-font") format("svg")'
         ].join('\n')
       );
+
+      expect(renderUrlsAttribute(options as any, font)).toEqual(
+        [
+          './my-font.eot?::hashed(::font-content::)::#iefix',
+          './my-font.svg?::hashed(::font-content::)::#my-font'
+        ]
+      );
     });
 
     it('uses the `fontsUrl` option when given', () => {
@@ -60,6 +77,12 @@ describe('CSS utilities', () => {
       expect(renderSrcAttribute(options as any, font)).toEqual(
         'url("/fonts/my-font.ttf?::hashed(::font-content::)::") format("truetype")'
       );
+
+      expect(renderUrlsAttribute(options as any, font)).toEqual(
+        [
+          '/fonts/my-font.ttf?::hashed(::font-content::)::'
+        ]
+      );
     });
 
     it('uses the `fontsUrl` option when given with https:// path', () => {
@@ -73,6 +96,10 @@ describe('CSS utilities', () => {
       expect(renderSrcAttribute(options as any, font)).toEqual(
         'url("https://my-static.com/my-font.ttf?::hashed(::font-content::)::") format("truetype")'
       );
+
+      expect(renderUrlsAttribute(options as any, font)).toEqual(
+        [ 'https://my-static.com/my-font.ttf?::hashed(::font-content::)::' ]
+      );
     });
   });
 });
diff --git a/src/utils/css.ts b/src/utils/css.ts
@@ -18,17 +18,36 @@ const renderSrcOptions: { [key in FontAssetType]: RenderSrcOptions } = {
   [FontAssetType.SVG]: { formatValue: 'svg', getSuffix: name => `#${name}` }
 };
 
+export const getUrl = ({ name, fontType, fontsUrl }: { name: string, fontType: FontAssetType, fontsUrl: string },
+  font: string | Buffer) => {
+
+  const { getSuffix } = renderSrcOptions[fontType];
+  const hash = getHash(font.toString('utf8'));
+  const suffix = getSuffix ? getSuffix(name) : '';
+
+  return `${
+    fontsUrl || '.'
+  }/${name}.${fontType}?${hash}${suffix}`;
+}  
+
 export const renderSrcAttribute = (
   { name, fontTypes, fontsUrl }: FontGeneratorOptions,
   font: string | Buffer
 ) =>
   fontTypes
     .map(fontType => {
-      const { formatValue, getSuffix } = renderSrcOptions[fontType];
-      const hash = getHash(font.toString('utf8'));
-      const suffix = getSuffix ? getSuffix(name) : '';
-      return `url("${
-        fontsUrl || '.'
-      }/${name}.${fontType}?${hash}${suffix}") format("${formatValue}")`;
+      const { formatValue } = renderSrcOptions[fontType];
+      return `url("${getUrl({ name, fontType, fontsUrl }, font)}") format("${formatValue}")`;
     })
     .join(',\n');
+
+export const renderUrlsAttribute = (
+  { name, fontTypes, fontsUrl }: FontGeneratorOptions,
+    font: string | Buffer
+  ) =>
+    fontTypes
+      .map(fontType => {
+        const { formatValue } = renderSrcOptions[fontType];
+        return `${getUrl({ name, fontType, fontsUrl }, font)}`;
+      });
+
diff --git a/templates/html.hbs b/templates/html.hbs
@@ -49,6 +49,10 @@
         }
     </style>
 
+    {{# each fontUrls }}
+    <link rel="preload" href="{{ this }}" as="font" type="font/woff2" crossorigin>
+    {{/ each }}
+
     <link rel="stylesheet" type="text/css" href="{{ name }}.css" />
 </head>
 <body>
-Original file line number
+Diff line change
@@ Expand Up @@
             }
         </style>
+        <link rel=\\"preload\\" href=\\"/fonts/bootstrap-icons.woff2\\" as=\\"font\\" type=\\"font/woff2\\" crossorigin>
         <link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"test-font.css\\" />
     </head>
     <body>
@@ Expand Down @@