From 88d147f12a4140a6f7f212071df1af4b555f1f3c Mon Sep 17 00:00:00 2001
From: Hannes Wellmann <wellmann.hannes1@gmx.net>
Date: Sun, 4 Jan 2026 20:48:01 +0100
Subject: [PATCH] Add early variable resolution in build websites to reduce
 flickering

Especially for Stable and Release builds most interpolated data, that
are prominently shown at the top of the main page, can be derived from
the drop-folder's name, which is contained in the page's URL/location.
Using the identifier implied by the drop-folder allows to render the
page with these most prominently visible variables already resolved
initially and not only on the second pass, when the buildproperties.json
is fetched. Thus this reduces flickering.
---
 sites/eclipse/build/index.html | 26 ++++++-----
 sites/eclipse/page.js          | 80 +++++++++++++++++++++++++++++++---
 2 files changed, 89 insertions(+), 17 deletions(-)

diff --git a/sites/eclipse/build/index.html b/sites/eclipse/build/index.html
index c7da2c595e7..bc95e7ad175 100644
--- a/sites/eclipse/build/index.html
+++ b/sites/eclipse/build/index.html
@@ -110,18 +110,20 @@ <h3 id="swt">SWT Binary and Source
 	<script>
 		loadPageData('buildproperties.json', data => {
 			data.buildTypeName = getBuildTypeName(data)
-			data.updatesP2RepositoryComposite = `https://download.eclipse.org/eclipse/updates/${data.releaseShort}`
-			const buildID = data.identifier
-			const buildType = buildID.charAt(0)
-			if (buildType == 'I' || buildType == 'Y') {
-				data.updatesP2RepositoryComposite += `-${buildType}-builds`
-			}
-			if (buildType == 'S') {
-				data.updatesP2RepositoryComposite += '-I-builds'
-				const timestamp = buildID.substring(buildID.lastIndexOf('-') + 1, buildID.length)
-				data.updatesP2Repository = `${data.updatesP2RepositoryComposite}/I${timestamp.substring(0, 8)}-${timestamp.substring(8, 12)}`
-			} else {
-				data.updatesP2Repository = `${data.updatesP2RepositoryComposite}/${buildID}`
+			if (data.releaseShort) {
+				data.updatesP2RepositoryComposite = `https://download.eclipse.org/eclipse/updates/${data.releaseShort}`
+				const buildID = data.identifier
+				const buildType = buildID.charAt(0)
+				if (buildType == 'I' || buildType == 'Y') {
+					data.updatesP2RepositoryComposite += `-${buildType}-builds`
+				}
+				if (buildType == 'S') {
+					data.updatesP2RepositoryComposite += '-I-builds'
+					const timestamp = buildID.substring(buildID.lastIndexOf('-') + 1, buildID.length)
+					data.updatesP2Repository = `${data.updatesP2RepositoryComposite}/I${timestamp.substring(0, 8)}-${timestamp.substring(8, 12)}`
+				} else {
+					data.updatesP2Repository = `${data.updatesP2RepositoryComposite}/${buildID}`
+				}
 			}
 			return data
 		})
diff --git a/sites/eclipse/page.js b/sites/eclipse/page.js
index bac22c7c887..685eca6ca80 100644
--- a/sites/eclipse/page.js
+++ b/sites/eclipse/page.js
@@ -104,6 +104,46 @@ function getCPUArchLabel(name) {
     }
 }
 
