From 37e5152af75f215fcb117476a7f0df4c67f4ac63 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Mon, 15 Jan 2024 21:16:48 +0000
Subject: [PATCH] refactor: move to `import.meta.*` flags (#1349)

---
 nuxt.config.ts                                | 19 -------------
 src/app.vue                                   |  2 +-
 src/components/StaticMarkdownRender.server.ts |  2 +-
 src/components/TheGithubRepos.server.vue      |  4 +--
 src/components/TheHome.server.vue             |  2 +-
 src/components/TheTalks.server.vue            |  4 +--
 src/components/layout/TheSiteHeader.vue       |  4 +--
 src/content/blog/nuxt-server-components.md    |  2 +-
 src/modules/playwright-inline.ts              | 28 +++++++++++++++++++
 src/modules/runtime/NuxtPage.vue              |  2 +-
 src/modules/runtime/nuxt-link.ts              | 10 +++----
 src/pages/blog/[article].vue                  |  4 +--
 src/server/routes/og/[slug].get.ts            |  6 ++--
 src/server/routes/rss.xml.get.ts              |  2 +-
 src/server/routes/thumbnail/[slug].get.ts     |  6 ++--
 15 files changed, 51 insertions(+), 46 deletions(-)
 create mode 100644 src/modules/playwright-inline.ts

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 4e4d99b93..38b243d30 100644
--- a/nuxt.config.ts
+++ b/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'
-      }
     },
   },
 
diff --git a/src/app.vue b/src/app.vue
index ab482b378..ab474abab 100644
--- a/src/app.vue
+++ b/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')
diff --git a/src/components/StaticMarkdownRender.server.ts b/src/components/StaticMarkdownRender.server.ts
index 7cb8e728e..eb6b52a8b 100644
--- a/src/components/StaticMarkdownRender.server.ts
+++ b/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()
       )
diff --git a/src/components/TheGithubRepos.server.vue b/src/components/TheGithubRepos.server.vue
index a2e3638ae..1201c2ea1 100644
--- a/src/components/TheGithubRepos.server.vue
+++ b/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),
diff --git a/src/components/TheHome.server.vue b/src/components/TheHome.server.vue
index 03b67ec71..31cfe592f 100644
--- a/src/components/TheHome.server.vue
+++ b/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 => {
diff --git a/src/components/TheTalks.server.vue b/src/components/TheTalks.server.vue
index ef9fb1e35..062c6f26a 100644
--- a/src/components/TheTalks.server.vue
+++ b/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 => {
diff --git a/src/components/layout/TheSiteHeader.vue b/src/components/layout/TheSiteHeader.vue
index 13a02aa1a..24236d31c 100644
--- a/src/components/layout/TheSiteHeader.vue
+++ b/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
diff --git a/src/content/blog/nuxt-server-components.md b/src/content/blog/nuxt-server-components.md
index 9f6841308..2c493e11d 100644
--- a/src/content/blog/nuxt-server-components.md
+++ b/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()
       )
diff --git a/src/modules/playwright-inline.ts b/src/modules/playwright-inline.ts
new file mode 100644
index 000000000..0836b0ffa
--- /dev/null
+++ b/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')
+    })
+  },
+})
diff --git a/src/modules/runtime/NuxtPage.vue b/src/modules/runtime/NuxtPage.vue
index 852f21018..e55955581 100644
--- a/src/modules/runtime/NuxtPage.vue
+++ b/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,
diff --git a/src/modules/runtime/nuxt-link.ts b/src/modules/runtime/nuxt-link.ts
index f7d38fe5c..0f94d147d 100644
--- a/src/modules/runtime/nuxt-link.ts
+++ b/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
   }
 
diff --git a/src/pages/blog/[article].vue b/src/pages/blog/[article].vue
index 4af4e07de..25de54857 100644
--- a/src/pages/blog/[article].vue
+++ b/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'))
diff --git a/src/server/routes/og/[slug].get.ts b/src/server/routes/og/[slug].get.ts
index 505fe6b99..e7afe623a 100644
--- a/src/server/routes/og/[slug].get.ts
+++ b/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, {
diff --git a/src/server/routes/rss.xml.get.ts b/src/server/routes/rss.xml.get.ts
index d4d7ed97c..ff26cee1b 100644
--- a/src/server/routes/rss.xml.get.ts
+++ b/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',
diff --git a/src/server/routes/thumbnail/[slug].get.ts b/src/server/routes/thumbnail/[slug].get.ts
index 146309fac..00f06a069 100644
--- a/src/server/routes/thumbnail/[slug].get.ts
+++ b/src/server/routes/thumbnail/[slug].get.ts
@@ -1,9 +1,7 @@
 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) ||
@@ -11,7 +9,7 @@ export default defineEventHandler(async event => {
   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')