@raclettejs/core 0.1.40 → 0.1.42

package/services/frontend/src/orchestrator/components/composition/WidgetsLayoutLoader.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="tw:relative tw:max-w-full tw:min-h-fit"
+    class="tw:relative tw:min-h-fit tw:max-w-full"
     :class="{
       'tw:min-h-[200px]': showLoadingOverlay,
       'tw:p-4':
@@ -32,59 +32,68 @@
           class="tw:max-w-full tw:self-start"
           :class="{ 'tw:h-full': slotLayout === 'full' }"
         >
-        <v-col
-          v-for="(column, colIndex) in props.widgetsLayout"
-          :key="colIndex"
-          :cols="getGridCols(props.widgetsLayout.length)"
-          :class="{ 'tw:h-full': slotLayout === 'full' }"
-        >
-          <v-row
-            :no-gutters="slotLayout === 'default' || slotLayout === 'full'"
-            :class="[{ 'tw:h-full': slotLayout === 'full' }, rowClasses]"
+          <v-col
+            v-for="(column, colIndex) in props.widgetsLayout"
+            :key="colIndex"
+            :cols="getGridCols(props.widgetsLayout.length)"
+            :class="{ 'tw:h-full': slotLayout === 'full' }"
           >
-            <TransitionGroup
-              name="grid-item"
-              tag="div"
-              class="tw:w-full tw:flex tw:flex-wrap"
-              appear
+            <v-row
+              :no-gutters="slotLayout === 'default' || slotLayout === 'full'"
+              :class="[{ 'tw:h-full': slotLayout === 'full' }, rowClasses]"
             >
-              <v-col
-                v-for="(slot, slotIndex) in column"
-                :key="`${gridKey}-${colIndex}-${slotIndex}`"
-                :cols="getSlotCols(slot)"
-                :style="{
-                  'transition-delay': `${slotIndex * 50}ms`,
-                  ...(slotLayout === 'default' || slotLayout === 'full'
-                    ? { padding: '0px' }
-                    : {}),
-                }"
+              <TransitionGroup
+                name="grid-item"
+                tag="div"
+                class="tw:flex tw:w-full tw:flex-wrap"
+                appear
               >
-                <div :class="widgetContainerClasses" class="tw:h-full">
-                  <component
+                <v-col
+                  v-for="(slot, slotIndex) in column"
+                  v-show="slot.widget"
+                  :key="`${gridKey}-${colIndex}-${slotIndex}`"
+                  :cols="getSlotCols(slot)"
+                  :style="{
+                    'transition-delay': `${slotIndex * 50}ms`,
+                    ...(slotLayout === 'default' || slotLayout === 'full'
+                      ? { padding: '0px' }
+                      : {}),
+                  }"
+                >
+                  <div
                     v-if="slot.widget"
-                    :is="getSlotWidget(slot.widget)"
-                    :uuid="slot.widget.uuid"
-                    :class="[
-                      hasSpacing &&
-                      widgetStates[slot.widget.uuid].config
-                        ?.allowPaddingOverride
-                        ? 'tw:p-4'
-                        : '',
-                    ]"
-                    v-bind="{
-                      ...widgetStates[slot.widget.uuid].config,
-                      ...widgetStates[slot.widget.uuid].public,
-                      ...routeParams,
-                      compositionName: currentRouteConfig?.slotValue,
-                      slotType,
-                    }"
-                  />
-                </div>
-              </v-col>
-            </TransitionGroup>
-          </v-row>
-        </v-col>
-      </v-row>
+                    :ref="
+                      shouldTrackReadiness
+                        ? (el) => bindWidgetContainer(slot.widget!.uuid, el)
+                        : undefined
+                    "
+                    :class="widgetContainerClasses"
+                    class="tw:h-full"
+                  >
+                    <component
+                      :is="getSlotWidget(slot.widget)"
+                      :uuid="slot.widget.uuid"
+                      :class="[
+                        hasSpacing &&
+                        widgetStates[slot.widget.uuid].config
+                          ?.allowPaddingOverride
+                          ? 'tw:p-4'
+                          : '',
+                      ]"
+                      v-bind="{
+                        ...widgetStates[slot.widget.uuid].config,
+                        ...widgetStates[slot.widget.uuid].public,
+                        ...routeParams,
+                        compositionName: currentRouteConfig?.slotValue,
+                        slotType,
+                      }"
+                    />
+                  </div>
+                </v-col>
+              </TransitionGroup>
+            </v-row>
+          </v-col>
+        </v-row>
       </Transition>
     </div>
 
