Merge pull request #68 from sidharthv96/reformat

Add code formatting and precommit hook
mgenereu · Dec 17, 2020 · d5f59db · d5f59db
2 parents c34800e + 6fde9e2
commit d5f59db
Show file tree

Hide file tree

Showing 21 changed files with 2,206 additions and 1,104 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,3 @@
+{
+    "singleQuote": true
+}
diff --git a/package.json b/package.json
@@ -5,7 +5,11 @@
   "devDependencies": {
     "cross-env": "^5.2.0",
     "css-loader": "^2.1.1",
+    "husky": "^4.3.0",
+    "lint-staged": "^10.5.2",
     "mini-css-extract-plugin": "^0.6.0",
+    "prettier": "^2.2.1",
+    "prettier-plugin-svelte": "^1.4.1",
     "serve": "^11.0.0",
     "style-loader": "^0.23.1",
     "svelte": "^3.0.0",
@@ -17,7 +21,8 @@
   "scripts": {
     "release": "cross-env NODE_ENV=production webpack -p",
     "build": "cross-env NODE_ENV=production webpack",
-    "dev": "webpack-dev-server --content-base docs"
+    "dev": "webpack-dev-server --content-base docs",
+    "pretty": "prettier --write ./src/*"
   },
   "dependencies": {
     "mermaid": "8.8.4",
@@ -28,5 +33,13 @@
     "monaco-editor": "0.18.1",
     "svelte-routing": "^1.4.0",
     "svelte-spa-router": "^1.3.0"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{ts,svelte,js,css,md}": "prettier --plugin-search-dir=. --write"
   }
 }
diff --git a/src/App.svelte b/src/App.svelte
@@ -1,32 +1,31 @@
 <script>
-	import Router from "svelte-spa-router";
-	// Used for SSR. A falsy value is ignored by the Router.
-	import Edit from "./routes/Edit.svelte";
-	import View from "./routes/View.svelte";
+  import Router from 'svelte-spa-router';
+  // Used for SSR. A falsy value is ignored by the Router.
+  import Edit from './routes/Edit.svelte';
+  import View from './routes/View.svelte';
 
-	const routes = {
-		// Exact path
-		"/": Edit,
+  const routes = {
+    // Exact path
+    '/': Edit,
 
-		// Using named parameters, with last being optional
-		"/edit/:data": Edit,
+    // Using named parameters, with last being optional
+    '/edit/:data': Edit,
 
-		// Wildcard parameter
-		"/view/:data": View,
+    // Wildcard parameter
+    '/view/:data': View,
 
-		// Catch-all
-		// This is optional, but if present it must be the last
-		"*": Edit,
-	};
+    // Catch-all
+    // This is optional, but if present it must be the last
+    '*': Edit,
+  };
 </script>
 
 <style>
-
 </style>
 
 <svelte:head>
-	<link
-		href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
-		rel="stylesheet" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+    rel="stylesheet" />
 </svelte:head>
 <Router {routes} />
diff --git a/src/code-error-store.js b/src/code-error-store.js
@@ -1,3 +1,3 @@
 import { writable } from 'svelte/store';
 
-export const codeErrorStore = writable(undefined);
+export const codeErrorStore = writable(undefined);
diff --git a/src/code-store.js b/src/code-store.js
@@ -1,55 +1,55 @@
 import { writable, get } from 'svelte/store';
 // import mermaid from '@mermaid-js/mermaid';
 import mermaid from '@mermaid';
-import { Base64 } from 'js-base64'
-import {push, pop, replace} from 'svelte-spa-router'
+import { Base64 } from 'js-base64';
+import { push, pop, replace } from 'svelte-spa-router';
 
 export const codeStore = writable(undefined);
-export const fromUrl = data => {
+export const fromUrl = (data) => {
   let code;
   let state;
-  const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches && false
+  const isDarkMode =
+    window.matchMedia('(prefers-color-scheme: dark)').matches && false;
   try {
-    let stateStr = Base64.decode(data)
-    console.log('state from url', stateStr)
+    let stateStr = Base64.decode(data);
+    console.log('state from url', stateStr);
     state = JSON.parse(stateStr);
 
-
-    if (state.code === undefined) { // not valid json
-//      state = { code: '', mermaid: { theme: themeFromUrl } }
-		}
-		code = state.code;
+    if (state.code === undefined) {
+      // not valid json
+      //      state = { code: '', mermaid: { theme: themeFromUrl } }
+    }
+    code = state.code;
   } catch (e) {
     // console.error('Init error', e);
-		code = `graph TD
+    code = `graph TD
   A[Christmas] -->|Get money| B(Go shopping)
   B --> C{Let me think}
   C -->|One| D[Laptop]
   C -->|Two| E[iPhone]
   C -->|Three| F[fa:fa-car Car]
 		`;
-		state = { code, mermaid: { theme: isDarkMode?'dark':'default' } };
+    state = { code, mermaid: { theme: isDarkMode ? 'dark' : 'default' } };
   }
 
   codeStore.set(state);
-
 };
-export const updateCodeStore = newState => {
+export const updateCodeStore = (newState) => {
   codeStore.set(newState);
-  replace('/edit/' + Base64.encodeURI(JSON.stringify(newState)))
+  replace('/edit/' + Base64.encodeURI(JSON.stringify(newState)));
 };
 export const updateCode = (code, updateEditor) => {
   const state = get(codeStore);
   state.code = code;
   state.updateEditor = updateEditor;
   codeStore.set(state);
 };
-export const updateConfig = config => {
+export const updateConfig = (config) => {
   const state = get(codeStore);
   state.mermaid = config;
   codeStore.set(state);
 };
 
-const unsubscribe = codeStore.subscribe( state => {
-  replace('/edit/' + Base64.encodeURI(JSON.stringify(state)))
+const unsubscribe = codeStore.subscribe((state) => {
+  replace('/edit/' + Base64.encodeURI(JSON.stringify(state)));
 });
diff --git a/src/components/Card.svelte b/src/components/Card.svelte
@@ -1,36 +1,36 @@
 <script>
-    export let title = "";
-    export let noPadding = false;
-    let contentClass = "padding";
-    if (noPadding) {
-        contentClass = "";
-    }
+  export let title = '';
+  export let noPadding = false;
+  let contentClass = 'padding';
+  if (noPadding) {
+    contentClass = '';
+  }
 </script>
 
 <style>
-    #card {
-        border: 1px solid lightgray;
-        margin-bottom: 16px;
-    }
-    #title {
-        font-family: "Playfair Display", serif;
-        font-weight: 400;
-        border-bottom: 1px solid lightgray;
-        font-size: 1.25rem;
-        background-color: #1e60ab;
-        color: #eaebef;
-    }
-    #content {
-        padding-top: 8px;
-    }
-    .padding {
-        padding: 8px;
-    }
+  #card {
+    border: 1px solid lightgray;
+    margin-bottom: 16px;
+  }
+  #title {
+    font-family: 'Playfair Display', serif;
+    font-weight: 400;
+    border-bottom: 1px solid lightgray;
+    font-size: 1.25rem;
+    background-color: #1e60ab;
+    color: #eaebef;
+  }
+  #content {
+    padding-top: 8px;
+  }
+  .padding {
+    padding: 8px;
+  }
 </style>
 
 <div id="card">
-    <div id="title" class="padding">{title}</div>
-    <div id="content" class={contentClass}>
-        <slot />
-    </div>
+  <div id="title" class="padding">{title}</div>
+  <div id="content" class={contentClass}>
+    <slot />
+  </div>
 </div>