@sankhyalabs/sankhyablocks 1.3.0 → 1.3.3
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/dist/cjs/{index-4720dab8.js → index-8272993f.js} +439 -7
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/sankhyablocks.cjs.js +2 -2
- package/dist/cjs/snk-application.cjs.entry.js +227 -57
- package/dist/cjs/snk-pesquisa.cjs.entry.js +19 -0
- package/dist/cjs/teste-pesquisa.cjs.entry.js +37 -0
- package/dist/collection/collection-manifest.json +3 -1
- package/dist/collection/components/snk-application/snk-application.js +104 -3
- package/dist/collection/components/snk-pesquisa/snk-pesquisa.css +3 -0
- package/dist/collection/components/snk-pesquisa/snk-pesquisa.js +74 -0
- package/dist/collection/components/teste-pesquisa/teste-pesquisa.css +3 -0
- package/dist/collection/components/teste-pesquisa/teste-pesquisa.js +33 -0
- package/dist/collection/lib/http/data-fetcher/DataFetcher.js +47 -0
- package/dist/collection/lib/http/data-fetcher/fetchers/dataunit-fetcher.js +17 -16
- package/dist/collection/lib/http/data-fetcher/fetchers/pesquisa-fetcher.js +82 -0
- package/dist/collection/lib/workspace/workspace.js +2 -1
- package/dist/components/snk-application.js +1 -7089
- package/dist/components/snk-application2.js +7269 -0
- package/dist/components/snk-pesquisa.d.ts +11 -0
- package/dist/components/snk-pesquisa.js +6 -0
- package/dist/components/snk-pesquisa2.js +34 -0
- package/dist/components/teste-pesquisa.d.ts +11 -0
- package/dist/components/teste-pesquisa.js +63 -0
- package/dist/esm/{index-72d4e2e0.js → index-427447f8.js} +439 -8
- package/dist/esm/loader.js +2 -2
- package/dist/esm/sankhyablocks.js +2 -2
- package/dist/esm/snk-application.entry.js +228 -58
- package/dist/esm/snk-pesquisa.entry.js +15 -0
- package/dist/esm/teste-pesquisa.entry.js +33 -0
- package/dist/sankhyablocks/p-106c4d7b.entry.js +63 -0
- package/dist/sankhyablocks/p-91ca1a98.entry.js +1 -0
- package/dist/sankhyablocks/p-e6ba985e.entry.js +1 -0
- package/dist/sankhyablocks/p-ee5a384b.js +2 -0
- package/dist/sankhyablocks/sankhyablocks.esm.js +1 -1
- package/dist/types/components/snk-application/snk-application.d.ts +8 -0
- package/dist/types/components/snk-pesquisa/snk-pesquisa.d.ts +7 -0
- package/dist/types/components/teste-pesquisa/teste-pesquisa.d.ts +6 -0
- package/dist/types/components.d.ts +34 -0
- package/dist/types/lib/http/data-fetcher/DataFetcher.d.ts +3 -0
- package/dist/types/lib/http/data-fetcher/fetchers/dataunit-fetcher.d.ts +1 -1
- package/dist/types/lib/http/data-fetcher/fetchers/pesquisa-fetcher.d.ts +17 -0
- package/package.json +9 -5
- package/react/components.d.ts +2 -0
- package/react/components.js +2 -0
- package/react/components.js.map +1 -1
- package/dist/sankhyablocks/p-5d8ddbda.entry.js +0 -57
- package/dist/sankhyablocks/p-a33afc3b.js +0 -2
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
const NAMESPACE = 'sankhyablocks';
|
|
2
2
|
|
|
3
3
|
let scopeId;
|
|
4
|
+
let hostTagName;
|
|
5
|
+
let isSvgMode = false;
|
|
4
6
|
let queuePending = false;
|
|
5
7
|
const win = typeof window !== 'undefined' ? window : {};
|
|
6
8
|
const doc = win.document || { head: {} };
|
|
@@ -88,7 +90,7 @@ const attachStyles = (hostRef) => {
|
|
|
88
90
|
const elm = hostRef.$hostElement$;
|
|
89
91
|
const flags = cmpMeta.$flags$;
|
|
90
92
|
const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
|
|
91
|
-
const scopeId = addStyle(elm.getRootNode(), cmpMeta);
|
|
93
|
+
const scopeId = addStyle(elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta);
|
|
92
94
|
if (flags & 10 /* needsScopedEncapsulation */) {
|
|
93
95
|
// only required when we're NOT using native shadow dom (slot)
|
|
94
96
|
// or this browser doesn't support native shadow dom
|
|
@@ -106,6 +108,14 @@ const attachStyles = (hostRef) => {
|
|
|
106
108
|
endAttachStyles();
|
|
107
109
|
};
|
|
108
110
|
const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
|
|
111
|
+
/**
|
|
112
|
+
* Default style mode id
|
|
113
|
+
*/
|
|
114
|
+
/**
|
|
115
|
+
* Reusable empty obj/array
|
|
116
|
+
* Don't add values to these!!
|
|
117
|
+
*/
|
|
118
|
+
const EMPTY_OBJ = {};
|
|
109
119
|
const isDef = (v) => v != null;
|
|
110
120
|
const isComplexType = (o) => {
|
|
111
121
|
// https://jsperf.com/typeof-fn-object/5
|
|
@@ -166,19 +176,146 @@ const newVNode = (tag, text) => {
|
|
|
166
176
|
$elm$: null,
|
|
167
177
|
$children$: null,
|
|
168
178
|
};
|
|
179
|
+
{
|
|
180
|
+
vnode.$attrs$ = null;
|
|
181
|
+
}
|
|
169
182
|
return vnode;
|
|
170
183
|
};
|
|
171
184
|
const Host = {};
|
|
172
185
|
const isHost = (node) => node && node.$tag$ === Host;
|
|
186
|
+
/**
|
|
187
|
+
* Production setAccessor() function based on Preact by
|
|
188
|
+
* Jason Miller (@developit)
|
|
189
|
+
* Licensed under the MIT License
|
|
190
|
+
* https://github.com/developit/preact/blob/master/LICENSE
|
|
191
|
+
*
|
|
192
|
+
* Modified for Stencil's compiler and vdom
|
|
193
|
+
*/
|
|
194
|
+
const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
|
|
195
|
+
if (oldValue !== newValue) {
|
|
196
|
+
let isProp = isMemberInElement(elm, memberName);
|
|
197
|
+
let ln = memberName.toLowerCase();
|
|
198
|
+
if (memberName === 'ref') {
|
|
199
|
+
// minifier will clean this up
|
|
200
|
+
if (newValue) {
|
|
201
|
+
newValue(elm);
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
else if ((!isProp ) &&
|
|
205
|
+
memberName[0] === 'o' &&
|
|
206
|
+
memberName[1] === 'n') {
|
|
207
|
+
// Event Handlers
|
|
208
|
+
// so if the member name starts with "on" and the 3rd characters is
|
|
209
|
+
// a capital letter, and it's not already a member on the element,
|
|
210
|
+
// then we're assuming it's an event listener
|
|
211
|
+
if (memberName[2] === '-') {
|
|
212
|
+
// on- prefixed events
|
|
213
|
+
// allows to be explicit about the dom event to listen without any magic
|
|
214
|
+
// under the hood:
|
|
215
|
+
// <my-cmp on-click> // listens for "click"
|
|
216
|
+
// <my-cmp on-Click> // listens for "Click"
|
|
217
|
+
// <my-cmp on-ionChange> // listens for "ionChange"
|
|
218
|
+
// <my-cmp on-EVENTS> // listens for "EVENTS"
|
|
219
|
+
memberName = memberName.slice(3);
|
|
220
|
+
}
|
|
221
|
+
else if (isMemberInElement(win, ln)) {
|
|
222
|
+
// standard event
|
|
223
|
+
// the JSX attribute could have been "onMouseOver" and the
|
|
224
|
+
// member name "onmouseover" is on the window's prototype
|
|
225
|
+
// so let's add the listener "mouseover", which is all lowercased
|
|
226
|
+
memberName = ln.slice(2);
|
|
227
|
+
}
|
|
228
|
+
else {
|
|
229
|
+
// custom event
|
|
230
|
+
// the JSX attribute could have been "onMyCustomEvent"
|
|
231
|
+
// so let's trim off the "on" prefix and lowercase the first character
|
|
232
|
+
// and add the listener "myCustomEvent"
|
|
233
|
+
// except for the first character, we keep the event name case
|
|
234
|
+
memberName = ln[2] + memberName.slice(3);
|
|
235
|
+
}
|
|
236
|
+
if (oldValue) {
|
|
237
|
+
plt.rel(elm, memberName, oldValue, false);
|
|
238
|
+
}
|
|
239
|
+
if (newValue) {
|
|
240
|
+
plt.ael(elm, memberName, newValue, false);
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
else {
|
|
244
|
+
// Set property if it exists and it's not a SVG
|
|
245
|
+
const isComplex = isComplexType(newValue);
|
|
246
|
+
if ((isProp || (isComplex && newValue !== null)) && !isSvg) {
|
|
247
|
+
try {
|
|
248
|
+
if (!elm.tagName.includes('-')) {
|
|
249
|
+
const n = newValue == null ? '' : newValue;
|
|
250
|
+
// Workaround for Safari, moving the <input> caret when re-assigning the same valued
|
|
251
|
+
if (memberName === 'list') {
|
|
252
|
+
isProp = false;
|
|
253
|
+
}
|
|
254
|
+
else if (oldValue == null || elm[memberName] != n) {
|
|
255
|
+
elm[memberName] = n;
|
|
256
|
+
}
|
|
257
|
+
}
|
|
258
|
+
else {
|
|
259
|
+
elm[memberName] = newValue;
|
|
260
|
+
}
|
|
261
|
+
}
|
|
262
|
+
catch (e) { }
|
|
263
|
+
}
|
|
264
|
+
if (newValue == null || newValue === false) {
|
|
265
|
+
if (newValue !== false || elm.getAttribute(memberName) === '') {
|
|
266
|
+
{
|
|
267
|
+
elm.removeAttribute(memberName);
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex) {
|
|
272
|
+
newValue = newValue === true ? '' : newValue;
|
|
273
|
+
{
|
|
274
|
+
elm.setAttribute(memberName, newValue);
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
};
|
|
280
|
+
const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
|
|
281
|
+
// if the element passed in is a shadow root, which is a document fragment
|
|
282
|
+
// then we want to be adding attrs/props to the shadow root's "host" element
|
|
283
|
+
// if it's not a shadow root, then we add attrs/props to the same element
|
|
284
|
+
const elm = newVnode.$elm$.nodeType === 11 /* DocumentFragment */ && newVnode.$elm$.host
|
|
285
|
+
? newVnode.$elm$.host
|
|
286
|
+
: newVnode.$elm$;
|
|
287
|
+
const oldVnodeAttrs = (oldVnode && oldVnode.$attrs$) || EMPTY_OBJ;
|
|
288
|
+
const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;
|
|
289
|
+
{
|
|
290
|
+
// remove attributes no longer present on the vnode by setting them to undefined
|
|
291
|
+
for (memberName in oldVnodeAttrs) {
|
|
292
|
+
if (!(memberName in newVnodeAttrs)) {
|
|
293
|
+
setAccessor(elm, memberName, oldVnodeAttrs[memberName], undefined, isSvgMode, newVnode.$flags$);
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
}
|
|
297
|
+
// add new & update changed attributes
|
|
298
|
+
for (memberName in newVnodeAttrs) {
|
|
299
|
+
setAccessor(elm, memberName, oldVnodeAttrs[memberName], newVnodeAttrs[memberName], isSvgMode, newVnode.$flags$);
|
|
300
|
+
}
|
|
301
|
+
};
|
|
173
302
|
const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
|
|
174
303
|
// tslint:disable-next-line: prefer-const
|
|
175
304
|
const newVNode = newParentVNode.$children$[childIndex];
|
|
176
305
|
let i = 0;
|
|
177
306
|
let elm;
|
|
178
307
|
let childNode;
|
|
179
|
-
{
|
|
308
|
+
if (newVNode.$text$ !== null) {
|
|
309
|
+
// create text node
|
|
310
|
+
elm = newVNode.$elm$ = doc.createTextNode(newVNode.$text$);
|
|
311
|
+
}
|
|
312
|
+
else {
|
|
180
313
|
// create element
|
|
181
314
|
elm = newVNode.$elm$ = (doc.createElement(newVNode.$tag$));
|
|
315
|
+
// add css classes, attrs, props, listeners, etc.
|
|
316
|
+
{
|
|
317
|
+
updateElement(null, newVNode, isSvgMode);
|
|
318
|
+
}
|
|
182
319
|
if (isDef(scopeId) && elm['s-si'] !== scopeId) {
|
|
183
320
|
// if there is a scopeId and this is the initial render
|
|
184
321
|
// then let's add the scopeId as a css class
|
|
@@ -201,6 +338,9 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
|
|
|
201
338
|
const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
|
|
202
339
|
let containerElm = (parentElm);
|
|
203
340
|
let childNode;
|
|
341
|
+
if (containerElm.shadowRoot && containerElm.tagName === hostTagName) {
|
|
342
|
+
containerElm = containerElm.shadowRoot;
|
|
343
|
+
}
|
|
204
344
|
for (; startIdx <= endIdx; ++startIdx) {
|
|
205
345
|
if (vnodes[startIdx]) {
|
|
206
346
|
childNode = createElm(null, parentVNode, startIdx);
|
|
@@ -211,25 +351,144 @@ const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) =>
|
|
|
211
351
|
}
|
|
212
352
|
}
|
|
213
353
|
};
|
|
354
|
+
const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
|
|
355
|
+
for (; startIdx <= endIdx; ++startIdx) {
|
|
356
|
+
if ((vnode = vnodes[startIdx])) {
|
|
357
|
+
elm = vnode.$elm$;
|
|
358
|
+
callNodeRefs(vnode);
|
|
359
|
+
// remove the vnode's element from the dom
|
|
360
|
+
elm.remove();
|
|
361
|
+
}
|
|
362
|
+
}
|
|
363
|
+
};
|
|
364
|
+
const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
|
|
365
|
+
let oldStartIdx = 0;
|
|
366
|
+
let newStartIdx = 0;
|
|
367
|
+
let oldEndIdx = oldCh.length - 1;
|
|
368
|
+
let oldStartVnode = oldCh[0];
|
|
369
|
+
let oldEndVnode = oldCh[oldEndIdx];
|
|
370
|
+
let newEndIdx = newCh.length - 1;
|
|
371
|
+
let newStartVnode = newCh[0];
|
|
372
|
+
let newEndVnode = newCh[newEndIdx];
|
|
373
|
+
let node;
|
|
374
|
+
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
|
|
375
|
+
if (oldStartVnode == null) {
|
|
376
|
+
// Vnode might have been moved left
|
|
377
|
+
oldStartVnode = oldCh[++oldStartIdx];
|
|
378
|
+
}
|
|
379
|
+
else if (oldEndVnode == null) {
|
|
380
|
+
oldEndVnode = oldCh[--oldEndIdx];
|
|
381
|
+
}
|
|
382
|
+
else if (newStartVnode == null) {
|
|
383
|
+
newStartVnode = newCh[++newStartIdx];
|
|
384
|
+
}
|
|
385
|
+
else if (newEndVnode == null) {
|
|
386
|
+
newEndVnode = newCh[--newEndIdx];
|
|
387
|
+
}
|
|
388
|
+
else if (isSameVnode(oldStartVnode, newStartVnode)) {
|
|
389
|
+
patch(oldStartVnode, newStartVnode);
|
|
390
|
+
oldStartVnode = oldCh[++oldStartIdx];
|
|
391
|
+
newStartVnode = newCh[++newStartIdx];
|
|
392
|
+
}
|
|
393
|
+
else if (isSameVnode(oldEndVnode, newEndVnode)) {
|
|
394
|
+
patch(oldEndVnode, newEndVnode);
|
|
395
|
+
oldEndVnode = oldCh[--oldEndIdx];
|
|
396
|
+
newEndVnode = newCh[--newEndIdx];
|
|
397
|
+
}
|
|
398
|
+
else if (isSameVnode(oldStartVnode, newEndVnode)) {
|
|
399
|
+
patch(oldStartVnode, newEndVnode);
|
|
400
|
+
parentElm.insertBefore(oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling);
|
|
401
|
+
oldStartVnode = oldCh[++oldStartIdx];
|
|
402
|
+
newEndVnode = newCh[--newEndIdx];
|
|
403
|
+
}
|
|
404
|
+
else if (isSameVnode(oldEndVnode, newStartVnode)) {
|
|
405
|
+
patch(oldEndVnode, newStartVnode);
|
|
406
|
+
parentElm.insertBefore(oldEndVnode.$elm$, oldStartVnode.$elm$);
|
|
407
|
+
oldEndVnode = oldCh[--oldEndIdx];
|
|
408
|
+
newStartVnode = newCh[++newStartIdx];
|
|
409
|
+
}
|
|
410
|
+
else {
|
|
411
|
+
{
|
|
412
|
+
// new element
|
|
413
|
+
node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx);
|
|
414
|
+
newStartVnode = newCh[++newStartIdx];
|
|
415
|
+
}
|
|
416
|
+
if (node) {
|
|
417
|
+
{
|
|
418
|
+
oldStartVnode.$elm$.parentNode.insertBefore(node, oldStartVnode.$elm$);
|
|
419
|
+
}
|
|
420
|
+
}
|
|
421
|
+
}
|
|
422
|
+
}
|
|
423
|
+
if (oldStartIdx > oldEndIdx) {
|
|
424
|
+
addVnodes(parentElm, newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].$elm$, newVNode, newCh, newStartIdx, newEndIdx);
|
|
425
|
+
}
|
|
426
|
+
else if (newStartIdx > newEndIdx) {
|
|
427
|
+
removeVnodes(oldCh, oldStartIdx, oldEndIdx);
|
|
428
|
+
}
|
|
429
|
+
};
|
|
430
|
+
const isSameVnode = (vnode1, vnode2) => {
|
|
431
|
+
// compare if two vnode to see if they're "technically" the same
|
|
432
|
+
// need to have the same element tag, and same key to be the same
|
|
433
|
+
if (vnode1.$tag$ === vnode2.$tag$) {
|
|
434
|
+
return true;
|
|
435
|
+
}
|
|
436
|
+
return false;
|
|
437
|
+
};
|
|
214
438
|
const patch = (oldVNode, newVNode) => {
|
|
215
439
|
const elm = (newVNode.$elm$ = oldVNode.$elm$);
|
|
440
|
+
const oldChildren = oldVNode.$children$;
|
|
216
441
|
const newChildren = newVNode.$children$;
|
|
217
|
-
|
|
218
|
-
|
|
442
|
+
const text = newVNode.$text$;
|
|
443
|
+
if (text === null) {
|
|
444
|
+
// element node
|
|
445
|
+
{
|
|
446
|
+
{
|
|
447
|
+
// either this is the first render of an element OR it's an update
|
|
448
|
+
// AND we already know it's possible it could have changed
|
|
449
|
+
// this updates the element's css classes, attrs, props, listeners, etc.
|
|
450
|
+
updateElement(oldVNode, newVNode, isSvgMode);
|
|
451
|
+
}
|
|
452
|
+
}
|
|
453
|
+
if (oldChildren !== null && newChildren !== null) {
|
|
454
|
+
// looks like there's child vnodes for both the old and new vnodes
|
|
455
|
+
updateChildren(elm, oldChildren, newVNode, newChildren);
|
|
456
|
+
}
|
|
457
|
+
else if (newChildren !== null) {
|
|
458
|
+
// no old child vnodes, but there are new child vnodes to add
|
|
459
|
+
if (oldVNode.$text$ !== null) {
|
|
460
|
+
// the old vnode was text, so be sure to clear it out
|
|
461
|
+
elm.textContent = '';
|
|
462
|
+
}
|
|
219
463
|
// add the new vnode children
|
|
220
464
|
addVnodes(elm, null, newVNode, newChildren, 0, newChildren.length - 1);
|
|
221
465
|
}
|
|
222
|
-
else
|
|
466
|
+
else if (oldChildren !== null) {
|
|
467
|
+
// no new child vnodes, but there are old child vnodes to remove
|
|
468
|
+
removeVnodes(oldChildren, 0, oldChildren.length - 1);
|
|
469
|
+
}
|
|
470
|
+
}
|
|
471
|
+
else if (oldVNode.$text$ !== text) {
|
|
472
|
+
// update the text content for the text only vnode
|
|
473
|
+
// and also only if the text is different than before
|
|
474
|
+
elm.data = text;
|
|
475
|
+
}
|
|
476
|
+
};
|
|
477
|
+
const callNodeRefs = (vNode) => {
|
|
478
|
+
{
|
|
479
|
+
vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
|
|
480
|
+
vNode.$children$ && vNode.$children$.map(callNodeRefs);
|
|
223
481
|
}
|
|
224
482
|
};
|
|
225
483
|
const renderVdom = (hostRef, renderFnResults) => {
|
|
226
484
|
const hostElm = hostRef.$hostElement$;
|
|
227
485
|
const oldVNode = hostRef.$vnode$ || newVNode(null, null);
|
|
228
486
|
const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
|
|
487
|
+
hostTagName = hostElm.tagName;
|
|
229
488
|
rootVnode.$tag$ = null;
|
|
230
489
|
rootVnode.$flags$ |= 4 /* isHost */;
|
|
231
490
|
hostRef.$vnode$ = rootVnode;
|
|
232
|
-
rootVnode.$elm$ = oldVNode.$elm$ = (hostElm);
|
|
491
|
+
rootVnode.$elm$ = oldVNode.$elm$ = (hostElm.shadowRoot || hostElm );
|
|
233
492
|
{
|
|
234
493
|
scopeId = hostElm['s-sc'];
|
|
235
494
|
}
|
|
@@ -268,6 +527,9 @@ const attachToAncestor = (hostRef, ancestorComponent) => {
|
|
|
268
527
|
}
|
|
269
528
|
};
|
|
270
529
|
const scheduleUpdate = (hostRef, isInitialLoad) => {
|
|
530
|
+
{
|
|
531
|
+
hostRef.$flags$ |= 16 /* isQueuedForUpdate */;
|
|
532
|
+
}
|
|
271
533
|
if (hostRef.$flags$ & 4 /* isWaitingForChildren */) {
|
|
272
534
|
hostRef.$flags$ |= 512 /* needsRerender */;
|
|
273
535
|
return;
|
|
@@ -329,6 +591,9 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
|
|
|
329
591
|
const callRender = (hostRef, instance, elm) => {
|
|
330
592
|
try {
|
|
331
593
|
instance = instance.render() ;
|
|
594
|
+
{
|
|
595
|
+
hostRef.$flags$ &= ~16 /* isQueuedForUpdate */;
|
|
596
|
+
}
|
|
332
597
|
{
|
|
333
598
|
hostRef.$flags$ |= 2 /* hasRendered */;
|
|
334
599
|
}
|
|
@@ -417,13 +682,93 @@ const then = (promise, thenFn) => {
|
|
|
417
682
|
};
|
|
418
683
|
const addHydratedFlag = (elm) => elm.classList.add('hydrated')
|
|
419
684
|
;
|
|
685
|
+
/**
|
|
686
|
+
* Parse a new property value for a given property type.
|
|
687
|
+
*
|
|
688
|
+
* While the prop value can reasonably be expected to be of `any` type as far as TypeScript's type checker is concerned,
|
|
689
|
+
* it is not safe to assume that the string returned by evaluating `typeof propValue` matches:
|
|
690
|
+
* 1. `any`, the type given to `propValue` in the function signature
|
|
691
|
+
* 2. the type stored from `propType`.
|
|
692
|
+
*
|
|
693
|
+
* This function provides the capability to parse/coerce a property's value to potentially any other JavaScript type.
|
|
694
|
+
*
|
|
695
|
+
* Property values represented in TSX preserve their type information. In the example below, the number 0 is passed to
|
|
696
|
+
* a component. This `propValue` will preserve its type information (`typeof propValue === 'number'`). Note that is
|
|
697
|
+
* based on the type of the value being passed in, not the type declared of the class member decorated with `@Prop`.
|
|
698
|
+
* ```tsx
|
|
699
|
+
* <my-cmp prop-val={0}></my-cmp>
|
|
700
|
+
* ```
|
|
701
|
+
*
|
|
702
|
+
* HTML prop values on the other hand, will always a string
|
|
703
|
+
*
|
|
704
|
+
* @param propValue the new value to coerce to some type
|
|
705
|
+
* @param propType the type of the prop, expressed as a binary number
|
|
706
|
+
* @returns the parsed/coerced value
|
|
707
|
+
*/
|
|
708
|
+
const parsePropertyValue = (propValue, propType) => {
|
|
709
|
+
// ensure this value is of the correct prop type
|
|
710
|
+
if (propValue != null && !isComplexType(propValue)) {
|
|
711
|
+
if (propType & 1 /* String */) {
|
|
712
|
+
// could have been passed as a number or boolean
|
|
713
|
+
// but we still want it as a string
|
|
714
|
+
return String(propValue);
|
|
715
|
+
}
|
|
716
|
+
// redundant return here for better minification
|
|
717
|
+
return propValue;
|
|
718
|
+
}
|
|
719
|
+
// not sure exactly what type we want
|
|
720
|
+
// so no need to change to a different type
|
|
721
|
+
return propValue;
|
|
722
|
+
};
|
|
723
|
+
const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
|
|
724
|
+
const setValue = (ref, propName, newVal, cmpMeta) => {
|
|
725
|
+
// check our new property value against our internal value
|
|
726
|
+
const hostRef = getHostRef(ref);
|
|
727
|
+
const oldVal = hostRef.$instanceValues$.get(propName);
|
|
728
|
+
const flags = hostRef.$flags$;
|
|
729
|
+
const instance = hostRef.$lazyInstance$ ;
|
|
730
|
+
newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
|
|
731
|
+
// explicitly check for NaN on both sides, as `NaN === NaN` is always false
|
|
732
|
+
const areBothNaN = Number.isNaN(oldVal) && Number.isNaN(newVal);
|
|
733
|
+
const didValueChange = newVal !== oldVal && !areBothNaN;
|
|
734
|
+
if ((!(flags & 8 /* isConstructingInstance */) || oldVal === undefined) && didValueChange) {
|
|
735
|
+
// gadzooks! the property's value has changed!!
|
|
736
|
+
// set our new value!
|
|
737
|
+
hostRef.$instanceValues$.set(propName, newVal);
|
|
738
|
+
if (instance) {
|
|
739
|
+
if ((flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
|
|
740
|
+
// looks like this value actually changed, so we've got work to do!
|
|
741
|
+
// but only if we've already rendered, otherwise just chill out
|
|
742
|
+
// queue that we need to do an update, but don't worry about queuing
|
|
743
|
+
// up millions cuz this function ensures it only runs once
|
|
744
|
+
scheduleUpdate(hostRef, false);
|
|
745
|
+
}
|
|
746
|
+
}
|
|
747
|
+
}
|
|
748
|
+
};
|
|
420
749
|
const proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
421
750
|
if (cmpMeta.$members$) {
|
|
422
751
|
// It's better to have a const than two Object.entries()
|
|
423
752
|
const members = Object.entries(cmpMeta.$members$);
|
|
424
753
|
const prototype = Cstr.prototype;
|
|
425
754
|
members.map(([memberName, [memberFlags]]) => {
|
|
426
|
-
if (
|
|
755
|
+
if ((memberFlags & 31 /* Prop */ ||
|
|
756
|
+
((flags & 2 /* proxyState */) && memberFlags & 32 /* State */))) {
|
|
757
|
+
// proxyComponent - prop
|
|
758
|
+
Object.defineProperty(prototype, memberName, {
|
|
759
|
+
get() {
|
|
760
|
+
// proxyComponent, get value
|
|
761
|
+
return getValue(this, memberName);
|
|
762
|
+
},
|
|
763
|
+
set(newValue) {
|
|
764
|
+
// proxyComponent, set value
|
|
765
|
+
setValue(this, memberName, newValue, cmpMeta);
|
|
766
|
+
},
|
|
767
|
+
configurable: true,
|
|
768
|
+
enumerable: true,
|
|
769
|
+
});
|
|
770
|
+
}
|
|
771
|
+
else if (flags & 1 /* isElementConstructor */ &&
|
|
427
772
|
memberFlags & 64 /* Method */) {
|
|
428
773
|
// proxyComponent - method
|
|
429
774
|
Object.defineProperty(prototype, memberName, {
|
|
@@ -434,6 +779,69 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
|
|
|
434
779
|
});
|
|
435
780
|
}
|
|
436
781
|
});
|
|
782
|
+
if ((flags & 1 /* isElementConstructor */)) {
|
|
783
|
+
const attrNameToPropName = new Map();
|
|
784
|
+
prototype.attributeChangedCallback = function (attrName, _oldValue, newValue) {
|
|
785
|
+
plt.jmp(() => {
|
|
786
|
+
const propName = attrNameToPropName.get(attrName);
|
|
787
|
+
// In a web component lifecycle the attributeChangedCallback runs prior to connectedCallback
|
|
788
|
+
// in the case where an attribute was set inline.
|
|
789
|
+
// ```html
|
|
790
|
+
// <my-component some-attribute="some-value"></my-component>
|
|
791
|
+
// ```
|
|
792
|
+
//
|
|
793
|
+
// There is an edge case where a developer sets the attribute inline on a custom element and then
|
|
794
|
+
// programmatically changes it before it has been upgraded as shown below:
|
|
795
|
+
//
|
|
796
|
+
// ```html
|
|
797
|
+
// <!-- this component has _not_ been upgraded yet -->
|
|
798
|
+
// <my-component id="test" some-attribute="some-value"></my-component>
|
|
799
|
+
// <script>
|
|
800
|
+
// // grab non-upgraded component
|
|
801
|
+
// el = document.querySelector("#test");
|
|
802
|
+
// el.someAttribute = "another-value";
|
|
803
|
+
// // upgrade component
|
|
804
|
+
// customElements.define('my-component', MyComponent);
|
|
805
|
+
// </script>
|
|
806
|
+
// ```
|
|
807
|
+
// In this case if we do not unshadow here and use the value of the shadowing property, attributeChangedCallback
|
|
808
|
+
// will be called with `newValue = "some-value"` and will set the shadowed property (this.someAttribute = "another-value")
|
|
809
|
+
// to the value that was set inline i.e. "some-value" from above example. When
|
|
810
|
+
// the connectedCallback attempts to unshadow it will use "some-value" as the initial value rather than "another-value"
|
|
811
|
+
//
|
|
812
|
+
// The case where the attribute was NOT set inline but was not set programmatically shall be handled/unshadowed
|
|
813
|
+
// by connectedCallback as this attributeChangedCallback will not fire.
|
|
814
|
+
//
|
|
815
|
+
// https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
|
|
816
|
+
//
|
|
817
|
+
// TODO(STENCIL-16) we should think about whether or not we actually want to be reflecting the attributes to
|
|
818
|
+
// properties here given that this goes against best practices outlined here
|
|
819
|
+
// https://developers.google.com/web/fundamentals/web-components/best-practices#avoid-reentrancy
|
|
820
|
+
if (this.hasOwnProperty(propName)) {
|
|
821
|
+
newValue = this[propName];
|
|
822
|
+
delete this[propName];
|
|
823
|
+
}
|
|
824
|
+
else if (prototype.hasOwnProperty(propName) &&
|
|
825
|
+
typeof this[propName] === 'number' &&
|
|
826
|
+
this[propName] == newValue) {
|
|
827
|
+
// if the propName exists on the prototype of `Cstr`, this update may be a result of Stencil using native
|
|
828
|
+
// APIs to reflect props as attributes. Calls to `setAttribute(someElement, propName)` will result in
|
|
829
|
+
// `propName` to be converted to a `DOMString`, which may not be what we want for other primitive props.
|
|
830
|
+
return;
|
|
831
|
+
}
|
|
832
|
+
this[propName] = newValue === null && typeof this[propName] === 'boolean' ? false : newValue;
|
|
833
|
+
});
|
|
834
|
+
};
|
|
835
|
+
// create an array of attributes to observe
|
|
836
|
+
// and also create a map of html attribute name to js property name
|
|
837
|
+
Cstr.observedAttributes = members
|
|
838
|
+
.filter(([_, m]) => m[0] & 15 /* HasAttribute */) // filter to only keep props that should match attributes
|
|
839
|
+
.map(([propName, m]) => {
|
|
840
|
+
const attrName = m[1] || propName;
|
|
841
|
+
attrNameToPropName.set(attrName, propName);
|
|
842
|
+
return attrName;
|
|
843
|
+
});
|
|
844
|
+
}
|
|
437
845
|
}
|
|
438
846
|
return Cstr;
|
|
439
847
|
};
|
|
@@ -529,6 +937,17 @@ const connectedCallback = (elm) => {
|
|
|
529
937
|
}
|
|
530
938
|
}
|
|
531
939
|
}
|
|
940
|
+
// Lazy properties
|
|
941
|
+
// https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
|
|
942
|
+
if (cmpMeta.$members$) {
|
|
943
|
+
Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {
|
|
944
|
+
if (memberFlags & 31 /* Prop */ && elm.hasOwnProperty(memberName)) {
|
|
945
|
+
const value = elm[memberName];
|
|
946
|
+
delete elm[memberName];
|
|
947
|
+
elm[memberName] = value;
|
|
948
|
+
}
|
|
949
|
+
});
|
|
950
|
+
}
|
|
532
951
|
{
|
|
533
952
|
initializeComponent(elm, hostRef, cmpMeta);
|
|
534
953
|
}
|
|
@@ -573,6 +992,17 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
|
|
|
573
992
|
super(self);
|
|
574
993
|
self = this;
|
|
575
994
|
registerHost(self, cmpMeta);
|
|
995
|
+
if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
|
|
996
|
+
// this component is using shadow dom
|
|
997
|
+
// and this browser supports shadow dom
|
|
998
|
+
// add the read-only property "shadowRoot" to the host element
|
|
999
|
+
// adding the shadow root build conditionals to minimize runtime
|
|
1000
|
+
{
|
|
1001
|
+
{
|
|
1002
|
+
self.attachShadow({ mode: 'open' });
|
|
1003
|
+
}
|
|
1004
|
+
}
|
|
1005
|
+
}
|
|
576
1006
|
}
|
|
577
1007
|
connectedCallback() {
|
|
578
1008
|
if (appLoadFallback) {
|
|
@@ -639,6 +1069,7 @@ const registerHost = (elm, cmpMeta) => {
|
|
|
639
1069
|
}
|
|
640
1070
|
return hostRefs.set(elm, hostRef);
|
|
641
1071
|
};
|
|
1072
|
+
const isMemberInElement = (elm, memberName) => memberName in elm;
|
|
642
1073
|
const consoleError = (e, el) => (0, console.error)(e, el);
|
|
643
1074
|
const cmpModules = /*@__PURE__*/ new Map();
|
|
644
1075
|
const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
|
|
@@ -706,4 +1137,4 @@ const flush = () => {
|
|
|
706
1137
|
const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
|
|
707
1138
|
const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
|
|
708
1139
|
|
|
709
|
-
export { bootstrapLazy as b, createEvent as c, h, promiseResolve as p, registerInstance as r };
|
|
1140
|
+
export { Host as H, bootstrapLazy as b, createEvent as c, h, promiseResolve as p, registerInstance as r };
|
package/dist/esm/loader.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { p as promiseResolve, b as bootstrapLazy } from './index-
|
|
1
|
+
import { p as promiseResolve, b as bootstrapLazy } from './index-427447f8.js';
|
|
2
2
|
|
|
3
3
|
/*
|
|
4
4
|
Stencil Client Patch Esm v2.16.1 | MIT Licensed | https://stenciljs.com
|
|
@@ -10,7 +10,7 @@ const patchEsm = () => {
|
|
|
10
10
|
const defineCustomElements = (win, options) => {
|
|
11
11
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
12
12
|
return patchEsm().then(() => {
|
|
13
|
-
return bootstrapLazy([["snk-application",[[2,"snk-application",{"getStringParam":[64],"getIntParam":[64],"getFloatParam":[64],"getBooleanParam":[64],"getDateParam":[64],"temOpcional":[64],"getAttributeFromHTMLWrapper":[64],"openApp":[64],"createDataunit":[64],"getResourceID":[64],"alert":[64],"error":[64],"confirm":[64],"info":[64],"loadFormConfig":[64]}]]]], options);
|
|
13
|
+
return bootstrapLazy([["snk-pesquisa",[[1,"snk-pesquisa",{"searchLoader":[16],"onSelectItem":[16],"argument":[1025]}]]],["snk-application",[[2,"snk-application",{"getStringParam":[64],"getIntParam":[64],"getFloatParam":[64],"getBooleanParam":[64],"getDateParam":[64],"showPopUp":[64],"closePopUp":[64],"temOpcional":[64],"getAttributeFromHTMLWrapper":[64],"openApp":[64],"createDataunit":[64],"getResourceID":[64],"alert":[64],"error":[64],"confirm":[64],"info":[64],"loadFormConfig":[64]}]]],["teste-pesquisa",[[1,"teste-pesquisa"]]]], options);
|
|
14
14
|
});
|
|
15
15
|
};
|
|
16
16
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { p as promiseResolve, b as bootstrapLazy } from './index-
|
|
1
|
+
import { p as promiseResolve, b as bootstrapLazy } from './index-427447f8.js';
|
|
2
2
|
|
|
3
3
|
/*
|
|
4
4
|
Stencil Client Patch Browser v2.16.1 | MIT Licensed | https://stenciljs.com
|
|
@@ -13,5 +13,5 @@ const patchBrowser = () => {
|
|
|
13
13
|
};
|
|
14
14
|
|
|
15
15
|
patchBrowser().then(options => {
|
|
16
|
-
return bootstrapLazy([["snk-application",[[2,"snk-application",{"getStringParam":[64],"getIntParam":[64],"getFloatParam":[64],"getBooleanParam":[64],"getDateParam":[64],"temOpcional":[64],"getAttributeFromHTMLWrapper":[64],"openApp":[64],"createDataunit":[64],"getResourceID":[64],"alert":[64],"error":[64],"confirm":[64],"info":[64],"loadFormConfig":[64]}]]]], options);
|
|
16
|
+
return bootstrapLazy([["snk-pesquisa",[[1,"snk-pesquisa",{"searchLoader":[16],"onSelectItem":[16],"argument":[1025]}]]],["snk-application",[[2,"snk-application",{"getStringParam":[64],"getIntParam":[64],"getFloatParam":[64],"getBooleanParam":[64],"getDateParam":[64],"showPopUp":[64],"closePopUp":[64],"temOpcional":[64],"getAttributeFromHTMLWrapper":[64],"openApp":[64],"createDataunit":[64],"getResourceID":[64],"alert":[64],"error":[64],"confirm":[64],"info":[64],"loadFormConfig":[64]}]]],["teste-pesquisa",[[1,"teste-pesquisa"]]]], options);
|
|
17
17
|
});
|