Split web components into its own file

Author: reakaleek

src/Elastic.Documentation.Site/Assets/custom-elements.ts

@@ -0,0 +1 @@
+import './web-components/VersionDropdown'

src/Elastic.Documentation.Site/Assets/main.ts

@@ -7,7 +7,6 @@ import { initNav } from './pages-nav'
 import { initSmoothScroll } from './smooth-scroll'
 import { initTabs } from './tabs'
 import { initTocNav } from './toc-nav'
-import './web-components/VersionDropdown'
 import 'htmx-ext-head-support'
 import 'htmx-ext-preload'
 import 'htmx.org'

src/Elastic.Documentation.Site/Layout/_Head.cshtml

@@ -8,6 +8,7 @@
 		<link rel="preload" href="@fontFile" as="font" type="font/woff2" crossorigin>
 	}
 	<link rel="stylesheet preload" as="style" type="text/css" href="@Model.Static("styles.css")" crossorigin/>
+	<script src="@Model.Static("custom-elements.js")" defer></script>
 	<script src="@Model.Static("main.js")" defer></script>
 	@if (Model.CanonicalBaseUrl is not null)
 	{

src/Elastic.Documentation.Site/package.json

@@ -12,6 +12,10 @@
     "fmt:write": "prettier --write ."
   },
   "targets": {
+    "customElements": {
+      "distDir": "_static",
+      "source": "Assets/custom-elements.ts"
+    },
     "js": {
       "distDir": "_static",
       "source": "Assets/main.ts"