-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: create nuxt-request-timeline module/playground (#1)
* Add RequestTimeline module/plugin/types * Fix rendering RequestTimeline page component * Record SSR request time by default * Log timeline url only if options.isEnabled * Fix providing requestTimeline to nuxtApp * Add urql client and track query in playground * Add normalized graphql cache and more queries * Remove layout from RequestTimeline page * Move getQueryTimelineName into runtime utils * Fix generating time url from browser console * Update README with image and composable * Add browser console screenshot to README * Add workflow to release main or beta branch * Create pull-request-title.yml workflow * Delete copy.mjs * Skip tests in CI for now
- Loading branch information
Showing
22 changed files
with
2,958 additions
and
137 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| name: 'Validate PR title' | ||
|
|
||
| on: | ||
| pull_request: | ||
| types: [opened, reopened, synchronize] | ||
|
|
||
| jobs: | ||
| conventional-pr-title: | ||
| name: Conventional commit | ||
| runs-on: ubuntu-latest | ||
| steps: | ||
| - uses: amannn/action-semantic-pull-request@v5 | ||
| env: | ||
| GITHUB_TOKEN: ${{ github.token }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| name: Release | ||
|
|
||
| on: | ||
| push: | ||
| branches: | ||
| - main | ||
| - beta | ||
|
|
||
| jobs: | ||
| release: | ||
| name: Release | ||
| runs-on: ubuntu-latest | ||
| steps: | ||
| - name: Checkout branch 🛎 | ||
| uses: actions/checkout@v4 | ||
| with: | ||
| fetch-depth: 0 | ||
|
|
||
| - name: Install pnpm 👨🏻💻 | ||
| uses: pnpm/action-setup@v4 | ||
| with: | ||
| version: 9 | ||
|
|
||
| - name: Setup node env 🏗 | ||
| uses: actions/setup-node@v4 | ||
| with: | ||
| node-version-file: .nvmrc | ||
| cache: 'pnpm' | ||
|
|
||
| - name: Install dependencies 👨🏻💻 | ||
| run: pnpm install | ||
|
|
||
| - name: Release | ||
| env: | ||
| GITHUB_TOKEN: ${{ github.token }} | ||
| NPM_TOKEN: ${{ secrets.NPM_TOKEN }} | ||
| run: npx semantic-release |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,5 @@ | ||
| <template> | ||
| <div> | ||
| Nuxt module playground! | ||
| </div> | ||
| <NuxtLayout> | ||
| <NuxtPage /> | ||
| </NuxtLayout> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import type { DocumentNode } from 'graphql' | ||
| import { provideClient, useQuery } from '@urql/vue' | ||
| import type { AnyVariables } from '@urql/vue' | ||
|
|
||
| export const URQL_CLIENT_NUXT_APP_KEY = 'urql' | ||
|
|
||
| export function useUrqlClient() { | ||
| return useNuxtApp()[`$${URQL_CLIENT_NUXT_APP_KEY}`] | ||
| } | ||
|
|
||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| export function useUrqlQuery<T = any, V extends AnyVariables = AnyVariables>( | ||
| options: Omit<Parameters<typeof useQuery<T, V>>[0], 'query'> & { query: DocumentNode } | ||
| ) { | ||
| const { query, variables } = options | ||
|
|
||
| const timeline = useRequestTimeline() | ||
| const { getQueryTimelineName } = useRequestTimelineUtils() | ||
|
|
||
| const client = useUrqlClient() | ||
| provideClient(client) | ||
|
|
||
| const end = timeline.start(() => getQueryTimelineName({ query, variables })) | ||
|
|
||
| const result = useQuery(options as Parameters<typeof useQuery<T, V>>[0]) | ||
| const hasFetched = result.then(() => end()) | ||
|
|
||
| return { ...result, hasFetched: async () => await hasFetched } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| <template> | ||
| <div> | ||
| <ol :class="$style.linkWrap"> | ||
| <li v-for="link in links" :key="link.to"> | ||
| <NuxtLink :class="$style.link" :to="link.to">{{ link.text }}</NuxtLink> | ||
| </li> | ||
| </ol> | ||
| <pre style="background-color: blueviolet">{{ summers }}</pre> | ||
|
|
||
| <slot /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| const characterQuery = gql` | ||
| query character($name: String!) { | ||
| characters(page: 1, filter: { name: $name }) { | ||
| info { | ||
| count | ||
| } | ||
| results { | ||
| id | ||
| name | ||
| } | ||
| } | ||
| } | ||
| ` | ||
| const summerResult = useUrqlQuery({ | ||
| query: characterQuery, | ||
| variables: { name: 'summer' }, | ||
| }) | ||
| const links: { to: string; text: string }[] = [ | ||
| { | ||
| to: '/', | ||
| text: 'Characters', | ||
| }, | ||
| { | ||
| to: '/locations', | ||
| text: 'Locations', | ||
| }, | ||
| ] | ||
| useAsyncData(summerResult.hasFetched) | ||
| const summers = computed(() => | ||
| summerResult.data.value?.characters?.results?.slice(0, 3).map((r: { name: string }) => r.name) | ||
| ) | ||
| </script> | ||
|
|
||
| <style module lang="scss"> | ||
| .linkWrap { | ||
| display: flex; | ||
| gap: 20px; | ||
| margin: 10px; | ||
| } | ||
| .link { | ||
| display: inline-block; | ||
| background-color: darkSlateBlue; | ||
| padding: 10px 20px; | ||
| border-radius: 4px; | ||
| color: white; | ||
| transition: background-color 0.1s; | ||
| &:hover { | ||
| background-color: rgba(72, 61, 139, 0.6); | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.