@carbonorm/carbonreact 4.0.10 → 4.0.12

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbonorm/carbonreact",
   "license": "MIT",
-  "version": "4.0.10",
+  "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,23 +46,20 @@ export function isJsonString(str: string) {
         return false;
     }
     return true;
-
 }
 
 abstract class CarbonReact<P = {}, S extends iCarbonReactState = iCarbonReactState> extends Component<{
     children?: ReactNode | ReactNode[],
     instanceId?: string,
-    websocket?: Omit<iCarbonWebSocketProps<P,S>, "instance"> | false
+    websocket?: Omit<iCarbonWebSocketProps<P, S>, "instance"> | false
 } & 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 {
@@ -75,7 +72,6 @@ abstract class CarbonReact<P = {}, S extends iCarbonReactState = iCarbonReactSta
         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,
@@ -90,70 +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: {
         children?: ReactNode | ReactNode[];
         shouldStatePersist?: boolean | undefined;
-        websocket?: boolean | iCarbonWebSocketProps<P,S> | undefined;
+        websocket?: boolean | iCarbonWebSocketProps<P, S> | undefined;
+        instanceId?: string; // Optional instanceId from props
     } & P) {
-
         super(props);
 
-        this.target = new.target;
+        const target = new.target as typeof CarbonReact;
+        const identifier = props.instanceId || target.name;
 
-        console.log('CarbonORM TSX CONSTRUCTOR');
+        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.`);
+        }
 
-        // 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, {
-            _instance: this
-        })
+        CarbonReact.activeInstances.set(identifier, this);
 
-        if (this.props.instanceId && CarbonReact.persistentStateMap.has(this.props.instanceId)) {
+        this.target = target;
+        console.log('CarbonORM TSX CONSTRUCTOR');
 
-            this.state = CarbonReact.persistentStateMap.get(this.props.instanceId) as S & iCarbonReactState;
+        Object.assign(target, {
+            _instance: this
+        });
 
+        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) {
@@ -168,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}/>}
+                <CarbonWebSocket<P, S> {...(false !== this.props.websocket ? this.props.websocket : {})}
+                                       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;

package/src/components/Alert/Alert.tsx

@@ -18,10 +18,10 @@ export interface iAlertButtonOptions {
     color: "default" | "primary" | "secondary" | "inherit" | "danger" | "info" | "success" | "warning" | undefined,
 }
 
-export interface iAlert<P,S extends iCarbonReactState> {
+export interface iAlert<P, S extends iCarbonReactState> {
     title: string,
     text: string,
-    instance: CarbonReact<P,S>,
+    instance: CarbonReact<P, S>,
     component?: ReactNode,
     icon?: "warning" | "error" | "success" | "info" | "question" | null,
     buttons?: (iAlertButtonOptions)[] | undefined, //['No thanks!', 'Yes, Delete it'],
@@ -41,13 +41,11 @@ export function addAlert<P, S extends iCarbonReactState>(props: iAlert<P, S>) {
     }));
 }
 
-export default function Alert<P,S extends iCarbonReactState>({
-                                  instance
-                              }: { instance:   CarbonReact<P,S> }) {
+export default function Alert<P, S extends iCarbonReactState>({instance}: { instance: CarbonReact<P, S> }) {
 
     const {alertsWaiting, backendThrowable} = instance.state
 
-    let alert: iAlert<P,S> | undefined = undefined;
+    let alert: iAlert<P, S> | undefined = undefined;
 
     const alertWaiting = alertsWaiting.length + backendThrowable.length