fix(FOUR-33644): initialize screen cache config in Vite preview loader

resources/js/next/initializeScreenCacheFromMeta.js

@@ -0,0 +1,31 @@
+import { initializeScreenCache } from "@processmaker/screen-builder";
+import { getGlobalPMVariable, setGlobalPMVariable } from "./globalVariables";
+
+let cacheInitialized = false;
+
+function getScreenConfigFromMeta() {
+  const screenCacheEnabled = document.head.querySelector('meta[name="screen-cache-enabled"]')?.content ?? "false";
+  const screenCacheTimeout = document.head.querySelector('meta[name="screen-cache-timeout"]')?.content ?? "5000";
+  const screenSecureHandlerToggleVisible = document.head.querySelector("meta[name='screen-secure-handler-toggle-visible']");
+  const screenMergeDraftOnRestore = document.head.querySelector("meta[name='screen-merge-draft-on-restore']")?.content ?? "true";
+
+  return {
+    cacheEnabled: screenCacheEnabled === "true",
+    cacheTimeout: Number(screenCacheTimeout),
+    secureHandlerToggleVisible: !!Number(screenSecureHandlerToggleVisible?.content),
+    mergeDraftOnRestore: screenMergeDraftOnRestore === "true",
+  };
+}
+
+export default function initializeScreenCacheFromMeta(apiClient = getGlobalPMVariable("apiClient")) {
+  if (cacheInitialized) {
+    return getGlobalPMVariable("screen");
+  }
+
+  const screen = getScreenConfigFromMeta();
+  setGlobalPMVariable("screen", screen);
+  initializeScreenCache(apiClient, screen);
+  cacheInitialized = true;
+
+  return screen;
+}

resources/js/next/screenBuilder.js

@@ -1,6 +1,7 @@
 import {
-  getGlobalVariable, setGlobalVariable, getGlobalPMVariable, setGlobalPMVariable,
+  getGlobalVariable, setGlobalVariable, getGlobalPMVariable,
 } from "./globalVariables";
