Convert Northwind pages to use esm modules and grid pages instead of …

…legacy namespaces script

src/Serenity.Demo.BasicSamples/Areas/Serenity.Demo.BasicSamples/_ViewStart.cshtml

@@ -2,5 +2,4 @@
     Layout = "_Layout";
 }
 @Html.Stylesheet("~/Serenity.Demo.Northwind/index.css")
-@Html.Script("~/Serenity.Demo.Northwind/index.js")
 @Html.Stylesheet("~/Serenity.Demo.BasicSamples/index.css")

src/Serenity.Demo.BasicSamples/tsbuild.js

@@ -1,4 +1,5 @@
 import { build } from "@serenity-is/tsbuild";
 
+// wwwroot/esm/**/*.js: ESM entry points for own pages
 await build({
 });

src/Serenity.Demo.Northwind/Areas/Serenity.Demo.Northwind/Order/OrderIndex.cshtml

@@ -1,6 +1,7 @@
-@inject ITextLocalizer Localizer
+@inject ITextLocalizer Localizer
 @{
-    ViewData["Title"] = Localizer.Get("Db.Northwind.Order.EntityPlural");
+
+    ViewData["Title"] = Localizer.Get(OrderRow.Fields.PageTitle());
 }
 
 @section Head {
@@ -17,9 +18,6 @@
 <div id="GridDiv"></div>
 
 <script type="module">
-    var orderGrid = Serenity.gridPageInit(Serenity.Demo.Northwind.OrderGrid);
-    var q = Serenity.parseQueryString();
-    if (q.shippingState != null && q.shippingState.length) {
-        orderGrid.set_shippingState(parseInt(q.shippingState, 10));
-    }
+    import pageInit from '@Html.ResolveWithHash(ESM.Modules.Order.OrderPage)';
+    pageInit();
 </script>

src/Serenity.Demo.Northwind/Areas/Serenity.Demo.Northwind/Product/ProductIndex.cshtml

@@ -1,6 +1,6 @@
-@inject ITextLocalizer Localizer
+@inject ITextLocalizer Localizer
 @{
-    ViewData["Title"] = Localizer.Get("Db.Northwind.Product.EntityPlural");
+    ViewData["Title"] = Localizer.Get(ProductRow.Fields.PageTitle());
 }
 
 @section Head {
@@ -10,5 +10,6 @@
 <div id="GridDiv"></div>
 
 <script type="module">
-    Serenity.gridPageInit(Serenity.Demo.Northwind.ProductGrid);
+    import pageInit from '@Html.ResolveWithHash(ESM.Modules.Product.ProductPage)';
+    pageInit();
 </script>

src/Serenity.Demo.Northwind/Areas/Serenity.Demo.Northwind/_ViewImports.cshtml

@@ -1,4 +1,5 @@
-@using Serenity
+@using Serenity
+@using Serenity.Demo.Northwind;
 @using Serenity.Web
 @using Microsoft.AspNetCore.Html
 @using System.Text;

src/Serenity.Demo.Northwind/Areas/Serenity.Demo.Northwind/_ViewStart.cshtml

@@ -2,4 +2,3 @@
     Layout = "_Layout";
 }
 @Html.Stylesheet("~/Serenity.Demo.Northwind/index.css")
-@Html.Script("~/Serenity.Demo.Northwind/index.js")

src/Serenity.Demo.Northwind/Imports/MVC/ESM.cs

@@ -8,5 +8,40 @@ public static partial class Category
         {
             public const string CategoryPage = "~/Serenity.Demo.Northwind/esm/Modules/Category/CategoryPage.js";
         }
+
+        public static partial class Customer
+        {
+            public const string CustomerPage = "~/Serenity.Demo.Northwind/esm/Modules/Customer/CustomerPage.js";
+        }
+
+        public static partial class Order
+        {
+            public const string OrderPage = "~/Serenity.Demo.Northwind/esm/Modules/Order/OrderPage.js";
+        }
+
+        public static partial class Product
+        {
+            public const string ProductPage = "~/Serenity.Demo.Northwind/esm/Modules/Product/ProductPage.js";
+        }
+
+        public static partial class Region
+        {
+            public const string RegionPage = "~/Serenity.Demo.Northwind/esm/Modules/Region/RegionPage.js";
+        }
+
+        public static partial class Shipper
+        {
+            public const string ShipperPage = "~/Serenity.Demo.Northwind/esm/Modules/Shipper/ShipperPage.js";
+        }
+
+        public static partial class Supplier
+        {
+            public const string SupplierPage = "~/Serenity.Demo.Northwind/esm/Modules/Supplier/SupplierPage.js";
+        }
+
+        public static partial class Territory
+        {
+            public const string TerritoryPage = "~/Serenity.Demo.Northwind/esm/Modules/Territory/TerritoryPage.js";
+        }
     }
 }

