Merge pull request #1594 from Kobzol/npm-fmt

Add code formatter for frontend

Author: Kobzol

site/frontend/.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "bracketSpacing": false,
+  "tabWidth": 2
+}

site/frontend/package-lock.json

@@ -5,7 +5,8 @@
   "scripts": {
     "watch": "parcel watch",
     "build": "parcel build",
-    "check": "tsc -p tsconfig.json --noEmit"
+    "fmt": "prettier --write src",
+    "check": "tsc -p tsconfig.json --noEmit && prettier --check src"
   },
   "author": "",
   "license": "MIT",
@@ -14,6 +15,7 @@
     "@parcel/transformer-vue": "^2.8.3",
     "@types/highcharts": "^7.0.0",
     "@types/msgpack-lite": "^0.1.8",
+    "prettier": "2.8.8",
     "typescript": "^5.0.2"
   },
   "dependencies": {

site/frontend/package.json

@@ -2,7 +2,7 @@
 import {BenchmarkInfo} from "../api";
 
 const props = defineProps<{
-  info: BenchmarkInfo
+  info: BenchmarkInfo;
 }>();
 </script>
 <template>

site/frontend/src/components/as-of.vue

@@ -2,7 +2,7 @@
 import {Suspense} from "vue";
 
 const props = defineProps<{
-  component: Object
+  component: Object;
 }>();
 const component = props.component as any;
 </script>

site/frontend/src/components/with-suspense.vue

@@ -2,36 +2,40 @@
 import {onMounted, ref} from "vue";
 
 export interface SelectionParams {
-    start: string;
-    end: string;
+  start: string;
+  end: string;
 }
 
 const props = defineProps<SelectionParams>();
 
 const emit = defineEmits<{
-    (e: "change", params: SelectionParams): void
+  (e: "change", params: SelectionParams): void;
 }>();
 
 const startRef = ref<HTMLInputElement | null>(null);
 const endRef = ref<HTMLInputElement | null>(null);
 
 onMounted(() => {
-    startRef.value.value = props.start;
-    endRef.value.value = props.end;
-})
+  startRef.value.value = props.start;
+  endRef.value.value = props.end;
+});
 
 function submitSettings() {
-    const start = startRef.value.value;
-    const end = endRef.value.value;
+  const start = startRef.value.value;
+  const end = endRef.value.value;
 
-    const params = { start, end };
-    emit("change", params);
+  const params = {start, end};
+  emit("change", params);
 }
 </script>
 
 <template>
   <div id="settings">
-    start: <input placeholder="yyyy-mm-dd or commit" ref="startRef" />
-    end: <input placeholder="yyyy-mm-dd or commit" ref="endRef" />&nbsp;<a href="#" @click.prevent="submitSettings">Submit</a>
+    start: <input placeholder="yyyy-mm-dd or commit" ref="startRef" /> end:
+    <input placeholder="yyyy-mm-dd or commit" ref="endRef" />&nbsp;<a
+      href="#"
+      @click.prevent="submitSettings"
+      >Submit</a
+    >
   </div>
 </template>

site/frontend/src/pages/bootstrap/data-selector.vue

@@ -5,12 +5,21 @@ import {withLoading} from "../../utils/loading";
 import {renderPlots} from "./plots";
 import {BootstrapData, BootstrapSelector} from "./state";
 import {BOOTSTRAP_DATA_URL} from "../../urls";
-import {createUrlWithAppendedParams, getUrlParams, navigateToUrlParams} from "../../utils/navigation";
+import {
+  createUrlWithAppendedParams,
+  getUrlParams,
+  navigateToUrlParams,
+} from "../../utils/navigation";
 
 import {postJson} from "../../utils/requests";
 
-async function loadBootstrapData(selector: BootstrapSelector, loading: Ref<boolean>) {
-  const bootstrapData: BootstrapData = await withLoading(loading, () => postJson<BootstrapData>(BOOTSTRAP_DATA_URL, selector));
+async function loadBootstrapData(
+  selector: BootstrapSelector,
+  loading: Ref<boolean>
+) {
+  const bootstrapData: BootstrapData = await withLoading(loading, () =>
+    postJson<BootstrapData>(BOOTSTRAP_DATA_URL, selector)
+  );
 
   // Wait for the UI to be updated, which also resets the plot HTML elements.
   // Then draw the plots.
@@ -24,15 +33,17 @@ function loadSelectorFromUrl(urlParams: Dict<string>): BootstrapSelector {
   return {
     start,
     end,
-    min_seconds: 25
+    min_seconds: 25,
   };
 }
 
 function updateSelection(params: SelectionParams) {
-  navigateToUrlParams(createUrlWithAppendedParams({
-    start: params.start,
-    end: params.end
-  }).searchParams);
+  navigateToUrlParams(
+    createUrlWithAppendedParams({
+      start: params.start,
+      end: params.end,
+    }).searchParams
+  );
 }
 
 const loading = ref(true);
@@ -42,16 +53,19 @@ loadBootstrapData(selector, loading);
 </script>
 
 <template>
-  <DataSelector :start="selector.start" :end="selector.end"
-                @change="updateSelection"></DataSelector>
+  <DataSelector
+    :start="selector.start"
+    :end="selector.end"
+    @change="updateSelection"
+  ></DataSelector>
   <div v-if="loading" id="loading">
     <h2>Loading &amp; rendering data..</h2>
     <h3>This may take a while!</h3>
   </div>
   <div v-else>
     <div>
-      See <a href="/compare.html">compare page</a> for descriptions of what
-      the names mean.
+      See <a href="/compare.html">compare page</a> for descriptions of what the
+      names mean.
     </div>
     <div id="byCrateChart"></div>
     <div id="totalChart"></div>