finos · texodus · Jan 8, 2025
diff --git a/examples/react-example/package.json b/examples/react-example/package.json
@@ -3,6 +3,7 @@
     "private": true,
     "version": "3.2.1",
     "description": "An example app built using `@finos/perspective-viewer`.",
+    "type": "module",
     "scripts": {
         "start": "webpack serve --open",
         "webpack": "webpack --colour"
@@ -14,13 +15,15 @@
         "@finos/perspective-viewer": "workspace:^",
         "@finos/perspective-viewer-d3fc": "workspace:^",
         "@finos/perspective-viewer-datagrid": "workspace:^",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2"
+        "@finos/perspective-react": "workspace:^",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
     },
     "devDependencies": {
         "@finos/perspective-webpack-plugin": "workspace:^",
-        "@types/react": "^17.0.2",
-        "@types/react-dom": "^17.0.2",
+        "@types/react": "^18.0.0",
+        "@types/react-dom": "^18.0.0",
+        "html-webpack-plugin": "^5.1.0",
         "source-map-loader": "^0.2.4",
         "ts-loader": "^6.2.1"
     }

diff --git a/examples/react-example/src/index.css b/examples/react-example/src/index.css
@@ -20,3 +20,37 @@ perspective-viewer {
     right: 0;
     bottom: 0;
 }
+
+body {
+    margin: 0;
+    background-color: #f0f0f0;
+}
+
+.viewer-container {
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    flex-grow: 1;
+}
+
+.workspace {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    gap: 5px;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow: hidden;
+}
+
+.toolbar {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    padding: 10px;
+    background-color: #cecece;
+}
diff --git a/examples/react-example/src/index.html b/examples/react-example/src/index.html
@@ -8,11 +8,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta charset="UTF-8">
+        <meta charset="UTF-8" />
         <title>Perspective React Example</title>
     </head>
     <body>
         <div id="root"></div>
-    </body> 
-
-</html>
+    </body>
+</html>
diff --git a/examples/react-example/src/index.tsx b/examples/react-example/src/index.tsx
@@ -11,47 +11,160 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import * as perspective from "@finos/perspective";
 
 import "@finos/perspective-viewer";
 import "@finos/perspective-viewer-datagrid";
 import "@finos/perspective-viewer-d3fc";
+import { ViewerConfigUpdate } from "@finos/perspective-viewer";
 import {
-    PerspectiveViewerConfig,
-    HTMLPerspectiveViewerElement,
-} from "@finos/perspective-viewer";
+    PerspectiveViewer,
+    usePspActions,
+    PerspectiveProvider,
+    usePsp,
+} from "@finos/perspective-react";
 
 import "./index.css";
 
-const worker = perspective.default.worker();
+const worker = await perspective.worker();
 
-const getTable = async (): Promise<perspective.Table> => {
+async function getTable(): Promise<perspective.Table> {
     const req = fetch("./superstore.lz4.arrow");
     const resp = await req;
     const buffer = await resp.arrayBuffer();
     return await worker.table(buffer as any);
-};
+}
 