@@ -118,38 +127,67 @@ import {
   computed,
   onMounted,
   onUnmounted,
-  nextTick,
   provide,
   toRef,
   type Component,
-  type ComponentPublicInstance,
 } from "vue"
 import { widgetLoader } from "@racletteOrchestrator/helpers/widgetLoader"
+import { wrapWidgetWithLifecycle } from "@racletteOrchestrator/helpers/wrapWidgetWithLifecycle"
+import {
+  cleanRouteParams,
+  countWidgetsInLayout,
+  getWidgetsLayoutSignature,
+} from "@racletteOrchestrator/helpers/widgetLayoutHelper"
 import { WIDGET_SLOT_TYPE_KEY } from "@racletteOrchestrator/constants/widgetSlotType"
 import { useDisplay } from "vuetify"
 import useStateSubscriber from "@racletteOrchestrator/composables/useStateSubscriber"
 import useRouteState from "@racletteOrchestrator/composables/useRouteState"
-import { createWidgetLifecycleManager } from "@racletteOrchestrator/composables/useWidgetLifecycle"
-import { isDefined } from "@vueuse/core"
+import {
+  createWidgetLifecycleManager,
+  type WidgetLifecycleManager,
+} from "@racletteOrchestrator/composables/useWidgetLifecycle"
 import CompositionLoadingState from "@racletteOrchestrator/components/CompositionLoadingState.vue"
+import ErrorWidgetState from "@racletteOrchestrator/components/ErrorWidgetState.vue"
+import { createEnhancedError } from "@racletteOrchestrator/helpers/widgetUtils"
+import log from "@racletteCore/lib/logger"
 
 const props = withDefaults(
   defineProps<{
     widgetsLayout: Composition["widgetsLayout"]
     slotType: string
     slotLayout: string
+    /**
+     * Observe widget slot containers for readiness. Defaults to page slots and
+     * modal overlays (`revealWhenReady`).
+     */
+    trackReadiness?: boolean
+    /** When true, show a local loading overlay until widgets are ready (modals). */
     revealWhenReady?: boolean
     loadingSize?: number | string
     loadingStrokeWidth?: number | string
   }>(),
   {
+    trackReadiness: undefined,
     revealWhenReady: false,
     loadingSize: 32,
     loadingStrokeWidth: 3,
   },
 )
 
-provide(WIDGET_SLOT_TYPE_KEY, toRef(() => props.slotType))
+const emit = defineEmits<{
+  "all-widgets-ready": [ready: boolean]
+}>()
+
+const shouldTrackReadiness = computed(
+  () =>
+    props.trackReadiness ??
+    (props.slotType === "page" || props.revealWhenReady),
+)
+
+provide(
+  WIDGET_SLOT_TYPE_KEY,
+  toRef(() => props.slotType),
+)
 
 const { compositionSlots } = useRouteState()
 
