Feat: rcs.replace.pug (#61)

JPeer264 · web-flow · commit c255703f19d4 · 2018-08-28T08:18:24.000+02:00
(ref: JPeer264/node-rename-css-selectors#22)
diff --git a/docs/api/replace.md b/docs/api/replace.md
@@ -6,6 +6,7 @@ All replace methods take `Buffer` or `String`.
 
 - [regex](#regex)
 - [html](#html)
+- [pug](#pug)
 - [any](#any)
 - [css](#css)
 - [js](#js)
@@ -31,6 +32,7 @@ Options:
 - espreeOptions: same as [replace.js](#js) options
 - triggerClassAttributes `<Array>`: Array of string or regular expressions. Renames all classes with the matching string or regex. E.g. `[/data-*/ , 'custom-attr']` matches all data attributes and 'custom-attr'
 - triggerIdAttributes `<Array>`: Same as triggerClassAttributes just for IDs
+
 Example:
 
 ```js
@@ -44,6 +46,35 @@ const replacedHtml = rcs.replace.html('<div class="my-class"></div>');
 // '<div class="a"></div>'
 ```
 
+### pug
+
+> Same as [rcs.replace.html](#html) just with [pug](https://pugjs.org/) templates
+
+**rcs.replace.pug(code[, options])**
+
+Parameters:
+- code `<String>`
+- same options as [rcs.replace.html](#html) `<Object>`
+
+Example:
+
+```js
+const rcs = require('rcs-core');
+
+// first set the id to replace
+rcs.selectorLibrary.set('.my-class');
+
+const replacedHtml = rcs.replace.pug(`
+.my-class(attr='my attribute')
+  .another-class
+`);
+// output in pug:
+// `
+// .a(attr!='my attribute')
+//   .another-class
+// `
+```
+
 ### any
 
 > Replaces all strings which matches the filled selectors
diff --git a/lib/replace/index.js b/lib/replace/index.js
@@ -3,6 +3,7 @@ import regex from './regex';
 import html from './html';
 import any from './any';
 import css from './css';
+import pug from './pug';
 import js from './js';
 
 export default {
@@ -11,5 +12,6 @@ export default {
   html,
   any,
   css,
+  pug,
   js,
 };
diff --git a/lib/replace/pug.js b/lib/replace/pug.js
@@ -0,0 +1,109 @@
+import lex from 'pug-lexer';
+import walk from 'pug-walk';
+import parser from 'pug-parser';
+import wrap from 'pug-runtime/wrap';
+import generateCode from 'pug-code-gen';
+import generateSource from 'pug-source-gen';
+import merge from 'lodash.merge';
+
+import replaceCss from './css';
+import replaceJs from './js';
+import selectorLibrary from '../selectorLibrary';
+
+const shouldTriggerAttribute = (attr, item) => (
+  item instanceof RegExp
+    ? attr.name.match(new RegExp(item))
+    : item === attr.name
+);
+
+const replacePug = (code, opts = {}) => {
+  const lexed = lex(code);
+  const ast = parser(lexed);
+  const defaultOptions = {
+    espreeOptions: {},
+    triggerClassAttributes: [],
+    triggerIdAttributes: [],
+  };
+
+  const options = merge(opts, defaultOptions);
+
+  walk(ast, (node) => {
+    if (node.name === 'script' || node.name === 'style') {
+      const newCode = wrap(generateCode(node.block))();
+      const replacedCode = node.name === 'script'
+        ? replaceJs(newCode, options.espreeOptions)
+        : replaceCss(newCode);
+
+      // add one tab after each new line
+      const pugCode = `${node.name}.\n${replacedCode}`.replace(/\n/g, '\n\t');
+      const astReplaced = parser(lex(pugCode));
+      const scriptBlock = astReplaced.nodes[0].block;
+
+      // do not change entire scriptBlock
+      // this might be look like the correct ast,
+      // but the begin and end loc numbers are wrong
+      // eslint-disable-next-line no-param-reassign
+      node.block.nodes = node.block.nodes.map((n, i) => (
+        Object.assign({}, n, {
+          val: scriptBlock.nodes[i].val,
+        })
+      ));
+    }
+
+    if (Array.isArray(node.attrs) && node.attrs.length >= 0) {
+      node.attrs.forEach((attr) => {
+        let selectorType;
+        let shouldReplace = false;
+
+        if (
+          attr.name === 'class' ||
+          options.triggerClassAttributes.some((...params) => (
+            shouldTriggerAttribute(attr, ...params)
+          ))
+        ) {
+          selectorType = '.';
+          shouldReplace = true;
+        }
+
+        if (
+          attr.name === 'id' ||
+          options.triggerIdAttributes.some((...params) => (
+            shouldTriggerAttribute(attr, ...params)
+          ))
+        ) {
+          selectorType = '#';
+          shouldReplace = true;
+        }
+
+        if (!shouldReplace) {
+          return;
+        }
+
+        // attr.val includes ' in the beginning and the end
+        // remove them and reattach them after
+        const prefix = attr.val.charAt(0);
+        const suffix = attr.val.charAt(attr.val.length - 1);
+        const val = attr.val.slice(1, (attr.val.length - 1));
+
+        // following will replace each whitespace
+        // seperated value with its renamed one
+        const replacedVal = val
+          .split(' ')
+          .map(value => (
+            // renaming each value
+            selectorLibrary
+              .get(`${selectorType}${value}`)
+              .replace(new RegExp(`^\\${selectorType}`), '')
+          ))
+          .join(' ');
+
+        // eslint-disable-next-line no-param-reassign
+        attr.val = prefix + replacedVal + suffix;
+      });
+    }
+  });
+
+  return generateSource(ast);
+};
+
+export default replacePug;
diff --git a/package.json b/package.json
@@ -52,6 +52,12 @@
     "parse5": "^5.0.0",
     "parse5-traverse": "^1.0.3",
     "postcss": "^6.0.17",
+    "pug-code-gen": "^2.0.1",
+    "pug-lexer": "^4.0.0",
+    "pug-parser": "^5.0.0",
+    "pug-runtime": "^2.0.4",
+    "pug-source-gen": "^0.0.2",
+    "pug-walk": "^1.1.7",
     "recast": "^0.15.0"
   },
   "devDependencies": {
diff --git a/test/files/fixtures/pug/index.pug b/test/files/fixtures/pug/index.pug
@@ -0,0 +1,6 @@
+doctype html
+head
+  meta(charset='UTF-8')
+  title Test Document
+.jp-block
+.jp-block__element
diff --git a/test/files/fixtures/pug/script.pug b/test/files/fixtures/pug/script.pug
@@ -0,0 +1,15 @@
+doctype html
+head
+  meta(charset='UTF-8')
+  meta(name='viewport' content='width=device-width, initial-scale=1.0')
+  meta(http-equiv='X-UA-Compatible' content='ie=edge')
+  title Document
+table#id.test.selector
+div
+  div
+    .some-class
+      table#id.test.selector
+script.
+  const myClass = "selector";
+  const anotherClass = "test";
+  const id = "id";
diff --git a/test/files/fixtures/pug/style.pug b/test/files/fixtures/pug/style.pug
@@ -0,0 +1,13 @@
+doctype html
+head
+  meta(charset='UTF-8')
+  title Test Document
+  style.
+    .jp-block {
+    content: 'block';
+    }
+    .jp-block__element {
+    content: 'block__element';
+    }
+.jp-block
+.jp-block__element
diff --git a/test/files/results/pug/index.pug b/test/files/results/pug/index.pug
@@ -0,0 +1,6 @@
+doctype html
+head
+  meta(charset!='UTF-8')
+  title Test Document
+.a
+.b
diff --git a/test/files/results/pug/script.pug b/test/files/results/pug/script.pug
@@ -0,0 +1,15 @@
+doctype html
+head
+  meta(charset!='UTF-8')
+  meta(name!='viewport' content!='width=device-width, initial-scale=1.0')
+  meta(http-equiv!='X-UA-Compatible' content!='ie=edge')
+  title Document
+table#c.a.b
+div
+  div
+    .some-class
+      table#c.a.b
+script.
+  const myClass = "b";
+  const anotherClass = "a";
+  const id = "c";
diff --git a/test/files/results/pug/style.pug b/test/files/results/pug/style.pug
@@ -0,0 +1,13 @@
+doctype html
+head
+  meta(charset!='UTF-8')
+  title Test Document
+  style.
+    .a {
+    content: 'block';
+    }
+    .b {
+    content: 'block__element';
+    }
+.a
+.b
diff --git a/test/replace.pug.js b/test/replace.pug.js
diff --git a/yarn.lock b/yarn.lock