src/Serenity.Demo.Northwind/Imports/MVC/MVC.cs

@@ -3,16 +3,6 @@ namespace Serenity.Demo.Northwind.MVC;
 
 public static class Views
 {
-    public static class Category
-    {
-        public const string CategoryIndex = "~/Areas/Serenity.Demo.Northwind/Category/CategoryIndex.cshtml";
-    }
-
-    public static class Customer
-    {
-        public const string CustomerIndex = "~/Areas/Serenity.Demo.Northwind/Customer/CustomerIndex.cshtml";
-    }
-
     public static class Order
     {
         public const string OrderDetailReport = "~/Areas/Serenity.Demo.Northwind/Order/OrderDetailReport.cshtml";
@@ -23,24 +13,4 @@ public static class Product
     {
         public const string ProductIndex = "~/Areas/Serenity.Demo.Northwind/Product/ProductIndex.cshtml";
     }
-
-    public static class Region
-    {
-        public const string RegionIndex = "~/Areas/Serenity.Demo.Northwind/Region/RegionIndex.cshtml";
-    }
-
-    public static class Shipper
-    {
-        public const string ShipperIndex = "~/Areas/Serenity.Demo.Northwind/Shipper/ShipperIndex.cshtml";
-    }
-
-    public static class Supplier
-    {
-        public const string SupplierIndex = "~/Areas/Serenity.Demo.Northwind/Supplier/SupplierIndex.cshtml";
-    }
-
-    public static class Territory
-    {
-        public const string TerritoryIndex = "~/Areas/Serenity.Demo.Northwind/Territory/TerritoryIndex.cshtml";
-    }
 }

src/Serenity.Demo.Northwind/Modules/Category/CategoryPage.cs

@@ -8,6 +8,7 @@ public class CategoryPage : Controller
     [Route("Northwind/Category")]
     public ActionResult Index()
     {
-        return View(MVC.Views.Category.CategoryIndex);
+        return this.GridPage(ESM.Modules.Category.CategoryPage,
+            CategoryRow.Fields.PageTitle());
     }
 }

src/Serenity.Demo.Northwind/Modules/Customer/CustomerPage.cs

@@ -8,7 +8,8 @@ public class CustomerPage : Controller
     [Route("Northwind/Customer")]
     public ActionResult Index()
     {
-        return View(MVC.Views.Customer.CustomerIndex);
+        return this.GridPage(ESM.Modules.Customer.CustomerPage,
+            CustomerRow.Fields.PageTitle());
     }
 }
 

src/Serenity.Demo.Northwind/Modules/Customer/CustomerPage.ts

@@ -0,0 +1,4 @@
+import { gridPageInit } from "@serenity-is/corelib";
+import { CustomerGrid } from "./CustomerGrid";
+
+export default () => gridPageInit(CustomerGrid);

src/Serenity.Demo.Northwind/Modules/Order/OrderPage.ts

@@ -0,0 +1,10 @@
+import { gridPageInit, parseQueryString } from "@serenity-is/corelib";
+import { OrderGrid } from "./OrderGrid";
+
+export default () => {
+    const orderGrid = gridPageInit(OrderGrid);
+    const q = parseQueryString() as any;
+    if (q.shippingState?.length) {
+        orderGrid.set_shippingState(parseInt(q.shippingState, 10));
+    }
+}

src/Serenity.Demo.Northwind/Modules/Product/ProductPage.ts

@@ -0,0 +1,4 @@
+import { gridPageInit } from "@serenity-is/corelib";
+import { ProductGrid } from "./ProductGrid";
+
+export default () => gridPageInit(ProductGrid);

src/Serenity.Demo.Northwind/Modules/Region/RegionPage.cs

@@ -8,6 +8,7 @@ public class RegionPage : Controller
     [Route("Northwind/Region")]
     public ActionResult Index()
     {
-        return View(MVC.Views.Region.RegionIndex);
+        return this.GridPage(ESM.Modules.Region.RegionPage,
+            RegionRow.Fields.PageTitle());
     }
 }

src/Serenity.Demo.Northwind/Modules/Region/RegionPage.ts

@@ -0,0 +1,4 @@
+import { gridPageInit } from "@serenity-is/corelib";
+import { RegionGrid } from "./RegionGrid";
+
+export default () => gridPageInit(RegionGrid);

