@planet/maps 10.3.0 → 11.0.0-dev.1740075628963

package/interaction/Snap.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLSnap from 'ol/interaction/Snap.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const Snap = forwardRef((props, ref) => {
-  return createElement('interaction', {cls: OLSnap, ref, ...props});
-});
-
-export default Snap;
+export default function Snap(props) {
+  return createElement('interaction', {cls: OLSnap, ...props});
+}

package/interaction/Translate.js

@@ -15,10 +15,8 @@
  * limitations under the License.
  */
 import OLTranslate from 'ol/interaction/Translate.js';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const Translate = forwardRef((props, ref) => {
-  return createElement('interaction', {cls: OLTranslate, ref, ...props});
-});
-
-export default Translate;
+export default function Translate(props) {
+  return createElement('interaction', {cls: OLTranslate, ...props});
+}

package/internal/config.js

@@ -1,6 +1,7 @@
 /**
  * The constants below represent the primitive element types handled by the renderer.
  */
+export const MAP = 'map';
 export const VIEW = 'view';
 export const OVERLAY = 'overlay';
 export const CONTROL = 'control';

package/internal/render.js

@@ -10,6 +10,7 @@ import {CONTROL, INTERACTION, LAYER, OVERLAY, SOURCE, VIEW} from './config.js';
 import {
   ConcurrentRoot,
   DefaultEventPriority,
+  NoEventPriority,
 } from 'react-reconciler/constants.js';
 import {
   prepareControlUpdate,
@@ -41,20 +42,52 @@ const knownTypes = {
   [SOURCE]: true,
 };
 
-export function updateInstanceFromProps(instance, props, oldProps = {}) {
-  for (const key in props) {
+/**
+ * @param {Array} a1 An array.
+ * @param {Array} a2 An array.
+ * @return {boolean} All elements in the array are the same;
+ */
+function arrayEquals(a1, a2) {
+  if (!a1 || !a2) {
+    return false;
+  }
+  const len1 = a1.length;
+  const len2 = a2.length;
+  if (len1 !== len2) {
+    return false;
+  }
+  for (let i = 0; i < len1; i += 1) {
+    const v1 = a1[i];
+    const v2 = a2[i];
+    if (v1 !== v2) {
+      return false;
+    }
+  }
+  return true;
+}
+
+export function updateInstanceFromProps(instance, type, oldProps, newProps) {
+  for (const key in newProps) {
     if (reservedProps[key]) {
       continue;
     }
+    const newValue = newProps[key];
+    const oldValue = oldProps[key];
+    if (oldValue === newValue) {
+      continue;
+    }
+
     if (listenerRegex.test(key)) {
-      const listener = props[key];
-      const type = key
+      const listener = newProps[key];
+      const eventType = key
         .replace(listenerColonRegex, 'onChange:')
         .replace(listenerRegex, '$1')
         .toLowerCase();
-      instance.on(type, listener);
-      if (oldProps[key]) {
-        instance.un(type, oldProps[key]);
+      instance.on(eventType, listener);
+
+      const oldListener = oldProps[key];
+      if (oldListener) {
+        instance.un(eventType, oldListener);
         if (instance.changed) {
           instance.changed();
         }
@@ -62,16 +95,20 @@ export function updateInstanceFromProps(instance, props, oldProps = {}) {
       continue;
     }
 
+    if (key === 'center' && arrayEquals(newValue, oldValue)) {
+      continue;
+    }
+
     const setter = setterName(key);
     if (typeof instance[setter] === 'function') {
-      instance[setter](props[key]);
+      instance[setter](newValue);
       continue;
     }
 
     if (key === 'features' && typeof instance.addFeatures === 'function') {
       // TODO: there is likely a smarter way to diff features
       instance.clear(true);
-      instance.addFeatures(props[key]);
+      instance.addFeatures(newValue);
       continue;
     }
 
@@ -80,12 +117,12 @@ export function updateInstanceFromProps(instance, props, oldProps = {}) {
       typeof instance.addInteraction === 'function'
     ) {
       instance.getInteractions().clear();
-      props[key].forEach(interaction => instance.addInteraction(interaction));
+      newValue.forEach(interaction => instance.addInteraction(interaction));
       continue;
     }
     if (key === 'controls' && typeof instance.addControl === 'function') {
       instance.getControls().clear();
-      props[key].forEach(control => instance.addControl(control));
+      newValue.forEach(control => instance.addControl(control));
       continue;
     }
 
@@ -102,7 +139,7 @@ function createInstance(type, {cls: Constructor, ...props}) {
   }
 
   const instance = new Constructor(props.options || {});
-  updateInstanceFromProps(instance, props);
+  updateInstanceFromProps(instance, type, {}, props);
   return instance;
 }
 
@@ -167,8 +204,8 @@ function prepareUpdate(instance, type, oldProps, newProps) {
   return updater(instance, type, oldProps, newProps);
 }
 
-function commitUpdate(instance, updatePayload, type, oldProps) {
-  updateInstanceFromProps(instance, updatePayload, oldProps);
+function commitUpdate(instance, type, oldProps, newProps) {
+  updateInstanceFromProps(instance, type, oldProps, newProps);
 }
 
 function removeChildFromContainer(map, child) {
@@ -247,6 +284,9 @@ function insertBefore(parent, child, beforeChild) {
   throw new Error(`Cannot insert child ${child} into parent ${parent}`);
 }
 
+const noContext = {};
+let currentUpdatePriority = NoEventPriority;
+
 const reconciler = ReactReconciler({
   supportsMutation: true,
   isPrimaryRenderer: false,
@@ -260,21 +300,66 @@ const reconciler = ReactReconciler({
   clearContainer,
   removeChildFromContainer,
   removeChild,
-
   insertInContainerBefore,
   insertBefore,
+  noTimeout: -1,
+
+  getInstanceFromNode() {
+    return null;
+  },
+
+  shouldAttemptEagerTransition() {
+    return false;
+  },
+
+  requestPostPaintCallback() {},
+
+  maySuspendCommit() {
+    return false;
+  },
+
+  preloadInstance() {
+    return true;
+  },
+
+  startSuspendingCommit() {},
+
+  suspendInstance() {},
+
+  waitForCommitToBeReady() {
+    return null;
+  },
+
+  setCurrentUpdatePriority(newPriority) {
+    currentUpdatePriority = newPriority;
+  },
+
+  getCurrentUpdatePriority() {
+    return currentUpdatePriority;
+  },
+
+  resolveUpdatePriority() {
+    if (currentUpdatePriority) {
+      return currentUpdatePriority;
+    }
+    return DefaultEventPriority;
+  },
 
   finalizeInitialChildren() {
     return false;
   },
 
-  getChildHostContext() {},
+  getChildHostContext() {
+    return noContext;
+  },
 
   getPublicInstance(instance) {
     return instance;
   },
 
-  getRootHostContext() {},
+  getRootHostContext() {
+    return noContext;
+  },
 
   getCurrentEventPriority() {
     return DefaultEventPriority;
@@ -299,9 +384,7 @@ export function render(element, container) {
   let root = roots.get(container);
   if (!root) {
     const logRecoverableError =
-      typeof reportError === 'function'
-        ? reportError // eslint-disable-line no-undef
-        : console.error; // eslint-disable-line no-console
+      typeof reportError === 'function' ? reportError : console.error; // eslint-disable-line no-console
 
     root = reconciler.createContainer(
       container,

package/internal/update.js

@@ -14,6 +14,7 @@ export const reservedProps = {
   children: true,
   cls: true,
   options: true,
+  ref: true, // TODO: deal with changing ref
 };
 
 export function prepareViewUpdate(view, type, oldProps, newProps) {

package/layer/Base.js

@@ -16,14 +16,12 @@
  */
 import OLBase from 'ol/layer/Base.js';
 import propTypes from 'prop-types';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const Base = forwardRef(({children, ...props}, ref) => {
-  return createElement('layer', {cls: OLBase, ref, ...props}, children);
-});
+export default function Base({children, ...props}) {
+  return createElement('layer', {cls: OLBase, ...props}, children);
+}
 
 Base.propTypes = {
   children: propTypes.node,
 };
-
-export default Base;

package/layer/BaseImage.js

@@ -16,14 +16,12 @@
  */
 import OLBaseImage from 'ol/layer/BaseImage.js';
 import propTypes from 'prop-types';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const BaseImage = forwardRef(({children, ...props}, ref) => {
-  return createElement('layer', {cls: OLBaseImage, ref, ...props}, children);
-});
+export default function BaseImage({children, ...props}) {
+  return createElement('layer', {cls: OLBaseImage, ...props}, children);
+}
 
 BaseImage.propTypes = {
   children: propTypes.node,
 };
-
-export default BaseImage;

package/layer/BaseTile.js

@@ -16,14 +16,12 @@
  */
 import OLBaseTile from 'ol/layer/BaseTile.js';
 import propTypes from 'prop-types';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const BaseTile = forwardRef(({children, ...props}, ref) => {
-  return createElement('layer', {cls: OLBaseTile, ref, ...props}, children);
-});
+export default function BaseTile({children, ...props}) {
+  return createElement('layer', {cls: OLBaseTile, ...props}, children);
+}
 
 BaseTile.propTypes = {
   children: propTypes.node,
 };
-
-export default BaseTile;

package/layer/BaseVector.js

@@ -16,14 +16,12 @@
  */
 import OLBaseVector from 'ol/layer/BaseVector.js';
 import propTypes from 'prop-types';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const BaseVector = forwardRef(({children, ...props}, ref) => {
-  return createElement('layer', {cls: OLBaseVector, ref, ...props}, children);
-});
+export default function BaseVector({children, ...props}) {
+  return createElement('layer', {cls: OLBaseVector, ...props}, children);
+}
 
 BaseVector.propTypes = {
   children: propTypes.node,
 };
-
-export default BaseVector;

package/layer/Flow.js

@@ -16,14 +16,12 @@
  */
 import OLFlow from 'ol/layer/Flow.js';
 import propTypes from 'prop-types';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const Flow = forwardRef(({children, ...props}, ref) => {
-  return createElement('layer', {cls: OLFlow, ref, ...props}, children);
-});
+export default function Flow({children, ...props}) {
+  return createElement('layer', {cls: OLFlow, ...props}, children);
+}
 
 Flow.propTypes = {
   children: propTypes.node,
 };
-
-export default Flow;

package/layer/Graticule.js

@@ -16,14 +16,12 @@
  */
 import OLGraticule from 'ol/layer/Graticule.js';
 import propTypes from 'prop-types';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const Graticule = forwardRef(({children, ...props}, ref) => {
-  return createElement('layer', {cls: OLGraticule, ref, ...props}, children);
-});
+export default function Graticule({children, ...props}) {
+  return createElement('layer', {cls: OLGraticule, ...props}, children);
+}
 
 Graticule.propTypes = {
   children: propTypes.node,
 };
-
-export default Graticule;

package/layer/Group.js

@@ -16,14 +16,12 @@
  */
 import OLGroup from 'ol/layer/Group.js';
 import propTypes from 'prop-types';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const Group = forwardRef(({children, ...props}, ref) => {
-  return createElement('layer', {cls: OLGroup, ref, ...props}, children);
-});
+export default function Group({children, ...props}) {
+  return createElement('layer', {cls: OLGroup, ...props}, children);
+}
 
 Group.propTypes = {
   children: propTypes.node,
 };
-
-export default Group;

package/layer/Heatmap.js

@@ -16,14 +16,12 @@
  */
 import OLHeatmap from 'ol/layer/Heatmap.js';
 import propTypes from 'prop-types';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const Heatmap = forwardRef(({children, ...props}, ref) => {
-  return createElement('layer', {cls: OLHeatmap, ref, ...props}, children);
-});
+export default function Heatmap({children, ...props}) {
+  return createElement('layer', {cls: OLHeatmap, ...props}, children);
+}
 
 Heatmap.propTypes = {
   children: propTypes.node,
 };
-
-export default Heatmap;

package/layer/Image.js

@@ -16,14 +16,12 @@
  */
 import OLImage from 'ol/layer/Image.js';
 import propTypes from 'prop-types';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const Image = forwardRef(({children, ...props}, ref) => {
-  return createElement('layer', {cls: OLImage, ref, ...props}, children);
-});
+export default function Image({children, ...props}) {
+  return createElement('layer', {cls: OLImage, ...props}, children);
+}
 
 Image.propTypes = {
   children: propTypes.node,
 };
-
-export default Image;

package/layer/Layer.js

@@ -16,14 +16,12 @@
  */
 import OLLayer from 'ol/layer/Layer.js';
 import propTypes from 'prop-types';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const Layer = forwardRef(({children, ...props}, ref) => {
-  return createElement('layer', {cls: OLLayer, ref, ...props}, children);
-});
+export default function Layer({children, ...props}) {
+  return createElement('layer', {cls: OLLayer, ...props}, children);
+}
 
 Layer.propTypes = {
   children: propTypes.node,
 };
-
-export default Layer;

package/layer/MapboxVector.js

@@ -16,18 +16,12 @@
  */
 import propTypes from 'prop-types';
 import {MapboxVectorLayer as OLMBVectorLayer} from 'ol-mapbox-style';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const MapboxVector = forwardRef(({children, ...props}, ref) => {
-  return createElement(
-    'layer',
-    {cls: OLMBVectorLayer, ref, ...props},
-    children,
-  );
-});
+export default function MapboxVector({children, ...props}) {
+  return createElement('layer', {cls: OLMBVectorLayer, ...props}, children);
+}
 
 MapboxVector.propTypes = {
   children: propTypes.node,
 };
-
-export default MapboxVector;

package/layer/Tile.js

@@ -16,14 +16,12 @@
  */
 import OLTile from 'ol/layer/Tile.js';
 import propTypes from 'prop-types';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const Tile = forwardRef(({children, ...props}, ref) => {
-  return createElement('layer', {cls: OLTile, ref, ...props}, children);
-});
+export default function Tile({children, ...props}) {
+  return createElement('layer', {cls: OLTile, ...props}, children);
+}
 
 Tile.propTypes = {
   children: propTypes.node,
 };
-
-export default Tile;

package/layer/Vector.js

@@ -16,14 +16,12 @@
  */
 import OLVector from 'ol/layer/Vector.js';
 import propTypes from 'prop-types';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const Vector = forwardRef(({children, ...props}, ref) => {
-  return createElement('layer', {cls: OLVector, ref, ...props}, children);
-});
+export default function Vector({children, ...props}) {
+  return createElement('layer', {cls: OLVector, ...props}, children);
+}
 
 Vector.propTypes = {
   children: propTypes.node,
 };
-
-export default Vector;

package/layer/VectorImage.js

@@ -16,14 +16,12 @@
  */
 import OLVectorImage from 'ol/layer/VectorImage.js';
 import propTypes from 'prop-types';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const VectorImage = forwardRef(({children, ...props}, ref) => {
-  return createElement('layer', {cls: OLVectorImage, ref, ...props}, children);
-});
+export default function VectorImage({children, ...props}) {
+  return createElement('layer', {cls: OLVectorImage, ...props}, children);
+}
 
 VectorImage.propTypes = {
   children: propTypes.node,
 };
-
-export default VectorImage;

package/layer/VectorTile.js

@@ -16,14 +16,12 @@
  */
 import OLVectorTile from 'ol/layer/VectorTile.js';
 import propTypes from 'prop-types';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const VectorTile = forwardRef(({children, ...props}, ref) => {
-  return createElement('layer', {cls: OLVectorTile, ref, ...props}, children);
-});
+export default function VectorTile({children, ...props}) {
+  return createElement('layer', {cls: OLVectorTile, ...props}, children);
+}
 
 VectorTile.propTypes = {
   children: propTypes.node,
 };
-
-export default VectorTile;

package/layer/WebGLPoints.js

@@ -16,14 +16,12 @@
  */
 import OLWebGLPoints from 'ol/layer/WebGLPoints.js';
 import propTypes from 'prop-types';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const WebGLPoints = forwardRef(({children, ...props}, ref) => {
-  return createElement('layer', {cls: OLWebGLPoints, ref, ...props}, children);
-});
+export default function WebGLPoints({children, ...props}) {
+  return createElement('layer', {cls: OLWebGLPoints, ...props}, children);
+}
 
 WebGLPoints.propTypes = {
   children: propTypes.node,
 };
-
-export default WebGLPoints;

package/layer/WebGLTile.js

@@ -16,14 +16,12 @@
  */
 import OLWebGLTile from 'ol/layer/WebGLTile.js';
 import propTypes from 'prop-types';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const WebGLTile = forwardRef(({children, ...props}, ref) => {
-  return createElement('layer', {cls: OLWebGLTile, ref, ...props}, children);
-});
+export default function WebGLTile({children, ...props}) {
+  return createElement('layer', {cls: OLWebGLTile, ...props}, children);
+}
 
 WebGLTile.propTypes = {
   children: propTypes.node,
 };
-
-export default WebGLTile;

package/layer/WebGLVector.js

@@ -16,14 +16,12 @@
  */
 import OLWebGLVector from 'ol/layer/WebGLVector.js';
 import propTypes from 'prop-types';
-import {createElement, forwardRef} from 'react';
+import {createElement} from 'react';
 
-const WebGLVector = forwardRef(({children, ...props}, ref) => {
-  return createElement('layer', {cls: OLWebGLVector, ref, ...props}, children);
-});
+export default function WebGLVector({children, ...props}) {
+  return createElement('layer', {cls: OLWebGLVector, ...props}, children);
+}
 
 WebGLVector.propTypes = {
   children: propTypes.node,
 };
-
-export default WebGLVector;