Simplify tailwind engine routing and fix stuff

packages/client-core/src/admin/adminRoutes.tsx

@@ -40,7 +40,7 @@ import '@etherealengine/engine/src/EngineModule'
 const $allowed = lazy(() => import('@etherealengine/client-core/src/admin/allowedRoutes'))
 
 const AdminRoutes = () => {
-  const location = useLocation()
+  const _location = useLocation()
   const admin = useHookstate(getMutableState(AuthState)).user
 
   const allowedRoutes = useHookstate(getMutableState(AllowedAdminRoutesState))
@@ -70,7 +70,7 @@ const AdminRoutes = () => {
 
   return (
     <Dashboard>
-      <Suspense fallback={<LoadingCircle message={`Loading ${location.pathname.split('/')[2]}...`} />}>
+      <Suspense fallback={<LoadingCircle message={`Loading ${_location.pathname.split('/')[2]}...`} />}>
         <Routes>
           <Route path="/*" element={<$allowed />} />
           {<Route path="/" element={<Analytics />} />}

packages/client-core/src/admin/components/Analytics/index.tsx

@@ -95,8 +95,13 @@ const Analytics = () => {
   return (
     <>
       <div className={styles.dashboardCardsContainer}>
-        {analyticsServiceQueries.map((query) => (
-          <AnalyticsService name={query.type} colors={query.colors!} analyticsQueryMap={analyticsQueryMap} />
+        {analyticsServiceQueries.map((query, index) => (
+          <AnalyticsService
+            key={query.type + index}
+            name={query.type}
+            colors={query.colors!}
+            analyticsQueryMap={analyticsQueryMap}
+          />
         ))}
       </div>
       <div className={styles.mt20px}>

packages/client/src/engine.tsx

@@ -48,12 +48,14 @@ initializeBrowser()
 API.createAPI()
 pipeLogs(Engine.instance.api)
 
-export default function ({ children }) {
+export default function ({ children, tailwind = false }) {
   const ref = createRef()
   const { t } = useTranslation()
-  return (
+  return !tailwind ? (
     <FullscreenContainer ref={ref}>
       <Suspense fallback={<LoadingCircle message={t('common:loader.loadingClient')} />}>{children}</Suspense>
     </FullscreenContainer>
+  ) : (
+    children
   )
 }

packages/client/src/main.tsx

@@ -49,8 +49,8 @@ const App = () => {
         <Routes>
           {/* @todo - these are for backwards compatibility with non tailwind pages - they will be removed eventually */}
           <Route
-            key={'admin'}
-            path={'/admin/*'}
+            key="admin"
+            path="/admin/*"
             element={
               <Suspense fallback={<LoadingCircle message={t('common:loader.starting')} />}>
                 <Engine>
@@ -60,8 +60,8 @@ const App = () => {
             }
           />
           <Route
-            key={'location'}
-            path={'/location/*'}
+            key="location"
+            path="/location/*"
             element={
               <Suspense fallback={<LoadingCircle message={t('common:loader.starting')} />}>
                 <Engine>
@@ -71,8 +71,8 @@ const App = () => {
             }
           />
           <Route
-            key={'studio'}
-            path={'/studio/*'}
+            key="studio"
+            path="/studio/*"
             element={
               <Suspense fallback={<LoadingCircle message={t('common:loader.starting')} />}>
                 <Engine>
@@ -82,8 +82,8 @@ const App = () => {
             }
           />
           <Route
-            key={'offline'}
-            path={'/offline/*'}
+            key="offline"
+            path="/offline/*"
             element={
               <Suspense fallback={<LoadingCircle message={t('common:loader.starting')} />}>
                 <Engine>
@@ -94,11 +94,13 @@ const App = () => {
           />
           {/* This will become redundant and we can embed the TailwindPage directly */}
           <Route
-            key={'default'}
-            path={'/*'}
+            key="default"
+            path="/*"
             element={
               <Suspense>
-                <TailwindPage />
+                <Engine tailwind>
+                  <TailwindPage />
+                </Engine>
               </Suspense>
             }
           />

packages/client/src/pages/_app_tw.tsx

@@ -38,13 +38,10 @@ import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine'
 import { getMutableState, useHookstate } from '@etherealengine/hyperflux'
 import { loadWebappInjection } from '@etherealengine/projects/loadWebappInjection'
 
-import EngineTW from '../engine_tw'
 import PublicRouter, { CenteredLoadingCircle } from '../route/public_tw'
 import { ThemeContextProvider } from '../themes/themeContext'
 
-import 'daisyui/dist/full.css'
 import { useTranslation } from 'react-i18next'
-import 'tailwindcss/tailwind.css'
 import '../themes/base.css'
 import '../themes/components.css'
 import '../themes/utilities.css'
@@ -101,19 +98,17 @@ const TailwindPage = () => {
   }, [notistackRef.current])
 
   return (
-    <EngineTW>
-      <ThemeContextProvider>
-        <SnackbarProvider
-          ref={notistackRef as any}
-          maxSnack={7}
-          anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-          action={defaultAction}
-        >
-          <AppPage />
-          <Debug />
-        </SnackbarProvider>
-      </ThemeContextProvider>
-    </EngineTW>
+    <ThemeContextProvider>
+      <SnackbarProvider
+        ref={notistackRef as any}
+        maxSnack={7}
+        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+        action={defaultAction}
+      >
+        <AppPage />
+        <Debug />
+      </SnackbarProvider>
+    </ThemeContextProvider>
   )
 }
 

packages/ui/.storybook/preview.tsx

@@ -28,18 +28,15 @@ import { Preview } from '@storybook/react'
 import React from 'react'
 import { withRouter } from 'storybook-addon-react-router-v6'
 
-import Engine_tw from '@etherealengine/client/src/engine_tw'
 import { ThemeContextProvider } from '@etherealengine/client/src/themes/themeContext'
 
 export const decorators = [
   withRouter,
   (Story) => {
     return (
-      <Engine_tw>
-        <ThemeContextProvider>
-          <Story />
-        </ThemeContextProvider>
-      </Engine_tw>
+      <ThemeContextProvider>
+        <Story />
+      </ThemeContextProvider>
     )
   }
 ]