feat(templates): implement proper js module system for Boilerplate #11542 (#11543)

Author: ysmoradi

src/Templates/Boilerplate/Bit.Boilerplate/.gitignore

@@ -226,6 +226,7 @@ custom.aprof
 
 /src/**/App_Data/*
 
+/src/Client/Boilerplate.Client.Core/Scripts/*.js
 /src/Client/Boilerplate.Client.Core/wwwroot/scripts/app*.js
 /src/Client/Boilerplate.Client.Maui/Platforms/Android/google-services.json
 

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Boilerplate.Client.Core.csproj

@@ -67,7 +67,8 @@
 
     <Target Name="BuildJavaScript" Inputs="@(TypeScriptFiles);tsconfig.json;package.json" Outputs="wwwroot\scripts\app.js">
         <Exec Command="node_modules/.bin/tsc" StandardOutputImportance="high" StandardErrorImportance="high" />
-        <Exec Condition=" '$(Environment)' == 'Production' " Command="node_modules/.bin/esbuild wwwroot/scripts/app.js --minify --outfile=wwwroot/scripts/app.js --allow-overwrite" StandardOutputImportance="high" StandardErrorImportance="high" />
+        <Exec Condition=" '$(Environment)' == 'Development' " Command="node_modules/.bin/esbuild Scripts/index.js --bundle --outfile=wwwroot/scripts/app.js" StandardOutputImportance="high" StandardErrorImportance="high" />
+        <Exec Condition=" '$(Environment)' != 'Development' " Command="node_modules/.bin/esbuild Scripts/index.js --bundle --outfile=wwwroot/scripts/app.js --minify" StandardOutputImportance="high" StandardErrorImportance="high" />
     </Target>
 
     <Target Name="BuildCssFiles">

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Scripts/Ads.ts

@@ -1,6 +1,7 @@
+//+:cnd:noEmit
 const gtag = (window as any).googletag = (window as any).googletag || { cmd: [] };
 
-class Ads {
+export class Ads {
     private static rewardedSlot: any;
     private static rewardPayload: any;
     private static slotReadyEvent: any;
@@ -101,6 +102,4 @@ class Ads {
             })
         }
     }
-}
-
-(window as any).Ads = Ads;
+}

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Scripts/App.ts

@@ -1,12 +1,6 @@
 //+:cnd:noEmit
 
-interface DotNetObject {
-    invokeMethod<T>(methodIdentifier: string, ...args: any[]): T;
-    invokeMethodAsync<T>(methodIdentifier: string, ...args: any[]): Promise<T>;
-    dispose(): void;
-}
-
-class App {
+export class App {
     // For additional details, see the JsBridge.cs file.
     private static jsBridgeObj: DotNetObject;
 
@@ -95,4 +89,3 @@ class App {
     }
 }
 
-(window as any).App = App;

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Scripts/WebInteropApp.ts

@@ -1,13 +1,7 @@
+//+:cnd:noEmit
 // Read Client.web/wwwroot/web-interop-app.html comments.
 
-declare class BitButil {
-    static webAuthn: {
-        getCredential: (options: unknown) => Promise<unknown>,
-        createCredential: (options: unknown) => Promise<unknown>
-    }
-};
-
-class WebInteropApp {
+export class WebInteropApp {
     private static autoClose = true;
 
     public static async run() {
@@ -116,6 +110,4 @@ class WebInteropApp {
             credentials: 'omit'
         });
     }
-}
-
-(window as any).WebInteropApp = WebInteropApp;
+}

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Scripts/bswup.ts

@@ -1,5 +1,7 @@
 //+:cnd:noEmit
 
+import { App } from './App';
+
 (function () {
     const bswup = (window as any).BitBswup; // https://bitplatform.dev/bswup
     if (!bswup) return;

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Scripts/events.ts

@@ -1,5 +1,7 @@
 //+:cnd:noEmit
 
+import { App } from './App';
+
 (function () {
     window.addEventListener('load', handleLoad);
     window.addEventListener('message', handleMessage);

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Scripts/index.ts

@@ -0,0 +1,17 @@
+//+:cnd:noEmit
+
+import './bswup';
+import './theme';
+import './events';
+import { App } from './App';
+import { WebInteropApp } from './WebInteropApp';
+//#if (ads == true)
+import { Ads } from './Ads';
+//#endif
+
+// Expose classes on window global
+(window as any).App = App;
+(window as any).WebInteropApp = WebInteropApp;
+//#if (ads == true)
+(window as any).Ads = Ads;
+//#endif

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Scripts/theme.ts

@@ -1,24 +1,14 @@
 //+:cnd:noEmit
 
-declare class BitTheme { static init(options: BitThemeOptions): void; };
-
-interface BitThemeOptions {
-    system?: boolean;
-    persist?: boolean;
-    theme?: string | null;
-    default?: string | null;
-    darkTheme?: string | null;
-    lightTheme?: string | null;
-    onChange?: onThemeChangeType;
-}
-
-type onThemeChangeType = (newThemeName: string, oldThemeName: string) => void;
+// The following code gives you ideas on how to handle bit theme changes in your application.
 
 (function () {
-    BitTheme?.init({
+    if (typeof BitTheme === 'undefined')
+        return;
+    BitTheme.init({
         system: true,
         persist: true,
-        onChange: (newTheme: string, oldTheme: string) => {
+        onChange: (newTheme, oldTheme) => {
             document.body.classList.add('theme-' + newTheme);
             document.body.classList.remove('theme-' + oldTheme);
 

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Scripts/typings.d.ts

@@ -0,0 +1,27 @@
+// Blazor types:
+declare interface DotNetObject {
+    invokeMethod<T>(methodIdentifier: string, ...args: any[]): T;
+    invokeMethodAsync<T>(methodIdentifier: string, ...args: any[]): Promise<T>;
+    dispose(): void;
+}
+
+// Bit.Butil types:
+declare class BitButil {
+    static webAuthn: {
+        getCredential: (options: unknown) => Promise<unknown>,
+        createCredential: (options: unknown) => Promise<unknown>
+    }
+}
+
+// Bit.BlazorUI types:
+declare class BitTheme { static init(options: BitThemeOptions): void; }
+
+declare interface BitThemeOptions {
+    system?: boolean;
+    persist?: boolean;
+    theme?: string | null;
+    default?: string | null;
+    darkTheme?: string | null;
+    lightTheme?: string | null;
+    onChange?: (newThemeName: string, oldThemeName: string) => void;
+}