@arcgis/coding-components 4.29.0-beta.4 → 4.29.0-beta.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (79) hide show
  1. package/LICENSE.md +1 -1
  2. package/dist/arcgis-coding-components/arcgis-coding-components.esm.js +1 -1
  3. package/dist/arcgis-coding-components/assets/arcade-api/t9n/arcade-api.t9n.en.json +8 -8
  4. package/dist/arcgis-coding-components/assets/arcade-editor/t9n/arcade-editor.t9n.en.json +8 -8
  5. package/dist/arcgis-coding-components/assets/arcade-results/t9n/arcade-results.t9n.en.json +13 -13
  6. package/dist/arcgis-coding-components/assets/arcade-suggestions/t9n/arcade-suggestions.t9n.en.json +6 -6
  7. package/dist/arcgis-coding-components/assets/arcade-variables/t9n/arcade-variables.t9n.en.json +8 -8
  8. package/dist/arcgis-coding-components/assets/code-editor/arcade.worker.js +24 -22
  9. package/dist/arcgis-coding-components/assets/code-editor/css.worker.js +34 -35
  10. package/dist/arcgis-coding-components/assets/code-editor/editor.worker.js +7 -5
  11. package/dist/arcgis-coding-components/assets/code-editor/html.worker.js +41 -40
  12. package/dist/arcgis-coding-components/assets/code-editor/json.worker.js +24 -22
  13. package/dist/arcgis-coding-components/assets/code-editor/ts.worker.js +163 -161
  14. package/dist/arcgis-coding-components/index.esm.js +1 -1
  15. package/dist/arcgis-coding-components/{p-3eb641a2.js → p-15b09ea0.js} +2 -2
  16. package/dist/arcgis-coding-components/{p-74e0738d.js → p-2053efe5.js} +3 -3
  17. package/dist/arcgis-coding-components/{p-5fe913f0.js → p-4056fd39.js} +3 -3
  18. package/dist/arcgis-coding-components/p-5d670bd2.js +2 -0
  19. package/dist/arcgis-coding-components/p-6b0c537d.js +62 -0
  20. package/dist/arcgis-coding-components/{p-683e3dd4.js → p-739259a0.js} +1 -1
  21. package/dist/arcgis-coding-components/{p-96c3ebcb.js → p-8919c3fb.js} +2 -2
  22. package/dist/arcgis-coding-components/p-a67252ce.entry.js +1 -0
  23. package/dist/arcgis-coding-components/{p-7fb19e9b.js → p-a8cfb543.js} +2 -2
  24. package/dist/arcgis-coding-components/{p-27d03fb2.js → p-c66fdb0b.js} +2 -2
  25. package/dist/arcgis-coding-components/{p-98f0e116.js → p-cfff9500.js} +1 -1
  26. package/dist/arcgis-coding-components/{p-a152b643.js → p-f56ec2fe.js} +2 -2
  27. package/dist/cjs/{arcade-defaults-55c18abe.js → arcade-defaults-0bd884a4.js} +64439 -59097
  28. package/dist/cjs/{arcade-mode-bd1630dd.js → arcade-mode-7bc7978f.js} +2 -2
  29. package/dist/cjs/arcgis-arcade-api_6.cjs.entry.js +40 -32
  30. package/dist/cjs/arcgis-coding-components.cjs.js +3 -3
  31. package/dist/cjs/{css-3c67d381.js → css-7229b372.js} +1 -1
  32. package/dist/cjs/{cssMode-73d4ac47.js → cssMode-04695efd.js} +3 -3
  33. package/dist/cjs/{html-da599f39.js → html-4364b57b.js} +3 -3
  34. package/dist/cjs/{htmlMode-6f0883d3.js → htmlMode-3232d4d2.js} +3 -3
  35. package/dist/cjs/{index-f8a85eb8.js → index-6a382a34.js} +302 -64
  36. package/dist/cjs/index.cjs.js +2 -2
  37. package/dist/cjs/{javascript-92268a2f.js → javascript-1b17ffb0.js} +4 -4
  38. package/dist/cjs/{jsonMode-110ef3c9.js → jsonMode-85cfe5d7.js} +3 -3
  39. package/dist/cjs/loader.cjs.js +3 -12
  40. package/dist/cjs/{tsMode-8cb72aa2.js → tsMode-6ac3dd97.js} +3 -3
  41. package/dist/cjs/{typescript-edaad128.js → typescript-e8854a4f.js} +3 -3
  42. package/dist/components/arcade-api.js +10 -8
  43. package/dist/components/arcade-contribution.js +1 -1
  44. package/dist/components/arcade-results.js +13 -8
  45. package/dist/components/arcade-suggestions.js +11 -7
  46. package/dist/components/arcade-variables.js +10 -6
  47. package/dist/components/arcgis-arcade-editor.js +20 -14
  48. package/dist/components/code-editor.js +8 -4
  49. package/dist/components/index.d.ts +5 -8
  50. package/dist/components/index.js +1 -7
  51. package/dist/components/index2.js +2 -2
  52. package/dist/esm/{arcade-defaults-ac486973.js → arcade-defaults-145d902c.js} +64438 -59096
  53. package/dist/esm/{arcade-mode-fc719356.js → arcade-mode-4f74179e.js} +2 -2
  54. package/dist/esm/arcgis-arcade-api_6.entry.js +40 -32
  55. package/dist/esm/arcgis-coding-components.js +4 -4
  56. package/dist/esm/{css-9066b96a.js → css-ff1e9f8c.js} +1 -1
  57. package/dist/esm/{cssMode-f452e699.js → cssMode-93b88d81.js} +3 -3
  58. package/dist/esm/{html-7c0b7520.js → html-7d557330.js} +3 -3
  59. package/dist/esm/{htmlMode-200a28b3.js → htmlMode-e9b83ec7.js} +3 -3
  60. package/dist/esm/{index-d4ec142a.js → index-fd6b2fd8.js} +302 -64
  61. package/dist/esm/index.js +2 -2
  62. package/dist/esm/{javascript-44a7aba3.js → javascript-83c892dd.js} +4 -4
  63. package/dist/esm/{jsonMode-fb784fa5.js → jsonMode-5c5eb0e2.js} +3 -3
  64. package/dist/esm/loader.js +4 -13
  65. package/dist/esm/{tsMode-890f3141.js → tsMode-77877670.js} +3 -3
  66. package/dist/esm/{typescript-4b8bacca.js → typescript-dab44a94.js} +3 -3
  67. package/dist/loader/index.d.ts +2 -2
  68. package/dist/types/components/arcade-api/arcade-api.d.ts +3 -2
  69. package/dist/types/components/arcade-editor/arcade-editor.d.ts +3 -2
  70. package/dist/types/components/arcade-results/arcade-results.d.ts +3 -2
  71. package/dist/types/components/arcade-suggestions/arcade-suggestions.d.ts +3 -2
  72. package/dist/types/components/arcade-variables/arcade-variables.d.ts +3 -2
  73. package/dist/types/components.d.ts +78 -0
  74. package/dist/types/stencil-public-runtime.d.ts +53 -17
  75. package/package.json +26 -30
  76. package/dist/arcgis-coding-components/p-0fa0a06d.js +0 -2
  77. package/dist/arcgis-coding-components/p-2c5583d5.entry.js +0 -1
  78. package/dist/arcgis-coding-components/p-a388e974.js +0 -62
  79. package/dist/esm/polyfills/css-shim.js +0 -1
