@carbonorm/carbonreact 4.0.11 → 4.0.12

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbonorm/carbonreact",
   "license": "MIT",
-  "version": "4.0.11",
+  "version": "4.0.12",
   "browser": "dist/index.umd.js",
   "module": "dist/index.esm.js",
   "main": "dist/index.cjs.js",

package/src/CarbonReact.tsx

@@ -1,16 +1,16 @@
-import {clearCache} from "@carbonorm/carbonnode";
+import { clearCache } from "@carbonorm/carbonnode";
 import changed from "hoc/changed";
-import {GlobalHistory} from "hoc/GlobalHistory";
+import { GlobalHistory } from "hoc/GlobalHistory";
 import hexToRgb from "hoc/hexToRgb";
-import {Component, Context, createContext, ReactElement, ReactNode} from 'react';
-import {ToastContainer} from 'react-toastify';
+import { Component, Context, createContext, ReactElement, ReactNode } from 'react';
+import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.min.css';
 import BackendThrowable from 'components/Errors/BackendThrowable';
 import Nest from 'components/Nest/Nest';
-import {initialRestfulObjectsState, iRestfulObjectArrayTypes} from "variables/C6";
-import CarbonWebSocket, {iCarbonWebSocketProps} from "./components/WebSocket/CarbonWebSocket";
-import updateRestfulObjectArrays, {iUpdateRestfulObjectArrays} from "./hoc/updateRestfulObjectArrays";
-import deleteRestfulObjectArrays, {iDeleteRestfulObjectArrays} from "./hoc/deleteRestfulObjectArrays";
+import { initialRestfulObjectsState, iRestfulObjectArrayTypes } from "variables/C6";
+import CarbonWebSocket, { iCarbonWebSocketProps } from "./components/WebSocket/CarbonWebSocket";
+import updateRestfulObjectArrays, { iUpdateRestfulObjectArrays } from "./hoc/updateRestfulObjectArrays";
+import deleteRestfulObjectArrays, { iDeleteRestfulObjectArrays } from "./hoc/deleteRestfulObjectArrays";
 
 
 export type tStatefulApiData<T extends {
@@ -46,40 +46,32 @@ export function isJsonString(str: string) {
         return false;
     }
     return true;
-
 }
 
