feat(github-commits): add component, playground page (#40)

* feat(github-commits): add component, playground page

* fix: vue/no-watch-after-await

Author: huynl-96

playground/components/Navigation.vue

@@ -33,6 +33,10 @@ const nav = [
   {
     name: 'Github Link',
     path: '/github-link'
+  },
+  {
+    name: 'Commits',
+    path: '/commits'
   }
 ]
 </script>

playground/pages/commits.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const qOwner = ref('nuxt-community')
+const qRepo = ref('supabase-module')
+const file = ref('package.json')
+const date = ref('2022-06-30')
+</script>
+
+<template>
+  <div>
+    <GithubCommits v-slot="{ commits, refresh }" :query="{ owner: qOwner, repo: qRepo, source: file, date }">
+      <div style="margin-bottom: .5rem;">
+        Repo: <input v-model="qOwner" type="text"> / <input v-model="qRepo" type="text">
+      </div>
+      <div style="margin-bottom: .5rem;">
+        File: <input v-model="file" type="text">
+      </div>
+      <div style="margin-bottom: .5rem;">
+        From date: <input v-model="date" type="text">
+      </div>
+      <button @click="refresh">
+        Search
+      </button>
+
+      <h3>Commit List</h3>
+      <em v-if="!commits.length">No commit found</em>
+      <div v-for="commit in commits" :key="commit.hash" style="display: flex; margin: 1rem 0">
+        <a :href="`https://github.com/${qOwner}/${qRepo}/commit/${commit.hash}`" target="_blank">
+          <code>{{ commit.hash.slice(0, 7) }}</code>
+        </a>
+        <span style="margin: 0 .5rem;">-</span>
+        <span>
+          <span v-html="commit.message" />
+
+          <div v-for="{ login, name } in commit.authors" :key="login">
+            committed by <a :href="`https://github.com/${login}`" target="_blank">{{ name }}</a>
+          </div>
+        </span>
+      </div>
+    </GithubCommits>
+  </div>
+</template>

src/module.ts

@@ -200,6 +200,22 @@ export default defineNuxtModule<ModuleOptions>({
       })
     }
 
