From f91e359237da34263ca8d7db4f6115fe9a62d9fd Mon Sep 17 00:00:00 2001
From: Matthew Dean <matthew-dean@users.noreply.github.com>
Date: Wed, 2 Sep 2026 13:28:16 -0700
Subject: [PATCH] feat: opt-in Less v5 alpha (experimental) in the version
 switcher

Surfaces the npm alpha dist-tag as a labeled experimental entry. A prerelease
loads the dedicated dev browser bundle (dist/less-browser-dev.js) instead of
the Node-only default entry; it defines window.less with the same render API,
so the compile path is unchanged. Stable latest stays the default.
---
 src/components/Header.vue | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/Header.vue b/src/components/Header.vue
index 60407b3..6ac820e 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -34,6 +34,14 @@ async function fetchVersions() {
     majorMinorSet.add(majorMinor);
     return true
   });
+  // Opt-in: surface the latest v5 alpha (npm `alpha` dist-tag). It loads the
+  // dev browser bundle (dist/less-browser-dev.js, window.less) — see fetchLess.
+  // Alphas published before that file existed will 404 and show the load tip.
+  // Kept out of the default so stable (`latest`) stays the landing version.
+  const alpha = data.tags?.alpha;
+  if (alpha && !publishedVersions.includes(alpha)) {
+    publishedVersions.unshift(alpha);
+  }
   // Default to the npm `latest` dist-tag (stable, currently 4.x), never a prerelease.
   const latest = data.tags?.latest;
   const defaultVersion = (latest && publishedVersions.includes(latest))
@@ -49,7 +57,12 @@ async function fetchVersions() {
 
 function fetchLess() {
   emit("upLoadingLessJS");
-  const url = baseVersionUrl + activeVersion;
+  // v5 alpha (any prerelease) ships only a Node/CJS default entry; a browser
+  // <script> must load the dedicated dev bundle instead. Stable 4.x loads its
+  // normal UMD entry. Both define window.less with the same render API.
+  const url = activeVersion.includes("-")
+    ? `${baseVersionUrl}${activeVersion}/dist/less-browser-dev.js`
+    : baseVersionUrl + activeVersion;
   let firstLoad = false;
   const scriptDom = document.getElementById("lessScript");
   if (scriptDom) {
@@ -138,11 +151,11 @@ init();
         -->
         <div class="version-select-click" @click.stop @click="toggle">
           <span class="active-version">
-            {{ activeVersion }}
+            {{ activeVersion }}{{ activeVersion.includes("-") ? " (experimental)" : "" }}
           </span>
           <ul v-if="expanded" class="versions">
             <li v-for="(item, index) in publishedVersions" :key="index">
-              <a @click="setLessVersion(item)">{{ item }}</a>
+              <a @click="setLessVersion(item)">{{ item }}{{ item.includes("-") ? " (experimental)" : "" }}</a>
             </li>
           </ul>
         </div>