@@ -164,7 +202,7 @@ const widgetContainerClasses = computed(() => {
     case "spaced":
       return `${baseClasses} tw:rounded-lg`
     case "card":
-      return `${baseClasses} tw:rounded-lg tw:shadow-lg hover:tw:shadow-xl tw:transition-shadow tw:duration-200`
+      return `${baseClasses} tw:rounded-lg tw:shadow-lg tw:hover:shadow-xl tw:transition-shadow tw:duration-200`
     case "border":
       return `${baseClasses} tw:rounded-lg tw:border tw:border-gray-300 tw:dark:border-gray-700`
     default:
@@ -176,49 +214,36 @@ const hasSpacing = computed(() =>
   ["spaced", "card", "border"].includes(props.slotLayout),
 )
 
-const rowClasses = computed(() => {
-  return hasSpacing.value ? "tw:gap-2" : ""
-})
+const rowClasses = computed(() => (hasSpacing.value ? "tw:gap-2" : ""))
 
 const { mdAndDown } = useDisplay()
-
 const { state: widgetStates } = useStateSubscriber("widgets")
-const routeParams = computed(() => {
-  const cleanedParams = {}
-  if (currentRouteConfig.value?.slotParams) {
-    for (const [key, value] of Object.entries(
-      currentRouteConfig.value.slotParams,
-    )) {
-      if (isDefined(value) && value !== "undefined") {
-        cleanedParams[key] = value
-      }
-    }
-  }
 
-  return cleanedParams
-})
+const routeParams = computed(() =>
+  cleanRouteParams(currentRouteConfig.value?.slotParams),
+)
 
-// Create a reactive key that changes when widgetsLayout changes
 const gridKey = ref(0)
-
-// Calculate total number of widgets (only slots that actually contain a widget)
-const totalWidgets = computed(() =>
-  props.widgetsLayout.reduce(
-    (sum, column) => sum + column.filter((slot) => slot.widget).length,
-    0,
-  ),
+const totalWidgets = computed(() => countWidgetsInLayout(props.widgetsLayout))
+const widgetsLayoutSignature = computed(() =>
+  getWidgetsLayoutSignature(props.widgetsLayout),
 )
 
-// Widget lifecycle manager
-const lifecycleManager = ref(
-  createWidgetLifecycleManager(totalWidgets.value),
-)
+const lifecycleManager = ref<WidgetLifecycleManager | null>(null)
 const allWidgetsReady = ref(false)
 let stopReadyWatch: (() => void) | null = null
 
-const attachLifecycleManager = (widgetCount: number) => {
+const syncLifecycleManager = () => {
   stopReadyWatch?.()
-  const manager = createWidgetLifecycleManager(widgetCount)
+  lifecycleManager.value?.reset()
+
+  if (!shouldTrackReadiness.value) {
+    lifecycleManager.value = null
+    allWidgetsReady.value = true
+    return
+  }
+
+  const manager = createWidgetLifecycleManager(totalWidgets.value)
   stopReadyWatch = watch(
     manager.allWidgetsReady,
     (ready) => {
@@ -229,58 +254,49 @@ const attachLifecycleManager = (widgetCount: number) => {
   lifecycleManager.value = manager
 }
 
-attachLifecycleManager(totalWidgets.value)
+syncLifecycleManager()
+
+watch(shouldTrackReadiness, syncLifecycleManager)
+
+watch(
+  allWidgetsReady,
+  (ready) => {
+    if (shouldTrackReadiness.value) {
+      emit("all-widgets-ready", ready)
+    }
+  },
+  { immediate: true },
+)
 
 const isContentReady = computed(
   () =>
-    !props.revealWhenReady ||
-    totalWidgets.value === 0 ||
-    allWidgetsReady.value,
+    !props.revealWhenReady || totalWidgets.value === 0 || allWidgetsReady.value,
 )
 
 const showLoadingOverlay = computed(
   () => props.revealWhenReady && !isContentReady.value,
 )
 
-const resolveWidgetElement = (
-  target: Element | ComponentPublicInstance | null,
-): HTMLElement | null => {
-  if (!target) {
-    return null
+/** Observe widget slot containers when readiness tracking is active. */
+const bindWidgetContainer = (uuid: string, el: Element | null) => {
+  const manager = lifecycleManager.value
+  if (!manager) {
+    return
   }
 
-  if (target instanceof HTMLElement) {
-    return target
-  }
+  const hooks = manager.createLifecycleHooks(uuid)
 
-  const root = target.$el
-  if (root instanceof HTMLElement) {
-    return root
+  if (!el) {
+    hooks.onWidgetUnmounted()
+    return
   }
 
-  if (root instanceof Text && root.parentElement instanceof HTMLElement) {
-    return root.parentElement
+  if (el instanceof HTMLElement) {
+    hooks.onWidgetContainerMounted(el)
   }
-
-  return null
-}
-
-const isWidgetLoadingPlaceholder = (
-  target: Element | ComponentPublicInstance | null,
-): boolean => {
-  if (!target || target instanceof HTMLElement) {
-    return false
-  }
-
-  const componentName =
-    target.$.type?.name ?? (target.$options?.name as string | undefined)
-
-  return (
-    componentName === "LoadingWidgetState" || componentName === "ErrorWidgetState"
-  )
 }
 
-// Widget component cache
+// TODO: Should cacheKey include shouldTrackReadiness (or other props) when we support toggling it at runtime?
 const widgetComponentCache = new Map<string, Component>()
 
 const getSlotWidget = (widget: WidgetBase) => {
@@ -289,67 +305,31 @@ const getSlotWidget = (widget: WidgetBase) => {
   if (!widgetComponentCache.has(cacheKey)) {
     try {
       const originalComponent = widgetLoader(widget)
-
-      // Wrap the component to inject lifecycle hooks
-      const wrappedComponent = {
-        name: `${originalComponent.name || "Widget"}Wrapper`,
-        setup(props, context) {
-          const { onAllWidgetsReady, onWidgetRendered, onWidgetUnmounted } =
-            lifecycleManager.value.createLifecycleHooks(widget.uuid)
-
-          const widgetRoot = ref<Element | ComponentPublicInstance | null>(null)
-
-          const reportRendered = () => {
-            nextTick(() => {
-              const instance = widgetRoot.value
-              if (isWidgetLoadingPlaceholder(instance)) {
-                return
-              }
-
-              const element = resolveWidgetElement(instance)
-              if (element) {
-                onWidgetRendered(element)
-              }
-            })
-          }
-
-          onMounted(reportRendered)
-
-          onUnmounted(() => {
-            onWidgetUnmounted()
-          })
-
-          return () =>
-            h(
-              originalComponent,
-              {
-                ...props,
-                onAllWidgetsReady,
-                ref: (instance: Element | ComponentPublicInstance | null) => {
-                  widgetRoot.value = instance
-                  if (instance) {
-                    reportRendered()
-                  }
-                },
-              },
-              context.slots,
-            )
-        },
-      }
-
-      widgetComponentCache.set(cacheKey, wrappedComponent)
+      const component = shouldTrackReadiness.value
+        ? wrapWidgetWithLifecycle(
+            widget,
+            originalComponent,
+            () => lifecycleManager.value,
+          )
+        : originalComponent
+      widgetComponentCache.set(cacheKey, component)
     } catch (error) {
-      console.error("🚨 Error creating widget component:", error)
-      // Cache error component too
+      const enhancedError = createEnhancedError(error, widget)
+      log.widgets("Error creating widget component", {
+        pluginKey: widget.pluginKey,
+        name: widget.name,
+        error: enhancedError.message,
+      })
       widgetComponentCache.set(cacheKey, {
         name: "ComponentCreationError",
         setup() {
           return () =>
-            h(
-              "div",
-              { class: "p-4 text-red-500 border border-red-300 rounded" },
-              "Error creating component",
-            )
+            h(ErrorWidgetState, {
+              uuid: widget.uuid,
+              pluginKey: widget.pluginKey,
+              widgetName: widget.name,
+              error: enhancedError,
+            })
         },
       })
     }
@@ -358,29 +338,33 @@ const getSlotWidget = (widget: WidgetBase) => {
   return widgetComponentCache.get(cacheKey)
 }
 
-const getGridCols = (rowLength) => (mdAndDown.value ? 12 : 12 / rowLength)
+const getGridCols = (rowLength: number) =>
+  mdAndDown.value ? 12 : 12 / rowLength
 
-const getSlotCols = (slot) => (mdAndDown.value ? 12 : slot.column)
+const getSlotCols = (slot: { column: number }) =>
+  mdAndDown.value ? 12 : slot.column
 
-// Watch for changes in widgetsLayout to trigger transition and reset lifecycle
-watch(
-  () => props.widgetsLayout,
-  () => {
-    // Reset lifecycle manager
-    lifecycleManager.value.reset()
-
-    // Clear component cache to force re-wrapping with new lifecycle manager
-    widgetComponentCache.clear()
+const resetLayout = () => {
+  widgetComponentCache.clear()
+  syncLifecycleManager()
+  gridKey.value++
+}
 
-    attachLifecycleManager(totalWidgets.value)
+watch(widgetsLayoutSignature, (next, prev) => {
+  if (!prev || next === prev) {
+    return
+  }
+  resetLayout()
+})
 
-    // Trigger grid transition
-    gridKey.value++
-  },
-  { deep: true },
-)
+onMounted(() => {
+  if (shouldTrackReadiness.value) {
+    emit("all-widgets-ready", allWidgetsReady.value)
+  }
+})
 
 onUnmounted(() => {
   stopReadyWatch?.()
+  lifecycleManager.value?.reset()
 })
 </script>