chore: dep updates and minor internal type fixes (#748)

Co-authored-by: Daniel Roe <daniel@roe.dev>

example/components/Author.vue

@@ -18,6 +18,8 @@ import {
   ref,
 } from '@nuxtjs/composition-api'
 
+/** @typedef {{ name: number }} User */
+
 export default defineComponent({
   props: {
     userId: {
@@ -26,10 +28,10 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const user = ref({})
+    const user = ref(/** @type {User} */({}))
 
     const { $http } = useContext()
-    
+
     useFetch(async () => {
       user.value = await $http.$get(
         `https://jsonplaceholder.typicode.com/users/${props.userId}`

example/nuxt.config.js

@@ -1,6 +1,7 @@
-const fetch = require('node-fetch')
+import fetch from 'node-fetch'
 const serverlessEnvironment = !!process.env.NOW_BUILD
 
+/** @type {import('@nuxt/types').NuxtConfig} */
 export default {
   server: {
     port: process.env.PORT || 8000,
@@ -20,13 +21,14 @@ export default {
   generate: {
     interval: 2000,
     async routes() {
+      /** @type {{ userId: number, id: number, title: string, body: string }[]} */
       const posts = await fetch('https://jsonplaceholder.typicode.com/posts')
         .then(res => res.json())
         .then(d => d.slice(0, 20))
       const routes = posts.map(post => `/posts/${post.id}`)
 
       return ['/'].concat(routes)
     },
-    exclude: ['/posts/23']
+    exclude: [RegExp('/posts/23')]
   },
 }

example/package.json

@@ -6,7 +6,9 @@
     "vue-content-placeholders": "^0.2.1"
   },
   "devDependencies": {
-    "nuxt": "latest"
+    "@nuxt/types": "^2.16.3",
+    "@types/node-fetch": "^2.6.3",
+    "nuxt": "^2.16.3"
   },
   "scripts": {
     "dev": "nuxt",

example/pages/index.vue

@@ -34,16 +34,18 @@ import {
   ref,
 } from '@nuxtjs/composition-api'
 
+/** @typedef {{ userId: number, id: number, title: string, body: string }} Post */
+
 export default defineComponent({
   setup() {
-    const posts = ref(null)
+    const posts = ref(/** @type {Post[]} */([]))
 
     const { $http } = useContext()
-    
+
     useFetch(async () => {
-      posts.value = await $http
-        .$get('https://jsonplaceholder.typicode.com/posts')
-        .then(posts => posts.slice(0, 20))
+      /** @type {Post[]} */
+      const data = await $http.$get('https://jsonplaceholder.typicode.com/posts')
+      posts.value = data.slice(0, 20)
     })
 
     return { posts }

example/pages/posts/_id.vue

@@ -53,7 +53,7 @@ export default defineComponent({
       post.value = await $http.$get(
         `https://jsonplaceholder.typicode.com/posts/${params.value.id}`
       )
-    })    
+    })
 
     return { post }
   },

example/plugins/vue-placeholders.js

@@ -1,4 +1,5 @@
 import Vue from 'vue'
+// @ts-ignore
 import VueContentPlaceholders from 'vue-content-placeholders'
 
 Vue.use(VueContentPlaceholders)

example/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": ".",
+    "strict": true,
+    "sourceMap": true,
+    "allowJs": true,
+    "checkJs": true,
+    "noEmit": true,
+    "target": "ESNext",
+    "module": "CommonJS",
+    "moduleResolution": "Node",
+    "lib": [
+      "ESNext",
+      "DOM"
+    ],
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "types": [
+      "node",
+      "@nuxt/http",
+      "@nuxt/types",
+    ]
+  },
+}

example/types/vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package.json

@@ -67,40 +67,42 @@
     "ufo": "^1.0.1"
   },
   "devDependencies": {
-    "@babel/traverse": "^7.20.13",
-    "@babel/types": "^7.20.7",
+    "@babel/traverse": "^7.21.4",
+    "@babel/types": "^7.21.4",
     "@nuxt/test-utils": "^0.2.2",
-    "@nuxt/types": "^2.15.8",
+    "@nuxt/types": "^2.16.3",
     "@nuxt/typescript-build": "^3.0.1",
     "@nuxtjs/module-test-utils": "^1.6.3",
     "@nuxtjs/pwa": "^3.3.5",
     "@release-it/conventional-changelog": "^5.1.1",
     "@types/fs-extra": "^9.0.13",
+    "@types/node": "^16.18.23",
     "@types/normalize-path": "^3.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.50.0",
-    "@typescript-eslint/parser": "^5.50.0",
-    "c8": "^7.12.0",
+    "@typescript-eslint/eslint-plugin": "^5.57.0",
+    "@typescript-eslint/parser": "^5.57.0",
+    "c8": "^7.13.0",
     "codecov": "^3.8.3",
     "core-js": "3.29.1",
     "cross-env": "^7.0.3",
-    "eslint": "^8.33.0",
-    "eslint-config-prettier": "^8.6.0",
+    "eslint": "^8.37.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-promise": "^6.1.1",
     "happy-dom": "^8.9.0",
     "http-server": "^14.1.1",
-    "lint-staged": "^13.1.0",
+    "lint-staged": "^13.2.0",
     "npm-run-all": "^4.1.5",
-    "nuxt": "^2.15.8",
-    "prettier": "^2.8.3",
+    "nuxt": "^2.16.3",
+    "prettier": "^2.8.7",
     "release-it": "15.9.3",
-    "rimraf": "^4.1.2",
+    "rimraf": "^4.4.1",
     "siroc": "0.16.0",
     "start-server-and-test": "^2.0.0",
     "testcafe": "2.4.0",
     "ts-loader": "^8.4.0",
     "tsd": "^0.28.1",
     "typescript": "5.0.3",
+    "vite": "^4.2.1",
     "vitest": "^0.29.8",
     "yorkie": "^2.0.0"
   },

test/fixture/api/posts.js

@@ -1,4 +1,5 @@
+/** @type {import('@nuxt/types').ServerMiddleware} */
 module.exports = (req, res) => {
   res.setHeader('Content-Type', 'application/json')
-  return res.end(JSON.stringify({ id: req.url.split('/').slice(-1)[0] }))
+  res.end(JSON.stringify({ id: req.url?.split('/').slice(-1)[0] }))
 }

test/fixture/components/comp.vue

@@ -7,6 +7,10 @@
 <script>
 import { defineComponent, ref, useFetch } from '@nuxtjs/composition-api'
 
+/**
+* @param {string} result
+* @param {number} [time=100]
+*/
 export function fetcher(result, time = 100) {
   return new Promise(resolve => {
     return setTimeout(() => {

test/fixture/pages/hooks.vue

@@ -30,7 +30,7 @@ import { ran, ranSsr } from '../plugins/global'
 export default defineComponent({
   setup() {
     const globalInject = inject('globalKey', false)
-    const globalConfig = inject('globalContext', {})
+    const globalConfig = inject('globalContext', /** @type {import('@nuxt/types').Context['$config']} */({}))
 
     return { globalInject, ran, ranSsr, globalConfig }
   },

test/fixture/pages/index.vue

@@ -67,7 +67,9 @@ useFetch(async () => {
 
 const ttfb = ref(-1)
 onMounted(() => {
-  ttfb.value =
-    globalThis.performance.getEntriesByType('navigation')[0].responseStart
+  const entry = globalThis.performance.getEntriesByType('navigation')[0]
+  if (entry instanceof PerformanceNavigationTiming) {
+    ttfb.value = entry.responseStart
+  }
 })
 </script>

test/fixture/pages/ttfb.vue

@@ -18,8 +18,10 @@ export default defineComponent({
     useFetch(() => {})
 
     onMounted(() => {
-      dataset.ttfb =
-        globalThis.performance.getEntriesByType('navigation')[0].responseStart
+      const entry = globalThis.performance.getEntriesByType('navigation')[0]
+      if (entry instanceof PerformanceNavigationTiming) {
+        dataset.ttfb = entry.responseStart
+      }
     })
 
     return {

test/fixture/utils/index.js

@@ -1,3 +1,7 @@
+/**
+ * @param {string} result
+ * @param {number} [time=100]
+ */
 export function fetcher(result, time = 100) {
   return new Promise(resolve => {
     return setTimeout(() => {

test/unit/babel-ssr-ref.spec.ts

@@ -19,7 +19,9 @@ const stat3 = useStatic(() => 4)
 
 describe('ssrRef babel plugin', () => {
   it('works', () => {
-    const { code } = transform(example, { plugins: [plugin] })
+    const transformed = transform(example, { plugins: [plugin] })
+    expect(transformed).toBeTruthy()
+    const { code } = transformed!
     expect(code).toMatchSnapshot()
   })
 })

test/unit/ssr-ref.spec.ts

@@ -6,8 +6,13 @@ import { ssrRef, globalPlugin } from '../../src/runtime/composables'
 
 let ssrContext: Record<string, any>
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+function dummyInject() {}
+
 vi.mock('../../src/runtime/composables/utils', async () => {
-  const utils = await vi.importActual('../../src/runtime/composables/utils')
+  const utils = await vi.importActual<
+    typeof import('../../src/runtime/composables/utils')
+  >('../../src/runtime/composables/utils')
   return {
     ...utils,
     getCurrentInstance: vi.fn().mockImplementation(() => ({
@@ -22,7 +27,7 @@ describe('ssrRef reactivity', () => {
   beforeEach(async () => {
     process.server = true
     ssrContext = Object.assign({}, { nuxt: {} })
-    globalPlugin({ app: { context: { ssrContext } } } as any, null)
+    globalPlugin({ app: { context: { ssrContext } } } as any, dummyInject)
   })
   test('ssrRefs react to change in state', async () => {
     process.client = false
@@ -50,7 +55,7 @@ describe('ssrRef reactivity', () => {
     // simulate the new request comes in
     globalPlugin(
       { app: { context: { ssrContext: { nuxt: {} } } } } as any,
-      null
+      dummyInject
     )
 
     concurrentRef.value = 2

tsconfig.json

@@ -4,6 +4,8 @@
     "rootDir": ".",
     "strict": true,
     "sourceMap": true,
+    "allowJs": true,
+    "checkJs": true,
     "target": "ESNext",
     "module": "CommonJS",
     "moduleResolution": "Node",
@@ -15,9 +17,16 @@
       "@nuxtjs/composition-api/dist/runtime/globals": [
         "./src/runtime/globals.ts"
       ],
-      "@nuxtjs/composition-api": ["./src/index.ts"]
+      "@nuxtjs/composition-api": ["./src/runtime/index.ts"]
     },
     "types": ["node", "@nuxt/types"]
   },
-  "include": ["src/**/*.ts", "test/fixture/**/*.vue", "test/fixture/**/*.ts"]
+  "include": [
+    "src/**/*.ts",
+    "test/fixture/**/*.vue",
+    "test/fixture/**/*.js",
+    "test/fixture/**/*.ts",
+    "tsd/**/*.ts",
+    "unit/**/*.ts"
+  ]
 }