@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.
- package/LICENSE.md +1 -1
- package/dist/arcgis-coding-components/arcgis-coding-components.esm.js +1 -1
- package/dist/arcgis-coding-components/assets/arcade-api/t9n/arcade-api.t9n.en.json +8 -8
- package/dist/arcgis-coding-components/assets/arcade-editor/t9n/arcade-editor.t9n.en.json +8 -8
- package/dist/arcgis-coding-components/assets/arcade-results/t9n/arcade-results.t9n.en.json +13 -13
- package/dist/arcgis-coding-components/assets/arcade-suggestions/t9n/arcade-suggestions.t9n.en.json +6 -6
- package/dist/arcgis-coding-components/assets/arcade-variables/t9n/arcade-variables.t9n.en.json +8 -8
- package/dist/arcgis-coding-components/assets/code-editor/arcade.worker.js +24 -22
- package/dist/arcgis-coding-components/assets/code-editor/css.worker.js +34 -35
- package/dist/arcgis-coding-components/assets/code-editor/editor.worker.js +7 -5
- package/dist/arcgis-coding-components/assets/code-editor/html.worker.js +41 -40
- package/dist/arcgis-coding-components/assets/code-editor/json.worker.js +24 -22
- package/dist/arcgis-coding-components/assets/code-editor/ts.worker.js +163 -161
- package/dist/arcgis-coding-components/index.esm.js +1 -1
- package/dist/arcgis-coding-components/{p-3eb641a2.js → p-15b09ea0.js} +2 -2
- package/dist/arcgis-coding-components/{p-74e0738d.js → p-2053efe5.js} +3 -3
- package/dist/arcgis-coding-components/{p-5fe913f0.js → p-4056fd39.js} +3 -3
- package/dist/arcgis-coding-components/p-5d670bd2.js +2 -0
- package/dist/arcgis-coding-components/p-6b0c537d.js +62 -0
- package/dist/arcgis-coding-components/{p-683e3dd4.js → p-739259a0.js} +1 -1
- package/dist/arcgis-coding-components/{p-96c3ebcb.js → p-8919c3fb.js} +2 -2
- package/dist/arcgis-coding-components/p-a67252ce.entry.js +1 -0
- package/dist/arcgis-coding-components/{p-7fb19e9b.js → p-a8cfb543.js} +2 -2
- package/dist/arcgis-coding-components/{p-27d03fb2.js → p-c66fdb0b.js} +2 -2
- package/dist/arcgis-coding-components/{p-98f0e116.js → p-cfff9500.js} +1 -1
- package/dist/arcgis-coding-components/{p-a152b643.js → p-f56ec2fe.js} +2 -2
- package/dist/cjs/{arcade-defaults-55c18abe.js → arcade-defaults-0bd884a4.js} +64439 -59097
- package/dist/cjs/{arcade-mode-bd1630dd.js → arcade-mode-7bc7978f.js} +2 -2
- package/dist/cjs/arcgis-arcade-api_6.cjs.entry.js +40 -32
- package/dist/cjs/arcgis-coding-components.cjs.js +3 -3
- package/dist/cjs/{css-3c67d381.js → css-7229b372.js} +1 -1
- package/dist/cjs/{cssMode-73d4ac47.js → cssMode-04695efd.js} +3 -3
- package/dist/cjs/{html-da599f39.js → html-4364b57b.js} +3 -3
- package/dist/cjs/{htmlMode-6f0883d3.js → htmlMode-3232d4d2.js} +3 -3
- package/dist/cjs/{index-f8a85eb8.js → index-6a382a34.js} +302 -64
- package/dist/cjs/index.cjs.js +2 -2
- package/dist/cjs/{javascript-92268a2f.js → javascript-1b17ffb0.js} +4 -4
- package/dist/cjs/{jsonMode-110ef3c9.js → jsonMode-85cfe5d7.js} +3 -3
- package/dist/cjs/loader.cjs.js +3 -12
- package/dist/cjs/{tsMode-8cb72aa2.js → tsMode-6ac3dd97.js} +3 -3
- package/dist/cjs/{typescript-edaad128.js → typescript-e8854a4f.js} +3 -3
- package/dist/components/arcade-api.js +10 -8
- package/dist/components/arcade-contribution.js +1 -1
- package/dist/components/arcade-results.js +13 -8
- package/dist/components/arcade-suggestions.js +11 -7
- package/dist/components/arcade-variables.js +10 -6
- package/dist/components/arcgis-arcade-editor.js +20 -14
- package/dist/components/code-editor.js +8 -4
- package/dist/components/index.d.ts +5 -8
- package/dist/components/index.js +1 -7
- package/dist/components/index2.js +2 -2
- package/dist/esm/{arcade-defaults-ac486973.js → arcade-defaults-145d902c.js} +64438 -59096
- package/dist/esm/{arcade-mode-fc719356.js → arcade-mode-4f74179e.js} +2 -2
- package/dist/esm/arcgis-arcade-api_6.entry.js +40 -32
- package/dist/esm/arcgis-coding-components.js +4 -4
- package/dist/esm/{css-9066b96a.js → css-ff1e9f8c.js} +1 -1
- package/dist/esm/{cssMode-f452e699.js → cssMode-93b88d81.js} +3 -3
- package/dist/esm/{html-7c0b7520.js → html-7d557330.js} +3 -3
- package/dist/esm/{htmlMode-200a28b3.js → htmlMode-e9b83ec7.js} +3 -3
- package/dist/esm/{index-d4ec142a.js → index-fd6b2fd8.js} +302 -64
- package/dist/esm/index.js +2 -2
- package/dist/esm/{javascript-44a7aba3.js → javascript-83c892dd.js} +4 -4
- package/dist/esm/{jsonMode-fb784fa5.js → jsonMode-5c5eb0e2.js} +3 -3
- package/dist/esm/loader.js +4 -13
- package/dist/esm/{tsMode-890f3141.js → tsMode-77877670.js} +3 -3
- package/dist/esm/{typescript-4b8bacca.js → typescript-dab44a94.js} +3 -3
- package/dist/loader/index.d.ts +2 -2
- package/dist/types/components/arcade-api/arcade-api.d.ts +3 -2
- package/dist/types/components/arcade-editor/arcade-editor.d.ts +3 -2
- package/dist/types/components/arcade-results/arcade-results.d.ts +3 -2
- package/dist/types/components/arcade-suggestions/arcade-suggestions.d.ts +3 -2
- package/dist/types/components/arcade-variables/arcade-variables.d.ts +3 -2
- package/dist/types/components.d.ts +78 -0
- package/dist/types/stencil-public-runtime.d.ts +53 -17
- package/package.json +26 -30
- package/dist/arcgis-coding-components/p-0fa0a06d.js +0 -2
- package/dist/arcgis-coding-components/p-2c5583d5.entry.js +0 -1
- package/dist/arcgis-coding-components/p-a388e974.js +0 -62
- 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
|
|
331
|
+
const addStyle = (styleContainerNode, cmpMeta, mode) => {
|
|
325
332
|
var _a;
|
|
326
|
-
|
|
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
|
-
|
|
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
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
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
|
|
646
|
-
for (
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
elm
|
|
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
|
-
|
|
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(
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
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,
|
|
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
|
|
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
|
|
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/
|
|
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
|
-
//
|
|
1281
|
-
//
|
|
1282
|
-
|
|
1283
|
-
|
|
1284
|
-
|
|
1285
|
-
|
|
1286
|
-
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
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
|
-
|
|
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$:
|
|
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
|
-
|
|
1549
|
-
|
|
1786
|
+
hostElement['s-p'] = [];
|
|
1787
|
+
hostElement['s-rc'] = [];
|
|
1550
1788
|
}
|
|
1551
|
-
return hostRefs.set(
|
|
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);
|
package/dist/cjs/index.cjs.js
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const arcadeDefaults = require('./arcade-defaults-
|
|
6
|
-
require('./index-
|
|
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-
|
|
4
|
-
require('./arcade-defaults-
|
|
5
|
-
require('./index-
|
|
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.
|
|
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-
|
|
4
|
-
require('./index-
|
|
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.
|
|
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
|
*-----------------------------------------------------------------------------*/
|