Changes to use vite-plugin-ejs instead of vite-plugin-html

packages/client/index.html

@@ -22,6 +22,9 @@
     <link rel="preconnect" crossorigin="anonymous" href="https://fonts.googleapis.com">
     <link rel="preconnect" crossorigin="anonymous" href="https://fonts.gstatic.com">
     <link rel="stylesheet" crossorigin="anonymous" href="https://fonts.googleapis.com/css?family=Lato:300,400,700|PT+Sans:400,400italic,700,700italic|Quicksand:400,300|Raleway:400|Roboto:300,400,700|Source+Sans+Pro:300,400,700|Khula:300,400,700&display=swap" />
+    <link rel="apple-touch-icon" sizes="180x180" href="<%- appleTouchIcon %>" />
+    <link rel="icon" type="image/png" sizes="32x32" href="<%- favicon32px %>" />
+    <link rel="icon" type="image/png" sizes="16x16" href="<%- favicon16px %>" />
 
     <!-- <link rel="manifest" href="/manifest.webmanifest" /> -->
     <script type="text/javascript">

packages/client/package.json

@@ -78,7 +78,7 @@
     "ts-node": "10.9.1",
     "vite": "4.2.1",
     "vite-plugin-compression": "0.5.1",
-    "vite-plugin-html": "3.2.0",
+    "vite-plugin-ejs": "^1.6.4",
     "vite-plugin-optimize-persist": "^0.1.2",
     "vite-plugin-package-config": "0.1.1",
     "vite-plugin-pwa": "^0.14.7"

packages/client/src/pages/_app.tsx

