@podium/utils - npm Package Compare versions

Comparing version 4.3.3 to 4.4.0

CHANGELOG.md

@@ -0,1 +1,9 @@
+# [4.4.0](https://github.com/podium-lib/utils/compare/v4.3.3...v4.4.0) (2020-10-12)
+
+
+### Features
+
+* add .buildReactLinkAttributes and .buildReactScriptAttributes methods ([ffb0bff](https://github.com/podium-lib/utils/commit/ffb0bff96a998694cb7102e0f9dc14c943914f7a))
+* add .toReactAttrs() method to AssetJs and AssetCss classes and integration tests ([7ab097f](https://github.com/podium-lib/utils/commit/7ab097f51d48001c884eb734eb823b0516e2eb24))
+
 ## [4.3.3](https://github.com/podium-lib/utils/compare/v4.3.2...v4.3.3) (2020-10-10)
@@ -2,0 +10,0 @@

lib/asset-css.js

@@ -5,3 +5,3 @@ 'use strict';
 const { uriIsRelative, pathnameBuilder } = require('./utils');
-const { buildLinkElement } = require('./html-utils');
+const { buildLinkElement, buildReactLinkAttributes } = require('./html-utils');
 
@@ -162,2 +162,6 @@ // Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
 
+    toJsxAttributes() {
+        return buildReactLinkAttributes(this);
+    }
+
     get [Symbol.toStringTag]() {
@@ -164,0 +168,0 @@ return 'PodiumAssetCss';

lib/asset-js.js

@@ -5,3 +5,3 @@ 'use strict';
 const { uriIsRelative, pathnameBuilder } = require('./utils');
-const { buildScriptElement } = require('./html-utils');
+const { buildScriptElement, buildReactScriptAttributes } = require('./html-utils');
 
@@ -163,2 +163,6 @@ // Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
 
+    toJsxAttributes() {
+        return buildReactScriptAttributes(this);
+    }
+
     get [Symbol.toStringTag]() {
@@ -165,0 +169,0 @@ return 'PodiumAssetJs';

lib/html-utils.js

@@ -0,1 +1,3 @@
+/* eslint-disable no-restricted-syntax */
+
 'use strict';
@@ -11,33 +13,33 @@
 
-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' });
     }
@@ -47,50 +49,93 @@
         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 `<link ${args.join(' ')}>`;
+    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;
+}
+
+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;

package.json

 {
     "name": "@podium/utils",
-    "version": "4.3.3",
+    "version": "4.4.0",
     "description": "Common generic utility methods shared by @podium modules.",
@@ -5,0 +5,0 @@ "license": "MIT",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39555

increased by6.61%

Lines of code

849

increased by5.73%

No dependency changes