astro-tractstack 2.0.0-rc.1 → 2.0.0-rc.2

package/templates/src/client/{analytics-events.ts → analytics-events.js}

@@ -1,21 +1,15 @@
-import { VERBOSE } from './sse';
-import { THRESHOLD_GLOSSED, THRESHOLD_READ } from '@/constants';
-
-interface AnalyticsEvent {
-  contentId: string;
-  contentType: 'Pane' | 'StoryFragment';
-  eventVerb: string;
-  duration?: number;
-}
+const THRESHOLD_GLOSSED = 7000; // 7 seconds in ms
+const THRESHOLD_READ = 42000; // 42 seconds in ms
+const VERBOSE = false;
 
-const paneViewTimes = new Map<string, number>();
+const paneViewTimes = new Map();
 let hasTrackedEntered =
   localStorage.getItem('tractstack_entered_tracked') === 'true';
-let currentStoryfragmentId: string | null = null;
+let currentStoryfragmentId = null;
 let isPageInitialized = false;
-let globalObserver: IntersectionObserver | null = null;
+let globalObserver = null;
 
-function waitForSessionReady(): Promise<void> {
+function waitForSessionReady() {
   return new Promise((resolve) => {
     if (window.TRACTSTACK_CONFIG?.session?.isReady) {
       resolve();
@@ -27,7 +21,7 @@ function waitForSessionReady(): Promise<void> {
   });
 }
 
-export async function initAnalyticsTracking(storyfragmentId?: string) {
+export async function initAnalyticsTracking(storyfragmentId) {
   if (isPageInitialized) return;
   isPageInitialized = true;
 
@@ -71,7 +65,7 @@ function initPaneVisibilityTracking() {
   globalObserver = new IntersectionObserver(
     (entries) => {
       entries.forEach((entry) => {
-        const paneId = getPaneIdFromElement(entry.target as HTMLElement);
+        const paneId = getPaneIdFromElement(entry.target);
         if (!paneId) return;
         if (entry.isIntersecting) {
           if (!paneViewTimes.has(paneId)) {
@@ -82,7 +76,7 @@ function initPaneVisibilityTracking() {
           if (startTime) {
             const duration = Date.now() - startTime;
             paneViewTimes.delete(paneId);
-            let eventVerb: string | null = null;
+            let eventVerb = null;
             if (duration >= THRESHOLD_READ) eventVerb = 'READ';
             else if (duration >= THRESHOLD_GLOSSED) eventVerb = 'GLOSSED';
             if (eventVerb) {
@@ -105,7 +99,7 @@ function initPaneVisibilityTracking() {
 function observeAllPanes() {
   if (!globalObserver) return;
   const panes = document.querySelectorAll('[data-pane-id]');
-  panes.forEach((pane) => globalObserver!.observe(pane));
+  panes.forEach((pane) => globalObserver.observe(pane));
 }
 
 function setupLifecycleListeners() {
@@ -151,7 +145,7 @@ function flushPendingPaneEvents() {
   const flushTime = Date.now();
   paneViewTimes.forEach((startTime, paneId) => {
     const duration = flushTime - startTime;
-    let eventVerb: string | null = null;
+    let eventVerb = null;
     if (duration >= THRESHOLD_READ) eventVerb = 'READ';
     else if (duration >= THRESHOLD_GLOSSED) eventVerb = 'GLOSSED';
     if (eventVerb) {
@@ -166,13 +160,13 @@ function flushPendingPaneEvents() {
   paneViewTimes.clear();
 }
 
-async function sendAnalyticsEvent(event: AnalyticsEvent): Promise<void> {
+async function sendAnalyticsEvent(event) {
   try {
     const config = window.TRACTSTACK_CONFIG;
     if (!config || !config.sessionId) return; // Use server-provided session ID
 
     const sessionId = config.sessionId;
-    const formData: { [key: string]: string } = {
+    const formData = {
       beliefId: event.contentId,
       beliefType: event.contentType,
       beliefValue: event.eventVerb,
@@ -198,11 +192,11 @@ async function sendAnalyticsEvent(event: AnalyticsEvent): Promise<void> {
   }
 }
 
-function getPaneIdFromElement(element: HTMLElement): string | null {
+function getPaneIdFromElement(element) {
   return element.getAttribute('data-pane-id');
 }
 
-(window as any).initAnalyticsTracking = initAnalyticsTracking;
+window.initAnalyticsTracking = initAnalyticsTracking;
 
 setupLifecycleListeners();
 

package/templates/src/client/{belief-events.ts → belief-events.js}

@@ -1,4 +1,4 @@
-import { VERBOSE } from './sse';
+const VERBOSE = false;
 
 // This function now contains all essential one-time and recurring HTMX setup.
 function configureHtmx() {
@@ -9,7 +9,7 @@ function configureHtmx() {
     window.HTMX_CONFIGURED = true;
   }
 
-  window.htmx.on(document.body, 'htmx:configRequest', function (evt: any) {
+  window.htmx.on(document.body, 'htmx:configRequest', function (evt) {
     const config = window.TRACTSTACK_CONFIG;
     if (!config || !config.sessionId) return; // Check for config and session ID
 
@@ -27,20 +27,10 @@ function configureHtmx() {
   });
 }
 
-interface BeliefUpdateData {
-  [key: string]: string;
-  beliefId: string;
-  beliefType: string;
-  beliefValue: string;
-  paneId: string;
-}
-
-const pageBeliefs: {
-  [storyfragmentId: string]: { [beliefId: string]: string };
-} = {};
-let activeStoryfragmentId: string | null = null;
+const pageBeliefs = {};
+let activeStoryfragmentId = null;
 
-function waitForSessionReady(): Promise<void> {
+function waitForSessionReady() {
   return new Promise((resolve) => {
     // This event is fired by sse.ts after the handshake is complete.
     if (window.TRACTSTACK_CONFIG?.session?.isReady) {
@@ -66,21 +56,19 @@ function initializeBeliefs() {
 
   configureHtmx(); // Run config on initial load.
 
-  document.addEventListener('change', function (event: Event) {
-    const target = event.target as HTMLElement;
+  document.addEventListener('change', function (event) {
+    const target = event.target;
     if (
       target.matches &&
       (target.matches('select[data-belief-id]') ||
         target.matches('input[type="checkbox"][data-belief-id]'))
     ) {
-      handleBeliefChange(target as HTMLSelectElement | HTMLInputElement);
+      handleBeliefChange(target);
     }
   });
 }
 
-async function handleBeliefChange(
-  element: HTMLSelectElement | HTMLInputElement
-): Promise<void> {
+async function handleBeliefChange(element) {
   const beliefId = element.getAttribute('data-belief-id');
   const beliefType = element.getAttribute('data-belief-type');
   const paneId = element.getAttribute('data-pane-id');
@@ -91,13 +79,11 @@ async function handleBeliefChange(
     return;
   }
 
-  let beliefValue: string;
-  if ((element as HTMLInputElement).type === 'checkbox') {
-    beliefValue = (element as HTMLInputElement).checked
-      ? 'BELIEVES_YES'
-      : 'BELIEVES_NO';
+  let beliefValue;
+  if (element.type === 'checkbox') {
+    beliefValue = element.checked ? 'BELIEVES_YES' : 'BELIEVES_NO';
   } else {
-    beliefValue = (element as HTMLSelectElement).value;
+    beliefValue = element.value;
   }
 
   if (VERBOSE)
@@ -119,7 +105,7 @@ async function handleBeliefChange(
   });
 }
 
-async function sendBeliefUpdate(data: BeliefUpdateData): Promise<void> {
+async function sendBeliefUpdate(data) {
   await waitForSessionReady();
 
   try {
@@ -164,7 +150,7 @@ async function sendBeliefUpdate(data: BeliefUpdateData): Promise<void> {
   }
 }
 
-function trackBeliefState(beliefId: string, beliefValue: string) {
+function trackBeliefState(beliefId, beliefValue) {
   if (!activeStoryfragmentId) return;
 
   if (!pageBeliefs[activeStoryfragmentId]) {

package/templates/src/client/{sse.ts → sse.js}

@@ -2,51 +2,15 @@
  * SSE (Server-Sent Events) Client with Critical Debug Logging
  */
 
-export const VERBOSE = false;
-
-interface StoryfragmentUpdate {
-  storyfragmentId: string;
-  affectedPanes: string[];
-  gotoPaneId?: string;
-}
-
-interface BatchPanesUpdatedEventData {
-  updates: StoryfragmentUpdate[];
-}
-
-interface PanesUpdatedEventData {
-  storyfragmentId: string;
-  affectedPanes: string[];
-  gotoPaneId?: string;
-}
-
-type PanesEventData = BatchPanesUpdatedEventData | PanesUpdatedEventData;
-
-interface HandshakeRequest {
-  sessionId: string;
-  storyfragmentId: string;
-  consent: string;
-  encryptedEmail?: string;
-  encryptedCode?: string;
-}
-
-interface HandshakeResponse {
-  fingerprint: string;
-  visitId: string;
-  sessionId: string;
-  hasProfile: boolean;
-  consent: string;
-  restored?: boolean;
-  affectedPanes?: string[];
-}
+const VERBOSE = false;
 
 // ============================================================================
 // GLOBAL STATE
 // ============================================================================
 
-let eventSource: EventSource | null = null;
+let eventSource = null;
 let isHtmxReady = false;
-let currentStoryfragmentId: string | null = null;
+let currentStoryfragmentId = null;
 let reconnectAttempts = 0;
 
 const BASE_RECONNECT_DELAY = 1000;
@@ -56,20 +20,15 @@ const MAX_RECONNECT_ATTEMPTS = 5;
 // CRITICAL DEBUG LOGGING
 // ============================================================================
 
-function log(...args: any[]): void {
+function log(...args) {
   if (VERBOSE) console.log('🔌 SSE DEBUG:', ...args);
 }
 
-function logCritical(...args: any[]): void {
+function logCritical(...args) {
   if (VERBOSE) console.error('🚨 SSE CRITICAL:', ...args);
 }
 
-function logStoryfragmentChange(
-  action: string,
-  oldId: string | null,
-  newId: string | null,
-  source: string
-): void {
+function logStoryfragmentChange(action, oldId, newId, source) {
   logCritical(`STORYFRAGMENT ${action}:`, {
     action,
     oldId,
@@ -81,12 +40,7 @@ function logStoryfragmentChange(
   });
 }
 
-function logSSEEvent(
-  eventType: string,
-  data: any,
-  willProcess: boolean,
-  reason?: string
-): void {
+function logSSEEvent(eventType, data, willProcess, reason) {
   logCritical(`SSE EVENT ${eventType}:`, {
     eventType,
     data,
@@ -102,9 +56,7 @@ function logSSEEvent(
 // SSE HANDSHAKE
 // ============================================================================
 
-async function performSSEHandshake(
-  sessionId: string
-): Promise<HandshakeResponse> {
+async function performSSEHandshake(sessionId) {
   log('=== STARTING SSE HANDSHAKE ===');
   log('📤 Session ID provided by server:', sessionId);
 
@@ -144,7 +96,7 @@ async function performSSEHandshake(
   const consent = localStorage.getItem('tractstack_consent') || '0';
   log('📋 Consent status:', consent);
 
-  const handshakePayload: HandshakeRequest = {
+  const handshakePayload = {
     sessionId,
     storyfragmentId: config.storyfragmentId,
     consent,
@@ -178,7 +130,7 @@ async function performSSEHandshake(
       throw new Error(`Handshake failed with status ${response.status}`);
     }
 
-    const result: HandshakeResponse = await response.json();
+    const result = await response.json();
     log('📥 Handshake response received:', result);
 
     const restorationDetails = {
@@ -272,7 +224,7 @@ async function performSSEHandshake(
 // SSE CONNECTION
 // ============================================================================
 
-function initializeSSE(sessionId: string): void {
+function initializeSSE(sessionId) {
   log('=== SSE CONNECTION INITIALIZATION ===');
 
   if (eventSource) {
@@ -299,22 +251,19 @@ function initializeSSE(sessionId: string): void {
 
   eventSource.addEventListener('connected', (event) => {
     try {
-      const data = JSON.parse((event as MessageEvent).data);
+      const data = JSON.parse(event.data);
       log('📡 SSE Connected event received:', data);
     } catch (error) {
-      log(
-        '⚠️  Failed to parse connected event data:',
-        (event as MessageEvent).data
-      );
+      log('⚠️  Failed to parse connected event data:', event.data);
     }
   });
 
   eventSource.addEventListener('heartbeat', (event) => {
     try {
-      const data = JSON.parse((event as MessageEvent).data);
+      const data = JSON.parse(event.data);
       log('💓 SSE Heartbeat:', data);
     } catch (error) {
-      log('⚠️  Failed to parse heartbeat data:', (event as MessageEvent).data);
+      log('⚠️  Failed to parse heartbeat data:', event.data);
     }
   });
 
@@ -330,7 +279,7 @@ function initializeSSE(sessionId: string): void {
     log('📨 === PANES_UPDATED EVENT ===');
 
     try {
-      const data: PanesEventData = JSON.parse((event as MessageEvent).data);
+      const data = JSON.parse(event.data);
 
       logCritical('📨 PANES_UPDATED PARSED:', {
         data,
@@ -426,7 +375,7 @@ function initializeSSE(sessionId: string): void {
   };
 }
 
-function processStoryfragmentUpdate(update: StoryfragmentUpdate): void {
+function processStoryfragmentUpdate(update) {
   logCritical('🔄 PROCESSING UPDATE:', {
     storyfragmentId: update.storyfragmentId,
     affectedPanes: update.affectedPanes,
@@ -502,7 +451,7 @@ function processStoryfragmentUpdate(update: StoryfragmentUpdate): void {
   log('🔄 === UPDATE PROCESSING COMPLETE ===');
 }
 
-function handleReconnection(): void {
+function handleReconnection() {
   if (reconnectAttempts >= MAX_RECONNECT_ATTEMPTS) {
     log(
       `❌ Max reconnection attempts (${MAX_RECONNECT_ATTEMPTS}) reached. Giving up.`
@@ -531,10 +480,7 @@ function handleReconnection(): void {
 // CONTEXT MANAGEMENT
 // ============================================================================
 
-function updateStoryfragmentContext(
-  newStoryfragmentId: string,
-  source: string
-): void {
+function updateStoryfragmentContext(newStoryfragmentId, source) {
   const oldId = currentStoryfragmentId;
 
   if (currentStoryfragmentId !== newStoryfragmentId) {
@@ -555,7 +501,7 @@ function updateStoryfragmentContext(
 // CONNECTION SETUP
 // ============================================================================
 
-function setupSSEConnection(): void {
+function setupSSEConnection() {
   log('=== SSE CONNECTION SETUP ===');
   log('🚀 First-time SSE initialization');