chore: update core Angular and React samples to version 19 (#546)

* Angular - bump to v19

* React - bump to v19

* Sync sample with previous version

* Clarify SDK modules

* Update analyze script deps

* ci: analyze core esm sample builds

* ci: add zip files

* ci: analyze core esm sample builds

* ci: add zip files

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.github/scripts/package.json

@@ -1,10 +1,11 @@
 {
   "name": "analysis",
   "description": "Run analysis against ESM samples",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "dependencies": {
     "archiver": "^7.0.1",
-    "express": "^4.19.2",
-    "puppeteer": "^22.12.0"
+    "express": "^4.21.2",
+    "puppeteer": "^23.11.1",
+    "fs-extra": "^11.2.0"
   }
 }

.github/workflows/analyze-builds.yml

@@ -14,6 +14,7 @@ jobs:
           fetch-depth: 0
           ref: ${{ github.event.pull_request.head.ref }}
           token: ${{ secrets.ESM_BUILD }}
+          node-version: 22
       - name: should create zip files
         id: verify
         run: |

core-samples/.metrics/4.31.0.csv

@@ -1,7 +1,7 @@
 Sample,Build size (MB),Build file count,Main bundle file,Main bundle size (MB),Main bundle gzipped size (MB),Main bundle brotli compressed size (MB),Load time (ms),Total runtime (ms),Loaded size (MB),Total JS requests,Total JS size (MB),Total HTTP requests,JS heap size (MB)
-esbuild 0.24.0,9.58,798,index.js,0.28,0.07,0.06,6115,19543,5.46,434,3.86,535,24.52
-Angular 18.2.10,9.85,800,chunk-GP3VH4KH.js,0.69,0.20,0.17,5701,19137,5.70,435,4.08,540,33.55
-React 18.3.1,9.36,482,index-C485BtYY.js,1.58,0.45,0.37,5213,18589,5.55,179,3.95,283,36.52
-Vue 3.5.12,9.28,482,index-B_i9zCQu.js,1.50,0.43,0.35,5699,18722,5.48,179,3.87,284,26.58
-Rollup 4.24.4,9.04,481,main.js,1.40,0.39,0.31,6483,19509,5.31,179,3.71,282,28.23
-Webpack 5.96.1,10.76,325,index.js,1.52,0.42,0.33,5207,18621,5.80,72,4.20,176,26.69
+esbuild 0.24.0,9.58,798,index.js,0.28,0.07,0.06,6953,20013,5.41,434,3.86,538,34.33
+Angular 19.0.0,9.86,800,chunk-SLSDEE2Z.js,0.69,0.20,0.17,6230,19282,5.65,435,4.09,539,36.34
+React 19.0.0,9.41,483,index-C4gj0zIp.js,1.63,0.47,0.38,6011,19293,5.54,179,4.00,283,30.11
+Vue 3.5.12,9.28,482,index-T2jHENPi.js,1.50,0.43,0.35,6222,19254,5.42,179,3.87,284,26.71
+Rollup 4.24.4,9.04,481,main.js,1.40,0.39,0.31,5850,18891,5.25,179,3.71,282,38.28
+Webpack 5.96.1,10.80,325,index.js,1.52,0.42,0.33,5990,19014,5.76,72,4.22,176,26.16

core-samples/jsapi-angular-cli/.editorconfig

@@ -10,6 +10,7 @@ trim_trailing_whitespace = true
 
 [*.ts]
 quote_type = single
+ij_typescript_use_double_quotes = false
 
 [*.md]
 max_line_length = off

core-samples/jsapi-angular-cli/.gitignore

@@ -1,4 +1,4 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
 
 # Compiled output
 /dist

core-samples/jsapi-angular-cli/README.md

@@ -11,7 +11,11 @@ Run `npm install` and then start adding functionality.
 For a list of all available `npm` commands see `scripts` in `package.json`, e.g. `npm run build`.
 
 ## Known issues
-* When deploying Angular 18 apps into production environments, it is recommended to ensure your webserver environment is using [HTTP/2](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP#http2_%E2%80%93_a_protocol_for_greater_performance). This is due to esbuild [code splitting](https://esbuild.github.io/api/#splitting).
+* If you encounter the error message `TS1203: Export assignment cannot be used when targeting ECMAScript modules` on an SDK module, one temporary workaround is to set `skipLibCheck` to `true`. This setting will reduce type-system accuracy. More information is available here: https://www.typescriptlang.org/tsconfig/#skipLibCheck. 
+
+* When deploying Angular 19 apps into production environments, it is recommended to ensure your webserver environment is using [HTTP/2](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP#http2_%E2%80%93_a_protocol_for_greater_performance). This is due to esbuild [code splitting](https://esbuild.github.io/api/#splitting).
+
+* The compile warning `The glob pattern import("./**/*.entry.js*") did not match any files [empty-glob]` is a known issue with Stencil and it can be ignored.
 
 * It is recommended to update to zone.js `0.14.5` or later. Earlier versions of zone.js will cause some of the SDK's widget buttons to not work correctly due to an [Angular bug](https://github.com/angular/angular/issues/54581) affecting `.on*` event listeners. If you are unable to update zone.js, a potential workaround is to disable monkey patching of DOM `click` event. Make the following updates and be sure to test thoroughly for unexpected side effects.
 

core-samples/jsapi-angular-cli/angular.json

@@ -16,13 +16,15 @@
             "outputPath": "dist/",
             "index": "src/index.html",
             "browser": "src/main.ts",
-            "polyfills": [     
+            "polyfills": [
               "zone.js"
             ],
             "tsConfig": "tsconfig.app.json",
             "assets": [
-              "src/favicon.ico",
-              "src/assets"
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
             ],
             "styles": [
               "src/styles.css"
@@ -34,13 +36,13 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
+                  "maximumWarning": "2MB",
+                  "maximumError": "5MB"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
                 }
               ],
               "outputHashing": "all"

core-samples/jsapi-angular-cli/package.json

@@ -10,30 +10,30 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.2.10",
-    "@angular/common": "^18.2.10",
-    "@angular/compiler": "^18.2.10",
-    "@angular/core": "^18.2.10",
-    "@angular/forms": "^18.2.10",
-    "@angular/platform-browser": "^18.2.10",
-    "@angular/platform-browser-dynamic": "^18.2.10",
-    "@angular/router": "^18.2.10",
+    "@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/core": "~4.31.0",
     "rxjs": "~7.8.1",
     "tslib": "^2.8.1",
-    "zone.js": "~0.14.0"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.11",
-    "@angular/cli": "^18.2.11",
-    "@angular/compiler-cli": "^18.2.10",
+    "@angular-devkit/build-angular": "^19.0.5",
+    "@angular/cli": "^19.0.5",
+    "@angular/compiler-cli": "^19.0.0",
     "@types/jasmine": "~5.1.4",
     "jasmine-core": "~5.4.0",
     "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.4.2"
+    "typescript": "~5.6.2"
   }
 }

core-samples/jsapi-angular-cli/src/app/app.component.css

@@ -1,10 +1,12 @@
 @import url('https://js.arcgis.com/4.31/@arcgis/core/assets/esri/themes/light/main.css');
+
 .esri-view {
   padding: 0;
   margin: 0;
   height: 100%;
   width: 100%;
 }
+
 #mapViewNode {
   padding: 0;
   margin: 0;

core-samples/jsapi-angular-cli/src/app/app.component.html

@@ -1,2 +1,2 @@
 <!-- Map Div -->
-<div #mapViewNode></div>
+<div #mapViewNode></div>

core-samples/jsapi-angular-cli/src/app/app.component.spec.ts

@@ -2,7 +2,7 @@ import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(async () => {        
+  beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [AppComponent],
     }).compileComponents();

core-samples/jsapi-angular-cli/src/app/app.component.ts

@@ -5,7 +5,6 @@ import {
   ElementRef,
   OnDestroy,
 } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
 
 import WebMap from '@arcgis/core/WebMap';
 import MapView from '@arcgis/core/views/MapView';
@@ -15,7 +14,6 @@ import Expand from '@arcgis/core/widgets/Expand';
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet],
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })

