feat: add .buildReactLinkAttributes and .buildReactScriptAttributes m…

…ethods

__tests__/html-utils.js

@@ -380,3 +380,93 @@ test('.buildScriptElement() - crossorigin boolean false', () => {
     const result = utils.buildScriptElement(obj);
     expect(result).toEqual(`<script src="/bar"></script>`);
 });
+
+test('.buildScriptAttributes() - basic', () => {
+    const obj = new AssetJs({ value: '/bar' });
+    expect(utils.buildScriptAttributes(obj)).toEqual([ 
+        { key: 'src', value: '/bar' }
+    ]);
+});
+
+test('.buildScriptAttributes() - advanced', () => {
+    const obj = new AssetJs({
+        value: '/bar',
+        crossorigin: true,
+        async: true,
+        integrity: 'fake',
+        defer: true,
+        type: 'module',
+    });
+    expect(utils.buildScriptAttributes(obj)).toEqual([ 
+        { key: 'src', value: '/bar' },
+        { key: 'type', value: 'module' },
+        { key: 'crossorigin' },
+        { key: 'integrity', value: 'fake' },
+        { key: 'async' },
+        { key: 'defer' },
+    ]);
+});
+
+test('.buildLinkAttributes() - basic', () => {
+    const obj = new AssetCss({ value: '/bar' });
+    expect(utils.buildLinkAttributes(obj)).toEqual([ 
+        { key: 'href', value: '/bar' },
+        { key: 'type', value: 'text/css' },
+        { key: 'rel', value: 'stylesheet' },
+    ]);
+});
+
+test('.buildLinkAttributes() - advanced', () => {
+    const obj = new AssetCss({
+        value: '/bar',
+        disabled: true,
+        hreflang: 'test1',
+        title: 'test2',
+        media: 'test3',
+        as: 'test4',
+        type: 'test5',
+        rel: 'test6',
+    });
+    expect(utils.buildLinkAttributes(obj)).toEqual([
+        { key: 'href', value: '/bar' },
+        { key: 'disabled', value: undefined },
+        { key: 'hreflang', value: 'test1' },
+        { key: 'title', value: 'test2' },
+        { key: 'media', value: 'test3' },
+        { key: 'as', value: 'test4' },
+        { key: 'type', value: 'test5' },
+        { key: 'rel', value: 'test6' },
+    ]);
+});
+
+test('.buildReactScriptAttributes()', () => {
+    const obj = new AssetJs({
+        value: '/bar',
+        crossorigin: true,
+        async: true,
+        defer: true,
+        nomodule: true,
+    });
+    expect(utils.buildReactScriptAttributes(obj)).toEqual({ 
+        src: '/bar',
+        crossOrigin: '',
+        noModule: true,
+        async: true,
+        defer: true,
+    });
+});
+
+test('.buildReactLinkAttributes()', () => {
+    const obj = new AssetCss({
+        value: '/bar',
+        crossorigin: true,
+        disabled: true,
+    });
+    expect(utils.buildReactLinkAttributes(obj)).toEqual({ 
+        href: '/bar',
+        crossOrigin: '',
+        rel: 'stylesheet',
+        disabled: true,
+        type: 'text/css',
+    });
+});

lib/html-utils.js

