@deck.gl/react 8.8.0-alpha.4 → 8.8.0-beta.1

package/src/{deckgl.js → deckgl.ts}

@@ -17,7 +17,7 @@
 // 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.
-
+import * as React from 'react';
 import {
   createElement,
   useRef,
@@ -27,7 +27,6 @@ import {
   useImperativeHandle,
   forwardRef
 } from 'react';
-import PropTypes from 'prop-types';
 import {Deck} from '@deck.gl/core';
 import useIsomorphicLayoutEffect from './utils/use-isomorphic-layout-effect';
 
@@ -35,29 +34,62 @@ import extractJSXLayers from './utils/extract-jsx-layers';
 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';
+
 /* eslint-disable max-statements, accessor-pairs */
+type DeckInstanceRef = {
+  deck?: Deck;
+  redrawReason?: string | null;
+  lastRenderedViewports?: Viewport[];
+  viewStateUpdateRequested?: any;
+  interactionStateUpdateRequested?: any;
+  forceUpdate: () => void;
+  version: number;
+  control: React.ReactHTMLElement<HTMLElement> | null;
+};
+
+// Remove prop types in the base Deck class that support externally supplied canvas/WebGLContext
+/** DeckGL React component props */
+export type DeckGLProps = Omit<
+  DeckProps,
+  'width' | 'height' | 'gl' | 'parent' | 'canvas' | '_customRender'
+> & {
+  width?: string | number;
+  height?: string | number;
+  children?: React.ReactNode;
+  ContextProvider?: React.Context<DeckGLContextValue>['Provider'];
+};
 
-function getRefHandles(thisRef) {
-  const handles = {
-    pickObject: opts => thisRef.deck.pickObject(opts),
-    pickMultipleObjects: opts => thisRef.deck.pickMultipleObjects(opts),
-    pickObjects: opts => thisRef.deck.pickObjects(opts)
+export type DeckGLRef = {
+  deck?: Deck;
+  pickObject: Deck['pickObject'];
+  pickObjects: Deck['pickObjects'];
+  pickMultipleObjects: Deck['pickMultipleObjects'];
+};
+
+function getRefHandles(thisRef: DeckInstanceRef): DeckGLRef {
+  return {
+    get deck() {
+      return thisRef.deck;
+    },
+    // The following method can only be called after ref is available, by which point deck is defined in useEffect
+    pickObject: opts => thisRef.deck!.pickObject(opts),
+    pickMultipleObjects: opts => thisRef.deck!.pickMultipleObjects(opts),
+    pickObjects: opts => thisRef.deck!.pickObjects(opts)
   };
-  Object.defineProperty(handles, 'deck', {
-    get: () => thisRef.deck
-  });
-  return handles;
 }
 
-function redrawDeck(thisRef) {
+function redrawDeck(thisRef: DeckInstanceRef) {
   if (thisRef.redrawReason) {
     // Only redraw if we have received a dirty flag
+    // @ts-expect-error accessing protected method
     thisRef.deck._drawLayers(thisRef.redrawReason);
     thisRef.redrawReason = null;
   }
 }
 
-function createDeckInstance(thisRef, props) {
+function createDeckInstance(thisRef: DeckInstanceRef, props): Deck {
   // Allows a subclass of Deck to be used
   // TODO - update propTypes / defaultProps?
   const DeckClass = props.Deck || Deck;
@@ -80,7 +112,7 @@ function createDeckInstance(thisRef, props) {
         // Viewports have changed, update children props first.
         // This will delay the Deck canvas redraw till after React update (in useLayoutEffect)
         // so that the canvas does not get rendered before the child components update.
-        thisRef.forceUpdate(v => v + 1);
+        thisRef.forceUpdate();
       } else {
         redrawDeck(thisRef);
       }
@@ -89,13 +121,16 @@ function createDeckInstance(thisRef, props) {
   return deck;
 }
 
-const DeckGL = forwardRef((props, ref) => {
-  // A reference to persistent states
-  const _thisRef = useRef({});
-  const thisRef = _thisRef.current;
+const DeckGL = forwardRef<DeckGLRef, DeckGLProps>((props, ref) => {
   // A mechanism to force redraw
   const [version, setVersion] = useState(0);
-  thisRef.forceUpdate = setVersion;
+  // A reference to persistent states
+  const _thisRef = useRef<DeckInstanceRef>({
+    control: null,
+    version,
+    forceUpdate: () => setVersion(v => v + 1)
+  });
+  const thisRef = _thisRef.current;
   // DOM refs
   const containerRef = useRef(null);
   const canvasRef = useRef(null);
@@ -109,7 +144,7 @@ const DeckGL = forwardRef((props, ref) => {
   // Callbacks
   let inRender = true;
 
-  const handleViewStateChange = params => {
+  const handleViewStateChange: DeckProps['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
@@ -118,10 +153,10 @@ const DeckGL = forwardRef((props, ref) => {
       return null;
     }
     thisRef.viewStateUpdateRequested = null;
-    return props.onViewStateChange(params);
+    return props.onViewStateChange?.(params);
   };
 
-  const handleInteractionStateChange = params => {
+  const handleInteractionStateChange: DeckProps['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
@@ -129,7 +164,7 @@ const DeckGL = forwardRef((props, ref) => {
       thisRef.interactionStateUpdateRequested = params;
     } else {
       thisRef.interactionStateUpdateRequested = null;
-      props.onInteractionStateChange(params);
+      props.onInteractionStateChange?.(params);
     }
   };
 
@@ -137,7 +172,7 @@ const DeckGL = forwardRef((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 = {
+    const forwardProps: DeckProps = {
       ...props,
       // Override user styling props. We will set the canvas style in render()
       style: null,
@@ -149,6 +184,10 @@ const DeckGL = forwardRef((props, ref) => {
       onInteractionStateChange: handleInteractionStateChange
     };
 
+    // The defaultValue for _customRender is null, which would overwrite the definition
+    // of _customRender. Remove to avoid frequently redeclaring the method here.
+    delete forwardProps._customRender;
+
     if (thisRef.deck) {
       thisRef.deck.setProps(forwardProps);
     }
@@ -163,7 +202,7 @@ const DeckGL = forwardRef((props, ref) => {
       canvas: canvasRef.current
     });
 
-    return () => thisRef.deck.finalize();
+    return () => thisRef.deck?.finalize();
   }, []);
 
   useIsomorphicLayoutEffect(() => {
@@ -184,8 +223,7 @@ const DeckGL = forwardRef((props, ref) => {
 
   useImperativeHandle(ref, () => getRefHandles(thisRef), []);
 
-  const {viewManager} = thisRef.deck || {};
-  const currentViewports = viewManager && viewManager.getViewports();
+  const currentViewports = thisRef.deck && thisRef.deck.getViewports();
 
   const {ContextProvider, width, height, id, style} = props;
 
@@ -234,7 +272,6 @@ const DeckGL = forwardRef((props, ref) => {
   return thisRef.control;
 });
 
-DeckGL.propTypes = Deck.getPropTypes(PropTypes);
 DeckGL.defaultProps = Deck.defaultProps;
 
 export default DeckGL;

package/src/index.ts

@@ -0,0 +1,26 @@
+// 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';
+export {default} from './deckgl';
+
+// Types
+export type {DeckGLContextValue} from './utils/position-children-under-views';
+export type {DeckGLRef, DeckGLProps} from './deckgl';

package/src/utils/evaluate-children.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import {cloneElement} from 'react';
+
+const MAP_STYLE = {position: 'absolute', zIndex: -1};
+
+export default function evaluateChildren(
+  children: React.ReactNode,
+  childProps: any
+): React.ReactNode {
+  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: React.ReactNode): child is React.ReactElement {
+  return (child && typeof child === 'object' && 'type' in child) || false;
+}
+
+function isReactMap(child: React.ReactElement): boolean {
+  const componentClass = child.type;
+  // @ts-expect-error defaultProps is not defined on JSXElementConstructor
+  const componentProps = componentClass && componentClass.defaultProps;
+  return componentProps && componentProps.mapStyle;
+}
+
+function needsDeckGLViewProps(child: React.ReactElement): boolean {
+  const componentClass = child.type;
+  // @ts-expect-error deckGLViewProps is a custom hack defined on the constructor (nebula.gl)
+  return componentClass && componentClass.deckGLViewProps;
+}

package/src/utils/{extract-jsx-layers.js → extract-jsx-layers.ts}

@@ -1,38 +1,53 @@
-import React, {createElement} from 'react';
+import * as React from 'react';
+import {createElement} from 'react';
 import {inheritsFrom} from './inherits-from';
 import {Layer, View} from '@deck.gl/core';
+import {isComponent} from './evaluate-children';
+import type {LayersList} from '@deck.gl/core';
 
 // recursively wrap render callbacks in `View`
-function wrapInView(node) {
-  if (!node) {
-    return node;
-  }
+function wrapInView(node: React.ReactNode): React.ReactNode {
   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 (node.type === React.Fragment) {
-    return wrapInView(node.props.children);
-  }
-  if (inheritsFrom(node.type, View)) {
-    return node;
+  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}) {
-  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 = {};
+export default function extractJSXLayers({
+  children,
+  layers = [],
+  views = null
+}: {
+  children?: React.ReactNode;
+  layers?: LayersList;
+  views?: View | View[] | null;
+}): {
+  children: React.ReactNode[];
+  layers: LayersList;
+  views: View | View[] | null;
+} {
+  const reactChildren: React.ReactNode[] = []; // extract real react elements (i.e. not deck.gl layers)
+  const jsxLayers: LayersList = []; // extracted layer from react children, will add to deck.gl layer array
+  const jsxViews: Record<string, View> = {};
 
   // React.children
   React.Children.forEach(wrapInView(children), reactElement => {
-    if (reactElement) {
+    if (isComponent(reactElement)) {
       // For some reason Children.forEach doesn't filter out `null`s
       const ElementType = reactElement.type;
       if (inheritsFrom(ElementType, Layer)) {
@@ -43,10 +58,13 @@ export default function extractJSXLayers({children, layers, views}) {
       }
 
       // empty id => default view
-      if (ElementType !== View && inheritsFrom(ElementType, View) && reactElement.props.id) {
+      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);
     }
   });
 
@@ -69,7 +87,7 @@ export default function extractJSXLayers({children, layers, views}) {
   return {layers, children: reactChildren, views};
 }
 
-function createLayer(LayerType, reactProps) {
+function createLayer(LayerType: typeof Layer, reactProps: any): Layer {
   const props = {};
   // Layer.defaultProps is treated as ReactElement.defaultProps and merged into react props
   // Remove them
@@ -79,5 +97,6 @@ function createLayer(LayerType, reactProps) {
       props[key] = reactProps[key];
     }
   }
+  // @ts-ignore Cannot instantiate an abstract class (Layer)
   return new LayerType(props);
 }

package/src/utils/{extract-styles.js → extract-styles.ts}

@@ -1,10 +1,23 @@
+import * as React from 'react';
+
 const CANVAS_ONLY_STYLES = {
   mixBlendMode: null
 };
 
-export default function extractStyles({width, height, style}) {
+export default function extractStyles({
+  width,
+  height,
+  style
+}: {
+  width?: string | number;
+  height?: string | number;
+  style?: Partial<CSSStyleDeclaration> | null;
+}): {
+  containerStyle: React.CSSProperties;
+  canvasStyle: React.CSSProperties;
+} {
   // This styling is enforced for correct positioning with children
-  const containerStyle = {
+  const containerStyle: React.CSSProperties = {
     position: 'absolute',
     zIndex: 0,
     left: 0,
@@ -14,7 +27,7 @@ export default function extractStyles({width, height, style}) {
   };
 
   // Fill the container
-  const canvasStyle = {
+  const canvasStyle: React.CSSProperties = {
     left: 0,
     top: 0
   };

package/src/utils/{inherits-from.js → inherits-from.ts}

@@ -1,5 +1,5 @@
 // Check if one JavaScript class inherits from another
-export function inheritsFrom(Type, ParentType) {
+export function inheritsFrom<T>(Type: any, ParentType: T): Type is T {
   while (Type) {
     if (Type === ParentType) {
       return true;

package/src/utils/{position-children-under-views.js → position-children-under-views.ts}

@@ -1,19 +1,45 @@
+import * as React from 'react';
 import {createElement} from 'react';
 import {View} from '@deck.gl/core';
 import {inheritsFrom} from './inherits-from';
-import evaluateChildren from './evaluate-children';
+import evaluateChildren, {isComponent} from './evaluate-children';
+
+import type {Deck, DeckProps, Viewport} from '@deck.gl/core';
+import type {EventManager} from 'mjolnir.js';
+
+export type DeckGLContextValue = {
+  viewport: Viewport;
+  container: HTMLElement;
+  eventManager: EventManager;
+  onViewStateChange: DeckProps['onViewStateChange'];
+};
 
 // 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}) {
+export default function positionChildrenUnderViews({
+  children,
+  deck,
+  ContextProvider
+}: {
+  children: React.ReactNode[];
+  deck?: Deck;
+  ContextProvider?: React.Context<DeckGLContextValue>['Provider'];
+}): React.ReactNode[] {
+  // @ts-expect-error accessing protected property
   const {viewManager} = deck || {};
 
   if (!viewManager || !viewManager.views.length) {
     return [];
   }
 
-  const views = {};
-  const defaultViewId = viewManager.views[0].id;
+  const views: Record<
+    string,
+    {
+      viewport: Viewport;
+      children: React.ReactNode[];
+    }
+  > = {};
+  const defaultViewId = (viewManager.views[0] as View).id;
 
   // Sort children by view id
   for (const child of children) {
@@ -21,12 +47,12 @@ export default function positionChildrenUnderViews({children, deck, ContextProvi
     let viewId = defaultViewId;
     let viewChildren = child;
 
-    if (inheritsFrom(child.type, View)) {
+    if (isComponent(child) && inheritsFrom(child.type, View)) {
       viewId = child.props.id || defaultViewId;
       viewChildren = child.props.children;
     }
 
-    const viewport = viewManager.getViewport(viewId);
+    const viewport = viewManager.getViewport(viewId) as Viewport;
     const viewState = viewManager.getViewState(viewId);
 
     // Drop (auto-hide) elements with viewId that are not matched by any current view
@@ -70,12 +96,15 @@ export default function positionChildrenUnderViews({children, deck, ContextProvi
     const viewElement = createElement('div', {key, id: key, style}, ...viewChildren);
 
     if (ContextProvider) {
-      const contextValue = {
+      const contextValue: DeckGLContextValue = {
         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);
         }
       };

package/typed/deckgl.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Deck } from '@deck.gl/core/typed';
+import type { DeckGLContextValue } from './utils/position-children-under-views';
+import type { DeckProps } from '@deck.gl/core/typed';
+/** DeckGL React component props */
+export declare type DeckGLProps = Omit<DeckProps, 'width' | 'height' | 'gl' | 'parent' | 'canvas' | '_customRender'> & {
+    width?: string | number;
+    height?: string | number;
+    children?: React.ReactNode;
+    ContextProvider?: React.Context<DeckGLContextValue>['Provider'];
+};
+export declare type DeckGLRef = {
+    deck?: Deck;
+    pickObject: Deck['pickObject'];
+    pickObjects: Deck['pickObjects'];
+    pickMultipleObjects: Deck['pickMultipleObjects'];
+};
+declare const DeckGL: React.ForwardRefExoticComponent<Omit<DeckProps, "width" | "height" | "gl" | "parent" | "canvas" | "_customRender"> & {
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    children?: React.ReactNode;
+    ContextProvider?: React.Provider<DeckGLContextValue> | undefined;
+} & React.RefAttributes<DeckGLRef>>;
+export default DeckGL;
+//# sourceMappingURL=deckgl.d.ts.map

package/typed/deckgl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"deckgl.d.ts","sourceRoot":"","sources":["../src/deckgl.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAAC,IAAI,EAAC,MAAM,eAAe,CAAC;AAOnC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,uCAAuC,CAAC;AAC9E,OAAO,KAAK,EAAC,SAAS,EAAW,MAAM,eAAe,CAAC;AAevD,mCAAmC;AACnC,oBAAY,WAAW,GAAG,IAAI,CAC5B,SAAS,EACT,OAAO,GAAG,QAAQ,GAAG,IAAI,GAAG,QAAQ,GAAG,QAAQ,GAAG,eAAe,CAClE,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,eAAe,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,UAAU,CAAC,CAAC;CACjE,CAAC;AAEF,oBAAY,SAAS,GAAG;IACtB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IAC/B,WAAW,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACjC,mBAAmB,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;CAClD,CAAC;AAuDF,QAAA,MAAM,MAAM;;;eAhEC,MAAM,SAAS;;mCAqN1B,CAAC;AAIH,eAAe,MAAM,CAAC"}