visgl · brandonjpierce · Feb 29, 2024
diff --git a/examples/react-fiber/app.jsx b/examples/react-fiber/app.jsx
@@ -0,0 +1,108 @@
+import React, {useCallback, useEffect, useState, useTransition} from 'react';
+import {createRoot} from 'react-dom/client';
+import {
+  Button,
+  Grid,
+  View,
+  Flex,
+  defaultTheme,
+  LabeledValue,
+  Provider
+} from '@adobe/react-spectrum';
+import {DeckGL} from '../../modules/react-fiber/src';
+import {Metrics} from './metrics';
+import {BasemapLayer} from './basemap-layer';
+import {RandomPointLayer, RandomPointLayerMemo} from './random-point-layer';
+
+deck.log.enable();
+deck.log.level = 2;
+
+const INITIAL_VIEW_STATE = {
+  longitude: -77.0369,
+  latitude: 38.9072,
+  zoom: 5,
+  minZoom: 2,
+  maxZoom: 20
+};
+
+// Example passthrough component to showcase that you nest React components however you want
+function Parent(props) {
+  const {children} = props;
+
+  useEffect(() => {
+    console.log('logging <Parent /> effect');
+  }, []);
+
+  return (
+    <>
+      <BasemapLayer />
+      {children}
+    </>
+  );
+}
+
+function App() {
+  const [_, startTransition] = useTransition();
+  const [viewState, setViewState] = useState(() => INITIAL_VIEW_STATE);
+  const onViewStateChange = useCallback((event) => {
+    startTransition(() => {
+      setViewState(event.viewState);
+    });
+  }, []);
+
+  const [i, setI] = useState(0);
+  const [metrics, setMetrics] = useState({});
+
+  const increment = useCallback(() => {
+    setI((prev) => prev + 1);
+  }, []);
+
+  const onMetrics = useCallback((e) => {
+    increment();
+
+    startTransition(() => {
+      setMetrics(e);
+    });
+  }, []);
+
+  return (
+    <Provider theme={defaultTheme} height="100%">
+      <Grid
+        areas={['sidebarleft content sidebarright']}
+        columns={['size-3000', '1fr', 'size-3000']}
+        gap="size-100"
+        height="100%"
+      >
+        <View backgroundColor="gray-100" gridArea="sidebarleft" padding="size-100">
+          <Flex direction="column" gap="size-100">
+            <LabeledValue label="Count" value={i} labelPosition="side" />
+            <Button variant="accent" onClick={increment}>
+              Increment
+            </Button>
+          </Flex>
+        </View>
+        <View backgroundColor="gray-50" gridArea="content" position="relative">
+          <DeckGL
+            viewState={viewState}
+            onViewStateChange={onViewStateChange}
+            _onMetrics={onMetrics}
+            // initialViewState={INITIAL_VIEW_STATE}
+          >
+            <mapView controller={true} id="mapview" repeat>
+              <Parent>
+                <RandomPointLayer />
+                <RandomPointLayerMemo />
+              </Parent>
+            </mapView>
+          </DeckGL>
+        </View>
+        <View backgroundColor="gray-100" gridArea="sidebarright" padding="size-100">
+          <Metrics data={metrics} />
+        </View>
+      </Grid>
+    </Provider>
+  );
+}
+
+const root = createRoot(document.getElementById('app'));
+root.render(<App />);
diff --git a/examples/react-fiber/basemap-layer.tsx b/examples/react-fiber/basemap-layer.tsx
@@ -0,0 +1,21 @@
+import React, {memo} from 'react';
+
+// The memo() here is ultimately not necessary even though this component is
+// rendering anytime the viewState changes (e.g. expected React behavior).
+// Since we have a static dataset Deck will take over and properly diff the
+// layer to determine if it needs to rerender or not.
+function _BasemapLayer() {
+  return (
+    <geoJsonLayer
+      id="basemap"
+      data="https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_land.geojson"
+      stroked={true}
+      filled={true}
+      getFillColor={[30, 80, 120]}
+      getLineColor={[0, 255, 255]}
+      lineWidthMinPixels={1}
+    />
+  );
+}
+
+export const BasemapLayer = memo(_BasemapLayer);
diff --git a/examples/react-fiber/index.html b/examples/react-fiber/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>deck.gl Example</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+    body {margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden;}
+    #app { height:100vh; }
+  </style>
+</head>
+<body>
+<div id="app"></div>
+</body>
+<script type="module">
+  import './app.jsx';
+</script>
+</html>
diff --git a/examples/react-fiber/metrics.tsx b/examples/react-fiber/metrics.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import {Flex, LabeledValue} from '@adobe/react-spectrum';
+
+export function Metrics(props) {
+  const {data} = props;
+
+  const output = Object.entries(data).reduce((prev, next, i) => {
+    if (prev[i]) {
+      prev[i] = next;
+    } else {
+      prev.push(next);
+    }
+
+    return prev;
+  }, []);
+
+  return (
+    <Flex direction="column" gap="size-100">
+      {output.map(pairs => {
+        return (
+          <LabeledValue key={pairs[0]} label={pairs[0]} value={pairs[1]} labelPosition="side" />
+        );
+      })}
+    </Flex>
+  );
+}
diff --git a/examples/react-fiber/package.json b/examples/react-fiber/package.json
@@ -0,0 +1,24 @@
+{
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "start": "vite --open",
+    "start-local": "vite --config ../vite.config.local.mjs"
+  },
+  "dependencies": {
+    "@adobe/react-spectrum": "^3.34.1",
+    "@deck.gl/core": "^9.0.0-beta.5",
+    "@deck.gl/extensions": "^9.0.0-beta.5",
+    "@deck.gl/geo-layers": "^9.0.0-beta.5",
+    "@deck.gl/layers": "^9.0.0-beta.5",
+    "@deck.gl/mesh-layers": "^9.0.0-beta.5",
+    "@turf/random": "^6.5.0",
+    "@turf/sample": "^6.5.0",
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "vite": "^5.0.12"
+  }
+}
diff --git a/examples/react-fiber/random-point-layer.tsx b/examples/react-fiber/random-point-layer.tsx
@@ -0,0 +1,48 @@
+import React, {memo} from 'react';
+import {randomPoint} from '@turf/random';
+import sample from '@turf/sample';
+
+const points = randomPoint(10000, {bbox: [-180, -90, 180, 90]});
+
+function getPosition(feature) {
+  return feature.geometry.coordinates;
+}
+
+// This component is rendering anytime the viewState changes (e.g. expected React behavior).
+// Since we have a dataset we are deriving in the component this means that a new data value
+// is being created every render and thus Deck will render the new dataset accordingly.
+export function RandomPointLayer() {
+  const data = sample(points, 1000);
+
+  return (
+    <scatterplotLayer
+      id="random-point-1"
+      data={data.features}
+      getPosition={getPosition}
+      radiusMinPixels={4}
+      filled={true}
+      stroked={false}
+      getFillColor={[255, 0, 0]}
+    />
+  );
+}
+
+// Since this component is memo'd, you will not see it render new data when the viewState changes.
+// This follows the principle of any other React component and allows you to always "think in React".
+function _RandomPointLayerMemo() {
+  const data = sample(points, 1000);
+
+  return (
+    <scatterplotLayer
+      id="random-point-2"
+      data={data.features}
+      getPosition={getPosition}
+      radiusMinPixels={4}
+      filled={true}
+      stroked={false}
+      getFillColor={[0, 255, 0]}
+    />
+  );
+}
+
+export const RandomPointLayerMemo = memo(_RandomPointLayerMemo);
diff --git a/modules/react-fiber/README.md b/modules/react-fiber/README.md
@@ -0,0 +1,5 @@
+# @deck.gl-community/template
+
+vis.gl project template.
+
+See [vis.gl](http://vis.gl) for documentation.
diff --git a/modules/react-fiber/docs/README.md b/modules/react-fiber/docs/README.md
@@ -0,0 +1,3 @@
+# Overview
+
+vis.gl project template.
diff --git a/modules/react-fiber/package.json b/modules/react-fiber/package.json
@@ -0,0 +1,53 @@
+{
+  "name": "@deck.gl-community/react-fiber",
+  "description": "React Fiber Renderer for deck.gl",
+  "license": "MIT",
+  "version": "0.0.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "webgl",
+    "visualization",
+    "overlay",
+    "layer"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/visgl/deck.gl-community.gl.git"
+  },
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "test": "vitest --run"
+  },
+  "dependencies": {
+    "its-fine": "1.1.1",
+    "react-reconciler": "0.29.0",
+    "zustand": "4.3.9"
+  },
+  "devDependencies": {},
+  "peerDependencies": {
+    "@deck.gl/core": "^9.0.0-beta.5",
+    "@deck.gl/extensions": "^9.0.0-beta.5",
+    "@deck.gl/geo-layers": "^9.0.0-beta.5",
+    "@deck.gl/layers": "^9.0.0-beta.5",
+    "@deck.gl/mesh-layers": "^9.0.0-beta.5",
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}
diff --git a/modules/react-fiber/src/context.tsx b/modules/react-fiber/src/context.tsx
@@ -0,0 +1,16 @@
+import React, {createContext, type ReactNode} from 'react';
+import type {UseBoundStore} from 'zustand';
+import type {Store} from './store';
+
+export type ContextStore = UseBoundStore<Store>;
+
+export const context = createContext<ContextStore | null>(null);
+
+type ProviderProps = {
+  store: ContextStore;
+  children: ReactNode;
+};
+
+export function Provider({store, children}: ProviderProps) {
+  return <context.Provider value={store}>{children}</context.Provider>;
+}