From 5b06aefdc14c08bedaa48016662ee2514f63606d Mon Sep 17 00:00:00 2001 From: "De Laet Robby (External)" Date: Tue, 24 Jul 2018 17:20:08 +0200 Subject: [PATCH] feat(stark-ui): add Prettier and use it for all the supported types of data ISSUES CLOSED: #500 --- packages/rollup.config.common-data.js | 5 + packages/stark-build/config/webpack.common.js | 3 +- packages/stark-ui/package.json | 1 + .../components/pretty-print.component.spec.ts | 330 ++++++++++++------ .../components/pretty-print.component.ts | 124 ++++--- 5 files changed, 310 insertions(+), 153 deletions(-) diff --git a/packages/rollup.config.common-data.js b/packages/rollup.config.common-data.js index 7da713dc97..5b297c5f83 100644 --- a/packages/rollup.config.common-data.js +++ b/packages/rollup.config.common-data.js @@ -44,6 +44,11 @@ const globals = { ibantools: "ibantools", moment: "moment", nouislider: "nouislider", + "prettier/standalone": "prettier.standalone", + "prettier/parser-babylon": "prettier.parserBabylon", + "prettier/parser-postcss": "prettier.parserPostcss", + "prettier/parser-typescript": "prettier.parserTypescript", + "pretty-data": "prettyData", prismjs: "Prism", "prismjs/components/prism-typescript.min.js": "Prism.languages.typescript", "prismjs/components/prism-sql.min.js": "Prism.languages.sql", diff --git a/packages/stark-build/config/webpack.common.js b/packages/stark-build/config/webpack.common.js index ae3f9398b0..d1a1f7a0d7 100644 --- a/packages/stark-build/config/webpack.common.js +++ b/packages/stark-build/config/webpack.common.js @@ -208,7 +208,8 @@ module.exports = options => { /\.ngfactory\.js$/, /\.ngstyle\.js$/, helpers.root("node_modules/rxjs-compat"), - helpers.root("node_modules/@ng-idle") + helpers.root("node_modules/@ng-idle"), + helpers.root("node_modules/prettier") ] }, diff --git a/packages/stark-ui/package.json b/packages/stark-ui/package.json index 8a5c282a5f..1bdb95d80a 100644 --- a/packages/stark-ui/package.json +++ b/packages/stark-ui/package.json @@ -30,6 +30,7 @@ "@types/nouislider": "9.0.4", "@types/prismjs": "1.9.0", "nouislider": "11.1.0", + "prettier": "1.13.7", "pretty-data": "0.40.0", "prismjs": "1.15.0" }, diff --git a/packages/stark-ui/src/modules/pretty-print/components/pretty-print.component.spec.ts b/packages/stark-ui/src/modules/pretty-print/components/pretty-print.component.spec.ts index c50d1ce4bd..e47290897f 100644 --- a/packages/stark-ui/src/modules/pretty-print/components/pretty-print.component.spec.ts +++ b/packages/stark-ui/src/modules/pretty-print/components/pretty-print.component.spec.ts @@ -1,5 +1,4 @@ -/* tslint:disable:completed-docs no-big-function */ - +/* tslint:disable:completed-docs no-big-function no-duplicate-string */ import { async, ComponentFixture, TestBed } from "@angular/core/testing"; import { Component, ViewChild } from "@angular/core"; @@ -60,16 +59,16 @@ describe("PrettyPrintComponent", () => { ].join(""); const formattedCssData: string = [ - "body{", - " background: #D2DA9C url(leftcolbg.jpg)repeat-y left top;", - " color: #FFF;", + "body {", + " background: #d2da9c url(leftcolbg.jpg) repeat-y left top;", + " color: #fff;", "}", - "p{", - " margin-bottom:1em", + "p {", + " margin-bottom: 1em;", "}", - "ul{", - " margin-left:20px;", - " margin-bottom:1em", + "ul {", + " margin-left: 20px;", + " margin-bottom: 1em;", "}\n" // an extra line break is added at the end ].join("\n"); // should contain line breaks @@ -79,10 +78,10 @@ describe("PrettyPrintComponent", () => { const formattedScssData: string = [ "$font-stack: Helvetica, sans-serif;", - " $primary-color: #333;", - " body {", - " font: 100% $font-stack;", - " color: $primary-color;", + "$primary-color: #333;", + "body {", + " font: 100% $font-stack;", + " color: $primary-color;", "}\n" // an extra line break is added at the end ].join("\n"); // should contain line breaks @@ -92,7 +91,6 @@ describe("PrettyPrintComponent", () => { "AND pm.Name LIKE 'Long-Sleeve Logo Jersey%')" ].join(""); - /* tslint:disable: no-duplicate-string */ const formattedSqlData: string = [ "SELECT DISTINCT Name", "FROM Production.Product AS p", @@ -102,8 +100,7 @@ describe("PrettyPrintComponent", () => { " WHERE p.ProductModelID = pm.ProductModelID", " AND pm.Name LIKE 'Long-Sleeve Logo Jersey%')" ].join("\n"); // should contain line breaks - /* tslint:enable: no-duplicate-string */ - + const rawJsonData: string = [ '{"menu": { "id": "file", "value": "File",', '"menuitem": [{"value": "New", "onclick": "CreateNewDoc()"},', @@ -117,52 +114,61 @@ describe("PrettyPrintComponent", () => { ' "id": "file",', ' "value": "File",', ' "menuitem": [', - " {", - ' "value": "New",', - ' "onclick": "CreateNewDoc()"', - " },", - " {", - ' "value": "Open",', - ' "onclick": "OpenDoc()"', - " },", - " {", - ' "value": "Close",', - ' "onclick": "CloseDoc()"', - " }", + ' { "value": "New", "onclick": "CreateNewDoc()" },', + ' { "value": "Open", "onclick": "OpenDoc()" },', + ' { "value": "Close", "onclick": "CloseDoc()" }', " ]", " }", - "}" + "}\n" // an extra line break is added at the end ].join("\n"); // should contain line breaks - const rawJavaScriptData: string = [ - "function calculateData(seed, operationFn) {" + - "var data = operationFn(seed);" + - "if (!data){" + - "data = 'could not calculate data';" + - "}" + - "return data;" + - "}" + const rawJavascriptData: string = [ + "function calculateData(seed, operationFn) {", + "var data = operationFn(seed);", + "if (!data){", + "data = 'could not calculate data';", + "}", + "return data;", + "}" ].join(""); - const rawTypeScriptData: string = [ - "function calculateData(seed:any, operationFn:Function):any {" + - "var data:any = operationFn(seed);" + - "if (!data){" + - "data = 'could not calculate data';" + - "}" + - "return data;" + - "}" + const formattedJavascriptData: string = [ + "function calculateData(seed, operationFn) {", + " var data = operationFn(seed);", + " if (!data) {", + ' data = "could not calculate data";', + " }", + " return data;", + "}\n" // an extra line break is added at the end + ].join("\n"); + + const rawTypescriptData: string = [ + "function calculateData(seed:any, operationFn:Function):any {", + "var data:any = operationFn(seed);", + "if (!data){", + "data = 'could not calculate data';", + "}", + "return data;", + "}" ].join(""); + const formattedTypescriptData: string = [ + "function calculateData(seed: any, operationFn: Function): any {", + " var data: any = operationFn(seed);", + " if (!data) {", + ' data = "could not calculate data";', + " }", + " return data;", + "}\n" // an extra line break is added at the end + ].join("\n"); + /** * async beforeEach */ beforeEach(async(() => { return TestBed.configureTestingModule({ declarations: [StarkPrettyPrintComponent, TestHostComponent], - providers: [ - { provide: STARK_LOGGING_SERVICE, useValue: new MockStarkLoggingService() }, - ] + providers: [{ provide: STARK_LOGGING_SERVICE, useValue: new MockStarkLoggingService() }] }).compileComponents(); })); @@ -248,8 +254,22 @@ describe("PrettyPrintComponent", () => { const preElement: HTMLPreElement | null = hostFixture.nativeElement.querySelector("pre"); expect(preElement).not.toBeNull(); expect(preElement.innerHTML).toContain("body"); - expect(preElement.innerHTML).toContain("color: #FFF;"); - expect(preElement.innerHTML).toContain("margin-left:20px;"); + expect(preElement.innerHTML).toContain("color: #fff;"); + expect(preElement.innerHTML).toContain("margin-left: 20px;"); + }); + + it("should simply display the unformatted raw CSS data in case it is not valid CSS", () => { + const invalidRawCssData: string = rawCssData + "}"; + + hostComponent.data = invalidRawCssData; + hostComponent.format = "css"; + hostFixture.detectChanges(); + + expect(component.prettyString).toBe(invalidRawCssData); + + const preElement: HTMLPreElement | null = hostFixture.nativeElement.querySelector("pre"); + expect(preElement).not.toBeNull(); + expect(preElement.innerHTML).toContain("p{margin-bottom:1em}ul{margin-left:20px;margin-bottom:1em}"); }); }); @@ -275,6 +295,20 @@ describe("PrettyPrintComponent", () => { expect(preElement.innerHTML).toContain("$primary-color: #333;"); expect(preElement.innerHTML).toContain("font: 100% $font-stack;"); }); + + it("should simply display the unformatted raw SCSS data in case it is not valid SCSS", () => { + const invalidRawScssData: string = rawScssData + "}"; + + hostComponent.data = invalidRawScssData; + hostComponent.format = "scss"; + hostFixture.detectChanges(); + + expect(component.prettyString).toBe(invalidRawScssData); + + const preElement: HTMLPreElement | null = hostFixture.nativeElement.querySelector("pre"); + expect(preElement).not.toBeNull(); + expect(preElement.innerHTML).toContain("$primary-color: #333; body { font: 100% $font-stack;"); + }); }); describe("SQL", () => { @@ -295,11 +329,9 @@ describe("PrettyPrintComponent", () => { const preElement: HTMLPreElement | null = hostFixture.nativeElement.querySelector("pre"); expect(preElement).not.toBeNull(); - /* tslint:disable: no-duplicate-string */ expect(preElement.innerHTML).toContain("FROM Production.Product AS p"); expect(preElement.innerHTML).toContain("FROM Production.ProductModel AS pm"); expect(preElement.innerHTML).toContain("AND pm.Name LIKE 'Long-Sleeve Logo Jersey%'"); - /* tslint:enable: no-duplicate-string */ }); }); @@ -342,102 +374,128 @@ describe("PrettyPrintComponent", () => { }); }); - describe("JavaScript", () => { + describe("Javascript", () => { beforeEach(() => { - hostComponent.data = rawJavaScriptData; + hostComponent.data = rawJavascriptData; hostComponent.format = "javascript"; hostFixture.detectChanges(); }); it(shouldHaveInputs, () => { - expect(component.data).toBe(rawJavaScriptData); + expect(component.data).toBe(rawJavascriptData); expect(component.format).toBe("javascript"); expect(component.enableHighlighting).toBeUndefined(); }); - it("should leave the raw JavaScript data unformatted (JS formatting not yet supported)", () => { - expect(component.prettyString).toBe(rawJavaScriptData); + it("should nicely format raw javascript data", () => { + expect(component.prettyString).toBe(formattedJavascriptData); const preElement: HTMLPreElement | null = hostFixture.nativeElement.querySelector("pre"); expect(preElement).not.toBeNull(); - expect(preElement.innerHTML).toContain("function calculateData(seed, operationFn) {var data = operationFn(seed);"); + expect(preElement.innerHTML).toContain("function calculateData(seed, operationFn) {"); + expect(preElement.innerHTML).toContain("var data = operationFn(seed);"); + expect(preElement.innerHTML).toContain("if (!data) {"); + }); + + it("should simply display the unformatted raw javascript data in case it is not valid javascript", () => { + const invalidRawJavascriptData: string = rawJavascriptData + "}"; + + hostComponent.data = invalidRawJavascriptData; + hostComponent.format = "javascript"; + hostFixture.detectChanges(); + + expect(component.prettyString).toBe(invalidRawJavascriptData); + + const preElement: HTMLPreElement | null = hostFixture.nativeElement.querySelector("pre"); + expect(preElement).not.toBeNull(); + expect(preElement.innerHTML).toContain("if (!data){data = 'could not calculate data';}return data;"); }); }); - describe("TypeScript", () => { + describe("Typescript", () => { beforeEach(() => { - hostComponent.data = rawTypeScriptData; + hostComponent.data = rawTypescriptData; hostComponent.format = "typescript"; hostFixture.detectChanges(); }); it(shouldHaveInputs, () => { - expect(component.data).toBe(rawTypeScriptData); + expect(component.data).toBe(rawTypescriptData); expect(component.format).toBe("typescript"); expect(component.enableHighlighting).toBeUndefined(); }); - it("should leave the raw TypeScript data unformatted (TS formatting not yet supported)", () => { - expect(component.prettyString).toBe(rawTypeScriptData); + it("should nicely format raw typescript data", () => { + expect(component.prettyString).toBe(formattedTypescriptData); const preElement: HTMLPreElement | null = hostFixture.nativeElement.querySelector("pre"); expect(preElement).not.toBeNull(); - /* tslint:disable: no-duplicate-string */ - expect(preElement.innerHTML).toContain("function calculateData(seed:any, operationFn:Function):any"); - /* tslint:enable: no-duplicate-string */ + expect(preElement.innerHTML).toContain("function calculateData(seed: any, operationFn: Function): any {"); + expect(preElement.innerHTML).toContain("var data: any = operationFn(seed);"); + expect(preElement.innerHTML).toContain("if (!data) {"); + }); + + it("should simply display the unformatted raw typescript data in case it is not valid typescript", () => { + const invalidRawTypescriptData: string = rawTypescriptData + "}"; + + hostComponent.data = invalidRawTypescriptData; + hostComponent.format = "typescript"; + hostFixture.detectChanges(); + + expect(component.prettyString).toBe(invalidRawTypescriptData); + + const preElement: HTMLPreElement | null = hostFixture.nativeElement.querySelector("pre"); + expect(preElement).not.toBeNull(); + expect(preElement.innerHTML).toContain("if (!data){data = 'could not calculate data';}return data;"); }); }); describe("Undefined format", () => { beforeEach(() => { - hostComponent.data = rawTypeScriptData; + hostComponent.data = rawTypescriptData; hostComponent.format = undefined; hostFixture.detectChanges(); }); it(shouldHaveInputs, () => { - expect(component.data).toBe(rawTypeScriptData); + expect(component.data).toBe(rawTypescriptData); expect(component.format).toBeUndefined(); expect(component.enableHighlighting).toBeUndefined(); }); - /* tslint:disable: no-identical-functions */ // the same test is performed an unkowm format + // the same test is performed with an unknown format + // tslint:disable-next-line: no-identical-functions it("should leave the raw data unformatted when the format is not defined", () => { - expect(component.prettyString).toBe(rawTypeScriptData); + expect(component.prettyString).toBe(rawTypescriptData); const preElement: HTMLPreElement | null = hostFixture.nativeElement.querySelector("pre"); expect(preElement).not.toBeNull(); - /* tslint:disable: no-duplicate-string */ expect(preElement.innerHTML).toContain("function calculateData(seed:any, operationFn:Function):any"); - /* tslint:enable: no-duplicate-string */ }); - /* tslint:enable: no-identical-functions */ }); describe("Unknown Format string", () => { beforeEach(() => { - hostComponent.data = rawTypeScriptData; + hostComponent.data = rawTypescriptData; hostComponent.format = "UnknownFormat"; hostFixture.detectChanges(); }); it(shouldHaveInputs, () => { - expect(component.data).toBe(rawTypeScriptData); + expect(component.data).toBe(rawTypescriptData); expect(component.format).toBe("unknownformat"); expect(component.enableHighlighting).toBeUndefined(); }); - /* tslint:disable: no-identical-functions */ // the same test is performed an undefined format + // the same test is performed with an unknown format + // tslint:disable-next-line: no-identical-functions it("should leave the raw data unformatted when the format is an unrecognised string", () => { - expect(component.prettyString).toBe(rawTypeScriptData); + expect(component.prettyString).toBe(rawTypescriptData); const preElement: HTMLPreElement | null = hostFixture.nativeElement.querySelector("pre"); expect(preElement).not.toBeNull(); - /* tslint:disable: no-duplicate-string */ expect(preElement.innerHTML).toContain("function calculateData(seed:any, operationFn:Function):any"); - /* tslint:enable: no-duplicate-string */ }); - /* tslint:enable: no-identical-functions */ }); }); @@ -543,7 +601,7 @@ describe("PrettyPrintComponent", () => { const preElement: HTMLPreElement | null = hostFixture.nativeElement.querySelector("pre"); expect(preElement).not.toBeNull(); expect(preElement.innerHTML).toContain(''); - expect(preElement.innerHTML).toContain('body'); + expect(preElement.innerHTML).toContain('body '); expect(preElement.innerHTML).toContain(':'); }); @@ -564,9 +622,9 @@ describe("PrettyPrintComponent", () => { const preElement: HTMLPreElement | null = hostFixture.nativeElement.querySelector("pre"); expect(preElement).not.toBeNull(); expect(preElement.innerHTML).not.toContain(''); - expect(preElement.innerHTML).toContain("color: #FFF;"); - expect(preElement.innerHTML).toContain("margin-bottom:1em"); - expect(preElement.innerHTML).toContain("margin-left:20px;"); + expect(preElement.innerHTML).toContain("color: #fff;"); + expect(preElement.innerHTML).toContain("margin-bottom: 1em;"); + expect(preElement.innerHTML).toContain("margin-left: 20px;"); }); }); @@ -672,11 +730,9 @@ describe("PrettyPrintComponent", () => { const preElement: HTMLPreElement | null = hostFixture.nativeElement.querySelector("pre"); expect(preElement).not.toBeNull(); - /* tslint:disable: no-duplicate-string */ expect(preElement.innerHTML).not.toContain(''); expect(preElement.innerHTML).toContain("SELECT DISTINCT Name"); expect(preElement.innerHTML).toContain("FROM Production.Product AS p"); - /* tslint:enable: no-duplicate-string */ }); }); @@ -732,18 +788,42 @@ describe("PrettyPrintComponent", () => { expect(preElement.innerHTML).toContain('"menuitem": ['); expect(preElement.innerHTML).toContain('"onclick": "CreateNewDoc()"'); }); + + it("should not highlight invalid JSON data", () => { + const invalidRawJsonData: string = rawJsonData.replace(":", "oops"); + + hostComponent.data = invalidRawJsonData; + hostComponent.format = "json"; + hostComponent.enableHighlighting = true; + hostFixture.detectChanges(); + + const formattedData: string = component.prettyString; + + expect(formattedData).not.toContain("class='language-json'"); + expect(formattedData).not.toContain(classTokenProperty); + expect(formattedData).not.toContain("hostFixture.nativeElement.querySelector("pre"); + expect(preElement).not.toBeNull(); + expect(preElement.innerHTML).not.toContain(''); + expect(preElement.innerHTML).toContain('"menu"oops'); + }); }); describe("JavaScript", () => { beforeEach(() => { - hostComponent.data = rawJavaScriptData; + hostComponent.data = rawJavascriptData; hostComponent.format = "javascript"; hostComponent.enableHighlighting = true; hostFixture.detectChanges(); }); it(shouldHaveInputs, () => { - expect(component.data).toBe(rawJavaScriptData); + expect(component.data).toBe(rawJavascriptData); expect(component.format).toBe("javascript"); expect(component.enableHighlighting).toBe(true); }); @@ -760,7 +840,7 @@ describe("PrettyPrintComponent", () => { expect(formattedData).toContain("operationFn"); expect(formattedData).toContain("seed"); expect(formattedData).toContain("return"); - expect(formattedData).not.toBe(rawJavaScriptData); + expect(formattedData).not.toBe(rawJavascriptData); const preElement: HTMLPreElement | null = hostFixture.nativeElement.querySelector("pre"); expect(preElement).not.toBeNull(); @@ -784,7 +864,35 @@ describe("PrettyPrintComponent", () => { expect(formattedData).toContain("operationFn"); expect(formattedData).toContain("seed"); expect(formattedData).toContain("return"); - expect(formattedData).toBe(rawJavaScriptData); + expect(formattedData).toBe(formattedJavascriptData); + + const preElement: HTMLPreElement | null = hostFixture.nativeElement.querySelector("pre"); + expect(preElement).not.toBeNull(); + expect(preElement.innerHTML).not.toContain(''); + expect(preElement.innerHTML).toContain("function calculateData(seed, operationFn)"); + expect(preElement.innerHTML).toContain("if (!data) {"); + }); + + it("should not highlight invalid javascript data", () => { + const invalidRawJavascriptData: string = rawJavascriptData + "}"; + + hostComponent.data = invalidRawJavascriptData; + hostComponent.format = "javascript"; + hostComponent.enableHighlighting = true; + hostFixture.detectChanges(); + + const formattedData: string = component.prettyString; + + expect(formattedData).not.toContain("class='language-javascript'"); + expect(formattedData).not.toContain(classTokenKeyword); + expect(formattedData).not.toContain("hostFixture.nativeElement.querySelector("pre"); expect(preElement).not.toBeNull(); @@ -796,14 +904,14 @@ describe("PrettyPrintComponent", () => { describe("TypeScript", () => { beforeEach(() => { - hostComponent.data = rawTypeScriptData; + hostComponent.data = rawTypescriptData; hostComponent.format = "typescript"; hostComponent.enableHighlighting = true; hostFixture.detectChanges(); }); it(shouldHaveInputs, () => { - expect(component.data).toBe(rawTypeScriptData); + expect(component.data).toBe(rawTypescriptData); expect(component.format).toBe("typescript"); expect(component.enableHighlighting).toBe(true); }); @@ -820,7 +928,7 @@ describe("PrettyPrintComponent", () => { expect(formattedData).toContain("operationFn"); expect(formattedData).toContain("seed"); expect(formattedData).toContain("return"); - expect(formattedData).not.toBe(rawTypeScriptData); + expect(formattedData).not.toBe(rawTypescriptData); const preElement: HTMLPreElement | null = hostFixture.nativeElement.querySelector("pre"); expect(preElement).not.toBeNull(); @@ -844,15 +952,41 @@ describe("PrettyPrintComponent", () => { expect(formattedData).toContain("operationFn"); expect(formattedData).toContain("seed"); expect(formattedData).toContain("return"); - expect(formattedData).toBe(rawTypeScriptData); + expect(formattedData).toBe(formattedTypescriptData); + + const preElement: HTMLPreElement | null = hostFixture.nativeElement.querySelector("pre"); + expect(preElement).not.toBeNull(); + expect(preElement.innerHTML).not.toContain(''); + expect(preElement.innerHTML).toContain("function calculateData(seed: any, operationFn: Function): any"); + expect(preElement.innerHTML).toContain('data = "could not calculate data";'); + }); + + it("should not highlight invalid typescript data", () => { + const invalidRawTypescriptData: string = rawTypescriptData + "}"; + + hostComponent.data = invalidRawTypescriptData; + hostComponent.format = "typescript"; + hostComponent.enableHighlighting = true; + hostFixture.detectChanges(); + + const formattedData: string = component.prettyString; + + expect(formattedData).not.toContain("class='language-typescript'"); + expect(formattedData).not.toContain(classTokenKeyword); + expect(formattedData).not.toContain("hostFixture.nativeElement.querySelector("pre"); expect(preElement).not.toBeNull(); - /* tslint:disable: no-duplicate-string */ expect(preElement.innerHTML).not.toContain(''); expect(preElement.innerHTML).toContain("function calculateData(seed:any, operationFn:Function):any"); - expect(preElement.innerHTML).toContain("{data = 'could not calculate data';}"); - /* tslint:enable: no-duplicate-string */ + expect(preElement.innerHTML).toContain("if (!data){data = 'could not calculate data';}"); }); }); }); diff --git a/packages/stark-ui/src/modules/pretty-print/components/pretty-print.component.ts b/packages/stark-ui/src/modules/pretty-print/components/pretty-print.component.ts index 600b9aa99e..239a134d44 100644 --- a/packages/stark-ui/src/modules/pretty-print/components/pretty-print.component.ts +++ b/packages/stark-ui/src/modules/pretty-print/components/pretty-print.component.ts @@ -23,6 +23,20 @@ const componentName: string = "stark-pretty-print"; */ const prismClassPrefix: string = "language-"; +/** + * A reference to the prettier library + */ +const prettier: any = require("prettier/standalone"); + +/** + * A reference to the prettier plugins + */ +const prettierPlugins: any = [ + require("prettier/parser-babylon"), + require("prettier/parser-postcss"), + require("prettier/parser-typescript") +]; + /** * A reference to the prettyData library */ @@ -95,65 +109,67 @@ export class StarkPrettyPrintComponent implements OnChanges, OnInit { let prismGrammar: LanguageDefinition = ""; let prismClass: string = ""; - switch (this.format) { - case "xml": - case "html": - prismGrammar = Prism.languages.markup; - prismClass = prismClassPrefix + "markup"; - this.prettyString = prettyData.xml(this.data); - break; + try { + switch (this.format) { + case "xml": + case "html": + prismGrammar = Prism.languages.markup; + prismClass = prismClassPrefix + "markup"; + this.prettyString = prettyData.xml(this.data); + break; - case "json": - try { + case "json": prismGrammar = Prism.languages.json; prismClass = prismClassPrefix + this.format; JSON.parse(this.data); - this.prettyString = prettyData.json(this.data); - } catch (e) { - this.logger.warn(componentName + ": Invalid JSON data"); - // the json string might not be valid so it should be in a try-catch clause - // otherwise the pretty-data throws an error and it stops working :s - // in this case we just show the raw data - this.prettyString = this.data; + this.prettyString = prettier.format(this.data, { parser: "json", plugins: prettierPlugins }); + break; + + case "css": + prismGrammar = Prism.languages.css; + prismClass = prismClassPrefix + this.format; + this.prettyString = prettier.format(this.data, { parser: "css", plugins: prettierPlugins }); + break; + + case "scss": + prismGrammar = Prism.languages.scss; + prismClass = prismClassPrefix + this.format; + this.prettyString = prettier.format(this.data, { parser: "scss", plugins: prettierPlugins }); + break; + + case "sql": + prismGrammar = Prism.languages.sql; + prismClass = prismClassPrefix + this.format; + this.prettyString = prettyData.sql(this.data); + break; + + case "javascript": + prismGrammar = Prism.languages.javascript; + prismClass = prismClassPrefix + this.format; + this.prettyString = prettier.format(this.data, { parser: "babylon", plugins: prettierPlugins }); + break; + + case "typescript": + prismGrammar = Prism.languages.typescript; + prismClass = prismClassPrefix + this.format; + this.prettyString = prettier.format(this.data, { + parser: "typescript", + plugins: prettierPlugins + }); + break; + + default: + this.logger.warn(componentName + ": Unknown format -> ", this.format); this.highlightingEnabled = false; - } - break; - - case "css": - prismGrammar = Prism.languages.css; - prismClass = prismClassPrefix + this.format; - this.prettyString = prettyData.css(this.data); - break; - - case "scss": - prismGrammar = Prism.languages.scss; - prismClass = prismClassPrefix + this.format; - this.prettyString = prettyData.css(this.data); - break; - - case "sql": - prismGrammar = Prism.languages.sql; - prismClass = prismClassPrefix + this.format; - this.prettyString = prettyData.sql(this.data); - break; - - case "javascript": - prismGrammar = Prism.languages.javascript; - prismClass = prismClassPrefix + this.format; - this.prettyString = this.data; - break; - - case "typescript": - prismGrammar = Prism.languages.typescript; - prismClass = prismClassPrefix + this.format; - this.prettyString = this.data; - break; - - default: - this.logger.warn(componentName + ": Unknown format -> ", this.format); - this.highlightingEnabled = false; - this.prettyString = this.data; - break; + this.prettyString = this.data; + break; + } + } catch (e) { + this.logger.warn(componentName + ": Invalid " + this.format + " data"); + // the data string might not be valid so it should be in a try-catch clause + // in this case we just show the raw data + this.prettyString = this.data; + this.highlightingEnabled = false; } if (this.highlightingEnabled) {