Help rewriting a custom widget to use the new web components

Question

I have a custom widget which I am using in Experience Builder developer edition (currently at version 1.17). It is based on a sample custom class-based widget that was itself built on the esri Measurement widget. It is fairly complex and uses react state frequently. I just spent the last couple years re-formatting what I had created for Web App builder (with Javascript 3.x) in order to work with the Experience Builder react widget pattern and the Javascript 4.x API. It was a real struggle but it now works well.

However, now I am very dismayed to see that all my work is about to be deprecated and the changes involved in transitioning to the new recommended web component format seem incredibly daunting!

I am really at a loss here as to how to begin to rewrite everything. The examples given for web components are fine, but they don't begin to show how to transition all the functionality of an existing class-based widget.

Where do I begin? Are there better examples anywhere as to how to transition piece by piece? Any help would be appreciated!

JeffreyThompson2 · Answer

If it's working and you don't plan to upgrade, you don't have to do anything. At 1.23, you can expect two things to break.

import Measurement from 'esri/widgets/Measurement';

The Measurement Widget will need to be converted to work off of Components.

import SketchViewModel from "@arcgis/core/widgets/Sketch/SketchViewModel.js";

The SketchViewModel will likely require importing from a different path, but the JavaScript API team hasn't decided what it will be, so you can't fix this even if you wanted to.

EMiller_2 · Answer

@RobertScheitlin @JeffreyThompson2 @WesleyO Revisiting this and boy I am still confused. I have installed Experience Builder Developer Edition 1.20 now and I am seeing a few things marked as deprecated in my VS Code widget.tsx but there do not seem to be any fixes. My custom widgets still seem to work fine and there are no console warnings about deprecation in my chrome browser. How can I know how to change/update? I think probably much of what I have built is going to break but I don't understand what I need to change. As an example of a bit of my current widget code, here are the imports and the widget definition. I'm sure much is old/frowned upon now. Can someone help me understand how to begin to re-construct and also to even know what needs to change? Thanks again for any help. import {React, AllWidgetProps, jsx} from 'jimu-core'; import {Button, WidgetPlaceholder, utils} from 'jimu-ui'; import { IMConfig } from '../config'; import {JimuMapView, JimuMapViewComponent} from 'jimu-arcgis'; import Measurement from 'esri/widgets/Measurement'; import SketchViewModel from "@arcgis/core/widgets/Sketch/SketchViewModel.js"; import FeatureLayer from 'esri/layers/FeatureLayer'; import GraphicsLayer from "esri/layers/GraphicsLayer"; import Graphic from "esri/Graphic"; import {getStyle} from './lib/style'; import defaultMessages from './translations/default'; import PictureMarkerSymbol from 'esri/symbols/PictureMarkerSymbol'; import esriRequest from "esri/request" import Point from 'esri/geometry/Point'; export default class Widget extends React.PureComponent, any, State> { apiWidgetContainer: React.RefObject; locationDiv: React.RefObject; myWidget: Measurement; viewClickHandler: IHandle; mapView: __esri.MapView | __esri.SceneView; drawLayer: GraphicsLayer; pointSymbol: PictureMarkerSymbol; sketchViewModel: SketchViewModel; snapLayer: FeatureLayer;

EMiller_2 · Answer

Thanks very much for both of your replies -- looking at some of the links you provided, I have a little more hope that the updates won't be as drastic as I had feared, and hopefully I can keep using most of what I built. I guess time will tell as I upgrade to version 1.19 and start to dig in. As I said before, the problem for me is not so much about starting fresh with all the new standalone examples -- those examples don't help me so much --, it is more about updating an existing widget that already works in Experience Builder, and understanding what is going to need to change. Onward!