feat: add js initializers (#87)

Author: ElderJames

src/layout/example/AntDesign.ProLayout.Wasm/wwwroot/index.html

@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <title>AntDesign.ProLayout.Wasm</title>
     <base href="/" />
-    <link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
-    <link href="_content/AntDesign.ProLayout/css/ant-design-pro-layout-blazor.css" rel="stylesheet" />
+    <!--<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
+    <link href="_content/AntDesign.ProLayout/css/ant-design-pro-layout-blazor.css" rel="stylesheet" />-->
     <link href="css/app.css" rel="stylesheet" />
 </head>
 

src/layout/src/wwwroot/AntDesign.ProLayout.lib.module.js

@@ -0,0 +1,36 @@
+var beforeStartCalled = false;
+var afterStartedCalled = false;
+
+export function beforeWebStart() {
+    loadScriptAndStyle();
+}
+
+export function beforeStart(options, extensions) {
+   loadScriptAndStyle();
+}
+
+function loadScriptAndStyle() {
+    if (beforeStartCalled) {
+        return;
+    }
+
+    beforeStartCalled = true;
+
+    const antblazorCss = '_content/AntDesign/css/ant-design-blazor.css';
+    const prolayoutCss = '_content/AntDesign.ProLayout/css/ant-design-pro-layout-blazor.css';
+
+    if (!document.querySelector(`[href="${prolayoutCss}"]`)){
+        var customStyle = document.createElement('link');
+        customStyle.setAttribute('href', `${prolayoutCss}`);
+        customStyle.setAttribute('rel', 'stylesheet');
+
+        const antblazorStyle = document.querySelector(`[href="${antblazorCss}"]`);
+        if (antblazorStyle) {
+            antblazorStyle.after(customStyle);
+        }
+        else {
+            console.log('no antblazorStyle')
+            document.head.insertBefore(customStyle, document.querySelector('[prolayout-css]') || document.querySelector('link'));
+        }
+    }
+}