@deck.gl/react 9.0.0-beta.1 → 9.0.0-beta.11

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { default as DeckGL } from "./deckgl.js";
+export { default } from "./deckgl.js";
+export type { DeckGLContextValue } from "./utils/position-children-under-views.js";
+export type { DeckGLRef, DeckGLProps } from "./deckgl.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAoBA,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,oBAAiB;AAC3C,OAAO,EAAC,OAAO,EAAC,oBAAiB;AAGjC,YAAY,EAAC,kBAAkB,EAAC,iDAA8C;AAC9E,YAAY,EAAC,SAAS,EAAE,WAAW,EAAC,oBAAiB"}

package/dist/index.js

@@ -0,0 +1,21 @@
+// Copyright (c) 2015 - 2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+export { default as DeckGL } from "./deckgl.js";
+export { default } from "./deckgl.js";

package/dist/utils/evaluate-children.js

@@ -0,0 +1,34 @@
+import { cloneElement } from 'react';
+const MAP_STYLE = { position: 'absolute', zIndex: -1 };
+export default function evaluateChildren(children, childProps) {
+    if (typeof children === 'function') {
+        return children(childProps);
+    }
+    if (Array.isArray(children)) {
+        return children.map(child => evaluateChildren(child, childProps));
+    }
+    if (isComponent(children)) {
+        // Special treatment for react-map-gl's Map component
+        // to support shorthand use case <DeckGL><StaticMap /></DeckGL>
+        if (isReactMap(children)) {
+            // Place map under the canvas
+            childProps.style = MAP_STYLE;
+            return cloneElement(children, childProps);
+        }
+        if (needsDeckGLViewProps(children)) {
+            return cloneElement(children, childProps);
+        }
+    }
+    return children;
+}
+export function isComponent(child) {
+    return (child && typeof child === 'object' && 'type' in child) || false;
+}
+function isReactMap(child) {
+    return child.props?.mapStyle;
+}
+function needsDeckGLViewProps(child) {
+    const componentClass = child.type;
+    // @ts-expect-error deckGLViewProps is a custom hack defined on the constructor (nebula.gl)
+    return componentClass && componentClass.deckGLViewProps;
+}

package/dist/utils/extract-jsx-layers.js

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { createElement } from 'react';
+import { inheritsFrom } from "./inherits-from.js";
+import { Layer, View } from '@deck.gl/core';
+import { isComponent } from "./evaluate-children.js";
+// recursively wrap render callbacks in `View`
+function wrapInView(node) {
+    if (typeof node === 'function') {
+        // React.Children does not traverse functions.
+        // All render callbacks must be protected under a <View>
+        // @ts-expect-error View is not a ReactJSXElement constructor. Only used as a temporary wrapper and will be removed in extractJSXLayers
+        return createElement(View, {}, node);
+    }
+    if (Array.isArray(node)) {
+        return node.map(wrapInView);
+    }
+    if (isComponent(node)) {
+        if (node.type === React.Fragment) {
+            return wrapInView(node.props.children);
+        }
+        if (inheritsFrom(node.type, View)) {
+            return node;
+        }
+    }
+    return node;
+}
+// extracts any deck.gl layers masquerading as react elements from props.children
+export default function extractJSXLayers({ children, layers = [], views = null }) {
+    const reactChildren = []; // extract real react elements (i.e. not deck.gl layers)
+    const jsxLayers = []; // extracted layer from react children, will add to deck.gl layer array
+    const jsxViews = {};
+    // React.children
+    React.Children.forEach(wrapInView(children), reactElement => {
+        if (isComponent(reactElement)) {
+            // For some reason Children.forEach doesn't filter out `null`s
+            const ElementType = reactElement.type;
+            if (inheritsFrom(ElementType, Layer)) {
+                const layer = createLayer(ElementType, reactElement.props);
+                jsxLayers.push(layer);
+            }
+            else {
+                reactChildren.push(reactElement);
+            }
+            // empty id => default view
+            if (inheritsFrom(ElementType, View) && ElementType !== View && reactElement.props.id) {
+                // @ts-ignore Cannot instantiate an abstract class (View)
+                const view = new ElementType(reactElement.props);
+                jsxViews[view.id] = view;
+            }
+        }
+        else if (reactElement) {
+            reactChildren.push(reactElement);
+        }
+    });
+    // Avoid modifying views if no JSX views were found
+    if (Object.keys(jsxViews).length > 0) {
+        // If a view is specified in both views prop and JSX, use the one in views
+        if (Array.isArray(views)) {
+            views.forEach(view => {
+                jsxViews[view.id] = view;
+            });
+        }
+        else if (views) {
+            jsxViews[views.id] = views;
+        }
+        views = Object.values(jsxViews);
+    }
+    // Avoid modifying layers array if no JSX layers were found
+    layers = jsxLayers.length > 0 ? [...jsxLayers, ...layers] : layers;
+    return { layers, children: reactChildren, views };
+}
+function createLayer(LayerType, reactProps) {
+    const props = {};
+    // Layer.defaultProps is treated as ReactElement.defaultProps and merged into react props
+    // Remove them
+    const defaultProps = LayerType.defaultProps || {};
+    for (const key in reactProps) {
+        if (defaultProps[key] !== reactProps[key]) {
+            props[key] = reactProps[key];
+        }
+    }
+    // @ts-ignore Cannot instantiate an abstract class (Layer)
+    return new LayerType(props);
+}

