esrieact 0.1.0

package/README.md

@@ -0,0 +1,309 @@
+<p align="center">
+  <h1 align="center">ESRIEACT</h1>
+</p>
+<p align="center">
+  A react component library for the ArcGIS Javascript API.
+</p>
+
+## 📘 [Read the Docs (Work in Progress!)](https://slutske22.github.io/esrieact/)
+
+## File Organization
+
+- `/lib` contains actual map component files that are the source code and main feature of this repository
+- `/src` is simply an example application to showcase the code written in `/lib`
+
+## Why?
+
+The goal of wrapping ArcGIS JS API components in react wrappers is to maintain a react-style flow of data, i.e. state and prop changes cause components to react and auto-update. For example, rendering a map, or map components, normally requires many `useEffect` calls:
+
+```ts
+import React, { useEffect } from "react";
+import Map from "@arcgis/core/Map";
+import MapView from "@arcgis/core/views/MapView";
+
+export const EffectBasedMap: React.FC = () => {
+  useEffect(() => {
+    const map = new Map({
+      basemap: "topo-vector",
+    });
+
+    new MapView({
+      container: "map-div",
+      map,
+    });
+  }, []);
+
+  return <div id="map-div" />;
+};
+```
+
+While the above is not terribly complex or ugly, mangaging map state with React is more complex as we add more ESRI components. For example, keeping the map up to date with a list of layers requires some confusing `useEffect`s:
+
+```ts
+export const EffectBasedMap: React.FC = ({ layerList }) => {
+  const [map, setMap] = useState<__esri.Map>();
+
+  useEffect(() => {
+    const map = new Map({
+      basemap: "topo-vector",
+    });
+
+    new MapView({
+      container: "map-div",
+      map,
+    });
+
+    setMap(map);
+  }, []);
+
+  useEffect(() => {
+    if (map) {
+      layerList.forEach((layer) => {
+        if (!map.layers.map((l) => l.id).includes(layer.id)) {
+          map.add(layer);
+        }
+        // We would also need some ugly logic here to test if the map has
+        // layers that are not part of the new layer list prop
+      });
+    }
+  }, [map, layerList]);
+
+  return <div id="map-div" />;
+};
+```
+
+Instead, wrapper components are available to make map presentation clear and declarative:
+
+```ts
+import React from "react";
+import { FeatureLayer, MapView } from "./esri";
+
+export const ReactMap: React.FC = ({ layerList }) => {
+  return (
+    <MapView>
+      {layerList.map((layer) => (
+        <FeatureLayer url={layer.url} />
+      ))}
+    </MapView>
+  );
+};
+```
+
+The wrappers for ESRIEACT components often do not render anything, but rather simply use react lifecycle methods to manage the interaction of an ESRI component to the map. If children of a component are needed, ESRIEACT components render a context object that provides the ESRI instance to any children.
+
+### What about ESRI's react library?
+
+ESRI recently released [@arcgis/map-components-react](https://www.npmjs.com/package/@arcgis/map-components-react), which offers some support for ArcGIS components in react.  Their [documentation](https://developers.arcgis.com/javascript/latest/get-started-react/) shows a basic example, but in the current early stage of this library, react components for map layers, renderers, graphics, etc, do not exist, and must still be added to a map using the classic imperative programming style.
+
+## Props
+
+Vanilla ESRI component properties are class-based, and often circular. For example:
+
+```ts
+// Using vanilla ArcGIS JS API
+
+const view = new MapView({
+  extent: new Extent({
+    xmin: 10,
+    xmax: 100,
+    ymin: -20,
+    ymax: 120,
+    spatialReference: new SpatialReference({
+      wkid: 102100,
+    }),
+  }),
+});
+```
+
+Beacuse react-wrapped ESRI component props extend directly from ESRI class options, this would technically work:
+
+```ts
+import React from "react";
+import { FeatureLayer, MapView } from "./esri";
+
+export const ReactMap: React.FC = ({ layerList }) => {
+  return (
+    <MapView
+      extent={new Extent({
+        xmin: 10,
+        xmax: 100,
+        ymin: -20,
+        ymax: 120,
+        spatialReference: new SpatialReference({
+          wkid: 102100
+        })
+      })}
+    />
+  );
+};
+```
+
+However, any propery then updated within the above `new Extent` would not register as a property change with react. The reason for this is that many ArcGIS class-based instance properties and [non-Enumerable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties), and as such, React will not know they have been changed, and will not update the property accordingly. For example, this will not work as expected:
+
+```ts
+import React from "react";
+import { FeatureLayer, MapView } from "./esri";
+import FeatureEffect from '@arcgis/core/layers/FeatureEffect'
+import FeatureFilter from '@arcgis/core/layers/FeatureFilter'
+
+export const ReactMap: React.FC = ({ layerList }) => {
+  const [clause, setClause] = useState("SOME SQL CLAUSE");
+
+  return (
+    <MapView>
+      <FeatureLayer featureEffect={new FeatureEffect({
+        filter: new FeatureFilter({
+          where: clause
+        })
+      })} />
+    </MapView>
+  );
+};
+```
+
+Because the property being updated is deeply nested within class-based ESRI components, whose resultant properties are non-enumerable, react will not sense the change and will not update the component. However, most ESRI component properties accept simple objects as option parameters in place of class constructors:
+
+```ts
+import React from "react";
+import { FeatureLayer, MapView } from "./esri";
+
+export const ReactMap: React.FC = ({ layerList }) => {
+  const [clause, setClause] = useState("SOME SQL CLAUSE");
+
+  return (
+    <MapView>
+      <FeatureLayer featureEffect={{
+        filter: {
+          where: clause
+        }
+      }} />
+    </MapView>
+  );
+};
+```
+
+It is prefereable to use this second syntax in this codebase. (Though in the case of trying to filter a FeatureLayer, it is preferable to use a [definitionExpression](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#definitionExpression) for server-side filtering, or a `<FeatureLayerView />` component with a `filter` applied for front-end filtering).
+
+## Context
+
+Many components provide, and rely on, parent contexts. For example, a `Mapview` provides a context that can be consumed by all children of the map, so that those children have access to the underlying esri Map instance. Similarly, even sub-components like layers or widgets provide a context object, whose value is simply the instance of the esri class instance being wrapped.
+
+## Utility factory functions
+
+Factory functions help to quickly create layer and widget components. They are inspired largely by [react-leaflet's core architecture](https://react-leaflet.js.org/docs/core-introduction/).
+
+Layer components should be created by using the `createLayerComponent` function. Widget components should be created using the `createWidgetComponent` function. Use of these factory functions may need to be tweaked, especially for complex widgets with different sub-components. Use these as a starting point for wrapping esri components in react lifecycle methdos.
+
+## Major Components
+
+### `MapView`
+
+A `MapView` is a react component which combines both an ESRI [Map](https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html) and a [MapView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html) into a singular component. It will render a div, and once rendered, use it to render an ArcGIS JS API MapView. `MapView` accepts all `HTMLAttributes<HTMLDivElement>` properties, as well as optional `MapProperties` and `ViewProperties`, which allow you to set the inital `Map` and `MapView` options:
+
+```ts
+const Page: React.FC = () => {
+  return (
+    <MapView
+      id="standard-html-id-for-wrapper-div"
+      style={{ /* use this to ensure map is the size you need */ }}
+      MapProperties={{ basemap: "topo-vector" }}
+      ViewProperties={{ extent: SOME_EXTENT_OBJECT }}
+    />
+  )
+}
+```
+
+### `MapContextProvider`
+
+In order for `<MapView />` child components to be properly associated with the underlying `map` and `view` instances, a `<MapView />` provides its own `MapContextProvider` wrapper out of the box. However, if you find that you need to access the `map` and `view` from outside the `<MapView />` component, you can instead use the `MapViewCore` wrapped in the `MapContextProvider`:
+
+```ts
+// App.tsx
+import { MapViewCore, MapContextProvider } from 'lib/map/MapView';
+
+const App = () => {
+  // Wrap MapViewCore and other components that need access to the map context
+  return (
+    <MapContextProvider>
+      <MapViewCore />
+      <OtherUI />
+    </MapContextProvider>
+  )
+};
+
+// OtherUI.tsx
+import { useContext } from 'react';
+import { MapContext } from 'lib/map/MapView';
+
+const OtherUI = () => {
+  const { view } = useContext(MapContext);
+  return <button onClick={() => view.zoom = view.zoom + 1}>Zoom in!</button>
+}
+```
+
+### `FeatureLayer`
+
+One of the most used layer types is the `FeatureLayer`. A `FeatureLayer` can be declared alone, or can accept a `FeatureLayerView` as a child to help taylor the layer:
+
+```ts
+import React from "react";
+import { FeatureLayer, FeautureLayerView, MapView } from "./esri";
+
+export const ReactMap: React.FC = () => {
+  const flRef = useRef<__esri.FeatureLayer>();
+  const flViewRef = useRef<__esri.FeatureLayerView>();
+
+  return (
+    <MapView>
+      {/* A simple featurelayer: */}
+      <FeatureLayer url="some service url" />
+
+      {/* A featurelayer that uses a FeatureLayerView to do some front-end filtering: */}
+      <FeatureLayer
+        ref={flRef}
+        url="https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0"
+      >
+        <FeatureLayerView
+          ref={flViewRef}
+          filter={{
+            where: `C_Storage < ${maxStorage}`,
+          }}
+        />
+      </FeatureLayer>
+    </MapView>
+  );
+};
+```
+
+As you can see, all ESRIEACT components can take a ref, whose value is the underlying ESRI instance.
+
+# React + TypeScript + Vite Readme
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    project: ["./tsconfig.json", "./tsconfig.node.json"],
+    tsconfigRootDir: __dirname,
+  },
+};
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

package/dist/core/Graphic.d.ts

@@ -0,0 +1,16 @@
+import React, { PropsWithChildren } from "react";
+import EsriGraphic from "@arcgis/core/Graphic.js";
+export interface GraphicProps extends __esri.GraphicProperties, PropsWithChildren {
+}
+/**
+ * The react context object that any Grpahic component creates when rendered
+ * and makes available to its descendants
+ */
+export declare const GraphicContext: React.Context<EsriGraphic>;
+/**
+ * A Graphic component, must be rendered as a child of a GraphicsLayer
+ *
+ * ArcGIS JS API Source Components:
+ * - [Graphic](https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html)
+ */
+export declare const Graphic: React.ForwardRefExoticComponent<GraphicProps & React.RefAttributes<EsriGraphic>>;

package/dist/core/Graphic.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext, useContext, useEffect, useImperativeHandle, useMemo, } from "react";
+import EsriGraphic from "@arcgis/core/Graphic.js";
+import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
+import FeatureLayer from "@arcgis/core/layers/FeatureLayer";
+import Collection from "@arcgis/core/core/Collection.js";
+import { LayerContext } from "../layers";
+import { useEsriPropertyUpdates } from "../utils";
+/**
+ * The react context object that any Grpahic component creates when rendered
+ * and makes available to its descendants
+ */
+export const GraphicContext = createContext({});
+/**
+ * A Graphic component, must be rendered as a child of a GraphicsLayer
+ *
+ * ArcGIS JS API Source Components:
+ * - [Graphic](https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html)
+ */
+export const Graphic = React.forwardRef(({ children, ...properties }, ref) => {
+    const parent = useContext(LayerContext);
+    /**
+     * Create instance only on first mount
+     */
+    const instance = useMemo(() => {
+        const graphic = new EsriGraphic(properties);
+        if (!(parent instanceof GraphicsLayer) &&
+            !(parent instanceof FeatureLayer)) {
+            // Allow this because it only happens in development and is helpful for devs
+            // eslint-disable-next-line
+            console.error("You are trying to render a Graphic component that is not a descendant of a GraphicsLayer or FeatureLayer.", "Did you forget to wrap your Graphic in a GraphicsLayer or FeatureLayer?");
+        }
+        if (parent instanceof GraphicsLayer) {
+            parent.add(graphic);
+        }
+        /**
+         * If using the Graphic to craft a client-side featurelayer, we push to the FeatureLayer.source property
+         * See https://developers.arcgis.com/javascript/latest/sample-code/layers-featurelayer-collection/
+         */
+        if (parent instanceof FeatureLayer) {
+            if (!parent.source) {
+                parent.source = new Collection();
+            }
+            parent.source.add(graphic);
+        }
+        return graphic;
+    }, []);
+    /**
+     * Remove the graphic from the GraphicsLayer or FeatureLayer on unmount
+     */
+    useEffect(() => {
+        return () => {
+            if (parent instanceof GraphicsLayer) {
+                parent.remove(instance);
+            }
+            if (parent instanceof FeatureLayer) {
+                parent.source.remove(instance);
+            }
+        };
+    }, []);
+    useImperativeHandle(ref, () => instance);
+    useEsriPropertyUpdates(instance, properties);
+    // If no children, there is no need to render a context provider
+    if (!children)
+        return null;
+    return (_jsx(GraphicContext.Provider, { value: instance, children: children }));
+});

package/dist/core/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Graphic";
+export * from "./renderers";
+export * from "./symbols";

package/dist/core/index.js

@@ -0,0 +1,3 @@
+export * from "./Graphic";
+export * from "./renderers";
+export * from "./symbols";

package/dist/core/renderers/Renderer.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import EsriRenderer from "@arcgis/core/renderers/Renderer";
+/**
+ * A generic Renderer component
+ *
+ * ArcGIS JS API Source Components:
+ * - [Renderer](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-Renderer.html)
+ */
+export declare const Renderer: React.ForwardRefExoticComponent<__esri.RendererProperties & {
+    children?: React.ReactNode;
+} & React.RefAttributes<EsriRenderer>>;

package/dist/core/renderers/Renderer.js

@@ -0,0 +1,11 @@
+import React from "react";
+import EsriRenderer from "@arcgis/core/renderers/Renderer";
+import { createRendererComponent, } from "./createRendererComponent";
+const createRenderer = (properties) => new EsriRenderer(properties);
+/**
+ * A generic Renderer component
+ *
+ * ArcGIS JS API Source Components:
+ * - [Renderer](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-Renderer.html)
+ */
+export const Renderer = React.forwardRef((properties, ref) => createRendererComponent(createRenderer, ref, properties));

package/dist/core/renderers/SimpleRenderer.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+/**
+ * A SimpleRenderer component.  Use as a descendant of any esri component that can use a SimpleRenderer
+ * and the renderer will be applied
+ *
+ * ArcGIS JS API Source Components:
+ * - [SimpleRenderer](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-SimpleRenderer.html)
+ */
+export declare const SimpleRenderer: React.ForwardRefExoticComponent<__esri.SimpleRendererProperties & {
+    children?: React.ReactNode;
+} & React.RefAttributes<__esri.UniqueValueRenderer>>;

package/dist/core/renderers/SimpleRenderer.js

@@ -0,0 +1,12 @@
+import React from "react";
+import EsriSimpleRenderer from "@arcgis/core/renderers/SimpleRenderer";
+import { createRendererComponent, } from "./createRendererComponent";
+const createSimpleRenderer = (properties) => new EsriSimpleRenderer(properties);
+/**
+ * A SimpleRenderer component.  Use as a descendant of any esri component that can use a SimpleRenderer
+ * and the renderer will be applied
+ *
+ * ArcGIS JS API Source Components:
+ * - [SimpleRenderer](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-SimpleRenderer.html)
+ */
+export const SimpleRenderer = React.forwardRef((properties, ref) => createRendererComponent(createSimpleRenderer, ref, properties));

package/dist/core/renderers/UniqueValueRenderer.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import EsriUniqueValueRenderer from "@arcgis/core/renderers/UniqueValueRenderer";
+/**
+ * A UniqueValueRenderer component.  Use as a descendant of any esri component that can use a UniqueValueRenderer
+ * and the renderer will be applied
+ *
+ * ArcGIS JS API Source Components:
+ * - [UniqueValueRenderer](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-UniqueValueRenderer.html)
+ */
+export declare const UniqueValueRenderer: React.ForwardRefExoticComponent<__esri.UniqueValueRendererProperties & {
+    children?: React.ReactNode;
+} & React.RefAttributes<EsriUniqueValueRenderer>>;

package/dist/core/renderers/UniqueValueRenderer.js

@@ -0,0 +1,12 @@
+import React from "react";
+import EsriUniqueValueRenderer from "@arcgis/core/renderers/UniqueValueRenderer";
+import { createRendererComponent, } from "./createRendererComponent";
+const createUniqueValueRenderer = (properties) => new EsriUniqueValueRenderer(properties);
+/**
+ * A UniqueValueRenderer component.  Use as a descendant of any esri component that can use a UniqueValueRenderer
+ * and the renderer will be applied
+ *
+ * ArcGIS JS API Source Components:
+ * - [UniqueValueRenderer](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-UniqueValueRenderer.html)
+ */
+export const UniqueValueRenderer = React.forwardRef((properties, ref) => createRendererComponent(createUniqueValueRenderer, ref, properties));

package/dist/core/renderers/createRendererComponent.d.ts

@@ -0,0 +1,13 @@
+import React, { Ref } from "react";
+/**
+ * The react context object that any layer component creates when rendered
+ * and makes available to its descendants
+ */
+export declare const RendererContext: React.Context<__esri.Renderer>;
+export type RendererProps<T extends __esri.RendererProperties = __esri.RendererProperties> = React.PropsWithChildren<T>;
+/**
+ * Function that takes in renderer properties and returns an esri Renderer instance. Properties must be
+ * any esri properties that extend esri.LayerProperties, and optional children
+ */
+export type CreateRendererFunction<T extends RendererProps> = (properties: T) => __esri.Renderer;
+export declare const createRendererComponent: (createRenderer: CreateRendererFunction<RendererProps>, ref: Ref<__esri.Renderer>, { children, ...properties }: RendererProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/core/renderers/createRendererComponent.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useImperativeHandle, useMemo, } from "react";
+import FeatureLayer from "@arcgis/core/layers/FeatureLayer";
+import SceneLayer from "@arcgis/core/layers/SceneLayer";
+import Sublayer from "@arcgis/core/layers/support/Sublayer";
+import CSVLayer from "@arcgis/core/layers/CSVLayer";
+import GeoJSONLayer from "@arcgis/core/layers/GeoJSONLayer";
+import OGCFeatureLayer from "@arcgis/core/layers/OGCFeatureLayer";
+import StreamLayer from "@arcgis/core/layers/StreamLayer";
+import WFSLayer from "@arcgis/core/layers/WFSLayer";
+import { LayerContext } from "../../layers";
+import { useEsriPropertyUpdates } from "../../utils";
+/**
+ * The react context object that any layer component creates when rendered
+ * and makes available to its descendants
+ */
+export const RendererContext = createContext({});
+export const createRendererComponent = (createRenderer, ref, { children, ...properties }) => {
+    const parent = useContext(LayerContext);
+    const defaultRenderer = parent.renderer;
+    const instance = useMemo(() => {
+        const renderer = createRenderer(properties);
+        if (parent instanceof FeatureLayer ||
+            parent instanceof SceneLayer ||
+            parent instanceof Sublayer ||
+            parent instanceof CSVLayer ||
+            parent instanceof GeoJSONLayer ||
+            parent instanceof OGCFeatureLayer ||
+            parent instanceof StreamLayer ||
+            parent instanceof WFSLayer) {
+            parent.renderer = renderer;
+        }
+        else {
+            // Allow this because it only happens in development and is helpful for devs
+            // eslint-disable-next-line
+            console.error("You are trying to use a <Renderer /> component as the descendant of a component that does not take an ESRI renderer.");
+        }
+        return renderer;
+    }, []);
+    useImperativeHandle(ref, () => instance);
+    useEsriPropertyUpdates(instance, properties);
+    /**
+     * Set the renderer of the parent layer back to its initial default on unmount
+     */
+    useEffect(() => {
+        return () => {
+            if (parent instanceof FeatureLayer ||
+                parent instanceof SceneLayer ||
+                parent instanceof Sublayer ||
+                parent instanceof CSVLayer ||
+                parent instanceof GeoJSONLayer ||
+                parent instanceof OGCFeatureLayer ||
+                parent instanceof StreamLayer ||
+                parent instanceof WFSLayer) {
+                parent.renderer = defaultRenderer;
+            }
+        };
+    }, []);
+    // If no children, there is no need to render a context provider
+    if (!children)
+        return null;
+    return (_jsx(RendererContext.Provider, { value: instance, children: children }));
+};

package/dist/core/renderers/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./createRendererComponent";
+export * from "./Renderer";
+export * from "./SimpleRenderer";
+export * from "./UniqueValueRenderer";

package/dist/core/renderers/index.js

@@ -0,0 +1,4 @@
+export * from "./createRendererComponent";
+export * from "./Renderer";
+export * from "./SimpleRenderer";
+export * from "./UniqueValueRenderer";

package/dist/core/symbols/PictureMarkerSymbol.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import EsriPictureMarkerSymbol from "@arcgis/core/symbols/PictureMarkerSymbol.js";
+/**
+ * A PictureMarkerSymbol component, must be rendered as a child of a Renderer component or Graphic component
+ *
+ * ArcGIS JS API Source Components:
+ * - [PictureMarkerSymbol](https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-PictureMarkerSymbol.html)
+ */
+export declare const PictureMarkerSymbol: React.ForwardRefExoticComponent<__esri.PictureMarkerSymbolProperties & React.RefAttributes<EsriPictureMarkerSymbol>>;

package/dist/core/symbols/PictureMarkerSymbol.js

@@ -0,0 +1,43 @@
+import React, { useContext, useImperativeHandle, useMemo } from "react";
+import EsriPictureMarkerSymbol from "@arcgis/core/symbols/PictureMarkerSymbol.js";
+import Graphic from "@arcgis/core/Graphic";
+import Renderer from "@arcgis/core/renderers/Renderer";
+import { GraphicContext } from "../Graphic";
+import { useEsriPropertyUpdates } from "../../utils";
+import { RendererContext } from "../renderers";
+/**
+ * A PictureMarkerSymbol component, must be rendered as a child of a Renderer component or Graphic component
+ *
+ * ArcGIS JS API Source Components:
+ * - [PictureMarkerSymbol](https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-PictureMarkerSymbol.html)
+ */
+export const PictureMarkerSymbol = React.forwardRef((properties, ref) => {
+    const parentGraphic = useContext(GraphicContext);
+    const parentRenderer = useContext(RendererContext);
+    /**
+     * Create instance only on first mount
+     */
+    const instance = useMemo(() => {
+        const symbol = new EsriPictureMarkerSymbol(properties);
+        if (!(parentGraphic instanceof Graphic) &&
+            !(parentRenderer instanceof Renderer)) {
+            // Allow this because it only happens in development and is helpful for devs
+            // eslint-disable-next-line
+            console.error("You are trying to render a PictureMarkerSymbol component that is not a descendant of a Graphic or Renderer.", "Did you forget to wrap your PictureMarkerSymbol in a Graphic or Renderer?");
+            return;
+        }
+        if (parentRenderer) {
+            // @ts-expect-error allow this for renderers that do take a symbol
+            parentRenderer.symbol = symbol;
+            return symbol;
+        }
+        if (parentGraphic) {
+            parentGraphic.symbol = symbol;
+            return symbol;
+        }
+        return symbol;
+    }, []);
+    useImperativeHandle(ref, () => instance);
+    useEsriPropertyUpdates(instance, properties);
+    return null;
+});

package/dist/core/symbols/SimpleFillSymbol.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import EsriSimpleFillSymbol from "@arcgis/core/symbols/SimpleFillSymbol";
+/**
+ * A SimpleFillSymbol component, must be rendered as a child of a Renderer component or Graphic component
+ *
+ * ArcGIS JS API Source Components:
+ * - [SimpleFillSymbol](https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleFillSymbol.html)
+ */
+export declare const SimpleFillSymbol: React.ForwardRefExoticComponent<__esri.SimpleFillSymbolProperties & React.RefAttributes<EsriSimpleFillSymbol>>;