chore: update samples to 4.28 (#490)

* chore(jsapi-angular-cli): update to 4.28 * chore(rollup): update to 4.28 * chore(jsapi-custom-ui): update to 4.28 * chore(jsapi-custom-workers): update to 4.28 * chore(jsapi-deno): update to 4.28 * chore(jsapi-esm-cdn): update to 4.28 * chore(jsapi-react): update to 4.28 * chore(READMEs): update all the Getting started sections * chore(READMEs): update remainder of the Getting started sections * chore(jsapi-vite-ts): update to 4.28 * chore(jsapi-vue): update to 4.28 * chore(webpack): update to 4.28 * chore(AMD TS): update to 4.28 * chore(jsapi-node): update to 4.28 * Update esm-samples/jsapi-node/README.md Co-authored-by: Dasa Paddock <[email protected]> * ESM CDN sample: Dasa's feedback * Update troubleshooting guide * ci: analyze esm sample builds --------- Co-authored-by: Dasa Paddock <[email protected]> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Esri · Oct 23, 2023 · 6b7c0ef · 6b7c0ef
1 parent b527241
commit 6b7c0ef
Show file tree

Hide file tree

Showing 34 changed files with 130 additions and 201 deletions.
diff --git a/TROUBLESHOOTING.md b/TROUBLESHOOTING.md
@@ -1,6 +1,8 @@
 # Troubleshooting issues when using client-side build tools
 [Client-side build tools](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview) involve many interrelated pieces such as frameworks, module bundlers, transpilers, and dependency libraries - one of which is the ArcGIS Maps SDK for JavaScript (JS Maps SDK). Figuring out the cause of errors is often challenging. The goal of this document is to provide guidance for narrowing down the source of problems.
 
+If an issue with the SDK's functionality can be reproduced in a vanilla JavaScript application, without a framework or bundler, then it's likely to be an issue that can be reported to Esri Technical Support. For all other issues, please continue reading.
+
 **Table of Contents**
 1.	[Four triage steps](#four-triage-steps)
 2.	[Understanding the cause of an issue](#understand-the-cause-of-an-issue)
@@ -24,7 +26,7 @@ With all the various parts in modern build systems, determining where the proble
 
 ## Configuration issues
 The most common errors are related to project configuration. Most of these types of issues look like bugs, but oftentimes they are not:
-*	Module bundler – e.g. webpack and rollup configuration
+*	Module bundler – e.g. webpack or rollup configuration
 *	Framework – e.g. Angular, React configuration
 *	package.json – e.g. dependency version mismatches
 *	Maps SDK – e.g. esriConfig, OAuth tokens, API keys
@@ -40,19 +42,21 @@ _Potential Resolution:_ These are typically related to transpiling. You may be m
 *	Get a screenshot of the full error message
 *	Narrow down the JS Maps SDK version where the break occurred
 
+Also, confirm the [browserslist](https://github.com/browserslist/browserslist) is not supporting older versions of browsers that you don't need. This may be in the framework or bundler's documentation.
+
 **Problem 3:** Error loading a .wasm or .woff file.
 
 _Potential Resolution:_ Configure your web server with the correct MIME types. See [example](https://developers.arcgis.com/javascript/latest/install-and-set-up/#web-server-hosting-configuration).
 
 ## Bundler/Framework issues
-Bundlers and frameworks do occasionally have their own bugs. If you are working with a major framework or bundler, they have very active communities. Searching for the error message using a general internet search is typically the fastest way to get information and hints.
+Bundlers and frameworks oftentimes have their own bugs that are unrelated to the JS Maps SDK. If you are working with a major framework or bundler, they have very active communities. Searching for the error message using a general internet search, or going to the respective repository, is typically the fastest way to get information and hints.
 * Configuration issues
 * Component issues
 * Syntax errors
 * Life-cycle problems
 
 #### Example Bundler/Framework issues
-We do come across bugs in module bundlers and frameworks that are unrelated to the JS Maps SDK. Sometimes these bugs have already been documented. Sometimes, we recommend you open an issue on the framework or bundler repository, that’s where many examples of these issues can be found, for example:
+Sometimes these bugs have already been documented. Depending on the bug, we might recommend you open an issue on the framework or bundler repository. Examples of these issues can be found here:
 
 *	Angular issues: https://github.com/angular/angular-cli/issues 
 *	React issues: https://github.com/facebook/react/issues 
@@ -62,22 +66,22 @@ We do come across bugs in module bundlers and frameworks that are unrelated to t
 ## Maps SDK issues
 Errors occurring in the Maps SDK typically have one of these types of errors:
 *	Errors that occur at runtime and not during the build process
-*	Errors that occur in a Maps SDK module
-*	Errors that can be reproduced using the Maps SDK in plain JavaScript without a framework
+*	Errors that point to a Maps SDK module
+*	Errors that can be reproduced using the Maps SDK in vanilla JavaScript without a framework or bundler
 
 #### Example Maps SDK issue
 **Errors in production builds.** While very rare, sometimes the production build process of a framework creates errors that don’t show up in developer builds. These are often related to bundling, minification or transpiling. Look for hints in the error message that might point to functionality inside a Maps SDK module.
 
-[Example - ReferenceError: Cannot access “e” before initialization](https://github.com/Esri/jsapi-resources/issues/309). In this case, when the error stack dump was expanded in the browser console, you could see file names that appear to be from the Maps SDK such as _renderLegendForLayer_ and _renderLegendForElement_, these are excellent hints.
+[Example - ReferenceError: Cannot access “e” before initialization](https://github.com/Esri/jsapi-resources/issues/309). In this case, when the error stack dump was expanded in the browser console, you could see file names that appear to be from the JS Maps SDK such as _renderLegendForLayer_ and _renderLegendForElement_, these are excellent hints.
 
-Verified errors in production builds can be reported on the [Maps SDK Community site](https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/bd-p/arcgis-api-for-javascript-questions), or if it’s specifically related to an ES modules sample on this repo, then you can open a GitHub issue [here](https://github.com/Esri/jsapi-resources/issues).
+Verified errors in production builds using build tools can be reported on the [Maps SDK Community site](https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/bd-p/arcgis-api-for-javascript-questions), or if it’s specifically related to an ES modules sample on this repo, then you can open a GitHub issue [here](https://github.com/Esri/jsapi-resources/issues).
 
-**Regressions.** This is when Maps SDK functionality works in one release, and then the same functionality is broken in the next one. It’s important to insure the bugs are related to some other dependency in package.json. When testing for regressions, you will change only the version of @arcgis/core and keep all other dependencies constant. 
+**Regressions.** This is when JS Maps SDK functionality works in one release, and then the same functionality is broken in the next one. When testing for regressions, you will change only the version of @arcgis/core and keep all other dependencies constant.
 
-Most Maps SDK regressions can be re-created in a plain JavaScript application, without the framework or bundler. The ESM CDN is an easy way to test and prototype these types of issues: https://github.com/Esri/jsapi-resources/tree/master/esm-samples/jsapi-esm-cdn. 
+Most Maps SDK regressions can be re-created in a vanilla JavaScript application, without the framework or bundler. The ESM CDN is an easy way to test and prototype these types of issues: https://github.com/Esri/jsapi-resources/tree/master/esm-samples/jsapi-esm-cdn. 
 
 Verified regressions can be reported to[ Esri Technical Support](https://support.esri.com/en/contact-tech-support) or the [Maps SDK Community site](https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/bd-p/arcgis-api-for-javascript-questions).
 
-**New bugs.** The best practice for verifying these is to re-create them in a simple, plain JavaScript application, without the framework or bundler. The ESM CDN is an easy way to test for these types of issues, and here is the [sample application](./esm-samples/jsapi-esm-cdn/). 
+**New bugs.** The best practice for verifying these is to re-create them in a simple, vanilla JavaScript application, without the framework or bundler. The ESM CDN is an easy way to test for these types of issues, and here is the [sample application](./esm-samples/jsapi-esm-cdn/). 
 
 Verified bugs can be reported to[ Esri Technical Support](https://support.esri.com/en/contact-tech-support) or the [Maps SDK Community site](https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/bd-p/arcgis-api-for-javascript-questions).
diff --git a/esm-samples/.metrics/4.28.0.csv b/esm-samples/.metrics/4.28.0.csv
@@ -0,0 +1,6 @@
+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 HTTP requests,JS heap size (MB)
+Angular 16.2.0,8.45,277,main.75d2400bdef78a70.js,1.53,0.43,0.36,7376,13937,5.66,47,143,30.95
+React 18.2.0,7.61,418,index-f5932c56.js,1.50,0.42,0.34,4557,14266,5.36,129,368,26.46
+Vue 3.3.4,7.52,418,index-fc94ca15.js,1.41,0.40,0.32,4531,14403,5.25,129,594,26.73
+Rollup 4.0.2,7.29,417,main.js,1.29,0.35,0.29,4595,14333,5.08,129,818,27.84
+Webpack 5.88.2,8.71,297,index.js,1.39,0.37,0.30,763,21416,3.19,25,857,9.96
diff --git a/esm-samples/jsapi-angular-cli/README.md b/esm-samples/jsapi-angular-cli/README.md
@@ -24,15 +24,9 @@ This repo demonstrates how to use [@arcgis/core](https://www.npmjs.com/package/@
 
 ## Get Started
 
-**Step 1** - Run `npm install` and then start adding modules.
+Run `npm install` and then start adding modules.
 
-**Step 2** Configure CSS.
-
-*styles.css*
-
-```css
-  @import 'https://js.arcgis.com/4.27/@arcgis/core/assets/esri/themes/light/main.css';
-```
+For a list of all available `npm` commands see `scripts` in `package.json`.
 
 For additional information, see the [Build with ES modules](https://developers.arcgis.com/javascript/latest/es-modules/) Guide topic in the SDK.
 
@@ -44,10 +38,6 @@ This sample implements strict class initalization, for more information visit th
 
 Check the online Angular documentation for their minimum TypeScript requirements for each release.
 
-## Commands
-
-For a list of all available `npm` commands see the scripts in `package.json`. 
-
 ### Development server
 
 Run `ng serve --open` for a dev server that will automatically open a browser window. The app will automatically reload if you change any of the source files. You need to install [Angular CLI](https://cli.angular.io/) before you can compile the app. 

diff --git a/esm-samples/jsapi-angular-cli/package.json b/esm-samples/jsapi-angular-cli/package.json
@@ -9,30 +9,26 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^16.0.0",
-    "@angular/common": "^16.0.0",
-    "@angular/compiler": "^16.0.0",
-    "@angular/core": "^16.0.0",
-    "@angular/forms": "^16.0.0",
-    "@angular/platform-browser": "^16.0.0",
-    "@angular/platform-browser-dynamic": "^16.0.0",
-    "@angular/router": "^16.0.0",
-    "@arcgis/core": "~4.27.0",
+    "@angular/animations": "^16.2.0",
+    "@angular/common": "^16.2.0",
+    "@angular/compiler": "^16.2.0",
+    "@angular/core": "^16.2.0",
+    "@angular/forms": "^16.2.0",
+    "@angular/platform-browser": "^16.2.0",
+    "@angular/platform-browser-dynamic": "^16.2.0",
+    "@angular/router": "^16.2.0",
+    "@arcgis/core": "~4.28.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.13.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.0.2",
-    "@angular/cli": "~16.0.2",
-    "@angular/compiler-cli": "^16.0.0",
-    "@types/jasmine": "~4.3.0",
-    "jasmine-core": "~4.6.0",
+    "@angular-devkit/build-angular": "^16.2.1",
+    "@angular/cli": "~16.2.1",
+    "@angular/compiler-cli": "^16.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.0.0",
-    "typescript": "~5.0.2"
+    "typescript": "~5.1.3"
   }
 }
diff --git a/esm-samples/jsapi-angular-cli/src/app/app.component.css b/esm-samples/jsapi-angular-cli/src/app/app.component.css
@@ -1,4 +1,4 @@
-@import 'https://js.arcgis.com/4.27/@arcgis/core/assets/esri/themes/light/main.css';
+@import 'https://js.arcgis.com/4.28/@arcgis/core/assets/esri/themes/light/main.css';
 .esri-view {
   padding: 0;
   margin: 0;

diff --git a/esm-samples/jsapi-custom-ui/README.md b/esm-samples/jsapi-custom-ui/README.md
@@ -1,23 +1,13 @@
 # Custom UI component with React and Vite
 
-This repo demonstrates creating a custom UI component using [@arcgis/core](https://www.npmjs.com/package/@arcgis/core) ES modules with [React](https://react.dev/learn) and [Vite](https://vitejs.dev/guide/#community-templates). You can also use any other major JavaScript framework. For more information about building custom UI with the ArcGIS JS SDK, see the [Custom UI basics](https://developers.arcgis.com/javascript/latest/custom-ui/) guide topic.
+This repo demonstrates creating a custom UI component using [@arcgis/core](https://www.npmjs.com/package/@arcgis/core) ES modules with [React](https://react.dev/learn) and [Vite](https://vitejs.dev/guide/#community-templates). You can also use any other major JavaScript framework. For more information about building custom UI with the ArcGIS Maps SDK for JavaScript, see the [Custom UI basics](https://developers.arcgis.com/javascript/latest/custom-ui/) guide topic.
 
-The component in this sample is created in [JSX](https://react.dev/learn/writing-markup-with-jsx) and then added to the Map as a DOM element using the ArcGIS JS SDK's [View UI](https://developers.arcgis.com/javascript/latest/view-ui/) interface. This approach loosely couples the component with the functionality in the ArcGIS Maps SDK for JavaScript. It provides seamless integration with your preferred component library, and gives you full control over the user experience and component-life cycle so that it fits your unique requirements.
+The component in this sample is created in [JSX](https://react.dev/learn/writing-markup-with-jsx) and then added to the Map as a DOM element using the ArcGIS JS SDK's [View UI](https://developers.arcgis.com/javascript/latest/view-ui/) interface. This approach loosely couples the component with the functionality in the SDK. It provides seamless integration with your preferred component library, and gives you full control over the user experience and component lifecycle so that it fits your unique requirements.
 
 ## Get Started
 
-**Step 1** - Run `npm install`
+Run `npm install` and then start adding modules.
 
-**Step 2** Configure CSS. 
+For a list of all available `npm` commands see `scripts` in `package.json`.
 
-*index.css*
-
-```css
-@import 'https://js.arcgis.com/4.27/@arcgis/core/assets/esri/themes/light/main.css';
-```
-
-For additional information, see the [Build with ES modules](https://developers.arcgis.com/javascript/latest/es-modules/) Guide topic in the SDK.
-
-## Commands
-
-For a list of all available npm script commands, see the scripts in `package.json` or use `npm run`.
+For additional information, see the [Build with ES modules](https://developers.arcgis.com/javascript/latest/es-modules/) Guide topic in the SDK.
diff --git a/esm-samples/jsapi-custom-ui/package.json b/esm-samples/jsapi-custom-ui/package.json
@@ -4,18 +4,18 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build", 
+    "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@arcgis/core": "~4.27.0",
+    "@arcgis/core": "~4.28.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "@vitejs/plugin-react": "^4.0.0",
-    "vite": "^4.3.2"
+    "@types/react": "^18.2.27",
+    "@types/react-dom": "^18.2.12",
+    "@vitejs/plugin-react": "^4.1.0",
+    "vite": "^4.4.11"
   }
 }
diff --git a/esm-samples/jsapi-custom-ui/src/index.css b/esm-samples/jsapi-custom-ui/src/index.css
@@ -1,4 +1,4 @@
-@import 'https://js.arcgis.com/4.27/@arcgis/core/assets/esri/themes/light/main.css';
+@import 'https://js.arcgis.com/4.28/@arcgis/core/assets/esri/themes/light/main.css';
 html,
 body,
 #root {

diff --git a/esm-samples/jsapi-custom-workers/README.md b/esm-samples/jsapi-custom-workers/README.md
@@ -51,7 +51,7 @@ import * as workers from "@arcgis/core/core/workers.js";
 config.workers.workerPath = "./RemoteClient.js";
 
 // what loader to use, in this case SystemJS
-config.workers.loaderUrl = "https://cdn.jsdelivr.net/npm/[email protected].1/dist/s.min.js";
+config.workers.loaderUrl = "https://cdn.jsdelivr.net/npm/[email protected].2/dist/s.min.js";
 ...
   const results1= await layerView1.queryFeatures(query);
   const results2 = await layerView2.queryFeatures(query);
@@ -99,20 +99,10 @@ export function doSpatialJoin([f1, f2]) {
 
 For more details on using `@arcgis/core/core/workers`, you can review the [documentation](https://developers.arcgis.com/javascript/latest/api-reference/esri-core-workers.html).
 
-For additional information, see the [Build with ES modules](https://developers.arcgis.com/javascript/latest/es-modules/) Guide topic in the SDK.
-
-## Commands
-
-For a list of all available `npm` commands see the scripts in `package.json`. 
+## Getting started
 
-### development
+Run `npm install` and then start adding modules.
 
-```
-npm run dev
-```
+For a list of all available `npm` commands see `scripts` in `package.json`.
 
-### production
-
-```
-npm run build
-```
+For additional information, see the [Build with ES modules](https://developers.arcgis.com/javascript/latest/es-modules/) Guide topic in the SDK.
diff --git a/esm-samples/jsapi-custom-workers/package.json b/esm-samples/jsapi-custom-workers/package.json
@@ -1,19 +1,19 @@
 {
   "private": true,
   "devDependencies": {
-    "@arcgis/core": "~4.27.0",
-    "@rollup/plugin-node-resolve": "^15.0.2",
-    "@rollup/plugin-terser": "^0.4.3",
-    "css-loader": "^6.7.4",
+    "@arcgis/core": "~4.28.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "css-loader": "^6.8.1",
     "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.5.1",
+    "html-webpack-plugin": "^5.5.3",
     "mini-css-extract-plugin": "^2.7.6",
     "npm-run-all": "^4.1.5",
-    "rollup": "^3.23.0",
+    "rollup": "^4.0.2",
     "source-map-loader": "^4.0.1",
-    "webpack": "^5.84.1",
-    "webpack-cli": "^5.1.1",
-    "webpack-dev-server": "^4.15.0"
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
   },
   "scripts": {
     "build": "npm-run-all clean --parallel build:*",

diff --git a/esm-samples/jsapi-custom-workers/src/index.css b/esm-samples/jsapi-custom-workers/src/index.css
@@ -1,4 +1,4 @@
-@import "https://js.arcgis.com/4.27/@arcgis/core/assets/esri/themes/dark/main.css";
+@import "https://js.arcgis.com/4.28/@arcgis/core/assets/esri/themes/dark/main.css";
 html,
 body,
 #viewDiv {

diff --git a/esm-samples/jsapi-custom-workers/src/index.js b/esm-samples/jsapi-custom-workers/src/index.js
@@ -10,7 +10,7 @@ import * as workers from "@arcgis/core/core/workers.js";
 
 config.workers.workerPath = "./RemoteClient.js";
 
-config.workers.loaderUrl = "https://cdn.jsdelivr.net/npm/[email protected].1/dist/s.min.js";
+config.workers.loaderUrl = "https://cdn.jsdelivr.net/npm/[email protected].2/dist/s.min.js";
 
 const button1 = document.getElementById("btn-1");
 

diff --git a/esm-samples/jsapi-deno/README.md b/esm-samples/jsapi-deno/README.md
@@ -1,12 +1,12 @@
 # ArcGIS Maps SDK for JavaScript in Deno
 
-Integrating [Deno](https://deno.land/) with [`@arcgis/core`](https://www.npmjs.com/package/@arcgis/core) can be done by using [TypeScript](https://www.typescriptlang.org/) with no compile steps.
+Integrating [Deno](https://deno.com//) with [`@arcgis/core`](https://www.npmjs.com/package/@arcgis/core) can be done by using [TypeScript](https://www.typescriptlang.org/) with no compile steps.
 
-Please refer to the [Deno installation](https://deno.com/manual@v1.34.0/getting_started) instructions for your environment.
+Please refer to the [Deno installation](https://docs.deno.com/runtime/manual/getting_started) instructions for your environment.
 
 ## Usage
 
-The `@arcgis/core` package can be referenced with [npm specifiers](https://deno.com/manual@v1.34.0/node/npm_specifiers), meaning you do not need to manually install the package in your projects.
+The `@arcgis/core` package can be referenced with [npm specifiers](https://docs.deno.com/runtime/manual/node/npm_specifiers), meaning you do not need to manually install the package in your projects.
 
 
 ## Notes

diff --git a/esm-samples/jsapi-deno/request.ts b/esm-samples/jsapi-deno/request.ts
@@ -1,7 +1,7 @@
 // @deno-types="npm:@arcgis/core/interfaces.d.ts"
-import { Application, Context } from "https://deno.land/x/oak@v12.5.0/mod.ts";
-import config from "npm:@arcgis/core@4.27/config.js";
-import esriRequest from "npm:@arcgis/core@4.27/request.js";
+import { Application, Context } from "https://deno.land/x/oak@v12.6.1/mod.ts";
+import config from "npm:@arcgis/core@4.28/config.js";
+import esriRequest from "npm:@arcgis/core@4.28/request.js";
 
 config.request.useIdentity = false;
 

diff --git a/esm-samples/jsapi-deno/webmap.ts b/esm-samples/jsapi-deno/webmap.ts
@@ -1,7 +1,7 @@
 // @deno-types="npm:@arcgis/core/interfaces.d.ts"
-import { Application, Context } from "https://deno.land/x/oak@v12.5.0/mod.ts";
-import config from "npm:@arcgis/core@4.27/config.js";
-import WebMap from "npm:@arcgis/core@4.27/WebMap.js";
+import { Application, Context } from "https://deno.land/x/oak@v12.6.1/mod.ts";
+import config from "npm:@arcgis/core@4.28/config.js";
+import WebMap from "npm:@arcgis/core@4.28/WebMap.js";
 
 config.request.useIdentity = false;