+import initializeScreenCacheFromMeta from "./initializeScreenCacheFromMeta";
 
 const addScriptsToDOM = async function (scripts) {
   for (const script of scripts) {
@@ -26,24 +27,8 @@ export default () => {
       import("@processmaker/screen-builder").then((ScreenBuilder) => {
         const apiClient = getGlobalPMVariable("apiClient");
 
-        const { initializeScreenCache } = ScreenBuilder;
-        // Configuration Global object used by ScreenBuilder
-        // @link https://processmaker.atlassian.net/browse/FOUR-6833 Cache configuration
-        const screenCacheEnabled = document.head.querySelector("meta[name=\"screen-cache-enabled\"]")?.content ?? "false";
-        const screenCacheTimeout = document.head.querySelector("meta[name=\"screen-cache-timeout\"]")?.content ?? "5000";
-        const screenSecureHandlerToggleVisible = document.head.querySelector("meta[name='screen-secure-handler-toggle-visible']");
-        const screenMergeDraftOnRestore = document.head.querySelector("meta[name='screen-merge-draft-on-restore']")?.content ?? "true";
-        const screen = {
-          cacheEnabled: screenCacheEnabled === "true",
-          cacheTimeout: Number(screenCacheTimeout),
-          secureHandlerToggleVisible: !!Number(screenSecureHandlerToggleVisible?.content),
-          mergeDraftOnRestore: screenMergeDraftOnRestore === "true",
-        };
-
         setGlobalVariable("ScreenBuilder", ScreenBuilder);
-        setGlobalPMVariable("screen", screen);
-        // Initialize screen-builder cache
-        initializeScreenCache(apiClient, screen);// TODO: Its a bad practice to use the apiClient here
+        initializeScreenCacheFromMeta(apiClient);
         if (screenBuilderScripts) {
           addScriptsToDOM(screenBuilderScripts).then(() => {
             // The order of the scripts is important, the screenBuilderScripts must be loaded before the ScreenBuilder.default

resources/js/processes/screen-builder/loaderScreen.js

@@ -1,4 +1,5 @@
 import * as ScreenBuilder from "@processmaker/screen-builder";
+import initializeScreenCacheFromMeta from "../../next/initializeScreenCacheFromMeta";
 import { setupMain } from "../../next/setupMain";
 import monaco from "../../next/monaco";
 import vueFormElements from "../../next/libraries/vueFormElements";
@@ -10,6 +11,7 @@ import("@processmaker/screen-builder/dist/vue-form-builder.css");
 window.ScreenBuilder = ScreenBuilder;
 
 setupMain();
+initializeScreenCacheFromMeta();
 monaco();
 window.Vue.use(ScreenBuilder.default);
 

resources/js/processes/screens/loaderScreenPreview.js

@@ -1,8 +1,11 @@
 import * as ScreenBuilder from "@processmaker/screen-builder";
 import VueFormElements from "@processmaker/vue-form-elements";
+import initializeScreenCacheFromMeta from "../../next/initializeScreenCacheFromMeta";
 import { setupMain } from "../../next/setupMain";
 
 setupMain();
+initializeScreenCacheFromMeta();
+
 window.ScreenBuilder = ScreenBuilder;
 window.VueFormElements = VueFormElements;
 window.Vue.use(ScreenBuilder.default);

resources/js/requests/loaderRequestsPreview.js

@@ -2,12 +2,14 @@ import Mustache from "mustache";
 import "../next/libraries/vueFormElements";
 import screenBuilder from "../next/screenBuilder";
 import * as ScreenBuilder from "@processmaker/screen-builder";
+import initializeScreenCacheFromMeta from "../next/initializeScreenCacheFromMeta";
 import { setupMain } from "../next/setupMain";
 import "./preview";
 import ScreenDetail from "./components/screenDetail.vue";
 
 window.Mustache = Mustache;
 setupMain();
+initializeScreenCacheFromMeta();
 screenBuilder();
 
 Vue.use(ScreenBuilder.default);

resources/js/requests/loaderRequestsShow.js

@@ -1,3 +1,4 @@
+import initializeScreenCacheFromMeta from "../next/initializeScreenCacheFromMeta";
 import { setupMain } from "../next/setupMain";
 import monaco from "../next/monaco";
 import modeler from "../next/modeler";
@@ -9,6 +10,7 @@ import("@processmaker/screen-builder/dist/vue-form-builder.css");
 import("@processmaker/vue-form-elements/dist/vue-form-elements.css");
 
 setupMain();
+initializeScreenCacheFromMeta();
 monaco();
 modeler();
 

resources/js/tasks/loaderTasks.js

@@ -1,10 +1,12 @@
 import * as ScreenBuilder from "@processmaker/screen-builder";
 import VueFormElement from "../next/libraries/vueFormElements";
+import initializeScreenCacheFromMeta from "../next/initializeScreenCacheFromMeta";
 import { setupMain } from "../next/setupMain";
 import screenBuilderNext from "../next/screenBuilder";
 import "@processmaker/screen-builder/dist/vue-form-builder.css";
 
 setupMain();
+initializeScreenCacheFromMeta();
 screenBuilderNext();
 window.ScreenBuilder = ScreenBuilder;
 window.Vue.use(ScreenBuilder.default);

resources/js/vite/tasks/loaderTasks.js

@@ -1,4 +1,5 @@
 import "../../../js/vite/bootstrap-globals.js";
+import initializeScreenCacheFromMeta from "../../../js/next/initializeScreenCacheFromMeta";
 import { setupMain } from "../../../js/next/setupMain";
 import { withMomentDateFormats } from "../../next/config/user";
 import vueFormElements from "../../../js/next/libraries/vueFormElements";
@@ -12,6 +13,7 @@ import "@processmaker/screen-builder/dist/vue-form-builder.css";
 window.ScreenBuilder = ScreenBuilder;
 
 setupMain();
+initializeScreenCacheFromMeta();
 screenBuilderNext();
 window.Vue.use(ScreenBuilder.default);
 modeler();

resources/views/layouts/previewscreennextvite.blade.php

@@ -130,7 +130,6 @@
 @endforeach
 <!--javascript!-->
 
-PORE
 @yield('js')
 </body>