Refactor env variable handling

.env/.env.development

@@ -0,0 +1 @@
+PUBLIC_WEBSITE_URL="http://localhost:3000"

.env/.env.example

@@ -0,0 +1,11 @@
+# Website (Required)
+PUBLIC_WEBSITE_URL=
+
+# Analytics (Optional)
+PUBLIC_POSTHOG_KEY=
+
+# Discord Bot (Optional)
+DISCORD_CLIENT_ID=
+DISCORD_PUBLIC_KEY=
+DISCORD_CLIENT_SECRET=
+DISCORD_TOKEN=

apps/browser-extension/package.json

@@ -13,20 +13,19 @@
   },
   "scripts": {
     "check": "tsc --noEmit",
-    "dev": "plasmo dev",
+    "dev": "use-env -p PLASMO -- plasmo dev",
     "build:styles": "cp ../../packages/react/style.css ./src/style.css",
     "build": "pnpm build:chrome",
-    "build:chrome": "plasmo build --target=chrome-mv3 --zip",
-    "package": "plasmo package"
+    "build:chrome": "use-env -p PLASMO -P -- plasmo build --target=chrome-mv3 --zip"
   },
   "dependencies": {
     "@evaluate/components": "workspace:^",
     "@evaluate/engine": "workspace:^",
-    "@evaluate/env": "workspace:^",
     "@evaluate/helpers": "workspace:^",
     "@evaluate/hooks": "workspace:^",
-    "@evaluate/style": "workspace:^",
     "@evaluate/shapes": "workspace:^",
+    "@evaluate/style": "workspace:^",
+    "@t3-oss/env-core": "^0.11.1",
     "framer-motion": "^11.12.0",
     "lucide-react": "^0.338.0",
     "posthog-js": "1.161.3",

apps/browser-extension/src/background/index.ts

@@ -1,7 +1,7 @@
 import { executeCode } from '@evaluate/engine/dist/execute';
 import { searchRuntimes } from '@evaluate/engine/dist/runtimes';
 import type { PartialRuntime } from '@evaluate/shapes';
-import { env } from '~env';
+import env from '~env';
 import analytics from '~services/analytics';
 
 chrome.action.setTitle({ title: 'Evaluate' });
@@ -33,7 +33,7 @@ chrome.action.onClicked.addListener(async () => {
   });
 
   chrome.tabs.create({
-    url: env.PLASMO_PUBLIC_WEBSITE_URL,
+    url: `${env.PLASMO_PUBLIC_WEBSITE_URL}`,
   });
 });
 

apps/browser-extension/src/contents/_components/results-dialog.tsx

@@ -14,7 +14,7 @@ import { cn } from '@evaluate/helpers/dist/class';
 import type { ExecuteResult, PartialRuntime } from '@evaluate/shapes';
 import { ExternalLinkIcon, XIcon } from 'lucide-react';
 import { useMemo } from 'react';
