Updates for observables in Web 5.37.0 (#140)

scottander · sandersonatlatitude · web-flow · commit 9412e9e53b57 · 2025-08-19T09:03:31.000-07:00
* updates

* fix errors

* revert lock

* try again

---------

Co-authored-by: Scott Anderson &lt;sanderson@latitudegeo.com&gt;
diff --git a/samples/arcade-editor/package.json b/samples/arcade-editor/package.json
@@ -7,11 +7,11 @@
         "start": "vertigis-web-sdk start"
     },
     "dependencies": {
-        "@arcgis/coding-components-react": "4.30.7",
-        "@esri/calcite-components-react": "2.12.0"
+        "@arcgis/coding-components-react": "4.33.14",
+        "@esri/calcite-components-react": "3.2.1"
     },
     "devDependencies": {
-        "@vertigis/web": "~5.33.0",
+        "@vertigis/web": "^5.37.0",
         "@vertigis/web-sdk": "~1.11.0",
         "typescript": "~5.3.3"
     }
diff --git a/samples/arcade-editor/src/components/ArcadeEditor/ArcadeEditor.tsx b/samples/arcade-editor/src/components/ArcadeEditor/ArcadeEditor.tsx
@@ -1,4 +1,4 @@
-import { ArcgisArcadeEditor } from "@arcgis/coding-components-react";
+import { ArcgisArcadeEditor } from "@arcgis/coding-components-react/dist/components";
 import type { LayoutElementProperties } from "@vertigis/web/components";
 import { LayoutElement } from "@vertigis/web/components";
 import { useWatchAndRerender } from "@vertigis/web/ui";
diff --git a/samples/arcade-editor/src/components/ArcadeEditor/ArcadeEditorModel.ts b/samples/arcade-editor/src/components/ArcadeEditor/ArcadeEditorModel.ts
@@ -28,12 +28,21 @@ interface ArcadeEditorModelProperties extends ComponentModelProperties {
 @serializable
 export default class ArcadeEditorModel extends ComponentModelBase<ArcadeEditorModelProperties> {
     @importModel("map-extension")
-    map: MapModel;
+    get map(): MapModel {
+        return this._map;
+    }
+    set map(value: MapModel) {
+        this._map = value;
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        this._onMapChanged();
+    }
 
     data: ArcadeEditorData;
     layerName: string;
     featureLayer: __esri.FeatureLayer;
 
+    private _map: MapModel;
+
     constructor(props: ArcadeEditorModelProperties) {
         super(props);
         this.layerName = props.layerName;
@@ -58,22 +67,22 @@ export default class ArcadeEditorModel extends ComponentModelBase<ArcadeEditorMo
         };
     }
 
-    protected override async _onInitialize(): Promise<void> {
-        const watchHandle = this.watch("map", async () => {
-            if (!this.map) {
-                return undefined;
-            }
-            const extension = toLayerExtension(this.layerName, this.map);
-            if (
-                isLayerExtension(extension) &&
-                (extension as FeatureLayerExtension).layer.type === "feature"
-            ) {
-                this.featureLayer = (extension as FeatureLayerExtension).layer;
-            }
-            watchHandle.remove();
-            await this.messages
-                .command<HasFeatures>("arcade-editor.load-data")
-                .execute({ features: [] });
-        });
+    protected async _onMapChanged(): Promise<void> {
+        if (!this.map) {
+            return undefined;
+        }
+
+        const extension = toLayerExtension(this.layerName, this.map);
+
+        if (
+            isLayerExtension(extension) &&
+            (extension as FeatureLayerExtension).layer.type === "feature"
+        ) {
+            this.featureLayer = (extension as FeatureLayerExtension).layer;
+        }
+
+        await this.messages
+            .command<HasFeatures>("arcade-editor.load-data")
+            .execute({ features: [] });
     }
 }
diff --git a/samples/arcade-editor/src/index.ts b/samples/arcade-editor/src/index.ts
@@ -1,12 +1,12 @@
-import { setAssetPath as setCalciteComponentsAssetPath } from "@esri/calcite-components/dist/components";
+import { setAssetPath as setCalciteComponentsAssetPath } from "@esri/calcite-components";
 import type { LibraryRegistry } from "@vertigis/web/config";
 
 import ArcadeEditor from "./components/ArcadeEditor";
 import ArcadeEditorModel from "./components/ArcadeEditor/ArcadeEditorModel";
 
 // Individual imports for each component used in this sample
-import "@arcgis/coding-components/dist/components/arcgis-arcade-editor";
-import "@esri/calcite-components/dist/components/calcite-scrim";
+import "@arcgis/coding-components/components/arcgis-arcade-editor";
+import "@esri/calcite-components/components/calcite-scrim";
 
 // Set the asset path for calcite components
 setCalciteComponentsAssetPath(
diff --git a/samples/arcgis-widget/package.json b/samples/arcgis-widget/package.json
@@ -8,7 +8,7 @@
         "start-in-sandbox": "SOCK_PORT=443 vertigis-web-sdk start"
     },
     "devDependencies": {
-        "@vertigis/web": "~5.33.0",
+        "@vertigis/web": "^5.37.0",
         "@vertigis/web-sdk": "~1.11.0",
         "typescript": "~5.3.3"
     }
diff --git a/samples/arcgis-widget/src/components/Daylight/Daylight.tsx b/samples/arcgis-widget/src/components/Daylight/Daylight.tsx
@@ -34,7 +34,7 @@ const Daylight = (props: DaylightWidgetProps): ReactElement => {
     useWatchAndRerender(props.model, "dateOrSeason");
     useWatch(props.model, "dateOrSeason", (newValue) => {
         if (widget) {
-            widget.dateOrSeason = newValue as "date" | "season";
+            widget.dateOrSeason = newValue;
         }
     });
 
diff --git a/samples/basic-component/package.json b/samples/basic-component/package.json
@@ -8,7 +8,7 @@
         "start-in-sandbox": "SOCK_PORT=443 vertigis-web-sdk start"
     },
     "devDependencies": {
-        "@vertigis/web": "~5.33.0",
+        "@vertigis/web": "^5.37.0",
         "@vertigis/web-sdk": "~1.11.0",
         "typescript": "~5.3.3"
     }
diff --git a/samples/basic-service/package.json b/samples/basic-service/package.json
@@ -8,7 +8,7 @@
         "start-in-sandbox": "SOCK_PORT=443 vertigis-web-sdk start"
     },
     "devDependencies": {
-        "@vertigis/web": "~5.33.0",
+        "@vertigis/web": "^5.37.0",
         "@vertigis/web-sdk": "~1.11.0",
         "typescript": "~5.3.3"
     }
