Merge pull request #548 from Esri/update-component-react-angular-19

chore(map and coding components): update react samples to use v19
Esri · Jan 8, 2025 · 6f972b6 · 6f972b6
2 parents 772d4b2 + 43de312
commit 6f972b6
Show file tree

Hide file tree

Showing 46 changed files with 88 additions and 93 deletions.
diff --git a/component-samples/coding-components/samples/angular/package.json b/component-samples/coding-components/samples/angular/package.json
@@ -10,25 +10,25 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.2.0",
-    "@angular/common": "^18.2.0",
-    "@angular/compiler": "^18.2.0",
-    "@angular/core": "^18.2.0",
-    "@angular/forms": "^18.2.0",
-    "@angular/platform-browser": "^18.2.0",
-    "@angular/platform-browser-dynamic": "^18.2.0",
-    "@angular/router": "^18.2.0",
+    "@angular/animations": "^19.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/forms": "^19.0.0",
+    "@angular/platform-browser": "^19.0.0",
+    "@angular/platform-browser-dynamic": "^19.0.0",
+    "@angular/router": "^19.0.0",
     "@arcgis/coding-components": "~4.31.0",
     "@arcgis/core": "~4.31.0",
     "@esri/calcite-components-angular": "^2.13.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.14.10"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.0",
-    "@angular/cli": "^18.2.0",
-    "@angular/compiler-cli": "^18.2.0",
+    "@angular-devkit/build-angular": "^19.0.5",
+    "@angular/cli": "^19.0.5",
+    "@angular/compiler-cli": "^19.0.0",
     "@types/jasmine": "~5.1.0",
     "@types/sortablejs": "^1.15.5",
     "jasmine-core": "~5.2.0",
@@ -37,6 +37,6 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.5.2"
+    "typescript": "~5.6.2"
   }
 }
diff --git a/component-samples/coding-components/samples/angular/src/app/app.component.ts b/component-samples/coding-components/samples/angular/src/app/app.component.ts
@@ -1,6 +1,5 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit } from "@angular/core";
 import { CommonModule } from "@angular/common";
-import { RouterOutlet } from "@angular/router";
 import { loadData } from "../functions/load-data.service";
 import { IEditorProfileDefinition, IPredefinedProfile } from "@arcgis/coding-components/dist/types/utils/profile/types";
 import { IEditorTestContext } from "@arcgis/coding-components/dist/types/utils/arcade-executor";
