Get Playwright at least runnable (#197)

* Add utility `env`, fix TS type yelling

* Replace all `import.meta.env`s with a wrapper

* Update README to show the need for `.env.development.local`

* fmt

Author: franknoirot

README.md

@@ -4,7 +4,7 @@ This repository is an open-source example of how to quickly get up and running w
 
 To get started
 
-create a `.env` following .env.example
+create a `.env.development.local` following `.env.example`
 
 then
 

package.json

@@ -21,6 +21,7 @@
 		"@sveltejs/vite-plugin-svelte": "^3.0.2",
 		"@testing-library/jest-dom": "^6.2.0",
 		"@testing-library/svelte": "^4.0.5",
+		"@types/node": "^24.0.4",
 		"@types/object.groupby": "^1.0.3",
 		"@types/testing-library__jest-dom": "^6.0.0",
 		"@types/three": "^0.160.0",

playwright.config.ts

@@ -3,7 +3,9 @@ import { AUTH_COOKIE_NAME } from './src/lib/cookies'
 import dotenv from 'dotenv'
 import path from 'path'
 
-dotenv.config({ path: path.resolve(path.dirname('.'), '.env.development') })
+dotenv.config({
+	path: path.resolve(path.dirname('.'), `.env.development${process.env.CI ? '' : '.local'}`)
+})
 const expiration = new Date()
 expiration.setFullYear(expiration.getFullYear() + 1)
 

src/lib/consts.ts

@@ -3,7 +3,7 @@ import { msSinceStartOfDay, msSinceStartOfMonth, msSinceAWeekAgo, msSinceStartOf
 export const PERSIST_KEY_VERSION = '2024-06-21'
 export const PERSIST_KEY_GENERATIONS = 'TEXT_TO_CAD_GENERATIONS'
 export const PERSIST_KEY_UNREAD = 'TEXT_TO_CAD_UNREAD'
-export const DOMAIN = import.meta.env.DEV ? 'localhost' : '.zoo.dev'
+export const DOMAIN = (import.meta.env || process.env).DEV ? 'localhost' : '.zoo.dev'
 
 export const PLAYWRIGHT_MOCKING_HEADER = 'x-playwright-mocking'
 

src/lib/endpoints.ts

@@ -1,5 +1,6 @@
 import type { Models } from '@kittycad/lib/types'
 import { ITEMS_PER_PAGE } from './consts'
+import { env } from '$lib/env'
 
 export type CADFormat = Models['FileExportFormat_type']
 
@@ -21,18 +22,17 @@ interface ListParams {
 
 export const endpoints = {
 	convert: (output_format: CADFormat = 'obj') =>
-		`${import.meta.env.VITE_API_BASE_URL}/file/conversion/gltf/${output_format}`,
+		`${env.VITE_API_BASE_URL}/file/conversion/gltf/${output_format}`,
 	feedback: (id: string, feedback: Models['TextToCad_type']['feedback']) =>
-		`${import.meta.env.VITE_API_BASE_URL}/user/text-to-cad/${id}?feedback=${feedback}`,
+		`${env.VITE_API_BASE_URL}/user/text-to-cad/${id}?feedback=${feedback}`,
 	list: ({ limit = ITEMS_PER_PAGE, page_token }: ListParams) =>
-		`${import.meta.env.VITE_API_BASE_URL}/user/text-to-cad?no_models=true&limit=${limit}${
+		`${env.VITE_API_BASE_URL}/user/text-to-cad?no_models=true&limit=${limit}${
 			page_token ? `&page_token=${page_token}` : ''
 		}`,
 	prompt: (output_format: CADFormat = 'gltf') =>
-		`${import.meta.env.VITE_API_BASE_URL}/ai/text-to-cad/${output_format}`,
-	view: (id: string) => `${import.meta.env.VITE_API_BASE_URL}/user/text-to-cad/${id}`,
-	viewNoModels: (id: string) =>
-		`${import.meta.env.VITE_API_BASE_URL}/user/text-to-cad/${id}?no_models=true`,
+		`${env.VITE_API_BASE_URL}/ai/text-to-cad/${output_format}`,
+	view: (id: string) => `${env.VITE_API_BASE_URL}/user/text-to-cad/${id}`,
+	viewNoModels: (id: string) => `${env.VITE_API_BASE_URL}/user/text-to-cad/${id}?no_models=true`,
 	localConvert: (output_format: CADFormat) => `/api/convert/${output_format}`,
 	localFeedback: `/api/submit-feedback`
 }

src/lib/env.ts

@@ -0,0 +1 @@
+export const env = import.meta.env || process.env

src/lib/paths.ts

@@ -1,6 +1,7 @@
 export const SIGN_OUT_PARAM = 'signout'
+import { env } from '$lib/env'
 
-const SITE = import.meta.env.VITE_SITE_BASE_URL
+const SITE = env.VITE_SITE_BASE_URL
 const GITHUB_REPO = `https://github.com/KittyCAD/text-to-cad-ui`
 
 export const paths = {

src/routes/(sidebarLayout)/+layout.server.ts

@@ -3,20 +3,21 @@ import { AUTH_COOKIE_NAME } from '$lib/cookies.js'
 import { hooksUserMocks, isUserMock } from '$lib/mocks.js'
 import { SIGN_OUT_PARAM } from '$lib/paths.js'
 import { redirect } from '@sveltejs/kit'
+import { env } from '$lib/env'
 
 export const load = async ({ cookies, request, url, fetch }) => {
 	if (url.searchParams.get(SIGN_OUT_PARAM)) {
 		signOut()
 	}
 
 	const mockRequestHeader = request.headers.get(PLAYWRIGHT_MOCKING_HEADER)
-	const token = import.meta.env.PROD ? cookies.get(AUTH_COOKIE_NAME) : import.meta.env.VITE_TOKEN
+	const token = env.PROD ? cookies.get(AUTH_COOKIE_NAME) : env.VITE_TOKEN
 
 	if (!token) {
 		signOut()
 	}
 
-	const currentUser = await fetch(import.meta.env.VITE_API_BASE_URL + '/user', {
+	const currentUser = await fetch(env.VITE_API_BASE_URL + '/user', {
 		method: 'GET',
 		headers: {
 			'Content-Type': 'application/json',

src/routes/+layout.server.ts

@@ -1,11 +1,9 @@
 import { AUTH_COOKIE_NAME } from '$lib/cookies.js'
+import { env } from '$lib/env'
 
 /** @type {import('./$types').LayoutData} */
 export const load = async ({ locals, cookies }) => {
-	const token =
-		import.meta.env.MODE === 'production'
-			? cookies.get(AUTH_COOKIE_NAME)
-			: import.meta.env.VITE_TOKEN
+	const token = env.MODE === 'production' ? cookies.get(AUTH_COOKIE_NAME) : env.VITE_TOKEN
 
 	return {
 		user: !locals.user || 'error_code' in locals.user ? undefined : locals.user,

src/routes/+page.server.ts

@@ -1,8 +1,9 @@
 import { AUTH_COOKIE_NAME } from '$lib/cookies.js'
 import { redirect } from '@sveltejs/kit'
+import { env } from '$lib/env'
 
 export const load = async ({ cookies, url }) => {
-	const token = import.meta.env.PROD ? cookies.get(AUTH_COOKIE_NAME) : import.meta.env.VITE_TOKEN
+	const token = env.PROD ? cookies.get(AUTH_COOKIE_NAME) : env.VITE_TOKEN
 
 	if (token) {
 		throw redirect(302, '/dashboard' + (url.search || ''))