+    // Setup commits API
+    nitroConfig.handlers.push({
+      route: '/api/_github/commits',
+      handler: resolveModule('./server/api/commits', { paths: runtimeDir })
+    }, {
+      route: '/api/_github/commits/:query',
+      handler: resolveModule('./server/api/commits', { paths: runtimeDir })
+    })
+
+    // GithubCommits component
+    addComponent({
+      name: 'GithubCommits',
+      filePath: resolveModule('./components/GithubCommits', { paths: runtimeDir }),
+      global: true
+    })
+
     addImports({
       name: 'useGithub',
       from: resolveModule('./composables/useGithub', { paths: runtimeDir })

src/runtime/components/GithubCommits.ts

@@ -0,0 +1,31 @@
+import { defineComponent, useSlots } from 'vue'
+import type { PropType } from 'vue'
+import { hash } from 'ohash'
+import { useGithub } from '../composables/useGithub'
+import { GithubCommitsQuery } from '../types'
+// @ts-ignore
+import { useAsyncData } from '#imports'
+
+export default defineComponent({
+  props: {
+    query: {
+      type: Object as PropType<GithubCommitsQuery>,
+      required: false,
+      default: () => ({})
+    }
+  },
+  async setup (props) {
+    const { fetchCommits } = useGithub()
+
+    const { data: commits, pending, refresh } = await useAsyncData(`github-commits-${hash(props.query)}`, () => fetchCommits(props.query))
+    return {
+      commits,
+      pending,
+      refresh
+    }
+  },
+  render ({ commits, pending, refresh }) {
+    const slots = useSlots()
+    return slots?.default?.({ commits, pending, refresh })
+  }
+})

src/runtime/components/GithubFileContributors.ts

@@ -18,11 +18,12 @@ export default defineComponent({
     const source = toRef(props.query, 'source')
 
     const { fetchFileContributors } = useGithub()
+    watch(source, () => {
+      if (refresh) { refresh() }
+    })
 
     const { data: contributors, refresh, pending } = await useAsyncData(`github-file-contributors-${hash(props.query)}`, () => fetchFileContributors(props.query))
 
-    watch(source, () => refresh())
-
     return {
       contributors,
       refresh,

src/runtime/composables/useGithub.ts

@@ -1,5 +1,5 @@
 import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
-import type { GithubRepositoryOptions, GithubContributorsQuery, GithubReleasesQuery, GithubRepository, GithubRawRelease, GithubRawContributor, GithubReleaseQuery } from '../types'
+import type { GithubRepositoryOptions, GithubContributorsQuery, GithubReleasesQuery, GithubRepository, GithubRawRelease, GithubRawContributor, GithubReleaseQuery, GithubCommitsQuery } from '../types'
 import { useRequestEvent } from '#imports'
 
 export const useGithub = () => {
@@ -45,14 +45,21 @@ export const useGithub = () => {
     return $fetch(url, { responseType: 'json' })
   }
 
+  const fetchCommits = (query: GithubCommitsQuery): Promise<any> => {
+    const url = `/api/_github/commits/${encodeParams(query)}.json`
+    process.server && addPrerenderPath(url)
+    return $fetch(url, { responseType: 'json' })
+  }
+
   return {
     fetchRepository,
     fetchReleases,
     fetchRelease,
     fetchLastRelease,
     fetchContributors,
     fetchFileContributors,
-    fetchReadme
+    fetchReadme,
+    fetchCommits
   }
 }
 

src/runtime/server/api/commits/index.ts

@@ -0,0 +1,38 @@
+import type { ModuleOptions } from '../../../../module'
+import { decodeParams, fetchCommits, overrideConfig } from '../../utils/queries'
+import { GithubCommitsQuery } from '../../../types'
+// @ts-ignore
+import * as imports from '#imports'
+
+const moduleConfig: ModuleOptions = imports.useRuntimeConfig().github ?? {}
+
+let handler
+if (process.env.NODE_ENV === 'development' || moduleConfig.disableCache) {
+  // @ts-ignore
+  // eslint-disable-next-line import/namespace
+  handler = imports.defineEventHandler
+} else {
+  // @ts-ignore
+  // eslint-disable-next-line import/namespace
+  handler = imports.defineCachedEventHandler
+}
+
+export default handler(
+  async (event: any) => {
+    // Get query
+    const query = decodeParams(event.context.params.query) as GithubCommitsQuery
+    const normalizedQuery = {
+      ...query,
+      date: query.date ? new Date(query.date) : undefined
+    }
+
+    // Merge query in module config
+    const githubConfig = overrideConfig(moduleConfig, query)
+
+    // Fetch contributors from GitHub
+    return await fetchCommits(normalizedQuery, githubConfig)
+  },
+  {
+    maxAge: 60 // cache for one minute
+  }
+)

src/runtime/server/utils/queries.ts

@@ -5,11 +5,11 @@ import { defu } from 'defu'
 import type {
   ModuleOptions
 } from '../../../module'
-import { GithubRawRelease, GithubRepositoryOptions, GithubRawContributor, GithubContributorsQuery, GithubReleasesQuery, GithubRepositoryReadme, GithubRepository } from '../../types'
+import { GithubRawRelease, GithubRepositoryOptions, GithubRawContributor, GithubContributorsQuery, GithubReleasesQuery, GithubRepositoryReadme, GithubRepository, GithubCommitsQuery } from '../../types'
 // @ts-ignore
 import { parseContent } from '#content/server'
 
-export function decodeParams (params: string = '') {
+export function decodeParams (params = '') {
   const result = {}
   params = params.replace(/\.json$/, '')
   for (const param of params.split(':')) {
@@ -151,6 +151,57 @@ export async function fetchRepositoryContributors ({ max }: Partial<GithubContri
   return contributors.map(({ avatar_url, login }) => ({ avatar_url, login }))
 }
 
+export async function fetchCommits ({ date, source }: Partial<Omit<GithubCommitsQuery, 'date'> & { date: Date }>, { owner, repo, branch, token }: GithubRepositoryOptions) {
+  const daysAgo = () => {
+    if (date) { return date.toISOString() }
+
+    const now = new Date()
+    now.setDate(now.getDate() - 30) // get from 30 days ago
+    return now.toISOString()
+  }
+
+  const path = source ? `path: "${source}",` : ''
+  const data = await githubGraphqlQuery(
+    `
+      query {
+        repository(owner: "${owner}", name: "${repo}") {
+          object(expression: "${branch}") {
+            ... on Commit {
+              history(since: "${daysAgo()}", ${path}) {
+                nodes {
+                  oid
+                  messageHeadlineHTML
+                  authors(first: ${5}) {
+                    nodes {
+                      user {
+                        name
+                        avatarUrl
+                        login
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    `, { token }
+  )
+
+  if (!data?.repository?.object?.history?.nodes) { return [] }
+
+  const commits = data.repository.object.history.nodes.map(node => ({
+    hash: node.oid,
+    message: node.messageHeadlineHTML,
+    authors: node.authors.nodes
+      .map(author => author.user)
+      .filter(user => user?.name && !isBot(user))
+  }))
+
+  return commits
+}
+
 export async function fetchFileContributors ({ source, max }: Partial<GithubContributorsQuery>, { owner, repo, branch, token }: GithubRepositoryOptions & { maxContributors?: number }) {
   const data = await githubGraphqlQuery(
     `

src/runtime/types/commits.d.ts

@@ -0,0 +1,6 @@
+import { GithubRepositoryOptions } from '.'
+
+export interface GithubCommitsQuery extends GithubRepositoryOptions {
+  date?: string
+  source?: string
+}

src/runtime/types/index.d.ts

@@ -1,3 +1,4 @@
 export * from './repository'
 export * from './releases'
 export * from './contributors'
+export * from './commits'