added log code manager to react package

Author: bennobuilder

packages/core/src/logCodeManager.ts

@@ -23,7 +23,7 @@ const logCodeTypes = {
 // ---
 // 00:00:|00| third digits are based on the Log Message (ascending counted)
 
-const niceLogCodeMessages = {
+const logCodeMessages = {
   // Agile
   '10:00:00': 'Created new AgileInstance.',
   '10:02:00':
@@ -165,13 +165,6 @@ const niceLogCodeMessages = {
   '00:03:01': "'${0}' has to be of the type ${1}!",
 };
 
-// Note: Not outsource the 'production' env check,
-// because then webpack can't treeshake based on the current env
-const logCodeMessages: typeof niceLogCodeMessages =
-  typeof process === 'object' && process.env.NODE_ENV !== 'production'
-    ? niceLogCodeMessages
-    : ({} as any);
-
 /**
  * Returns the log message according to the specified log code.
  *
@@ -257,20 +250,22 @@ function logIfTags<T extends LogCodesArrayType<typeof logCodeMessages>>(
   // Handle logging with Logger
   logger.if.tag(tags)[logType](getLog(logCode, replacers), ...data);
 }
-/**
- * The Log Code Manager keeps track
- * and manages all important Logs of AgileTs.
- *
- * @internal
- */
-let tempLogCodeManager: {
-  getLog: typeof getLog;
-  log: typeof log;
-  logCodeLogTypes: typeof logCodeTypes;
-  logCodeMessages: typeof logCodeMessages;
-  getLogger: () => any;
-  logIfTags: typeof logIfTags;
-};
+
+export function assignAdditionalLogs<
+  NewLogCodeMessages,
+  OldLogCodeMessages = typeof logCodeMessages
+>(
+  additionalLogs: { [key: string]: string },
+  logCodeManager: LogCodeManagerInterface<OldLogCodeMessages>
+): LogCodeManagerInterface<NewLogCodeMessages> {
+  logCodeManager.logCodeMessages = {
+    ...LogCodeManager.logCodeMessages,
+    ...additionalLogs,
+  } as any;
+  return logCodeManager as any;
+}
+
+let tempLogCodeManager: LogCodeManagerInterface<typeof logCodeMessages>;
 if (typeof process === 'object' && process.env.NODE_ENV !== 'production') {
   let loggerPackage: any = null;
   try {
@@ -284,11 +279,7 @@ if (typeof process === 'object' && process.env.NODE_ENV !== 'production') {
     log,
     logCodeLogTypes: logCodeTypes,
     logCodeMessages: logCodeMessages,
-    // Not doing 'logger: loggerPackage?.sharedAgileLogger'
-    // because only by calling a function (now 'getLogger()') the 'sharedLogger' is refetched
-    getLogger: () => {
-      return loggerPackage?.sharedAgileLogger ?? null;
-    },
+    getLogger: loggerPackage.getLogger,
     logIfTags,
   };
 } else {
@@ -297,20 +288,43 @@ if (typeof process === 'object' && process.env.NODE_ENV !== 'production') {
     getLog: (logCode, replacers) => logCode,
     log,
     logCodeLogTypes: logCodeTypes,
-    logCodeMessages: logCodeMessages,
-    // Not doing 'logger: loggerPackage?.sharedAgileLogger'
-    // because only by calling a function (now 'getLogger()') the 'sharedLogger' is refetched
+    logCodeMessages: {} as any,
     getLogger: () => {
       return null;
     },
     logIfTags: (tags, logCode, replacers) => {
-      /* empty */
+      /* empty because logs with tags can't be that important */
     },
   };
 }
+
+/**
+ * The Log Code Manager keeps track
+ * and manages all important Logs for the '@agile-ts/core' package.
+ *
+ * @internal
+ */
 export const LogCodeManager = tempLogCodeManager;
 
 export type LogCodesArrayType<T> = {
   [K in keyof T]: T[K] extends string ? K : never;
 }[keyof T] &
   string;
+
+export interface LogCodeManagerInterface<T = typeof logCodeMessages> {
+  getLog: (logCode: LogCodesArrayType<T>, replacers?: any[]) => string;
+  log: (
+    logCode: LogCodesArrayType<T>,
+    replacers?: any[],
+    ...data: any[]
+  ) => void;
+  logCodeLogTypes: typeof logCodeTypes;
+  logCodeMessages: T;
+  getLogger: () => any;
+  logIfTags: (
+    tags: string[],
+    logCode: LogCodesArrayType<T>,
+    replacers?: any[],
+    ...data: any[]
+  ) => void;
+}

packages/logger/src/index.ts

@@ -1,6 +1,9 @@
 import { CreateLoggerConfigInterface, Logger } from './logger';
 import { defineConfig } from '@agile-ts/utils';
 
+export * from './logger';
+export default Logger;
+
 const defaultLogConfig = {
   prefix: 'Agile',
   active: true,
@@ -9,25 +12,24 @@ const defaultLogConfig = {
   allowedTags: ['runtime', 'storage', 'subscription', 'multieditor'],
 };
 
-/**
- * Shared Agile Logger.
- */
 let sharedAgileLogger = new Logger(defaultLogConfig);
 
 /**
  * Assigns the specified configuration object to the shared Agile Logger.
  *
  * @param config - Configuration object
  */
-// https://stackoverflow.com/questions/32558514/javascript-es6-export-const-vs-export-let
-function assignSharedAgileLoggerConfig(
+export function assignSharedAgileLoggerConfig(
   config: CreateLoggerConfigInterface = {}
 ): Logger {
   config = defineConfig(config, defaultLogConfig);
   sharedAgileLogger = new Logger(config);
   return sharedAgileLogger;
 }
 
-export { sharedAgileLogger, assignSharedAgileLoggerConfig };
-export * from './logger';
-export default Logger;
+/**
+ * Returns the shared Agile Logger.
+ */
+export function getLogger(): Logger {
+  return sharedAgileLogger;
+}

packages/react/src/hooks/useBaseAgile.ts

@@ -3,13 +3,13 @@ import Agile, {
   Collection,
   ComponentIdType,
   getAgileInstance,
-  LogCodeManager,
   Observer,
   State,
   SubscriptionContainerKeyType,
   RegisterSubscriptionConfigInterface,
 } from '@agile-ts/core';
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+import { LogCodeManager } from '../logCodeManager';
 
 /**
  * An internal used React Hook
@@ -46,10 +46,7 @@ export const useBaseAgile = (
     // Try to extract Agile Instance from the specified Instance/s
     if (agileInstance == null) agileInstance = getAgileInstance(observers[0]);
     if (agileInstance == null || agileInstance.subController == null) {
-      LogCodeManager.getLogger()?.error(
-        'Failed to subscribe Component with deps because of missing valid Agile Instance.',
-        deps
-      );
+      LogCodeManager.log('30:03:00', deps);
       return;
     }
 

packages/react/src/hooks/useProxy.ts

@@ -15,6 +15,7 @@ import {
   AgileOutputHookArrayType,
   AgileOutputHookType,
 } from './useAgile';
+import { LogCodeManager } from '../logCodeManager';
 
 // TODO https://stackoverflow.com/questions/68148235/require-module-inside-a-function-doesnt-work
 let proxyPackage: any = null;
@@ -100,11 +101,7 @@ export function useProxy<
         proxyTreeWeakMap.set(dep, proxyTree);
         return proxyTree.proxy;
       } else {
-        // TODO add LogCode Manager logcode
-        console.error(
-          'In order to use the Agile proxy functionality, ' +
-            `the installation of an additional package called '@agile-ts/proxytree' is required!`
-        );
+        LogCodeManager.log('31:03:00');
       }
     }
 

packages/react/src/logCodeManager.ts

@@ -0,0 +1,26 @@
+import {
+  LogCodeManager as CoreLogCodeManager,
+  assignAdditionalLogs,
+} from '@agile-ts/core';
+
+const additionalLogs = {
+  '30:03:00':
+    'Failed to subscribe Component with deps because of missing valid Agile Instance.',
+  '31:03:00':
+    "In order to use the Agile proxy functionality, the installation of an additional package called '@agile-ts/proxytree' is required!",
+};
+
+/**
+ * The Log Code Manager keeps track
+ * and manages all important Logs for the '@agile-ts/react' package.
+ *
+ * @internal
+ */
+export const LogCodeManager =
+  typeof process === 'object' && process.env.NODE_ENV !== 'production'
+    ? assignAdditionalLogs<
+        typeof CoreLogCodeManager.logCodeMessages & typeof additionalLogs
+      >(additionalLogs, CoreLogCodeManager)
+    : assignAdditionalLogs<
+        typeof CoreLogCodeManager.logCodeMessages & typeof additionalLogs
+      >({}, CoreLogCodeManager);