Skip to content

fix(playground): add debug console logs for event flow #368

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
anonvt merged 1 commit into from
Apr 16, 2026
Merged

fix(playground): add debug console logs for event flow #368

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 20 additions & 2 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -682,7 +682,9 @@ <h2>Code Snippet</h2>

// Listen for topsort CustomEvents
function attachEventListener(el) {
console.debug("[Playground] Attaching topsort listener to", el.dataset.tsProduct || el.dataset.tsAction || "(unknown)");
el.addEventListener("topsort", (e) => {
console.debug("[Playground] topsort event received:", e.detail.type, e.detail.product || e.detail.items);
eventCount++;
eventCountBadge.textContent = eventCount;

Expand Down Expand Up @@ -724,11 +726,16 @@ <h2>Code Snippet</h2>
}

function ensureAnalyticsLoaded() {
if (analyticsLoaded) return true;
if (analyticsLoaded) {
console.debug("[Playground] analytics.js already loaded, skipping init");
return true;
}

const token = document.getElementById("token").value.trim();
const url = document.getElementById("api-url").value.trim();

console.debug("[Playground] Initializing analytics.js", { token: token ? "(set)" : "(empty)", url: url || "(default)" });

window.TS = {};
if (token) window.TS.token = token;
if (url) window.TS.url = url;
Expand All @@ -741,7 +748,12 @@ <h2>Code Snippet</h2>
// The UMD build (ts.js) cannot work standalone because it treats the SDK as external.
const script = document.createElement("script");
script.src = "./dist/ts.iife.js";
script.onerror = () => {
script.onload = () => {
console.debug("[Playground] ts.iife.js loaded successfully");
console.debug("[Playground] window.TS.loaded =", window.TS.loaded, "| token =", window.TS.token ? "(set)" : "(empty)");
};
script.onerror = (err) => {
console.error("[Playground] Failed to load ts.iife.js", err);
alert("Could not load analytics.js. Make sure the IIFE bundle exists at dist/ts.iife.js (run `pnpm run build`).");
};
document.head.appendChild(script);
Expand Down Expand Up @@ -853,6 +865,7 @@ <h2>Code Snippet</h2>
if (ensureAnalyticsLoaded() === false) return;

const type = document.querySelector('[name="element-type"]:checked').value;
console.debug("[Playground] Adding element:", type);

// Clear empty state on first add
if (previewArea.querySelector(".empty-state")) {
Expand All @@ -879,13 +892,16 @@ <h2>Code Snippet</h2>
card = addProductElement(type, productId, resolvedBid, useClickable);
}

console.debug("[Playground] Appending card to DOM:", { attributes: Array.from(card.attributes).map(a => `${a.name}="${a.value}"`).join(" ") });
previewArea.appendChild(card);
console.debug("[Playground] Card in DOM. Preview children:", previewArea.querySelectorAll("[data-ts-product],[data-ts-action],[data-ts-resolved-bid]").length);
elementCount++;
elementCountBadge.textContent = elementCount;
updateSnippet();
});

document.getElementById("clear-btn").addEventListener("click", () => {
console.debug("[Playground] Clear clicked, resetting state");
previewArea.innerHTML = '<span class="empty-state">Add elements using the form on the left.</span>';
eventLog.innerHTML = '<span class="empty-state">Events will appear here as they are detected by analytics.js.</span>';
elementCount = 0;
Expand All @@ -904,9 +920,11 @@ <h2>Code Snippet</h2>
// When the token field is updated after the library is already loaded,
// set it directly on window.TS so the watchForToken setter fires and drains the queue.
document.getElementById("token").addEventListener("change", () => {
console.debug("[Playground] Token change event fired, analyticsLoaded =", analyticsLoaded);
if (!analyticsLoaded) return;
const token = document.getElementById("token").value.trim();
if (token) {
console.debug("[Playground] Setting window.TS.token via change handler");
window.TS.token = token;
noTokenNotice.classList.remove("visible");
}
Expand Down
Loading