@amplifyup/sdk 0.2.0 → 0.2.2
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/AmplifyRenderer.js +83 -110
- package/dist/AmplifyRenderer.js.map +1 -1
- package/dist/AmplifyRenderer.mjs +83 -110
- package/dist/AmplifyRenderer.mjs.map +1 -1
- package/dist/index.js +82 -103
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +82 -103
- package/dist/index.mjs.map +1 -1
- package/dist/react.d.mts +1 -1
- package/dist/react.d.ts +1 -1
- package/dist/react.js +103 -178
- package/dist/react.js.map +1 -1
- package/dist/react.mjs +103 -178
- package/dist/react.mjs.map +1 -1
- package/dist/server.js +1 -1
- package/dist/server.js.map +1 -1
- package/dist/server.mjs +1 -1
- package/dist/server.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -410,7 +410,7 @@ function isComposerPreview() {
|
|
|
410
410
|
if (window.self !== window.top && document.referrer) {
|
|
411
411
|
try {
|
|
412
412
|
const refUrl = new URL(document.referrer);
|
|
413
|
-
if (refUrl.hostname === "amplifyup.ai" || refUrl.hostname.endsWith(".amplifyup.ai") || refUrl.hostname === "localhost" && refUrl.port === "5001" || refUrl.pathname.includes("/dashboard/composer")
|
|
413
|
+
if (refUrl.hostname === "amplifyup.ai" || refUrl.hostname.endsWith(".amplifyup.ai") || refUrl.hostname === "localhost" && refUrl.port === "5001" || refUrl.pathname.includes("/dashboard/composer")) {
|
|
414
414
|
return true;
|
|
415
415
|
}
|
|
416
416
|
} catch {
|
|
@@ -1408,7 +1408,7 @@ var AmplifyUpSDK = class {
|
|
|
1408
1408
|
if (document.referrer) {
|
|
1409
1409
|
try {
|
|
1410
1410
|
const referrerUrl = new URL(document.referrer);
|
|
1411
|
-
if (referrerUrl.hostname === "localhost" && referrerUrl.port === "5001" || referrerUrl.pathname.includes("/dashboard/composer")
|
|
1411
|
+
if (referrerUrl.hostname === "localhost" && referrerUrl.port === "5001" || referrerUrl.pathname.includes("/dashboard/composer")) {
|
|
1412
1412
|
return true;
|
|
1413
1413
|
}
|
|
1414
1414
|
} catch {
|
|
@@ -1685,11 +1685,7 @@ var AmplifyUpSDK = class {
|
|
|
1685
1685
|
this.page(resumePath, { resumed: true });
|
|
1686
1686
|
this.lastTrackedPath = resumePath;
|
|
1687
1687
|
if (this.config?.debug) {
|
|
1688
|
-
console.log(
|
|
1689
|
-
"[AmplifyUp SDK] Idle resume page view",
|
|
1690
|
-
resumePath,
|
|
1691
|
-
`(hidden ${Math.round(idleMs / 6e4)}m)`
|
|
1692
|
-
);
|
|
1688
|
+
console.log("[AmplifyUp SDK] Idle resume page view", resumePath, `(hidden ${Math.round(idleMs / 6e4)}m)`);
|
|
1693
1689
|
}
|
|
1694
1690
|
}
|
|
1695
1691
|
noteActivity();
|
|
@@ -1709,12 +1705,7 @@ var AmplifyUpSDK = class {
|
|
|
1709
1705
|
}
|
|
1710
1706
|
state.visibleSince = null;
|
|
1711
1707
|
};
|
|
1712
|
-
const activityEvents = [
|
|
1713
|
-
"pointerdown",
|
|
1714
|
-
"keydown",
|
|
1715
|
-
"scroll",
|
|
1716
|
-
"touchstart"
|
|
1717
|
-
];
|
|
1708
|
+
const activityEvents = ["pointerdown", "keydown", "scroll", "touchstart"];
|
|
1718
1709
|
const onActivity = () => noteActivity();
|
|
1719
1710
|
window.addEventListener("scroll", onScroll, { passive: true });
|
|
1720
1711
|
document.addEventListener("visibilitychange", onVisibility);
|
|
@@ -1862,11 +1853,7 @@ var AmplifyUpSDK = class {
|
|
|
1862
1853
|
hosts.forEach((host) => observer.observe(host));
|
|
1863
1854
|
this.componentViewObservers.push(observer);
|
|
1864
1855
|
if (this.config?.debug) {
|
|
1865
|
-
console.log(
|
|
1866
|
-
"[AmplifyUp SDK] Component View tracking enabled for",
|
|
1867
|
-
hosts.length,
|
|
1868
|
-
"hosts"
|
|
1869
|
-
);
|
|
1856
|
+
console.log("[AmplifyUp SDK] Component View tracking enabled for", hosts.length, "hosts");
|
|
1870
1857
|
}
|
|
1871
1858
|
}
|
|
1872
1859
|
cleanupComponentViewTracking() {
|
|
@@ -2439,15 +2426,11 @@ Available Console Commands:
|
|
|
2439
2426
|
) : document;
|
|
2440
2427
|
if (!scopeRoot) {
|
|
2441
2428
|
if (this.config?.debug) {
|
|
2442
|
-
console.log(
|
|
2443
|
-
`[AmplifyUp SDK] Component host not found for ${eventConfig.componentId}`
|
|
2444
|
-
);
|
|
2429
|
+
console.log(`[AmplifyUp SDK] Component host not found for ${eventConfig.componentId}`);
|
|
2445
2430
|
}
|
|
2446
2431
|
return;
|
|
2447
2432
|
}
|
|
2448
|
-
targetElements = Array.from(
|
|
2449
|
-
scopeRoot.querySelectorAll(eventConfig.selector)
|
|
2450
|
-
);
|
|
2433
|
+
targetElements = Array.from(scopeRoot.querySelectorAll(eventConfig.selector));
|
|
2451
2434
|
if (scopeRoot instanceof Element && scopeRoot !== document.documentElement && scopeRoot.matches?.(eventConfig.selector)) {
|
|
2452
2435
|
targetElements.unshift(scopeRoot);
|
|
2453
2436
|
}
|
|
@@ -2480,7 +2463,9 @@ Available Console Commands:
|
|
|
2480
2463
|
});
|
|
2481
2464
|
}
|
|
2482
2465
|
if (this.config?.debug) {
|
|
2483
|
-
console.log(
|
|
2466
|
+
console.log(
|
|
2467
|
+
`[AmplifyUp SDK] Attached ${eventConfig.eventType} listener for ${eventConfig.eventName} on selector: ${eventConfig.selector}`
|
|
2468
|
+
);
|
|
2484
2469
|
}
|
|
2485
2470
|
});
|
|
2486
2471
|
});
|
|
@@ -2490,16 +2475,16 @@ Available Console Commands:
|
|
|
2490
2475
|
*/
|
|
2491
2476
|
mapEventType(eventType) {
|
|
2492
2477
|
const eventMap = {
|
|
2493
|
-
|
|
2494
|
-
|
|
2495
|
-
|
|
2496
|
-
|
|
2497
|
-
|
|
2498
|
-
|
|
2499
|
-
|
|
2500
|
-
|
|
2478
|
+
click: "click",
|
|
2479
|
+
submit: "submit",
|
|
2480
|
+
focus: "focus",
|
|
2481
|
+
blur: "blur",
|
|
2482
|
+
hover: "mouseenter",
|
|
2483
|
+
change: "change",
|
|
2484
|
+
scroll: "scroll",
|
|
2485
|
+
view: "view",
|
|
2501
2486
|
// Handled separately with IntersectionObserver
|
|
2502
|
-
|
|
2487
|
+
custom: "custom"
|
|
2503
2488
|
};
|
|
2504
2489
|
return eventMap[eventType] || eventType;
|
|
2505
2490
|
}
|
|
@@ -2575,11 +2560,7 @@ Available Console Commands:
|
|
|
2575
2560
|
(entries) => {
|
|
2576
2561
|
entries.forEach((entry) => {
|
|
2577
2562
|
if (entry.isIntersecting) {
|
|
2578
|
-
this.handleTrackedEvent(
|
|
2579
|
-
new CustomEvent("view"),
|
|
2580
|
-
config,
|
|
2581
|
-
element
|
|
2582
|
-
);
|
|
2563
|
+
this.handleTrackedEvent(new CustomEvent("view"), config, element);
|
|
2583
2564
|
observer.unobserve(element);
|
|
2584
2565
|
}
|
|
2585
2566
|
});
|
|
@@ -2722,21 +2703,15 @@ Available Console Commands:
|
|
|
2722
2703
|
return;
|
|
2723
2704
|
}
|
|
2724
2705
|
if (event.data?.type === "AMPLIFYUP_FIELD_PATCH") {
|
|
2725
|
-
window.dispatchEvent(
|
|
2726
|
-
new CustomEvent("amplifyup:field-patch", { detail: event.data })
|
|
2727
|
-
);
|
|
2706
|
+
window.dispatchEvent(new CustomEvent("amplifyup:field-patch", { detail: event.data }));
|
|
2728
2707
|
return;
|
|
2729
2708
|
}
|
|
2730
2709
|
if (event.data?.type === "AMPLIFYUP_PROPS_PATCH") {
|
|
2731
|
-
window.dispatchEvent(
|
|
2732
|
-
new CustomEvent("amplifyup:props-patch", { detail: event.data })
|
|
2733
|
-
);
|
|
2710
|
+
window.dispatchEvent(new CustomEvent("amplifyup:props-patch", { detail: event.data }));
|
|
2734
2711
|
return;
|
|
2735
2712
|
}
|
|
2736
2713
|
if (event.data?.type === "AMPLIFYUP_LAYOUT_PATCH") {
|
|
2737
|
-
window.dispatchEvent(
|
|
2738
|
-
new CustomEvent("amplifyup:layout-patch", { detail: event.data })
|
|
2739
|
-
);
|
|
2714
|
+
window.dispatchEvent(new CustomEvent("amplifyup:layout-patch", { detail: event.data }));
|
|
2740
2715
|
return;
|
|
2741
2716
|
}
|
|
2742
2717
|
if (event.data?.type === "COMPONENT_DELETABLE_STATUS") {
|
|
@@ -2799,9 +2774,7 @@ Available Console Commands:
|
|
|
2799
2774
|
const { componentId, slotName, nodeId, isPageSlot } = event.data;
|
|
2800
2775
|
let element = null;
|
|
2801
2776
|
if (isPageSlot || slotName === "main" && !nodeId && !componentId) {
|
|
2802
|
-
element = document.querySelector(
|
|
2803
|
-
'[data-slot-source="page"]'
|
|
2804
|
-
);
|
|
2777
|
+
element = document.querySelector('[data-slot-source="page"]');
|
|
2805
2778
|
}
|
|
2806
2779
|
if (!element && nodeId && slotName) {
|
|
2807
2780
|
element = document.querySelector(
|
|
@@ -2809,9 +2782,7 @@ Available Console Commands:
|
|
|
2809
2782
|
);
|
|
2810
2783
|
}
|
|
2811
2784
|
if (!element && nodeId && !slotName) {
|
|
2812
|
-
element = document.querySelector(
|
|
2813
|
-
`[data-node-id="${nodeId}"]`
|
|
2814
|
-
);
|
|
2785
|
+
element = document.querySelector(`[data-node-id="${nodeId}"]`);
|
|
2815
2786
|
}
|
|
2816
2787
|
if (!element && slotName) {
|
|
2817
2788
|
element = document.querySelector(
|
|
@@ -2852,30 +2823,33 @@ Available Console Commands:
|
|
|
2852
2823
|
};
|
|
2853
2824
|
if (window.parent && window.parent !== window) {
|
|
2854
2825
|
const hierarchyEls = this.buildComponentHierarchy(element);
|
|
2855
|
-
window.parent.postMessage(
|
|
2856
|
-
|
|
2857
|
-
|
|
2858
|
-
|
|
2859
|
-
|
|
2860
|
-
|
|
2861
|
-
|
|
2862
|
-
|
|
2863
|
-
|
|
2864
|
-
|
|
2865
|
-
|
|
2866
|
-
|
|
2867
|
-
|
|
2868
|
-
|
|
2869
|
-
|
|
2870
|
-
|
|
2871
|
-
|
|
2872
|
-
|
|
2873
|
-
|
|
2874
|
-
|
|
2875
|
-
|
|
2876
|
-
|
|
2877
|
-
|
|
2878
|
-
|
|
2826
|
+
window.parent.postMessage(
|
|
2827
|
+
{
|
|
2828
|
+
type: "ELEMENT_POSITION",
|
|
2829
|
+
componentId: componentId || null,
|
|
2830
|
+
slotName: slotName || null,
|
|
2831
|
+
nodeId: nodeId || null,
|
|
2832
|
+
isPageSlot: !!isPageSlot || element.getAttribute("data-slot-source") === "page",
|
|
2833
|
+
hierarchy: hierarchyEls.map((el, index) => {
|
|
2834
|
+
const elComponentId = el.getAttribute("data-amplifyup-component") || el.getAttribute("data-component-id");
|
|
2835
|
+
const elSlotName = el.getAttribute("data-amplifyup-slot") || el.getAttribute("data-slot-id");
|
|
2836
|
+
const isSlot = !elComponentId && !!elSlotName;
|
|
2837
|
+
const pageSlot = isSlot && el.getAttribute("data-slot-source") === "page";
|
|
2838
|
+
return {
|
|
2839
|
+
index,
|
|
2840
|
+
componentId: elComponentId,
|
|
2841
|
+
componentName: pageSlot ? "Page" : el.getAttribute("data-component-name"),
|
|
2842
|
+
slotName: isSlot ? elSlotName : null,
|
|
2843
|
+
isSlot,
|
|
2844
|
+
isPageSlot: pageSlot,
|
|
2845
|
+
nodeId: el.getAttribute("data-node-id") || (isSlot ? el.getAttribute("data-parent-node-id") : null)
|
|
2846
|
+
};
|
|
2847
|
+
}),
|
|
2848
|
+
position,
|
|
2849
|
+
bounds
|
|
2850
|
+
},
|
|
2851
|
+
"*"
|
|
2852
|
+
);
|
|
2879
2853
|
}
|
|
2880
2854
|
} else {
|
|
2881
2855
|
console.warn("[AmplifyUp SDK] Element not found for position request");
|
|
@@ -2891,7 +2865,11 @@ Available Console Commands:
|
|
|
2891
2865
|
switch (message.type) {
|
|
2892
2866
|
case "ENABLE_HIGHLIGHTING":
|
|
2893
2867
|
case "UPDATE_HIGHLIGHTING":
|
|
2894
|
-
console.log(
|
|
2868
|
+
console.log(
|
|
2869
|
+
"[AmplifyUp SDK] Enabling highlighting with registry:",
|
|
2870
|
+
message.componentRegistry?.length || 0,
|
|
2871
|
+
"components"
|
|
2872
|
+
);
|
|
2895
2873
|
this.enableHighlighting(
|
|
2896
2874
|
message.componentRegistry || [],
|
|
2897
2875
|
message.highlightComponents ?? true,
|
|
@@ -2951,12 +2929,15 @@ Available Console Commands:
|
|
|
2951
2929
|
const tagName = target.tagName.toLowerCase();
|
|
2952
2930
|
const text = (target.textContent || "").replace(/\s+/g, " ").trim().substring(0, 80);
|
|
2953
2931
|
if (window.parent && window.parent !== window) {
|
|
2954
|
-
window.parent.postMessage(
|
|
2955
|
-
|
|
2956
|
-
|
|
2957
|
-
|
|
2958
|
-
|
|
2959
|
-
|
|
2932
|
+
window.parent.postMessage(
|
|
2933
|
+
{
|
|
2934
|
+
type: "ELEMENT_CLICKED_FOR_EVENT",
|
|
2935
|
+
selector,
|
|
2936
|
+
tagName,
|
|
2937
|
+
text
|
|
2938
|
+
},
|
|
2939
|
+
"*"
|
|
2940
|
+
);
|
|
2960
2941
|
}
|
|
2961
2942
|
};
|
|
2962
2943
|
document.addEventListener("click", this.eventSelectionClickHandler, true);
|
|
@@ -2982,9 +2963,7 @@ Available Console Commands:
|
|
|
2982
2963
|
return "[" + attr.name + '="' + attr.value + '"]';
|
|
2983
2964
|
}
|
|
2984
2965
|
if (el.className && typeof el.className === "string") {
|
|
2985
|
-
const classes = el.className.split(" ").filter(
|
|
2986
|
-
(c) => c && !c.startsWith("has-") && !c.includes("selectable") && !c.includes("selected")
|
|
2987
|
-
);
|
|
2966
|
+
const classes = el.className.split(" ").filter((c) => c && !c.startsWith("has-") && !c.includes("selectable") && !c.includes("selected"));
|
|
2988
2967
|
if (classes.length > 0) {
|
|
2989
2968
|
return el.tagName.toLowerCase() + "." + classes[0];
|
|
2990
2969
|
}
|
|
@@ -3034,9 +3013,7 @@ Available Console Commands:
|
|
|
3034
3013
|
}
|
|
3035
3014
|
});
|
|
3036
3015
|
if (containing.length === 0) return null;
|
|
3037
|
-
const innermost = containing.filter(
|
|
3038
|
-
(el) => !containing.some((other) => other !== el && el.contains(other))
|
|
3039
|
-
);
|
|
3016
|
+
const innermost = containing.filter((el) => !containing.some((other) => other !== el && el.contains(other)));
|
|
3040
3017
|
if (innermost.length === 1) return innermost[0];
|
|
3041
3018
|
let best = innermost[0];
|
|
3042
3019
|
let bestArea = Infinity;
|
|
@@ -3153,9 +3130,7 @@ Available Console Commands:
|
|
|
3153
3130
|
*/
|
|
3154
3131
|
enableHighlighting(componentRegistry, highlightComponents, showZones) {
|
|
3155
3132
|
if (typeof document === "undefined") return;
|
|
3156
|
-
const previouslySelected = Array.from(
|
|
3157
|
-
document.querySelectorAll(".amplifyup-selected")
|
|
3158
|
-
);
|
|
3133
|
+
const previouslySelected = Array.from(document.querySelectorAll(".amplifyup-selected"));
|
|
3159
3134
|
this.componentRegistry = componentRegistry;
|
|
3160
3135
|
this.highlightingEnabled = true;
|
|
3161
3136
|
this.highlightComponentsEnabled = highlightComponents;
|
|
@@ -3528,10 +3503,7 @@ Available Console Commands:
|
|
|
3528
3503
|
if (shouldReapply && this.highlightingEnabled) {
|
|
3529
3504
|
setTimeout(() => {
|
|
3530
3505
|
if (this.highlightingEnabled) {
|
|
3531
|
-
this.applyComponentHighlights(
|
|
3532
|
-
this.highlightComponentsEnabled,
|
|
3533
|
-
this.showZonesEnabled
|
|
3534
|
-
);
|
|
3506
|
+
this.applyComponentHighlights(this.highlightComponentsEnabled, this.showZonesEnabled);
|
|
3535
3507
|
}
|
|
3536
3508
|
}, 100);
|
|
3537
3509
|
}
|
|
@@ -3540,7 +3512,13 @@ Available Console Commands:
|
|
|
3540
3512
|
childList: true,
|
|
3541
3513
|
subtree: true,
|
|
3542
3514
|
attributes: true,
|
|
3543
|
-
attributeFilter: [
|
|
3515
|
+
attributeFilter: [
|
|
3516
|
+
"data-amplifyup-component",
|
|
3517
|
+
"data-component-id",
|
|
3518
|
+
"data-amplifyup-slot",
|
|
3519
|
+
"data-slot-id",
|
|
3520
|
+
"data-slot-empty"
|
|
3521
|
+
]
|
|
3544
3522
|
});
|
|
3545
3523
|
}
|
|
3546
3524
|
/**
|
|
@@ -3554,9 +3532,7 @@ Available Console Commands:
|
|
|
3554
3532
|
this.teardownComposerDragDrop();
|
|
3555
3533
|
if (opts?.clearSelection !== false && typeof window !== "undefined") {
|
|
3556
3534
|
window.__AMPLIFYUP_COMPOSER_EDIT__ = false;
|
|
3557
|
-
window.dispatchEvent(
|
|
3558
|
-
new CustomEvent("amplifyup:composer-edit", { detail: { enabled: false } })
|
|
3559
|
-
);
|
|
3535
|
+
window.dispatchEvent(new CustomEvent("amplifyup:composer-edit", { detail: { enabled: false } }));
|
|
3560
3536
|
}
|
|
3561
3537
|
if (this.mutationObserver) {
|
|
3562
3538
|
this.mutationObserver.disconnect();
|
|
@@ -3714,7 +3690,10 @@ Available Console Commands:
|
|
|
3714
3690
|
e.stopPropagation();
|
|
3715
3691
|
this.sendSelectionMessage(htmlEl, hierarchy);
|
|
3716
3692
|
if (window.parent && window.parent !== window) {
|
|
3717
|
-
window.parent.postMessage(
|
|
3693
|
+
window.parent.postMessage(
|
|
3694
|
+
{ type: "CHECK_COMPONENT_DELETABLE", componentId: component.component_id },
|
|
3695
|
+
"*"
|
|
3696
|
+
);
|
|
3718
3697
|
}
|
|
3719
3698
|
};
|
|
3720
3699
|
htmlEl.addEventListener("click", handleClick);
|