@carbonorm/carbonreact 4.0.24 → 5.0.4

package/README.md

@@ -23,21 +23,26 @@ npm install @carbonorm/carbonreact
 
 ## Generate Models
 
-The command below will generate the models for the database. The models will be generated in the output directory. We do 
-recommend you keep this folder separate from other work. It is also best to track the output directory in your version 
-control system. All arguments are optional. If you do not provide them the defaults will be used. The example arguments 
-below are the defaults.
+The command below generates a single `C6.ts` file containing your tables, types, and REST bindings. Keep the output in
+version control and import from it on both server and client. All arguments are optional. If you do not provide them the
+defaults will be used. The example arguments below are the defaults.
 
 ```bash
-npx generateRestBindings --user root --pass password --host 127.0.0.1 --port 3306 --dbname carbonPHP --prefix carbon_ --output /src/api/rest
+npx generateRestBindings --user root --pass password --host 127.0.0.1 --port 3306 --dbname carbonPHP --prefix carbon_ --output ./shared/rest/C6.ts
 ```
 
-You can view the [code generated](https://github.com/CarbonORM/CarbonORM.dev/blob/www/src/api/rest/Users.tsx) by
-[this command](https://github.com/CarbonORM/CarbonNode/blob/main/scripts/generateRestBindings.ts) in
-[this repository](git@github.com:CarbonORM/CarbonNode.git). We use [Handlebars templates](https://mustache.github.io/)
-to generate the code.
+The generated file exports `C6`, `GLOBAL_REST_PARAMETERS`, and per-table bindings (e.g. `Users`):
 
-For more information on CarbonNode and the generations please see the [CarbonNode](https://github.com/CarbonORM/CarbonNode).
+```typescript
+import { C6, GLOBAL_REST_PARAMETERS, Users } from "./shared/rest/C6";
+```
+
+You can view the generator source in
+[CarbonNode](https://github.com/CarbonORM/CarbonNode/blob/main/scripts/generateRestBindings.ts). We use
+[Handlebars templates](https://mustache.github.io/) to generate the code.
+
+For more information on CarbonNode and the generations please see the
+[CarbonNode](https://github.com/CarbonORM/CarbonNode).
 
 
 ## QuickStart Implementation
@@ -61,7 +66,11 @@ const container = document.getElementById('root');
 
 const root = createRoot(container!);
 
-root.render(<React.StrictMode><CarbonORM /></React.StrictMode>);
+root.render(
+    <React.StrictMode>
+        <CarbonORM />
+    </React.StrictMode>
+);
 ```
 
 CarbonReact should be loaded as soon as the page loads. There are plans to allow other alerting systems to be used, but 
@@ -129,7 +138,6 @@ export default class CarbonORM extends CarbonReact<{ browserRouter?: boolean },
         }
 
         return reactRouterContext(<>
-            <CarbonWebSocket url={'ws://localhost:8888/ws'}/>
             <Routes>
                 <Route path={UI + "*"}>
                     <Route path={MATERIAL_DASHBOARD + "*"} element={ppr(Dashboard, {})}>
@@ -188,6 +196,31 @@ export default class CarbonORM extends CarbonReact<{ browserRouter?: boolean },
 }
 ```
 
+## Websocket Updates (Optional)
+
+Backend: broadcast the payload generated by CarbonNode on every write (POST/PUT/DELETE).
+
+```typescript
+import { GLOBAL_REST_PARAMETERS } from "./shared/rest/C6";
+
+GLOBAL_REST_PARAMETERS.websocketBroadcast = (payload) => {
+    wsServer.broadcast(JSON.stringify(payload));
+};
+```
+
+Frontend: pass `C6` into CarbonReact so the websocket client can normalize updates and only apply them when the row is
+already in local state. Debug logs only appear when `VERBOSE` is enabled.
+
+```typescript jsx
+import { C6 } from "./shared/rest/C6";
+
+root.render(
+    <React.StrictMode>
+        <CarbonORM websocket={{ C6, url: "ws://localhost:8888/carbonorm/websocket" }} />
+    </React.StrictMode>
+);
+```
+
 
 Our testing tool [Jest](https://www.npmjs.com/package/jest) requires [React Router Dom](https://www.npmjs.com/package/react-router-dom) 
 to be in `MemoryRouter` mode. This is because Jest does not have a DOM and therefore cannot render the `HashRouter` or 

package/dist/components/OutsideClickHandler/OutsideClickHandler.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+interface OutsideClickHandlerProps {
+    onOutsideClick: () => any;
+    children: ReactNode;
+    disabled?: boolean;
+    useCapture?: boolean;
+}
+export default function OutsideClickHandler({ onOutsideClick, children, disabled, useCapture }: OutsideClickHandlerProps): import("react/jsx-runtime").JSX.Element;
+export {};