src/Serenity.Demo.Northwind/Modules/Shipper/ShipperPage.cs

@@ -8,6 +8,7 @@ public class ShipperPage : Controller
     [Route("Northwind/Shipper")]
     public ActionResult Index()
     {
-        return View(MVC.Views.Shipper.ShipperIndex);
+        return this.GridPage(ESM.Modules.Shipper.ShipperPage,
+            ShipperRow.Fields.PageTitle());
     }
 }

src/Serenity.Demo.Northwind/Modules/Shipper/ShipperPage.ts

@@ -0,0 +1,4 @@
+import { gridPageInit } from "@serenity-is/corelib";
+import { ShipperGrid } from "./ShipperGrid";
+
+export default () => gridPageInit(ShipperGrid);

src/Serenity.Demo.Northwind/Modules/Supplier/SupplierPage.cs

@@ -8,6 +8,7 @@ public class SupplierPage : Controller
     [Route("Northwind/Supplier")]
     public ActionResult Index()
     {
-        return View(MVC.Views.Supplier.SupplierIndex);
+        return this.GridPage(ESM.Modules.Supplier.SupplierPage,
+            SupplierRow.Fields.PageTitle());
     }
 }

src/Serenity.Demo.Northwind/Modules/Supplier/SupplierPage.ts

@@ -0,0 +1,4 @@
+import { gridPageInit } from "@serenity-is/corelib";
+import { SupplierGrid } from "./SupplierGrid";
+
+export default () => gridPageInit(SupplierGrid);

src/Serenity.Demo.Northwind/Modules/Territory/TerritoryPage.cs

@@ -8,6 +8,7 @@ public class TerritoryPage : Controller
     [Route("Northwind/Territory")]
     public ActionResult Index()
     {
-        return View(MVC.Views.Territory.TerritoryIndex);
+        return this.GridPage(ESM.Modules.Territory.TerritoryPage,
+            TerritoryRow.Fields.PageTitle());
     }
 }

src/Serenity.Demo.Northwind/Modules/Territory/TerritoryPage.ts

@@ -0,0 +1,4 @@
+import { gridPageInit } from "@serenity-is/corelib";
+import { TerritoryGrid } from "./TerritoryGrid";
+
+export default () => gridPageInit(TerritoryGrid);

src/Serenity.Demo.Northwind/tsbuild.js

@@ -1,25 +1,18 @@
-import { build, cleanPlugin } from "@serenity-is/tsbuild";
+import { build } from "@serenity-is/tsbuild";
 
-const buildOpt = {
-    entryPoints: ['./Modules/index.ts'],
-    outbase: './Modules/',
-    splitting: false,
-    clean: false
-}
+// wwwroot/esm/**/*.js: ESM entry points for own pages
+await build({
+});
 
-await build(Object.assign({}, buildOpt, {
+// dist/index.js: ESM bundle for NPM references
+await build({
+    clean: false,
+    entryPoints: ['./Modules/index.ts'],
     external: [
         '@serenity-is/*'
     ],
+    outbase: './Modules/',
     outdir: 'dist/',
-    plugins: []
-}));
-
-await build(Object.assign({}, buildOpt, {
-    format: 'iife',
-    footer: {
-        js: 'Serenity.Demo = Serenity.Demo || {}; Serenity.Demo.Northwind = Serenity.Demo.Northwind || {}; Object.assign(Serenity.Demo.Northwind, Serenity._); delete Serenity._;'
-    },
-    globalName: 'Serenity._',
-    outdir: 'wwwroot/'
-}));
+    plugins: [],
+    splitting: false
+});

src/Serenity.Extensions/tsbuild.js

@@ -7,6 +7,11 @@ const buildOpt = {
     clean: false
 }
 
+// wwwroot/esm/**/*.js: ESM entry points for own pages
+await build({
+});
+
+// dist/index.js: ESM bundle for NPM references
 await build(Object.assign({}, buildOpt, {
     external: [
         '@serenity-is/*'
@@ -15,6 +20,7 @@ await build(Object.assign({}, buildOpt, {
     plugins: []
 }));
 
+// wwwroot/index.js: Global script (e.g. ~/Serenity.Extensions/index.js include in appsettings.bundles.json)
 await build(Object.assign({}, buildOpt, {
     format: 'iife',
     footer: {
@@ -23,6 +29,3 @@ await build(Object.assign({}, buildOpt, {
     globalName: 'Serenity._',
     outdir: 'wwwroot/'
 }));
-
-await build({
-});