@@ -1,3 +1,5 @@
+/* eslint-disable no-restricted-syntax */
+
 'use strict';
 
 const notEmpty = (value) => {
@@ -8,87 +10,130 @@ const notEmpty = (value) => {
     return false;
 };
 
-const buildScriptElement = (obj) => {
+const buildScriptAttributes = (obj) => {
     const args = [];
-    args.push(`src="${obj.value}"`);
+    args.push({ key: 'src', value: obj.value });
 
     if (obj.type === 'esm' || obj.type === 'module') {
-        args.push('type="module"');
+        args.push({ key: 'type', value: 'module' });
     }
 
     if (notEmpty(obj.referrerpolicy)) {
-        args.push(`referrerpolicy="${obj.referrerpolicy}"`);
+        args.push({ key: 'referrerpolicy', value: obj.referrerpolicy });
     }
 
     if (obj.crossorigin || obj.crossorigin === '') {
-        if (obj.crossorigin === true) args.push(`crossorigin`);
-        else args.push(`crossorigin="${obj.crossorigin}"`);
+        if (obj.crossorigin === true) args.push({ key: 'crossorigin' });
+        else args.push({ key: 'crossorigin', value: obj.crossorigin });
     }
 
     if (notEmpty(obj.integrity)) {
-        args.push(`integrity="${obj.integrity}"`);
+        args.push({ key: 'integrity', value: obj.integrity });
     }
 
     if (notEmpty(obj.nomodule)) {
-        args.push('nomodule');
+        args.push({ key: 'nomodule' });
     }
 
     if (notEmpty(obj.async)) {
-        args.push('async');
+        args.push({ key: 'async' });
     }
 
     if (notEmpty(obj.defer)) {
-        args.push('defer');
+        args.push({ key: 'defer' });
     }
 
     if (Array.isArray(obj.data) && (obj.data.length !== 0)) {
         obj.data.forEach((item) => {
-            args.push(`data-${item.key}="${item.value}"`);
+            args.push({ key: `data-${item.key}`, value: item.value });
         });
     }
 
-    return `<script ${args.join(' ')}></script>`;
+    return args;
 };
 
-const buildLinkElement = (obj) => {
+const buildReactScriptAttributes = (obj) => {
+    const attrs = {};
+    for (const { key, value } of buildScriptAttributes(obj)) {
+        if (key === 'crossorigin') attrs.crossOrigin = value || '';
+        else if (key === 'referrerpolicy') attrs.referrerPolicy = value;
+        else if (key === 'nomodule') attrs.noModule = value || true;
+        else if (key && !value) attrs[key] = true;
+        else attrs[key] = value;
+    }
+    return attrs;
+}
+
+const buildScriptElement = (obj) => {
+    const attrs = buildScriptAttributes(obj).map(({key, value}) => {
+        if (!value && value !== '') return key;
+        return `${key}="${value}"`;
+    })
+    return `<script ${attrs.join(' ')}></script>`;
+};
+
+const buildLinkAttributes = (obj) => {
     const args = [];
-    args.push(`href="${obj.value}"`);
+    args.push({ key: 'href', value: obj.value });
 
     if (obj.crossorigin || obj.crossorigin === '') {
-        if (obj.crossorigin === true) args.push(`crossorigin`);
-        else args.push(`crossorigin="${obj.crossorigin}"`);
+        if (obj.crossorigin === true) args.push({ key: 'crossorigin' });
+        else args.push({ key: 'crossorigin', value: obj.crossorigin });
     }
 
     if (notEmpty(obj.disabled)) {
-        args.push('disabled');
+        args.push({ key: 'disabled' });
     }
 
     if (notEmpty(obj.hreflang)) {
-        args.push(`hreflang="${obj.hreflang}"`);
+        args.push({ key: 'hreflang', value: obj.hreflang });
     }
 
     if (notEmpty(obj.title)) {
-        args.push(`title="${obj.title}"`);
+        args.push({ key: 'title', value: obj.title });
     }
 
     if (notEmpty(obj.media)) {
-        args.push(`media="${obj.media}"`);
+        args.push({ key: 'media', value: obj.media });
     }
 
     if (notEmpty(obj.as)) {
-        args.push(`as="${obj.as}"`);
+        args.push({ key: 'as', value: obj.as });
     }
 
     if (notEmpty(obj.type)) {
-        args.push(`type="${obj.type}"`);
+        args.push({ key: 'type', value: obj.type });
     }
 
     if (notEmpty(obj.rel)) {
-        args.push(`rel="${obj.rel}"`);
+        args.push({ key: 'rel', value: obj.rel });
+    }
+
+    return args;
+};
+
+const buildReactLinkAttributes = (obj) => {
+    const attrs = {};
+    for (const { key, value } of buildLinkAttributes(obj)) {
+        if (key === 'crossorigin') attrs.crossOrigin = value || '';
+        else if (key === 'hreflang') attrs.hrefLang = value;
+        else if (key && !value) attrs[key] = true;
+        else attrs[key] = value;
     }
+    return attrs;
+}
 
-    return `<link ${args.join(' ')}>`;
+const buildLinkElement = (obj) => {
+    const attrs = buildLinkAttributes(obj).map(({key, value}) => {
+        if (!value && value !== '') return key;
+        return `${key}="${value}"`;
+    })
+    return `<link ${attrs.join(' ')}>`;
 };
 
+module.exports.buildLinkAttributes = buildLinkAttributes;
+module.exports.buildReactLinkAttributes = buildReactLinkAttributes;
+module.exports.buildScriptAttributes = buildScriptAttributes;
+module.exports.buildReactScriptAttributes = buildReactScriptAttributes;
 module.exports.buildScriptElement = buildScriptElement;
 module.exports.buildLinkElement = buildLinkElement;