BC-8404 - Move tldraw config to issolate it from server config

src/hooks/useMultiplayerState.test.ts

@@ -75,9 +75,9 @@ vi.mock("../stores/setup", () => ({
     firstName: "John",
   },
   envs: {
-    TLDRAW__ASSETS_ENABLED: true,
-    TLDRAW__ASSETS_MAX_SIZE_BYTES: 1000000,
-    TLDRAW__ASSETS_ALLOWED_MIME_TYPES_LIST: ["image/png", "image/jpeg"],
+    TLDRAW_ASSETS_ENABLED: true,
+    TLDRAW_ASSETS_MAX_SIZE_BYTES: 1000000,
+    TLDRAW_ASSETS_ALLOWED_MIME_TYPES_LIST: ["image/png", "image/jpeg"],
   },
 }));
 

src/hooks/useMultiplayerState.ts

@@ -350,21 +350,21 @@ export function useMultiplayerState({
       file: File,
       id: string,
     ): Promise<string | false> => {
-      if (!envs.TLDRAW__ASSETS_ENABLED) {
+      if (!envs.TLDRAW_ASSETS_ENABLED) {
         toast.info("Asset uploading is disabled");
         return false;
       }
 
-      if (file.size > envs.TLDRAW__ASSETS_MAX_SIZE_BYTES) {
+      if (file.size > envs.TLDRAW_ASSETS_MAX_SIZE_BYTES) {
         const bytesInMb = 1048576;
-        const sizeInMb = envs.TLDRAW__ASSETS_MAX_SIZE_BYTES / bytesInMb;
+        const sizeInMb = envs.TLDRAW_ASSETS_MAX_SIZE_BYTES / bytesInMb;
         toast.info(`Asset is too big - max. ${sizeInMb}MB`);
         return false;
       }
 
       const isMimeTypeDisallowed =
-        envs.TLDRAW__ASSETS_ALLOWED_MIME_TYPES_LIST &&
-        !envs.TLDRAW__ASSETS_ALLOWED_MIME_TYPES_LIST.includes(file.type);
+        envs.TLDRAW_ASSETS_ALLOWED_MIME_TYPES_LIST &&
+        !envs.TLDRAW_ASSETS_ALLOWED_MIME_TYPES_LIST.includes(file.type);
 
       if (isMimeTypeDisallowed) {
         toast.info("Asset of this type is not allowed");

src/mapper/configuration.mapper.ts

@@ -2,17 +2,17 @@ import { TypeGuard } from "../guards/type.guard";
 import { Envs } from "../types/Envs";
 
 const checkEnvType = (obj: Record<string, unknown>): void => {
-  TypeGuard.checkKeyAndValueExists(obj, "TLDRAW__WEBSOCKET_URL");
+  TypeGuard.checkKeyAndValueExists(obj, "TLDRAW_WEBSOCKET_URL");
   TypeGuard.checkKeyAndValueExists(obj, "FEATURE_TLDRAW_ENABLED");
-  TypeGuard.checkKeyAndValueExists(obj, "TLDRAW__ASSETS_ENABLED");
-  TypeGuard.checkKeyAndValueExists(obj, "TLDRAW__ASSETS_MAX_SIZE_BYTES");
+  TypeGuard.checkKeyAndValueExists(obj, "TLDRAW_ASSETS_ENABLED");
+  TypeGuard.checkKeyAndValueExists(obj, "TLDRAW_ASSETS_MAX_SIZE_BYTES");
   TypeGuard.checkKeyAndValueExists(
     obj,
-    "TLDRAW__ASSETS_ALLOWED_MIME_TYPES_LIST",
+    "TLDRAW_ASSETS_ALLOWED_MIME_TYPES_LIST",
   );
   TypeGuard.checkBoolean(obj.FEATURE_TLDRAW_ENABLED);
-  TypeGuard.checkNumber(obj.TLDRAW__ASSETS_MAX_SIZE_BYTES);
-  TypeGuard.checkArray(obj.TLDRAW__ASSETS_ALLOWED_MIME_TYPES_LIST);
+  TypeGuard.checkNumber(obj.TLDRAW_ASSETS_MAX_SIZE_BYTES);
+  TypeGuard.checkArray(obj.TLDRAW_ASSETS_ALLOWED_MIME_TYPES_LIST);
 };
 
 const castToEnv = (obj: Record<string, unknown>): Envs => {
@@ -27,13 +27,12 @@ export class ConfigurationMapper {
     const configuration = castToEnv(obj);
 
     const mappedConfiguration: Envs = {
-      TLDRAW__WEBSOCKET_URL: configuration.TLDRAW__WEBSOCKET_URL,
+      TLDRAW_WEBSOCKET_URL: configuration.TLDRAW_WEBSOCKET_URL,
       FEATURE_TLDRAW_ENABLED: configuration.FEATURE_TLDRAW_ENABLED,
-      TLDRAW__ASSETS_ENABLED: configuration.TLDRAW__ASSETS_ENABLED,
-      TLDRAW__ASSETS_MAX_SIZE_BYTES:
-        configuration.TLDRAW__ASSETS_MAX_SIZE_BYTES,
-      TLDRAW__ASSETS_ALLOWED_MIME_TYPES_LIST:
-        configuration.TLDRAW__ASSETS_ALLOWED_MIME_TYPES_LIST,
+      TLDRAW_ASSETS_ENABLED: configuration.TLDRAW_ASSETS_ENABLED,
+      TLDRAW_ASSETS_MAX_SIZE_BYTES: configuration.TLDRAW_ASSETS_MAX_SIZE_BYTES,
+      TLDRAW_ASSETS_ALLOWED_MIME_TYPES_LIST:
+        configuration.TLDRAW_ASSETS_ALLOWED_MIME_TYPES_LIST,
     };
 
     return mappedConfiguration;

src/stores/setup.ts

@@ -25,7 +25,7 @@ const user = userResult.user;
 const parentId = getParentId();
 const doc = new Doc();
 const provider = new WebsocketProvider(
-  envs?.TLDRAW__WEBSOCKET_URL,
+  envs?.TLDRAW_WEBSOCKET_URL,
   parentId,
   doc,
   {

src/types/Envs.ts

@@ -1,7 +1,7 @@
 export type Envs = {
   FEATURE_TLDRAW_ENABLED: boolean;
-  TLDRAW__ASSETS_ENABLED: boolean;
-  TLDRAW__ASSETS_MAX_SIZE_BYTES: number;
-  TLDRAW__ASSETS_ALLOWED_MIME_TYPES_LIST: string[];
-  TLDRAW__WEBSOCKET_URL: string;
+  TLDRAW_ASSETS_ENABLED: boolean;
+  TLDRAW_ASSETS_MAX_SIZE_BYTES: number;
+  TLDRAW_ASSETS_ALLOWED_MIME_TYPES_LIST: string[];
+  TLDRAW_WEBSOCKET_URL: string;
 };

src/utils/envConfig.ts

@@ -27,10 +27,10 @@ export const getEnvs = async (): Promise<Envs> => {
       throw error;
     } else {
       const configuration: Envs = {
-        TLDRAW__WEBSOCKET_URL: "ws://localhost:3345",
-        TLDRAW__ASSETS_ENABLED: true,
-        TLDRAW__ASSETS_MAX_SIZE_BYTES: 10485760,
-        TLDRAW__ASSETS_ALLOWED_MIME_TYPES_LIST: [
+        TLDRAW_WEBSOCKET_URL: "ws://localhost:3345",
+        TLDRAW_ASSETS_ENABLED: true,
+        TLDRAW_ASSETS_MAX_SIZE_BYTES: 10485760,
+        TLDRAW_ASSETS_ALLOWED_MIME_TYPES_LIST: [
           "image/png",
           "image/jpeg",
           "image/gif",

src/utils/tldrawFileUploadUtils.ts

@@ -5,9 +5,9 @@
  *  @see Function we replaced with our own: openAssetsFromFileSystem
  **/
 
-import { envs } from "../stores/setup";
-import { fileOpen } from "browser-fs-access";
 import { TldrawApp } from "@tldraw/tldraw";
+import { fileOpen } from "browser-fs-access";
+import { envs } from "../stores/setup";
 
 // those are all the image extensions that are supported by tldraw
 const IMAGE_EXTENSIONS = [".png", ".svg", ".jpg", ".jpeg", ".gif"];
@@ -29,7 +29,7 @@ const fileMimeExtensions: { [key: string]: string[] } = {
   "image/gif": [".gif"],
 };
 
-const allowedMimeTypes = envs?.TLDRAW__ASSETS_ALLOWED_MIME_TYPES_LIST || [];
+const allowedMimeTypes = envs?.TLDRAW_ASSETS_ALLOWED_MIME_TYPES_LIST || [];
 
 const allowedExtensions = allowedMimeTypes.flatMap(
   (mimeType) => fileMimeExtensions[mimeType] || [],
@@ -81,10 +81,10 @@ const getVideoSizeFromSrc = (src: string): Promise<number[]> => {
 };
 
 export {
-  openAssetsFromFileSystem,
-  getViewboxFromSVG,
   getImageSizeFromSrc,
   getVideoSizeFromSrc,
+  getViewboxFromSVG,
   IMAGE_EXTENSIONS,
+  openAssetsFromFileSystem,
   VIDEO_EXTENSIONS,
 };