Changed import maps to use ImportMapDefinition and asp-importmap

Joshua-Lester3 · Joshua-Lester3 · commit 889b3b7d3e9e · 2025-01-16T13:48:15.000-08:00
diff --git a/Directory.Packages.props b/Directory.Packages.props
@@ -16,6 +16,7 @@
     <PackageVersion Include="ContentFeedNuget" Version="$(ToolingPackagesVersion)" />
   </ItemGroup>
   <ItemGroup>
+    <PackageVersion Include="Microsoft.AspNetCore.Components" Version="9.0.1" />
     <PackageVersion Include="EssentialCSharp.Shared.Models" Version="$(ToolingPackagesVersion)" />
     <PackageVersion Include="Microsoft.EntityFrameworkCore.Sqlite" Version="8.0.10" />
     <PackageVersion Include="AspNet.Security.OAuth.GitHub" Version="8.3.0" />
diff --git a/EssentialCSharp.Web/EssentialCSharp.Web.csproj b/EssentialCSharp.Web/EssentialCSharp.Web.csproj
@@ -18,6 +18,7 @@
     <PackageReference Include="IntelliTect.Multitool" />
     <PackageReference Include="Mailjet.Api" />
     <PackageReference Include="Microsoft.AspNetCore.Authentication.MicrosoftAccount" />
+    <PackageReference Include="Microsoft.AspNetCore.Components" />
     <PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" />
     <PackageReference Include="Microsoft.AspNetCore.Identity.UI" />
     <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" />
diff --git a/EssentialCSharp.Web/Views/Shared/_Layout.cshtml b/EssentialCSharp.Web/Views/Shared/_Layout.cshtml
@@ -4,6 +4,21 @@
 @using IntelliTect.Multitool
 @using EssentialCSharp.Common
 @inject ISiteMappingService _SiteMappings
+@using Microsoft.AspNetCore.Components
+@{
+    var prodMap = new ImportMapDefinition(
+        new Dictionary<string, string>
+                        {
+            { "vue", "./lib/vue/dist/vue.esm-browser.prod.js" },
+            { "vue-window-size", "./lib/vue-window-size/composition-api/dist/index.js" },
+                        }, null, null);
+    var devMap = new ImportMapDefinition(
+    new Dictionary<string, string>
+                    {
+            { "vue", "./lib/vue/dist/vue.esm-browser.js" },
+            { "vue-window-size", "./lib/vue-window-size/composition-api/dist/index.js" },
+                    }, null, null);
+}
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -46,24 +61,10 @@
     @*So that Safari can import modules*@
     <script async src="/lib/es-module-shims/dist/es-module-shims.js"></script>
     <environment include="Development">
-        <script type="importmap">
-            {
-                "imports": {
-                    "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
-                    "vue-window-size": "./lib/vue-window-size/composition-api/dist/index.js"
-                }
-            }
-        </script>
+        <script type="importmap" asp-importmap="@devMap"></script>
     </environment>
     <environment exclude="Development">
-        <script type="importmap">
-            {
-                "imports": {
-                    "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
-                    "vue-window-size": "./lib/vue-window-size/composition-api/dist/index.js"
-                }
-            }
-        </script>
+        <script type="importmap" asp-importmap="@prodMap"></script>
     </environment>
     <script type="text/javascript">
         (function (c, l, a, r, i, t, y) {
diff --git a/EssentialCSharp.Web/wwwroot/js/site.js b/EssentialCSharp.Web/wwwroot/js/site.js
@@ -1,12 +1,12 @@
-//import {
-//    createApp,
-//    ref,
-//    reactive,
-//    onMounted,
-//    markRaw,
-//    watch,
-//    computed,
-//} from "vue";
+import {
+    createApp,
+    ref,
+    reactive,
+    onMounted,
+    markRaw,
+    watch,
+    computed,
+} from "vue";
 import { useWindowSize } from "vue-window-size";
 
 /**
