fix: add types to new node + shared contexts as well

.github/workflows/ci.yml

@@ -57,12 +57,12 @@ jobs:
 
       - run: pnpm dev:prepare
 
-      - name: 🧪 Test project
-        run: pnpm test
-
       - name: 🛠 Build project
         run: pnpm build
 
+      - name: 🧪 Test project
+        run: pnpm test
+
       - name: 💪 Type check
         run: pnpm test:types
 

docs/content/4.advanced/1.custom-provider.md

@@ -9,7 +9,7 @@ The runtime will receive a source, image modifiers and its provider options. It
 
 ```ts [providers/my-provider.ts]
 import { joinURL } from 'ufo'
-import { createOperationsGenerator, defineProvider } from '#image'
+import { createOperationsGenerator, defineProvider } from '@nuxt/image/runtime'
 
 const operationsGenerator = createOperationsGenerator()
 
@@ -66,7 +66,7 @@ export default defineNuxtConfig({
 })
 ```
 
-There are plenty of useful utilities that can be used to write providers by importing from `#image`. See [src/runtime/providers](https://github.com/nuxt/image/tree/main/src/runtime/providers) for more info.
+There are plenty of useful utilities that can be used to write providers by importing from `@nuxt/image/runtime`. See [src/runtime/providers](https://github.com/nuxt/image/tree/main/src/runtime/providers) for more info.
 
 ### Usage 
 Set attribute `provider` as your custom provider name. 

docs/tsconfig.json

@@ -1,3 +1,17 @@
 {
-  "extends": "./.nuxt/tsconfig.json"
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
 }

eslint.config.mjs

@@ -8,7 +8,7 @@ export default createConfigForNuxt({
   },
   dirs: {
     src: [
-      './playground',
+      './playground/app',
       './docs',
       './example',
     ],

example/tsconfig.json

@@ -1,3 +1,17 @@
 {
-  "extends": "./.nuxt/tsconfig.json"
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
 }

knip.json

@@ -43,9 +43,9 @@
     },
     "playground": {
       "entry": [
-        "providers/custom/index.ts",
-        "{components,layouts,pages,plugins,server}/**",
-        "{app,error}.vue",
+        "app/providers/custom/index.ts",
+        "app/{components,layouts,pages,plugins,server}/**",
+        "app/{app,error}.vue",
         "layers/**",
         "*.ts"
       ]

package.json

@@ -11,13 +11,18 @@
   "sideEffects": false,
   "type": "module",
   "exports": {
-    ".": "./dist/module.js"
+    ".": "./dist/module.js",
+    "./runtime": "./dist/runtime/index.js",
+    "./runtime/providers/*": "./dist/runtime/providers/*.js"
   },
   "main": "./dist/module.js",
   "typesVersions": {
     "*": {
       ".": [
         "./dist/module.d.ts"
+      ],
+      "./runtime": [
+        "./dist/runtime/index.d.ts"
       ]
     }
   },

playground/providers.ts → playground/app/providers.ts

@@ -1,6 +1,6 @@
 import type { ImageProviders } from '@nuxt/image'
 
-export interface Provider {
+interface Provider {
   name: keyof ImageProviders
   samples: {
     src: string

playground/providers/custom/index.ts → playground/app/providers/custom/index.ts

@@ -1,5 +1,8 @@
 import { joinURL } from 'ufo'
-import { defineProvider } from '#image'
+// this should normally be imported from '@nuxt/image/runtime'
+// but we want to run this without building the package,
+// which means supporting the stubbed `.ts` extension
+import { defineProvider } from '../../../../dist/runtime'
 
 export default defineProvider<{ baseURL?: string }>({
   getImage: (src, { modifiers, baseURL = '/' }) => {

playground/tsconfig.json

@@ -1,3 +1,17 @@
 {
-  "extends": "./.nuxt/tsconfig.json"
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
 }

src/module.ts

@@ -107,7 +107,7 @@ ${BuiltInProviders.map(p => `            ${JSON.stringify(p)}: ReturnType<typeof
         export {}
         `
       },
-    }, { nitro: true, nuxt: true })
+    }, { nitro: true, nuxt: true, node: true, shared: true })
 
     // Run setup
     for (const p of providers) {
@@ -116,11 +116,6 @@ ${BuiltInProviders.map(p => `            ${JSON.stringify(p)}: ReturnType<typeof
       }
     }
 
-    // Transpile and alias runtime
-    const runtimeDir = resolver.resolve('./runtime')
-    nuxt.options.alias['#image'] = runtimeDir
-    nuxt.options.build.transpile.push(runtimeDir)
-
     addImports({
       name: 'useImage',
       from: resolver.resolve('runtime/composables'),

src/runtime/providers/aliyun.ts

@@ -1,5 +1,6 @@
 import { joinURL, encodePath } from 'ufo'
-import { defineProvider, createOperationsGenerator } from '#image'
+import { createOperationsGenerator } from '../utils/index'
+import { defineProvider } from '../utils/provider'
 import { useRuntimeConfig } from '#imports'
 
 const operationsGenerator = createOperationsGenerator({

src/runtime/providers/awsAmplify.ts

@@ -1,5 +1,6 @@
 import { encodeQueryItem, joinURL } from 'ufo'
-import { defineProvider, createOperationsGenerator } from '#image'
+import { createOperationsGenerator } from '../utils/index'
+import { defineProvider } from '../utils/provider'
 
 const operationsGenerator = createOperationsGenerator({
   keyMap: {

src/runtime/providers/bunny.ts

@@ -1,5 +1,6 @@
 import { joinURL } from 'ufo'
-import { defineProvider, createOperationsGenerator } from '#image'
+import { createOperationsGenerator } from '../utils/index'
+import { defineProvider } from '../utils/provider'
 
 const operationsGenerator = createOperationsGenerator({
   keyMap: {

src/runtime/providers/caisy.ts

@@ -1,5 +1,6 @@
 import { joinURL } from 'ufo'
-import { defineProvider, createOperationsGenerator } from '#image'
+import { createOperationsGenerator } from '../utils/index'
+import { defineProvider } from '../utils/provider'
 
 const operationsGenerator = createOperationsGenerator({
   keyMap: {

src/runtime/providers/cloudflare.ts

@@ -1,5 +1,6 @@
 import { encodeQueryItem, joinURL } from 'ufo'
-import { defineProvider, createOperationsGenerator } from '#image'
+import { createOperationsGenerator } from '../utils/index'
+import { defineProvider } from '../utils/provider'
 
 const operationsGenerator = createOperationsGenerator({
   keyMap: {

src/runtime/providers/cloudimage.ts

@@ -1,5 +1,6 @@
 import { joinURL, hasProtocol } from 'ufo'
-import { defineProvider, createOperationsGenerator } from '#image'
+import { createOperationsGenerator } from '../utils/index'
+import { defineProvider } from '../utils/provider'
 
 const operationsGenerator = createOperationsGenerator({
   keyMap: {

src/runtime/providers/cloudinary.ts

@@ -1,7 +1,8 @@
 import { joinURL, encodePath } from 'ufo'
 import { defu } from 'defu'
 import type { ImageModifiers } from '@nuxt/image'
-import { defineProvider, createOperationsGenerator } from '#image'
+import { createOperationsGenerator } from '../utils/index'
+import { defineProvider } from '../utils/provider'
 
 export interface CloudinaryModifiers extends ImageModifiers {
   format: string

src/runtime/providers/contentful.ts

@@ -1,5 +1,6 @@
 import { withBase, parseURL } from 'ufo'
-import { defineProvider, createOperationsGenerator } from '#image'
+import { createOperationsGenerator } from '../utils/index'
+import { defineProvider } from '../utils/provider'
 
 // https://www.contentful.com/developers/docs/references/images-api/
 const contentfulCDN = 'https://images.ctfassets.net'

src/runtime/providers/directus.ts

@@ -1,5 +1,6 @@
 import { joinURL } from 'ufo'
-import { defineProvider, createOperationsGenerator } from '#image'
+import { createOperationsGenerator } from '../utils/index'
+import { defineProvider } from '../utils/provider'
 
 const operationsGenerator = createOperationsGenerator()
 

src/runtime/providers/fastly.ts

@@ -1,5 +1,6 @@
 import { joinURL } from 'ufo'
-import { defineProvider, createOperationsGenerator } from '#image'
+import { createOperationsGenerator } from '../utils/index'
+import { defineProvider } from '../utils/provider'
 
 const operationsGenerator = createOperationsGenerator({
   valueMap: {

src/runtime/providers/filerobot.ts

@@ -1,5 +1,6 @@
 import { joinURL, hasProtocol } from 'ufo'
-import { defineProvider, createOperationsGenerator } from '#image'
+import { createOperationsGenerator } from '../utils/index'
+import { defineProvider } from '../utils/provider'
 
 const operationsGenerator = createOperationsGenerator({
   keyMap: {

src/runtime/providers/glide.ts

@@ -1,7 +1,8 @@
 // https://glide.thephpleague.com/2.0/api/quick-reference/
 
 import { joinURL, encodePath, withBase } from 'ufo'
-import { defineProvider, createOperationsGenerator } from '#image'
+import { createOperationsGenerator } from '../utils/index'
+import { defineProvider } from '../utils/provider'
 
 const operationsGenerator = createOperationsGenerator({
   keyMap: {

src/runtime/providers/gumlet.ts

@@ -1,5 +1,6 @@
 import { joinURL } from 'ufo'
-import { defineProvider, createOperationsGenerator } from '#image'
+import { createOperationsGenerator } from '../utils/index'
+import { defineProvider } from '../utils/provider'
 
 const operationsGenerator = createOperationsGenerator({
   keyMap: {

src/runtime/providers/hygraph.ts

@@ -1,5 +1,5 @@
 import { joinURL, parseURL, withTrailingSlash } from 'ufo'
-import { defineProvider } from '#image'
+import { defineProvider } from '../utils/provider'
 
 type ImageOptimizations = {
   width?: number

src/runtime/providers/imageengine.ts

@@ -1,5 +1,6 @@
 import { joinURL, encodePath } from 'ufo'
-import { defineProvider, createOperationsGenerator } from '#image'
+import { createOperationsGenerator } from '../utils/index'
+import { defineProvider } from '../utils/provider'
 
 const operationsGenerator = createOperationsGenerator({
   keyMap: {

src/runtime/providers/imagekit.ts

@@ -1,5 +1,6 @@
 import { joinURL, withQuery, encodePath } from 'ufo'
-import { defineProvider, createOperationsGenerator } from '#image'
+import { createOperationsGenerator } from '../utils/index'
+import { defineProvider } from '../utils/provider'
 
 const operationsGenerator = createOperationsGenerator({
   keyMap: {

src/runtime/providers/imgix.ts

@@ -1,5 +1,6 @@
 import { joinURL } from 'ufo'
-import { defineProvider, createOperationsGenerator } from '#image'
+import { createOperationsGenerator } from '../utils/index'
+import { defineProvider } from '../utils/provider'
 
 export const operationsGenerator = createOperationsGenerator({
   keyMap: {