feat: add to-string-literal and to-template-literal commands (#2)

Co-authored-by: Anthony Fu <[email protected]>

Author: alexzhang1030

README.md

@@ -199,6 +199,86 @@ Will be converted to:
 const { default: bar, foo } = await import('./foo')
 ```
 
+### `to-string-literal`
+
+Convert template literals to string literals.
+
+Triggers:
+- `/// to-string-literal`
+- `/// to-sl`
+- `/// 2string-literal`
+- `/// 2sl`
+
+or if you fancy `@`:
+
+- `// @to-string-literal`
+- `// @to-sl`
+- `// @2string-literal`
+- `// @2sl`
+
+```js
+/// @2sl
+const foo = `foo`
+
+// @2sl
+const quxx = `${qux}quxx`
+
+// Also supports using numbers to specify which items need to be converted (starts from 1)
+// @2sl 1 3
+const bar = `bar`; const baz = `baz`; const qux = `qux`
+```
+
+Will be converted to:
+
+```js
+const foo = 'bar'
+
+// eslint-disable-next-line prefer-template
+const quxx = qux + 'quxx'
+
+const bar = 'bar'; const baz = `baz`; const qux = 'qux'
+```
+
+### `to-template-literal`
+
+Convert string literals to template literals.
+
+Triggers:
+- `/// to-template-literal`
+- `/// to-tl`
+- `/// 2template-literal`
+- `/// 2tl`
+
+or if you fancy `@`:
+
+- `// @to-template-literal`
+- `// @to-tl`
+- `// @2template-literal`
+- `// @2tl`
+
+```js
+/// @2tl
+const bar = 'bar'
+
+// @2tl
+// eslint-disable-next-line prefer-template
+const quxx = qux + 'quxx'
+
+// Also supports using numbers to specify which items need to be converted (starts from 1)
+// @2tl 1 3
+const foo = 'foo'; const baz = 'baz'; const qux = 'qux'
+```
+
+Will be converted to:
+
+```js
+const bar = `bar`
+
+const quxx = `${qux}quxx`
+
+const foo = `foo`; const baz = 'baz'; const qux = `qux`
+```
+
 ## Custom Commands
 
 It's also possible to define your custom commands.

eslint.config.js

@@ -12,6 +12,7 @@ export default antfu(
     rules: {
       'command/command': 'off',
       'antfu/top-level-function': 'off',
+      'style/max-statements-per-line': 'off',
     },
   },
   {

src/commands/_utils.ts

@@ -0,0 +1,30 @@
+import type { Tree } from '../types'
+
+export function getNodesByIndexes<T>(nodes: T[], indexes: number[]) {
+  return indexes.length
+    ? indexes.map(n => nodes[n]).filter(Boolean)
+    : nodes
+}
+
+/**
+ *
+ * @param value Accepts a string of numbers separated by spaces
+ * @param integer If true, only positive integers are returned
+ */
+export function parseToNumberArray(value: string | undefined, integer = false) {
+  return value?.split(' ')
+    .map(Number)
+    .filter(n =>
+      !Number.isNaN(n)
+      && integer
+        ? (Number.isInteger(n) && n > 0)
+        : true,
+    ) ?? []
+}
+
+export function insideRange(node: Tree.Node, range: [number, number], includeStart = true, includeEnd = true) {
+  return (
+    (includeStart ? node.range[0] >= range[0] : node.range[0] > range[0])
+    && (includeEnd ? node.range[1] <= range[1] : node.range[1] < range[1])
+  )
+}

src/commands/index.ts

@@ -4,6 +4,8 @@ import { keepSorted } from './keep-sorted'
 import { toForEach } from './to-for-each'
 import { toForOf } from './to-for-of'
 import { toDynamicImport } from './to-dynamic-import'
+import { toStringLiteral } from './to-string-literal'
+import { toTemplateLiteral } from './to-template-literal'
 
 // @keep-sorted
 export {
@@ -13,6 +15,8 @@ export {
   toForEach,
   toForOf,
   toFunction,
+  toStringLiteral,
+  toTemplateLiteral,
 }
 
 // @keep-sorted
@@ -23,4 +27,6 @@ export const builtinCommands = [
   toForEach,
   toForOf,
   toFunction,
+  toStringLiteral,
+  toTemplateLiteral,
 ]

src/commands/to-string-literal.test.ts

@@ -0,0 +1,49 @@
+import { toStringLiteral as command } from './to-string-literal'
+import { d, run } from './_test-utils'
+
+run(
+  command,
+  {
+    code: d`
+    // @2sl
+    const a = \`a\`; const b = \`b\`; const c = 'c';
+    `,
+    output: d`
+    const a = 'a'; const b = 'b'; const c = 'c';
+    `,
+    errors: ['command-removal', 'command-fix', 'command-fix'],
+  },
+  // You can specify which one to convert
+  {
+    code: d`
+    // @2sl 2 3
+    const a = \`a\`, b = \`b\`, c = \`c\`, d = \`d\`;
+    `,
+    output: d`
+    const a = \`a\`, b = 'b', c = 'c', d = \`d\`;
+    `,
+    errors: ['command-removal', 'command-fix', 'command-fix'],
+  },
+  // mixed
+  {
+    code: d`
+    // @2sl 1 3
+    const a = 'a', b = 'b', c = \`c\`, d = 'd', e = \`e\`, f = \`f\`;
+    `,
+    output: d`
+    const a = 'a', b = 'b', c = 'c', d = 'd', e = \`e\`, f = 'f';
+    `,
+    errors: ['command-removal', 'command-fix', 'command-fix'],
+  },
+  // `a${b}d` -> `'a' + b + 'd'`
+  {
+    code: d`
+    // @2sl
+    const a = \`\${g}a\${a}a\${b}c\${d}e\${a}\`;
+    `,
+    output: d`
+    const a = g + 'a' + a + 'a' + b + 'c' + d + 'e' + a;
+    `,
+    errors: ['command-removal', 'command-fix'],
+  },
+)

src/commands/to-string-literal.ts

@@ -0,0 +1,76 @@
+import type { Command, Tree } from '../types'
+import { getNodesByIndexes, parseToNumberArray } from './_utils'
+
+export const toStringLiteral: Command = {
+  name: 'to-string-literal',
+  match: /^[\/:@]\s*(?:to-|2)?(?:string-literal|sl)\s{0,}(.*)?$/,
+  action(ctx) {
+    const numbers = ctx.matches[1]
+    // From integers 1-based to 0-based to match array indexes
+    const indexes = parseToNumberArray(numbers, true).map(n => n - 1)
+    const nodes = ctx.findNodeBelow({
+      types: ['TemplateLiteral'],
+      shallow: true,
+      findAll: true,
+    })
+    if (!nodes?.length)
+      return ctx.reportError('No template literals found')
+
+    ctx.removeComment()
+    for (const node of getNodesByIndexes(nodes, indexes)) {
+      const ids = extractIdentifiers(node)
+      let raw = ctx.source.getText(node).slice(1, -1)
+
+      if (ids.length)
+        raw = toStringWithIds(raw, node, ids)
+      else
+        raw = `'${raw}'`
+
+      ctx.report({
+        node,
+        message: 'Convert to string literal',
+        fix(fixer) {
+          return fixer.replaceTextRange(node.range, raw)
+        },
+      })
+    }
+  },
+}
+
+interface Identifier {
+  name: string
+  range: [number, number]
+}
+
+function extractIdentifiers(node: Tree.TemplateLiteral) {
+  const ids: Identifier[] = []
+  for (const child of node.expressions) {
+    if (child.type === 'Identifier')
+      ids.push({ name: child.name, range: child.range })
+    // TODO: sub expressions, e.g. `${a + b}` -> '' + a + b + ''
+  }
+  return ids
+}
+
+function toStringWithIds(raw: string, node: Tree.TemplateLiteral, ids: Identifier[]) {
+  let hasStart = false
+  let hasEnd = false
+  ids.forEach(({ name, range }, index) => {
+    let startStr = `' + `
+    let endStr = ` + '`
+
+    if (index === 0) {
+      hasStart = range[0] - /* `${ */3 === node.range[0]
+      if (hasStart)
+        startStr = ''
+    }
+    if (index === ids.length - 1) {
+      hasEnd = range[1] + /* }` */2 === node.range[1]
+      if (hasEnd)
+        endStr = ''
+    }
+
+    raw = raw.replace(`\${${name}}`, `${startStr}${name}${endStr}`)
+  })
+  return `${hasStart ? '' : `'`}${raw}${hasEnd ? '' : `'`}`
+}

src/commands/to-template-literal.test.ts

@@ -0,0 +1,89 @@
+import { toTemplateLiteral as command } from './to-template-literal'
+import { d, run } from './_test-utils'
+
+run(
+  command,
+  {
+    code: d`
+    // @2tl
+    const a = \`a\${a}\`, b = \`b\`, c = "c", d = 2;
+    `,
+    output: d`
+    const a = \`a\${a}\`, b = \`b\`, c = \`c\`, d = 2;
+    `,
+    errors: ['command-removal', 'command-fix'],
+  },
+  // You can specify which one to convert
+  {
+    code: d`
+    // @2tl 1 4
+    const a = 'a', b = 'b', c = 'c', d = 'd';
+    `,
+    output: d`
+    const a = \`a\`, b = 'b', c = 'c', d = \`d\`;
+    `,
+    errors: ['command-removal', 'command-fix', 'command-fix'],
+  },
+  // mixed
+  {
+    code: d`
+    // @2tl 1 3
+    const a = \`a\`; const b = \`b\`; const c = 'c'; const d = \`d\`; const e = 'e'; const f = 'f';
+    `,
+    output: d`
+    const a = \`a\`; const b = \`b\`; const c = \`c\`; const d = \`d\`; const e = 'e'; const f = \`f\`;
+    `,
+    errors: ['command-removal', 'command-fix', 'command-fix'],
+  },
+  // 'a' + b + 'c' -> `a${b}c`
+  {
+    code: d`
+    // @2tl
+    const a = 'a' + b + 'c';
+    `,
+    output: d`
+    const a = \`a\${b}c\`;
+    `,
+    errors: ['command-removal', 'command-fix'],
+  },
+  {
+    code: d`
+    // @2tl
+    const b = b + 'c' + d + 'e' + f + z + 'g' + h + 'i' + j;
+    `,
+    output: d`
+    const b = \`\${b}c\${d}e\${f}\${z}g\${h}i\${j}\`;
+    `,
+    errors: ['command-removal', 'command-fix'],
+  },
+  {
+    code: d`
+    // @2tl
+    const a = a + b + c;
+    `,
+    output: d`
+    const a = \`\${a}\${b}\${c}\`;
+    `,
+    errors: ['command-removal', 'command-fix'],
+  },
+  {
+    code: d`
+    // @2tl 2 4
+    const a = a + b; const d = d + 'e'; const c = '3'; const d = '4';
+    `,
+    output: d`
+    const a = a + b; const d = \`\${d}e\`; const c = '3'; const d = \`4\`;
+    `,
+    errors: ['command-removal', 'command-fix', 'command-fix'],
+  },
+  {
+    code: d`
+    // @2tl 1 2
+    const a = '4' + b; const d = d + 'e'; const c = '3'; const d = '4';
+    `,
+    output: d`
+    const a = \`4\${b}\`; const d = \`\${d}e\`; const c = '3'; const d = '4';
+    `,
+    errors: ['command-removal', 'command-fix', 'command-fix'],
+  },
+)