feature: @putout/operator-jsx: className

Author: coderaiser

packages/operator-jsx/README.md

@@ -91,6 +91,84 @@ Works this way:
 +<section className="hello"/>
 ```
 
+### addClassName(path: Path | Node, value: string)
+
+Add `className`:
+
+```js
+addClassName(node, 'hello');
+```
+
+Works this way:
+
+```diff
+-<section className="world"/>
++<section className="hello"/>
+```
+
+### removeClassName(path: Path | Node, value: string)
+
+Remove `className`:
+
+```js
+removeClassName(node, 'hello');
+```
+
+Works this way:
+
+```diff
+-<section className="hello world"/>
++<section className="world"/>
+```
+
+### getClassName(path: Path | Node): string
+
+For next jsx:
+
+```jsx
+<section className="world"/>;
+```
+
+get `className`:
+
+```js
+getClassName(node);
+// returns
+'world';
+```
+
+### containsClassName(path: Path | Node, name: string): boolean
+
+For next jsx:
+
+```jsx
+<section className="hello world"/>;
+```
+
+check:
+
+```js
+containsClassName(node, 'hello');
+// returns
+true;
+```
+
+### hasDataName(path: Path | Node, name: string): boolean
+
+For next jsx:
+
+```jsx
+<section data-name="hello"/>;
+```
+
+check:
+
+```js
+hasDataName(node, 'hello');
+// returns
+true;
+```
+
 ## License
 
 MIT

packages/operator-jsx/lib/jsx.js

@@ -28,6 +28,9 @@ module.exports.getAttributeNode = getAttributeNode;
 function getAttributeNode(path, name) {
     let result = null;
 
+    if (!path)
+        return result;
+    
     const node = path.node || path;
     const {attributes} = node.openingElement;
 
@@ -41,25 +44,26 @@ function getAttributeNode(path, name) {
     return result;
 }
 
-module.exports.getAttributeValue = (path, attributeName) => {
+module.exports.getAttributeValue = getAttributeValue;
+function getAttributeValue(path, attributeName) {
     const attribute = getAttributeNode(path, attributeName);
 
     if (!attribute)
         return '';
 
     return attribute.value.value;
-};
-
-module.exports.addAttributeValue = (path, name, value) => {
+}
+module.exports.addAttributeValue = addAttributeValue;
+function addAttributeValue(path, name, value) {
     const attributeNode = getAttributeNode(path, name);
 
     if (attributeNode.value.value.includes(value))
         return;
 
     setLiteralValue(attributeNode.value, `${attributeNode.value.value} ${value}`);
-};
-
-module.exports.removeAttributeValue = (path, name, attributeValue) => {
+}
+module.exports.removeAttributeValue = removeAttributeValue;
+function removeAttributeValue(path, name, attributeValue) {
     if (!path)
         return;
 
@@ -70,11 +74,33 @@ module.exports.removeAttributeValue = (path, name, attributeValue) => {
 
     if (value.includes(attributeValue))
         setLiteralValue(classAttribute.value, value.replace(RegExp(`\\s?${attributeValue}`), ''));
-};
-
+}
 module.exports.setAttributeValue = (node, name, value) => {
     const attributeNode = getAttributeNode(node, name);
 
     if (attributeNode)
         setLiteralValue(attributeNode.value, value);
 };
+
+module.exports.addClassName = (path, name) => {
+    addAttributeValue(path, 'className', name);
+};
+
+module.exports.getClassName = getClassName;
+function getClassName(path) {
+    return getAttributeValue(path, 'className');
+}
+
+module.exports.removeClassName = (path, name) => {
+    removeAttributeValue(path, 'className', name);
+};
+
+module.exports.containsClassName = (path, className) => {
+    const classNameValue = getClassName(path);
+    return classNameValue.includes(className);
+};
+
+module.exports.hasDataName = (path, value = '') => {
+    const attribute = getAttributeValue(path, 'data-name');
+    return attribute === value;
+};

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

@@ -11,6 +11,10 @@ const {
 const tryCatch = require('try-catch');
 
 const {
+    addClassName,
+    removeClassName,
+    containsClassName,
+    hasDataName,
     hasTagName,
     getAttributePath,
     getAttributeNode,
@@ -181,9 +185,54 @@ test('putout: operator: jsx: setAttributeValue', (t) => {
     t.end();
 });
 
+test('putout: operator: jsx: setAttributeValue: no', (t) => {
+    const [error] = tryCatch(setAttributeValue, null, 'className', 'world');
+    
+    t.notOk(error);
+    t.end();
+});
+
 test('putout: operator: jsx: removeAttributeValue: no path', (t) => {
     const [error] = tryCatch(removeAttributeValue, null, 'className', 'world');
 
     t.notOk(error);
     t.end();
 });
+
+test('putout: operator: jsx: addClassName', (t) => {
+    const node = template.ast.fresh('<hello className="hello"/>');
+    addClassName(node, 'world');
+    
+    const result = print(node);
+    const expected = `<hello className="hello world"/>;\n`;
+    
+    t.equal(result, expected);
+    t.end();
+});
+
+test('putout: operator: jsx: removeClassName', (t) => {
+    const node = template.ast.fresh('<hello className="hello world"/>');
+    removeClassName(node, 'world');
+    
+    const result = print(node);
+    const expected = `<hello className="hello"/>;\n`;
+    
+    t.equal(result, expected);
+    t.end();
+});
+
+test('putout: operator: jsx: containsClassName', (t) => {
+    const node = template.ast.fresh('<hello className="hello world"/>');
+    const result = containsClassName(node, 'world');
+    
+    t.ok(result);
+    t.end();
+});
+
+test('putout: operator: jsx: hasDataName', (t) => {
+    const node = template.ast.fresh('<hello data-name="hello"/>');
+    const result = hasDataName(node, 'hello');
+    
+    t.ok(result);
+    t.end();
+});