package/dist/utils/extract-styles.js

@@ -0,0 +1,32 @@
+const CANVAS_ONLY_STYLES = {
+    mixBlendMode: null
+};
+export default function extractStyles({ width, height, style }) {
+    // This styling is enforced for correct positioning with children
+    const containerStyle = {
+        position: 'absolute',
+        zIndex: 0,
+        left: 0,
+        top: 0,
+        width,
+        height
+    };
+    // Fill the container
+    const canvasStyle = {
+        left: 0,
+        top: 0
+    };
+    if (style) {
+        for (const key in style) {
+            if (key in CANVAS_ONLY_STYLES) {
+                // apply style to the canvas, but not deck's children, e.g. mix-blend-mode
+                canvasStyle[key] = style[key];
+            }
+            else {
+                // apply style to the container, e.g. position/flow settings
+                containerStyle[key] = style[key];
+            }
+        }
+    }
+    return { containerStyle, canvasStyle };
+}

package/dist/utils/inherits-from.js

@@ -0,0 +1,10 @@
+// Check if one JavaScript class inherits from another
+export function inheritsFrom(Type, ParentType) {
+    while (Type) {
+        if (Type === ParentType) {
+            return true;
+        }
+        Type = Object.getPrototypeOf(Type);
+    }
+    return false;
+}

