Merge pull request #526 from Esri/mg/update-pure-ESM-approach

chore: update map and coding component README with pure ESM approach

component-samples/coding-components/samples/react/README.md

@@ -1,6 +1,6 @@
 # Coding components React using Vite sample
 
-📁 **[Click here to download this directory as a ZIP file](https://esri.github.io/jsapi-resources/zips/coding-components-sample-react.zip)
+📁 **[Click here to download this directory as a ZIP file](https://esri.github.io/jsapi-resources/zips/coding-components-sample-react.zip)** 📁
 
 This repository showcases how to integrate the coding components with [React](https://react.dev/).
 
@@ -10,4 +10,20 @@ The project was created using [`yarn create vite`](https://vitejs.dev/guide/#sca
 
 Run `npm install` and then start adding modules.
 
-For a list of all available `npm` commands see `scripts` in `package.json`, e.g. `npm run build`.
+For a list of all available `npm` commands see `scripts` in `package.json`, e.g. `npm run build`.
+
+***Note:*** This sample demonstrates the recommended pattern for using components from the ArcGIS Map SDK for JavaScript by individually loading components.
+
+### Loading All Components
+The JavaScript Maps SDK also offers a convenience pattern useful for quick testing and prototyping. You can register all components at once using the following approach:
+
+```
+// Replace the individual imports with defineCustomElements()
+ import { defineCustomElements as defineCalciteElements } from "@esri/calcite-components/dist/loader";
+ import { defineCustomElements as defineCodingElements } from "@arcgis/coding-components/dist/loader";
+
+ defineCalciteElements(window, { resourcesUrl: "https://js.arcgis.com/calcite-components/2.8.5/assets" });
+ defineCodingElements(window, { resourcesUrl: "https://js.arcgis.com/coding-components/4.30/assets" });
+```
+
+For more details on using the SDK, please refer to the [ArcGIS Maps SDK for JavaScript documentation](https://developers.arcgis.com/javascript/latest/get-started-overview/).

component-samples/coding-components/samples/react/src/components/ArcadeEditor.tsx

@@ -15,6 +15,7 @@
 
 import { useEffect, useCallback, 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";
 

component-samples/coding-components/samples/react/src/index.tsx

@@ -17,12 +17,14 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 
 import ArcadeEditor from "./components/ArcadeEditor";
-import { defineCustomElements as defineCalciteElements } from "@esri/calcite-components/dist/loader";
-import { defineCustomElements as defineCodingElements } from "@arcgis/coding-components/dist/loader";
 
-// define custom elements in the browser, and load the assets from the CDN
-defineCodingElements(window, { resourcesUrl: "https://js.arcgis.com/coding-components/4.30/assets" });
-defineCalciteElements(window, { resourcesUrl: "https://js.arcgis.com/calcite-components/2.8.5/assets" });
+// 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.8.0/assets");
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(

component-samples/coding-components/samples/vite/README.md

@@ -10,4 +10,20 @@ The project was created using [`yarn create vite`](https://vitejs.dev/guide/#sca
 
 Run `npm install` and then start adding modules.
 
-For a list of all available `npm` commands see `scripts` in `package.json`, e.g. `npm run build`.
+For a list of all available `npm` commands see `scripts` in `package.json`, e.g. `npm run build`.
+
+***Note:*** This sample demonstrates the recommended pattern for using components from the ArcGIS Map SDK for JavaScript by individually loading components.
+
+### Loading All Components
+The JavaScript Maps SDK also offers a convenience pattern useful for quick testing and prototyping. You can register all components at once using the following approach:
+
+```
+// Replace the individual imports with defineCustomElements()
+ import { defineCustomElements as defineCalciteElements } from "@esri/calcite-components/dist/loader";
+ import { defineCustomElements as defineCodingElements } from "@arcgis/coding-components/dist/loader";
+
+ defineCalciteElements(window, { resourcesUrl: "https://js.arcgis.com/calcite-components/2.8.5/assets" });
+ defineCodingElements(window, { resourcesUrl: "https://js.arcgis.com/coding-components/4.30/assets" });
+```
+
+For more details on using the SDK, please refer to the [ArcGIS Maps SDK for JavaScript documentation](https://developers.arcgis.com/javascript/latest/get-started-overview/).

component-samples/coding-components/samples/vite/main.js

@@ -17,12 +17,15 @@ import "./style.css"; // Arcade editor styles
 
 import { loadData } from "./load-data";
 
-import { defineCustomElements as defineCalciteElements } from "@esri/calcite-components/dist/loader";
-import { defineCustomElements as defineCodingElements } from "@arcgis/coding-components/dist/loader";
+// Individual imports for each component
+import { setArcgisAssetPath as setCodingComponentsAssetPath } from "@arcgis/coding-components/dist/components";
+import "@arcgis/coding-components/dist/components/arcgis-arcade-editor";
 
-// define custom elements in the browser, and load the assets from the CDN
-defineCalciteElements(window, { resourcesUrl: "https://js.arcgis.com/calcite-components/2.8.5/assets" });
-defineCodingElements(window, { resourcesUrl: "https://js.arcgis.com/coding-components/4.30/assets" });
+import { setAssetPath as setCalciteComponentsAssetPath } from '@esri/calcite-components/dist/components';
+import "@esri/calcite-components/dist/components/calcite-scrim";
+
+setCodingComponentsAssetPath("https://js.arcgis.com/coding-components/4.30/assets");
+setCalciteComponentsAssetPath("https://js.arcgis.com/calcite-components/2.8.0/assets");
 
 (async () => {
   // Get the Arcade editor element

component-samples/coding-components/samples/vue/README.md

@@ -8,3 +8,19 @@ This sample should help get you started developing with Vue 3 in Vite. The sampl
 Run `npm install` and then start adding modules.
 
 For a list of all available `npm` commands see `scripts` in `package.json`, e.g. `npm run build`.
+
+***Note:*** This sample demonstrates the recommended pattern for using components from the ArcGIS Map SDK for JavaScript by individually loading components.
+
+### Loading All Components
+The JavaScript Maps SDK also offers a convenience pattern useful for quick testing and prototyping. You can register all components at once using the following approach:
+
+```
+// Replace the individual imports with defineCustomElements()
+ import { defineCustomElements as defineCalciteElements } from "@esri/calcite-components/dist/loader";
+ import { defineCustomElements as defineCodingElements } from "@arcgis/coding-components/dist/loader";
+
+ defineCalciteElements(window, { resourcesUrl: "https://js.arcgis.com/calcite-components/2.8.5/assets" });
+ defineCodingElements(window, { resourcesUrl: "https://js.arcgis.com/coding-components/4.30/assets" });
+```
+
+For more details on using the SDK, please refer to the [ArcGIS Maps SDK for JavaScript documentation](https://developers.arcgis.com/javascript/latest/get-started-overview/).

component-samples/coding-components/samples/vue/src/main.js

@@ -18,11 +18,14 @@ import "./assets/main.css"; // App style
 import { createApp } from "vue";
 import App from "./App.vue";
 
-import { defineCustomElements as defineCalciteElements } from "@esri/calcite-components/dist/loader";
-import { defineCustomElements as defineCodingElements } from "@arcgis/coding-components/dist/loader";
+// Individual imports for each component
+import { setArcgisAssetPath as setCodingComponentsAssetPath } from "@arcgis/coding-components/dist/components";
+import "@arcgis/coding-components/dist/components/arcgis-arcade-editor";
 
-// define custom elements in the browser, and load the assets from the CDN
-defineCalciteElements(window, { resourcesUrl: "https://js.arcgis.com/calcite-components/2.8.5/assets" });
-defineCodingElements(window, { resourcesUrl: "https://js.arcgis.com/coding-components/4.30/assets" });
+import { setAssetPath as setCalciteComponentsAssetPath } from '@esri/calcite-components/dist/components';
+import "@esri/calcite-components/dist/components/calcite-scrim";
+
+setCodingComponentsAssetPath("https://js.arcgis.com/coding-components/4.30/assets");
+setCalciteComponentsAssetPath("https://js.arcgis.com/calcite-components/2.8.0/assets");
 
 createApp(App).mount('#app');

component-samples/coding-components/samples/webpack/README.md

@@ -8,4 +8,18 @@ Run `npm install` and then start adding modules.
 
 For a list of all available `npm` commands see `scripts` in `package.json`, e.g. `npm run build`.
 
+***Note:*** This sample demonstrates the recommended pattern for using components from the ArcGIS Map SDK for JavaScript by individually loading components.
 
+### Loading All Components
+The JavaScript Maps SDK also offers a convenience pattern useful for quick testing and prototyping. You can register all components at once using the following approach:
+
+```
+// Replace the individual imports with defineCustomElements()
+ import { defineCustomElements as defineCalciteElements } from "@esri/calcite-components/dist/loader";
+ import { defineCustomElements as defineCodingElements } from "@arcgis/coding-components/dist/loader";
+
+ defineCalciteElements(window, { resourcesUrl: "https://js.arcgis.com/calcite-components/2.8.5/assets" });
+ defineCodingElements(window, { resourcesUrl: "https://js.arcgis.com/coding-components/4.30/assets" });
+```
+
+For more details on using the SDK, please refer to the [ArcGIS Maps SDK for JavaScript documentation](https://developers.arcgis.com/javascript/latest/get-started-overview/).

component-samples/coding-components/samples/webpack/src/index.js

@@ -13,12 +13,15 @@
  * limitations under the License.
  */
 
-import { defineCustomElements as defineCalciteElements } from "@esri/calcite-components/dist/loader";
-import { defineCustomElements as defineCodingElements } from "@arcgis/coding-components/dist/loader";
+// Individual imports for each component
+import { setArcgisAssetPath as setCodingComponentsAssetPath } from "@arcgis/coding-components/dist/components";
+import "@arcgis/coding-components/dist/components/arcgis-arcade-editor";
 
-// define custom elements in the browser, and load the assets from the CDN
-defineCalciteElements(window, { resourcesUrl: "https://js.arcgis.com/calcite-components/2.8.5/assets" });
-defineCodingElements(window, { resourcesUrl: "https://js.arcgis.com/coding-components/4.30/assets" });
+import { setAssetPath as setCalciteComponentsAssetPath } from '@esri/calcite-components/dist/components';
+import "@esri/calcite-components/dist/components/calcite-scrim";
+
+setCodingComponentsAssetPath("https://js.arcgis.com/coding-components/4.30/assets");
+setCalciteComponentsAssetPath("https://js.arcgis.com/calcite-components/2.8.0/assets");
 
 import { loadData } from "./load-data";
 

component-samples/map-components/samples/react/README.md

@@ -10,4 +10,17 @@ The project was created using [`yarn create vite`](https://vitejs.dev/guide/#sca
 
 Run `npm install` and then start adding modules.
 
-For a list of all available `npm` commands see `scripts` in `package.json`, e.g. `npm run build`.
+For a list of all available `npm` commands see `scripts` in `package.json`, e.g. `npm run build`.
+
+***Note:*** This sample demonstrates the recommended pattern for using components from the ArcGIS Map SDK for JavaScript by individually loading components.
+
+### Loading All Components
+The JavaScript Maps SDK also offers a convenience pattern useful for quick testing and prototyping. You can register all components at once using the following approach:
+
+```
+// Replace the individual imports with defineCustomElements()
+ import { defineCustomElements } from "@arcgis/map-components/dist/loader";
+ defineCustomElements(window, { resourcesUrl: "https://js.arcgis.com/map-components/4.30/assets" });
+```
+
+For more details on using the SDK, please refer to the [ArcGIS Maps SDK for JavaScript documentation](https://developers.arcgis.com/javascript/latest/get-started-overview/).

component-samples/map-components/samples/react/src/index.tsx

@@ -17,10 +17,11 @@ import React from "react";
 import ReactDOM 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";
-import { defineCustomElements as defineMapElements } from "@arcgis/map-components/dist/loader";
-
-defineMapElements(window, { resourcesUrl: "https://js.arcgis.com/map-components/4.30/assets" });
 
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 root.render(

component-samples/map-components/samples/vite/README.md

@@ -10,4 +10,17 @@ The project was created using [`npm create vite`](https://vitejs.dev/guide/#scaf
 
 Run `npm install` and then start adding modules.
 
-For a list of all available `npm` commands see `scripts` in `package.json`, e.g. `npm run build`.
+For a list of all available `npm` commands see `scripts` in `package.json`, e.g. `npm run build`.
+
+***Note:*** This sample demonstrates the recommended pattern for using components from the ArcGIS Map SDK for JavaScript by individually loading components.
+
+### Loading All Components
+The JavaScript Maps SDK also offers a convenience pattern useful for quick testing and prototyping. You can register all components at once using the following approach:
+
+```
+// Replace the individual imports with defineCustomElements()
+ import { defineCustomElements } from "@arcgis/map-components/dist/loader";
+ defineCustomElements(window, { resourcesUrl: "https://js.arcgis.com/map-components/4.30/assets" });
+```
+
+For more details on using the SDK, please refer to the [ArcGIS Maps SDK for JavaScript documentation](https://developers.arcgis.com/javascript/latest/get-started-overview/).

component-samples/map-components/samples/vite/main.js

@@ -1,9 +1,11 @@
   import "./styles.css";
-  // Lazy loading ESM
-  import { defineCustomElements } from "@arcgis/map-components/dist/loader";
-  defineCustomElements(window, { resourcesUrl: "https://js.arcgis.com/map-components/4.30/assets" });
 
+  // Individual imports for each component
+  import "@arcgis/map-components/dist/components/arcgis-map";
+  import "@arcgis/map-components/dist/components/arcgis-legend";
+  import "@arcgis/map-components/dist/components/arcgis-search";
+
   const mapElement = document.querySelector('arcgis-map');
-  mapElement.addEventListener('arcgisViewReadyChange', event => { 
+  mapElement.addEventListener('arcgisViewReadyChange', event => {
     console.log('MapView ready', event);
   });

component-samples/map-components/samples/vue/README.md

@@ -10,4 +10,17 @@ The project was created using [`npm create vite`](https://vitejs.dev/guide/#scaf
 
 Run `npm install` and then start adding modules.
 
-For a list of all available `npm` commands see `scripts` in `package.json`, e.g. `npm run build`.
+For a list of all available `npm` commands see `scripts` in `package.json`, e.g. `npm run build`.
+
+***Note:*** This sample demonstrates the recommended pattern for using components from the ArcGIS Map SDK for JavaScript by individually loading components.
+
+### Loading All Components
+The JavaScript Maps SDK also offers a convenience pattern useful for quick testing and prototyping. You can register all components at once using the following approach:
+
+```
+// Replace the individual imports with defineCustomElements()
+ import { defineCustomElements } from "@arcgis/map-components/dist/loader";
+ defineCustomElements(window, { resourcesUrl: "https://js.arcgis.com/map-components/4.30/assets" });
+```
+
+For more details on using the SDK, please refer to the [ArcGIS Maps SDK for JavaScript documentation](https://developers.arcgis.com/javascript/latest/get-started-overview/).

component-samples/map-components/samples/vue/src/App.vue

@@ -1,7 +1,10 @@
 <script setup>
 import Map from "@/components/Map.vue";
-import { defineCustomElements } from "@arcgis/map-components/dist/loader";
-defineCustomElements(window, { resourcesUrl: "https://js.arcgis.com/map-components/4.30/assets" });
+
+// Individual imports for each component
+import "@arcgis/map-components/dist/components/arcgis-map";
+import "@arcgis/map-components/dist/components/arcgis-legend";
+import "@arcgis/map-components/dist/components/arcgis-search";
 </script>
 
 <template>

component-samples/map-components/samples/webpack/README.md

@@ -6,4 +6,17 @@ This repository showcases how to integrate the map components using webpack.
 
 Run `npm install` and then start adding modules.
 
-For a list of all available `npm` commands see `scripts` in `package.json`, e.g. `npm run build`.
+For a list of all available `npm` commands see `scripts` in `package.json`, e.g. `npm run build`.
+
+***Note:*** This sample demonstrates the recommended pattern for using components from the ArcGIS Map SDK for JavaScript by individually loading components.
+
+### Loading All Components
+The JavaScript Maps SDK also offers a convenience pattern useful for quick testing and prototyping. You can register all components at once using the following approach:
+
+```
+// Replace the individual imports with defineCustomElements()
+ import { defineCustomElements } from "@arcgis/map-components/dist/loader";
+ defineCustomElements(window, { resourcesUrl: "https://js.arcgis.com/map-components/4.30/assets" });
+```
+
+For more details on using the SDK, please refer to the [ArcGIS Maps SDK for JavaScript documentation](https://developers.arcgis.com/javascript/latest/get-started-overview/).

component-samples/map-components/samples/webpack/src/index.js

@@ -13,9 +13,10 @@
  * limitations under the License.
  */
 
-// Lazy loading ESM
-import { defineCustomElements } from "@arcgis/map-components/dist/loader";
-defineCustomElements(window, { resourcesUrl: "https://js.arcgis.com/map-components/4.30/assets" });
+// Individual imports for each component
+import "@arcgis/map-components/dist/components/arcgis-map";
+import "@arcgis/map-components/dist/components/arcgis-legend";
+import "@arcgis/map-components/dist/components/arcgis-search";
 
 const mapElement = document.querySelector("arcgis-map");
 mapElement.addEventListener("arcgisViewReadyChange", (event) => {