Pretty print using prettier

Author: mohsen1

.vscode/launch.json

@@ -7,10 +7,10 @@
             "env": {
                 "NODE_ENV": "test"
             },
-            "externalConsole": false,
+            "console": "internalConsole",
             "name": "Run Tests",
-            "outDir": "${workspaceRoot}/dist",
-            "preLaunchTask": "compile",
+            "outFiles": ["${workspaceRoot}/dist"],
+            "preLaunchTask": "tsc",
             "program": "${workspaceRoot}/node_modules/.bin/jest",
             "request": "launch",
             "runtimeArgs": [],

package.json

@@ -22,7 +22,7 @@
         "transform": {
             ".ts": "<rootDir>/node_modules/ts-jest/preprocessor.js"
         },
-        "testRegex": "test/runner.ts",
+        "testRegex": "(/tests/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
         "moduleFileExtensions": ["ts", "js"]
     },
     "lint-staged": {
@@ -34,22 +34,26 @@
     "dependencies": {
         "chalk": "^1.1.3",
         "commander": "^2.10.0",
+        "detect-indent": "^5.0.0",
         "glob": "^7.1.2",
         "lodash": "^4.17.4",
+        "prettier": "^1.10.2",
         "typescript": "^2.6.2"
     },
     "devDependencies": {
         "@types/chalk": "^0.4.31",
         "@types/commander": "^2.9.1",
+        "@types/detect-indent": "^5.0.0",
         "@types/glob": "^5.0.30",
         "@types/jest": "^20.0.2",
         "@types/lodash": "^4.14.93",
         "@types/node": "^8.0.2",
+        "@types/prettier": "^1.10.0",
         "@types/react": "^15.0.31",
+        "dedent": "^0.7.0",
         "husky": "^0.14.3",
         "jest": "^20.0.4",
         "lint-staged": "^6.0.1",
-        "prettier": "^1.10.2",
         "ts-jest": "^20.0.6",
         "ts-node": "^3.1.0",
         "tslint": "^5.2.0"

src/cli.ts

@@ -9,6 +9,16 @@ import { run } from '.';
 
 program
     .version('1.0.0')
+    .option('--arrow-parens <avoid|always>', 'Include parentheses around a sole arrow function parameter.', 'avoid')
+    .option('--no-bracket-spacing', 'Do not print spaces between brackets.', false)
+    .option('--jsx-bracket-same-line', 'Put > on the last line instead of at a new line.', false)
+    .option('--print-width <int>', 'The line length where Prettier will try wrap.', 80)
+    .option('--prose-wrap <always|never|preserve> How to wrap prose. (markdown)', 'preserve')
+    .option('--no-semi', 'Do not print semicolons, except at the beginning of lines which may need them', false)
+    .option('--single-quote', 'Use single quotes instead of double quotes.', false)
+    .option('--tab-width <int>', 'Number of spaces per indentation level.', 2)
+    .option('--trailing-comma <none|es5|all>', 'Print trailing commas wherever possible when multi-line.', 'none')
+    .option('--use-tabs', 'Indent with tabs instead of spaces.', false)
     .usage('[options] <filename or glob>')
     .command('* <glob>')
     .action(globPattern => {

src/compiler.ts

@@ -1,13 +1,22 @@
+import * as os from 'os';
+import * as fs from 'fs';
 import * as ts from 'typescript';
 import * as chalk from 'chalk';
+import * as _ from 'lodash';
+import * as prettier from 'prettier';
+import * as detectIndent from 'detect-indent';
 
 import { TransformFactoryFactory } from '.';
 
 /**
  * Compile and return result TypeScript
  * @param filePath Path to file to compile
  */
-export function compile(filePath: string, factoryFactories: TransformFactoryFactory[]) {
+export function compile(
+    filePath: string,
+    factoryFactories: TransformFactoryFactory[],
+    incomingPrettierOptions: prettier.Options = {},
+) {
     const compilerOptions: ts.CompilerOptions = {
         target: ts.ScriptTarget.ES2017,
         module: ts.ModuleKind.ES2015,
@@ -42,5 +51,69 @@ export function compile(filePath: string, factoryFactories: TransformFactoryFact
     const printer = ts.createPrinter();
 
     // TODO: fix the index 0 access... What if program have multiple source files?
-    return printer.printNode(ts.EmitHint.SourceFile, result.transformed[0], sourceFiles[0]);
+    const printed = printer.printNode(ts.EmitHint.SourceFile, result.transformed[0], sourceFiles[0]);
+
+    const inputSource = fs.readFileSync(filePath, 'utf-8');
+    const prettierOptions = getPrettierOptions(filePath, inputSource, incomingPrettierOptions);
+
+    return prettier.format(printed, incomingPrettierOptions);
+}
+
+/**
+ * Get Prettier options based on style of a JavaScript
+ * @param filePath Path to source file
+ * @param source Body of a JavaScript
+ * @param options Existing prettier option
+ */
+export function getPrettierOptions(filePath: string, source: string, options: prettier.Options): prettier.Options {
+    const resolvedOptions = prettier.resolveConfig.sync(filePath);
+    if (resolvedOptions) {
+        return resolvedOptions;
+    }
+    const { amount: indentAmount, type: indentType } = detectIndent(source);
+    const sourceWidth = getCodeWidth(source, 80);
+    const semi = getUseOfSemi(source);
+    const quotations = getQuotation(source);
+
+    _.defaults(options, {
+        tabWidth: indentAmount,
+        useTabs: indentType && indentType === 'tab',
+        printWidth: sourceWidth,
+        semi,
+        singleQuote: quotations === 'single',
+    });
+
+    return options;
+}
+
+/**
+ * Given body of a source file, return its code width
+ * @param source
+ */
+function getCodeWidth(source: string, defaultWidth: number): number {
+    return source.split(os.EOL).reduce((result, line) => Math.max(result, line.length), defaultWidth);
+}
+
+/**
+ * Detect if a source file is using semicolon
+ * @todo: use an actual parser. This is not a proper implementation
+ * @param source
+ * @return true if code is using semicolons
+ */
+function getUseOfSemi(source: string): boolean {
+    return source.indexOf(';') !== -1;
+}
+
+/**
+ * Detect if a source file is using single quotes or double quotes
+ * @todo use an actual parser. This is not a proper implementation
+ * @param source
+ */
+function getQuotation(source: string): 'single' | 'double' {
+    const numberOfSingleQuotes = (source.match(/\'/g) || []).length;
+    const numberOfDoubleQuotes = (source.match(/\"/g) || []).length;
+    if (numberOfSingleQuotes > numberOfDoubleQuotes) {
+        return 'single';
+    }
+    return 'double';
 }

src/untyped-modules.d.ts

@@ -0,0 +1 @@
+declare module 'dedent';

test/collapse-intersection-interfaces-transform/advanced/output.tsx

@@ -1,7 +1,7 @@
 type Foo = {
-    foo: string;
-    stuff: boolean;
-    other: () => void;
-    bar: number;
-    [key: string]: number;
+  foo: string,
+  stuff: boolean,
+  other: () => void,
+  bar: number,
+  [key: string]: number
 };

test/collapse-intersection-interfaces-transform/empty-empty/output.tsx

@@ -1,2 +1 @@
-type Foo = {
-};
+type Foo = {};

test/collapse-intersection-interfaces-transform/multiple/output.tsx

@@ -1,8 +1,8 @@
 type Foo = {
-    foo: string;
-    bar: number;
+  foo: string,
+  bar: number
 };
 type Bar = {
-    foo: number;
-    bar: string;
+  foo: number,
+  bar: string
 };

test/collapse-intersection-interfaces-transform/simple/output.tsx

@@ -1,4 +1,4 @@
 type Foo = {
-    foo: string;
-    bar: number;
+  foo: string,
+  bar: number
 };

test/end-to-end/basic/output.tsx

@@ -1,8 +1,6 @@
-import * as React from 'react';
-export default class MyComponent extends React.Component<{
-    }, {
-    }> {
-    render() {
-        return <div />;
-    }
+import * as React from "react";
+export default class MyComponent extends React.Component<{}, {}> {
+  render() {
+    return <div />;
+  }
 }

test/end-to-end/initial-state-and-proprypes-and-set-state/output.tsx

@@ -1,18 +1,21 @@
-import * as React from 'react';
+import * as React from "react";
 type MyComponentProps = {
-    baz: string;
+  baz: string
 };
 type MyComponentState = {
-    dynamicState: number;
-    foo: number;
-    bar: string;
+  dynamicState: number,
+  foo: number,
+  bar: string
 };
-export default class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
-    state = { foo: 1, bar: 'str' };
-    render() {
-        return <div />;
-    }
-    otherFn() {
-        this.setState({ dynamicState: 42 });
-    }
+export default class MyComponent extends React.Component<
+  MyComponentProps,
+  MyComponentState
+> {
+  state = { foo: 1, bar: "str" };
+  render() {
+    return <div />;
+  }
+  otherFn() {
+    this.setState({ dynamicState: 42 });
+  }
 }

test/end-to-end/initial-state-and-proprypes/output.tsx

@@ -1,14 +1,17 @@
-import * as React from 'react';
+import * as React from "react";
 type MyComponentProps = {
-    baz: string;
+  baz: string
 };
 type MyComponentState = {
-    foo: number;
-    bar: string;
+  foo: number,
+  bar: string
 };
-export default class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
-    state = { foo: 1, bar: 'str' };
-    render() {
-        return <div />;
-    }
+export default class MyComponent extends React.Component<
+  MyComponentProps,
+  MyComponentState
+> {
+  state = { foo: 1, bar: "str" };
+  render() {
+    return <div />;
+  }
 }

test/end-to-end/multiple-components/output.tsx

@@ -1,34 +1,35 @@
 type HelloProps = {
-    message?: string;
+  message?: string
 };
 const Hello: React.SFC<HelloProps> = ({ message }) => {
-    return <div>hello {message}</div>;
+  return <div>hello {message}</div>;
 };
 type HeyProps = {
-    message?: string;
+  message?: string
 };
 const Hey: React.SFC<HeyProps> = ({ name }) => {
-    return <div>hey, {name}</div>;
+  return <div>hey, {name}</div>;
 };
 type MyComponentState = {
-    foo: number;
-    bar: number;
+  foo: number,
+  bar: number
 };
-export default class MyComponent extends React.Component<{
-    }, MyComponentState> {
-    render() {
-        return <button onClick={this.onclick.bind(this)}/>;
-    }
-    onclick() {
-        this.setState({ foo: 1, bar: 2 });
-    }
+export default class MyComponent extends React.Component<{}, MyComponentState> {
+  render() {
+    return <button onClick={this.onclick.bind(this)} />;
+  }
+  onclick() {
+    this.setState({ foo: 1, bar: 2 });
+  }
 }
 type AnotherComponentProps = {
-    foo: string;
+  foo: string
 };
-export class AnotherComponent extends React.Component<AnotherComponentProps, {
-    }> {
-    render() {
-        return <div />;
-    }
+export class AnotherComponent extends React.Component<
+  AnotherComponentProps,
+  {}
+> {
+  render() {
+    return <div />;
+  }
 }

test/end-to-end/non-react/output.tsx

@@ -1,9 +1,8 @@
 class Foo {
-    render() {
-        return '100';
-    }
+  render() {
+    return "100";
+  }
 }
 class Bar extends Foo {
-    baz() {
-    }
+  baz() {}
 }

test/end-to-end/stateless-arrow-function/output.tsx

@@ -1,6 +1,6 @@
 type HelloProps = {
-    message?: string;
+  message?: string
 };
 const Hello: React.SFC<HelloProps> = ({ message }) => {
-    return <div>hello {message}</div>;
+  return <div>hello {message}</div>;
 };

test/end-to-end/stateless-function/output.tsx

@@ -1,6 +1,6 @@
 type HelloProps = {
-    message?: string;
+  message?: string
 };
 export const Hello: React.SFC<HelloProps> = ({ message }) => {
-    return <div>hello {message}</div>;
+  return <div>hello {message}</div>;
 };