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

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

@@ -1,3 +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;
-declare const DeckGL: any;
 //# sourceMappingURL=deckgl.d.ts.map

package/typed/deckgl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"deckgl.d.ts","sourceRoot":"","sources":["../src/deckgl.js"],"names":[],"mappings":";AA0FA,0BAmJG"}
+{"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"}

package/typed/deckgl.js

@@ -0,0 +1,194 @@
+// 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.
+import { createElement, useRef, useState, useMemo, useEffect, useImperativeHandle, forwardRef } from 'react';
+import { Deck } from '@deck.gl/core';
+import useIsomorphicLayoutEffect from './utils/use-isomorphic-layout-effect';
+import extractJSXLayers from './utils/extract-jsx-layers';
+import positionChildrenUnderViews from './utils/position-children-under-views';
+import extractStyles from './utils/extract-styles';
+/* eslint-disable max-statements, accessor-pairs */
+function getRefHandles(thisRef) {
+    const handles = {
+        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) {
+    if (thisRef.redrawReason) {
+        // Only redraw if we have received a dirty flag
+        thisRef.deck._drawLayers(thisRef.redrawReason);
+        thisRef.redrawReason = null;
+    }
+}
+function createDeckInstance(thisRef, props) {
+    // Allows a subclass of Deck to be used
+    // TODO - update propTypes / defaultProps?
+    const DeckClass = props.Deck || Deck;
+    const deck = new DeckClass({
+        ...props,
+        style: null,
+        width: '100%',
+        height: '100%',
+        // The Deck's animation loop is independent from React's render cycle, causing potential
+        // synchronization issues. We provide this custom render function to make sure that React
+        // and Deck update on the same schedule.
+        _customRender: redrawReason => {
+            // Save the dirty flag for later
+            thisRef.redrawReason = redrawReason;
+            // Viewport/view state is passed to child components as props.
+            // If they have changed, we need to trigger a React rerender to update children props.
+            const viewports = deck.viewManager.getViewports();
+            if (thisRef.lastRenderedViewports !== viewports) {
+                // 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);
+            }
+            else {
+                redrawDeck(thisRef);
+            }
+        }
+    });
+    return deck;
+}
+const DeckGL = forwardRef((props, ref) => {
+    // A reference to persistent states
+    const _thisRef = useRef({});
+    const thisRef = _thisRef.current;
+    // A mechanism to force redraw
+    const [version, setVersion] = useState(0);
+    thisRef.forceUpdate = setVersion;
+    // DOM refs
+    const containerRef = useRef(null);
+    const canvasRef = useRef(null);
+    // extract any deck.gl layers masquerading as react elements from props.children
+    const jsxProps = useMemo(() => extractJSXLayers(props), [props.layers, props.views, props.children]);
+    // Callbacks
+    let inRender = true;
+    const handleViewStateChange = 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
+            // Store deferred parameters in ref so that we can access it in another render
+            thisRef.viewStateUpdateRequested = params;
+            return null;
+        }
+        thisRef.viewStateUpdateRequested = null;
+        return props.onViewStateChange(params);
+    };
+    const handleInteractionStateChange = 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
+            // Store deferred parameters in ref so that we can access it in another render
+            thisRef.interactionStateUpdateRequested = params;
+        }
+        else {
+            thisRef.interactionStateUpdateRequested = null;
+            props.onInteractionStateChange(params);
+        }
+    };
+    // Update Deck's props. If Deck needs redraw, this will trigger a call to `_customRender` in
+    // the next animation frame.
+    // Needs to be called both from initial mount, and when new props are received
+    const deckProps = useMemo(() => {
+        const forwardProps = {
+            ...props,
+            // Override user styling props. We will set the canvas style in render()
+            style: null,
+            width: '100%',
+            height: '100%',
+            layers: jsxProps.layers,
+            views: jsxProps.views,
+            onViewStateChange: handleViewStateChange,
+            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);
+        }
+        return forwardProps;
+    }, [props]);
+    useEffect(() => {
+        thisRef.deck = createDeckInstance(thisRef, {
+            ...deckProps,
+            parent: containerRef.current,
+            canvas: canvasRef.current
+        });
+        return () => thisRef.deck.finalize();
+    }, []);
+    useIsomorphicLayoutEffect(() => {
+        // render has just been called. The children are positioned based on the current view state.
+        // Redraw Deck canvas immediately, if necessary, using the current view state, so that it
+        // matches the child components.
+        redrawDeck(thisRef);
+        // Execute deferred callbacks
+        const { viewStateUpdateRequested, interactionStateUpdateRequested } = thisRef;
+        if (viewStateUpdateRequested) {
+            handleViewStateChange(viewStateUpdateRequested);
+        }
+        if (interactionStateUpdateRequested) {
+            handleInteractionStateChange(interactionStateUpdateRequested);
+        }
+    });
+    useImperativeHandle(ref, () => getRefHandles(thisRef), []);
+    const { viewManager } = thisRef.deck || {};
+    const currentViewports = viewManager && viewManager.getViewports();
+    const { ContextProvider, width, height, id, style } = props;
+    const { containerStyle, canvasStyle } = useMemo(() => extractStyles({ width, height, style }), [width, height, style]);
+    // Props changes may lead to 3 types of updates:
+    // 1. Only the WebGL canvas - updated in Deck's render cycle (next animation frame)
+    // 2. Only the DOM - updated in React's lifecycle (now)
+    // 3. Both the WebGL canvas and the DOM - defer React rerender to next animation frame just
+    //    before Deck redraw to ensure perfect synchronization & avoid excessive redraw
+    //    This is because multiple changes may happen to Deck between two frames e.g. transition
+    if ((!thisRef.viewStateUpdateRequested && thisRef.lastRenderedViewports === currentViewports) || // case 2
+        thisRef.version !== version // case 3 just before deck redraws
+    ) {
+        thisRef.lastRenderedViewports = currentViewports;
+        thisRef.version = version;
+        // Render the background elements (typically react-map-gl instances)
+        // using the view descriptors
+        const childrenUnderViews = positionChildrenUnderViews({
+            children: jsxProps.children,
+            deck: thisRef.deck,
+            ContextProvider
+        });
+        const canvas = createElement('canvas', {
+            key: 'canvas',
+            id: id || 'deckgl-overlay',
+            ref: canvasRef,
+            style: canvasStyle
+        });
+        // Render deck.gl as the last child
+        thisRef.control = createElement('div', { id: `${id || 'deckgl'}-wrapper`, ref: containerRef, style: containerStyle }, [canvas, childrenUnderViews]);
+    }
+    inRender = false;
+    return thisRef.control;
+});
+DeckGL.defaultProps = Deck.defaultProps;
+export default DeckGL;