package/{typed → dist}/utils/position-children-under-views.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { ViewOrViews } from "../deckgl.js";
 import type { Deck, DeckProps, Viewport } from '@deck.gl/core';
 import type { EventManager } from 'mjolnir.js';
 export type DeckGLContextValue = {
@@ -7,9 +8,9 @@ export type DeckGLContextValue = {
     eventManager: EventManager;
     onViewStateChange: DeckProps['onViewStateChange'];
 };
-export default function positionChildrenUnderViews({ children, deck, ContextProvider }: {
+export default function positionChildrenUnderViews<ViewsT extends ViewOrViews>({ children, deck, ContextProvider }: {
     children: React.ReactNode[];
-    deck?: Deck;
+    deck?: Deck<ViewsT>;
     ContextProvider?: React.Context<DeckGLContextValue>['Provider'];
 }): React.ReactNode[];
 //# sourceMappingURL=position-children-under-views.d.ts.map

package/dist/utils/position-children-under-views.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"position-children-under-views.d.ts","sourceRoot":"","sources":["../../src/utils/position-children-under-views.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAC,WAAW,EAAC,qBAAkB;AAC3C,OAAO,KAAK,EAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAC,MAAM,eAAe,CAAC;AAC7D,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,YAAY,CAAC;AAE7C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,QAAQ,CAAC;IACnB,SAAS,EAAE,WAAW,CAAC;IACvB,YAAY,EAAE,YAAY,CAAC;IAC3B,iBAAiB,EAAE,SAAS,CAAC,mBAAmB,CAAC,CAAC;CACnD,CAAC;AAIF,MAAM,CAAC,OAAO,UAAU,0BAA0B,CAAC,MAAM,SAAS,WAAW,EAAE,EAC7E,QAAQ,EACR,IAAI,EACJ,eAAe,EAChB,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAC5B,IAAI,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IACpB,eAAe,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,UAAU,CAAC,CAAC;CACjE,GAAG,KAAK,CAAC,SAAS,EAAE,CA0FpB"}

package/dist/utils/position-children-under-views.js

@@ -0,0 +1,80 @@
+import { createElement } from 'react';
+import { View } from '@deck.gl/core';
+import { inheritsFrom } from "./inherits-from.js";
+import evaluateChildren, { isComponent } from "./evaluate-children.js";
+// Iterate over views and reposition children associated with views
+// TODO - Can we supply a similar function for the non-React case?
+export default function positionChildrenUnderViews({ children, deck, ContextProvider }) {
+    // @ts-expect-error accessing protected property
+    const { viewManager } = deck || {};
+    if (!viewManager || !viewManager.views.length) {
+        return [];
+    }
+    const views = {};
+    const defaultViewId = viewManager.views[0].id;
+    // Sort children by view id
+    for (const child of children) {
+        // Unless child is a View, position / render as part of the default view
+        let viewId = defaultViewId;
+        let viewChildren = child;
+        if (isComponent(child) && inheritsFrom(child.type, View)) {
+            viewId = child.props.id || defaultViewId;
+            viewChildren = child.props.children;
+        }
+        const viewport = viewManager.getViewport(viewId);
+        const viewState = viewManager.getViewState(viewId);
+        // Drop (auto-hide) elements with viewId that are not matched by any current view
+        if (viewport) {
+            viewState.padding = viewport.padding;
+            const { x, y, width, height } = viewport;
+            // Resolve potentially relative dimensions using the deck.gl container size
+            viewChildren = evaluateChildren(viewChildren, {
+                x,
+                y,
+                width,
+                height,
+                viewport,
+                viewState
+            });
+            if (!views[viewId]) {
+                views[viewId] = {
+                    viewport,
+                    children: []
+                };
+            }
+            views[viewId].children.push(viewChildren);
+        }
+    }
+    // Render views
+    return Object.keys(views).map(viewId => {
+        const { viewport, children: viewChildren } = views[viewId];
+        const { x, y, width, height } = viewport;
+        const style = {
+            position: 'absolute',
+            left: x,
+            top: y,
+            width,
+            height
+        };
+        const key = `view-${viewId}`;
+        // If children is passed as an array, React will throw the "each element in a list needs
+        // a key" warning. Sending each child as separate arguments removes this requirement.
+        const viewElement = createElement('div', { key, id: key, style }, ...viewChildren);
+        if (ContextProvider) {
+            const contextValue = {
+                viewport,
+                // @ts-expect-error accessing protected property
+                container: deck.canvas.offsetParent,
+                // @ts-expect-error accessing protected property
+                eventManager: deck.eventManager,
+                onViewStateChange: params => {
+                    params.viewId = viewId;
+                    // @ts-expect-error accessing protected method
+                    deck._onViewStateChange(params);
+                }
+            };
+            return createElement(ContextProvider, { key, value: contextValue }, viewElement);
+        }
+        return viewElement;
+    });
+}

package/dist/{esm/utils → utils}/use-isomorphic-layout-effect.js

@@ -1,4 +1,5 @@
+// From https://github.com/streamich/react-use/blob/master/src/useIsomorphicLayoutEffect.ts
+// useLayoutEffect but does not trigger warning in server-side rendering
 import { useEffect, useLayoutEffect } from 'react';
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 export default useIsomorphicLayoutEffect;
-//# sourceMappingURL=use-isomorphic-layout-effect.js.map

package/package.json

@@ -2,7 +2,8 @@
   "name": "@deck.gl/react",
   "description": "React Components for deck.gl",
   "license": "MIT",
-  "version": "9.0.0-beta.1",
+  "type": "module",
+  "version": "9.0.0-beta.11",
   "publishConfig": {
     "access": "public"
   },
@@ -16,24 +17,32 @@
     "type": "git",
     "url": "https://github.com/visgl/deck.gl.git"
   },
-  "main": "dist/es5/index.js",
-  "module": "dist/esm/index.js",
-  "types": "typed/index.d.ts",
+  "types": "dist/index.d.ts",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
   "files": [
     "dist",
-    "src",
-    "typed"
+    "src"
   ],
   "sideEffects": false,
   "scripts": {},
-  "dependencies": {
-    "@babel/runtime": "^7.0.0"
-  },
   "peerDependencies": {
-    "@deck.gl/core": "^9.0.0-alpha",
-    "@types/react": ">= 16.3",
-    "react": ">=16.3",
-    "react-dom": ">=16.3"
+    "@deck.gl/core": "^9.0.0-beta",
+    "react": ">=16.3.0",
+    "react-dom": ">=16.3.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
-  "gitHead": "9628417918bec5cc73c1345bfcd2f2be575741f1"
+  "gitHead": "d8a3f5bdb644f85caba9d5c1e74baff8f8a3d439"
 }

package/src/deckgl.ts

@@ -18,15 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 import * as React from 'react';
-import {
-  createElement,
-  useRef,
-  useState,
-  useMemo,
-  useEffect,
-  useImperativeHandle,
-  forwardRef
-} from 'react';
+import {createElement, useRef, useState, useMemo, useEffect, useImperativeHandle} from 'react';
 import {Deck} from '@deck.gl/core';
 import useIsomorphicLayoutEffect from './utils/use-isomorphic-layout-effect';
 
@@ -35,11 +27,13 @@ import positionChildrenUnderViews from './utils/position-children-under-views';
 import extractStyles from './utils/extract-styles';
 
 import type {DeckGLContextValue} from './utils/position-children-under-views';
-import type {DeckProps, Viewport} from '@deck.gl/core';
+import type {DeckProps, View, Viewport} from '@deck.gl/core';
+
+export type ViewOrViews = View | View[] | null;
 
 /* eslint-disable max-statements, accessor-pairs */
-type DeckInstanceRef = {
-  deck?: Deck;
+type DeckInstanceRef<ViewsT extends ViewOrViews> = {
+  deck?: Deck<ViewsT>;
   redrawReason?: string | null;
   lastRenderedViewports?: Viewport[];
   viewStateUpdateRequested?: any;
@@ -51,25 +45,28 @@ type DeckInstanceRef = {
 
 // Remove prop types in the base Deck class that support externally supplied canvas/WebGLContext
 /** DeckGL React component props */
-export type DeckGLProps = Omit<
-  DeckProps,
+export type DeckGLProps<ViewsT extends ViewOrViews = null> = Omit<
+  DeckProps<ViewsT>,
   'width' | 'height' | 'gl' | 'parent' | 'canvas' | '_customRender'
 > & {
   Deck?: typeof Deck;
   width?: string | number;
   height?: string | number;
   children?: React.ReactNode | DeckGLRenderCallback;
+  ref?: React.Ref<DeckGLRef<ViewsT>>;
   ContextProvider?: React.Context<DeckGLContextValue>['Provider'];
 };
 
-export type DeckGLRef = {
-  deck?: Deck;
+export type DeckGLRef<ViewsT extends ViewOrViews = null> = {
+  deck?: Deck<ViewsT>;
   pickObject: Deck['pickObject'];
   pickObjects: Deck['pickObjects'];
   pickMultipleObjects: Deck['pickMultipleObjects'];
 };
 
-function getRefHandles(thisRef: DeckInstanceRef): DeckGLRef {
+function getRefHandles<ViewsT extends ViewOrViews>(
+  thisRef: DeckInstanceRef<ViewsT>
+): DeckGLRef<ViewsT> {
   return {
     get deck() {
       return thisRef.deck;
@@ -81,7 +78,7 @@ function getRefHandles(thisRef: DeckInstanceRef): DeckGLRef {
   };
 }
 
-function redrawDeck(thisRef: DeckInstanceRef) {
+function redrawDeck(thisRef: DeckInstanceRef<any>) {
   if (thisRef.redrawReason) {
     // Only redraw if we have received a dirty flag
     // @ts-expect-error accessing protected method
@@ -90,11 +87,11 @@ function redrawDeck(thisRef: DeckInstanceRef) {
   }
 }
 
-function createDeckInstance(
-  thisRef: DeckInstanceRef,
+function createDeckInstance<ViewsT extends ViewOrViews>(
+  thisRef: DeckInstanceRef<ViewsT>,
   DeckClass: typeof Deck,
-  props: DeckProps
-): Deck {
+  props: DeckProps<ViewsT>
+): Deck<ViewsT> {
   const deck = new DeckClass({
     ...props,
     // The Deck's animation loop is independent from React's render cycle, causing potential
@@ -120,11 +117,14 @@ function createDeckInstance(
   return deck;
 }
 
-const DeckGL = forwardRef<DeckGLRef, DeckGLProps>((props, ref) => {
+function DeckGLWithRef<ViewsT extends ViewOrViews = null>(
+  props: DeckGLProps<ViewsT>,
+  ref: React.Ref<DeckGLRef<ViewsT>>
+) {
   // A mechanism to force redraw
   const [version, setVersion] = useState(0);
   // A reference to persistent states
-  const _thisRef = useRef<DeckInstanceRef>({
+  const _thisRef = useRef<DeckInstanceRef<ViewsT>>({
     control: null,
     version,
     forceUpdate: () => setVersion(v => v + 1)
@@ -143,7 +143,7 @@ const DeckGL = forwardRef<DeckGLRef, DeckGLProps>((props, ref) => {
   // Callbacks
   let inRender = true;
 
-  const handleViewStateChange: DeckProps['onViewStateChange'] = params => {
+  const handleViewStateChange: DeckProps<ViewsT>['onViewStateChange'] = params => {
     if (inRender && props.viewState) {
       // Callback may invoke a state update. Defer callback to after render() to avoid React error
       // In React StrictMode, render is executed twice and useEffect/useLayoutEffect is executed once
@@ -155,7 +155,7 @@ const DeckGL = forwardRef<DeckGLRef, DeckGLProps>((props, ref) => {
     return props.onViewStateChange?.(params);
   };
 
-  const handleInteractionStateChange: DeckProps['onInteractionStateChange'] = params => {
+  const handleInteractionStateChange: DeckProps<ViewsT>['onInteractionStateChange'] = params => {
     if (inRender) {
       // Callback may invoke a state update. Defer callback to after render() to avoid React error
       // In React StrictMode, render is executed twice and useEffect/useLayoutEffect is executed once
@@ -171,7 +171,7 @@ const DeckGL = forwardRef<DeckGLRef, DeckGLProps>((props, ref) => {
   // the next animation frame.
   // Needs to be called both from initial mount, and when new props are received
   const deckProps = useMemo(() => {
-    const forwardProps: DeckProps = {
+    const forwardProps: DeckProps<ViewsT> = {
       ...props,
       // Override user styling props. We will set the canvas style in render()
       style: null,
@@ -180,7 +180,7 @@ const DeckGL = forwardRef<DeckGLRef, DeckGLProps>((props, ref) => {
       parent: containerRef.current,
       canvas: canvasRef.current,
       layers: jsxProps.layers,
-      views: jsxProps.views,
+      views: jsxProps.views as ViewsT,
       onViewStateChange: handleViewStateChange,
       onInteractionStateChange: handleInteractionStateChange
     };
@@ -229,7 +229,7 @@ const DeckGL = forwardRef<DeckGLRef, DeckGLProps>((props, ref) => {
   const currentViewports =
     thisRef.deck && thisRef.deck.isInitialized ? thisRef.deck.getViewports() : undefined;
 
-  const {ContextProvider, width, height, id, style} = props;
+  const {ContextProvider, width = '100%', height = '100%', id, style} = props;
 
   const {containerStyle, canvasStyle} = useMemo(
     () => extractStyles({width, height, style}),
@@ -274,8 +274,10 @@ const DeckGL = forwardRef<DeckGLRef, DeckGLProps>((props, ref) => {
 
   inRender = false;
   return thisRef.control;
-});
+}
 
-DeckGL.defaultProps = Deck.defaultProps;
+const DeckGL = React.forwardRef(DeckGLWithRef) as <ViewsT extends ViewOrViews>(
+  props: DeckGLProps<ViewsT>
+) => React.ReactElement;
 
 export default DeckGL;

package/src/utils/position-children-under-views.ts

@@ -4,6 +4,7 @@ import {View} from '@deck.gl/core';
 import {inheritsFrom} from './inherits-from';
 import evaluateChildren, {isComponent} from './evaluate-children';
 
+import type {ViewOrViews} from '../deckgl';
 import type {Deck, DeckProps, Viewport} from '@deck.gl/core';
 import type {EventManager} from 'mjolnir.js';
 
@@ -16,13 +17,13 @@ export type DeckGLContextValue = {
 
 // Iterate over views and reposition children associated with views
 // TODO - Can we supply a similar function for the non-React case?
-export default function positionChildrenUnderViews({
+export default function positionChildrenUnderViews<ViewsT extends ViewOrViews>({
   children,
   deck,
   ContextProvider
 }: {
   children: React.ReactNode[];
-  deck?: Deck;
+  deck?: Deck<ViewsT>;
   ContextProvider?: React.Context<DeckGLContextValue>['Provider'];
 }): React.ReactNode[] {
   // @ts-expect-error accessing protected property