diff --git a/samples/commands-and-operations/package.json b/samples/commands-and-operations/package.json
@@ -8,7 +8,7 @@
         "start-in-sandbox": "SOCK_PORT=443 vertigis-web-sdk start"
     },
     "devDependencies": {
-        "@vertigis/web": "~5.33.0",
+        "@vertigis/web": "^5.37.0",
         "@vertigis/web-sdk": "~1.11.0",
         "typescript": "~5.3.3"
     }
diff --git a/samples/embedded-map/package.json b/samples/embedded-map/package.json
@@ -12,7 +12,7 @@
         "mapillary-js": "^4.0.0"
     },
     "devDependencies": {
-        "@vertigis/web": "~5.33.0",
+        "@vertigis/web": "^5.37.0",
         "@vertigis/web-sdk": "~1.11.0",
         "typescript": "~5.3.3"
     }
diff --git a/samples/i18n/package.json b/samples/i18n/package.json
@@ -8,7 +8,7 @@
         "start-in-sandbox": "SOCK_PORT=443 vertigis-web-sdk start"
     },
     "devDependencies": {
-        "@vertigis/web": "~5.33.0",
+        "@vertigis/web": "^5.37.0",
         "@vertigis/web-sdk": "~1.11.0",
         "typescript": "~5.3.3"
     }
diff --git a/samples/icons-pack/package.json b/samples/icons-pack/package.json
@@ -16,7 +16,7 @@
         "@svgr/core": "^6.5.1",
         "@svgr/plugin-jsx": "^6.5.1",
         "@svgr/plugin-svgo": "^6.5.1",
-        "@vertigis/web": "~5.33.0",
+        "@vertigis/web": "^5.37.0",
         "@vertigis/web-sdk": "~1.11.0",
         "tsx": "4.7.2",
         "typescript": "~5.3.3"
diff --git a/samples/icons-pack/pipeline/utilities.mts b/samples/icons-pack/pipeline/utilities.mts
@@ -1,6 +1,5 @@
 import * as fs from "fs";
 import * as path from "path";
