LFX'25:Update the pipeline to achieve clean build without any errors

Makefile.core.mk

@@ -142,14 +142,7 @@ netlify_install:
 	    [email protected] \
 	    [email protected] \
 	    [email protected] \
-		@babel/[email protected] \
-		@babel/[email protected] \
-		@babel/[email protected] \
-		@babel/[email protected]
-	@npm install --omit=dev --save-dev \
-		[email protected]
-	@npm install --save \
-		[email protected]
+	    [email protected]
 
 netlify: netlify_install
 	@scripts/gen_site.sh

scripts/gen_site.sh

@@ -18,36 +18,51 @@ set -ex
 
 mkdir -p generated/js generated/img tmp/js
 
+
 tsc
 
-babel --source-maps --minified --no-comments --presets minify \
-  tmp/js/constants.js \
-  tmp/js/utils.js \
-  tmp/js/feedback.js \
-  tmp/js/kbdnav.js \
-  tmp/js/themes.js \
-  tmp/js/menu.js \
-  tmp/js/header.js \
-  tmp/js/sidebar.js \
-  tmp/js/tabset.js \
-  tmp/js/prism.js \
-  tmp/js/codeBlocks.js \
-  tmp/js/links.js \
-  tmp/js/resizeObserver.js \
-  tmp/js/scroll.js \
-  tmp/js/overlays.js \
-  tmp/js/lang.js \
-  tmp/js/callToAction.js \
-  tmp/js/events.js \
-  tmp/js/faq.js \
-  --out-file generated/js/all.min.js
-
-babel --source-maps --minified --no-comments --presets minify \
-  tmp/js/headerAnimation.js \
-  --out-file generated/js/headerAnimation.min.js
-
-babel --source-maps --minified --no-comments \
-  tmp/js/themes_init.js \
-  --out-file generated/js/themes_init.min.js
+#Entrypoint for esbuild to bundle and minify through an entrypoint.js file
+cat <<EOF > tmp/js/entrypoint.js
+import "./constants.js";
+import "./utils.js";
+import "./feedback.js";
+import "./kbdnav.js";
+import "./themes.js";
+import "./menu.js";
+import "./header.js";
+import "./sidebar.js";
+import "./tabset.js";
+import "./prism.js";
+import "./codeBlocks.js";
+import "./links.js";
+import "./resizeObserver.js";
+import "./scroll.js";
+import "./overlays.js";
+import "./lang.js";
+import "./callToAction.js";
+import "./events.js";
+import "./faq.js";
+EOF
+
+# Bundle + minify with sourcemap
+esbuild tmp/js/entrypoint.js \
+  --bundle \
+  --minify \
+  --sourcemap \
+  --target=es6 \
+  --outfile=generated/js/all.min.js
+
+esbuild tmp/js/headerAnimation.js \
+  --minify \
+  --sourcemap \
+  --target=es6 \
+  --outfile=generated/js/headerAnimation.min.js
+
+esbuild tmp/js/themes_init.js \
+  --bundle \
+  --minify \
+  --sourcemap \
+  --target=es6 \
+  --outfile=generated/js/themes_init.min.js
 
 svgstore -o generated/img/icons.svg src/icons/**/*.svg

src/ts/callToAction.ts