@@ -1,7 +1,6 @@
 // import * as chapiWalletPolyfill from 'credential-handler-polyfill'
 import { SnackbarProvider } from 'notistack'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { useLocation } from 'react-router-dom'
 
 import {
   AdminClientSettingsState,
@@ -12,7 +11,6 @@ import MetaTags from '@etherealengine/client-core/src/common/components/MetaTags
 import { defaultAction } from '@etherealengine/client-core/src/common/components/NotificationActions'
 import { ProjectService, ProjectState } from '@etherealengine/client-core/src/common/services/ProjectService'
 import InviteToast from '@etherealengine/client-core/src/components/InviteToast'
-import { InviteService, InviteState } from '@etherealengine/client-core/src/social/services/InviteService'
 import { theme } from '@etherealengine/client-core/src/theme'
 import { AuthState } from '@etherealengine/client-core/src/user/services/AuthService'
 import GlobalStyle from '@etherealengine/client-core/src/util/GlobalStyle'
@@ -26,10 +24,7 @@ import RouterComp from '../route/public'
 
 import './styles.scss'
 
-import {
-  AdminCoilSettingService,
-  AdminCoilSettingsState
-} from '@etherealengine/client-core/src/admin/services/Setting/CoilSettingService'
+import { AdminCoilSettingService } from '@etherealengine/client-core/src/admin/services/Setting/CoilSettingService'
 import {
   AppThemeServiceReceptor,
   AppThemeState,
@@ -42,7 +37,6 @@ import {
   NotificationActions
 } from '@etherealengine/client-core/src/common/services/NotificationService'
 import Debug from '@etherealengine/client-core/src/components/Debug'
-import config from '@etherealengine/common/src/config'
 import { AudioEffectPlayer } from '@etherealengine/engine/src/audio/systems/MediaSystem'
 import { addActionReceptor, getMutableState, removeActionReceptor, useHookstate } from '@etherealengine/hyperflux'
 
@@ -59,17 +53,10 @@ declare module '@mui/styles/defaultTheme' {
 const AppPage = (): any => {
   const notistackRef = useRef<SnackbarProvider>()
   const authState = useHookstate(getMutableState(AuthState))
-  const inviteState = useHookstate(getMutableState(InviteState))
   const selfUser = authState.user
   const clientSettingState = useHookstate(getMutableState(AdminClientSettingsState))
-  const coilSettingState = useHookstate(getMutableState(AdminCoilSettingsState))
   const appTheme = useHookstate(getMutableState(AppThemeState))
-  const paymentPointer = coilSettingState.coil[0]?.paymentPointer?.value
   const [clientSetting] = clientSettingState?.client?.value || []
-  const ctitle = useHookstate<string>(clientSetting?.title || '')
-  const favicon16 = useHookstate(clientSetting?.favicon16px)
-  const [favicon32, setFavicon32] = useState(clientSetting?.favicon32px)
-  const [description, setDescription] = useState(clientSetting?.siteDescription)
   const [clientThemeSettings, setClientThemeSettings] = useState(clientSetting?.themeSettings)
   const [projectComponents, setProjectComponents] = useState<Array<any>>([])
   const [fetchedProjectComponents, setFetchedProjectComponents] = useState(false)
@@ -144,10 +131,6 @@ const AppPage = (): any => {
 
   useEffect(() => {
     if (clientSetting) {
-      ctitle.set(clientSetting?.title)
-      favicon16.set(clientSetting?.favicon16px)
-      setFavicon32(clientSetting?.favicon32px)
-      setDescription(clientSetting?.siteDescription)
       setClientThemeSettings(clientSetting?.themeSettings)
     }
     if (clientSettingState?.updateNeeded?.value) ClientSettingService.fetchClientSettings()

packages/client/src/pages/_app_tw.tsx

@@ -1,16 +1,12 @@
 // import * as chapiWalletPolyfill from 'credential-handler-polyfill'
 import { SnackbarProvider } from 'notistack'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { useLocation } from 'react-router-dom'
 
 import {
   AdminClientSettingsState,
   ClientSettingService
 } from '@etherealengine/client-core/src/admin/services/Setting/ClientSettingService'
-import {
-  AdminCoilSettingService,
-  AdminCoilSettingsState
-} from '@etherealengine/client-core/src/admin/services/Setting/CoilSettingService'
+import { AdminCoilSettingService } from '@etherealengine/client-core/src/admin/services/Setting/CoilSettingService'
 import { API } from '@etherealengine/client-core/src/API'
 import { initGA, logPageView } from '@etherealengine/client-core/src/common/analytics'
 import MetaTags from '@etherealengine/client-core/src/common/components/MetaTags'
@@ -22,7 +18,6 @@ import {
 import { ProjectService, ProjectState } from '@etherealengine/client-core/src/common/services/ProjectService'
 import Debug from '@etherealengine/client-core/src/components/Debug'
 import { AuthState } from '@etherealengine/client-core/src/user/services/AuthService'
-import config from '@etherealengine/common/src/config'
 import { AudioEffectPlayer } from '@etherealengine/engine/src/audio/systems/MediaSystem'
 import { matches } from '@etherealengine/engine/src/common/functions/MatchesUtils'
 import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine'
@@ -38,13 +33,6 @@ const AppPage = () => {
   const authState = useHookstate(getMutableState(AuthState))
   const selfUser = authState.user
   const clientSettingState = useHookstate(getMutableState(AdminClientSettingsState))
-  const coilSettingState = useHookstate(getMutableState(AdminCoilSettingsState))
-  const paymentPointer = coilSettingState.coil[0]?.paymentPointer?.value
-  const [clientSetting] = clientSettingState?.client?.value || []
-  const [ctitle, setTitle] = useState<string>(clientSetting?.title || '')
-  const [favicon16, setFavicon16] = useState(clientSetting?.favicon16px)
-  const [favicon32, setFavicon32] = useState(clientSetting?.favicon32px)
-  const [description, setDescription] = useState(clientSetting?.siteDescription)
   const [projectComponents, setProjectComponents] = useState<Array<any>>([])
   const [fetchedProjectComponents, setFetchedProjectComponents] = useState(false)
   const projectState = useHookstate(getMutableState(ProjectState))
@@ -107,12 +95,6 @@ const AppPage = () => {
   }, [authState.isLoggedIn])
 
   useEffect(() => {
-    if (clientSetting) {
-      setTitle(clientSetting?.title)
-      setFavicon16(clientSetting?.favicon16px)
-      setFavicon32(clientSetting?.favicon32px)
-      setDescription(clientSetting?.siteDescription)
-    }
     if (clientSettingState?.updateNeeded?.value) ClientSettingService.fetchClientSettings()
   }, [clientSettingState?.updateNeeded?.value])
 

packages/client/src/pages/admin.tsx

@@ -1,7 +1,6 @@
 // import * as chapiWalletPolyfill from 'credential-handler-polyfill'
 import { SnackbarProvider } from 'notistack'
 import React, { useCallback, useEffect, useRef } from 'react'
-import { useLocation } from 'react-router-dom'
 
 import {
   AdminClientSettingsState,
@@ -25,10 +24,7 @@ import AdminRouterComp from '../route/admin'
 
 import './styles.scss'
 
-import {
-  AdminCoilSettingService,
-  AdminCoilSettingsState
-} from '@etherealengine/client-core/src/admin/services/Setting/CoilSettingService'
+import { AdminCoilSettingService } from '@etherealengine/client-core/src/admin/services/Setting/CoilSettingService'
 import { API } from '@etherealengine/client-core/src/API'
 import {
   AppThemeServiceReceptor,
@@ -42,7 +38,6 @@ import {
   NotificationActions
 } from '@etherealengine/client-core/src/common/services/NotificationService'
 import Debug from '@etherealengine/client-core/src/components/Debug'
-import config from '@etherealengine/common/src/config'
 import { AudioEffectPlayer } from '@etherealengine/engine/src/audio/systems/MediaSystem'
 import { addActionReceptor, getMutableState, removeActionReceptor, useHookstate } from '@etherealengine/hyperflux'
 
@@ -61,14 +56,8 @@ const AdminPage = (): any => {
   const authState = useHookstate(getMutableState(AuthState))
   const selfUser = authState.user
   const clientSettingState = useHookstate(getMutableState(AdminClientSettingsState))
-  const coilSettingState = useHookstate(getMutableState(AdminCoilSettingsState))
   const appTheme = useHookstate(getMutableState(AppThemeState))
-  const paymentPointer = coilSettingState.coil[0]?.paymentPointer?.value
   const [clientSetting] = clientSettingState?.client?.get({ noproxy: true }) || []
-  const ctitle = useHookstate<string>(clientSetting?.title || '')
-  const favicon16 = useHookstate(clientSetting?.favicon16px)
-  const favicon32 = useHookstate(clientSetting?.favicon32px)
-  const description = useHookstate(clientSetting?.siteDescription)
   const clientThemeSettings = useHookstate(clientSetting?.themeSettings)
   const projectComponents = useHookstate<Array<any>>([])
   const fetchedProjectComponents = useHookstate(false)
@@ -143,10 +132,6 @@ const AdminPage = (): any => {
 
   useEffect(() => {
     if (clientSetting) {
-      ctitle.set(clientSetting?.title)
-      favicon16.set(clientSetting?.favicon16px)
-      favicon32.set(clientSetting?.favicon32px)
-      description.set(clientSetting?.siteDescription)
       clientThemeSettings.set(clientSetting?.themeSettings)
     }
     if (clientSettingState?.updateNeeded?.value) ClientSettingService.fetchClientSettings()
@@ -160,7 +145,7 @@ const AdminPage = (): any => {
     const currentThemeName = getAppThemeName()
     const theme = getAppTheme()
     if (theme)
-      for (let variable of Object.keys(theme)) {
+      for (const variable of Object.keys(theme)) {
         ;(document.querySelector(`[data-theme=${currentThemeName}]`) as any)?.style.setProperty(
           '--' + variable,
           theme[variable]

packages/client/vite.config.ts

@@ -7,7 +7,7 @@ import { isArray, mergeWith } from 'lodash'
 import path from 'path'
 import { defineConfig, UserConfig } from 'vite'
 import viteCompression from 'vite-plugin-compression'
-import { createHtmlPlugin } from 'vite-plugin-html'
+import { ViteEjsPlugin } from 'vite-plugin-ejs'
 import OptimizationPersist from 'vite-plugin-optimize-persist'
 import PkgConfig from 'vite-plugin-package-config'
 
@@ -173,25 +173,21 @@ export default defineConfig(async () => {
       mediapipe_workaround(),
       PkgConfig(),
       process.env.VITE_PWA_ENABLED === 'true' ? PWA(clientSetting) : undefined,
-      createHtmlPlugin({
-        inject: {
-          data: {
-            ...manifest,
-            title: clientSetting.title || 'Ethereal Engine',
-            description: clientSetting?.siteDescription || 'Connected Worlds for Everyone',
-            short_name: clientSetting?.shortName || 'EE',
-            theme_color: clientSetting?.themeColor || '#ffffff',
-            background_color: clientSetting?.backgroundColor || '#000000',
-            appleTouchIcon: clientSetting.appleTouchIcon || '/apple-touch-icon.png',
-            favicon32px: clientSetting.favicon32px || '/favicon-32x32.png',
-            favicon16px: clientSetting.favicon16px || '/favicon-16x16.png',
-            icon192px: clientSetting.icon192px || '/android-chrome-192x192.png',
-            icon512px: clientSetting.icon512px || '/android-chrome-512x512.png',
-            webmanifestLink: clientSetting.webmanifestLink || '/manifest.webmanifest',
-            swScriptLink: clientSetting.swScriptLink || 'service-worker.js',
-            paymentPointer: clientSetting.paymentPointer || ''
-          }
-        }
+      ViteEjsPlugin({
+        ...manifest,
+        title: clientSetting.title || 'Ethereal Engine',
+        description: clientSetting?.siteDescription || 'Connected Worlds for Everyone',
+        short_name: clientSetting?.shortName || 'EE',
+        theme_color: clientSetting?.themeColor || '#ffffff',
+        background_color: clientSetting?.backgroundColor || '#000000',
+        appleTouchIcon: clientSetting.appleTouchIcon || '/apple-touch-icon.png',
+        favicon32px: clientSetting.favicon32px || '/favicon-32x32.png',
+        favicon16px: clientSetting.favicon16px || '/favicon-16x16.png',
+        icon192px: clientSetting.icon192px || '/android-chrome-192x192.png',
+        icon512px: clientSetting.icon512px || '/android-chrome-512x512.png',
+        webmanifestLink: clientSetting.webmanifestLink || '/manifest.webmanifest',
+        swScriptLink: clientSetting.swScriptLink || 'service-worker.js',
+        paymentPointer: clientSetting.paymentPointer || ''
       }),
       viteCompression({
         filter: /\.(js|mjs|json|css)$/i,