-export interface iCarbonReactProps<P = {}, S extends iCarbonReactState = iCarbonReactState> {
+abstract class CarbonReact<P = {}, S extends iCarbonReactState = iCarbonReactState> extends Component<{
     children?: ReactNode | ReactNode[],
     instanceId?: string,
     websocket?: Omit<iCarbonWebSocketProps<P, S>, "instance"> | false
-}
-
-abstract class CarbonReact<P = {}, S extends iCarbonReactState = iCarbonReactState> extends Component<iCarbonReactProps<P, S> & P, S> {
+} & P, S> {
 
     private static persistentStateMap = new Map<string, { [key: string]: any; }>();
+    private static activeInstances = new Map<string, CarbonReact<any, any>>();
 
-    // Context is for functional components to access the state of this class efficiently
     context: Context<S & iCarbonReactState> = createContext(this.state);
-
     protected target: typeof CarbonReact;
 
-    // @link https://stackoverflow.com/questions/55029032/what-is-typescripts-thistype-used-for
     protected static _instance: ThisType<CarbonReact<any, any>>;
 
     static getInstance<T extends CarbonReact<any, any>>(): T {
         return this._instance as T;
     }
-
     static get instance() {
         return this.getInstance();
     }
-
     static set instance(instance: CarbonReact<any, any>) {
         this._instance = instance;
     }
 
-    // these are public but the class is abstract
     public updateRestfulObjectArrays = <ObjectType extends { [key: string]: any; } = {}>
     (rest: Omit<iUpdateRestfulObjectArrays<ObjectType, S, P>, "instance">) => updateRestfulObjectArrays<ObjectType, S, P>({
         instance: this,
@@ -94,76 +86,57 @@ abstract class CarbonReact<P = {}, S extends iCarbonReactState = iCarbonReactSta
 
     static lastLocation = window.location.pathname;
 
-    // @link https://github.com/welldone-software/why-did-you-render
-    // noinspection JSUnusedGlobalSymbols
     static whyDidYouRender = true;
 
-
-    protected constructor(props) {
-
+    protected constructor(props: {
+        children?: ReactNode | ReactNode[];
+        shouldStatePersist?: boolean | undefined;
+        websocket?: boolean | iCarbonWebSocketProps<P, S> | undefined;
+        instanceId?: string; // Optional instanceId from props
+    } & P) {
         super(props);
 
-        if (!props.instanceId && (new.target as typeof CarbonReact)._instance) {
-
-            // todo - instanceId being unique should solve this, but.... how
-            // This is a singleton pattern, we can only have one instance of this class
-            throw new Error(`${new.target.name} instance already exists! CarbonReact extended classes can only be referenced once in DOM`);
+        const target = new.target as typeof CarbonReact;
+        const identifier = props.instanceId || target.name;
 
+        if (CarbonReact.activeInstances.has(identifier)) {
+            throw new Error(`Instance with ID ${identifier} already exists! CarbonReact extended classes can only be referenced once in DOM with the same identifier.`);
         }
 
-        (new.target as typeof CarbonReact).instance = (this);
-
-        this.target = new.target;
+        CarbonReact.activeInstances.set(identifier, this);
 
+        this.target = target;
         console.log('CarbonORM TSX CONSTRUCTOR');
 
-        // this is the magic that allows each class that's extends this to have a static instance - a singleton pattern
-        // new.target is a meta-property introduced in ES6 that references the constructor that was directly invoked with the new keyword.
-        Object.assign(new.target, {
+        Object.assign(target, {
             _instance: this
-        })
-
-        if (this.props.instanceId && CarbonReact.persistentStateMap.has(this.props.instanceId)) {
-
-            this.state = CarbonReact.persistentStateMap.get(this.props.instanceId) as S & iCarbonReactState;
+        });
 
+        if (CarbonReact.persistentStateMap.has(identifier)) {
+            this.state = CarbonReact.persistentStateMap.get(identifier) as S & iCarbonReactState;
         } else {
-
-            // This should only ever be done here, when the full state is being trashed.
-            // todo - does this suck in context of multiple instances?
             clearCache({
                 ignoreWarning: true
             });
-
             this.state = initialCarbonReactState as unknown as S & iCarbonReactState;
-
         }
 
-        /** We can think of our app as having one state; this state.
-         * Long-term, I'd like us to store this state to local storage and only load updates on reload...
-         * Class based components are far easier to manage state in local storage and pass state down to children.
-         * Children, if not faced with a local storage or other complexity should be a functional component. Functional
-         * components' tend to be shorter syntactically and bonus points if it's stateless.
-         **/
-
+        // Save the initial state to the persistent state map with the identifier
+        CarbonReact.persistentStateMap.set(identifier, this.state);
     }
 
-
     shouldComponentUpdate(
         nextProps: Readonly<P>,
         nextState: Readonly<S>,
         _nextContext: any): boolean {
 
-        if (this.props.instanceId) {
-            CarbonReact.persistentStateMap.set(this.props.instanceId, nextState);
-        }
+        const identifier = this.props.instanceId || (this.constructor as typeof CarbonReact).name;
+        CarbonReact.persistentStateMap.set(identifier, nextState);
 
         changed(this.constructor.name + ' (C6Api)', 'props', this.props, nextProps);
-
         changed(this.constructor.name + ' (C6Api)', 'state', this.state, nextState);
 
-        return true
-
+        return true;
     }
 
     componentDidUpdate(_prevProps: Readonly<P>, _prevState: Readonly<S>, _snapshot?: any) {
@@ -178,39 +151,39 @@ abstract class CarbonReact<P = {}, S extends iCarbonReactState = iCarbonReactSta
     }
 
     render(): ReactElement {
-
         console.log('CarbonORM TSX RENDER');
 
         const colorHex = '#' + Math.random().toString(16).slice(-6);
 
         console.log('%c color (' + colorHex + ')', 'color: ' + colorHex);
 
-        const nest = <Nest position={'fixed'} backgroundColor={''} color={hexToRgb(colorHex)} count={100}/>;
+        const nest = <Nest position={'fixed'} backgroundColor={''} color={hexToRgb(colorHex)} count={100} />;
 
         if (this.state.backendThrowable.length > 0) {
-
             return <>
                 {nest}
-                <BackendThrowable instance={this}/>
+                <BackendThrowable instance={this} />
             </>;
-
         }
 
         const Context = this.context.Provider;
 
         return <>
-            <GlobalHistory/>
+            <GlobalHistory />
             {this.props.websocket &&
                 <CarbonWebSocket<P, S> {...(false !== this.props.websocket ? this.props.websocket : {})}
-                                       instance={this}/>}
+                                       instance={this} />}
             <Context value={this.state}>
                 {this.props.children}
             </Context>
-            <ToastContainer/>
+            <ToastContainer />
         </>;
-
     }
 
+    componentWillUnmount() {
+        const identifier = this.props.instanceId || (this.constructor as typeof CarbonReact).name;
+        CarbonReact.activeInstances.delete(identifier);
+    }
 }
 
 export default CarbonReact;