Merge pull request #300 from Esri/4.25

Update to 4.25 and 3.42
Esri · Nov 14, 2022 · 989e6d6 · 989e6d6
2 parents 09e330c + accb027
commit 989e6d6
Show file tree

Hide file tree

Showing 12 changed files with 165 additions and 165 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,12 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ### Removed
 ### Breaking
 
+## [3.7.0] - 2022-11-10
+### Added
+- default to JS API 4.25; update docs w/ latest version numbers - @andygup
+- raise visibility of deprecation notice for frameworks that do not support async/await at runtime, e.g. Angular due to limitations in Zone.js
+- archive framework samples and various 3.x-related sections to archived-examples.md. Most of the samples haven't been updated in years
+
 ## [3.6.0] - 2022-07-07
 ### Added
 - default to JSAPI 4.24; update docs w/ latest version numbers - @gavinr

diff --git a/README.md b/README.md
diff --git a/archived-examples.md b/archived-examples.md
@@ -0,0 +1,110 @@
+### 3.x Types
+
+You can use these instructions in the [Legacy samples for ArcGIS JSAPI Resources](https://github.com/Esri/jsapi-resources/releases/tag/legacy) to install the 3.x types. Follow the instructions outlined in the `/3.x/typescript` directory.
+
+Use `import * as esri from 'esri';` to implement the types [as shown here](https://github.com/Esri/angular-cli-esri-map/issues/17#issue-360490589).
+
+```ts
+// define a type that is an array of the 3.x types you are using
+// and indicate that loadModules() will resolve with that type
+type MapModules = [typeof import("esri/map"), typeof import("esri/geometry/Extent")];
+const [Map, Extent] = await (loadModules(["esri/map", "esri/geometry/Extent"]) as Promise<MapModules>);
+// the returned objects now have type
+let map = new Map("viewDiv"...
+```
+
+A more complete 3.x sample can be [seen here](https://codesandbox.io/s/rj6jloy4nm?fontsize=14&module=%2Fsrc%2Fmapping.ts).
+
+### 4.x Types
+
+A more complete 4.x sample can be [seen here](https://codesandbox.io/s/xv8mw2890w?fontsize=14&module=%2Fsrc%2Fmapping.ts).
+
+### Legacy browsers
+
+Since this library also works with [v3.x of the ArcGIS API](https://developers.arcgis.com/javascript/3/), the community [has made some effort](https://github.com/Esri/esri-loader/pull/67) to get it to work with [some of the older browsers supported by 3.x](https://developers.arcgis.com/javascript/3/jshelp/supported_browsers.html) like IE < 11.
+
+### Legacy examples
+
+Here is an archive of some applications and framework-specific wrapper libraries that use this library. Most of these examples haven't been updated in a long time, so check the version of esri-loader and their commit history before using them as a reference. They are presented by framework in alphabetical order - not picking any favorites here :stuck_out_tongue_winking_eye::
+
+### [Angular](https://angular.io/)
+
+#### Reusable libraries for Angular
+
+- [angular-esri-components](https://github.com/TheKeithStewart/angular-esri-components) - A set of Angular components to work with ArcGIS API for JavaScript v4.3
+
+#### Example Angular applications
+
+- [angular-cli-esri-map](https://github.com/Esri/angular-cli-esri-map) - Example of how to build a simple mapping component using Angular CLI.
+
+### [CanJS](https://canjs.com/)
+
+- [can-arcgis](https://github.com/roemhildtg/can-arcgis) - CanJS configurable mapping app (inspired by [cmv-app](https://github.com/cmv/cmv-app)) and components built for the ArcGIS JS API 4.x, bundled with [StealJS](https://stealjs.com/)
+
+### [Choo](https://choo.io/)
+
+- [esri-choo-example](https://github.com/jwasilgeo/esri-choo-example) - An example Choo application that shows how to use esri-loader to create a custom map view.
+
+### [Dojo 2+](https://dojo.io)
+
+- [dojo-esri-loader](https://github.com/odoe/dojo-esri-loader) - Dojo 5 app with esri-loader ([blog post](https://odoe.net/blog/dojo-framework-with-arcgis-api-for-javascript/))
+
+- [esri-dojo](https://github.com/jamesmilneruk/esri-dojo) - An example of how to use Esri Loader with Dojo 2+. This example is a simple map that allows you to place markers on it.
+
+### [Electron](https://electron.atom.io/)
+
+- [ng-cli-electron-esri](https://github.com/TheKeithStewart/ng-cli-electron-esri) - This project is meant to demonstrate how to run a mapping application using the ArcGIS API for JavaScript inside of Electron
+
+#### Reusable libraries for Ember
+
+- [ember-esri-loader](https://github.com/Esri/ember-esri-loader) - An Ember addon that wraps this library
+
+#### Example Ember applications
+
+See the [examples over at ember-esri-loader](https://github.com/Esri/ember-esri-loader/#examples)
+
+### [Glimmer.js](https://glimmerjs.com/)
+
+- [esri-glimmer-example](https://github.com/tomwayson/esri-glimmer-example) - An example of how to use the ArcGIS API for JavaScript in a https://glimmerjs.com/ application
+
+### [Hyperapp](https://hyperapp.js.org/)
+
+- [esri-hyperapp-example](https://github.com/jwasilgeo/esri-hyperapp-example) - An example Hyperapp application that shows how to use esri-loader to create a custom map view and component.
+
+### [Preact](https://github.com/developit/preact)
+
+- [esri-preact-pwa](https://github.com/tomwayson/esri-preact-pwa) - An example progressive web app (PWA) using the ArcGIS API for JavaScript built with Preact
+
+#### Reusable libraries for React
+
+- [esri-loader-hooks](https://github.com/tomwayson/esri-loader-hooks) - Custom React hooks for using the ArcGIS API for JavaScript with esri-loader
+- [react-arcgis](https://github.com/Esri/react-arcgis) - A few components to help you get started using esri-loader with React
+- [esri-loader-react](https://github.com/davetimmins/esri-loader-react) - A React component wrapper around esri-loader ([blog post](https://davetimmins.github.io/2017/07/19/esri-loader-react/))
+- [arcgis-react-redux-legend](https://github.com/davetimmins/arcgis-react-redux-legend) - Legend control for ArcGIS JS v4 using React and Redux
+
+#### Example React applications
+- [create-arcgis-app](https://github.com/tomwayson/create-arcgis-app/) - An example of how to use the ArcGIS platform in an application created with Create React App and React Router.
+- [next-arcgis-app](https://github.com/tomwayson/next-arcgis-app/) - An example of how to use the ArcGIS platform in an application built with Next.js
+- [esri-loader-react-starter-kit](https://github.com/tomwayson/esri-loader-react-starter-kit) - A fork of the [react-starter-kit](https://github.com/kriasoft/react-starter-kit) showing how to use esri-loader in an isomorphic/universal React application
+- [create-react-app-esri-loader](https://github.com/davetimmins/create-react-app-esri-loader/) - An example create-react-app application that uses [esri-loader-react](https://github.com/davetimmins/esri-loader-react) to load the ArcGIS API
+- [React-Typescript-App-with-ArcGIS-JSAPI](https://github.com/guzhongren/React-Typescript-App-with-ArcGIS-JSAPI) - An example create-react-app application that uses [esri-loader](https://github.com/Esri/esri-loader), [esri-loader-react](https://github.com/davetimmins/esri-loader-react), [Typescript](https://www.typescriptlang.org/), [Webpack3](https://webpack.js.org/) to create MapView
+
+### [Riot](https://riot.js.org/)
+
+- [esri-riot-example](https://github.com/jwasilgeo/esri-riot-example) - An example Riot application that shows how to use esri-loader to create a custom `<esri-map-view>` component.
+
+### [Stencil](https://stenciljs.com/)
+
+- [esri-stencil-example](https://github.com/Dzeneralen/esri-stencil-example) - An example Stencil application that shows how to use esri-loader to create a custom map view component and implement some basic routing controlling the map state
+
+### [Svelte](https://svelte.dev/)
+
+- [esri-svelte-example](https://github.com/gavinr/esri-svelte-example) - An example Svelte application that shows how to use esri-loader to load a map.
+- [esri-svelte-basemaps-example](https://github.com/jwasilgeo/esri-svelte-basemaps-example) - An example Svelte application that shows how to use esri-loader to create a custom `<EsriMapView>` component and explore various basemaps.
+
+### [Vue.js](https://vuejs.org/)
+
+- [CreateMap](https://github.com/oppoudel/CreateMap) - Create Map: City of Baltimore - https://gis.baltimorecity.gov/createmap/#/
+- [City of Baltimore: Map Gallery](https://github.com/oppoudel/MapGallery_Vue) - Map Gallery built with Vue.js that uses this library to load the ArcGIS API
+- [vue-jsapi4](https://github.com/odoe/vue-jsapi4) - An example of how to use the [ArcGIS API for Javascript](https://developers.arcgis.com/javascript/) in a [NUXT](https://nuxtjs.org/) application ([blog post](https://odoe.net/blog/arcgis-api-4-for-js-with-vue-cli-and-nuxt/), [video](https://youtu.be/hqJzzgM8seo))
+- [esri-vue-cli-example](https://github.com/tomwayson/esri-vue-cli-example) - An example of how to use the [ArcGIS API for JavaScript 3.x](https://developers.arcgis.com/javascript/3/) in a [vue-cli](https://github.com/vuejs/vue-cli) application
diff --git a/src/esri-loader.ts b/src/esri-loader.ts
@@ -1,5 +1,5 @@
 /*
-  Copyright (c) 2017 Esri
+  Copyright (c) 2022 Esri
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

diff --git a/src/modules.ts b/src/modules.ts
@@ -1,4 +1,4 @@
-/* Copyright (c) 2017 Environmental Systems Research Institute, Inc.
+/* Copyright (c) 2022 Environmental Systems Research Institute, Inc.
  * Apache-2.0 */
 
 import { getScript, ILoadScriptOptions, isLoaded, loadScript } from './script';

diff --git a/src/script.test.ts b/src/script.test.ts
@@ -57,7 +57,7 @@ describe('when loading the script', function() {
       });
     });
     it('should default to latest version', function() {
-      expect(scriptEl.src).toEqual('https://js.arcgis.com/4.24/');
+      expect(scriptEl.src).toEqual('https://js.arcgis.com/4.25/');
     });
     it('should not have called loadCss', function() {
       expect((cssUtils.loadCss as jasmine.Spy).calls.any()).toBeFalsy();
@@ -94,12 +94,12 @@ describe('when loading the script', function() {
     });
   });
   describe('with a specific version from the CDN', function() {
-    const expected = 'https://js.arcgis.com/3.41/';
+    const expected = 'https://js.arcgis.com/3.42/';
     let scriptEl;
     beforeAll(function(done) {
       fakeLoading();
       loadScript({
-        version: '3.41'
+        version: '3.42'
       })
       .then((script) => {
         // hold onto script element for assertions below
@@ -145,7 +145,7 @@ describe('when loading the script', function() {
       });
     });
     describe('with a specific version from the CDN', () => {
-      const version = '3.41';
+      const version = '3.42';
       beforeAll(function(done) {
         fakeLoading();
         loadScript({

diff --git a/src/script.ts b/src/script.ts
@@ -1,4 +1,4 @@
-/* Copyright (c) 2017 Environmental Systems Research Institute, Inc.
+/* Copyright (c) 2022 Environmental Systems Research Institute, Inc.
  * Apache-2.0 */
 
 import { loadCss } from './utils/css';

diff --git a/src/utils/css.test.ts b/src/utils/css.test.ts
@@ -2,7 +2,7 @@ import { loadCss } from './css';
 
 describe('when loading the css', () => {
   describe('with no arguments', () => {
-    const url = 'https://js.arcgis.com/4.24/esri/themes/light/main.css';
+    const url = 'https://js.arcgis.com/4.25/esri/themes/light/main.css';
     let link;
     beforeAll(() => {
       spyOn(document.head, 'appendChild').and.stub();
@@ -20,12 +20,12 @@ describe('when loading the css', () => {
     });
   });
   describe('with a version', () => {
-    const url = 'https://js.arcgis.com/4.8/esri/themes/light/main.css';
+    const url = 'https://js.arcgis.com/4.25/esri/themes/light/main.css';
     let link;
     beforeAll(() => {
       spyOn(document.head, 'appendChild').and.stub();
       spyOn(document, 'querySelector');
-      link = loadCss('4.8');
+      link = loadCss('4.25');
     });
     it('should have checked if the link was already appended', () => {
       expect((document.querySelector as jasmine.Spy).calls.argsFor(0)[0]).toEqual(`link[href*="${url}"]`);
@@ -75,7 +75,7 @@ describe('when loading the css', () => {
   });
   describe('when called twice', () => {
     describe('when loading the same url', () => {
-      const url = 'https://js.arcgis.com/4.24/esri/themes/light/main.css';
+      const url = 'https://js.arcgis.com/4.25/esri/themes/light/main.css';
       let link;
       let link2;
       beforeAll(() => {
@@ -93,7 +93,7 @@ describe('when loading the css', () => {
     });
   });
   describe('when inserting before an existing node', () => {
-    const url = 'https://js.arcgis.com/4.24/esri/themes/light/main.css';
+    const url = 'https://js.arcgis.com/4.25/esri/themes/light/main.css';
     // insert before the first <style> tag
     const before = 'style';
     let link;

diff --git a/src/utils/css.ts b/src/utils/css.ts
@@ -1,4 +1,4 @@
-/* Copyright (c) 2017 Environmental Systems Research Institute, Inc.
+/* Copyright (c) 2022 Environmental Systems Research Institute, Inc.
  * Apache-2.0 */
 
 import { getCdnCssUrl, parseVersion } from './url';

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -1,4 +1,4 @@
-/* Copyright (c) 2017 Environmental Systems Research Institute, Inc.
+/* Copyright (c) 2022 Environmental Systems Research Institute, Inc.
  * Apache-2.0 */
 
 const isBrowser = typeof window !== 'undefined';

diff --git a/src/utils/url.test.ts b/src/utils/url.test.ts
@@ -4,25 +4,25 @@ describe ('when getting CDN URLs', () => {
   describe('for the script', () => {
     describe('with no arguments', () => {
       it('should default to latest 4.x URL', () => {
-        expect(getCdnUrl()).toEqual('https://js.arcgis.com/4.24/');
+        expect(getCdnUrl()).toEqual('https://js.arcgis.com/4.25/');
       });
     });
     describe('with a valid version', () => {
       it('should return URL for that version', () => {
-        expect(getCdnUrl('3.41')).toEqual('https://js.arcgis.com/3.41/');
+        expect(getCdnUrl('3.42')).toEqual('https://js.arcgis.com/3.42/');
       });
     });
     // TODO: what about an invalid version? should we throw?
   });
   describe('for the CSS', () => {
     describe('with no arguments', () => {
       it('should default to the latest 4.x CSS URL', () => {
-        expect(getCdnCssUrl()).toEqual('https://js.arcgis.com/4.24/esri/themes/light/main.css');
+        expect(getCdnCssUrl()).toEqual('https://js.arcgis.com/4.25/esri/themes/light/main.css');
       });
     });
     describe('for 3.x version >= 3.11', () => {
       it('should return the CSS URL for that version', () => {
-        expect(getCdnCssUrl('3.41')).toEqual('https://js.arcgis.com/3.41/esri/css/esri.css');
+        expect(getCdnCssUrl('3.42')).toEqual('https://js.arcgis.com/3.42/esri/css/esri.css');
       });
     });
     describe('for version < 3.11', () => {

diff --git a/src/utils/url.ts b/src/utils/url.ts
@@ -1,7 +1,7 @@
-/* Copyright (c) 2017 Environmental Systems Research Institute, Inc.
+/* Copyright (c) 2022 Environmental Systems Research Institute, Inc.
  * Apache-2.0 */
 
-const DEFAULT_VERSION = '4.24';
+const DEFAULT_VERSION = '4.25';
 const NEXT = 'next';
 
 export function parseVersion(version) {
@@ -19,7 +19,7 @@ export function parseVersion(version) {
 /**
  * Get the CDN url for a given version
  *
- * @param version Ex: '4.24' or '3.41'. Defaults to the latest 4.x version.
+ * @param version Ex: '4.25' or '3.42'. Defaults to the latest 4.x version.
  */
 export function getCdnUrl(version = DEFAULT_VERSION) {
   return `https://js.arcgis.com/${version}/`;
@@ -28,7 +28,7 @@ export function getCdnUrl(version = DEFAULT_VERSION) {
 /**
  * Get the CDN url for a the CSS for a given version and/or theme
  *
- * @param version Ex: '4.24', '3.41', or 'next'. Defaults to the latest 4.x version.
+ * @param version Ex: '4.25', '3.42', or 'next'. Defaults to the latest 4.x version.
  */
 export function getCdnCssUrl(version = DEFAULT_VERSION) {
   const baseUrl = getCdnUrl(version);