Hariom BalharaandGitHub
6f0c09d2be
* feat: add embed prerendering support and enhance event handling - Introduced `useIsEmbedPrerendering` hook to determine if the embed is in prerender mode. - Updated `useAvailabilityEvents` to prevent firing events during prerendering. - Added `bookerLoadedEvent` and `availabilityRefreshed` types to `EventDataMap`. - Implemented `useFirebookerLoadedEvent` to manage firing the booker loaded event conditionally. - Refactored event firing logic in `useSchedule` and `BookerWebWrapper` components to utilize new hooks. * feat: add embed prerendering support and enhance event handling - Introduced `useIsEmbedPrerendering` hook to determine if the embed is in prerender mode. - Updated `useAvailabilityEvents` to prevent firing events during prerendering. - Added `bookerLoadedEvent` and `availabilityRefreshed` types to `EventDataMap`. - Implemented `useFirebookerLoadedEvent` to manage firing the booker loaded event conditionally. - Refactored event firing logic in `useSchedule` and `BookerWebWrapper` components to utilize new hooks. * feat: enhance embed event handling and introduce link reopening detection - Added `useEmbedReopened` hook to track when the embed is reopened. - Updated `BookerWebWrapper` to reset event firing state upon embed reopening. - Refactored event firing logic to use `bookerViewed` instead of `bookerLoadedEvent`. - Introduced scheduling for event firing in `useSchedule` to ensure correct order of events during prerendering. * feat: add lifecycle diagrams for inline and modal embeds - Introduced `inline-embed-lifecycle.mermaid` and `modal-embed-lifecycle.mermaid` files to visualize the lifecycle events and states of inline and modal embeds. - Updated `LIFECYCLE.md` to reference the new diagrams and provide a clearer explanation of the embed lifecycle processes. - Added `modal-prerendering-flow.mermaid` to illustrate the prerendering flow for modal embeds. - Enhanced the routing playground with new features and improved event handling for availability and booking events. * refactor: update event handling for booker lifecycle events - Replaced `availabilityLoaded` event with `bookerReady` to better reflect the state when the booker view is fully loaded and ready for interaction. - Updated related documentation and diagrams to reflect changes in event triggers and descriptions. - Adjusted internal state management to track `viewId` instead of `reopenCount` for distinguishing between initial views and reopens. - Added tests for new event handling logic to ensure correct firing of `bookerViewed`, `bookerReopened`, and `bookerReady` events. * refactor: enhance embed event handling and state management - Updated event handling for booker lifecycle events, replacing `resetViewVariables` with `resetPageData` to manage page-specific state. - Introduced new utility functions for managing event firing states and reload initiation. - Refactored `fireBookerViewedEvent` and `fireBookerReadyEvent` to utilize the new state management functions. - Added comprehensive tests for the updated event handling logic and state resets to ensure correct functionality across various scenarios. * refactor: update embed iframe configuration and utility functions - Reduced `slotsStaleTimeMs` from 30 seconds to 10 seconds and `iframeForceReloadThresholdMs` from 100 seconds to 30 seconds for improved responsiveness. - Refactored utility functions to use `isBrowser` for client-side checks instead of `isClientSide`. - Removed unused `isPrerendering` function and updated related documentation for clarity. - Enhanced event handling by exporting `useBookerEmbedEvents` from the appropriate module for better accessibility. * refactor: update embed iframe configuration and utility functions - Reduced `slotsStaleTimeMs` from 30 seconds to 10 seconds and `iframeForceReloadThresholdMs` from 100 seconds to 30 seconds for improved responsiveness. - Refactored utility functions to use `isBrowser` for client-side checks instead of `isClientSide`. - Removed unused `isPrerendering` function and updated related documentation for clarity. - Enhanced event handling by exporting `useBookerEmbedEvents` from the appropriate module for better accessibility. * fix cubic feedback
93 lines
3.5 KiB
Plaintext
93 lines
3.5 KiB
Plaintext
sequenceDiagram
|
|
participant Parent as Parent Page<br/>(embed.ts)
|
|
participant PM as postMessage
|
|
participant Iframe as Iframe<br/>(embed-iframe.ts)
|
|
participant Store as EmbedStore
|
|
|
|
Note over Parent,Store: PHASE 1: Iframe Creation
|
|
|
|
Parent->>Parent: Create iframe element
|
|
Note over Parent: iframe.style.visibility = "hidden"
|
|
Parent->>Parent: Set iframe src with embed params
|
|
Note over Parent: iframeReady = false<br/>iframeDoQueue = []
|
|
|
|
Note over Iframe: Iframe starts loading
|
|
Note over Iframe: body tag hidden<br/>background: transparent
|
|
|
|
Note over Parent,Store: PHASE 2: Handshake Initiation
|
|
|
|
Iframe->>Store: main() called on load
|
|
Store->>Store: Initialize embedStore<br/>state: NOT_INITIALIZED
|
|
Store->>Store: Parse URL params<br/>(theme, layout, colorScheme)
|
|
|
|
alt Iframe is in top window (not embedded)
|
|
Iframe->>Iframe: showPageAsNonEmbed()
|
|
Note over Iframe: Skip embed initialization
|
|
else Iframe is embedded properly
|
|
Iframe->>Store: initializeAndSetupEmbed()
|
|
Store->>Store: state: INITIALIZED<br/>renderState: "inProgress"
|
|
|
|
Note over Parent,Store: PHASE 3: __iframeReady Event
|
|
|
|
Iframe->>PM: fire("__iframeReady", { isPrerendering })
|
|
PM->>Parent: postMessage({ originator: "CAL",<br/>type: "__iframeReady", ... })
|
|
|
|
Note over Parent: Received __iframeReady
|
|
Parent->>Parent: iframeReady = true
|
|
|
|
alt Not prerendering
|
|
Parent->>Parent: iframe.style.visibility = ""
|
|
Note over Parent: Iframe becomes visible
|
|
end
|
|
|
|
Note over Parent,Store: PHASE 4: parentKnowsIframeReady Response
|
|
|
|
Parent->>PM: doInIframe({ method: "parentKnowsIframeReady" })
|
|
PM->>Iframe: postMessage({ originator: "CAL",<br/>method: "parentKnowsIframeReady" })
|
|
|
|
Note over Iframe: Received parentKnowsIframeReady
|
|
Iframe->>Iframe: Wait for isLinkReady()
|
|
Iframe->>Iframe: makeBodyVisible()
|
|
Note over Iframe: body.style.visibility = "visible"
|
|
Store->>Store: renderState: "completed"
|
|
|
|
alt Is prerendering
|
|
Iframe->>PM: fire("linkPrerendered")
|
|
PM->>Parent: linkPrerendered event
|
|
else Normal load
|
|
Iframe->>PM: fire("linkReady")
|
|
PM->>Parent: linkReady event
|
|
end
|
|
|
|
Note over Parent,Store: PHASE 5: Queue Flush
|
|
|
|
Parent->>Parent: Process iframeDoQueue
|
|
|
|
loop For each queued command
|
|
Parent->>PM: doInIframe(queuedCommand)
|
|
PM->>Iframe: postMessage({ method, arg })
|
|
Iframe->>Store: interfaceWithParent[method](arg)
|
|
end
|
|
|
|
Parent->>Parent: iframeDoQueue = []
|
|
Note over Parent: Handshake complete<br/>Communication established
|
|
end
|
|
|
|
Note over Parent,Store: ONGOING: Bi-directional Communication
|
|
|
|
rect rgb(240, 248, 255)
|
|
Note over Parent,Store: Parent → Iframe (Commands)
|
|
Parent->>PM: doInIframe({ method: "ui", arg: uiConfig })
|
|
PM->>Iframe: postMessage({ method: "ui", arg: {...} })
|
|
Iframe->>Store: methods.ui(uiConfig)
|
|
Note over Store: Apply styles, theme, etc.
|
|
end
|
|
|
|
rect rgb(255, 248, 240)
|
|
Note over Parent,Store: Iframe → Parent (Events)
|
|
Iframe->>PM: fire("__dimensionChanged", { height, width })
|
|
PM->>Parent: postMessage with event data
|
|
Parent->>Parent: Adjust iframe dimensions
|
|
end
|
|
|