feature: @putout/operator-jsx: addAttribute

Author: coderaiser

packages/operator-jsx/README.md

@@ -185,6 +185,26 @@ hasAttributeValue(node, 'data-menu-index', '1');
 true;
 ```
 
+### addAttribute(path: Path | Node, name: string, value: string)
+
+For next jsx:
+
+```jsx
+<section/>;
+```
+
+check:
+
+```js
+addAttribute(node, 'data-menu-index', '1');
+```
+
+result is:
+
+```jsx
+<section data-menu-index="1"/>;
+```
+
 ## License
 
 MIT

packages/operator-jsx/lib/jsx.js

@@ -2,10 +2,17 @@
 
 const {setLiteralValue} = require('@putout/operate');
 const {types} = require('@putout/babel');
-const {isJSXElement} = types;
+const {
+    isJSXElement,
+    jsxAttribute,
+    jsxIdentifier,
+    stringLiteral,
+} = types;
+
+const getNode = (a) => a.node || a;
 
 module.exports.hasTagName = (path, name) => {
-    const node = path.node || path;
+    const node = getNode(path);
 
     if (!isJSXElement(path))
         return false;
@@ -27,11 +34,7 @@ module.exports.getAttributePath = (path, name) => {
 module.exports.getAttributeNode = getAttributeNode;
 function getAttributeNode(path, name) {
     let result = null;
-    
-    if (!path)
-        return result;
-    
-    const node = path.node || path;
+    const node = getNode(path);
     const {attributes} = node.openingElement;
 
     for (const attr of attributes) {
@@ -58,12 +61,26 @@ module.exports.addAttributeValue = addAttributeValue;
 function addAttributeValue(path, name, value) {
     const attributeNode = getAttributeNode(path, name);
 
+    if (!attributeNode)
+        return addAttribute(path, name, value);
+    
     if (attributeNode.value.value.includes(value))
         return;
 
     setLiteralValue(attributeNode.value, `${attributeNode.value.value} ${value}`);
 }
 
+module.exports.addAttribute = addAttribute;
+function addAttribute(path, name, value) {
+    const node = getNode(path);
+    let attributeNode = getAttributeNode(node, name);
+    
+    if (!attributeNode) {
+        attributeNode = jsxAttribute(jsxIdentifier(name), stringLiteral(value));
+        node.openingElement.attributes.push(attributeNode);
+    }
+}
+
 module.exports.removeAttributeValue = removeAttributeValue;
 function removeAttributeValue(path, name, attributeValue) {
     if (!path)
@@ -78,11 +95,13 @@ function removeAttributeValue(path, name, attributeValue) {
         setLiteralValue(classAttribute.value, value.replace(RegExp(`\\s?${attributeValue}`), ''));
 }
 
-module.exports.setAttributeValue = (node, name, value) => {
-    const attributeNode = getAttributeNode(node, name);
+module.exports.setAttributeValue = (path, name, value) => {
+    const attributeNode = getAttributeNode(path, name);
+    
+    if (!attributeNode)
+        return addAttribute(path, name, value);
 
-    if (attributeNode)
-        setLiteralValue(attributeNode.value, value);
+    setLiteralValue(attributeNode.value, value);
 };
 
 module.exports.addClassName = (path, name) => {

packages/operator-jsx/lib/jsx.spec.js

@@ -12,6 +12,7 @@ const tryCatch = require('try-catch');
 
 const {
     addClassName,
+    addAttribute,
     removeClassName,
     containsClassName,
     hasDataName,
@@ -137,6 +138,17 @@ test('putout: operator: jsx: addAttributeValue', (t) => {
     t.end();
 });
 
+test('putout: operator: jsx: addAttributeValue: no attribute', (t) => {
+    const node = template.ast.fresh('<hello/>');
+    addAttributeValue(node, 'className', 'abc');
+    
+    const result = print(node);
+    const expected = '<hello className="abc"/>;\n';
+    
+    t.equal(result, expected);
+    t.end();
+});
+
 test('putout: operator: jsx: addAttributeValue: exists', (t) => {
     const node = template.ast.fresh('<hello className="world"/>');
     addAttributeValue(node, 'className', 'world');
@@ -187,9 +199,14 @@ test('putout: operator: jsx: setAttributeValue', (t) => {
 });
 
 test('putout: operator: jsx: setAttributeValue: no', (t) => {
-    const [error] = tryCatch(setAttributeValue, null, 'className', 'world');
+    const node = template.ast.fresh('<hello/>');
 
-    t.notOk(error);
+    setAttributeValue(node, 'className', 'world');
+    
+    const result = print(node);
+    const expected = `<hello className="world"/>;\n`;
+    
+    t.equal(result, expected);
     t.end();
 });
 
@@ -245,3 +262,14 @@ test('putout: operator: jsx: hasAttribute', (t) => {
     t.ok(result);
     t.end();
 });
+
+test('putout: operator: jsx: addAtribute', (t) => {
+    const node = template.ast.fresh('<hello/>');
+    
+    addAttribute(node, 'data-menu-index', '1');
+    
+    const result = print(node);
+    
+    t.ok(result);
+    t.end();
+});