[JENKINS-74011] Extract JavaScript block in `PageStatePreloadDecorato…

…r/header.jelly`

blueocean-web/src/main/resources/io/jenkins/blueocean/PageStatePreloadDecorator/header.jelly

@@ -1,42 +1,13 @@
 <?jelly escape-by-default='false'?>
 <j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler">
-  <script>//&lt;![CDATA[
-    // construct the state object parent path inside window.$blueocean.
-    var stateRoot = window.$blueocean = (window.$blueocean || {});
-    (function () {
-      function setState(statePropertyPath, state) {
-        var pathTokens = statePropertyPath.split('.');
-        var contextObj = stateRoot;
-
-        // Basically an Array shift
-        function nextToken() {
-          var nextToken = pathTokens[0];
-          pathTokens = pathTokens.slice(1);
-          return nextToken;
-        }
-
-        var pathToken = nextToken();
-
-        // Construct up to, but not including, the last point in the graph.
-        while (pathTokens.length !== 0) {
-          if (!contextObj[pathToken]) {
-            contextObj[pathToken] = {};
-          }
-          contextObj = contextObj[pathToken];
-          pathToken = nextToken();
-        }
-        // And set the state on the last object on the graph.
-        contextObj[pathToken] = state;
-      }
-
-      <j:forEach var="preloader" items="${it.pageStatePreloaders}">
-        // State Preloader: ${preloader.class.name}
-        <j:set var="stateJson" value="${preloader.stateJson}"/>
-        <j:if test="${stateJson != null}">
-        setState('${preloader.statePropertyPath}', ${stateJson});
-        </j:if>
-      </j:forEach>
-    })();
-    //]]&gt;
+  <script id="blueocean-page-state-preload-decorator-data" type="application/json">
+    {<j:forEach var="preloader" items="${it.pageStatePreloaders}" varStatus="st">
+      <!-- State Preloader: ${preloader.class.name} -->
+      <j:set var="stateJson" value="${preloader.stateJson}"/>
+      <j:if test="${stateJson != null}">
+        "${preloader.statePropertyPath}": ${stateJson}<j:if test="${!st.last}">,</j:if>
+      </j:if>
+    </j:forEach>}
   </script>
+  <st:adjunct includes="io.jenkins.blueocean.PageStatePreloadDecorator.preloader"/>
 </j:jelly>

blueocean-web/src/main/resources/io/jenkins/blueocean/PageStatePreloadDecorator/preloader.js

@@ -0,0 +1,32 @@
+// construct the state object parent path inside window.$blueocean.
+var stateRoot = (window.$blueocean = window.$blueocean || {});
+(function () {
+  function setState(statePropertyPath, state) {
+    var pathTokens = statePropertyPath.split('.');
+    var contextObj = stateRoot;
+
+    // Basically an Array shift
+    function nextToken() {
+      var nextToken = pathTokens[0];
+      pathTokens = pathTokens.slice(1);
+      return nextToken;
+    }
+
+    var pathToken = nextToken();
+
+    // Construct up to, but not including, the last point in the graph.
+    while (pathTokens.length !== 0) {
+      if (!contextObj[pathToken]) {
+        contextObj[pathToken] = {};
+      }
+      contextObj = contextObj[pathToken];
+      pathToken = nextToken();
+    }
+    // And set the state on the last object on the graph.
+    contextObj[pathToken] = state;
+  }
+  const data = JSON.parse(document.getElementById('blueocean-page-state-preload-decorator-data').textContent);
+  for (const [key, value] of Object.entries(data)) {
+    setState(key, value);
+  }
+})();