fix(playground): fix & refactor application entrypoint config

packages/playground/admin/config.ts

@@ -0,0 +1,28 @@
+export const getConfig = () => {
+
+	let project = import.meta.env.VITE_CONTEMBER_ADMIN_PROJECT_NAME
+	if (project === '__PROJECT_SLUG__') {
+		project = window.location.pathname.split('/')[1]
+	}
+
+	let basePath = import.meta.env.BASE_URL ?? '/'
+	if (basePath === './') {
+		basePath = `/${project}/`
+	}
+	const apiBaseUrl = import.meta.env.VITE_CONTEMBER_ADMIN_API_BASE_URL as string
+	if (!apiBaseUrl) {
+		throw new Error('VITE_CONTEMBER_ADMIN_API_BASE_URL is not set')
+	}
+	const sessionToken = import.meta.env.VITE_CONTEMBER_ADMIN_SESSION_TOKEN as string
+	if (!sessionToken) {
+		throw new Error('VITE_CONTEMBER_ADMIN_SESSION_TOKEN is not set')
+	}
+
+	return {
+		project,
+		sessionToken,
+		basePath,
+		apiBaseUrl,
+		stage: 'live',
+	}
+}

packages/playground/admin/index.tsx

@@ -3,36 +3,20 @@ import { SlotsProvider } from '@contember/react-slots'
 import { Layout } from './app/components/layout'
 import './index.css'
 import { Toaster } from './lib/components/ui/toast'
-import { DevBar, DevPanel, createErrorHandler } from '@contember/react-devbar'
+import { createErrorHandler, DevBar, DevPanel } from '@contember/react-devbar'
 import { LogInIcon } from 'lucide-react'
 import { LoginWithEmail } from './lib/components/dev/login-panel'
 import { createRoot } from 'react-dom/client'
-
-if (!import.meta.env.VITE_CONTEMBER_ADMIN_API_BASE_URL) {
-	throw new Error('VITE_CONTEMBER_ADMIN_API_BASE_URL is not set')
-}
-
-let projectSlug = import.meta.env.VITE_CONTEMBER_ADMIN_PROJECT_NAME
-if (projectSlug === '__PROJECT_SLUG__') {
-	projectSlug = window.location.pathname.split('/')[1]
-}
-
-let basePath = import.meta.env.BASE_URL ?? '/'
-if (basePath === './') {
-	basePath = `/${projectSlug}/`
-}
+import { getConfig } from './config'
 
 const errorHandler = createErrorHandler((dom, react, onRecoverableError) => createRoot(dom, { onRecoverableError }).render(react))
+
 const rootEl = document.body.appendChild(document.createElement('div'))
 
 errorHandler(onRecoverableError => createRoot(rootEl, { onRecoverableError }).render(<>
 	<SlotsProvider>
 		<ApplicationEntrypoint
-			apiBaseUrl={import.meta.env.VITE_CONTEMBER_ADMIN_API_BASE_URL as string}
-			sessionToken={import.meta.env.VITE_CONTEMBER_ADMIN_SESSION_TOKEN as string}
-			project={'playground'}
-			stage={'live'}
-			basePath={import.meta.env.BASE_URL}
+			{...getConfig()}
 			children={
 				<>
 					<Toaster>
@@ -43,9 +27,9 @@ errorHandler(onRecoverableError => createRoot(rootEl, { onRecoverableError }).re
 								{ eager: true },
 							)}
 						/>
-						<DevBar>
+						{import.meta.env.DEV && <DevBar>
 							<DevPanel heading="Login" icon={<LogInIcon />}><LoginWithEmail /></DevPanel>
-						</DevBar>
+						</DevBar>}
 					</Toaster>
 				</>
 			}