frontend with typechecking (#101)

linter is broken currently

.github/workflows/pr.yml

@@ -2,35 +2,65 @@ name: Pull Request
 
 on:
   push:
-    branches: [ main ]
+    branches: 
+    - main 
   pull_request:
-    branches: [ main ]
+    branches: 
+    - main
 
 jobs:
-  build:
+
+  # server: 
+  # can we run the server, is the API alright?
+  #
+  # Priority is to fail fast, so first can we compile and build 
+  # the server binary, then tests, and linting.
+  server:
+    defaults:
+      run:
+        working-directory: server
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v3
     - uses: cashapp/activate-hermit@v1
+    - name: build-server
+      run: go build ./cmd/server
     - name: test
-      run: cd server && go test ./...
+      run: go test ./...
+    - name: lint
+      run: golangci-lint run
 
-  lint:
+  # frontend: describes the steps we take to 
+  # ensure that the nuxt application is buildable.
+  # 
+  # The priority here is to fail fast on critical things.
+  # 1. We can actually build the application
+  # 2. It typechecks & lints
+  frontend:
     runs-on: ubuntu-latest
+    defaults:
+      run: 
+        working-directory: frontend
     steps:
     - uses: actions/checkout@v3
     - uses: cashapp/activate-hermit@v1
-    - name: shellcheck
-      run:  shellcheck bin/prmectl
-    - name: lint-golang
-      run: cd server && golangci-lint run
-    - name: lint-vue
-      run: cd frontend && yarn && yarn lint
-
-  generate:
+    - name: yarn
+      run: yarn
+    - name: generate
+      run: yarn generate
+    - name: typecheck
+      run: yarn nuxi typecheck
+    - name: lint
+      run: | 
+        echo yarn eslint .
+        echo Linting for some reason is currently broken, and times out
+        exit 1
+  
+  # prmectl: just make sure that it's going to be ok.
+  prmectl:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v3
     - uses: cashapp/activate-hermit@v1
-    - name: generate
-      run: cd frontend && yarn && yarn generate
+    - name: shellcheck bin/prmectl
+      run:  shellcheck bin/prmectl

frontend/components/DiffBlock.vue

@@ -29,9 +29,9 @@ import "prismjs/components/prism-yaml";
 import "prismjs/plugins/diff-highlight/prism-diff-highlight";
 import "prismjs/plugins/diff-highlight/prism-diff-highlight.css";
 
-const block = ref("block");
+const block = ref<Element>();
 onMounted(() => {
-  Prism.highlightElement(block.value);
+  Prism.highlightElement(block.value!!);
 });
 
 const props = defineProps({

frontend/components/MarkdownHTML.vue

@@ -3,13 +3,23 @@
 </template>
 
 <script setup lang="ts">
-import showdown from "showdown";
-
-const converter = new showdown.Converter();
-converter.setFlavor("github");
+import { mdToHtml } from "../src/md";
 
 const slots = useSlots();
 const rendered = computed(() => {
-  return converter.makeHtml(slots.default()[0].children);
+  if (!slots) {
+    return "";
+  }
+  
+  if (!slots.default) {
+    return "";
+  }
+
+  const data = slots.default();
+  if (!data.length) {
+    return "";
+  }
+
+  return mdToHtml(data[0].children as string);
 });
 </script>

frontend/components/Review/PageChrome.vue

@@ -14,7 +14,7 @@
           class="text-xs px-2 text-violet-300 hover:text-pink-300"
           @click="requestFullscreen"
         >
-          :play:
+          ▶️
         </button>
       </template>
     </TopBar>
@@ -31,28 +31,28 @@
         <code>{{ error.data }}</code>
       </ErrorBlock>
       <div v-else ref="content" class="h-full">
-        <slot :data="data" name="default" />
+        <slot :data="data!!" name="default" />
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-defineProps({
-  height: { type: String, default: "" },
-  name: { type: String, required: true },
-});
+import { Review } from "../../src/Review";
+defineProps<{
+  height?: string;
+  name: string;
+}>();
 
 const route = useRoute();
-const { pending, data, error } = await useFetch("/api/review", {
+const { pending, data, error } = await useFetch<Review>("/api/review", {
   lazy: true,
   params: route.params,
   server: false,
-  initialCache: false,
 });
 
-const content = ref("content");
+const content = ref<Element>()!!;
 const requestFullscreen = () => {
-  content.value.requestFullscreen();
+  content.value!!.requestFullscreen();
 };
 </script>

frontend/components/Review/PageContent.vue

@@ -28,7 +28,8 @@
 </template>
 
 <script setup lang="ts">
-defineProps({
-  model: { type: Object, required: true },
-});
+import { Review } from "../../src/Review";
+defineProps<{
+  model: Review;
+}>();
 </script>

frontend/components/SearchBox.vue

@@ -1,8 +1,5 @@
 <template>
-  <form
-    class="my-4 mx-auto text-lg max-w-3xl"
-    @submit.prevent="$emit('submit')"
-  >
+  <form class="my-4 mx-auto text-lg max-w-3xl" @submit.prevent="submitForm">
     <ErrorMessage :message="errorMessage" />
     <div
       class="mx-2 flex flex-row rounded bg-white shadow-md p-2 gap-2 border border-violet-100"
@@ -14,7 +11,7 @@
         type="text"
         placeholder="$org/$repo/pull/$pull#pullrequestreview-$review"
         class="flex-grow px-4 font-mono focus:ring-none rounded overflow-hidden inline-block"
-        @input="$emit('update:modelValue', $event.target.value)"
+        @input="updateModelValue"
       />
       <button
         type="submit"
@@ -29,10 +26,22 @@
 </template>
 
 <script setup lang="ts">
-defineProps({
-  modelValue: { type: String, default: "" },
-  errorMessage: { type: String, default: "" },
-  disabled: { type: Boolean, default: false },
-});
-defineEmits(["update:modelValue", "submit"]);
+defineProps<{
+  modelValue: string;
+  errorMessage: string;
+  disabled: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string): void;
+  (e: "submit"): void;
+}>();
+
+const submitForm = () => {
+  emit("submit");
+};
+
+const updateModelValue = (e: Event) => {
+  emit("update:modelValue", (e.target as HTMLInputElement).value);
+};
 </script>

frontend/components/SlideShow.vue

@@ -46,12 +46,13 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps({
-  model: { type: Object, required: true },
-});
+import { Review } from "../src/Review";
+const props = defineProps<{
+  model: Review;
+}>();
 
 const current = ref(0);
-const onKeyUp = (e: Event) => {
+const onKeyUp = (e: KeyboardEvent) => {
   if (e.defaultPrevented) {
     return;
   }

frontend/nuxt.config.ts

@@ -1,5 +1,8 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  typescript: {
+    strict: true,
+  },
   ssr: false,
   css: ["~/assets/css/main.scss"],
   postcss: {

frontend/package.json

@@ -5,12 +5,13 @@
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
-    "postinstall": "nuxt prepare",
-    "lint": "eslint ."
+    "postinstall": "nuxt prepare"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.1.1",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
+    "@types/prismjs": "^1.26.0",
+    "@types/showdown": "^2.0.1",
     "@typescript-eslint/eslint-plugin": "^6.1.0",
     "@typescript-eslint/parser": "^6.1.0",
     "autoprefixer": "^10.4.14",
@@ -21,7 +22,8 @@
     "postcss": "^8.4.26",
     "prettier": "^3.0.0",
     "tailwindcss": "^3.3.3",
-    "typescript": "^5.1.6"
+    "typescript": "^5.1.6",
+    "vue-tsc": "^1.8.8"
   },
   "version": "0.0.0",
   "dependencies": {

frontend/pages/[org]/[repo]/pull/[pull]/[review]/slides.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="text-center">redirecting...</div>
 </template>
+
 <script setup type="ts">
 const { params } = useRoute();
 await navigateTo(`/${params.org}/${params.repo}/pull/${params.pull}/review-${params.review}`);

frontend/pages/index.vue

@@ -49,6 +49,13 @@
 </template>
 
 <script setup lang="ts">
+interface Params {
+  owner: string;
+  repo: string;
+  pull: number;
+  review: number;
+}
+
 const query = ref("");
 const errorMessage = ref("");
 const searchDisabled = ref(false);
@@ -58,7 +65,7 @@ const searchLoading = () => {
   errorMessage.value = "";
 };
 
-const searchError = (msg) => {
+const searchError = (msg: string) => {
   searchDisabled.value = false;
   errorMessage.value = msg;
 };
@@ -67,24 +74,23 @@ const search = () => {
   searchLoading();
 
   setTimeout(async () => {
-    const { data, error } = await useFetch("/api/search", {
+    const { data, error } = await useFetch<Params>("/api/search", {
       params: { search: query.value },
       server: false,
-      initialCache: false,
     });
 
     if (error.value) {
       searchError(JSON.parse(error.value.data).msg);
     } else {
-      const params = data.value;
+      const params = data.value!!;
       await navigateTo(
         `${params.owner}/${params.repo}/pull/${params.pull}/review-${params.review}`,
       );
     }
-  }, 1000);
+  }, 500);
 };
 
-async function goTo(url) {
+async function goTo(url: string) {
   query.value = url;
   await search();
 }

frontend/src/Review.ts

@@ -0,0 +1,31 @@
+export interface MaybeLinked {
+  text: string;
+  href?: string;
+}
+
+export interface Comment {
+  number: number;
+  title: MaybeLinked;
+  description: string;
+  code: {
+    content: string;
+    lang: string;
+    diff?: boolean;
+  };
+}
+
+export interface Link {
+  label: string;
+  text: string;
+  href: string;
+}
+
+export interface Review {
+  title: MaybeLinked;
+  body: string;
+  links?: Array<Link>;
+  comments: Array<Comment>;
+  meta: {
+    params: {};
+  };
+}