+function getPreliminaryPageData() {
+    const identifier = getIdentifierFromSiteLocation()
+    if (identifier) {
+        let data = { identifier: identifier }
+        if (identifier.startsWith('I') || identifier.startsWith('Y')) {
+            data.label = identifier
+        } else if (identifier.startsWith('S-') || identifier.startsWith('R-')) {
+            data.label = identifier.substring(2, identifier.indexOf('-', 2))
+            const versionEndIndex = Math.max(data.label.indexOf('M'), data.label.indexOf('RC'))
+            const version = versionEndIndex < 0 ? data.label : data.label.substring(0, versionEndIndex)
+            data.release = version.split('.').length === 2 ? (version + '.0') : version
+            data.releaseShort = data.release.substring(0, data.release.lastIndexOf('.'))
+        } else {
+            throw new Error(`Unexpected identifier: ${identifier}`)
+        }
+        if (!identifier.startsWith('Y')) { // Y-build's adapt their 'kind' to the targeted java version, which is therefore not constant
+            data.kind = 'Integration'
+        }
+        if (_dataGenerator) {
+            data = _dataGenerator(data)
+        }
+        Object.keys(data).forEach(k => data[k] == undefined && delete data[k]);
+        return data
+    }
+    return null
+}
+
+function getIdentifierFromSiteLocation() {
+    if (window.location.hostname === 'download.eclipse.org') {
+        const pathname = window.location.pathname
+        for (const prefix of ['/eclipse/downloads/drops4/', '/equinox/drops/']) {
+            if (pathname.startsWith(prefix)) {
+                const idEndingSlash = pathname.indexOf('/', prefix.length)
+                return pathname.substring(prefix.length, idEndingSlash > -1 ? idEndingSlash : pathname.length)
+            }
+        }
+    }
+    return null
+}
+
 const BUILD_DATE_FORMAT = new Intl.DateTimeFormat('en-GB', {
     timeZone: 'UTC',
     year: 'numeric',
@@ -173,8 +213,10 @@ function fetchAllJSON(urls) {
 }
 
 let _pageData = null
+let _dataGenerator = null
 
 function loadPageData(dataPath, dataGenerator = null) {
+    _dataGenerator = dataGenerator
     _pageData = fetch(dataPath).then(res => res.json())
     if (dataGenerator) {
         _pageData = _pageData.then(dataGenerator)
@@ -200,12 +242,20 @@ function generate() {
         }
 
         const generatedBody = generateBody();
+        // To reduce flickering, early resolve variables that can be derived from the build-drop's folder name
+        const preliminaryData = _pageData ? getPreliminaryPageData() : null
+        if (preliminaryData) {
+            resolveDataReferences(generatedBody, preliminaryData, true)
+        }
         document.body.replaceChildren(generatedBody);
 
         generateTOCItems(document.body) // assume no headers (for the TOC) are generated dynamically
 
         if (_pageData) {
             _pageData.then(data => {
+                if (preliminaryData) {
+                    verifyDataConsistency(preliminaryData, data)
+                }
                 const mainElement = document.body.querySelector('main')
                 const contentMain = mainElement.querySelector('main') // This is the main element of the calling html file
                 resolveDataReferences(document, data)
@@ -234,20 +284,28 @@ function generateTOCItems(mainElement) {
 
 const dataReferencePattern = /\${(?<path>[\w\-\.]+)}/g
 
-function resolveDataReferences(contextElement, contextData) {
+function resolveDataReferences(contextElement, contextData, lenient = false) {
     const dataElements = Array.from(contextElement.getElementsByClassName('data-ref'))
     for (const element of dataElements) {
-        element.classList.remove('data-ref') // Prevent multiple processing in subsequent passes with different context (therefore a copy is created from the list)
-        element.outerHTML = element.outerHTML.replaceAll(dataReferencePattern, (_match, pathGroup, _offset, _string) => {
-            return getValue(contextData, pathGroup)
+        const resolved = element.outerHTML.replaceAll(dataReferencePattern, (match, pathGroup, _offset, _string) => {
+            return getValue(contextData, pathGroup, lenient ? match : undefined)
         })
+        element.outerHTML = resolved
+        dataReferencePattern.lastIndex = 0 // reset lastIndex as RegExp.prototype.test() is stateful. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test
+        if (!lenient || !dataReferencePattern.test(resolved)) {
+            // Prevent multiple processing in subsequent passes with different context (if no variables are contained anymore)
+            element.classList.remove('data-ref')
+        }
     }
 }
 
-function getValue(data, path) {
+function getValue(data, path, lenienceDefaultValue = undefined) {
     let value = data
     for (const key of path.split('.')) {
         if (!value.hasOwnProperty(key)) {
+            if (lenienceDefaultValue) {
+                return lenienceDefaultValue // just skip absent variables
+            }
             throw new Error(`Key '${key}' not found in ${JSON.stringify(value)}`)
         }
         value = value[key]
@@ -255,6 +313,18 @@ function getValue(data, path) {
     return value;
 }
 
+function verifyDataConsistency(preliminaryData, data) {
+    for (const key in preliminaryData) {
+        if (data[key] !== preliminaryData[key]) {
+            const msg = `Prelininary value of key '${key}' differes from loaded data.
+	                             preliminary - ${preliminaryData[key]},
+	                             loaded data - ${data[key]}`
+            logException(msg, msg)
+            throw new Error(msg)
+        }
+    }
+}
+
 function logException(message, loggedObject) {
     document.body.prepend(toElement(`<p>Failed to generate content: <b style="color: FireBrick">${message}</b></p>`));
     console.log(loggedObject);