feat(store): switch from JSON to YAML

package.json

@@ -5,11 +5,9 @@
 	"main": "dist/electron/index.js",
 	"scripts": {
 		"build": "tslint --project . -c tslint.json 'src/**/*.ts' && tsc --project .",
-		"start":
-			"npm run build && concurrently \"electron dist/electron\" \"tsc --project . --watch\"",
+		"start": "npm run build && concurrently \"electron dist/electron\" \"tsc --project . --watch\"",
 		"build-lsg": "tsc --project src/lsg --outDir dist/lsg/patterns --sourceMap",
-		"start-lsg":
-			"npm run build-lsg && concurrently \"npm run build-lsg -- -w\" \"patternplate start\""
+		"start-lsg": "npm run build-lsg && concurrently \"npm run build-lsg -- -w\" \"patternplate start\""
 	},
 	"repository": {
 		"type": "git",
@@ -30,6 +28,7 @@
 		"@patternplate/cli": "^2.0.0-4",
 		"@patternplate/render-styled-components": "^2.0.0-3",
 		"@types/electron-devtools-installer": "^2.0.2",
+		"@types/js-yaml": "^3.10.1",
 		"@types/node": "^8.0.53",
 		"@types/react": "^16.0.0",
 		"@types/react-dom": "^16.0.3",
@@ -45,6 +44,7 @@
 	"dependencies": {
 		"cli": "^1.0.1",
 		"electron": "^1.7.9",
+		"js-yaml": "^3.10.0",
 		"mobx": "^3.3.2",
 		"mobx-react": "^4.3.5",
 		"react": "^16.0.0",

src/store/index.ts

@@ -1,6 +1,5 @@
 import { PatternFolder } from './pattern/folder';
-import * as FileUtils from 'fs';
-import { JsonArray, JsonObject } from './json';
+import { JsonArray, JsonObject, Persister } from './json';
 import * as MobX from 'mobx';
 import { IObservableArray } from 'mobx/lib/types/observablearray';
 import { Page } from './page';
@@ -93,8 +92,8 @@ export class Store {
 
 			(this.projects as IObservableArray<Project>).clear();
 			const projectsPath = PathUtils.join(this.getPagesPath(), 'projects.json');
-			const projectsJson: JsonObject = JSON.parse(FileUtils.readFileSync(projectsPath, 'utf8'));
-			(projectsJson.projects as JsonArray).forEach((projectJson: JsonObject) => {
+			const projectsJsonObject: JsonObject = Persister.loadYamlOrJson(projectsPath);
+			(projectsJsonObject.projects as JsonArray).forEach((projectJson: JsonObject) => {
 				const project: Project = Project.fromJsonObject(projectJson, this);
 				this.addProject(project);
 			});
@@ -104,7 +103,7 @@ export class Store {
 	public openPage(id: string): void {
 		MobX.transaction(() => {
 			const pagePath: string = PathUtils.join(this.getPagesPath(), `page-${id}.json`);
-			const json: JsonObject = JSON.parse(FileUtils.readFileSync(pagePath, 'utf8'));
+			const json: JsonObject = Persister.loadYamlOrJson(pagePath);
 			this.currentPage = Page.fromJsonObject(json, id, this);
 
 			this.selectedElement = undefined;

src/store/json.ts

@@ -1,3 +1,6 @@
+import * as FileUtils from 'fs';
+import * as JsYaml from 'js-yaml';
+
 export type JsonValue =
 	| string
 	| number
@@ -13,3 +16,19 @@ export interface JsonObject {
 }
 
 export interface JsonArray extends Array<JsonValue> {}
+
+export class Persister {
+	public static loadYamlOrJson(path: string): JsonObject {
+		const fileContent: string = FileUtils.readFileSync(path, 'utf8');
+		try {
+			return JsYaml.safeLoad(fileContent, JsYaml.JSON_SCHEMA) as JsonObject;
+		} catch (error) {
+			return JSON.parse(fileContent) as JsonObject;
+		}
+	}
+
+	public static saveYaml(path: string, jsonObject: JsonObject): void {
+		const fileContent: string = JsYaml.safeDump(jsonObject, { noRefs: true });
+		FileUtils.writeFileSync(path, fileContent, 'utf8');
+	}
+}

src/store/page/index.ts

@@ -1,5 +1,4 @@
-import * as FileUtils from 'fs';
-import { JsonObject } from '../json';
+import { JsonObject, Persister } from '../json';
 import { PageElement } from './page_element';
 import * as PathUtils from 'path';
 import { Store } from '..';
@@ -38,8 +37,8 @@ export class Page {
 
 	public save(): void {
 		const pagePath: string = PathUtils.join(this.store.getPagesPath(), `page-${this.id}.json`);
-		const json: JsonObject = this.toJsonObject();
-		FileUtils.writeFileSync(pagePath, JSON.stringify(json, null, '\t'), 'utf8');
+		const jsonObject: JsonObject = this.toJsonObject();
+		Persister.saveYaml(pagePath, jsonObject);
 	}
 
 	public toJsonObject(): JsonObject {