Add support for prettier 3

We still support prettier2, but we now accept prettier3 as a peer dependency as well.

Fixes #87
Fixes #194

Author: charlespwd

.github/workflows/ci.yml

@@ -11,8 +11,12 @@ jobs:
       matrix:
         os: [windows-latest, ubuntu-latest]
         node-version: [16.x, 17.x]
+        prettier-major: [2, 3]
 
-    name: OS ${{ matrix.os }} / NodeJS ${{ matrix.node-version }}
+    name: OS ${{ matrix.os }} / NodeJS ${{ matrix.node-version }} / Prettier ${{ matrix.prettier-major }}
+
+    env:
+      PRETTIER_MAJOR: ${{ matrix.prettier-major }}
 
     steps:
       - uses: actions/checkout@v2

.husky/pre-commit

@@ -1,4 +1,15 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx pretty-quick --staged --pattern 'src/**/*.ts'
+cleanup() {
+  rm node_modules/prettier
+}
+
+# format with prettier2
+ln -s ./prettier2 node_modules/prettier
+
+# cleanup when done
+trap cleanup EXIT
+
+# pretty-quick on code base
+pretty-quick --staged --pattern 'src/**/*.ts'

.mocharc.json

@@ -1,4 +1,4 @@
 {
-  "require": ["./build/shims", "ts-node/register/transpile-only", "tsconfig-paths/register"],
+  "require": ["./build/shims", "./test/test-setup", "ts-node/register/transpile-only", "tsconfig-paths/register"],
   "reporter": "spec"
 }

package.json

@@ -40,7 +40,9 @@
     "prerelease": "scripts/prerelease",
     "prettier": "prettier --plugin . --parser=liquid-html",
     "test": "node_modules/.bin/mocha '{src,test}/**/*.spec.ts'",
+    "test:3": "cross-env PRETTIER_MAJOR=3 yarn test",
     "test:idempotence": "cross-env TEST_IDEMPOTENCE=true node_modules/.bin/mocha 'test/**/*.spec.ts'",
