Support passing babel plugin configuration in JSON

README.md

@@ -74,6 +74,8 @@ import ExampleView from './ExampleView';
 #### `experimentalBabelParserPluginsList`
 A collection of parser names for babel parser. The plugin passes this list to babel parser so it can understand the syntaxes used in the file being formatted. The plugin uses prettier itself to figure out the parser it needs to use but if that fails, you can use this field to enforce the usage of the plugins babel needs.
 
+Since prettier options are limited to strings, you can pass plugins with options as a JSON string of the plugin array: `"[\"plugin-name\", { \"pluginOption\": true }]"`.
+
 ```ecmascript 6
 module.exports = {
   "printWidth": 80,
@@ -85,7 +87,7 @@ module.exports = {
   "importOrder": ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
   "importOrderSeparation": true,
   "importOrderCaseInsensitive": true,
-  "experimentalBabelParserPluginsList" : ["jsx", "typescript"]
+  "experimentalBabelParserPluginsList" : ["jsx", "typescript", "[\"decorators\", { \"decoratorsBeforeExport\": true }]"]
 }
 ```
 

src/constants.ts

@@ -3,8 +3,6 @@ import { expressionStatement, stringLiteral } from '@babel/types';
 
 export const flow: ParserPlugin = 'flow';
 export const typescript: ParserPlugin = 'typescript';
-export const decoratorsLegacy: ParserPlugin = 'decorators-legacy';
-export const classProperties: ParserPlugin = 'classProperties';
 export const jsx: ParserPlugin = 'jsx';
 
 export const newLineCharacters = '\n\n';

src/preprocessor.ts

@@ -6,6 +6,7 @@ import { getCodeFromAst } from './utils/get-code-from-ast';
 import { getSortedNodes } from './utils/get-sorted-nodes';
 import { getParserPlugins } from './utils/get-parser-plugins';
 import { PrettierOptions } from './types';
+import { getExperimentalParserPlugins } from './utils/get-experimental-parser-plugins';
 
 export function preprocessor(code: string, options: PrettierOptions) {
     const {
@@ -17,12 +18,13 @@ export function preprocessor(code: string, options: PrettierOptions) {
     } = options;
 
     const plugins = getParserPlugins(prettierParser);
+    const parsedExperimentalBabelParserPluginsList = getExperimentalParserPlugins(experimentalBabelParserPluginsList);
 
     const importNodes: ImportDeclaration[] = [];
 
     const parserOptions: ParserOptions = {
         sourceType: 'module',
-        plugins: [...plugins, ...experimentalBabelParserPluginsList],
+        plugins: [...plugins, ...parsedExperimentalBabelParserPluginsList],
     };
 
     const ast = babelParser(code, parserOptions);

src/types.ts

@@ -1,9 +1,8 @@
 import { RequiredOptions } from 'prettier';
-import { ParserPlugin } from '@babel/parser';
 
 export interface PrettierOptions extends RequiredOptions {
     importOrder: string[];
     importOrderSeparation: boolean;
     importOrderCaseInsensitive: boolean;
-    experimentalBabelParserPluginsList: ParserPlugin[];
+    experimentalBabelParserPluginsList: string[]; // should be of type ParserPlugin from '@babel/parser' but prettier does not support nested arrays in options
 }

src/utils/__tests__/get-experimental-parser-plugins.spec.ts

@@ -0,0 +1,24 @@
+import { getExperimentalParserPlugins } from '../get-experimental-parser-plugins';
+
+test('it should return empty list', () => {
+    expect(getExperimentalParserPlugins([])).toEqual([]);
+});
+
+test('it should return flow and decorators', () => {
+    expect(getExperimentalParserPlugins(['flow', 'decorators'])).toEqual(['flow', 'decorators']);
+});
+
+test('it should return decorators with parsed options', () => {
+    expect(getExperimentalParserPlugins(["[\"decorators\", { \"decoratorsBeforeExport\": true }]"]))
+        .toEqual([['decorators', { decoratorsBeforeExport: true }]]);
+});
+
+test('it should return decorators with parsed options', () => {
+    expect(getExperimentalParserPlugins(['flow', "[\"decorators\", { \"decoratorsBeforeExport\": true }]"]))
+        .toEqual(['flow', ['decorators', { decoratorsBeforeExport: true }]]);
+});
+
+test('it should throw an Error for invalid JSON', () => {
+    expect(() => getExperimentalParserPlugins(['flow', "[\"decorators\", { decoratorsBeforeExport: true }]"]))
+        .toThrowError("Invalid JSON in experimentalBabelParserPluginsList: ");
+});

src/utils/__tests__/get-parser-plugins.spec.ts

@@ -14,10 +14,5 @@ test('it should return flow', () => {
 });
 
 test('it should return ts related plugins', () => {
-    expect(getParserPlugins('typescript')).toEqual([
-        'typescript',
-        'jsx',
-        'decorators-legacy',
-        'classProperties',
-    ]);
+    expect(getParserPlugins('typescript')).toEqual(['typescript', 'jsx']);
 });

src/utils/get-experimental-parser-plugins.ts

@@ -0,0 +1,27 @@
+import { ParserPlugin, ParserPluginWithOptions } from '@babel/parser';
+
+/**
+ * Returns a list of babel parser plugin names
+ * @param experimentalBabelParserPluginsList array of experimental babel parser plugins
+ * @returns list of parser plugins to be passed to babel parser
+ */
+export const getExperimentalParserPlugins = (experimentalBabelParserPluginsList: string[]): ParserPlugin[] => {
+    return experimentalBabelParserPluginsList.map(pluginNameOrJson => {
+        // ParserPlugin can be either a string or and array of [name: string, options: object]
+        // in prettier options the array will be sent in a JSON string
+        const isParserPluginWithOptions = pluginNameOrJson.startsWith("[");
+
+        let plugin;
+        if (isParserPluginWithOptions) {
+            try {
+                plugin = JSON.parse(pluginNameOrJson) as ParserPluginWithOptions;
+            } catch (e) {
+                throw Error("Invalid JSON in experimentalBabelParserPluginsList: " + pluginNameOrJson);
+            }
+        } else {
+            plugin = pluginNameOrJson as ParserPlugin;
+        }
+
+        return plugin;
+    });
+};

src/utils/get-parser-plugins.ts

@@ -3,8 +3,6 @@ import { RequiredOptions } from 'prettier';
 import {
     flow,
     typescript,
-    decoratorsLegacy,
-    classProperties,
     jsx,
 } from '../constants';
 
@@ -20,9 +18,7 @@ export const getParserPlugins = (
     const isTypescript = prettierParser === typescript;
 
     // In case of typescript as prettier parser, we pass the following
-    // decoratorsLegacy, classProperties are passed in case of angular
-    // projects.
-    const tsPlugins = [typescript, jsx, decoratorsLegacy, classProperties];
+    const tsPlugins = [typescript, jsx];
 
     return [...(isFlow ? [flow] : []), ...(isTypescript ? tsPlugins : [])];
 };

tests/Typescript/ppsi.spec.js

@@ -1,4 +1,5 @@
 run_spec(__dirname, ["typescript"], {
     importOrder: ['^@core/(.*)$', '^@server/(.*)', '^@ui/(.*)$', '^[./]'],
     importOrderSeparation: true,
+    experimentalBabelParserPluginsList : ["classProperties", "[\"decorators\", { \"decoratorsBeforeExport\": true }]"]
 });