package/typed/index.d.ts

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

package/typed/index.d.ts.map

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

package/{src → typed}/index.js

@@ -17,6 +17,5 @@
 // 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';
+export { default as DeckGL } from './deckgl';
+export { default } from './deckgl';

package/typed/utils/evaluate-children.d.ts

@@ -1,2 +1,4 @@
-export default function evaluateChildren(children: any, childProps: any): any;
+import * as React from 'react';
+export default function evaluateChildren(children: React.ReactNode, childProps: any): React.ReactNode;
+export declare function isComponent(child: React.ReactNode): child is React.ReactElement;
 //# sourceMappingURL=evaluate-children.d.ts.map

package/typed/utils/evaluate-children.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"evaluate-children.d.ts","sourceRoot":"","sources":["../../src/utils/evaluate-children.js"],"names":[],"mappings":"AAIA,8EAsBC"}
+{"version":3,"file":"evaluate-children.d.ts","sourceRoot":"","sources":["../../src/utils/evaluate-children.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,CAAC,OAAO,UAAU,gBAAgB,CACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,EACzB,UAAU,EAAE,GAAG,GACd,KAAK,CAAC,SAAS,CAqBjB;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,IAAI,KAAK,CAAC,YAAY,CAE/E"}

package/typed/utils/evaluate-children.js

@@ -0,0 +1,33 @@
+import { cloneElement } from 'react';
+const MAP_STYLE = { position: 'absolute', zIndex: -1 };
+export default function evaluateChildren(children, childProps) {
+    if (!children) {
+        return children;
+    }
+    if (typeof children === 'function') {
+        return children(childProps);
+    }
+    if (Array.isArray(children)) {
+        return children.map(child => evaluateChildren(child, childProps));
+    }
+    // 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;
+}
+function isReactMap(child) {
+    const componentClass = child && child.type;
+    const componentProps = componentClass && componentClass.defaultProps;
+    return componentProps && componentProps.mapStyle;
+}
+function needsDeckGLViewProps(child) {
+    const componentClass = child && child.type;
+    return componentClass && componentClass.deckGLViewProps;
+}

package/typed/utils/extract-jsx-layers.d.ts

@@ -1,10 +1,13 @@
+import * as React from 'react';
+import { View } from '@deck.gl/core/typed';
+import type { LayersList } from '@deck.gl/core/typed';
 export default function extractJSXLayers({ children, layers, views }: {
-    children: any;
-    layers: any;
-    views: any;
+    children?: React.ReactNode;
+    layers?: LayersList;
+    views?: View | View[] | null;
 }): {
-    layers: any;
-    children: any[];
-    views: any;
+    children: React.ReactNode[];
+    layers: LayersList;
+    views: View | View[] | null;
 };
 //# sourceMappingURL=extract-jsx-layers.d.ts.map

package/typed/utils/extract-jsx-layers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"extract-jsx-layers.d.ts","sourceRoot":"","sources":["../../src/utils/extract-jsx-layers.js"],"names":[],"mappings":"AA2BA;;;;;;;;EA0CC"}
+{"version":3,"file":"extract-jsx-layers.d.ts","sourceRoot":"","sources":["../../src/utils/extract-jsx-layers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAQ,IAAI,EAAC,MAAM,eAAe,CAAC;AAE1C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,eAAe,CAAC;AAyB9C,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,QAAQ,EACR,MAAW,EACX,KAAY,EACb,EAAE;IACD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;CAC9B,GAAG;IACF,QAAQ,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAC5B,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;CAC7B,CA6CA"}

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

@@ -0,0 +1,77 @@
+import React, { createElement } from 'react';
+import { inheritsFrom } from './inherits-from';
+import { Layer, View } from '@deck.gl/core';
+// recursively wrap render callbacks in `View`
+function wrapInView(node) {
+    if (!node) {
+        return node;
+    }
+    if (typeof node === 'function') {
+        // React.Children does not traverse functions.
+        // All render callbacks must be protected under a <View>
+        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;
+    }
+    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 = {};
+    // React.children
+    React.Children.forEach(wrapInView(children), reactElement => {
+        if (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 (ElementType !== View && inheritsFrom(ElementType, View) && reactElement.props.id) {
+                const view = new ElementType(reactElement.props);
+                jsxViews[view.id] = view;
+            }
+        }
+    });
+    // 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];
+        }
+    }
+    return new LayerType(props);
+}

package/typed/utils/extract-styles.d.ts

@@ -1,19 +1,10 @@
+import * as React from 'react';
 export default function extractStyles({ width, height, style }: {
-    width: any;
-    height: any;
-    style: any;
+    width?: string | number;
+    height?: string | number;
+    style?: Partial<CSSStyleDeclaration> | null;
 }): {
-    containerStyle: {
-        position: string;
-        zIndex: number;
-        left: number;
-        top: number;
-        width: any;
-        height: any;
-    };
-    canvasStyle: {
-        left: number;
-        top: number;
-    };
+    containerStyle: React.CSSProperties;
+    canvasStyle: React.CSSProperties;
 };
 //# sourceMappingURL=extract-styles.d.ts.map

package/typed/utils/extract-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"extract-styles.d.ts","sourceRoot":"","sources":["../../src/utils/extract-styles.js"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;EA8BC"}
+{"version":3,"file":"extract-styles.d.ts","sourceRoot":"","sources":["../../src/utils/extract-styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,KAAK,EACL,MAAM,EACN,KAAK,EACN,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,GAAG,IAAI,CAAC;CAC7C,GAAG;IACF,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,WAAW,EAAE,KAAK,CAAC,aAAa,CAAC;CAClC,CA8BA"}