-const config: PerspectiveViewerConfig = {
+const config: ViewerConfigUpdate = {
     group_by: ["State"],
 };
 
-const App = (): React.ReactElement => {
-    const viewer = React.useRef<HTMLPerspectiveViewerElement>(null);
+const Root: React.FC = () => {
+    return (
+        <PerspectiveProvider>
+            <App />
+        </PerspectiveProvider>
+    );
+};
+
+// TODO: Add viewers in a loop keyed by a unique id that virtually scrolls.
+
+const App: React.FC = () => {
+    const actions = usePspActions();
+    const [state, setState] = React.useState<ToolbarState>({
+        mounted: true,
+        selectedTable: "superstore",
+    });
 
     React.useEffect(() => {
-        getTable().then((table) => {
-            if (viewer.current) {
-                viewer.current.load(Promise.resolve(table));
-                viewer.current.restore(config);
-            }
-        });
+        actions.addTable({ table: "superstore", promise: getTable() });
     }, []);
 
-    return <perspective-viewer ref={viewer}></perspective-viewer>;
+    return (
+        <div className="container">
+            <Toolbar state={state} setState={setState} />
+            <div className="workspace">
+                <div className="viewer-container">
+                    {state.mounted && (
+                        <PerspectiveViewer
+                            selectedTable={state.selectedTable}
+                            config={{
+                                plugin: "datagrid",
+                                ...config,
+                            }}
+                        />
+                    )}
+                </div>
+                <div className="viewer-container">
+                    {state.mounted && (
+                        <PerspectiveViewer
+                            selectedTable={state.selectedTable}
+                        />
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+interface ToolbarState {
+    mounted: boolean;
+    selectedTable: string;
+}
+
+const Toolbar: React.FC<{
+    state: ToolbarState;
+    setState: React.Dispatch<React.SetStateAction<ToolbarState>>;
+}> = ({ state, setState }) => {
+    const actions = usePspActions();
+    const psp = usePsp();
+
+    const selectOptions = Object.keys(psp.tables).map((table) => (
+        <option key={table} value={table}>
+            {table}
+        </option>
+    ));
+
+    return (
+        <div className="toolbar">
+            <div>
+                <button
+                    id="toggle"
+                    onClick={() =>
+                        setState((old) => ({ ...old, mounted: !state.mounted }))
+                    }
+                >
+                    Toggle Mount
+                </button>
+            </div>
+            <button
+                onContextMenu={(e) => {
+                    e.preventDefault();
+                    (async () => {
+                        for (let i = 0; i < 100; i++) {
+                            actions.addTable({
+                                table: "superstore",
+                                promise: getTable(),
+                            });
+                            // Yield event loop to prevent react from
+                            // batching updates.
+                            // await Promise.resolve();
+
+                            await new Promise((resolve) =>
+                                setTimeout(resolve, 5)
+                            );
+                        }
+                    })();
+                }}
+                onClick={() => {
+                    actions.addTable({
+                        table: "superstore",
+                        promise: getTable(),
+                    });
+                }}
+            >
+                Overwrite Superstore
+            </button>
+            <button
+                onClick={() => {
+                    actions.removeTable({ table: state.selectedTable });
+                }}
+            >
+                Remove Table
+            </button>
+            <select
+                onChange={(e) => {
+                    setState((old) => ({
+                        ...old,
+                        selectedTable: e.target.value,
+                    }));
+                }}
+            >
+                {selectOptions}
+            </select>
+        </div>
+    );
 };
 
-window.addEventListener("load", () => {
-    ReactDOM.render(<App />, document.getElementById("root"));
-});
+createRoot(document.getElementById("root")!).render(<Root />);
diff --git a/examples/react-example/tsconfig.json b/examples/react-example/tsconfig.json
@@ -1,24 +1,27 @@
 {
     "compilerOptions": {
         "moduleResolution": "bundler",
-        "target": "es5",
-        "lib": ["es6", "dom"],
+        "target": "es2020",
+        "lib": [
+            "es2020",
+            "dom"
+        ],
         "module": "esnext",
         "strict": true,
         "alwaysStrict": true,
         "noImplicitAny": true,
         "noImplicitReturns": true,
         "noImplicitThis": true,
         "noImplicitUseStrict": false,
-        "noUnusedLocals": true,
+        "noUnusedLocals": false,
         "strictNullChecks": true,
         "skipLibCheck": true,
         "removeComments": false,
-        "jsx": "react",
+        "jsx": "react-jsx",
         "allowSyntheticDefaultImports": true,
         "esModuleInterop": true,
         "forceConsistentCasingInFileNames": true,
-        "importHelpers": true,
+        "importHelpers": false,
         "noEmitHelpers": true,
         "inlineSourceMap": false,
         "sourceMap": true,
@@ -27,5 +30,7 @@
         "downlevelIteration": true,
         "pretty": true
     },
-    "exclude": ["node_modules"]
-}
+    "exclude": [
+        "node_modules"
+    ]
+}
diff --git a/examples/react-example/webpack.config.js → examples/react-example/webpack.config.cjs b/examples/react-example/webpack.config.js → examples/react-example/webpack.config.cjs
diff --git a/packages/perspective-react/build.js b/packages/perspective-react/build.js
@@ -0,0 +1,43 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import { build } from "@finos/perspective-esbuild-plugin/build.js";
+import "zx/globals";
+
+const BUILD = [
+    {
+        define: {
+            global: "window",
+        },
+        entryPoints: ["src/index.tsx"],
+        format: "esm",
+        external: ["react", "react-dom"],
+        loader: {},
+        outfile: "dist/esm/index.js",
+    },
+];
+
+async function build_all() {
+    await Promise.all(BUILD.map(build)).catch(() => process.exit(1));
+    try {
+        await $`npx tsc --project ./tsconfig.json`.stdio(
+            "inherit",
+            "inherit",
+            "inherit"
+        );
+    } catch (e) {
+        console.error(e);
+        process.exit(1);
+    }
+}
+
+build_all();
diff --git a/packages/perspective-react/package.json b/packages/perspective-react/package.json
@@ -0,0 +1,28 @@
+{
+    "name": "@finos/perspective-react",
+    "version": "1.0.0",
+    "description": "",
+    "main": "index.js",
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "dependencies": {
+        "@finos/perspective": "workspace:^"
+    },
+    "exports": {
+        ".": "./dist/esm/index.js"
+    },
+    "type": "module",
+    "scripts": {
+        "build": "node ./build.js",
+        "clean": "rimraf dist"
+    },
+    "peerDependencies": {
+        "@types/react": "^18.0.0",
+        "react": "^18.0.0"
+    },
+    "devDependencies": {
+        "@finos/perspective-esbuild-plugin": "workspace:^",
+        "zx": "^8.3.0"
+    }
+}