chore: new type issues

Author: harlan-zw

playground/nuxt.config.ts

@@ -151,6 +151,7 @@ export default defineNuxtConfig({
       },
     },
     '/satori/route-rules/**': {
+      // @ts-expect-error untyped
       site: {
         name: 'nuxt-og-image-route-rules',
       },

src/build/devtools.ts

@@ -49,11 +49,11 @@ export function setupDevToolsUI(options: ModuleOptions, resolve: Resolver['resol
     const rpc = extendServerRpc<ClientFunctions, ServerFunctions>('nuxt-og-image', {
       async ejectCommunityTemplate(path: string) {
         const [dirName, componentName] = path.split('/')
-        const dir = resolve(nuxt.options.rootDir, 'components', dirName)
+        const dir = resolve(nuxt.options.rootDir, 'components', dirName || '')
         if (!existsSync(dir)) {
           mkdirSync(dir)
         }
-        const newPath = resolve(dir, componentName)
+        const newPath = resolve(dir, componentName || '')
         const templatePath = resolve(`./runtime/app/components/Templates/Community/${componentName}`)
         // readFile, we need to modify it
         const template = (await readFile(templatePath, 'utf-8')).replace('{{ title }}', `{{ title }} - Ejected!`)

src/compatibility.ts

@@ -125,9 +125,9 @@ export function resolveNitroPreset(nitroConfig?: NitroConfig): string {
 }
 
 export function getPresetNitroPresetCompatibility(target: string) {
-  let compatibility: RuntimeCompatibilitySchema = RuntimeCompatibility[target as keyof typeof RuntimeCompatibility]
+  let compatibility: RuntimeCompatibilitySchema = RuntimeCompatibility[target as keyof typeof RuntimeCompatibility]!
   if (!compatibility)
-    compatibility = RuntimeCompatibility['nitro-dev']
+    compatibility = RuntimeCompatibility['nitro-dev']!
   return compatibility
 }
 

src/kit.ts

@@ -1,6 +1,5 @@
 import type { Nuxt, NuxtModule } from '@nuxt/schema'
-import { addTemplate, createResolver, loadNuxtModuleInstance, useNuxt } from '@nuxt/kit'
-import { relative } from 'pathe'
+import { loadNuxtModuleInstance, useNuxt } from '@nuxt/kit'
 
 /**
  * Get the user provided options for a Nuxt module.
@@ -33,33 +32,6 @@ export async function getNuxtModuleOptions(module: string | NuxtModule, nuxt: Nu
   return inlineOptions
 }
 
-export function extendTypes(module: string, template: (options: { typesPath: string }) => string | Promise<string>) {
-  const nuxt = useNuxt()
-  const { resolve } = createResolver(import.meta.url)
-  // paths.d.ts
-  addTemplate({
-    filename: `module/${module}.d.ts`,
-    getContents: async () => {
-      const typesPath = relative(resolve(nuxt!.options.rootDir, nuxt!.options.buildDir, 'module'), resolve('runtime/types'))
-      const s = await template({ typesPath })
-      return `// Generated by ${module}
-${s}
-export {}
-`
-    },
-  })
-
-  nuxt.hooks.hook('prepare:types', ({ references }) => {
-    references.push({ path: resolve(nuxt.options.buildDir, `module/${module}.d.ts`) })
-  })
-  nuxt.hooks.hook('nitro:config', (config) => {
-    config.typescript = config.typescript || {}
-    config.typescript.tsConfig = config.typescript.tsConfig || {}
-    config.typescript.tsConfig.include = config.typescript.tsConfig.include || []
-    config.typescript.tsConfig.include.push(`./module/${module}.d.ts`)
-  })
-}
-
 export function isNuxtGenerate(nuxt: Nuxt = useNuxt()) {
   return (nuxt.options as any)._generate /* TODO: remove in future major */ || nuxt.options.nitro.static || nuxt.options.nitro.preset === 'static'
 }

src/module.ts

@@ -17,7 +17,7 @@ import type {
 import * as fs from 'node:fs'
 import { existsSync } from 'node:fs'
 import { readFile } from 'node:fs/promises'
-import { addBuildPlugin, addComponent, addComponentsDir, addImports, addPlugin, addServerHandler, addServerPlugin, addTemplate, createResolver, defineNuxtModule, hasNuxtModule, hasNuxtModuleCompatibility } from '@nuxt/kit'
+import { addBuildPlugin, addComponent, addComponentsDir, addImports, addPlugin, addServerHandler, addServerPlugin, addTemplate, addTypeTemplate, createResolver, defineNuxtModule, hasNuxtModule, hasNuxtModuleCompatibility } from '@nuxt/kit'
 import { defu } from 'defu'
 import { installNuxtSiteConfig } from 'nuxt-site-config/kit'
 import { hash } from 'ohash'
@@ -38,7 +38,7 @@ import {
   getPresetNitroPresetCompatibility,
   resolveNitroPreset,
 } from './compatibility'
-import { extendTypes, getNuxtModuleOptions, isNuxtGenerate } from './kit'
+import { getNuxtModuleOptions, isNuxtGenerate } from './kit'
 import { normaliseFontInput } from './pure'
 import { logger } from './runtime/logger'
 import { checkLocalChrome, downloadFont, hasResolvableDependency, isUndefinedOrTruthy } from './util'
@@ -155,7 +155,6 @@ export default defineNuxtModule<ModuleOptions>({
     name: 'nuxt-og-image',
     compatibility: {
       nuxt: '>=3.16.0',
-      bridge: false,
     },
     configKey: 'ogImage',
   },
@@ -222,7 +221,7 @@ export default defineNuxtModule<ModuleOptions>({
     const basePath = config.zeroRuntime ? './runtime/server/routes/__zero-runtime' : './runtime/server/routes'
     let publicDirAbs = nuxt.options.dir.public
     if (!isAbsolute(publicDirAbs)) {
-      publicDirAbs = publicDirAbs in nuxt.options.alias ? nuxt.options.alias[publicDirAbs] : resolve(nuxt.options.rootDir, publicDirAbs)
+      publicDirAbs = (publicDirAbs in nuxt.options.alias ? nuxt.options.alias[publicDirAbs] : resolve(nuxt.options.rootDir, publicDirAbs)) || ''
     }
     if (isProviderEnabledForEnv('satori', nuxt, config)) {
       let attemptSharpUsage = false
@@ -463,6 +462,8 @@ export default defineNuxtModule<ModuleOptions>({
           from: resolve(`./runtime/app/composables/${name}`),
         })
         if (!nuxt.options.dev) {
+          nuxt.options.optimization.treeShake.composables.client = nuxt.options.optimization.treeShake.composables.client || {}
+          nuxt.options.optimization.treeShake.composables.client['nuxt-og-image'] = nuxt.options.optimization.treeShake.composables.client['nuxt-og-image'] || []
           nuxt.options.optimization.treeShake.composables.client['nuxt-og-image'].push(name)
         }
       })
@@ -578,23 +579,24 @@ export default defineNuxtModule<ModuleOptions>({
       return `export const theme = ${JSON.stringify(unoCssConfig)}`
     }
 
-    extendTypes('nuxt-og-image', ({ typesPath }) => {
-      // need to map our components to types so we can import them
-      const componentImports = ogImageComponentCtx.components.map((component) => {
-        const relativeComponentPath = relative(resolve(nuxt!.options.rootDir, nuxt!.options.buildDir, 'module'), component.path!)
-        // remove dirNames from component name
-        const name = config.componentDirs
-          // need to sort by longest first so we don't replace the wrong part of the string
-          .sort((a, b) => b.length - a.length)
-          .reduce((name, dir) => {
-            // only replace from the start of the string
-            return name.replace(new RegExp(`^${dir}`), '')
-          }, component.pascalName)
-        return `    '${name}': typeof import('${relativeComponentPath}')['default']`
-      }).join('\n')
-      return `
-declare module 'nitropack' {
-  interface NitroRouteRules {
+    addTypeTemplate({
+      filename: 'module/nuxt-og-image.d.ts',
+      getContents: (data) => {
+        const typesPath = relative(resolve(data.nuxt!.options.rootDir, data.nuxt!.options.buildDir, 'module'), resolve('runtime/types'))
+        // need to map our components to types so we can import them
+        const componentImports = ogImageComponentCtx.components.map((component) => {
+          const relativeComponentPath = relative(resolve(nuxt!.options.rootDir, nuxt!.options.buildDir, 'module'), component.path!)
+          // remove dirNames from component name
+          const name = config.componentDirs
+            // need to sort by longest first so we don't replace the wrong part of the string
+            .sort((a, b) => b.length - a.length)
+            .reduce((name, dir) => {
+              // only replace from the start of the string
+              return name.replace(new RegExp(`^${dir}`), '')
+            }, component.pascalName)
+          return `    '${name}': typeof import('${relativeComponentPath}')['default']`
+        }).join('\n')
+        const types = `interface NitroRouteRules {
     ogImage?: false | import('${typesPath}').OgImageOptions & Record<string, any>
   }
   interface NitroRouteConfig {
@@ -603,7 +605,14 @@ declare module 'nitropack' {
   interface NitroRuntimeHooks {
     'nuxt-og-image:context': (ctx: import('${typesPath}').OgImageRenderEventContext) => void | Promise<void>
     'nuxt-og-image:satori:vnodes': (vnodes: import('${typesPath}').VNode, ctx: import('${typesPath}').OgImageRenderEventContext) => void | Promise<void>
-  }
+  }`
+        return `
+declare module 'nitropack' {
+${types}
+}
+
+declare module 'nitropack/types' {
+${types}
 }
 
 declare module '#og-image/components' {
@@ -614,7 +623,13 @@ ${componentImports}
 declare module '#og-image/unocss-config' {
   export type theme = any
 }
+
+export {}
 `
+      },
+    }, {
+      nitro: true,
+      nuxt: true,
     })
 
     const cacheEnabled = typeof config.runtimeCacheStorage !== 'undefined' && config.runtimeCacheStorage !== false

src/runtime/app/utils/plugins.ts

@@ -51,7 +51,7 @@ export function ogImageCanonicalUrls(nuxtApp: NuxtSSRContext['nuxt']) {
           ctx.tags = ctx.tags.filter(Boolean)
 
           for (const tag of ctx.tags) {
-            if (tag.tag === 'meta' && (tag.props.property === 'og:image' || ['twitter:image:src', 'twitter:image'].includes(tag.props.name))) {
+            if (tag.tag === 'meta' && (tag.props.property === 'og:image' || ['twitter:image:src', 'twitter:image'].includes(tag.props.name || ''))) {
               if (!tag.props.content) {
                 tag.props = {} // equivalent to removing
                 continue
@@ -61,7 +61,7 @@ export function ogImageCanonicalUrls(nuxtApp: NuxtSSRContext['nuxt']) {
               // property twitter:image:src
               if (!tag.props.content?.startsWith('https')) {
                 await nuxtApp.runWithContext(() => {
-                  tag.props.content = toValue(withSiteUrl(tag.props.content, {
+                  tag.props.content = toValue(withSiteUrl(tag.props.content || '', {
                     withBase: true,
                   }))
                 })
@@ -91,7 +91,7 @@ export function routeRuleOgImage(nuxtApp: NuxtSSRContext['nuxt']) {
       createRadixRouter({ routes: ssrContext?.runtimeConfig?.nitro?.routeRules }),
     )
     const matchedRules = _routeRulesMatcher.matchAll(
-      withoutBase(path.split('?')[0], ssrContext?.runtimeConfig?.app.baseURL || ''),
+      withoutBase(path.split('?')?.[0] || '', ssrContext?.runtimeConfig?.app.baseURL || ''),
     ).reverse()
     const combinedRules = defu({}, ...matchedRules) as any
     let routeRules = combinedRules?.ogImage as NitroRouteRules['ogImage']

src/runtime/server/og-image/context.ts

@@ -171,7 +171,7 @@ const PAYLOAD_REGEX = /<script.+id="nuxt-og-image-options"[^>]*>(.+?)<\/script>/
 
 function getPayloadFromHtml(html: string | unknown): string | null {
   const match = String(html).match(PAYLOAD_REGEX)
-  return match ? match[1] : null
+  return match ? String(match[1]) : null
 }
 
 export function extractAndNormaliseOgImageOptions(html: string): OgImageOptions | false {

src/runtime/server/og-image/satori/plugins/unocss.ts

@@ -1,6 +1,11 @@
 import type { VNode } from '../../../../types'
 import { defineSatoriTransformer } from '../utils'
 
+function safeSplit(s: string) {
+  const [key, value] = s.split(':')
+  return [String(key || '').trim(), String(value || '').trim()] satisfies [string, string]
+}
+
 // convert classes to inline style using unocss, provides more robust API than satori
 export default defineSatoriTransformer({
   filter: (node: VNode) => !!node.props?.class,
@@ -13,7 +18,7 @@ export default defineSatoriTransformer({
     for (const token of classes.split(' ').filter(c => c.trim())) {
       const parsedToken = await ctx.unocss.parseToken(token)
       if (parsedToken) {
-        const inlineStyles = parsedToken[0][2].split(';').filter(s => !!s?.trim())
+        const inlineStyles = String(parsedToken?.[0]?.[2]).split(';').filter(s => !!s?.trim())
         const vars: Record<string, string> = {
           '--color-gray-50': '249 250 251',
           '--color-gray-100': '243 244 246',
@@ -29,27 +34,30 @@ export default defineSatoriTransformer({
         }
         inlineStyles.filter(s => s.startsWith('--'))
           .forEach((s) => {
-            const [key, value] = s.split(':')
+            const [key, value] = safeSplit(s)
             vars[key] = value
           })
         inlineStyles.filter(s => !s.startsWith('--'))
           .forEach((s) => {
-            const [key, value] = s.split(':')
+            const [key, value] = safeSplit(s)
             const camelCasedKey = key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())
             // we need to replace any occurances of a var key with the var values, avoid replacing existing inline styles
             if (!styles[camelCasedKey])
+              // @ts-expect-error untyped
               styles[camelCasedKey] = value.replace(/var\((.*?)\)/g, (_, k) => vars[k.trim()])
 
             // we need to replace this rgba syntax with either a regular rgb if opacity is 1
             // rgb(59 130 246 / 1) -> rgba(59, 130, 246)
             // rgba(59 130 246 / 0.5) -> rgba(59, 130, 246, 0.5)
             if (styles[camelCasedKey] && styles[camelCasedKey].includes('/')) {
               const [rgb, opacity] = styles[camelCasedKey].split('/')
-              if (opacity.trim() === '1)')
-                // eslint-disable-next-line regexp/optimal-quantifier-concatenation
-                styles[camelCasedKey] = rgb.replace(/(\d+) (\d+) (\d+).*/, (_, r, g, b) => `${r}, ${g}, ${b})`)
-              else
-                styles[camelCasedKey] = `${rgb.replace('rgb', 'rgba').replaceAll(' ', ', ')}${opacity.trim()}`
+              if (rgb && opacity) {
+                if (opacity.trim() === '1)')
+                  // eslint-disable-next-line regexp/optimal-quantifier-concatenation
+                  styles[camelCasedKey] = rgb.replace(/(\d+) (\d+) (\d+).*/, (_, r, g, b) => `${r}, ${g}, ${b})`)
+                else
+                  styles[camelCasedKey] = `${rgb.replace('rgb', 'rgba').replaceAll(' ', ', ')}${opacity.trim()}`
+              }
             }
           })
         replacedClasses.add(token)

src/runtime/server/og-image/satori/renderer.ts

@@ -34,7 +34,7 @@ async function resolveFonts(event: OgImageRenderEventContext) {
             return _font
           })
         }
-        localFontPromises.push(fontPromises[font.cacheKey])
+        localFontPromises.push(fontPromises[font.cacheKey]!)
       }
     }
   }

src/runtime/server/plugins/prerender.ts

@@ -37,7 +37,7 @@ export default defineNitroPlugin(async (nitro) => {
     const index = html.bodyAppend.findIndex(script => script.includes('id="nuxt-og-image-options"'))
     if (index !== -1) {
       // we need to remove `<script id="nuxt-og-image-options" type="application/json">...anything...</script>`
-      html.bodyAppend[index] = html.bodyAppend[index].replace(/<script id="nuxt-og-image-options" type="application\/json">[\s\S]*?<\/script>/, '')
+      html.bodyAppend[index] = String(html.bodyAppend[index]).replace(/<script id="nuxt-og-image-options" type="application\/json">[\s\S]*?<\/script>/, '')
       html.bodyAppend[index] = html.bodyAppend[index].replace(/<script id="nuxt-og-image-overrides" type="application\/json">[\s\S]*?<\/script>/, '')
     }
   })