refactor: move to import.meta.* flags (#1349)

nuxt.config.ts

@@ -1,5 +1,4 @@
 import { useNuxt } from 'nuxt/kit'
-import type { InputPluginOption } from 'rollup'
 
 export default defineNuxtConfig({
   $production: {
@@ -57,24 +56,6 @@ export default defineNuxtConfig({
         config.prerender ||= {}
         config.prerender.crawlLinks = false
       }
-      ;(config.rollupConfig!.plugins as InputPluginOption[]).push({
-        name: 'purge-the-handler',
-        transform(_code, id) {
-          if (id.includes('og/[slug]') || id.includes('thumbnail/[slug]')) {
-            return 'export default defineEventHandler(() => {})'
-          }
-        },
-      })
-    },
-    'nitro:init'(nitro) {
-      nitro.options._config.rollupConfig!.plugins = (
-        nitro.options._config.rollupConfig!.plugins as InputPluginOption[]
-      ).filter(p => !p || !('name' in p) || p.name !== 'purge-the-handler')
-    },
-    'vite:extendConfig'(config, { isClient }) {
-      if (isClient) {
-        config.define!['process.env.prerender'] = 'false'
-      }
     },
   },
 

src/app.vue

@@ -31,7 +31,7 @@ useHead({
   },
 })
 
-if (process.server) {
+if (import.meta.server) {
   const PATH_RE = createRegExp(
     exactly(char.times.any().and(charNotIn('/')))
       .as('path')

src/components/StaticMarkdownRender.server.ts

@@ -6,7 +6,7 @@ export default defineComponent({
     path: String,
   },
   async setup(props) {
-    if (process.dev) {
+    if (import.meta.dev) {
       const { data } = await useAsyncData(() =>
         queryContent(props.path!).findOne()
       )

src/components/TheGithubRepos.server.vue

@@ -40,7 +40,7 @@
 <script lang="ts" setup>
 const config = useRuntimeConfig()
 const { data: repos } = await useAsyncData('repos', () => {
-  if (process.client && !process.dev) return Promise.resolve([])
+  if (import.meta.client && !import.meta.dev) return Promise.resolve([])
   const formatter = new Intl.NumberFormat('en-GB', {
     notation: 'compact',
     compactDisplay: 'short',
@@ -57,7 +57,7 @@ const { data: repos } = await useAsyncData('repos', () => {
   ]
   return Promise.all(
     repos.map(async repo => {
-      if (process.dev) {
+      if (import.meta.dev) {
         return {
           repo,
           stars: formatter.format(1400),

src/components/TheHome.server.vue

@@ -115,7 +115,7 @@ interface Talk {
 
 const { data: talks } = await useAsyncData(
   () =>
-    ((process.server || process.dev) as true) &&
+    ((import.meta.server || import.meta.dev) as true) &&
     import('../data/talks.json').then(r => r.default as any as Talk[]),
   {
     transform: talks => {

src/components/TheTalks.server.vue

@@ -13,7 +13,7 @@ interface Talk {
   release?: string
 }
 
-// if (process.env.prerender && process.server) {
+// if (import.meta.prerender && import.meta.server) {
 //   for (const conference of upcomingConferences) {
 //     await useStorage().setItem(conference.image, conference.link)
 //     appendHeader(
@@ -26,7 +26,7 @@ interface Talk {
 
 const { data: groups } = await useAsyncData(
   () =>
-    ((process.server || process.dev) as true) &&
+    ((import.meta.server || import.meta.dev) as true) &&
     import('../data/talks.json').then(r => r.default as any as Talk[]),
   {
     transform: talks => {

src/components/layout/TheSiteHeader.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const config = useRuntimeConfig()
-const redirect = process.dev
+const redirect = import.meta.dev
   ? `&redirect_uri=http://localhost:3000/auth/github`
   : ''
 const loginURL = `https://github.com/login/oauth/authorize?client_id=${config.public.githubClientId}${redirect}&scope=read:org`
@@ -36,7 +36,7 @@ watch(showMenu, value => {
 
 function toggleMenu(input?: Event | boolean) {
   const newValue = typeof input === 'boolean' ? input : !showMenu.value
-  if (process.server || input === showMenu.value) return
+  if (import.meta.server || input === showMenu.value) return
   if (document.startViewTransition) {
     document.startViewTransition(async () => {
       showMenu.value = newValue

src/content/blog/nuxt-server-components.md

@@ -130,7 +130,7 @@ export default defineComponent({
     path: String,
   },
   async setup(props) {
-    if (process.dev) {
+    if (import.meta.dev) {
       const { data } = await useAsyncData(() =>
         queryContent(props.path!).findOne()
       )

src/modules/playwright-inline.ts

@@ -0,0 +1,28 @@
+import { defineNuxtModule, useNuxt } from 'nuxt/kit'
+import type { InputPluginOption } from 'rollup'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'playwright-inline',
+  },
+  setup() {
+    // Work around a weird tracing behaviour that traces and includes imports that are not used in production
+    const nuxt = useNuxt()
+    nuxt.hook('nitro:config', config => {
+      ;(config.rollupConfig!.plugins as InputPluginOption[]).push({
+        name: 'purge-the-handler',
+        transform(_code, id) {
+          if (id.includes('og/[slug]') || id.includes('thumbnail/[slug]')) {
+            return 'export default defineEventHandler(() => {})'
+          }
+        },
+      })
+    })
+
+    nuxt.hook('nitro:init', nitro => {
+      nitro.options._config.rollupConfig!.plugins = (
+        nitro.options._config.rollupConfig!.plugins as InputPluginOption[]
+      ).filter(p => !p || !('name' in p) || p.name !== 'purge-the-handler')
+    })
+  },
+})

src/modules/runtime/NuxtPage.vue

@@ -15,7 +15,7 @@ nuxtApp.hooks.hook('link:prefetch', url => {
   }
 })
 const done = nuxtApp.deferHydration()
-if (process.client) {
+if (import.meta.client) {
   nuxtApp.hook('page:finish', () =>
     document.documentElement.scrollTo({
       top: 0,

src/modules/runtime/nuxt-link.ts

@@ -155,14 +155,14 @@ export default defineComponent({
 
     // Prefetching
     const prefetched = ref(false)
-    const el = process.server ? undefined : ref<HTMLElement | null>(null)
-    const elRef = process.server
+    const el = import.meta.server ? undefined : ref<HTMLElement | null>(null)
+    const elRef = import.meta.server
       ? undefined
       : (ref: any) => {
           el!.value = ref?.$el
         }
 
-    if (process.client) {
+    if (import.meta.client) {
       const shouldPrefetch =
         props.prefetch !== false &&
         props.noPrefetch !== true &&
@@ -266,7 +266,7 @@ type CallbackFn = () => void
 type ObserveFn = (element: Element, callback: CallbackFn) => () => void
 
 function useObserver(): { observe: ObserveFn } | undefined {
-  if (process.server) {
+  if (import.meta.server) {
     return
   }
 
@@ -311,7 +311,7 @@ function useObserver(): { observe: ObserveFn } | undefined {
 }
 
 function isSlowConnection() {
-  if (process.server) {
+  if (import.meta.server) {
     return
   }
 

src/pages/blog/[article].vue

@@ -55,7 +55,7 @@ const path = computed(() =>
 const { data: page } = await useAsyncData(
   path.value,
   () =>
-    ((process.server || process.dev) as true) &&
+    ((import.meta.server || import.meta.dev) as true) &&
     queryContent(path.value)
       .only(['title', 'date', 'tags', 'description'])
       .findOne()
@@ -70,7 +70,7 @@ if (!page.value) {
 
 route.meta.title = page.value.title
 
-if (process.server) {
+if (import.meta.server) {
   const SLUG_RE = createRegExp(
     exactly('/')
       .and(charNotIn('/').times.any().as('slug'))

src/server/routes/og/[slug].get.ts

@@ -6,10 +6,8 @@ import {
   getScreenshot,
 } from '../../open-graph/index'
 
-const isDev = process.env.VERCEL_ENV === 'development'
-
 export default defineEventHandler(async event => {
-  if (!process.dev && !process.env.prerender) return
+  if (!import.meta.dev && !import.meta.prerender) return
 
   const slug = getRouterParam(event, 'slug')!.replace(/\.jpg$/, '')
 
@@ -31,7 +29,7 @@ export default defineEventHandler(async event => {
   const filePath = await writeTempFile(parsedReqs.title, html)
   const fileUrl = `file://${filePath}`
 
-  const file = await getScreenshot(fileUrl, isDev)
+  const file = await getScreenshot(fileUrl, import.meta.dev)
 
   // @ts-expect-error bug in h3 - https://github.com/unjs/h3/issues/614
   setHeaders(event, {

src/server/routes/rss.xml.get.ts

@@ -4,7 +4,7 @@ import { Feed } from 'feed'
 import { metadata } from '#metadata.json'
 
 export default defineEventHandler(async () => {
-  if (!process.dev && !process.env.prerender) return
+  if (!import.meta.dev && !import.meta.prerender) return
 
   const feed = new Feed({
     title: 'Daniel Roe',

src/server/routes/thumbnail/[slug].get.ts

@@ -1,17 +1,15 @@
 import { getScreenshot } from '../../open-graph/index'
 
-const isDev = process.env.VERCEL_ENV === 'development'
-
 export default defineEventHandler(async event => {
-  if (!process.dev && !process.env.prerender) return
+  if (!import.meta.dev && !import.meta.prerender) return
 
   const website =
     (getQuery(event).website as string) ||
     (await useStorage().getItem(getRouterParam(event, 'slug')!))
   if (!website || typeof website !== 'string')
     throw createError('Missing website query parameter')
 
-  const file = await getScreenshot(website, isDev)
+  const file = await getScreenshot(website, import.meta.dev)
 
   event.node.res.statusCode = 200
   event.node.res.setHeader('Content-Type', 'image/jpeg')