-import { env } from '~env';
+import env from '~env';
 import { wrapCapture } from '~services/analytics';
 
 export function ResultsCard(p: {
@@ -34,7 +34,7 @@ export function ResultsCard(p: {
             className="mr-auto inline-flex items-center gap-2"
             target="_blank"
             rel="noreferrer noopener"
-            href={env.PLASMO_PUBLIC_WEBSITE_URL}
+            href={`${env.PLASMO_PUBLIC_WEBSITE_URL}`}
           >
             <img
               src={`${env.PLASMO_PUBLIC_WEBSITE_URL}/images/icon.png`}

apps/browser-extension/src/contents/dialog.tsx

@@ -4,7 +4,7 @@ import type { ExecuteResult, PartialRuntime } from '@evaluate/shapes';
 import { AnimatePresence, motion } from 'framer-motion';
 import type { PlasmoCSConfig, PlasmoGetStyle } from 'plasmo';
 import { useCallback, useEffect, useState } from 'react';
-import { env } from '~env';
+import env from '~env';
 import { ResultsCard } from './_components/results-dialog';
 
 export const config: PlasmoCSConfig = {

apps/browser-extension/src/env.ts

@@ -1,25 +1,20 @@
-import { validateEnv } from '@evaluate/env';
+import { URL } from '@evaluate/helpers/dist/url';
+import { createEnv } from '@t3-oss/env-core';
 import { z } from 'zod';
 
-export const env = validateEnv({
-  prefix: 'PLASMO_PUBLIC_',
+export default createEnv({
+  clientPrefix: 'PLASMO_PUBLIC_',
   client: {
     PLASMO_PUBLIC_WEBSITE_URL: z
       .string()
       .url()
-      .refine((v) => !v.endsWith('/'), 'should not end with a slash'),
+      .transform((v) => new URL(v).freeze()),
     PLASMO_PUBLIC_POSTHOG_KEY: z.string().min(1).optional(),
   },
 
-  variablesStrict: {
+  runtimeEnv: {
+    ...process.env,
     PLASMO_PUBLIC_WEBSITE_URL: process.env.PLASMO_PUBLIC_WEBSITE_URL,
     PLASMO_PUBLIC_POSTHOG_KEY: process.env.PLASMO_PUBLIC_POSTHOG_KEY,
   },
-
-  onValid(env) {
-    if (!env.PLASMO_PUBLIC_POSTHOG_KEY)
-      console.warn(
-        'Missing Posthog environment variable, analytics will be disabled.',
-      );
-  },
 });

apps/browser-extension/src/services/analytics.ts

@@ -1,7 +1,9 @@
 import posthog from 'posthog-js';
-import { env } from '~env';
+import env from '~env';
 
-const enabled = env.PLASMO_PUBLIC_POSTHOG_KEY && env.PLASMO_PUBLIC_WEBSITE_URL;
+const enabled = Boolean(
+  env.PLASMO_PUBLIC_POSTHOG_KEY && env.PLASMO_PUBLIC_WEBSITE_URL,
+);
 export default enabled ? posthog : null;
 
 if (enabled) {

apps/discord-bot/package.json

@@ -6,6 +6,10 @@
     ".": {
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
+    },
+    "./env": {
+      "import": "./dist/env.js",
+      "types": "./dist/env.d.ts"
     }
   },
   "scripts": {
@@ -16,8 +20,9 @@
   "dependencies": {
     "@buape/carbon": "0.0.0-beta-20250120130953",
     "@evaluate/engine": "workspace:^",
-    "@evaluate/env": "workspace:^",
+    "@evaluate/helpers": "workspace:^",
     "@evaluate/shapes": "workspace:^",
+    "@t3-oss/env-core": "^0.11.1",
     "@vercel/functions": "^1.5.1",
     "posthog-node": "^4.3.1",
     "zod": "3.22.4"

apps/discord-bot/src/components/open-evaluation-button.ts

@@ -1,10 +1,10 @@
 import { LinkButton } from '@buape/carbon';
-import { env } from '~/env';
+import env from '~/env';
 import { resolveEmoji } from '~/utilities/resolve-emoji';
 
 export class OpenEvaluationButton extends LinkButton {
   label = 'Open Evaluation';
-  url = env.WEBSITE_URL;
+  url = `${env.WEBSITE_URL}`;
   emoji = resolveEmoji('globe', true);
 
   public constructor(url: string) {

apps/discord-bot/src/env.ts

@@ -1,40 +1,22 @@
-import { validateEnv } from '@evaluate/env/validator';
+import { URL } from '@evaluate/helpers/url';
+import { createEnv } from '@t3-oss/env-core';
 import { z } from 'zod';
 
-export const env = validateEnv({
+export default createEnv({
   server: {
-    ENV: z.enum(['development', 'production']),
-    WEBSITE_URL: z.string().url(),
+    WEBSITE_URL: z
+      .string()
+      .url()
+      .transform((v) => new URL(v).freeze()),
     POSTHOG_KEY: z.string().optional(),
     DISCORD_TOKEN: z.string().min(1).optional(),
     DISCORD_PUBLIC_KEY: z.string().min(1).optional(),
     DISCORD_CLIENT_ID: z.string().min(1).optional(),
     DISCORD_CLIENT_SECRET: z.string().min(1).optional(),
   },
 
-  variablesStrict: {
-    ENV: process.env.NODE_ENV,
-    WEBSITE_URL: process.env.WEBSITE_URL || `https://${process.env.VERCEL_URL}`,
-    POSTHOG_KEY: process.env.POSTHOG_KEY || process.env.NEXT_PUBLIC_POSTHOG_KEY,
-    DISCORD_TOKEN: process.env.DISCORD_TOKEN,
-    DISCORD_PUBLIC_KEY: process.env.DISCORD_PUBLIC_KEY,
-    DISCORD_CLIENT_ID: process.env.DISCORD_CLIENT_ID,
-    DISCORD_CLIENT_SECRET: process.env.DISCORD_CLIENT_SECRET,
-  },
-
-  onValid(env) {
-    if (
-      !env.DISCORD_TOKEN ||
-      !env.DISCORD_PUBLIC_KEY ||
-      !env.DISCORD_CLIENT_ID ||
-      !env.DISCORD_CLIENT_SECRET
-    )
-      console.warn(
-        'Missing Discord bot environment variables, it will be disabled.',
-      );
-    if (!env.POSTHOG_KEY)
-      console.warn(
-        'Missing Posthog environment variable, analytics will be disabled.',
-      );
+  runtimeEnv: {
+    WEBSITE_URL: `https://${process.env.VERCEL_URL}`,
+    ...process.env,
   },
 });

apps/discord-bot/src/handlers/evaluate.ts

@@ -14,7 +14,7 @@ import {
 import type { ExecuteResult, PartialRuntime } from '@evaluate/shapes';
 import { EditEvaluationButton } from '~/components/edit-evaluation-button';
 import { OpenEvaluationButton } from '~/components/open-evaluation-button';
-import { env } from '~/env';
+import env from '~/env';
 import analytics from '~/services/analytics';
 import { codeBlock } from '~/utilities/discord-formatting';
 

apps/discord-bot/src/index.ts

@@ -1,23 +1,7 @@
-import { Client, InteractionType } from '@buape/carbon';
-import { EvaluateCommand } from './commands/evaluate';
-import { env } from './env';
+import { InteractionType } from '@buape/carbon';
+import env from './env';
 import analytics from './services/analytics';
-
-const client =
-  env.DISCORD_TOKEN &&
-  env.DISCORD_CLIENT_ID &&
-  env.DISCORD_PUBLIC_KEY &&
-  new Client(
-    {
-      baseUrl: 'unused',
-      clientId: env.DISCORD_CLIENT_ID,
-      publicKey: env.DISCORD_PUBLIC_KEY,
-      token: env.DISCORD_TOKEN,
-      deploySecret: 'unused',
-      requestOptions: { queueRequests: false },
-    },
-    [new EvaluateCommand()],
-  );
+import client from './services/client';
 
 export default async function handler(request: Request) {
   if (!client) return new Response('X|', { status: 503 });

apps/discord-bot/src/services/analytics.ts

@@ -1,8 +1,14 @@
 import { PostHog } from 'posthog-node';
-import { env } from '~/env';
+import env from '~/env';
 
-export default env.POSTHOG_KEY
-  ? new PostHog(env.POSTHOG_KEY, {
+const enabled = Boolean(env.POSTHOG_KEY);
+if (!enabled)
+  console.warn(
+    'Missing Posthog environment variable, analytics will be disabled.',
+  );
+
+export default enabled
+  ? new PostHog(env.POSTHOG_KEY!, {
       host: 'https://app.posthog.com/',
       flushAt: 1,
       flushInterval: 0,

apps/discord-bot/src/services/client.ts

@@ -0,0 +1,25 @@
+import { Client } from '@buape/carbon';
+import { EvaluateCommand } from '~/commands/evaluate';
+import env from '~/env';
+
+const enabled = Boolean(
+  env.DISCORD_CLIENT_ID && env.DISCORD_PUBLIC_KEY && env.DISCORD_TOKEN,
+);
+if (!enabled)
+  console.warn(
+    'Missing Discord bot environment variables, bot will be disabled.',
+  );
+
+export default enabled
+  ? new Client(
+      {
+        baseUrl: 'unused',
+        clientId: env.DISCORD_CLIENT_ID!,
+        publicKey: env.DISCORD_PUBLIC_KEY!,
+        token: env.DISCORD_TOKEN!,
+        deploySecret: 'unused',
+        requestOptions: { queueRequests: false },
+      },
+      [new EvaluateCommand()],
+    )
+  : null;

apps/discord-bot/tsup.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'tsup';
 
 export default defineConfig({
-  entry: ['src/index.ts'],
+  entry: ['src/index.ts', 'src/env.ts'],
   format: 'esm',
   dts: true,
 });

apps/website/package.json

@@ -4,21 +4,21 @@
   "type": "module",
   "scripts": {
     "check": "tsc --noEmit",
-    "build": "next build --no-lint",
-    "start": "next start",
-    "dev": "next dev --turbo"
+    "build": "use-env -p NEXT -P -- next build --no-lint",
+    "start": "use-env -p NEXT -P -- next start",
+    "dev": "use-env -p NEXT -- next dev --turbo"
   },
   "dependencies": {
     "@codemirror/commands": "^6.7.1",
     "@codemirror/view": "^6.35.0",
     "@evaluate/components": "workspace:^",
     "@evaluate/engine": "workspace:^",
-    "@evaluate/env": "workspace:^",
     "@evaluate/helpers": "workspace:^",
     "@evaluate/hooks": "workspace:^",
-    "@evaluate/style": "workspace:^",
     "@evaluate/shapes": "workspace:^",
+    "@evaluate/style": "workspace:^",
     "@hookform/resolvers": "^3.9.1",
+    "@t3-oss/env-nextjs": "^0.11.1",
     "@tanstack/react-query": "^5.62.0",
     "@tanstack/react-query-devtools": "^5.62.0",
     "@uiw/codemirror-extensions-langs": "^4.23.6",

apps/website/src/app/(editor)/playgrounds/[playground]/content.tsx

@@ -22,7 +22,7 @@ export default function EditorContent(p: { runtime: Runtime }) {
 
   return (
     <div
-      style={{ '--bottom-spacing': isDesktop ? '6px' : '12px' }}
+      style={{ '--bottom-spacing': isDesktop ? '6px' : '12px' } as never}
       className="m-1.5 mt-0 h-[calc(-3.5rem_+_100vh_-_var(--bottom-spacing))]"
     >
       <ExplorerProvider runtime={p.runtime}>

apps/website/src/app/metadata.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import type { Metadata } from 'next/types';
-import { env } from '~/env';
+import env from '~/env';
 
 export function generateBaseMetadata(
   pathname: string,

apps/website/src/app/sitemap.ts

@@ -2,14 +2,14 @@ import { readFile } from 'node:fs/promises';
 import { join } from 'node:path';
 import { fetchRuntimes } from '@evaluate/engine/runtimes';
 import type { MetadataRoute } from 'next/types';
-import { env } from '~/env';
+import env from '~/env';
 
 interface RoutesManifest {
   staticRoutes: { page: string }[];
   dynamicRoutes: { page: string }[];
 }
 
-async function loadStaticPaths(url: string): Promise<MetadataRoute.Sitemap> {
+async function loadStaticPaths(url: URL): Promise<MetadataRoute.Sitemap> {
   const manifestPath = join(process.cwd(), '.next', 'routes-manifest.json');
   const manifest = await readFile(manifestPath, 'utf8')
     .then((c) => JSON.parse(c) as RoutesManifest)
@@ -23,7 +23,7 @@ async function loadStaticPaths(url: string): Promise<MetadataRoute.Sitemap> {
     }));
 }
 
-async function loadDynamicPaths(url: string): Promise<MetadataRoute.Sitemap> {
+async function loadDynamicPaths(url: URL): Promise<MetadataRoute.Sitemap> {
   const runtimes = await fetchRuntimes();
   return runtimes.map((r) => ({
     url: `${url}/playgrounds/${r.id}`,