Merge pull request #24 from privy-open-source/fix/plugin-priority

.github/workflows/ci.yml

@@ -0,0 +1,95 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+  merge_group:
+    types: [checks_requested]
+
+jobs:
+  analyze:
+    runs-on: ${{ matrix.os }}
+
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        os:
+          - ubuntu-latest
+        language:
+          - javascript
+
+    steps:
+      - name: Git Checkout
+        uses: actions/checkout@v3
+
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v2
+        with:
+          languages: ${{ matrix.language }}
+
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v2
+
+      - name: Run CodeQL Analysis
+        uses: github/codeql-action/analyze@v2
+
+  build:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      fail-fast: false
+      matrix:
+        os:
+          - ubuntu-latest
+        node-version:
+          - 18
+
+    steps:
+      - name: Git Checkout
+        uses: actions/checkout@v3
+        with:
+          submodules: "recursive"
+
+      - name: Get Cache Dir
+        id: yarn-cache-dir
+        run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
+
+      - name: Use Cache
+        uses: actions/cache@v3
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: ${{ steps.yarn-cache-dir.outputs.dir }}
+          key: ${{ runner.os }}-yarn-
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "yarn"
+
+      - name: Install Deps
+        run: yarn install --immutable
+
+      - name: Run Prepare
+        run: yarn dev:prepare
+
+      - name: Run Test
+        run: yarn coverage
+
+      - name: Build Package
+        run: yarn build
+
+      - name: Run Linter
+        run: yarn lint

package.json

@@ -47,18 +47,19 @@
     "coverage": "vitest run src --coverage"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.4.1",
+    "@nuxt/kit": "^3.7.4",
     "axios": "1.1.3",
     "defu": "^6.1.2",
     "requrl": "^3.0.2",
-    "ufo": "^1.1.1"
+    "ufo": "^1.3.1"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.1.1",
     "@nuxt/module-builder": "^0.3.0",
-    "@nuxt/schema": "^3.4.1",
-    "@nuxt/test-utils": "^3.4.1",
+    "@nuxt/schema": "^3.7.4",
+    "@nuxt/test-utils": "^3.7.4",
     "@privyid/eslint-config-persona": "^0.12.0",
+    "@privyid/nhp": "^0.4.0",
     "@typescript-eslint/eslint-plugin": "^5.59.0",
     "@typescript-eslint/parser": "^5.59.0",
     "@vitest/coverage-c8": "^0.30.1",
@@ -76,7 +77,7 @@
     "eslint-plugin-unicorn": "^46.0.0",
     "eslint-plugin-varspacing": "^1.2.2",
     "eslint-plugin-vue": "^9.11.0",
-    "nuxt": "^3.4.1",
+    "nuxt": "^3.7.4",
     "typescript": "^5.0.4",
     "vitest": "^0.30.1"
   },

playground/api/coba.ts

@@ -0,0 +1,7 @@
+import { createLazyton } from '@privyid/nuapi/core'
+
+const useApi = createLazyton({ prefixURL: '/api' })
+
+export async function getUser () {
+  return await useApi().get('/users')
+}

playground/app.vue

@@ -1,19 +1,7 @@
 <template>
   <div>
-    Nuxt module playground!
-    <pre>{{ users }}</pre>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
   </div>
 </template>
-
-<script setup>
-import { onMounted, ref } from 'vue'
-import { useApi } from '../src/core'
-
-const users = ref([])
-
-onMounted(async () => {
-  const { data } = await useApi().get('https://reqres.in/api/users')
-
-  users.value = data
-})
-</script>

playground/nuxt.config.ts

@@ -1,7 +1,7 @@
 import { fileURLToPath } from 'node:url'
 
 export default defineNuxtConfig({
-  modules   : ['../src/module'],
+  modules   : ['../src/module', '@privyid/nhp'],
   alias     : { '@privyid/nuapi/core': fileURLToPath(new URL('../src/core/', import.meta.url)) },
   nuapi     : {},
   typescript: {

playground/pages/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <h1>Hello Index.vue</h1>
+  <button @click="refresh()">
+    Reload
+  </button>
+  <pre v-if="pending">Loading...</pre>
+  <pre v-else>{{ data }}</pre>
+</template>
+
+<script setup>
+import { useApi } from '@privyid/nuapi/core'
+import { useAsyncData } from '#app'
+
+const { data, refresh, pending } = await useAsyncData('users', async () => {
+  const { data } = await useApi().get('/api/users')
+
+  return data
+},
+)
+</script>

playground/plugins/api.server.ts

@@ -0,0 +1,6 @@
+import { defineNuxtPlugin } from '#app'
+import { getUser } from '../api/coba'
+
+export default defineNuxtPlugin(async () => {
+  await getUser()
+})

playground/server.config.ts

@@ -0,0 +1,9 @@
+import { defineServer } from '@privyid/nhp/core'
+
+export default defineServer([
+  {
+    name     : 'coba',
+    baseUrl  : '/api',
+    targetUrl: 'https://reqres.in/api',
+  },
+])

src/module.ts

@@ -15,8 +15,15 @@ export default defineNuxtModule({
     const { resolve } = createResolver(import.meta.url)
 
     addPlugin({
-      mode: 'all',
-      src : resolve('runtime/api'),
+      mode : 'server',
+      src  : resolve('runtime/api.server'),
+      order: -20,
+    })
+
+    addPlugin({
+      mode : 'client',
+      src  : resolve('runtime/api.client'),
+      order: -20,
     })
 
     extendViteConfig((config) => {

src/runtime/api.ts → src/runtime/api.client.ts

@@ -1,32 +1,24 @@
 import {
   useRuntimeConfig,
-  useRequestEvent,
   defineNuxtPlugin,
 } from '#imports'
 import {
   type ApiConfig,
   createApi,
   setApi,
 } from '@privyid/nuapi/core'
-import getURL from 'requrl'
 import { joinURL } from 'ufo'
 
 export default defineNuxtPlugin(() => {
-  const event   = useRequestEvent()
   const config  = useRuntimeConfig()
-  const host    = getURL(event?.node?.req)
+  const host    = window.location.origin
   const baseURL = joinURL(host, config.app.baseURL)
 
   const options: ApiConfig = {
     baseURL,
     headers: {},
   }
 
-  if (process.server && options.headers) {
-    // Don't accept brotli encoding because Node can't parse it
-    options.headers['accept-encoding'] = 'gzip, deflate'
-  }
-
   const instance = createApi(options)
 
   setApi(instance)

src/runtime/api.server.ts

@@ -0,0 +1,43 @@
+import {
+  useRuntimeConfig,
+  useRequestEvent,
+  defineNuxtPlugin,
+} from '#imports'
+import {
+  type ApiConfig,
+  type ApiInstance,
+  createApi,
+  setApi,
+} from '@privyid/nuapi/core'
+import getURL from 'requrl'
+import { joinURL } from 'ufo'
+
+declare module 'h3' {
+  interface H3Event {
+    $api?: ApiInstance,
+  }
+}
+
+export default defineNuxtPlugin(() => {
+  const event  = useRequestEvent()
+  const config = useRuntimeConfig()
+
+  let instance = event.$api
+
+  if (!instance) {
+    const host    = getURL(event?.node?.req)
+    const baseURL = joinURL(host, config.app.baseURL)
+
+    const options: ApiConfig = {
+      baseURL,
+      headers: { 'accept-encoding': 'gzip, deflate' },
+    }
+
+    instance   = createApi(options)
+    event.$api = instance
+  }
+
+  setApi(instance)
+
+  return { provide: { api: instance } }
+})