+    "test:idempotence:3": "cross-env PRETTIER_MAJOR=3 yarn test:idempotence",
     "type-check": "tsc --noEmit"
   },
   "peerDependencies": {
@@ -58,8 +60,10 @@
     "cross-env": "^7.0.3",
     "husky": "^7.0.0",
     "mocha": "^9.1.3",
+    "module-alias": "^2.2.3",
     "nyc": "^15.1.0",
-    "prettier": "^2.6.1",
+    "prettier2": "npm:prettier@^2.6.1",
+    "prettier3": "npm:prettier@^3.0.0",
     "pretty-quick": "^3.1.3",
     "source-map-support": "^0.5.21",
     "ts-node": "^10.4.0",

src/index.ts

@@ -1,11 +1,13 @@
 import {
-  Plugin,
   RequiredOptions,
   SupportLanguage,
   SupportOptions,
+  version,
 } from 'prettier';
+import type { Plugin as Plugin2 } from 'prettier';
+import type { Plugin as Plugin3 } from 'prettier3';
 import { parsers, liquidHtmlLanguageName } from '~/parser';
-import { printers } from '~/printer';
+import { printers2, printers3 } from '~/printer';
 import { LiquidHtmlNode } from '~/types';
 
 const languages: SupportLanguage[] = [
@@ -50,16 +52,26 @@ const options: SupportOptions = {
   },
 };
 
-const defaultOptions: Partial<RequiredOptions> = {
+const defaultOptions = {
   printWidth: 120,
 };
 
-const plugin: Plugin<LiquidHtmlNode> = {
+const plugin2: Plugin2<LiquidHtmlNode> = {
   languages,
-  parsers,
-  printers,
+  parsers: parsers as Plugin2['parsers'],
+  printers: printers2,
   options,
   defaultOptions,
 };
 
-export = plugin;
+const plugin3: Plugin3<LiquidHtmlNode> = {
+  languages,
+  parsers: parsers as Plugin3['parsers'],
+  printers: printers3 as any,
+  options,
+  defaultOptions,
+};
+
+const prettierMajor = version.split('.')[0]!;
+
+export = prettierMajor === '2' ? plugin2 : plugin3;

src/parser/index.ts

@@ -1,5 +1,4 @@
 import {
-  Parsers,
   liquidHtmlParser,
   liquidHtmlAstFormat,
   liquidHtmlLanguageName,
@@ -9,6 +8,6 @@ export * from '~/parser/stage-2-ast';
 
 export { liquidHtmlLanguageName, liquidHtmlAstFormat };
 
-export const parsers: Parsers = {
+export const parsers = {
   [liquidHtmlLanguageName]: liquidHtmlParser,
 };

src/parser/parser.ts

@@ -1,26 +1,17 @@
-import { Parser, ParserOptions } from 'prettier';
 import { locEnd, locStart } from '~/utils';
 import { toLiquidHtmlAST, LiquidHtmlNode } from '~/parser/stage-2-ast';
 
-export function parse(
-  text: string,
-  _parsers: Parsers,
-  _opts: ParserOptions<LiquidHtmlNode>,
-): LiquidHtmlNode {
+export function parse(text: string): LiquidHtmlNode {
   return toLiquidHtmlAST(text);
 }
 
 export const liquidHtmlAstFormat = 'liquid-html-ast';
 
 export const liquidHtmlLanguageName = 'liquid-html';
 
-export const liquidHtmlParser: Parser<LiquidHtmlNode> = {
+export const liquidHtmlParser = {
   parse,
   astFormat: liquidHtmlAstFormat,
   locStart,
   locEnd,
 };
-
-export interface Parsers {
-  [languageName: string]: Parser;
-}

src/parser/stage-1-cst.ts

@@ -438,7 +438,7 @@ export interface ConcreteNumberLiteral
 export interface ConcreteLiquidLiteral
   extends ConcreteBasicNode<ConcreteNodeTypes.LiquidLiteral> {
   keyword: keyof typeof LiquidLiteralValues;
-  value: typeof LiquidLiteralValues[keyof typeof LiquidLiteralValues];
+  value: (typeof LiquidLiteralValues)[keyof typeof LiquidLiteralValues];
 }
 
 export interface ConcreteLiquidRange

src/printer/embed.ts

@@ -1,4 +1,6 @@
-import { Printer, doc } from 'prettier';
+import { doc } from 'prettier';
+import type { Printer as Printer2 } from 'prettier';
+import type { Doc as Doc3, Printer as Printer3 } from 'prettier3';
 import { RawMarkupKinds } from '~/parser';
 import { LiquidHtmlNode, LiquidParserOptions, NodeTypes } from '~/types';
 
@@ -13,7 +15,10 @@ export const ParserMap: { [key in RawMarkupKinds]: string | null } = {
   [RawMarkupKinds.text]: null,
 };
 
-export const embed: Printer<LiquidHtmlNode>['embed'] = (
+// Prettier 2 and 3 have a slightly different API for embed.
+//
+// https://github.com/prettier/prettier/wiki/How-to-migrate-my-plugin-to-support-Prettier-v3%3F
+export const embed2: Printer2<LiquidHtmlNode>['embed'] = (
   path,
   _print,
   textToDoc,
@@ -27,7 +32,8 @@ export const embed: Printer<LiquidHtmlNode>['embed'] = (
         return doc.utils.stripTrailingHardline(
           textToDoc(node.value, {
             ...options,
-            singleQuote: (options as LiquidParserOptions).embeddedSingleQuote,
+            singleQuote: (options as any as LiquidParserOptions)
+              .embeddedSingleQuote,
             parser,
             __embeddedInHtml: true,
           }),
@@ -38,3 +44,26 @@ export const embed: Printer<LiquidHtmlNode>['embed'] = (
       return null;
   }
 };
+
+export const embed3: Printer3<LiquidHtmlNode>['embed'] = (path, options) => {
+  return (textToDoc) => {
+    const node = path.node as LiquidHtmlNode;
+    switch (node.type) {
+      case NodeTypes.RawMarkup: {
+        const parser = ParserMap[node.kind];
+        if (parser && node.value.trim() !== '') {
+          return textToDoc(node.value, {
+            ...options,
+            singleQuote: (options as LiquidParserOptions).embeddedSingleQuote,
+            parser,
+            __embeddedInHtml: true,
+          }).then((document) =>
+            doc.utils.stripTrailingHardline(document),
+          ) as Promise<Doc3>;
+        }
+      }
+      default:
+        return undefined;
+    }
+  };
+};

src/printer/index.ts

@@ -1,6 +1,13 @@
-import { printerLiquidHtml } from '~/printer/printer-liquid-html';
+import {
+  printerLiquidHtml2,
+  printerLiquidHtml3,
+} from '~/printer/printer-liquid-html';
 import { liquidHtmlAstFormat } from '~/parser';
 
-export const printers = {
-  [liquidHtmlAstFormat]: printerLiquidHtml,
+export const printers2 = {
+  [liquidHtmlAstFormat]: printerLiquidHtml2,
+};
+
+export const printers3 = {
+  [liquidHtmlAstFormat]: printerLiquidHtml3,
 };