@@ -11,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-
 const callToActionDelayMs = 250;
 
 function handleCallToAction(): void {

src/ts/codeBlocks.ts

@@ -11,14 +11,16 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-
+import { listen , copyToClipboard , getById} from "./utils";
+import { button , ariaLabel , mouseenter , mouseleave , click , active} from "./constants";
+import { readLocalStorage } from "./themes_init";
 declare const buttonCopy: string;
 declare const buttonDownload: string;
 declare const buttonPrint: string;
 declare const docTitle: string;
 declare const branchName: string;
 declare const Prism: any;
-
+declare var iconFile: string;
 let syntaxColoring = true;
 
 // All the voodoo needed to support our fancy code blocks

src/ts/constants.ts

@@ -12,15 +12,15 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-const click = "click";
-const mouseenter = "mouseenter";
-const mouseleave = "mouseleave";
-const active = "active";
-const keyup = "keyup";
-const keydown = "keydown";
-const button = "button";
-const ariaLabel = "aria-label";
-const ariaExpanded = "aria-expanded";
-const ariaSelected = "aria-selected";
-const ariaControls = "aria-controls";
-const tabIndex = "tabindex";
+export const click = "click";
+export const mouseenter = "mouseenter";
+export const mouseleave = "mouseleave";
+export const active = "active";
+export const keyup = "keyup";
+export const keydown = "keydown";
+export const button = "button";
+export const ariaLabel = "aria-label";
+export const ariaExpanded = "aria-expanded";
+export const ariaSelected = "aria-selected";
+export const ariaControls = "aria-controls";
+export const tabIndex = "tabindex";

src/ts/events.ts

@@ -13,6 +13,9 @@
 // limitations under the License.
 
 // Handles banners and stickers
+import { listen , getByClass } from "./utils"
+import { readLocalStorage } from "./themes_init";
+import { click } from "./constants";
 function handleEvents(): void {
     const now = new Date().valueOf();
     let remainingEventImpressions: any = {};

src/ts/faq.ts

@@ -11,7 +11,7 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-
+import { listen } from "./utils"
 const faqBlockCollapsed = "faq-block--collapsed";
 
 function handleFaqBlocks(): void {

src/ts/feedback.ts

@@ -11,10 +11,10 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-
+import { getById } from "./utils";
 declare function gtag(type: string, action: string, payload: any): void;
 
-function sendFeedback(language: string, value: number): void {
+export function sendFeedback(language: string, value: number): void {
     gtag("event", "click-" + language, {
         event_category: "Helpful",
         event_label: window.location.pathname,

src/ts/header.ts

@@ -13,6 +13,9 @@
 // limitations under the License.
 
 // Attach the event handlers to support the search box and hamburger
+import { getById ,getByTag , listen ,getByClass } from "./utils";
+import { click, keyup } from "./constants";
+import { closeActiveOverlay } from "./overlays";
 function handleHeader(): void {
     const searchForm = "search-form";
     const headerLinks = "header-links";

src/ts/lang.ts

@@ -13,6 +13,8 @@
 // limitations under the License.
 
 // The set of languages supported by the site, add new ones at the end
+import { createCookie , navigateToUrlOrRoot , listen ,getById } from "./utils";
+import { click } from "./constants";
 const languages = ["en", "zh", "uk"];
 
 function handleLanguageSwitch(): void {

src/ts/links.ts

@@ -11,7 +11,7 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-
+import { getById } from "./utils";
 declare var iconFile: string;
 
 function handleLinks(): void {

src/ts/menu.ts

@@ -13,6 +13,9 @@
 // limitations under the License.
 
 // Attach the event handlers to support menus
+import { listen , toggleAttribute , keyCodes , isPrintableCharacter } from "./utils"
+import { click, ariaExpanded, keydown } from "./constants";
+import { toggleOverlay , showOverlay , closeActiveOverlay } from "./overlays";
 function handleMenu(): void {
     document.querySelectorAll<HTMLElement>(".menu").forEach(menu => {
         const trigger = menu.querySelector<HTMLElement>(".menu-trigger");

src/ts/overlays.ts

@@ -11,18 +11,21 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-
+import { listen } from "./utils";
+import { click } from "./constants";
 declare class Popper {
     constructor(a: HTMLElement, b: HTMLElement, c: any);
     public destroy(): void;
 }
+declare var iconFile: string;
+// Path to the SVG icon sprite file
 
 // tracks any overlay displayed on the page (e.g. menu or popover)
 let overlay: HTMLElement | null = null;
 let popper: Popper | null = null;
 
 // show/hide the specific overlay
-function toggleOverlay(element: HTMLElement): void {
+export function toggleOverlay(element: HTMLElement): void {
     if (overlay === element) {
         closeActiveOverlay();
     } else {
@@ -35,7 +38,7 @@ function toggleOverlay(element: HTMLElement): void {
 }
 
 // explicitly show the specific overlay
-function showOverlay(element: HTMLElement): void {
+export function showOverlay(element: HTMLElement): void {
     if (overlay === element) {
         return;
     }
@@ -45,7 +48,7 @@ function showOverlay(element: HTMLElement): void {
 }
 
 // explicitly close the active overlay
-function closeActiveOverlay(): void {
+export function closeActiveOverlay(): void {
     if (overlay) {
         overlay.classList.remove("show");
         overlay = null;
@@ -57,7 +60,7 @@ function closeActiveOverlay(): void {
     }
 }
 
-function handleOverlays(): void {
+export function handleOverlays(): void {
     // Attach a popper to the given anchor
     function attachPopper(anchor: HTMLElement, element: HTMLElement): void {
         if (popper) {

src/ts/scroll.ts

@@ -13,9 +13,11 @@
 // limitations under the License.
 
 // initialized after the DOM has been loaded
+import { getById , listen } from "./utils";
+import { click } from "./constants";
 let scrollToTopButton: HTMLElement | null;
 let tocLinks: HTMLCollectionOf<HTMLAnchorElement>;
-let tocHeadings: HTMLElement[] = [];
+const tocHeadings: HTMLElement[] = [];
 let pageHeader: HTMLElement | null;
 
 function handleScroll(): void {

src/ts/sidebar.ts

@@ -11,12 +11,17 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-
+import { getById , toggleAttribute , isPrintableCharacter ,keyCodes, getByClass ,listen } from "./utils";
+import { button , click , ariaExpanded , keydown , active} from "./constants";
 declare type Callback = (element: HTMLElement) => void;
 
 /* tslint:disable */
-interface Window {
+export {}; // Make this a module
+
+declare global {
+  interface Window {
     observeResize(el: HTMLElement, callback: Callback): void;
+  }
 }
 /* tslint:enable */
 

src/ts/tabset.ts

@@ -11,7 +11,9 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-
+import { getById , listen , keyCodes , isPrintableCharacter} from "./utils";
+import { ariaControls, ariaSelected, button, keydown, tabIndex } from "./constants";
+import { readLocalStorage } from "./themes_init";
 function selectTabsets(categoryName: string, categoryValue: string): void {
     document.querySelectorAll(".tabset").forEach(tabset => {
         tabset.querySelectorAll(".tab-strip").forEach(o => {

src/ts/themes.ts

@@ -11,7 +11,9 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-
+import { listen , getById} from "./utils";
+import { click } from "./constants";
+import { applyStyleSheet , lightThemeItem , currentTheme , lightTheme , themeStorageItem , darkThemeItem , darkTheme}  from "./themes_init";
 function handleThemes(): void {
     // reapply this in case the first call didn't 'stick' due to timing
     applyStyleSheet(currentTheme);

src/ts/themes_init.ts

@@ -12,14 +12,18 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-const darkThemeClass = "dark-theme";
-const darkTheme = "Dark Theme";
-const darkThemeItem = "dark-theme-item";
-const lightTheme = "Light Theme";
-const lightThemeItem = "light-theme-item";
-const themeStorageItem = "style";
-
-function applyStyleSheet(theme: string | null): void {
+export const darkThemeClass = "dark-theme";
+export const darkTheme = "Dark Theme";
+export const darkThemeItem = "dark-theme-item";
+export const lightTheme = "Light Theme";
+export const lightThemeItem = "light-theme-item";
+export const themeStorageItem = "style";
+
+// Export should be defined at the top of the module
+
+export let currentTheme = readLocalStorage(themeStorageItem);
+
+export function applyStyleSheet(theme: string | null): void {
     // convert legacy cookie values
     if (theme === "dark") {
         theme = darkTheme;
@@ -38,23 +42,23 @@ function applyStyleSheet(theme: string | null): void {
     let item = document.getElementById(lightThemeItem);
     if (item) {
         if (theme === darkTheme) {
-            item.classList.remove(active);
+            item.classList.remove("active");
         } else {
-            item.classList.add(active);
+            item.classList.add("active");
         }
     }
 
     item = document.getElementById(darkThemeItem);
     if (item) {
         if (theme === darkTheme) {
-            item.classList.add(active);
+            item.classList.add("active");
         } else {
-            item.classList.remove(active);
+            item.classList.remove("active");
         }
     }
 }
 
-function readLocalStorage(name: string): string | null {
+export function readLocalStorage(name: string): string | null {
     let value = localStorage.getItem(name);
     if (value) {
         return value;
@@ -93,7 +97,6 @@ function readSystemDefault(): string | null {
     return null;
 }
 
-let currentTheme = readLocalStorage(themeStorageItem);
 if (currentTheme === null) {
     currentTheme = readSystemDefault();
 }