[STRF-9949] paper-handlebars - cdn helper, add new resourceHints attr…

…ibute (#189)
bigcommerce · Aug 18, 2022 · 098eecb · 098eecb
1 parent 740abc9
commit 098eecb
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 5 deletions.
diff --git a/helpers/cdn.js b/helpers/cdn.js
@@ -1,6 +1,26 @@
 'use strict';
 
-const factory = require('./lib/cdnify');
+const cdnify = require('./lib/cdnify');
+const {addResourceHint} = require('./lib/resourceHints');
+
+const factory = globals => {
+    const cdn = cdnify(globals);
+
+    return function (path) {
+        const fullPath = cdn(path);
+
+        const options = arguments[arguments.length - 1];
+        if (options.hash.resourceHint) {
+            addResourceHint(
+                globals,
+                fullPath,
+                options.hash.resourceHint
+            );
+        }
+
+        return fullPath;
+    };
+};
 
 module.exports = [{
     name: 'cdn',

diff --git a/spec/helpers/cdn.js b/spec/helpers/cdn.js
@@ -1,8 +1,9 @@
 const Lab = require('lab'),
-      lab = exports.lab = Lab.script(),
-      describe = lab.experiment,
-      it = lab.it,
-      testRunner = require('../spec-helpers').testRunner;
+    lab = exports.lab = Lab.script(),
+    describe = lab.experiment,
+    it = lab.it,
+    {testRunner, buildRenderer} = require('../spec-helpers');
+const {expect} = require("code");
 
 describe('cdn helper', function () {
     const context = {
@@ -23,6 +24,33 @@ describe('cdn helper', function () {
     // Build a test runner that uses a default context
     const runTestCases = testRunner({context, siteSettings, themeSettings, hbVersion});
 
+    it('should render the css cdn url and produce resource hints when attribute resourceHint is part of the template', function (done) {
+        const renderer = buildRenderer(siteSettings, themeSettings, {}, hbVersion);
+        const runTestCases = testRunner({context, renderer});
+        runTestCases([
+            {
+                input: '{{cdn "assets/css/style.css" resourceHint="preload"}}',
+                output: 'https://cdn.bcapp/3dsf74g/stencil/123/css/style.css',
+            },
+            {
+                input: '{{cdn "/assets/css/style.modal.css" resourceHint="preconnect"}}',
+                output: 'https://cdn.bcapp/3dsf74g/stencil/123/css/style.modal.css',
+            },
+            {
+                input: '{{cdn "/assets/css/style.modal.css" }}',
+                output: 'https://cdn.bcapp/3dsf74g/stencil/123/css/style.modal.css',
+            }
+        ], () => {
+            const hints = renderer.getResourceHints();
+            expect(hints).to.have.length(2);
+            hints.forEach(hint => {
+                expect(hint.type).to.not.exist();
+                expect(hint.state).to.satisfy((state) => state === 'preload' || state === 'preconnect');
+            });
+            done();
+        });
+    });
+
     it('should render the css cdn url', function (done) {
         runTestCases([
             {