@@ -14,7 +13,7 @@ import "@arcgis/coding-components/dist/components/arcgis-arcade-editor";
 @Component({
   selector: "app-root",
   standalone: true,
-  imports: [RouterOutlet, CommonModule],
+  imports: [CommonModule],
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],

diff --git a/component-samples/coding-components/samples/react/index.html b/component-samples/coding-components/samples/react/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

diff --git a/component-samples/coding-components/samples/react/package.json b/component-samples/coding-components/samples/react/package.json
@@ -8,18 +8,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@arcgis/coding-components-react": "~4.31.0",
     "@arcgis/core": "~4.31.0",
-    "@esri/calcite-components-react": "^2.13.2",
-    "react": "^18.3.0",
-    "react-dom": "^18.3.0"
+    "@arcgis/coding-components": "~4.31.0",
+    "@esri/calcite-components": "^2.13.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.0",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.2.1",
-    "typescript": "~5.4.5",
-    "vite": "^5.1.3"
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^6.0.3"
   },
   "browserslist": {
     "production": [

diff --git a/component-samples/coding-components/samples/react/src/components/ArcadeEditor.jsx b/component-samples/coding-components/samples/react/src/components/ArcadeEditor.jsx
@@ -1,41 +1,49 @@
-import { useEffect, useCallback, useState } from "react";
+import { useEffect, useState } from "react";
 
-// Import React components of the components used in this sample
-import { ArcgisArcadeEditor } from "@arcgis/coding-components-react";
-import { CalciteScrim } from "@esri/calcite-components-react";
+// 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 { loadData } from "../functions/load-data";
-
 import "./ArcadeEditor.css";
 
-export default function ArcadeEditor() {
+// Custom Hook to load the data
+function useArcadeEditorData() {
   const [data, setData] = useState(null);
 
-  // useCallback to prevent the function from being recreated when the component rebuilds
-  const initializeTheEditor = useCallback(async () => {
-    const data = await loadData();
-    setData(data);
+  useEffect(() => {
+    const initializeData = async () => {
+      try {
+        const data = await loadData();
+        setData(data);
+      } catch (error) {
+        console.error("Error loading data:", error);
+      }
+    };
+
+    initializeData();
   }, []);
 
-  // Register a function that will execute after the current render cycle
-  useEffect(() => {
-    initializeTheEditor().catch(console.error);
-  }, [initializeTheEditor]);
+  return data;
+}
+
+export default function ArcadeEditor() {
+  const data = useArcadeEditorData();
 
   return (
     <div>
       <div className="editor-wrapper">
         {data ? (
-          <ArcgisArcadeEditor
+          <arcgis-arcade-editor
             // Set the script on the editor
             script="$feature"
             // Log script change events
-            onArcgisScriptChange={async (e) => {
+            onarcgisScriptChange={async (e) => {
               console.log("script:", e.detail);
               // console.log("outputType on script:", await arcadeEditorElt.getOutputType());
             }}
             // Log editor diagnostics
-            onArcgisDiagnosticsChange={async (e) => {
+            onarcgisDiagnosticsChange={async (e) => {
               console.log("diagnostics:", e.detail);
             }}
             // Tells Arcade editor to use the 'popup' profile and provides the necessary data used as
@@ -49,8 +57,8 @@ export default function ArcadeEditor() {
                 $feature: data.featureLayer,
                 $layer: data.featureLayer,
                 $map: data.webMap,
-                $datastore: data.featureLayer
-              }
+                $datastore: data.featureLayer,
+              },
             }}
             // Tells Arcade editor to the following test data. The data provided must match the expected data for the
             // profile used.
@@ -61,12 +69,12 @@ export default function ArcadeEditor() {
                 $feature: data.featureSet.features[0],
                 $layer: data.featureLayer,
                 $map: data.webMap,
-                $datastore: data.featureLayer.url
-              }
+                $datastore: data.featureLayer.url,
+              },
             }}
           />
         ) : (
-          <CalciteScrim loading />
+          <calcite-scrim loading />
         )}
       </div>
     </div>

diff --git a/component-samples/coding-components/samples/react/src/index.jsx b/component-samples/coding-components/samples/react/src/index.jsx
@@ -1,19 +1,15 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
 
 import ArcadeEditor from "./components/ArcadeEditor";
 
-// 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";
-
 // Set the asset path for calcite components
 import { setAssetPath as setCalciteComponentsAssetPath } from '@esri/calcite-components/dist/components';
 setCalciteComponentsAssetPath("https://js.arcgis.com/calcite-components/2.13.2/assets");
 
-const root = ReactDOM.createRoot(document.getElementById("root"));
+const root = createRoot(document.getElementById("root"));
 root.render(
-  <React.StrictMode>
+  <StrictMode>
     <ArcadeEditor />
-  </React.StrictMode>
+  </StrictMode>
 );
diff --git a/component-samples/map-components/samples/angular/package.json b/component-samples/map-components/samples/angular/package.json
@@ -10,31 +10,31 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.2.0",
-    "@angular/common": "^18.2.0",
-    "@angular/compiler": "^18.2.0",
-    "@angular/core": "^18.2.0",
-    "@angular/forms": "^18.2.0",
-    "@angular/platform-browser": "^18.2.0",
-    "@angular/platform-browser-dynamic": "^18.2.0",
-    "@angular/router": "^18.2.0",
-    "@arcgis/core": "~4.31.0",
+    "@angular/animations": "^19.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/forms": "^19.0.0",
+    "@angular/platform-browser": "^19.0.0",
+    "@angular/platform-browser-dynamic": "^19.0.0",
+    "@angular/router": "^19.0.0",
     "@arcgis/map-components": "~4.31.0",
+    "@arcgis/core": "~4.31.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.14.10"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.0",
-    "@angular/cli": "^18.2.0",
-    "@angular/compiler-cli": "^18.2.0",
+    "@angular-devkit/build-angular": "^19.0.5",
+    "@angular/cli": "^19.0.5",
+    "@angular/compiler-cli": "^19.0.0",
     "@types/jasmine": "~5.1.0",
     "jasmine-core": "~5.2.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.5.2"
+    "typescript": "~5.6.2"
   }
 }
diff --git a/component-samples/map-components/samples/angular/src/app/app.component.ts b/component-samples/map-components/samples/angular/src/app/app.component.ts
@@ -1,5 +1,4 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit } from "@angular/core";
-import { RouterOutlet } from "@angular/router";
 
 import { setAssetPath } from "@esri/calcite-components/dist/components";
 setAssetPath("https://js.arcgis.com/calcite-components/2.13.2/assets");
@@ -12,7 +11,6 @@ import "@arcgis/map-components/dist/components/arcgis-legend";
 @Component({
   selector: "app-root",
   standalone: true,
-  imports: [RouterOutlet],
   templateUrl: "./app.component.html",
   styleUrl: "./app.component.css",
   schemas: [CUSTOM_ELEMENTS_SCHEMA],

diff --git a/component-samples/map-components/samples/react/index.html b/component-samples/map-components/samples/react/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

diff --git a/component-samples/map-components/samples/react/package.json b/component-samples/map-components/samples/react/package.json
@@ -9,17 +9,15 @@
   },
   "dependencies": {
     "@arcgis/core": "~4.31.0",
-    "@arcgis/map-components-react": "~4.31.0",
-    "@esri/calcite-components-react": "^2.13.2",
-    "react": "^18.3.0",
-    "react-dom": "^18.3.0"
+    "@arcgis/map-components": "~4.31.0",
+    "@esri/calcite-components": "^2.13.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.0",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.2.1",
-    "typescript": "~5.4.5",
-    "vite": "^5.1.3"
+    "typescript": "~5.6.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^6.0.3"
   },
   "browserslist": {
     "production": [

diff --git a/component-samples/map-components/samples/react/src/index.jsx b/component-samples/map-components/samples/react/src/index.jsx
@@ -1,24 +1,23 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
 import "./index.css";
 
 // Individual imports for each component used in this sample
 import "@arcgis/map-components/dist/components/arcgis-map";
 import "@arcgis/map-components/dist/components/arcgis-legend";
 import "@arcgis/map-components/dist/components/arcgis-search";
-import { ArcgisMap, ArcgisSearch, ArcgisLegend } from "@arcgis/map-components-react";
 
-const root = ReactDOM.createRoot(document.getElementById("root"));
+const root = createRoot(document.getElementById("root"));
 root.render(
-  <React.StrictMode>
-    <ArcgisMap
+  <StrictMode>
+    <arcgis-map
       itemId="d5dda743788a4b0688fe48f43ae7beb9"
-      onArcgisViewReadyChange={(event) => {
+      onarcgisViewReadyChange={(event) => {
         console.log("MapView ready", event);
       }}
     >
-      <ArcgisSearch position="top-right"></ArcgisSearch>
-      <ArcgisLegend position="bottom-left"></ArcgisLegend>
-    </ArcgisMap>
-  </React.StrictMode>
+      <arcgis-search position="top-right"></arcgis-search>
+      <arcgis-legend position="bottom-left"></arcgis-legend>
+    </arcgis-map>
+  </StrictMode>
 );
diff --git a/zips/charts-components-sample-angular.zip b/zips/charts-components-sample-angular.zip
diff --git a/zips/charts-components-sample-cdn.zip b/zips/charts-components-sample-cdn.zip
diff --git a/zips/charts-components-sample-react.zip b/zips/charts-components-sample-react.zip
diff --git a/zips/charts-components-sample-vite.zip b/zips/charts-components-sample-vite.zip
diff --git a/zips/charts-components-sample-vue.zip b/zips/charts-components-sample-vue.zip
diff --git a/zips/charts-components-sample-webpack.zip b/zips/charts-components-sample-webpack.zip
diff --git a/zips/charts-components-tutorial-charts-components-with-map-components-initial.zip b/zips/charts-components-tutorial-charts-components-with-map-components-initial.zip
diff --git a/zips/charts-components-tutorial-charts-components-with-map-components-solution.zip b/zips/charts-components-tutorial-charts-components-with-map-components-solution.zip
diff --git a/zips/coding-components-sample-angular.zip b/zips/coding-components-sample-angular.zip
diff --git a/zips/coding-components-sample-cdn.zip b/zips/coding-components-sample-cdn.zip
diff --git a/zips/coding-components-sample-react.zip b/zips/coding-components-sample-react.zip
diff --git a/zips/coding-components-sample-vite.zip b/zips/coding-components-sample-vite.zip
diff --git a/zips/coding-components-sample-vue.zip b/zips/coding-components-sample-vue.zip
diff --git a/zips/coding-components-sample-webpack.zip b/zips/coding-components-sample-webpack.zip
diff --git a/zips/core-sample-esbuild.zip b/zips/core-sample-esbuild.zip
diff --git a/zips/core-sample-jsapi-angular-cli.zip b/zips/core-sample-jsapi-angular-cli.zip
diff --git a/zips/core-sample-jsapi-custom-ui.zip b/zips/core-sample-jsapi-custom-ui.zip
diff --git a/zips/core-sample-jsapi-custom-workers.zip b/zips/core-sample-jsapi-custom-workers.zip
diff --git a/zips/core-sample-jsapi-deno.zip b/zips/core-sample-jsapi-deno.zip
diff --git a/zips/core-sample-jsapi-esm-cdn.zip b/zips/core-sample-jsapi-esm-cdn.zip
diff --git a/zips/core-sample-jsapi-node.zip b/zips/core-sample-jsapi-node.zip
diff --git a/zips/core-sample-jsapi-oauth.zip b/zips/core-sample-jsapi-oauth.zip
diff --git a/zips/core-sample-jsapi-react.zip b/zips/core-sample-jsapi-react.zip
diff --git a/zips/core-sample-jsapi-vite.zip b/zips/core-sample-jsapi-vite.zip
diff --git a/zips/core-sample-jsapi-vue.zip b/zips/core-sample-jsapi-vue.zip
diff --git a/zips/core-sample-rollup.zip b/zips/core-sample-rollup.zip
diff --git a/zips/core-sample-webpack.zip b/zips/core-sample-webpack.zip
diff --git a/zips/map-component-sample-angular.zip b/zips/map-component-sample-angular.zip
diff --git a/zips/map-component-sample-cdn.zip b/zips/map-component-sample-cdn.zip
diff --git a/zips/map-component-sample-react.zip b/zips/map-component-sample-react.zip
diff --git a/zips/map-component-sample-vite.zip b/zips/map-component-sample-vite.zip
diff --git a/zips/map-component-sample-vue.zip b/zips/map-component-sample-vue.zip
diff --git a/zips/map-component-sample-webpack.zip b/zips/map-component-sample-webpack.zip
diff --git a/zips/map-components-tutorial-create-a-web-app-using-components-initial.zip b/zips/map-components-tutorial-create-a-web-app-using-components-initial.zip
diff --git a/zips/map-components-tutorial-create-a-web-app-using-components-solution.zip b/zips/map-components-tutorial-create-a-web-app-using-components-solution.zip