-
 import svgr from "@svgr/core";
 
 export const createSvgIcon = (
@@ -51,10 +50,10 @@ export function pascalToKebabCase(str: string): string {
     );
 }
 
-const snakeToPascal = (string) => string
+const snakeToPascal = (string: string) => string
         .replace(".svg", "")
         .split(/-|_/)
         .map((str) => upperFirst(str.split("/").map(upperFirst).join("/")))
         .join("");
 
-const upperFirst = (string) => string.slice(0, 1).toUpperCase() + string.slice(1, string.length);
+const upperFirst = (string: string) => string.slice(0, 1).toUpperCase() + string.slice(1, string.length);
diff --git a/samples/icons-pack/src/components/IconList/IconList.tsx b/samples/icons-pack/src/components/IconList/IconList.tsx
@@ -5,7 +5,7 @@ import Box from "@vertigis/web/ui/Box";
 import Checkbox from "@vertigis/web/ui/Checkbox";
 import FormControlLabel from "@vertigis/web/ui/FormControlLabel";
 import List from "@vertigis/web/ui/List";
-import ListItem from "@vertigis/web/ui/ListItem";
+import ListItemButton from "@vertigis/web/ui/ListItemButton";
 import ListItemIcon from "@vertigis/web/ui/ListItemIcon";
 import Stack from "@vertigis/web/ui/Stack";
 import Typography from "@vertigis/web/ui/Typography";
@@ -50,17 +50,17 @@ export default function IconList(
                                 .map((icon) => {
                                     const Icon = getIcon(icon);
                                     return (
-                                        <ListItem
+                                        <ListItemButton
                                             sx={{ cursor: "pointer" }}
                                             key={`icon-${icon}`}
-                                            selected={icon === currentIcon}
                                             onClick={() => setCurrentIcon(icon)}
+                                            selected={icon === currentIcon}
                                         >
                                             <ListItemIcon>
                                                 <Icon />
                                             </ListItemIcon>
                                             {icon}
-                                        </ListItem>
+                                        </ListItemButton>
                                     );
                                 })}
                         </List>
