LFX'25:Update the pipeline to achieve clean build without any errors (#16637)

* Refactor code to ES6 standard and add esbuild as a bundler and transpiler

Co-authored-by: Craig Box <[email protected]>
Co-authored-by: Daniel Hawton <[email protected]>

* Resolve Conflicts

* Remove .js file and replace it with .ts file

Co-authored-by: Daniel Hawton <[email protected]>
Co-authored-by: Craig Box <[email protected]>

* Resolve Errors

---------

Co-authored-by: Craig Box <[email protected]>
Co-authored-by: Daniel Hawton <[email protected]>

Author: 3 people

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,27 @@ 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
+
+
+# Bundle + minify with sourcemap
+esbuild ./src/ts/entrypoint.ts \
+  --bundle \
+  --minify \
+  --sourcemap \
+  --target=es6 \
+  --outfile=generated/js/all.min.js
+
+esbuild ./src/ts/headerAnimation.js \
+  --minify \
+  --sourcemap \
+  --target=es6 \
+  --outfile=generated/js/headerAnimation.min.js
+
+esbuild ./src/ts/themes_init.js \
+  --bundle \
+  --minify \
+  --sourcemap \
+  --target=es6 \
+  --outfile=generated/js/themes_init.min.js
 
 svg-symbol-sprite -i src/icons -o generated/img/icons.svg --prefix ""

src/ts/callToAction.ts

@@ -11,9 +11,14 @@
 // 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.
+export {}; // Make this file a module
 
 const callToActionDelayMs = 250;
-
+declare global {
+    interface Window {
+        handleCallToAction: () => void;
+    }
+}
 function handleCallToAction(): void {
     window.setTimeout(() => {
         document.querySelectorAll<HTMLElement>(".call-to-action").forEach(el => {
@@ -22,4 +27,5 @@ function handleCallToAction(): void {
     }, callToActionDelayMs);
 }
 
+window.handleCallToAction = handleCallToAction;
 handleCallToAction();

src/ts/codeBlocks.ts

@@ -11,16 +11,25 @@
 // 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;
 
+export {};
+declare global {
+    interface Window {
+        handleCodeBlocks: () => void;
+    }
+}
+
 // All the voodoo needed to support our fancy code blocks
 function handleCodeBlocks() {
     const toolbarShow = "toolbar-show";
@@ -300,5 +309,5 @@ function handleCodeBlocks() {
         loadExternal(pre);
     });
 }
-
+window.handleCodeBlocks = handleCodeBlocks;
 handleCodeBlocks();

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/entrypoint.ts

@@ -0,0 +1,19 @@
+import "./constants.ts";
+import "./utils.ts";
+import "./feedback.ts";
+import "./kbdnav.ts";
+import "./themes.ts";
+import "./menu.ts";
+import "./header.ts";
+import "./sidebar.ts";
+import "./tabset.ts";
+import "./prism.js";
+import "./codeBlocks.ts";
+import "./links.ts";
+import "./resizeObserver.js";
+import "./scroll.ts";
+import "./overlays.ts";
+import "./lang.ts";
+import "./callToAction.ts";
+import "./events.ts";
+import "./faq.ts";

src/ts/events.ts

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

src/ts/faq.ts

@@ -11,8 +11,14 @@
 // 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";
+export { };
+declare global {
+    interface Window {
+        handleFaqBlocks: () => void;
+    }
+}
 
 function handleFaqBlocks(): void {
     const faqBlocks: Element[] = [];
@@ -41,5 +47,5 @@ function handleFaqBlocks(): void {
     // Listen to hash change to navigate to another FAQ if necessary
     listen(window, "hashchange", dealWithHash);
 }
-
+window.handleFaqBlocks = handleFaqBlocks;
 handleFaqBlocks();

src/ts/feedback.ts

@@ -11,10 +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 } from "./utils";
 declare function gtag(type: string, action: string, payload: any): void;
 
-function sendFeedback(language: string, value: number): void {
+export{};
+declare global {
+    interface Window {
+        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,
@@ -70,3 +77,4 @@ function sendFeedback(language: string, value: number): void {
     });
      */
 }
+window.sendFeedback = sendFeedback;

src/ts/header.ts

@@ -13,6 +13,15 @@
 // 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";
+export{};
+declare global {
+    interface Window {
+        handleHeader: () => void;
+    }
+}
 function handleHeader(): void {
     const searchForm = "search-form";
     const headerLinks = "header-links";
@@ -158,5 +167,5 @@ function handleHeader(): void {
         toggleActiveHeader();
     });
 }
-
+window.handleHeader=handleHeader;
 handleHeader();