@justifi/webcomponents 0.2.2 → 0.4.0
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/CHANGELOG.md +11 -0
- package/dist/cjs/Payment-5781460e.js +71 -0
- package/dist/cjs/{index-ca2cd154.js → index-4f2a13d2.js} +13 -389
- package/dist/cjs/justifi-bank-account-form.cjs.entry.js +3 -2
- package/dist/cjs/{justifi-billing-form.cjs.entry.js → justifi-billing-form_2.cjs.entry.js} +33 -2
- package/dist/cjs/justifi-card-form.cjs.entry.js +3 -2
- package/dist/cjs/justifi-payment-form.cjs.entry.js +46 -3
- package/dist/cjs/justifi-payment-method-form.cjs.entry.js +28 -17
- package/dist/cjs/justifi-payments-list.cjs.entry.js +3 -70
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/select-input_2.cjs.entry.js +2 -4
- package/dist/cjs/webcomponents.cjs.js +2 -2
- package/dist/collection/api/Payment.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/bank-account-form/bank-account-form.js +21 -3
- package/dist/collection/components/billing-form/billing-form.js +73 -1
- package/dist/collection/components/billing-form/billing-form.stories.js +14 -0
- package/dist/collection/components/card-form/card-form.js +21 -3
- package/dist/collection/components/card-form/card-form.stories.js +35 -28
- package/dist/collection/components/payment-form/payment-form.js +145 -7
- package/dist/collection/components/payment-form/payment-form.stories.js +82 -0
- package/dist/collection/components/payment-form/payment-method-selector.js +86 -0
- package/dist/collection/components/payment-form/tokenize.js +1 -0
- package/dist/collection/components/payment-method-form/payment-method-form.js +22 -2
- package/dist/collection/components/select-input/select-input.js +1 -3
- package/dist/components/Payment.js +69 -0
- package/dist/components/billing-form.js +2188 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +1 -0
- package/dist/components/justifi-bank-account-form.js +5 -3
- package/dist/components/justifi-billing-form.js +1 -2175
- package/dist/components/justifi-card-form.js +5 -3
- package/dist/components/justifi-payment-form.js +85 -6
- package/dist/components/justifi-payment-method-selector.d.ts +11 -0
- package/dist/components/justifi-payment-method-selector.js +6 -0
- package/dist/components/justifi-payments-list.js +1 -68
- package/dist/components/payment-method-form.js +29 -17
- package/dist/components/payment-method-selector.js +42 -0
- package/dist/components/select-input2.js +1 -3
- package/dist/esm/Payment-3f7570a8.js +69 -0
- package/dist/esm/{index-05706eb5.js → index-3ce5521c.js} +13 -389
- package/dist/esm/justifi-bank-account-form.entry.js +3 -2
- package/dist/esm/{justifi-billing-form.entry.js → justifi-billing-form_2.entry.js} +33 -3
- package/dist/esm/justifi-card-form.entry.js +3 -2
- package/dist/esm/justifi-payment-form.entry.js +46 -3
- package/dist/esm/justifi-payment-method-form.entry.js +28 -17
- package/dist/esm/justifi-payments-list.entry.js +2 -69
- package/dist/esm/loader.js +2 -2
- package/dist/esm/select-input_2.entry.js +2 -4
- package/dist/esm/webcomponents.js +2 -2
- package/dist/types/api/Payment.d.ts +1 -1
- package/dist/types/components/bank-account-form/bank-account-form.d.ts +1 -0
- package/dist/types/components/billing-form/billing-form-schema.d.ts +7 -0
- package/dist/types/components/billing-form/billing-form.d.ts +5 -8
- package/dist/types/components/billing-form/billing-form.stories.d.ts +7 -0
- package/dist/types/components/card-form/card-form.d.ts +1 -0
- package/dist/types/components/card-form/card-form.stories.d.ts +1 -0
- package/dist/types/components/payment-form/payment-form.d.ts +17 -1
- package/dist/types/components/payment-form/payment-form.stories.d.ts +44 -0
- package/dist/types/components/payment-form/payment-method-selector.d.ts +10 -0
- package/dist/types/components/payment-form/tokenize.d.ts +5 -0
- package/dist/types/components/payment-method-form/payment-method-form.d.ts +1 -0
- package/dist/types/components.d.ts +42 -2
- package/dist/webcomponents/p-21e020a8.js +1 -0
- package/dist/webcomponents/p-2e5be95e.entry.js +1 -0
- package/dist/webcomponents/p-6633de1b.entry.js +1 -0
- package/dist/webcomponents/p-68e47ee5.entry.js +1 -0
- package/dist/webcomponents/p-6a9c764f.entry.js +1 -0
- package/dist/webcomponents/p-6c3a226e.entry.js +1 -0
- package/dist/webcomponents/{p-3809130a.entry.js → p-763a2b4f.entry.js} +1 -1
- package/dist/webcomponents/p-92ca574f.entry.js +1 -0
- package/dist/webcomponents/p-9f34a2c1.js +2 -0
- package/dist/webcomponents/webcomponents.esm.js +1 -1
- package/package.json +23 -15
- package/dist/webcomponents/p-4009b629.entry.js +0 -1
- package/dist/webcomponents/p-787671b9.entry.js +0 -1
- package/dist/webcomponents/p-87654bf4.entry.js +0 -1
- package/dist/webcomponents/p-8ee06fd1.js +0 -2
- package/dist/webcomponents/p-94ef2d0e.entry.js +0 -1
- package/dist/webcomponents/p-c07191dc.entry.js +0 -1
- package/dist/webcomponents/p-e5b0f047.entry.js +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,17 @@ All notable changes to this project will be documented in this file. Dates are d
|
|
|
4
4
|
|
|
5
5
|
Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
|
|
6
6
|
|
|
7
|
+
#### 0.4.0
|
|
8
|
+
> 18 April 2023
|
|
9
|
+
|
|
10
|
+
- Allow `legend` to be passed and conditionally rendered for `BillingForm`
|
|
11
|
+
|
|
12
|
+
#### 0.3.2
|
|
13
|
+
> 12 April 2023
|
|
14
|
+
|
|
15
|
+
- Add `PaymentForm` component
|
|
16
|
+
- Allow `iframeOrigin` to be passed to `PaymentForm`, `CardForm`, `BankAccountForm`, and `PaymentMethodForm`
|
|
17
|
+
|
|
7
18
|
#### 0.2.2
|
|
8
19
|
> 6 April 2023
|
|
9
20
|
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var CaptureStrategy;
|
|
4
|
+
(function (CaptureStrategy) {
|
|
5
|
+
CaptureStrategy["automatic"] = "automatic";
|
|
6
|
+
CaptureStrategy["manual"] = "manual";
|
|
7
|
+
})(CaptureStrategy || (CaptureStrategy = {}));
|
|
8
|
+
exports.PaymentMethodTypes = void 0;
|
|
9
|
+
(function (PaymentMethodTypes) {
|
|
10
|
+
PaymentMethodTypes["card"] = "card";
|
|
11
|
+
PaymentMethodTypes["bankAccount"] = "bankAccount";
|
|
12
|
+
})(exports.PaymentMethodTypes || (exports.PaymentMethodTypes = {}));
|
|
13
|
+
var PaymentStatuses;
|
|
14
|
+
(function (PaymentStatuses) {
|
|
15
|
+
PaymentStatuses["pending"] = "pending";
|
|
16
|
+
PaymentStatuses["authorized"] = "authorized";
|
|
17
|
+
PaymentStatuses["succeeded"] = "succeeded";
|
|
18
|
+
PaymentStatuses["failed"] = "failed";
|
|
19
|
+
PaymentStatuses["disputed"] = "disputed";
|
|
20
|
+
PaymentStatuses["fully_refunded"] = "fully_refunded";
|
|
21
|
+
PaymentStatuses["partially_refunded"] = "partially_refunded";
|
|
22
|
+
})(PaymentStatuses || (PaymentStatuses = {}));
|
|
23
|
+
var PaymentDisputedStatuses;
|
|
24
|
+
(function (PaymentDisputedStatuses) {
|
|
25
|
+
// if a dispute is 'won', we don't show a dispute status, just general status
|
|
26
|
+
PaymentDisputedStatuses["lost"] = "lost";
|
|
27
|
+
PaymentDisputedStatuses["open"] = "open";
|
|
28
|
+
})(PaymentDisputedStatuses || (PaymentDisputedStatuses = {}));
|
|
29
|
+
class Payment {
|
|
30
|
+
constructor(payment) {
|
|
31
|
+
this.id = payment.id;
|
|
32
|
+
this.account_id = payment.account_id;
|
|
33
|
+
this.amount = payment.amount;
|
|
34
|
+
this.amount_disputed = payment.amount_disputed;
|
|
35
|
+
this.amount_refundable = payment.amount_refundable;
|
|
36
|
+
this.amount_refunded = payment.amount_refunded;
|
|
37
|
+
this.balance = payment.balance;
|
|
38
|
+
this.captured = payment.captured;
|
|
39
|
+
this.capture_strategy = payment.capture_strategy;
|
|
40
|
+
this.currency = payment.currency;
|
|
41
|
+
this.description = payment.description;
|
|
42
|
+
this.disputed = payment.disputed;
|
|
43
|
+
this.disputes = payment.disputes;
|
|
44
|
+
this.error_code = payment.error_code;
|
|
45
|
+
this.error_description = payment.error_description;
|
|
46
|
+
this.fee_amount = payment.fee_amount;
|
|
47
|
+
this.is_test = payment.is_test;
|
|
48
|
+
this.metadata = payment.metadata;
|
|
49
|
+
this.payment_method = payment.payment_method;
|
|
50
|
+
this.payment_intent_id = payment.payment_intent_id;
|
|
51
|
+
this.refunded = payment.refunded;
|
|
52
|
+
this.status = payment.status;
|
|
53
|
+
this.created_at = payment.created_at;
|
|
54
|
+
this.updated_at = payment.updated_at;
|
|
55
|
+
}
|
|
56
|
+
get disputedStatus() {
|
|
57
|
+
const lost = this.disputes.some((dispute) => dispute.status === PaymentDisputedStatuses.lost);
|
|
58
|
+
// if a dispute is 'won', we don't show a dispute status, just general status
|
|
59
|
+
if (!this.disputed) {
|
|
60
|
+
return null;
|
|
61
|
+
}
|
|
62
|
+
else if (lost) {
|
|
63
|
+
return PaymentDisputedStatuses.lost;
|
|
64
|
+
}
|
|
65
|
+
else {
|
|
66
|
+
return PaymentDisputedStatuses.open;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
exports.Payment = Payment;
|
|
@@ -31,11 +31,7 @@ const NAMESPACE = 'webcomponents';
|
|
|
31
31
|
* Modified for Stencil's renderer and slot projection
|
|
32
32
|
*/
|
|
33
33
|
let scopeId;
|
|
34
|
-
let contentRef;
|
|
35
34
|
let hostTagName;
|
|
36
|
-
let useNativeShadowDom = false;
|
|
37
|
-
let checkSlotFallbackVisibility = false;
|
|
38
|
-
let checkSlotRelocate = false;
|
|
39
35
|
let isSvgMode = false;
|
|
40
36
|
let queuePending = false;
|
|
41
37
|
const createTime = (fnName, tagName = '') => {
|
|
@@ -80,7 +76,6 @@ const isComplexType = (o) => {
|
|
|
80
76
|
// export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
|
|
81
77
|
const h = (nodeName, vnodeData, ...children) => {
|
|
82
78
|
let child = null;
|
|
83
|
-
let slotName = null;
|
|
84
79
|
let simple = false;
|
|
85
80
|
let lastSimple = false;
|
|
86
81
|
const vNodeChildren = [];
|
|
@@ -108,9 +103,6 @@ const h = (nodeName, vnodeData, ...children) => {
|
|
|
108
103
|
};
|
|
109
104
|
walk(children);
|
|
110
105
|
if (vnodeData) {
|
|
111
|
-
if (vnodeData.name) {
|
|
112
|
-
slotName = vnodeData.name;
|
|
113
|
-
}
|
|
114
106
|
{
|
|
115
107
|
const classData = vnodeData.className || vnodeData.class;
|
|
116
108
|
if (classData) {
|
|
@@ -128,9 +120,6 @@ const h = (nodeName, vnodeData, ...children) => {
|
|
|
128
120
|
if (vNodeChildren.length > 0) {
|
|
129
121
|
vnode.$children$ = vNodeChildren;
|
|
130
122
|
}
|
|
131
|
-
{
|
|
132
|
-
vnode.$name$ = slotName;
|
|
133
|
-
}
|
|
134
123
|
return vnode;
|
|
135
124
|
};
|
|
136
125
|
const newVNode = (tag, text) => {
|
|
@@ -144,9 +133,6 @@ const newVNode = (tag, text) => {
|
|
|
144
133
|
{
|
|
145
134
|
vnode.$attrs$ = null;
|
|
146
135
|
}
|
|
147
|
-
{
|
|
148
|
-
vnode.$name$ = null;
|
|
149
|
-
}
|
|
150
136
|
return vnode;
|
|
151
137
|
};
|
|
152
138
|
const Host = {};
|
|
@@ -177,6 +163,11 @@ const isHost = (node) => node && node.$tag$ === Host;
|
|
|
177
163
|
const parsePropertyValue = (propValue, propType) => {
|
|
178
164
|
// ensure this value is of the correct prop type
|
|
179
165
|
if (propValue != null && !isComplexType(propValue)) {
|
|
166
|
+
if (propType & 4 /* MEMBER_FLAGS.Boolean */) {
|
|
167
|
+
// per the HTML spec, any string value means it is a boolean true value
|
|
168
|
+
// but we'll cheat here and say that the string "false" is the boolean false
|
|
169
|
+
return propValue === 'false' ? false : propValue === '' || !!propValue;
|
|
170
|
+
}
|
|
180
171
|
if (propType & 1 /* MEMBER_FLAGS.String */) {
|
|
181
172
|
// could have been passed as a number or boolean
|
|
182
173
|
// but we still want it as a string
|
|
@@ -451,36 +442,13 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
|
|
|
451
442
|
let i = 0;
|
|
452
443
|
let elm;
|
|
453
444
|
let childNode;
|
|
454
|
-
let oldVNode;
|
|
455
|
-
if (!useNativeShadowDom) {
|
|
456
|
-
// remember for later we need to check to relocate nodes
|
|
457
|
-
checkSlotRelocate = true;
|
|
458
|
-
if (newVNode.$tag$ === 'slot') {
|
|
459
|
-
if (scopeId) {
|
|
460
|
-
// scoped css needs to add its scoped id to the parent element
|
|
461
|
-
parentElm.classList.add(scopeId + '-s');
|
|
462
|
-
}
|
|
463
|
-
newVNode.$flags$ |= newVNode.$children$
|
|
464
|
-
? // slot element has fallback content
|
|
465
|
-
2 /* VNODE_FLAGS.isSlotFallback */
|
|
466
|
-
: // slot element does not have fallback content
|
|
467
|
-
1 /* VNODE_FLAGS.isSlotReference */;
|
|
468
|
-
}
|
|
469
|
-
}
|
|
470
445
|
if (newVNode.$text$ !== null) {
|
|
471
446
|
// create text node
|
|
472
447
|
elm = newVNode.$elm$ = doc.createTextNode(newVNode.$text$);
|
|
473
448
|
}
|
|
474
|
-
else if (newVNode.$flags$ & 1 /* VNODE_FLAGS.isSlotReference */) {
|
|
475
|
-
// create a slot reference node
|
|
476
|
-
elm = newVNode.$elm$ =
|
|
477
|
-
doc.createTextNode('');
|
|
478
|
-
}
|
|
479
449
|
else {
|
|
480
450
|
// create element
|
|
481
|
-
elm = newVNode.$elm$ = (doc.createElement(newVNode.$
|
|
482
|
-
? 'slot-fb'
|
|
483
|
-
: newVNode.$tag$));
|
|
451
|
+
elm = newVNode.$elm$ = (doc.createElement(newVNode.$tag$));
|
|
484
452
|
// add css classes, attrs, props, listeners, etc.
|
|
485
453
|
{
|
|
486
454
|
updateElement(null, newVNode, isSvgMode);
|
|
@@ -493,7 +461,7 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
|
|
|
493
461
|
if (newVNode.$children$) {
|
|
494
462
|
for (i = 0; i < newVNode.$children$.length; ++i) {
|
|
495
463
|
// create the node
|
|
496
|
-
childNode = createElm(oldParentVNode, newVNode, i
|
|
464
|
+
childNode = createElm(oldParentVNode, newVNode, i);
|
|
497
465
|
// return node could have been null
|
|
498
466
|
if (childNode) {
|
|
499
467
|
// append our new node
|
|
@@ -502,62 +470,20 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
|
|
|
502
470
|
}
|
|
503
471
|
}
|
|
504
472
|
}
|
|
505
|
-
{
|
|
506
|
-
elm['s-hn'] = hostTagName;
|
|
507
|
-
if (newVNode.$flags$ & (2 /* VNODE_FLAGS.isSlotFallback */ | 1 /* VNODE_FLAGS.isSlotReference */)) {
|
|
508
|
-
// remember the content reference comment
|
|
509
|
-
elm['s-sr'] = true;
|
|
510
|
-
// remember the content reference comment
|
|
511
|
-
elm['s-cr'] = contentRef;
|
|
512
|
-
// remember the slot name, or empty string for default slot
|
|
513
|
-
elm['s-sn'] = newVNode.$name$ || '';
|
|
514
|
-
// check if we've got an old vnode for this slot
|
|
515
|
-
oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
|
|
516
|
-
if (oldVNode && oldVNode.$tag$ === newVNode.$tag$ && oldParentVNode.$elm$) {
|
|
517
|
-
// we've got an old slot vnode and the wrapper is being replaced
|
|
518
|
-
// so let's move the old slot content back to it's original location
|
|
519
|
-
putBackInOriginalLocation(oldParentVNode.$elm$, false);
|
|
520
|
-
}
|
|
521
|
-
}
|
|
522
|
-
}
|
|
523
473
|
return elm;
|
|
524
474
|
};
|
|
525
|
-
const putBackInOriginalLocation = (parentElm, recursive) => {
|
|
526
|
-
plt.$flags$ |= 1 /* PLATFORM_FLAGS.isTmpDisconnected */;
|
|
527
|
-
const oldSlotChildNodes = parentElm.childNodes;
|
|
528
|
-
for (let i = oldSlotChildNodes.length - 1; i >= 0; i--) {
|
|
529
|
-
const childNode = oldSlotChildNodes[i];
|
|
530
|
-
if (childNode['s-hn'] !== hostTagName && childNode['s-ol']) {
|
|
531
|
-
// // this child node in the old element is from another component
|
|
532
|
-
// // remove this node from the old slot's parent
|
|
533
|
-
// childNode.remove();
|
|
534
|
-
// and relocate it back to it's original location
|
|
535
|
-
parentReferenceNode(childNode).insertBefore(childNode, referenceNode(childNode));
|
|
536
|
-
// remove the old original location comment entirely
|
|
537
|
-
// later on the patch function will know what to do
|
|
538
|
-
// and move this to the correct spot in need be
|
|
539
|
-
childNode['s-ol'].remove();
|
|
540
|
-
childNode['s-ol'] = undefined;
|
|
541
|
-
checkSlotRelocate = true;
|
|
542
|
-
}
|
|
543
|
-
if (recursive) {
|
|
544
|
-
putBackInOriginalLocation(childNode, recursive);
|
|
545
|
-
}
|
|
546
|
-
}
|
|
547
|
-
plt.$flags$ &= ~1 /* PLATFORM_FLAGS.isTmpDisconnected */;
|
|
548
|
-
};
|
|
549
475
|
const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
|
|
550
|
-
let containerElm = (
|
|
476
|
+
let containerElm = (parentElm);
|
|
551
477
|
let childNode;
|
|
552
478
|
if (containerElm.shadowRoot && containerElm.tagName === hostTagName) {
|
|
553
479
|
containerElm = containerElm.shadowRoot;
|
|
554
480
|
}
|
|
555
481
|
for (; startIdx <= endIdx; ++startIdx) {
|
|
556
482
|
if (vnodes[startIdx]) {
|
|
557
|
-
childNode = createElm(null, parentVNode, startIdx
|
|
483
|
+
childNode = createElm(null, parentVNode, startIdx);
|
|
558
484
|
if (childNode) {
|
|
559
485
|
vnodes[startIdx].$elm$ = childNode;
|
|
560
|
-
containerElm.insertBefore(childNode,
|
|
486
|
+
containerElm.insertBefore(childNode, before);
|
|
561
487
|
}
|
|
562
488
|
}
|
|
563
489
|
}
|
|
@@ -567,20 +493,6 @@ const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
|
|
|
567
493
|
if ((vnode = vnodes[startIdx])) {
|
|
568
494
|
elm = vnode.$elm$;
|
|
569
495
|
callNodeRefs(vnode);
|
|
570
|
-
{
|
|
571
|
-
// we're removing this element
|
|
572
|
-
// so it's possible we need to show slot fallback content now
|
|
573
|
-
checkSlotFallbackVisibility = true;
|
|
574
|
-
if (elm['s-ol']) {
|
|
575
|
-
// remove the original location comment
|
|
576
|
-
elm['s-ol'].remove();
|
|
577
|
-
}
|
|
578
|
-
else {
|
|
579
|
-
// it's possible that child nodes of the node
|
|
580
|
-
// that's being removed are slot nodes
|
|
581
|
-
putBackInOriginalLocation(elm, true);
|
|
582
|
-
}
|
|
583
|
-
}
|
|
584
496
|
// remove the vnode's element from the dom
|
|
585
497
|
elm.remove();
|
|
586
498
|
}
|
|
@@ -696,23 +608,6 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
|
|
|
696
608
|
newEndVnode = newCh[--newEndIdx];
|
|
697
609
|
}
|
|
698
610
|
else if (isSameVnode(oldStartVnode, newEndVnode)) {
|
|
699
|
-
// case: "Vnode moved right"
|
|
700
|
-
//
|
|
701
|
-
// We've found that the last node in our window on the new children is
|
|
702
|
-
// the same VNode as the _first_ node in our window on the old children
|
|
703
|
-
// we're dealing with now. Visually, this is the layout of these two
|
|
704
|
-
// nodes:
|
|
705
|
-
//
|
|
706
|
-
// newCh: [..., newStartVnode , ... , newEndVnode , ...]
|
|
707
|
-
// ^^^^^^^^^^^
|
|
708
|
-
// oldCh: [..., oldStartVnode , ... , oldEndVnode , ...]
|
|
709
|
-
// ^^^^^^^^^^^^^
|
|
710
|
-
//
|
|
711
|
-
// In this situation we need to patch `newEndVnode` onto `oldStartVnode`
|
|
712
|
-
// and move the DOM element for `oldStartVnode`.
|
|
713
|
-
if ((oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) {
|
|
714
|
-
putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);
|
|
715
|
-
}
|
|
716
611
|
patch(oldStartVnode, newEndVnode);
|
|
717
612
|
// We need to move the element for `oldStartVnode` into a position which
|
|
718
613
|
// will be appropriate for `newEndVnode`. For this we can use
|
|
@@ -736,24 +631,6 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
|
|
|
736
631
|
newEndVnode = newCh[--newEndIdx];
|
|
737
632
|
}
|
|
738
633
|
else if (isSameVnode(oldEndVnode, newStartVnode)) {
|
|
739
|
-
// case: "Vnode moved left"
|
|
740
|
-
//
|
|
741
|
-
// We've found that the first node in our window on the new children is
|
|
742
|
-
// the same VNode as the _last_ node in our window on the old children.
|
|
743
|
-
// Visually, this is the layout of these two nodes:
|
|
744
|
-
//
|
|
745
|
-
// newCh: [..., newStartVnode , ... , newEndVnode , ...]
|
|
746
|
-
// ^^^^^^^^^^^^^
|
|
747
|
-
// oldCh: [..., oldStartVnode , ... , oldEndVnode , ...]
|
|
748
|
-
// ^^^^^^^^^^^
|
|
749
|
-
//
|
|
750
|
-
// In this situation we need to patch `newStartVnode` onto `oldEndVnode`
|
|
751
|
-
// (which will handle updating any changed attributes, reconciling their
|
|
752
|
-
// children etc) but we also need to move the DOM node to which
|
|
753
|
-
// `oldEndVnode` corresponds.
|
|
754
|
-
if ((oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) {
|
|
755
|
-
putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false);
|
|
756
|
-
}
|
|
757
634
|
patch(oldEndVnode, newStartVnode);
|
|
758
635
|
// We've already checked above if `oldStartVnode` and `newStartVnode` are
|
|
759
636
|
// the same node, so since we're here we know that they are not. Thus we
|
|
@@ -770,13 +647,13 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
|
|
|
770
647
|
// the key of the first new child OR the build is not using `key`
|
|
771
648
|
// attributes at all. In either case we need to create a new element
|
|
772
649
|
// for the new node.
|
|
773
|
-
node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx
|
|
650
|
+
node = createElm(oldCh && oldCh[newStartIdx], newVNode, newStartIdx);
|
|
774
651
|
newStartVnode = newCh[++newStartIdx];
|
|
775
652
|
}
|
|
776
653
|
if (node) {
|
|
777
654
|
// if we created a new node then handle inserting it to the DOM
|
|
778
655
|
{
|
|
779
|
-
|
|
656
|
+
oldStartVnode.$elm$.parentNode.insertBefore(node, oldStartVnode.$elm$);
|
|
780
657
|
}
|
|
781
658
|
}
|
|
782
659
|
}
|
|
@@ -813,21 +690,10 @@ const isSameVnode = (leftVNode, rightVNode) => {
|
|
|
813
690
|
// compare if two vnode to see if they're "technically" the same
|
|
814
691
|
// need to have the same element tag, and same key to be the same
|
|
815
692
|
if (leftVNode.$tag$ === rightVNode.$tag$) {
|
|
816
|
-
if (leftVNode.$tag$ === 'slot') {
|
|
817
|
-
return leftVNode.$name$ === rightVNode.$name$;
|
|
818
|
-
}
|
|
819
693
|
return true;
|
|
820
694
|
}
|
|
821
695
|
return false;
|
|
822
696
|
};
|
|
823
|
-
const referenceNode = (node) => {
|
|
824
|
-
// this node was relocated to a new location in the dom
|
|
825
|
-
// because of some other component's slot
|
|
826
|
-
// but we still have an html comment in place of where
|
|
827
|
-
// it's original location was according to it's original vdom
|
|
828
|
-
return (node && node['s-ol']) || node;
|
|
829
|
-
};
|
|
830
|
-
const parentReferenceNode = (node) => (node['s-ol'] ? node['s-ol'] : node).parentNode;
|
|
831
697
|
/**
|
|
832
698
|
* Handle reconciling an outdated VNode with a new one which corresponds to
|
|
833
699
|
* it. This function handles flushing updates to the DOM and reconciling the
|
|
@@ -840,14 +706,10 @@ const patch = (oldVNode, newVNode) => {
|
|
|
840
706
|
const elm = (newVNode.$elm$ = oldVNode.$elm$);
|
|
841
707
|
const oldChildren = oldVNode.$children$;
|
|
842
708
|
const newChildren = newVNode.$children$;
|
|
843
|
-
const tag = newVNode.$tag$;
|
|
844
709
|
const text = newVNode.$text$;
|
|
845
|
-
let defaultHolder;
|
|
846
710
|
if (text === null) {
|
|
847
711
|
{
|
|
848
|
-
|
|
849
|
-
;
|
|
850
|
-
else {
|
|
712
|
+
{
|
|
851
713
|
// either this is the first render of an element OR it's an update
|
|
852
714
|
// AND we already know it's possible it could have changed
|
|
853
715
|
// this updates the element's css classes, attrs, props, listeners, etc.
|
|
@@ -873,147 +735,12 @@ const patch = (oldVNode, newVNode) => {
|
|
|
873
735
|
removeVnodes(oldChildren, 0, oldChildren.length - 1);
|
|
874
736
|
}
|
|
875
737
|
}
|
|
876
|
-
else if ((defaultHolder = elm['s-cr'])) {
|
|
877
|
-
// this element has slotted content
|
|
878
|
-
defaultHolder.parentNode.textContent = text;
|
|
879
|
-
}
|
|
880
738
|
else if (oldVNode.$text$ !== text) {
|
|
881
739
|
// update the text content for the text only vnode
|
|
882
740
|
// and also only if the text is different than before
|
|
883
741
|
elm.data = text;
|
|
884
742
|
}
|
|
885
743
|
};
|
|
886
|
-
const updateFallbackSlotVisibility = (elm) => {
|
|
887
|
-
// tslint:disable-next-line: prefer-const
|
|
888
|
-
const childNodes = elm.childNodes;
|
|
889
|
-
let childNode;
|
|
890
|
-
let i;
|
|
891
|
-
let ilen;
|
|
892
|
-
let j;
|
|
893
|
-
let slotNameAttr;
|
|
894
|
-
let nodeType;
|
|
895
|
-
for (i = 0, ilen = childNodes.length; i < ilen; i++) {
|
|
896
|
-
childNode = childNodes[i];
|
|
897
|
-
if (childNode.nodeType === 1 /* NODE_TYPE.ElementNode */) {
|
|
898
|
-
if (childNode['s-sr']) {
|
|
899
|
-
// this is a slot fallback node
|
|
900
|
-
// get the slot name for this slot reference node
|
|
901
|
-
slotNameAttr = childNode['s-sn'];
|
|
902
|
-
// by default always show a fallback slot node
|
|
903
|
-
// then hide it if there are other slots in the light dom
|
|
904
|
-
childNode.hidden = false;
|
|
905
|
-
for (j = 0; j < ilen; j++) {
|
|
906
|
-
nodeType = childNodes[j].nodeType;
|
|
907
|
-
if (childNodes[j]['s-hn'] !== childNode['s-hn'] || slotNameAttr !== '') {
|
|
908
|
-
// this sibling node is from a different component OR is a named fallback slot node
|
|
909
|
-
if (nodeType === 1 /* NODE_TYPE.ElementNode */ && slotNameAttr === childNodes[j].getAttribute('slot')) {
|
|
910
|
-
childNode.hidden = true;
|
|
911
|
-
break;
|
|
912
|
-
}
|
|
913
|
-
}
|
|
914
|
-
else {
|
|
915
|
-
// this is a default fallback slot node
|
|
916
|
-
// any element or text node (with content)
|
|
917
|
-
// should hide the default fallback slot node
|
|
918
|
-
if (nodeType === 1 /* NODE_TYPE.ElementNode */ ||
|
|
919
|
-
(nodeType === 3 /* NODE_TYPE.TextNode */ && childNodes[j].textContent.trim() !== '')) {
|
|
920
|
-
childNode.hidden = true;
|
|
921
|
-
break;
|
|
922
|
-
}
|
|
923
|
-
}
|
|
924
|
-
}
|
|
925
|
-
}
|
|
926
|
-
// keep drilling down
|
|
927
|
-
updateFallbackSlotVisibility(childNode);
|
|
928
|
-
}
|
|
929
|
-
}
|
|
930
|
-
};
|
|
931
|
-
const relocateNodes = [];
|
|
932
|
-
const relocateSlotContent = (elm) => {
|
|
933
|
-
// tslint:disable-next-line: prefer-const
|
|
934
|
-
let childNode;
|
|
935
|
-
let node;
|
|
936
|
-
let hostContentNodes;
|
|
937
|
-
let slotNameAttr;
|
|
938
|
-
let relocateNodeData;
|
|
939
|
-
let j;
|
|
940
|
-
let i = 0;
|
|
941
|
-
const childNodes = elm.childNodes;
|
|
942
|
-
const ilen = childNodes.length;
|
|
943
|
-
for (; i < ilen; i++) {
|
|
944
|
-
childNode = childNodes[i];
|
|
945
|
-
if (childNode['s-sr'] && (node = childNode['s-cr']) && node.parentNode) {
|
|
946
|
-
// first got the content reference comment node
|
|
947
|
-
// then we got it's parent, which is where all the host content is in now
|
|
948
|
-
hostContentNodes = node.parentNode.childNodes;
|
|
949
|
-
slotNameAttr = childNode['s-sn'];
|
|
950
|
-
for (j = hostContentNodes.length - 1; j >= 0; j--) {
|
|
951
|
-
node = hostContentNodes[j];
|
|
952
|
-
if (!node['s-cn'] && !node['s-nr'] && node['s-hn'] !== childNode['s-hn']) {
|
|
953
|
-
// let's do some relocating to its new home
|
|
954
|
-
// but never relocate a content reference node
|
|
955
|
-
// that is suppose to always represent the original content location
|
|
956
|
-
if (isNodeLocatedInSlot(node, slotNameAttr)) {
|
|
957
|
-
// it's possible we've already decided to relocate this node
|
|
958
|
-
relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
|
|
959
|
-
// made some changes to slots
|
|
960
|
-
// let's make sure we also double check
|
|
961
|
-
// fallbacks are correctly hidden or shown
|
|
962
|
-
checkSlotFallbackVisibility = true;
|
|
963
|
-
node['s-sn'] = node['s-sn'] || slotNameAttr;
|
|
964
|
-
if (relocateNodeData) {
|
|
965
|
-
// previously we never found a slot home for this node
|
|
966
|
-
// but turns out we did, so let's remember it now
|
|
967
|
-
relocateNodeData.$slotRefNode$ = childNode;
|
|
968
|
-
}
|
|
969
|
-
else {
|
|
970
|
-
// add to our list of nodes to relocate
|
|
971
|
-
relocateNodes.push({
|
|
972
|
-
$slotRefNode$: childNode,
|
|
973
|
-
$nodeToRelocate$: node,
|
|
974
|
-
});
|
|
975
|
-
}
|
|
976
|
-
if (node['s-sr']) {
|
|
977
|
-
relocateNodes.map((relocateNode) => {
|
|
978
|
-
if (isNodeLocatedInSlot(relocateNode.$nodeToRelocate$, node['s-sn'])) {
|
|
979
|
-
relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node);
|
|
980
|
-
if (relocateNodeData && !relocateNode.$slotRefNode$) {
|
|
981
|
-
relocateNode.$slotRefNode$ = relocateNodeData.$slotRefNode$;
|
|
982
|
-
}
|
|
983
|
-
}
|
|
984
|
-
});
|
|
985
|
-
}
|
|
986
|
-
}
|
|
987
|
-
else if (!relocateNodes.some((r) => r.$nodeToRelocate$ === node)) {
|
|
988
|
-
// so far this element does not have a slot home, not setting slotRefNode on purpose
|
|
989
|
-
// if we never find a home for this element then we'll need to hide it
|
|
990
|
-
relocateNodes.push({
|
|
991
|
-
$nodeToRelocate$: node,
|
|
992
|
-
});
|
|
993
|
-
}
|
|
994
|
-
}
|
|
995
|
-
}
|
|
996
|
-
}
|
|
997
|
-
if (childNode.nodeType === 1 /* NODE_TYPE.ElementNode */) {
|
|
998
|
-
relocateSlotContent(childNode);
|
|
999
|
-
}
|
|
1000
|
-
}
|
|
1001
|
-
};
|
|
1002
|
-
const isNodeLocatedInSlot = (nodeToRelocate, slotNameAttr) => {
|
|
1003
|
-
if (nodeToRelocate.nodeType === 1 /* NODE_TYPE.ElementNode */) {
|
|
1004
|
-
if (nodeToRelocate.getAttribute('slot') === null && slotNameAttr === '') {
|
|
1005
|
-
return true;
|
|
1006
|
-
}
|
|
1007
|
-
if (nodeToRelocate.getAttribute('slot') === slotNameAttr) {
|
|
1008
|
-
return true;
|
|
1009
|
-
}
|
|
1010
|
-
return false;
|
|
1011
|
-
}
|
|
1012
|
-
if (nodeToRelocate['s-sn'] === slotNameAttr) {
|
|
1013
|
-
return true;
|
|
1014
|
-
}
|
|
1015
|
-
return slotNameAttr === '';
|
|
1016
|
-
};
|
|
1017
744
|
const callNodeRefs = (vNode) => {
|
|
1018
745
|
{
|
|
1019
746
|
vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
|
|
@@ -1022,7 +749,6 @@ const callNodeRefs = (vNode) => {
|
|
|
1022
749
|
};
|
|
1023
750
|
const renderVdom = (hostRef, renderFnResults) => {
|
|
1024
751
|
const hostElm = hostRef.$hostElement$;
|
|
1025
|
-
const cmpMeta = hostRef.$cmpMeta$;
|
|
1026
752
|
const oldVNode = hostRef.$vnode$ || newVNode(null, null);
|
|
1027
753
|
const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
|
|
1028
754
|
hostTagName = hostElm.tagName;
|
|
@@ -1033,90 +759,8 @@ const renderVdom = (hostRef, renderFnResults) => {
|
|
|
1033
759
|
{
|
|
1034
760
|
scopeId = hostElm['s-sc'];
|
|
1035
761
|
}
|
|
1036
|
-
{
|
|
1037
|
-
contentRef = hostElm['s-cr'];
|
|
1038
|
-
useNativeShadowDom = (cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) !== 0;
|
|
1039
|
-
// always reset
|
|
1040
|
-
checkSlotFallbackVisibility = false;
|
|
1041
|
-
}
|
|
1042
762
|
// synchronous patch
|
|
1043
763
|
patch(oldVNode, rootVnode);
|
|
1044
|
-
{
|
|
1045
|
-
// while we're moving nodes around existing nodes, temporarily disable
|
|
1046
|
-
// the disconnectCallback from working
|
|
1047
|
-
plt.$flags$ |= 1 /* PLATFORM_FLAGS.isTmpDisconnected */;
|
|
1048
|
-
if (checkSlotRelocate) {
|
|
1049
|
-
relocateSlotContent(rootVnode.$elm$);
|
|
1050
|
-
let relocateData;
|
|
1051
|
-
let nodeToRelocate;
|
|
1052
|
-
let orgLocationNode;
|
|
1053
|
-
let parentNodeRef;
|
|
1054
|
-
let insertBeforeNode;
|
|
1055
|
-
let refNode;
|
|
1056
|
-
let i = 0;
|
|
1057
|
-
for (; i < relocateNodes.length; i++) {
|
|
1058
|
-
relocateData = relocateNodes[i];
|
|
1059
|
-
nodeToRelocate = relocateData.$nodeToRelocate$;
|
|
1060
|
-
if (!nodeToRelocate['s-ol']) {
|
|
1061
|
-
// add a reference node marking this node's original location
|
|
1062
|
-
// keep a reference to this node for later lookups
|
|
1063
|
-
orgLocationNode =
|
|
1064
|
-
doc.createTextNode('');
|
|
1065
|
-
orgLocationNode['s-nr'] = nodeToRelocate;
|
|
1066
|
-
nodeToRelocate.parentNode.insertBefore((nodeToRelocate['s-ol'] = orgLocationNode), nodeToRelocate);
|
|
1067
|
-
}
|
|
1068
|
-
}
|
|
1069
|
-
for (i = 0; i < relocateNodes.length; i++) {
|
|
1070
|
-
relocateData = relocateNodes[i];
|
|
1071
|
-
nodeToRelocate = relocateData.$nodeToRelocate$;
|
|
1072
|
-
if (relocateData.$slotRefNode$) {
|
|
1073
|
-
// by default we're just going to insert it directly
|
|
1074
|
-
// after the slot reference node
|
|
1075
|
-
parentNodeRef = relocateData.$slotRefNode$.parentNode;
|
|
1076
|
-
insertBeforeNode = relocateData.$slotRefNode$.nextSibling;
|
|
1077
|
-
orgLocationNode = nodeToRelocate['s-ol'];
|
|
1078
|
-
while ((orgLocationNode = orgLocationNode.previousSibling)) {
|
|
1079
|
-
refNode = orgLocationNode['s-nr'];
|
|
1080
|
-
if (refNode && refNode['s-sn'] === nodeToRelocate['s-sn'] && parentNodeRef === refNode.parentNode) {
|
|
1081
|
-
refNode = refNode.nextSibling;
|
|
1082
|
-
if (!refNode || !refNode['s-nr']) {
|
|
1083
|
-
insertBeforeNode = refNode;
|
|
1084
|
-
break;
|
|
1085
|
-
}
|
|
1086
|
-
}
|
|
1087
|
-
}
|
|
1088
|
-
if ((!insertBeforeNode && parentNodeRef !== nodeToRelocate.parentNode) ||
|
|
1089
|
-
nodeToRelocate.nextSibling !== insertBeforeNode) {
|
|
1090
|
-
// we've checked that it's worth while to relocate
|
|
1091
|
-
// since that the node to relocate
|
|
1092
|
-
// has a different next sibling or parent relocated
|
|
1093
|
-
if (nodeToRelocate !== insertBeforeNode) {
|
|
1094
|
-
if (!nodeToRelocate['s-hn'] && nodeToRelocate['s-ol']) {
|
|
1095
|
-
// probably a component in the index.html that doesn't have it's hostname set
|
|
1096
|
-
nodeToRelocate['s-hn'] = nodeToRelocate['s-ol'].parentNode.nodeName;
|
|
1097
|
-
}
|
|
1098
|
-
// add it back to the dom but in its new home
|
|
1099
|
-
parentNodeRef.insertBefore(nodeToRelocate, insertBeforeNode);
|
|
1100
|
-
}
|
|
1101
|
-
}
|
|
1102
|
-
}
|
|
1103
|
-
else {
|
|
1104
|
-
// this node doesn't have a slot home to go to, so let's hide it
|
|
1105
|
-
if (nodeToRelocate.nodeType === 1 /* NODE_TYPE.ElementNode */) {
|
|
1106
|
-
nodeToRelocate.hidden = true;
|
|
1107
|
-
}
|
|
1108
|
-
}
|
|
1109
|
-
}
|
|
1110
|
-
}
|
|
1111
|
-
if (checkSlotFallbackVisibility) {
|
|
1112
|
-
updateFallbackSlotVisibility(rootVnode.$elm$);
|
|
1113
|
-
}
|
|
1114
|
-
// done moving nodes around
|
|
1115
|
-
// allow the disconnect callback to work again
|
|
1116
|
-
plt.$flags$ &= ~1 /* PLATFORM_FLAGS.isTmpDisconnected */;
|
|
1117
|
-
// always reset
|
|
1118
|
-
relocateNodes.length = 0;
|
|
1119
|
-
}
|
|
1120
764
|
};
|
|
1121
765
|
const attachToAncestor = (hostRef, ancestorComponent) => {
|
|
1122
766
|
if (ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent['s-p']) {
|
|
@@ -1534,15 +1178,6 @@ const connectedCallback = (elm) => {
|
|
|
1534
1178
|
if (!(hostRef.$flags$ & 1 /* HOST_FLAGS.hasConnected */)) {
|
|
1535
1179
|
// first time this component has connected
|
|
1536
1180
|
hostRef.$flags$ |= 1 /* HOST_FLAGS.hasConnected */;
|
|
1537
|
-
{
|
|
1538
|
-
// initUpdate
|
|
1539
|
-
// if the slot polyfill is required we'll need to put some nodes
|
|
1540
|
-
// in here to act as original content anchors as we move nodes around
|
|
1541
|
-
// host element has been connected to the DOM
|
|
1542
|
-
if ((cmpMeta.$flags$ & (4 /* CMP_FLAGS.hasSlotRelocation */ | 8 /* CMP_FLAGS.needsShadowDomShim */))) {
|
|
1543
|
-
setContentReference(elm);
|
|
1544
|
-
}
|
|
1545
|
-
}
|
|
1546
1181
|
{
|
|
1547
1182
|
// find the first ancestor component (if there is one) and register
|
|
1548
1183
|
// this component as one of the actively loading child components for its ancestor
|
|
@@ -1584,17 +1219,6 @@ const connectedCallback = (elm) => {
|
|
|
1584
1219
|
endConnected();
|
|
1585
1220
|
}
|
|
1586
1221
|
};
|
|
1587
|
-
const setContentReference = (elm) => {
|
|
1588
|
-
// only required when we're NOT using native shadow dom (slot)
|
|
1589
|
-
// or this browser doesn't support native shadow dom
|
|
1590
|
-
// and this host element was NOT created with SSR
|
|
1591
|
-
// let's pick out the inner content for slot projection
|
|
1592
|
-
// create a node to represent where the original
|
|
1593
|
-
// content was first placed, which is useful later on
|
|
1594
|
-
const contentRefElm = (elm['s-cr'] = doc.createComment(''));
|
|
1595
|
-
contentRefElm['s-cn'] = true;
|
|
1596
|
-
elm.insertBefore(contentRefElm, elm.firstChild);
|
|
1597
|
-
};
|
|
1598
1222
|
const disconnectedCallback = (elm) => {
|
|
1599
1223
|
if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
|
|
1600
1224
|
const hostRef = getHostRef(elm);
|