diff --git a/samples/iframe/package.json b/samples/iframe/package.json
@@ -8,7 +8,7 @@
         "start-in-sandbox": "SOCK_PORT=443 vertigis-web-sdk start"
     },
     "devDependencies": {
-        "@vertigis/web": "~5.33.0",
+        "@vertigis/web": "^5.37.0",
         "@vertigis/web-sdk": "~1.11.0",
         "cross-env": "^7.0.2",
         "typescript": "~5.3.3"
diff --git a/samples/library-viewer/src/components/LibraryViewer/LibraryViewer.tsx b/samples/library-viewer/src/components/LibraryViewer/LibraryViewer.tsx
@@ -20,7 +20,6 @@ const LibraryViewer: FC<LibraryViewerProps> = ({
     ...layoutProps
 }) => {
     const { selectedLibrary, codeSandboxUrl, hostPage } = model;
-    useWatchAndRerender(model, "libraryUrl");
     useWatchAndRerender(model, "hostPage");
 
     return (
diff --git a/samples/tap-into-web-event/package.json b/samples/tap-into-web-event/package.json
@@ -8,7 +8,7 @@
         "start-in-sandbox": "SOCK_PORT=443 vertigis-web-sdk start"
     },
     "devDependencies": {
-        "@vertigis/web": "~5.33.0",
+        "@vertigis/web": "^5.37.0",
         "@vertigis/web-sdk": "~1.11.0",
         "typescript": "~5.3.3"
     }
diff --git a/samples/third-party-lib/package.json b/samples/third-party-lib/package.json
@@ -8,10 +8,11 @@
         "start-in-sandbox": "SOCK_PORT=443 vertigis-web-sdk start"
     },
     "dependencies": {
-        "@vertigis/web": "~5.33.0",
+        "@vertigis/web": "~5.37.0",
         "react-force-graph-3d": "^1.24.3"
     },
     "devDependencies": {
+        "@vertigis/web": "^5.37.0",
         "@vertigis/web-sdk": "~1.11.0",
         "typescript": "~5.3.3"
     }
diff --git a/samples/third-party-lib/src/components/ThreeDimensionalGraph/ThreeDimensionalGraphModel.ts b/samples/third-party-lib/src/components/ThreeDimensionalGraph/ThreeDimensionalGraphModel.ts
@@ -4,8 +4,8 @@ import type { TableExtension } from "@vertigis/arcgis-extensions/data/TableExten
 import type { LayerExtension } from "@vertigis/arcgis-extensions/mapping/LayerExtension";
 import { QueryService } from "@vertigis/arcgis-extensions/tasks/query/QueryService";
 import type { BrandingService } from "@vertigis/web/branding/BrandingService";
-import type { Features } from "@vertigis/web/messaging";
-import { command } from "@vertigis/web/messaging";
+import { type Features, command } from "@vertigis/web/messaging";
+import { toFeatureArray } from "@vertigis/web/messaging/featureConversion";
 import { ComponentModelBase, serializable } from "@vertigis/web/models";
 import type {
     PropertyDefs,
@@ -19,8 +19,6 @@ import type {
     NodeObject as ForceNodeObject,
 } from "react-force-graph-3d";
 
-import { toFeatureArray } from "./utils";
-
 interface ThreeDimensionalGraphModelProperties
     extends ComponentModelProperties {
     hydrantLayerExtension?: LayerExtension;
diff --git a/samples/third-party-lib/src/components/ThreeDimensionalGraph/utils.ts b/samples/third-party-lib/src/components/ThreeDimensionalGraph/utils.ts
diff --git a/samples/ui-library/package.json b/samples/ui-library/package.json
@@ -8,7 +8,7 @@
         "start-in-sandbox": "SOCK_PORT=443 vertigis-web-sdk start"
     },
     "devDependencies": {
-        "@vertigis/web": "~5.33.0",
+        "@vertigis/web": "^5.37.0",
         "@vertigis/web-sdk": "~1.11.0",
         "typescript": "~5.3.3"
     }
diff --git a/samples/ui-library/src/components/UILibraryComponent/Buttons.tsx b/samples/ui-library/src/components/UILibraryComponent/Buttons.tsx
@@ -1,11 +1,11 @@
 import { UIContext } from "@vertigis/web/ui";
 import Button from "@vertigis/web/ui/Button";
-import Stack from "@vertigis/web/ui/Stack";
+import Stack, { type StackProps } from "@vertigis/web/ui/Stack";
 import TrashIcon from "@vertigis/web/ui/icons/Trash";
 import type { ReactElement } from "react";
 import { useContext } from "react";
 
-const ButtonRow = (props) => (
+const ButtonRow = (props: StackProps) => (
     <Stack spacing={1} direction="row" alignItems="center" {...props} />
 );
 
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { ArcgisArcadeEditor } from "@arcgis/coding-components-react";`
	`1`	`+import { ArcgisArcadeEditor } from "@arcgis/coding-components-react/dist/components";`
`2`	`2`	`import type { LayoutElementProperties } from "@vertigis/web/components";`
`3`	`3`	`import { LayoutElement } from "@vertigis/web/components";`
`4`	`4`	`import { useWatchAndRerender } from "@vertigis/web/ui";`
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@`
`8`	`8`	`"start-in-sandbox": "SOCK_PORT=443 vertigis-web-sdk start"`
`9`	`9`	`},`
`10`	`10`	`"devDependencies": {`
`11`		`- "@vertigis/web": "~5.33.0",`
	`11`	`+ "@vertigis/web": "^5.37.0",`
`12`	`12`	`"@vertigis/web-sdk": "~1.11.0",`
`13`	`13`	`"typescript": "~5.3.3"`
`14`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ const Daylight = (props: DaylightWidgetProps): ReactElement => {`
`34`	`34`	`useWatchAndRerender(props.model, "dateOrSeason");`
`35`	`35`	`useWatch(props.model, "dateOrSeason", (newValue) => {`
`36`	`36`	`if (widget) {`
`37`		`- widget.dateOrSeason = newValue as "date" \| "season";`
	`37`	`+ widget.dateOrSeason = newValue;`
`38`	`38`	`}`
`39`	`39`	`});`
`40`	`40`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@`
`12`	`12`	`"mapillary-js": "^4.0.0"`
`13`	`13`	`},`
`14`	`14`	`"devDependencies": {`
`15`		`- "@vertigis/web": "~5.33.0",`
	`15`	`+ "@vertigis/web": "^5.37.0",`
`16`	`16`	`"@vertigis/web-sdk": "~1.11.0",`
`17`	`17`	`"typescript": "~5.3.3"`
`18`	`18`	`}`