@raclettejs/core 0.1.40 → 0.1.42

package/services/frontend/eslint.config.js

@@ -2,6 +2,8 @@ import parentConfig from "../../eslint.config.mjs"
 import pluginVue from "eslint-plugin-vue"
 import betterTailwind from "eslint-plugin-better-tailwindcss"
 import globals from "globals"
+import vueParser from "vue-eslint-parser"
+import tseslint from "typescript-eslint"
 
 export default [
   ...parentConfig,
@@ -18,8 +20,28 @@ export default [
   // Vue config
   ...pluginVue.configs["flat/recommended"],
 
-  // Better-Tailwindcss: Tailwind v4 + `tw:` prefix is auto-detected from the
-  // CSS entryPoint. Scope to files that may contain class strings.
+  // TypeScript in <script lang="ts"> — vue-eslint-parser delegates to @typescript-eslint/parser
+  {
+    files: ["**/*.vue"],
+    plugins: {
+      "@typescript-eslint": tseslint.plugin,
+    },
+    languageOptions: {
+      parser: vueParser,
+      parserOptions: {
+        parser: tseslint.parser,
+        project: "./tsconfig.app.json",
+        extraFileExtensions: [".vue"],
+      },
+      sourceType: "module",
+      globals: {
+        ...globals.browser,
+      },
+    },
+  },
+
+  // Better-Tailwindcss: Tailwind v4 + `prefix(tw)` from tailwindStyles.css.
+  // `tw:!utility`, `tw:utility!`, `tw:hover:utility` — not `!tw:utility` or `hover:tw:utility`.
   {
     ...betterTailwind.configs.recommended,
     files: ["**/*.{vue,ts,tsx,js,jsx,cjs,mjs}"],
@@ -34,17 +56,17 @@ export default [
     rules: {
       // Tailwind v4 + `@source inline(...)` generates utilities dynamically,
       // so unknown-class reports are noisy - downgrade to a warning.
-      "better-tailwindcss/no-unknown-classes": "warn",
+      "better-tailwindcss/no-unknown-classes": [
+        "warn",
+        {
+          // Non-Tailwind classes from scoped/global CSS (e.g. ProductOrchestrator.vue)
+          ignore: ["^raclette$", "^footerLink$"],
+        },
+      ],
     },
   },
   {
     files: ["**/*.vue"],
-    languageOptions: {
-      sourceType: "module",
-      globals: {
-        ...globals.browser,
-      },
-    },
     rules: {
       // Essential Vue rules (from ESLint plugin Vue)
       "vue/multi-word-component-names": "off",

package/services/frontend/src/core/setup/socketBootstrap.ts

@@ -4,7 +4,8 @@
  * Flow:
  * 1. Server emits joinConfirmation → client dispatches projectInit (resets project-scoped store slices)
  * 2. projectInit completes → store emits store_actionResolved_{resolveId}
- * 3. onProjectInitResolved runs setupSpace, syncs route compositions, emits ui/setupProject
+ * 3. onProjectInitResolved runs setupSpace, syncs route compositions,
+ *    sets ui.bootstrapComplete, then emits ui/setupProject
  */
 import type { Composition } from "@shared/types/core/Composition.types"
 import type { InteractionLink } from "@shared/types/core/InteractionLink.types"
@@ -55,7 +56,7 @@ export const startProjectBootstrap = (
 
     store.dispatch({
       type: "ui/update",
-      payload: { loading: true },
+      payload: { loading: true, bootstrapComplete: false },
     })
 
     // Same setupSpace as logged-in users (landing page detection, etc.)
@@ -70,7 +71,7 @@ export const startProjectBootstrap = (
 
     store.dispatch({
       type: "ui/update",
-      payload: { loading: false },
+      payload: { bootstrapComplete: true },
     })
 
     eventbus.emit("ui/setupProject", roomId)

package/services/frontend/src/core/store/state.ts

@@ -3,7 +3,6 @@
  *
  * exports
  *
- * - loadingHold
  * - applicationState (initial state of the store)
  * - configPatterns
  * - storePatterns
@@ -11,11 +10,6 @@
 
 import type { ApplicationState } from "./types"
 
-/**
- * Used as a timer value
- */
-const loadingHold = 300
-
 /**
  * applicationState
  * Our actual application data
@@ -50,6 +44,7 @@ const applicationState: ApplicationState = {
     mobile: false,
     // indicates if the page is in loading state
     loading: true,
+    bootstrapComplete: false,
     theme: "light",
     locale: "en-EU",
     shortcuts: {},
@@ -143,4 +138,4 @@ const storePatterns = {
   },
 }
 
-export { loadingHold, applicationState, configPatterns, storePatterns }
+export { applicationState, configPatterns, storePatterns }

package/services/frontend/src/core/store/types/index.ts

@@ -54,6 +54,8 @@ export type UIState = {
   navigationOpen: boolean
   availableInterfaces: ("pageNavigation" | "modalTools" | "topBar")[]
   loading: boolean
+  /** True after socket bootstrap (`setupSpace`) has finished for the current project. */
+  bootstrapComplete: boolean
   mobile: boolean
   theme: "light" | "dark"
   locale: "de-DE" | "en-EU"

package/services/frontend/src/orchestrator/ProductOrchestrator.vue

@@ -8,10 +8,10 @@
   >
     <!-- Global Toolbar -->
     <v-app-bar
-      :order="-10"
       v-if="availableInterfaces.indexOf('topBar') > -1"
       id="appAppbar"
       ref="appAppbar"
+      :order="-10"
       color="topbar-bg"
       density="compact"
       flat
@@ -31,7 +31,7 @@
             }"
           >
             <img
-              class="tw:cursor-pointer tw:h-[40px] tw:ml-2"
+              class="tw:ml-2 tw:h-[40px] tw:cursor-pointer"
               src="/home-icon.png"
             />
           </RouterLink>
@@ -57,17 +57,17 @@
     <snackbarStack />
     <!-- Navigation Drawer -->
     <PageNavigation
-      :key="locale"
       v-if="availableInterfaces.indexOf('pageNavigation') > -1"
+      :key="locale"
     />
 
     <!-- Main content -->
     <v-main
-      class="tw:flex tw:flex-col tw:min-h-0 tw:overflow-y-auto tw:h-screen"
       id="appMainContent"
+      class="tw:flex tw:h-screen tw:min-h-0 tw:flex-col tw:overflow-y-auto"
       :aria-busy="loading"
     >
-      <div class="tw:w-full tw-h-1 tw:top-[49px]">
+      <div class="tw:h-1 tw:top-[49px] tw:w-full">
         <v-progress-linear
           :height="2"
           :indeterminate="loading"
@@ -78,26 +78,24 @@
         />
       </div>
 
-      <span
-        v-if="loading"
-        class="tw:sr-only"
-        role="status"
-        aria-live="polite"
-      >
+      <span v-if="loading" class="tw:sr-only" role="status" aria-live="polite">
         {{ $t("core.app_loading") }}
       </span>
 
-      <component v-if="showWelcomeScreen" :is="welcomeScreenComponent" />
+      <component :is="welcomeScreenComponent" v-if="showWelcomeScreen" />
 
       <template v-else>
         <WidgetsLayoutLoader
           v-if="widgetsLayout"
+          :key="pageLoaderKey"
+          track-readiness
           class="tw:min-h-0 tw:pb-0"
-          :class="{ '!tw:invisible': loading }"
+          :class="{ 'tw:!invisible': loading }"
           :aria-hidden="loading"
           :widgets-layout="widgetsLayout"
           slot-type="page"
           :slot-layout="slotLayout"
+          @all-widgets-ready="onPageWidgetsReady"
         />
 
         <v-empty-state
@@ -107,33 +105,33 @@
           :text="$t('core.error.page_not_foundSubtitle')"
           image="/Logo_Main_V1.png"
         >
-          <v-btn :to="{ path: '/' }">{{
-            $t("core.error.return_to_home")
-          }}</v-btn>
+          <v-btn :to="{ path: '/' }">
+            {{ $t("core.error.return_to_home") }}
+          </v-btn>
         </v-empty-state>
       </template>
 
       <v-footer
+        v-if="configService.getPleaseLetUsAdvertiseOurselves()"
+        ref="appFooter"
         :order="-1"
         color="footer-bg"
-        ref="appFooter"
         border-thin
-        v-if="configService.getPleaseLetUsAdvertiseOurselves()"
-        class="tw:items-center tw:text-center tw:flex tw:flex-col tw:border-t tw:grow-0! tw:mt-auto"
+        class="tw:mt-auto tw:flex tw:grow-0! tw:flex-col tw:items-center tw:border-t tw:text-center"
       >
         <a
           href="https://www.raclettejs.com"
           rel="noopener noreferrer"
           target="_blank"
           title="raclette"
-          class="tw:text-[0.9rem] tw:text-neutral-500 tw:no-underline hover:tw:no-underline hover:tw:text-neutral-700 tw:transition-colors"
+          class="tw:hover:no-underline tw:hover:text-neutral-700 tw:text-[0.9rem] tw:text-neutral-500 tw:no-underline tw:transition-colors"
         >
           Cooked with <span class="raclette">raclette 🧀</span></a
         >
         <span
           v-if="configService.getAdvertiseYourself().length"
+          class="footerLink tw:hover:no-underline tw:hover:text-neutral-700 tw:text-[0.9rem] tw:text-neutral-500 tw:no-underline tw:transition-colors"
           v-html="configService.getAdvertiseYourself()"
-          class="footerLink tw:text-[0.9rem] tw:text-neutral-500 tw:no-underline hover:tw:no-underline hover:tw:text-neutral-700 tw:transition-colors"
         ></span>
       </v-footer>
     </v-main>
@@ -172,6 +170,7 @@ import { useCurrentComposition } from "./composables"
 import WidgetsLayoutLoader from "./components/composition/WidgetsLayoutLoader.vue"
 import AppBarMenu from "./components/menu/AppBarMenu.vue"
 import { useWindowSize } from "@vueuse/core"
+import { useAppLoadingCoordinator } from "./composables/useAppLoadingCoordinator"
 const { height: windowHeight } = useWindowSize()
 
 useTitle(`raclette - ${configService.getApplicationTitle()}`)
@@ -183,7 +182,9 @@ const { loading, theme, locale, landingPage, availableInterfaces } =
   useUiState()
 useRouteState()
 const { isDraggingOrResizingAnything } = useDragAndDrop()
-const { widgetsLayout, slotLayout } = useCurrentComposition()
+const { widgetsLayout, slotLayout, id: compositionId } = useCurrentComposition()
+const { pageLoaderKey, onPageWidgetsReady, markPageReadyWithoutWidgets } =
+  useAppLoadingCoordinator(compositionId)
 
 const appAppbarRef = useTemplateRef("appAppbar")
 const appFooterRef = useTemplateRef("appFooter")
@@ -238,6 +239,16 @@ const welcomeScreenComponent = computed(() => {
   return showWelcomeScreen.value ? WelcomeScreenComponent : null
 })
 
+watch(
+  [showWelcomeScreen, widgetsLayout],
+  ([welcome, layout]) => {
+    if (welcome || !layout) {
+      markPageReadyWithoutWidgets()
+    }
+  },
+  { immediate: true },
+)
+
 const logoExists = ref(false)
 const logoSrc = ref("/logo.png")
 

package/services/frontend/src/orchestrator/components/LoadingWidgetState.vue

@@ -1,14 +1,14 @@
 <template>
   <div
-    class="tw:flex tw:items-center tw:justify-center tw:p-6 tw:min-h-[120px]"
+    :[WIDGET_CHUNK_LOADING_ATTR]="true"
+    class="tw:flex tw:min-h-[120px] tw:items-center tw:justify-center tw:p-6"
   >
     <div class="tw:flex tw:flex-col tw:items-center tw:gap-3">
-      <!-- Subtle pulsing dot animation -->
       <div class="tw:flex tw:gap-1">
         <div
           v-for="i in 3"
           :key="i"
-          class="tw:w-2 tw:h-2 tw:bg-gray-400 tw:rounded-full tw:animate-pulse"
+          class="tw:size-2 tw:animate-pulse tw:rounded-full tw:bg-gray-400"
           :style="{ 'animation-delay': `${(i - 1) * 0.2}s` }"
         />
       </div>
@@ -16,6 +16,10 @@
   </div>
 </template>
 
+<script setup lang="ts">
+import { WIDGET_CHUNK_LOADING_ATTR } from "@racletteOrchestrator/constants/widgetSlot"
+</script>
+
 <style scoped>
 @keyframes pulse {
   0%,