removed tries to modularize the react package

Author: bennobuilder

examples/react/develop/functional-component-ts/src/App.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import './App.css';
 import { useAgile, useWatcher, useSelector } from '@agile-ts/react';
-import { useProxy } from '@agile-ts/react/proxy';
+import { useProxy } from '@agile-ts/react';
 import {
   COUNTUP,
   externalCreatedItem,

packages/api/package.json

@@ -32,7 +32,7 @@
     "watch:push": "tsc-watch --onSuccess \"yarn run dev:push\"",
     "watch": "shx rm -rf dist && tsc -w",
     "release": "yarn run prepare",
-    "release:manual": "yarn run prepare && yarn run release && npm publish",
+    "release:manual": "yarn run release && npm publish",
     "pack": "npm pack",
     "test": "jest",
     "test:coverage": "jest --coverage",

packages/core/package.json

@@ -43,7 +43,7 @@
     "watch:push": "tsc-watch --onSuccess \"yarn run dev:push\"",
     "watch": "shx rm -rf dist && tsc -w",
     "release": "node ./scripts/prepublish.js && yarn run prepare",
-    "release:manual": "yarn run prepare && yarn run release && npm publish && git checkout README.md",
+    "release:manual": "yarn run release && npm publish && git checkout README.md",
     "pack": "npm pack",
     "test": "jest",
     "test:coverage": "jest --coverage",

packages/core/scripts/prepublish.js

@@ -1,6 +1,4 @@
 const fs = require('fs-extra');
-const path = require('path');
-const execa = require('execa');
 
 const run = () => {
   fs.copySync('../../README.md', './README.md');

packages/core/src/logCodeManager.ts

@@ -185,11 +185,10 @@ function setAllowLogging(logging: boolean) {
  * @param replacers - Instances that replace these '${x}' placeholders based on the index
  * For example: 'replacers[0]' replaces '${0}', 'replacers[1]' replaces '${1}', ..
  */
-function getLog<T extends LogCodesArrayType<typeof logCodeMessages>>(
-  logCode: T,
-  replacers: any[] = []
-): string {
-  let result = logCodeMessages[logCode];
+function getLog<
+  T extends LogCodesArrayType<typeof LogCodeManager.logCodeMessages>
+>(logCode: T, replacers: any[] = []): string {
+  let result = LogCodeManager.logCodeMessages[logCode];
   if (result == null) return logCode;
 
   // Replace '${x}' with the specified replacer instances
@@ -210,11 +209,9 @@ function getLog<T extends LogCodesArrayType<typeof logCodeMessages>>(
  * For example: 'replacers[0]' replaces '${0}', 'replacers[1]' replaces '${1}', ..
  * @param data - Data to be attached to the end of the log message.
  */
-function log<T extends LogCodesArrayType<typeof logCodeMessages>>(
-  logCode: T,
-  replacers: any[] = [],
-  ...data: any[]
-): void {
+function log<
+  T extends LogCodesArrayType<typeof LogCodeManager.logCodeMessages>
+>(logCode: T, replacers: any[] = [], ...data: any[]): void {
   const logger = LogCodeManager.getLogger();
   if ((logger != null && !logger.isActive) || !allowLogging) return;
   const logType = logCodeTypes[logCode.substr(3, 2)];
@@ -242,15 +239,12 @@ function log<T extends LogCodesArrayType<typeof logCodeMessages>>(
  * For example: 'replacers[0]' replaces '${0}', 'replacers[1]' replaces '${1}', ..
  * @param data - Data to be attached to the end of the log message.
  */
-function logIfTags<T extends LogCodesArrayType<typeof logCodeMessages>>(
-  tags: string[],
-  logCode: T,
-  replacers: any[] = [],
-  ...data: any[]
-): void {
+function logIfTags<
+  T extends LogCodesArrayType<typeof LogCodeManager.logCodeMessages>
+>(tags: string[], logCode: T, replacers: any[] = [], ...data: any[]): void {
   const logger = LogCodeManager.getLogger();
   if ((logger != null && !logger.isActive) || !allowLogging) return;
-  const logType = logCodeTypes[logCode.substr(3, 2)];
+  const logType = LogCodeManager.logCodeLogTypes[logCode.substr(3, 2)];
   if (typeof logType !== 'string') return;
 
   // Handle logging without Logger
@@ -267,15 +261,15 @@ function logIfTags<T extends LogCodesArrayType<typeof logCodeMessages>>(
  * Creates an extension of the specified LogCodeManager
  * and assigns the provided additional log messages to it.
  *
- * @param additionalLogs - Log messages to be added to the LogCodeManager.
  * @param logCodeManager - LogCodeManager to create an extension from.
+ * @param additionalLogs - Log messages to be added to the LogCodeManager.
  */
 export function assignAdditionalLogs<
   NewLogCodeMessages,
-  OldLogCodeMessages = typeof logCodeMessages
+  OldLogCodeMessages = typeof LogCodeManager.logCodeMessages
 >(
-  additionalLogs: { [key: string]: string },
-  logCodeManager: LogCodeManagerInterface<OldLogCodeMessages>
+  logCodeManager: LogCodeManagerInterface<OldLogCodeMessages>,
+  additionalLogs: { [key: string]: string }
 ): LogCodeManagerInterface<NewLogCodeMessages> {
   const copiedLogCodeManager = copy(logCodeManager);
   copiedLogCodeManager.logCodeMessages = {

packages/event/package.json

@@ -31,7 +31,7 @@
     "watch:push": "tsc-watch --onSuccess \"yarn run dev:push\"",
     "watch": "shx rm -rf dist && tsc -w",
     "release": "yarn run prepare",
-    "release:manual": "yarn run prepare && yarn run release && npm publish",
+    "release:manual": "yarn run release && npm publish",
     "pack": "npm pack",
     "test": "jest",
     "test:coverage": "jest --coverage",

packages/logger/package.json

@@ -31,7 +31,7 @@
     "watch:push": "tsc-watch --onSuccess \"yarn run dev:push\"",
     "watch": "shx rm -rf dist && tsc -w",
     "release": "yarn run prepare",
-    "release:manual": "yarn run prepare && yarn run release && npm publish",
+    "release:manual": "yarn run release && npm publish",
     "pack": "npm pack",
     "test": "jest",
     "test:coverage": "jest --coverage",

packages/multieditor/README.md

@@ -18,25 +18,33 @@
 ```ts
 // Create Multieditior 
 const multiEditor = createMultieditor(editor => ({
-  data: {
+  initialData: {
     id: "myId", // Initial Id
     email: undefined, // Inital Email
     name: undefined, // Inital Name
   },
   onSubmit: async (data) => {
-    console.log("Submitted ", data);  // <---------------------------------------------    
-  }, //                                                                               |
-  fixedProperties: ["id"], // Properties that are always passed to the 'onSubmit()' method
-  validateMethods: {
-    email: agileResolver(isString, isEmail, isRequired), // Validation with tree shakable validation methods
-    name: yupResolver(Yup.string().max(10).min(2).required()), // Validation with external validatiors like Yup
-  },
-  editableProperties: ["email", "name"], // Properties that can be edited
+    console.log("Submitted ", data);  // <---------
+  }, //                                           |
+  // Properties that are always passed to the 'onSubmit()' method
+  fixedProperties: ["id"],
+  validationSchema: {
+    // Validation with inbuilt tree shakable validation methods
+    email: agileResolver(isString, isEmail, isRequired),
+    // Validation with external validatiors like Yup
+    name: yupResolver(Yup.string().required().max(10).min(2)),
+  }
 }));
 
-// Update Multieditor values in the UI-Form
-multiEditor.setValue("email", "[email protected]");
-multiEditor.setValue("name", "Jeff");
+// Use the Multieditor in any UI-Form
+// ..
+<label>First Name:</label>
+<input
+onChange={(e) => signUpEditor.setValue("firstName", e.target.value)}
+defaultValue={signUpEditor.getItemInitialValue("firstName")}
+/>
+<ErrorMessage error={signUpEditor.getStatus("firstName")?.message} />
+// ..
 
 // Submit Multieditor and see what the 'onSubmit()' method will log
 multiEditor.submit();

packages/multieditor/package.json

@@ -35,7 +35,7 @@
     "watch:push": "tsc-watch --onSuccess \"yarn run dev:push\"",
     "watch": "shx rm -rf dist && tsc -w",
     "release": "yarn run prepare",
-    "release:manual": "yarn run prepare && yarn run release && npm publish",
+    "release:manual": "yarn run release && npm publish",
     "pack": "npm pack",
     "test": "jest",
     "test:coverage": "jest --coverage",

packages/multieditor/src/logCodeManager.ts

@@ -19,7 +19,7 @@ export const LogCodeManager =
   process.env.NODE_ENV !== 'production'
     ? assignAdditionalLogs<
         typeof CoreLogCodeManager.logCodeMessages & typeof additionalLogs
-      >(additionalLogs, CoreLogCodeManager)
+      >(CoreLogCodeManager, additionalLogs)
     : assignAdditionalLogs<
         typeof CoreLogCodeManager.logCodeMessages & typeof additionalLogs
-      >({}, CoreLogCodeManager);
+      >(CoreLogCodeManager, {});

packages/proxytree/package.json

@@ -31,7 +31,7 @@
     "watch:push": "tsc-watch --onSuccess \"yarn run dev:push\"",
     "watch": "shx rm -rf dist && tsc -w",
     "release": "yarn run prepare",
-    "release:manual": "yarn run prepare && yarn run release && npm publish",
+    "release:manual": "yarn run release && npm publish",
     "pack": "npm pack",
     "test": "jest",
     "test:coverage": "jest --coverage",

packages/react/package.json

@@ -32,6 +32,24 @@
       "module": "./dist/esm/index.js",
       "import": "./dist/esm/index.js",
       "default": "./dist/index.js"
+    },
+    "./proxy": {
+      "types": "./dist/proxy/index.d.ts",
+      "module": "./dist/esm/proxy/index.js",
+      "import": "./dist/esm/proxy/index.js",
+      "default": "./dist/proxy/index.js"
+    },
+    "./event": {
+      "types": "./dist/event/index.d.ts",
+      "module": "./dist/esm/event/index.js",
+      "import": "./dist/esm/event/index.js",
+      "default": "./dist/event/index.js"
+    },
+    "./multieditor": {
+      "types": "./dist/multieditor/index.d.ts",
+      "module": "./dist/esm/multieditor/index.js",
+      "import": "./dist/esm/multieditor/index.js",
+      "default": "./dist/multieditor/index.js"
     }
   },
   "scripts": {
@@ -42,7 +60,7 @@
     "watch:push": "tsc-watch --onSuccess \"yarn run dev:push\"",
     "watch": "shx rm -rf dist && tsc -w",
     "release": "yarn run prepare",
-    "release:manual": "yarn run prepare && yarn run release && npm publish",
+    "release:manual": "yarn run release && npm publish",
     "pack": "npm pack",
     "test": "jest",
     "test:coverage": "jest --coverage",

packages/react/src/core/hooks/useBaseAgile.ts

@@ -8,7 +8,7 @@ import Agile, {
   SubscriptionContainerKeyType,
   RegisterSubscriptionConfigInterface,
 } from '@agile-ts/core';
-import { useIsomorphicLayoutEffect } from '../../general/hooks/useIsomorphicLayoutEffect';
+import { useIsomorphicLayoutEffect } from '../../general';
 import { LogCodeManager } from '../../logCodeManager';
 
 /**

packages/react/src/event/eventPackage.ts

@@ -0,0 +1,7 @@
+// TODO https://stackoverflow.com/questions/68148235/require-module-inside-a-function-doesnt-work
+export let eventPackage: any = null;
+try {
+  eventPackage = require('@agile-ts/event');
+} catch (e) {
+  // empty catch block
+}

packages/react/src/event/hooks/useEvent.ts

@@ -2,18 +2,25 @@ import React from 'react';
 import {
   Agile,
   getAgileInstance,
-  LogCodeManager,
   SubscriptionContainerKeyType,
 } from '@agile-ts/core';
-import { Event, EventCallbackFunction } from '@agile-ts/event';
+import type { Event, EventCallbackFunction } from '@agile-ts/event'; // When only importing the types the "Can't resolve '@agile-ts/event'" error doesn't occur
 import { useIsomorphicLayoutEffect } from '../../general';
+import { eventPackage } from '../eventPackage';
+import { LogCodeManager } from '../../logCodeManager';
 
 export function useEvent<E extends Event<any>>(
   event: E,
   callback: EventCallbackFunction<E['payload']>,
   key?: SubscriptionContainerKeyType,
   agileInstance?: Agile
 ): void {
+  // Return if '@agile-ts/event' isn't installed
+  if (eventPackage == null) {
+    LogCodeManager.log('33:03:00');
+    return;
+  }
+
   // Trigger State used to force Component to rerender
   const [, forceRender] = React.useReducer((s) => s + 1, 0);
 

packages/react/src/index.ts

@@ -1,5 +1,7 @@
 import reactIntegration from './react.integration';
 
 export * from './core';
+export * from './proxy';
+export * from './event';
 
 export default reactIntegration;

packages/react/src/logCodeManager.ts

@@ -9,6 +9,8 @@ const additionalLogs = {
   '31:03:00':
     "In order to use the Agile proxy functionality, the installation of an additional package called '@agile-ts/proxytree' is required!",
   '32:03:00': 'Failed to subscribe Component with deps',
+  '33:03:00':
+    "In order to use the Agile event functionality, the installation of an additional package called '@agile-ts/event' is required!",
 };
 
 /**
@@ -21,7 +23,9 @@ export const LogCodeManager =
   process.env.NODE_ENV !== 'production'
     ? assignAdditionalLogs<
         typeof CoreLogCodeManager.logCodeMessages & typeof additionalLogs
-      >(additionalLogs, CoreLogCodeManager)
+      >(CoreLogCodeManager, additionalLogs)
     : assignAdditionalLogs<
         typeof CoreLogCodeManager.logCodeMessages & typeof additionalLogs
-      >({}, CoreLogCodeManager);
+      >(CoreLogCodeManager, {});
+
+console.log(LogCodeManager);

packages/react/src/proxy/hooks/useProxy.ts

@@ -5,7 +5,6 @@ import {
   ProxyWeakMapType,
 } from '@agile-ts/core';
 import { generateId, isValidObject, normalizeArray } from '@agile-ts/utils';
-import { ProxyTree } from '@agile-ts/proxytree';
 import {
   AgileHookConfigInterface,
   AgileOutputHookArrayType,
@@ -14,6 +13,8 @@ import {
   SubscribableAgileInstancesType,
   useBaseAgile,
 } from '../../core';
+import { proxyPackage } from '../proxyPackage';
+import { LogCodeManager } from '../../logCodeManager';
 
 /**
  * A React Hook for binding the most relevant value of multiple Agile Instances
@@ -78,14 +79,20 @@ export function useProxy<
   const depsArray = extractRelevantObservers(normalizeArray(deps));
   const proxyTreeWeakMap = new WeakMap();
 
+  // Return if '@agile-ts/proxytree' isn't installed
+  if (proxyPackage == null) {
+    LogCodeManager.log('31:03:00');
+    return null as any;
+  }
+
   const handleReturn = (dep: Observer | undefined) => {
     if (dep == null) return undefined as any;
     const value = dep.value;
 
     // If proxyBased and the value is of the type object.
     // Wrap a Proxy around the object to track the accessed properties.
     if (isValidObject(value, true)) {
-      const proxyTree = new ProxyTree(value);
+      const proxyTree = new proxyPackage.ProxyTree(value);
       proxyTreeWeakMap.set(dep, proxyTree);
       return proxyTree.proxy;
     }

packages/react/src/proxy/proxyPackage.ts

@@ -0,0 +1,7 @@
+// TODO https://stackoverflow.com/questions/68148235/require-module-inside-a-function-doesnt-work
+export let proxyPackage: any = null;
+try {
+  proxyPackage = require('@agile-ts/proxytree');
+} catch (e) {
+  // empty catch block
+}

packages/utils/package.json

@@ -30,7 +30,7 @@
     "watch:push": "tsc-watch --onSuccess \"yarn run dev:push\"",
     "watch": "shx rm -rf dist && tsc -w",
     "release": "yarn run prepare",
-    "release:manual": "yarn run prepare && yarn run release && npm publish",
+    "release:manual": "yarn run release && npm publish",
     "pack": "npm pack",
     "test": "jest",
     "test:coverage": "jest --coverage",

packages/vue/package.json

@@ -33,7 +33,7 @@
     "watch:push": "tsc-watch --onSuccess \"yarn run dev:push\"",
     "watch": "shx rm -rf dist && tsc -w",
     "release": "yarn run prepare",
-    "release:manual": "yarn run prepare && yarn run release && npm publish",
+    "release:manual": "yarn run release && npm publish",
     "pack": "npm pack",
     "test": "jest",
     "test:coverage": "jest --coverage",