core-samples/jsapi-angular-cli/src/app/app.config.ts

@@ -1,5 +1,4 @@
-import { ApplicationConfig } from '@angular/core';
-import { provideZoneChangeDetection } from '@angular/core';
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';

core-samples/jsapi-angular-cli/src/styles.css

@@ -5,4 +5,4 @@ body {
   margin: 0;
   height: 100%;
   width: 100%;
-}
+}

core-samples/jsapi-angular-cli/tsconfig.app.json

@@ -1,4 +1,5 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {

core-samples/jsapi-angular-cli/tsconfig.json

@@ -1,28 +1,22 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
 {
   "compileOnSave": false,
   "compilerOptions": {
     "outDir": "./dist/out-tsc",
-    "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
     "esModuleInterop": true,
-    "sourceMap": true,
-    "declaration": false,
-    "downlevelIteration": true,
     "experimentalDecorators": true,
     "moduleResolution": "bundler",
     "importHelpers": true,
     "target": "ES2022",
-    "module": "ES2022",
-    "useDefineForClassFields": false,
-    "lib": [
-      "ES2022",
-      "dom"
-    ]
+    "module": "ES2022"
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,

core-samples/jsapi-angular-cli/tsconfig.spec.json

@@ -1,4 +1,5 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {

core-samples/jsapi-react/.gitignore

@@ -7,11 +7,11 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
+package-lock.json
 node_modules
 dist
 dist-ssr
 *.local
-package-lock.json
 
 # Editor directories and files
 .vscode/*

core-samples/jsapi-react/index.html

@@ -1,15 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Vite + React + ArcGIS</title>
-</head>
-
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.jsx"></script>
-</body>
-
-</html>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + ArcGIS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

core-samples/jsapi-react/package.json

@@ -4,20 +4,17 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "start": "npm run dev",
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
     "@arcgis/core": "~4.31.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^4.3.3",
-    "vite": "^5.4.10"
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^6.0.3"
   }
 }

core-samples/jsapi-react/src/App.jsx

@@ -39,7 +39,7 @@ function App() {
       // Add the widget to the top-right corner of the view
       view.ui.add(bkExpand, "top-right");
 
-      // bonus - how many bookmarks in the webmap?
+      // Bonus - how many bookmarks in the webmap?
       view.when(() => {
         if (webmap.bookmarks && webmap.bookmarks.length) {
           console.log("Bookmarks: ", webmap.bookmarks.length);

core-samples/jsapi-react/src/index.css

@@ -1,4 +1,5 @@
 @import 'https://js.arcgis.com/4.31/@arcgis/core/assets/esri/themes/light/main.css';
+
 html,
 body,
 #root {

core-samples/jsapi-react/src/main.jsx

@@ -1,10 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
 import './index.css'
+import App from './App.jsx'
 
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
     <App />
-  </React.StrictMode>
+  </StrictMode>,
 )

core-samples/jsapi-react/vite.config.js

@@ -1,13 +1,13 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
-// https://vitejs.dev/config/
+// https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
   build: {
     chunkSizeWarningLimit: 2000
   },
   server: {
     open: true
-  }  
+  }
 })