Add svelte parser, via prettier-plugin-svelte

Author: bradlc

package-lock.json

@@ -23,8 +23,10 @@
     "import-fresh": "^3.3.0",
     "import-from": "^4.0.0",
     "jest": "^27.4.7",
+    "line-column": "^1.0.2",
     "object-hash": "^2.2.0",
     "prettier": "^2.5.1",
+    "prettier-plugin-svelte": "^2.6.0",
     "recast": "^0.20.5",
     "rimraf": "^3.0.2",
     "tailwindcss": "^3.0.15"

package.json

@@ -2,4 +2,5 @@ module.exports = {
   semi: false,
   singleQuote: true,
   plugins: ['.'],
+  pluginSearchDirs: ['./tests'], // disable plugin autoload
 }

prettier.config.js

@@ -16,6 +16,8 @@ import * as fs from 'fs'
 import requireFrom from 'import-from'
 import requireFresh from 'import-fresh'
 import objectHash from 'object-hash'
+import * as svelte from 'prettier-plugin-svelte'
+import lineColumn from 'line-column'
 
 let contextMap = new Map()
 
@@ -290,13 +292,48 @@ function transformCss(ast, { env }) {
 }
 
 export const options = {
+  ...svelte.options,
   tailwindConfig: {
     type: 'string',
     category: 'Tailwind CSS',
     description: 'TODO',
   },
 }
 
+export const languages = svelte.languages
+export const printers = {
+  'svelte-ast': {
+    ...svelte.printers['svelte-ast'],
+    print: (path, options, print) => {
+      if (!options.__mutatedOriginalText) {
+        options.__mutatedOriginalText = true
+        let changes = path.stack[0].changes
+        if (changes?.length) {
+          let finder = lineColumn(options.originalText)
+
+          for (let change of changes) {
+            let start = finder.toIndex(
+              change.loc.start.line,
+              change.loc.start.column + 1
+            )
+            let end = finder.toIndex(
+              change.loc.end.line,
+              change.loc.end.column + 1
+            )
+
+            options.originalText =
+              options.originalText.substring(0, start) +
+              change.text +
+              options.originalText.substring(end)
+          }
+        }
+      }
+
+      return svelte.printers['svelte-ast'].print(path, options, print)
+    },
+  },
+}
+
 export const parsers = {
   html: createParser(prettierParserHTML.parsers.html, transformHtml(['class'])),
   lwc: createParser(prettierParserHTML.parsers.lwc, transformHtml(['class'])),
@@ -333,6 +370,58 @@ export const parsers = {
     prettierParserMeriyah.parsers.meriyah,
     transformJavaScript
   ),
+  svelte: createParser(svelte.parsers.svelte, (ast, { env }) => {
+    let changes = []
+    transformSvelte(ast.html, { env, changes })
+    ast.changes = changes
+  }),
+}
+
+function transformSvelte(ast, { env, changes }) {
+  for (let attr of ast.attributes ?? []) {
+    if (attr.name === 'class') {
+      for (let i = 0; i < attr.value.length; i++) {
+        let value = attr.value[i]
+        if (value.type === 'Text') {
+          let same = value.raw === value.data
+          value.raw = sortClasses(value.raw, {
+            env,
+            ignoreFirst: i > 0 && !/^\s/.test(value.raw),
+            ignoreLast: i < attr.value.length - 1 && !/\s$/.test(value.raw),
+          })
+          value.data = same
+            ? value.raw
+            : sortClasses(value.data, {
+                env,
+                ignoreFirst: i > 0 && !/^\s/.test(value.data),
+                ignoreLast:
+                  i < attr.value.length - 1 && !/\s$/.test(value.data),
+              })
+        } else if (value.type === 'MustacheTag') {
+          visit(value.expression, {
+            Literal(node) {
+              if (isStringLiteral(node)) {
+                if (sortStringLiteral(node, { env })) {
+                  changes.push({ text: node.raw, loc: node.loc })
+                }
+              }
+            },
+            TemplateLiteral(node) {
+              if (sortTemplateLiteral(node, { env })) {
+                for (let quasi of node.quasis) {
+                  changes.push({ text: quasi.value.raw, loc: quasi.loc })
+                }
+              }
+            },
+          })
+        }
+      }
+    }
+  }
+
+  for (let child of ast.children ?? []) {
+    transformSvelte(child, { env, changes })
+  }
 }
 
 // https://lihautan.com/manipulating-ast-with-javascript/

src/index.js

@@ -5,6 +5,7 @@ const { execSync } = require('child_process')
 function format(str, options = {}) {
   return prettier
     .format(str, {
+      pluginSearchDirs: [__dirname], // disable plugin autoload
       plugins: [path.resolve(__dirname, '..')],
       semi: false,
       singleQuote: true,
@@ -134,6 +135,31 @@ let tests = {
   'babel-flow': javascript,
   espree: javascript,
   meriyah: javascript,
+  svelte: [
+    t`<div class="${yes}" />`,
+    t`<div class="${yes} {someVar}" />`,
+    t`<div class="{someVar} ${yes}" />`,
+    t`<div class="${yes} {someVar} ${yes}" />`,
+    t`<div class={'${yes}'} />`,
+    t`<div class={'${yes}' + '${yes}'} />`,
+    t`<div class={\`${yes}\`} />`,
+    t`<div class={\`${yes} \${'${yes}' + \`${yes}\`} ${yes}\`} />`,
+    t`<div class={\`${no}\${someVar}${no}\`} />`,
+    t`<div class="${yes} {\`${yes}\`}" />`,
+    [
+      `<div class="sm:block uppercase flex{someVar}" />`,
+      `<div class="uppercase sm:block flex{someVar}" />`,
+    ],
+    [
+      `<div class="{someVar}sm:block md:inline flex" />`,
+      `<div class="{someVar}sm:block flex md:inline" />`,
+    ],
+    [
+      `<div class="sm:p-0 p-0 {someVar}sm:block md:inline flex" />`,
+      `<div class="p-0 sm:p-0 {someVar}sm:block flex md:inline" />`,
+    ],
+    ['<div class={`sm:p-0\np-0`} />', '<div\n  class={`p-0\nsm:p-0`}\n/>'],
+  ],
 }
 
 describe('parsers', () => {