Optimize and treeshake dependencies on spatial module for 2d pages

packages/client-core/src/API.ts

@@ -29,23 +29,24 @@ import feathers from '@feathersjs/client'
 import type { FeathersApplication } from '@feathersjs/feathers'
 import Primus from 'primus-client'
 
+import { API as CommonAPI } from '@etherealengine/common'
+
 import type { ServiceTypes } from '@etherealengine/common/declarations'
 import config from '@etherealengine/common/src/config'
-import { Engine } from '@etherealengine/ecs/src/Engine'
 
 import primusClient from './util/primus-client'
 
-export type FeathersClient = FeathersApplication<ServiceTypes> &
-  AuthenticationClient & {
-    primus: Primus
+declare module '@feathersjs/client' {
+  interface FeathersApplication extends AuthenticationClient {
     authentication: AuthenticationClient
   }
+}
 
-/**@deprecated - use 'Engine.instance.api' instead */
+/**@deprecated - use '@etherealengine.common API.instance' instead */
 export class API {
-  /**@deprecated - use 'Engine.instance.api' instead */
+  /**@deprecated - use '@etherealengine.common API.instance' instead */
   static instance: API
-  client: FeathersClient
+  client: FeathersApplication<ServiceTypes>
 
   static createAPI = () => {
     const feathersClient = feathers()
@@ -66,7 +67,7 @@ export class API {
     API.instance = new API()
     API.instance.client = feathersClient as any
 
-    Engine.instance.api = feathersClient
+    CommonAPI.instance = feathersClient
   }
 }
 

packages/client-core/src/admin/components/resources/ResourceTable.tsx

@@ -32,7 +32,7 @@ import { useFind, useSearch } from '@etherealengine/spatial/src/common/functions
 import ConfirmDialog from '@etherealengine/ui/src/components/tailwind/ConfirmDialog'
 import Button from '@etherealengine/ui/src/primitives/tailwind/Button'
 
-import { Engine } from '@etherealengine/ecs'
+import { API } from '@etherealengine/common'
 import { PopoverState } from '../../../common/services/PopoverState'
 import { resourceColumns } from '../../common/constants/resources'
 import DataTable from '../../common/Table'
@@ -87,7 +87,7 @@ export default function ResourceTable({ search }: { search: string }) {
                 <ConfirmDialog
                   text={`${t('admin:components.resources.confirmResourceDelete')} '${el.key}'?`}
                   onSubmit={async () => {
-                    await Engine.instance.api.service(staticResourcePath).remove(el.id)
+                    await API.instance.service(staticResourcePath).remove(el.id)
                   }}
                 />
               )

packages/client-core/src/admin/components/settings/tabs/client.tsx

@@ -37,7 +37,7 @@ import Select from '@etherealengine/ui/src/primitives/tailwind/Select'
 import Text from '@etherealengine/ui/src/primitives/tailwind/Text'
 import Toggle from '@etherealengine/ui/src/primitives/tailwind/Toggle'
 
-import { Engine } from '@etherealengine/ecs'
+import { API } from '@etherealengine/common'
 import { useFind } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
 
 const ClientTab = forwardRef(({ open }: { open: boolean }, ref: React.MutableRefObject<HTMLDivElement>) => {
@@ -104,7 +104,7 @@ const ClientTab = forwardRef(({ open }: { open: boolean }, ref: React.MutableRef
       updatedAt: undefined!
     } as any as ClientSettingType
 
-    Engine.instance.api
+    API.instance
       .service(clientSettingPath)
       .patch(id, newSettings)
       .then(() => {

packages/client-core/src/admin/components/settings/tabs/instanceServer.tsx

@@ -27,8 +27,8 @@ import React, { forwardRef, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { HiMinus, HiPlusSmall } from 'react-icons/hi2'
 
+import { API } from '@etherealengine/common'
 import { instanceServerSettingPath, InstanceServerSettingType } from '@etherealengine/common/src/schema.type.module'
-import { Engine } from '@etherealengine/ecs'
 import { NO_PROXY, State, useHookstate } from '@etherealengine/hyperflux'
 import { useFind } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
 import PasswordInput from '@etherealengine/ui/src/components/tailwind/PasswordInput'
@@ -79,7 +79,7 @@ const InstanceServerTab = forwardRef(({ open }: { open: boolean }, ref: React.Mu
       //
     }
 
-    Engine.instance.api
+    API.instance
       .service(instanceServerSettingPath)
       .patch(id, newSettings)
       .then(() => {

packages/client-core/src/common/services/FileThumbnailJobState.tsx

@@ -23,13 +23,13 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
+import { API } from '@etherealengine/common'
 import {
   FileBrowserContentType,
   fileBrowserUploadPath,
   staticResourcePath
 } from '@etherealengine/common/src/schema.type.module'
 import {
-  Engine,
   EntityUUID,
   UUIDComponent,
   UndefinedEntity,
@@ -129,9 +129,7 @@ const uploadThumbnail = async (src: string, projectName: string, staticResourceI
   thumbnailURL.search = ''
   thumbnailURL.hash = ''
   const _thumbnailKey = thumbnailURL.href.replace(config.client.fileServer + '/', '')
-  await Engine.instance.api
-    .service(staticResourcePath)
-    .patch(staticResourceId, { thumbnailKey: _thumbnailKey, thumbnailMode })
+  await API.instance.service(staticResourcePath).patch(staticResourceId, { thumbnailKey: _thumbnailKey, thumbnailMode })
 }
 
 const seenResources = new Set<string>()
@@ -160,7 +158,7 @@ export const FileThumbnailJobState = defineState({
 
         if (resource.type === 'thumbnail') {
           //set thumbnail's thumbnail as itself
-          Engine.instance.api.service(staticResourcePath).patch(resource.id, { thumbnailKey: resource.key })
+          API.instance.service(staticResourcePath).patch(resource.id, { thumbnailKey: resource.key })
           continue
         }
 

packages/client-core/src/common/services/LocationInstanceConnectionService.ts

@@ -26,6 +26,7 @@ Ethereal Engine. All Rights Reserved.
 import { Paginated } from '@feathersjs/feathers'
 import { useEffect } from 'react'
 
+import { API } from '@etherealengine/common'
 import logger from '@etherealengine/common/src/logger'
 import {
   InstanceID,
@@ -35,7 +36,6 @@ import {
   LocationID,
   RoomCode
 } from '@etherealengine/common/src/schema.type.module'
-import { Engine } from '@etherealengine/ecs/src/Engine'
 import { defineState, getMutableState, getState, Identifiable, State, useState } from '@etherealengine/hyperflux'
 import { NetworkState } from '@etherealengine/network'
 
@@ -84,7 +84,7 @@ export const LocationInstanceConnectionService = {
     logger.info({ locationId, instanceId, sceneId }, 'Provision World Server')
     const token = getState(AuthState).authUser.accessToken
     if (instanceId != null) {
-      const instance = (await Engine.instance.api.service(instancePath).find({
+      const instance = (await API.instance.service(instancePath).find({
         query: {
           id: instanceId,
           ended: false
@@ -94,7 +94,7 @@ export const LocationInstanceConnectionService = {
         instanceId = null!
       }
     }
-    const provisionResult = await Engine.instance.api.service(instanceProvisionPath).find({
+    const provisionResult = await API.instance.service(instanceProvisionPath).find({
       query: {
         locationId,
         instanceId,
@@ -124,7 +124,7 @@ export const LocationInstanceConnectionService = {
   provisionExistingServer: async (locationId: LocationID, instanceId: InstanceID, sceneId: string) => {
     logger.info({ locationId, instanceId, sceneId }, 'Provision Existing World Server')
     const token = getState(AuthState).authUser.accessToken
-    const instance = (await Engine.instance.api.service(instancePath).find({
+    const instance = (await API.instance.service(instancePath).find({
       query: {
         id: instanceId,
         ended: false
@@ -140,7 +140,7 @@ export const LocationInstanceConnectionService = {
       }
       return
     }
-    const provisionResult = await Engine.instance.api.service(instanceProvisionPath).find({
+    const provisionResult = await API.instance.service(instanceProvisionPath).find({
       query: {
         locationId,
         instanceId,
@@ -165,7 +165,7 @@ export const LocationInstanceConnectionService = {
   provisionExistingServerByRoomCode: async (locationId: LocationID, roomCode: RoomCode, sceneId: string) => {
     logger.info({ locationId, roomCode, sceneId }, 'Provision Existing World Server')
     const token = getState(AuthState).authUser.accessToken
-    const instance = (await Engine.instance.api.service(instancePath).find({
+    const instance = (await API.instance.service(instancePath).find({
       query: {
         roomCode,
         ended: false
@@ -181,7 +181,7 @@ export const LocationInstanceConnectionService = {
       }
       return
     }
-    const provisionResult = await Engine.instance.api.service(instanceProvisionPath).find({
+    const provisionResult = await API.instance.service(instanceProvisionPath).find({
       query: {
         locationId,
         roomCode,
@@ -219,10 +219,10 @@ export const LocationInstanceConnectionService = {
           })
       }
 
-      Engine.instance.api.service(instanceProvisionPath).on('created', instanceProvisionCreatedListener)
+      API.instance.service(instanceProvisionPath).on('created', instanceProvisionCreatedListener)
 
       return () => {
-        Engine.instance.api.service(instanceProvisionPath).off('created', instanceProvisionCreatedListener)
+        API.instance.service(instanceProvisionPath).off('created', instanceProvisionCreatedListener)
       }
     }, [])
   }

packages/client-core/src/common/services/MediaInstanceConnectionService.ts

@@ -25,9 +25,9 @@ Ethereal Engine. All Rights Reserved.
 
 import { useEffect } from 'react'
 
+import { API } from '@etherealengine/common'
 import multiLogger from '@etherealengine/common/src/logger'
 import { ChannelID, InstanceID, instanceProvisionPath, RoomCode } from '@etherealengine/common/src/schema.type.module'
-import { Engine } from '@etherealengine/ecs/src/Engine'
 import { defineState, getMutableState, getState, Identifiable, State, useState } from '@etherealengine/hyperflux'
 import { NetworkState } from '@etherealengine/network'
 
@@ -70,7 +70,7 @@ export const MediaInstanceConnectionService = {
   provisionServer: async (channelID: ChannelID, createPrivateRoom = false) => {
     logger.info(`Provision Media Server, channelId: "${channelID}".`)
     const token = getState(AuthState).authUser.accessToken
-    const provisionResult = await Engine.instance.api.service(instanceProvisionPath).find({
+    const provisionResult = await API.instance.service(instanceProvisionPath).find({
       query: {
         channelId: channelID,
         token,
@@ -103,9 +103,9 @@ export const MediaInstanceConnectionService = {
           })
         }
       }
-      Engine.instance.api.service(instanceProvisionPath).on('created', listener)
+      API.instance.service(instanceProvisionPath).on('created', listener)
       return () => {
-        Engine.instance.api.service(instanceProvisionPath).off('created', listener)
+        API.instance.service(instanceProvisionPath).off('created', listener)
       }
     }, [])
   }

packages/client-core/src/common/services/OEmbedService.ts

@@ -23,9 +23,9 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
+import { API } from '@etherealengine/common'
 import multiLogger from '@etherealengine/common/src/logger'
 import { oembedPath, OembedType } from '@etherealengine/common/src/schema.type.module'
-import { Engine } from '@etherealengine/ecs/src/Engine'
 import { defineState, getMutableState } from '@etherealengine/hyperflux'
 
 import { NotificationService } from './NotificationService'
@@ -42,7 +42,7 @@ export const OEmbedState = defineState({
   fetchData: async (pathname: string, queryUrl: string) => {
     try {
       getMutableState(OEmbedState).merge({ oEmbed: undefined, pathname })
-      const oEmbed = (await Engine.instance.api.service(oembedPath).find({ query: { url: queryUrl } })) as OembedType
+      const oEmbed = (await API.instance.service(oembedPath).find({ query: { url: queryUrl } })) as OembedType
       getMutableState(OEmbedState).merge({ oEmbed, pathname })
     } catch (err) {
       logger.error(err)