@@ -63,6 +63,13 @@ const XLINK_NS = 'http://www.w3.org/1999/xlink';
63
63
  */
64
64
  const EMPTY_OBJ = {};
65
65
  const isDef = (v) => v != null;
66
+ /**
67
+ * Check whether a value is a 'complex type', defined here as an object or a
68
+ * function.
69
+ *
70
+ * @param o the value to check
71
+ * @returns whether it's a complex type or not
72
+ */
66
73
  const isComplexType = (o) => {
67
74
  // https://jsperf.com/typeof-fn-object/5
68
75
  o = typeof o;
@@ -120,10 +127,10 @@ const h = (nodeName, vnodeData, ...children) => {
120
127
  };
121
128
  walk(children);
122
129
  if (vnodeData) {
123
- // normalize class / classname attributes
124
130
  if (vnodeData.key) {
125
131
  key = vnodeData.key;
126
132
  }
133
+ // normalize class / className attributes
127
134
  {
128
135
  const classData = vnodeData.className || vnodeData.class;
129
136
  if (classData) {
@@ -321,9 +328,9 @@ const registerStyle = (scopeId, cssText, allowCS) => {
321
328
  }
322
329
  styles.set(scopeId, style);
323
330
  };
324
- const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
331
+ const addStyle = (styleContainerNode, cmpMeta, mode) => {
325
332
  var _a;
326
- let scopeId = getScopeId(cmpMeta);
333
+ const scopeId = getScopeId(cmpMeta);
327
334
  const style = styles.get(scopeId);
328
335
  // if an element is NOT connected then getRootNode() will return the wrong root node
329
336
  // so the fallback is to always use the document for the root node in those cases
@@ -338,10 +345,8 @@ const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
338
345
  }
339
346
  if (!appliedStyles.has(scopeId)) {
340
347
  {
341
- {
342
- styleElm = doc.createElement('style');
343
- styleElm.innerHTML = style;
344
- }
348
+ styleElm = doc.createElement('style');
349
+ styleElm.innerHTML = style;
345
350
  // Apply CSP nonce to the style tag if it exists
346
351
  const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
347
352
  if (nonce != null) {
@@ -388,6 +393,21 @@ const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
388
393
  *
389
394
  * Modified for Stencil's compiler and vdom
390
395
  */
396
+ /**
397
+ * When running a VDom render set properties present on a VDom node onto the
398
+ * corresponding HTML element.
399
+ *
400
+ * Note that this function has special functionality for the `class`,
401
+ * `style`, `key`, and `ref` attributes, as well as event handlers (like
402
+ * `onClick`, etc). All others are just passed through as-is.
403
+ *
404
+ * @param elm the HTMLElement onto which attributes should be set
405
+ * @param memberName the name of the attribute to set
406
+ * @param oldValue the old value for the attribute
407
+ * @param newValue the new value for the attribute
408
+ * @param isSvg whether we're in an svg context or not
409
+ * @param flags bitflags for Vdom variables
410
+ */
391
411
  const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
392
412
  if (oldValue !== newValue) {
393
413
  let isProp = isMemberInElement(elm, memberName);
@@ -464,11 +484,19 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
464
484
  // except for the first character, we keep the event name case
465
485
  memberName = ln[2] + memberName.slice(3);
466
486
  }
467
- if (oldValue) {
468
- plt.rel(elm, memberName, oldValue, false);
469
- }
470
- if (newValue) {
471
- plt.ael(elm, memberName, newValue, false);
487
+ if (oldValue || newValue) {
488
+ // Need to account for "capture" events.
489
+ // If the event name ends with "Capture", we'll update the name to remove
490
+ // the "Capture" suffix and make sure the event listener is setup to handle the capture event.
491
+ const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
492
+ // Make sure we only replace the last instance of "Capture"
493
+ memberName = memberName.replace(CAPTURE_EVENT_REGEX, '');
494
+ if (oldValue) {
495
+ plt.rel(elm, memberName, oldValue, capture);
496
+ }
497
+ if (newValue) {
498
+ plt.ael(elm, memberName, newValue, capture);
499
+ }
472
500
  }
473
501
  }
474
502
  else {
@@ -530,6 +558,8 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
530
558
  };
531
559
  const parseClassListRegex = /\s/;
532
560
  const parseClassList = (value) => (!value ? [] : value.split(parseClassListRegex));
561
+ const CAPTURE_EVENT_SUFFIX = 'Capture';
562
+ const CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + '$');
533
563
  const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
534
564
  // if the element passed in is a shadow root, which is a document fragment
535
565
  // then we want to be adding attrs/props to the shadow root's "host" element
@@ -639,16 +669,17 @@ const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) =>
639
669
  * @param vnodes a list of virtual DOM nodes to remove
640
670
  * @param startIdx the index at which to start removing nodes (inclusive)
641
671
  * @param endIdx the index at which to stop removing nodes (inclusive)
642
- * @param vnode a VNode
643
- * @param elm an element
644
672
  */
645
- const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
646
- for (; startIdx <= endIdx; ++startIdx) {
647
- if ((vnode = vnodes[startIdx])) {
648
- elm = vnode.$elm$;
649
- callNodeRefs(vnode);
650
- // remove the vnode's element from the dom
651
- elm.remove();
673
+ const removeVnodes = (vnodes, startIdx, endIdx) => {
674
+ for (let index = startIdx; index <= endIdx; ++index) {
675
+ const vnode = vnodes[index];
676
+ if (vnode) {
677
+ const elm = vnode.$elm$;
678
+ nullifyVNodeRefs(vnode);
679
+ if (elm) {
680
+ // remove the vnode's element from the dom
681
+ elm.remove();
682
+ }
652
683
  }
653
684
  }
654
685
  };
@@ -936,10 +967,17 @@ const patch = (oldVNode, newVNode) => {
936
967
  elm.data = text;
937
968
  }
938
969
  };
939
- const callNodeRefs = (vNode) => {
970
+ /**
971
+ * 'Nullify' any VDom `ref` callbacks on a VDom node or its children by calling
972
+ * them with `null`. This signals that the DOM element corresponding to the VDom
973
+ * node has been removed from the DOM.
974
+ *
975
+ * @param vNode a virtual DOM node
976
+ */
977
+ const nullifyVNodeRefs = (vNode) => {
940
978
  {
941
979
  vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
942
- vNode.$children$ && vNode.$children$.map(callNodeRefs);
980
+ vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
943
981
  }
944
982
  };
945
983
  /**
@@ -953,17 +991,44 @@ const callNodeRefs = (vNode) => {
953
991
  * @param hostRef data needed to root and render the virtual DOM tree, such as
954
992
  * the DOM node into which it should be rendered.
955
993
  * @param renderFnResults the virtual DOM nodes to be rendered
994
+ * @param isInitialLoad whether or not this is the first call after page load
956
995
  */
957
- const renderVdom = (hostRef, renderFnResults) => {
996
+ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
958
997
  const hostElm = hostRef.$hostElement$;
959
998
  const cmpMeta = hostRef.$cmpMeta$;
960
999
  const oldVNode = hostRef.$vnode$ || newVNode(null, null);
1000
+ // if `renderFnResults` is a Host node then we can use it directly. If not,
1001
+ // we need to call `h` again to wrap the children of our component in a
1002
+ // 'dummy' Host node (well, an empty vnode) since `renderVdom` assumes
1003
+ // implicitly that the top-level vdom node is 1) an only child and 2)
1004
+ // contains attrs that need to be set on the host element.
961
1005
  const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
962
1006
  hostTagName = hostElm.tagName;
963
1007
  if (cmpMeta.$attrsToReflect$) {
964
1008
  rootVnode.$attrs$ = rootVnode.$attrs$ || {};
965
1009
  cmpMeta.$attrsToReflect$.map(([propName, attribute]) => (rootVnode.$attrs$[attribute] = hostElm[propName]));
966
1010
  }
1011
+ // On the first render and *only* on the first render we want to check for
1012
+ // any attributes set on the host element which are also set on the vdom
1013
+ // node. If we find them, we override the value on the VDom node attrs with
1014
+ // the value from the host element, which allows developers building apps
1015
+ // with Stencil components to override e.g. the `role` attribute on a
1016
+ // component even if it's already set on the `Host`.
1017
+ if (isInitialLoad && rootVnode.$attrs$) {
1018
+ for (const key of Object.keys(rootVnode.$attrs$)) {
1019
+ // We have a special implementation in `setAccessor` for `style` and
1020
+ // `class` which reconciles values coming from the VDom with values
1021
+ // already present on the DOM element, so we don't want to override those
1022
+ // attributes on the VDom tree with values from the host element if they
1023
+ // are present.
1024
+ //
1025
+ // Likewise, `ref` and `key` are special internal values for the Stencil
1026
+ // runtime and we don't want to override those either.
1027
+ if (hostElm.hasAttribute(key) && !['key', 'ref', 'style', 'class'].includes(key)) {
1028
+ rootVnode.$attrs$[key] = hostElm[key];
1029
+ }
1030
+ }
1031
+ }
967
1032
  rootVnode.$tag$ = null;
968
1033
  rootVnode.$flags$ |= 4 /* VNODE_FLAGS.isHost */;
969
1034
  hostRef.$vnode$ = rootVnode;
@@ -994,20 +1059,86 @@ const scheduleUpdate = (hostRef, isInitialLoad) => {
994
1059
  const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
995
1060
  return writeTask(dispatch) ;
996
1061
  };
1062
+ /**
1063
+ * Dispatch initial-render and update lifecycle hooks, enqueuing calls to
1064
+ * component lifecycle methods like `componentWillLoad` as well as
1065
+ * {@link updateComponent}, which will kick off the virtual DOM re-render.
1066
+ *
1067
+ * @param hostRef a reference to a host DOM node
1068
+ * @param isInitialLoad whether we're on the initial load or not
1069
+ * @returns an empty Promise which is used to enqueue a series of operations for
1070
+ * the component
1071
+ */
997
1072
  const dispatchHooks = (hostRef, isInitialLoad) => {
998
1073
  const endSchedule = createTime('scheduleUpdate', hostRef.$cmpMeta$.$tagName$);
999
1074
  const instance = hostRef.$lazyInstance$ ;
1000
- let promise;
1075
+ // We're going to use this variable together with `enqueue` to implement a
1076
+ // little promise-based queue. We start out with it `undefined`. When we add
1077
+ // the first function to the queue we'll set this variable to be that
1078
+ // function's return value. When we attempt to add subsequent values to the
1079
+ // queue we'll check that value and, if it was a `Promise`, we'll then chain
1080
+ // the new function off of that `Promise` using `.then()`. This will give our
1081
+ // queue two nice properties:
1082
+ //
1083
+ // 1. If all functions added to the queue are synchronous they'll be called
1084
+ // synchronously right away.
1085
+ // 2. If all functions added to the queue are asynchronous they'll all be
1086
+ // called in order after `dispatchHooks` exits.
1087
+ let maybePromise;
1001
1088
  if (isInitialLoad) {
1002
1089
  {
1003
- promise = safeCall(instance, 'componentWillLoad');
1090
+ // If `componentWillLoad` returns a `Promise` then we want to wait on
1091
+ // whatever's going on in that `Promise` before we launch into
1092
+ // rendering the component, doing other lifecycle stuff, etc. So
1093
+ // in that case we assign the returned promise to the variable we
1094
+ // declared above to hold a possible 'queueing' Promise
1095
+ maybePromise = safeCall(instance, 'componentWillLoad');
1004
1096
  }
1005
1097
  }
1006
1098
  endSchedule();
1007
- return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
1099
+ return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
1008
1100
  };
1101
+ /**
1102
+ * This function uses a Promise to implement a simple first-in, first-out queue
1103
+ * of functions to be called.
1104
+ *
1105
+ * The queue is ordered on the basis of the first argument. If it's
1106
+ * `undefined`, then nothing is on the queue yet, so the provided function can
1107
+ * be called synchronously (although note that this function may return a
1108
+ * `Promise`). The idea is that then the return value of that enqueueing
1109
+ * operation is kept around, so that if it was a `Promise` then subsequent
1110
+ * functions can be enqueued by calling this function again with that `Promise`
1111
+ * as the first argument.
1112
+ *
1113
+ * @param maybePromise either a `Promise` which should resolve before the next function is called or an 'empty' sentinel
1114
+ * @param fn a function to enqueue
1115
+ * @returns either a `Promise` or the return value of the provided function
1116
+ */
1117
+ const enqueue = (maybePromise, fn) => isPromisey(maybePromise) ? maybePromise.then(fn) : fn();
1118
+ /**
1119
+ * Check that a value is a `Promise`. To check, we first see if the value is an
1120
+ * instance of the `Promise` global. In a few circumstances, in particular if
1121
+ * the global has been overwritten, this is could be misleading, so we also do
1122
+ * a little 'duck typing' check to see if the `.then` property of the value is
1123
+ * defined and a function.
1124
+ *
1125
+ * @param maybePromise it might be a promise!
1126
+ * @returns whether it is or not
1127
+ */
1128
+ const isPromisey = (maybePromise) => maybePromise instanceof Promise ||
1129
+ (maybePromise && maybePromise.then && typeof maybePromise.then === 'function');
1130
+ /**
1131
+ * Update a component given reference to its host elements and so on.
1132
+ *
1133
+ * @param hostRef an object containing references to the element's host node,
1134
+ * VDom nodes, and other metadata
1135
+ * @param instance a reference to the underlying host element where it will be
1136
+ * rendered
1137
+ * @param isInitialLoad whether or not this function is being called as part of
1138
+ * the first render cycle
1139
+ */
1009
1140
  const updateComponent = async (hostRef, instance, isInitialLoad) => {
1010
- // updateComponent
1141
+ var _a;
1011
1142
  const elm = hostRef.$hostElement$;
1012
1143
  const endUpdate = createTime('update', hostRef.$cmpMeta$.$tagName$);
1013
1144
  const rc = elm['s-rc'];
@@ -1017,7 +1148,7 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
1017
1148
  }
1018
1149
  const endRender = createTime('render', hostRef.$cmpMeta$.$tagName$);
1019
1150
  {
1020
- callRender(hostRef, instance);
1151
+ callRender(hostRef, instance, elm, isInitialLoad);
1021
1152
  }
1022
1153
  if (rc) {
1023
1154
  // ok, so turns out there are some child host elements
@@ -1029,7 +1160,7 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
1029
1160
  endRender();
1030
1161
  endUpdate();
1031
1162
  {
1032
- const childrenPromises = elm['s-p'];
1163
+ const childrenPromises = (_a = elm['s-p']) !== null && _a !== void 0 ? _a : [];
1033
1164
  const postUpdate = () => postUpdateComponent(hostRef);
1034
1165
  if (childrenPromises.length === 0) {
1035
1166
  postUpdate();
@@ -1041,8 +1172,24 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
1041
1172
  }
1042
1173
  }
1043
1174
  };
1044
- const callRender = (hostRef, instance, elm) => {
1175
+ /**
1176
+ * Handle making the call to the VDom renderer with the proper context given
1177
+ * various build variables
1178
+ *
1179
+ * @param hostRef an object containing references to the element's host node,
1180
+ * VDom nodes, and other metadata
1181
+ * @param instance a reference to the underlying host element where it will be
1182
+ * rendered
1183
+ * @param elm the Host element for the component
1184
+ * @param isInitialLoad whether or not this function is being called as part of
1185
+ * @returns an empty promise
1186
+ */
1187
+ const callRender = (hostRef, instance, elm, isInitialLoad) => {
1045
1188
  try {
1189
+ /**
1190
+ * minification optimization: `allRenderFn` is `true` if all components have a `render`
1191
+ * method, so we can call the method immediately. If not, check before calling it.
1192
+ */
1046
1193
  instance = instance.render() ;
1047
1194
  {
1048
1195
  hostRef.$flags$ &= ~16 /* HOST_FLAGS.isQueuedForUpdate */;
@@ -1056,7 +1203,7 @@ const callRender = (hostRef, instance, elm) => {
1056
1203
  // or we need to update the css class/attrs on the host element
1057
1204
  // DOM WRITE!
1058
1205
  {
1059
- renderVdom(hostRef, instance);
1206
+ renderVdom(hostRef, instance, isInitialLoad);
1060
1207
  }
1061
1208
  }
1062
1209
  }
@@ -1119,6 +1266,16 @@ const appDidLoad = (who) => {
1119
1266
  }
1120
1267
  nextTick(() => emitEvent(win, 'appload', { detail: { namespace: NAMESPACE } }));
1121
1268
  };
1269
+ /**
1270
+ * Allows to safely call a method, e.g. `componentDidLoad`, on an instance,
1271
+ * e.g. custom element node. If a build figures out that e.g. no component
1272
+ * has a `componentDidLoad` method, the instance method gets removed from the
1273
+ * output bundle and this function returns `undefined`.
1274
+ * @param instance any object that may or may not contain methods
1275
+ * @param method method name
1276
+ * @param arg single arbitrary argument
1277
+ * @returns result of method call if it exists, otherwise `undefined`
1278
+ */
1122
1279
  const safeCall = (instance, method, arg) => {
1123
1280
  if (instance && instance[method]) {
1124
1281
  try {
@@ -1130,9 +1287,6 @@ const safeCall = (instance, method, arg) => {
1130
1287
  }
1131
1288
  return undefined;
1132
1289
  };
1133
- const then = (promise, thenFn) => {
1134
- return promise && promise.then ? promise.then(thenFn) : thenFn();
1135
- };
1136
1290
  const addHydratedFlag = (elm) => elm.setAttribute('hydrated', '')
1137
1291
  ;
1138
1292
  const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
@@ -1189,6 +1343,7 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
1189
1343
  * @returns a reference to the same constructor passed in (but now mutated)
1190
1344
  */
1191
1345
  const proxyComponent = (Cstr, cmpMeta, flags) => {
1346
+ var _a;
1192
1347
  if (cmpMeta.$members$) {
1193
1348
  if (Cstr.watchers) {
1194
1349
  cmpMeta.$watchers$ = Cstr.watchers;
@@ -1226,7 +1381,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
1226
1381
  });
1227
1382
  if ((flags & 1 /* PROXY_FLAGS.isElementConstructor */)) {
1228
1383
  const attrNameToPropName = new Map();
1229
- prototype.attributeChangedCallback = function (attrName, _oldValue, newValue) {
1384
+ prototype.attributeChangedCallback = function (attrName, oldValue, newValue) {
1230
1385
  plt.jmp(() => {
1231
1386
  const propName = attrNameToPropName.get(attrName);
1232
1387
  // In a web component lifecycle the attributeChangedCallback runs prior to connectedCallback
@@ -1249,12 +1404,12 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
1249
1404
  // customElements.define('my-component', MyComponent);
1250
1405
  // </script>
1251
1406
  // ```
1252
- // In this case if we do not unshadow here and use the value of the shadowing property, attributeChangedCallback
1407
+ // In this case if we do not un-shadow here and use the value of the shadowing property, attributeChangedCallback
1253
1408
  // will be called with `newValue = "some-value"` and will set the shadowed property (this.someAttribute = "another-value")
1254
1409
  // to the value that was set inline i.e. "some-value" from above example. When
1255
- // the connectedCallback attempts to unshadow it will use "some-value" as the initial value rather than "another-value"
1410
+ // the connectedCallback attempts to un-shadow it will use "some-value" as the initial value rather than "another-value"
1256
1411
  //
1257
- // The case where the attribute was NOT set inline but was not set programmatically shall be handled/unshadowed
1412
+ // The case where the attribute was NOT set inline but was not set programmatically shall be handled/un-shadowed
1258
1413
  // by connectedCallback as this attributeChangedCallback will not fire.
1259
1414
  //
1260
1415
  // https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
@@ -1274,31 +1429,70 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
1274
1429
  // `propName` to be converted to a `DOMString`, which may not be what we want for other primitive props.
1275
1430
  return;
1276
1431
  }
1432
+ else if (propName == null) {
1433
+ // At this point we should know this is not a "member", so we can treat it like watching an attribute
1434
+ // on a vanilla web component
1435
+ const hostRef = getHostRef(this);
1436
+ const flags = hostRef === null || hostRef === void 0 ? void 0 : hostRef.$flags$;
1437
+ // We only want to trigger the callback(s) if:
1438
+ // 1. The instance is ready
1439
+ // 2. The watchers are ready
1440
+ // 3. The value has changed
1441
+ if (!(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
1442
+ flags & 128 /* HOST_FLAGS.isWatchReady */ &&
1443
+ newValue !== oldValue) {
1444
+ const instance = hostRef.$lazyInstance$ ;
1445
+ const entry = cmpMeta.$watchers$[attrName];
1446
+ entry === null || entry === void 0 ? void 0 : entry.forEach((callbackName) => {
1447
+ if (instance[callbackName] != null) {
1448
+ instance[callbackName].call(instance, newValue, oldValue, attrName);
1449
+ }
1450
+ });
1451
+ }
1452
+ return;
1453
+ }
1277
1454
  this[propName] = newValue === null && typeof this[propName] === 'boolean' ? false : newValue;
1278
1455
  });
1279
1456
  };
1280
- // create an array of attributes to observe
1281
- // and also create a map of html attribute name to js property name
1282
- Cstr.observedAttributes = members
1283
- .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */) // filter to only keep props that should match attributes
1284
- .map(([propName, m]) => {
1285
- const attrName = m[1] || propName;
1286
- attrNameToPropName.set(attrName, propName);
1287
- if (m[0] & 512 /* MEMBER_FLAGS.ReflectAttr */) {
1288
- cmpMeta.$attrsToReflect$.push([propName, attrName]);
1289
- }
1290
- return attrName;
1291
- });
1457
+ // Create an array of attributes to observe
1458
+ // This list in comprised of all strings used within a `@Watch()` decorator
1459
+ // on a component as well as any Stencil-specific "members" (`@Prop()`s and `@State()`s).
1460
+ // As such, there is no way to guarantee type-safety here that a user hasn't entered
1461
+ // an invalid attribute.
1462
+ Cstr.observedAttributes = Array.from(new Set([
1463
+ ...Object.keys((_a = cmpMeta.$watchers$) !== null && _a !== void 0 ? _a : {}),
1464
+ ...members
1465
+ .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */)
1466
+ .map(([propName, m]) => {
1467
+ const attrName = m[1] || propName;
1468
+ attrNameToPropName.set(attrName, propName);
1469
+ if (m[0] & 512 /* MEMBER_FLAGS.ReflectAttr */) {
1470
+ cmpMeta.$attrsToReflect$.push([propName, attrName]);
1471
+ }
1472
+ return attrName;
1473
+ }),
1474
+ ]));
1292
1475
  }
1293
1476
  }
1294
1477
  return Cstr;
1295
1478
  };
1296
- const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
1479
+ /**
1480
+ * Initialize a Stencil component given a reference to its host element, its
1481
+ * runtime bookkeeping data structure, runtime metadata about the component,
1482
+ * and (optionally) an HMR version ID.
1483
+ *
1484
+ * @param elm a host element
1485
+ * @param hostRef the element's runtime bookkeeping object
1486
+ * @param cmpMeta runtime metadata for the Stencil component
1487
+ * @param hmrVersionId an (optional) HMR version ID
1488
+ */
1489
+ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
1490
+ let Cstr;
1297
1491
  // initializeComponent
1298
1492
  if ((hostRef.$flags$ & 32 /* HOST_FLAGS.hasInitializedComponent */) === 0) {
1493
+ // Let the runtime know that the component has been initialized
1494
+ hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;
1299
1495
  {
1300
- // we haven't initialized this element yet
1301
- hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;
1302
1496
  // lazy loaded components
1303
1497
  // request the component's implementation to be
1304
1498
  // wired up with the host element
@@ -1371,6 +1565,8 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
1371
1565
  schedule();
1372
1566
  }
1373
1567
  };
1568
+ const fireConnectedCallback = (instance) => {
1569
+ };
1374
1570
  const connectedCallback = (elm) => {
1375
1571
  if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
1376
1572
  const hostRef = getHostRef(elm);
@@ -1409,15 +1605,29 @@ const connectedCallback = (elm) => {
1409
1605
  initializeComponent(elm, hostRef, cmpMeta);
1410
1606
  }
1411
1607
  }
1608
+ else {
1609
+ // fire off connectedCallback() on component instance
1610
+ if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$lazyInstance$) ;
1611
+ else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$onReadyPromise$) {
1612
+ hostRef.$onReadyPromise$.then(() => fireConnectedCallback());
1613
+ }
1614
+ }
1412
1615
  endConnected();
1413
1616
  }
1414
1617
  };
1415
- const disconnectedCallback = (elm) => {
1618
+ const disconnectInstance = (instance) => {
1619
+ {
1620
+ safeCall(instance, 'disconnectedCallback');
1621
+ }
1622
+ };
1623
+ const disconnectedCallback = async (elm) => {
1416
1624
  if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
1417
1625
  const hostRef = getHostRef(elm);
1418
- const instance = hostRef.$lazyInstance$ ;
1419
- {
1420
- safeCall(instance, 'disconnectedCallback');
1626
+ if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$lazyInstance$) {
1627
+ disconnectInstance(hostRef.$lazyInstance$);
1628
+ }
1629
+ else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$onReadyPromise$) {
1630
+ hostRef.$onReadyPromise$.then(() => disconnectInstance(hostRef.$lazyInstance$));
1421
1631
  }
1422
1632
  }
1423
1633
  };
@@ -1437,6 +1647,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
1437
1647
  plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
1438
1648
  lazyBundles.map((lazyBundle) => {
1439
1649
  lazyBundle[1].map((compactMeta) => {
1650
+ var _a;
1440
1651
  const cmpMeta = {
1441
1652
  $flags$: compactMeta[0],
1442
1653
  $tagName$: compactMeta[1],
@@ -1450,7 +1661,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
1450
1661
  cmpMeta.$attrsToReflect$ = [];
1451
1662
  }
1452
1663
  {
1453
- cmpMeta.$watchers$ = {};
1664
+ cmpMeta.$watchers$ = (_a = compactMeta[4]) !== null && _a !== void 0 ? _a : {};
1454
1665
  }
1455
1666
  const tagName = cmpMeta.$tagName$;
1456
1667
  const HostElement = class extends HTMLElement {
@@ -1530,13 +1741,40 @@ const Fragment = (_, children) => children;
1530
1741
  * @returns void
1531
1742
  */
1532
1743
  const setNonce = (nonce) => (plt.$nonce$ = nonce);
1744
+ /**
1745
+ * A WeakMap mapping runtime component references to their corresponding host reference
1746
+ * instances.
1747
+ */
1533
1748
  const hostRefs = /*@__PURE__*/ new WeakMap();
1749
+ /**
1750
+ * Given a {@link d.RuntimeRef} retrieve the corresponding {@link d.HostRef}
1751
+ *
1752
+ * @param ref the runtime ref of interest
1753
+ * @returns the Host reference (if found) or undefined
1754
+ */
1534
1755
  const getHostRef = (ref) => hostRefs.get(ref);
1756
+ /**
1757
+ * Register a lazy instance with the {@link hostRefs} object so it's
1758
+ * corresponding {@link d.HostRef} can be retrieved later.
1759
+ *
1760
+ * @param lazyInstance the lazy instance of interest
1761
+ * @param hostRef that instances `HostRef` object
1762
+ * @returns a reference to the host ref WeakMap
1763
+ */
1535
1764
  const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
1536
- const registerHost = (elm, cmpMeta) => {
1765
+ /**
1766
+ * Register a host element for a Stencil component, setting up various metadata
1767
+ * and callbacks based on {@link BUILD} flags as well as the component's runtime
1768
+ * metadata.
1769
+ *
1770
+ * @param hostElement the host element to register
1771
+ * @param cmpMeta runtime metadata for that component
1772
+ * @returns a reference to the host ref WeakMap
1773
+ */
1774
+ const registerHost = (hostElement, cmpMeta) => {
1537
1775
  const hostRef = {
1538
1776
  $flags$: 0,
1539
- $hostElement$: elm,
1777
+ $hostElement$: hostElement,
1540
1778
  $cmpMeta$: cmpMeta,
1541
1779
  $instanceValues$: new Map(),
1542
1780
  };
@@ -1545,10 +1783,10 @@ const registerHost = (elm, cmpMeta) => {
1545
1783
  }
1546
1784
  {
1547
1785
  hostRef.$onReadyPromise$ = new Promise((r) => (hostRef.$onReadyResolve$ = r));
1548
- elm['s-p'] = [];
1549
- elm['s-rc'] = [];
1786
+ hostElement['s-p'] = [];
1787
+ hostElement['s-rc'] = [];
1550
1788
  }
1551
- return hostRefs.set(elm, hostRef);
1789
+ return hostRefs.set(hostElement, hostRef);
1552
1790
  };
1553
1791
  const isMemberInElement = (elm, memberName) => memberName in elm;
1554
1792
  const consoleError = (e, el) => (0, console.error)(e, el);
@@ -2,8 +2,8 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const arcadeDefaults = require('./arcade-defaults-55c18abe.js');
6
- require('./index-f8a85eb8.js');
5
+ const arcadeDefaults = require('./arcade-defaults-0bd884a4.js');
6
+ require('./index-6a382a34.js');
7
7
 
8
8
 
9
9
 
@@ -1,12 +1,12 @@
1
1
  'use strict';
2
2
 
3
- const typescript = require('./typescript-edaad128.js');
4
- require('./arcade-defaults-55c18abe.js');
5
- require('./index-f8a85eb8.js');
3
+ const typescript = require('./typescript-e8854a4f.js');
4
+ require('./arcade-defaults-0bd884a4.js');
5
+ require('./index-6a382a34.js');
6
6
 
7
7
  /*!-----------------------------------------------------------------------------
8
8
  * Copyright (c) Microsoft Corporation. All rights reserved.
9
- * Version: 0.39.0(ff3621a3fa6389873be5412d17554294ea1b0941)
9
+ * Version: 0.44.0(3e047efd345ff102c8c61b5398fb30845aaac166)
10
10
  * Released under the MIT license
11
11
  * https://github.com/microsoft/monaco-editor/blob/main/LICENSE.txt
12
12
  *-----------------------------------------------------------------------------*/
@@ -1,11 +1,11 @@
1
1
  'use strict';
2
2
 
3
- const arcadeDefaults = require('./arcade-defaults-55c18abe.js');
4
- require('./index-f8a85eb8.js');
3
+ const arcadeDefaults = require('./arcade-defaults-0bd884a4.js');
4
+ require('./index-6a382a34.js');
5
5
 
6
6
  /*!-----------------------------------------------------------------------------
7
7
  * Copyright (c) Microsoft Corporation. All rights reserved.
8
- * Version: 0.39.0(ff3621a3fa6389873be5412d17554294ea1b0941)
8
+ * Version: 0.44.0(3e047efd345ff102c8c61b5398fb30845aaac166)
9
9
  * Released under the MIT license
10
10
  * https://github.com/microsoft/monaco-editor/blob/main/LICENSE.txt
11
11
  *-----------------------------------------------------------------------------*/