refactor(PageStack): add page-stack js interop (#609)

* wip

* 🆕 feat(PageStack): add page-stack js interop

Author: capdiem

src/Component/BlazorComponent.Web/package.json

@@ -30,6 +30,7 @@
     "build:resize": "rollup --config rollup.config.resize.ts",
     "build:xgplayer": "rollup --config rollup.config.xgplayer.ts",
     "build:scrollToTarget": "rollup --config rollup.config.scrollToTargetJSInterop.ts",
+    "build:pageStack": "rollup --config rollup.config.pageStack.ts",
     "build:sortable": "rollup --config rollup.config.sortable.ts",
     "build:transition": "rollup --config rollup.config.transition.ts"
   },

src/Component/BlazorComponent.Web/rollup.config.pageStack.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from "rollup";
+import { terser } from "rollup-plugin-terser";
+
+import typescript from "@rollup/plugin-typescript";
+
+export default defineConfig({
+  input: "./src/components/page-stack/index.ts",
+  output: [
+    {
+      file: "../../../../MASA.Blazor/Presets/PageStack/PPageStack.razor.js",
+      format: "esm",
+      sourcemap: true,
+    },
+  ],
+  plugins: [typescript(), terser()],
+  watch: {
+    exclude: "node_modules/**",
+  },
+});

src/Component/BlazorComponent.Web/src/components/page-stack/index.ts

@@ -0,0 +1,39 @@
+const dotnetRefs: { [prop: number]: DotNet.DotNetObject } = {};
+const clickHandlers: { [prop: number]: (e: MouseEvent) => void } = {};
+let nextId = 0;
+
+export function attachListener(handle: DotNet.DotNetObject) {
+  const id = nextId;
+  const clickHandler = (event: MouseEvent) => onDocumentClick(id, event);
+  clickHandlers[id] = clickHandler;
+  document.addEventListener("click", clickHandler);
+  dotnetRefs[id] = handle;
+  return nextId++;
+}
+
+async function onDocumentClick(id: number, event: MouseEvent) {
+  const dotnet = dotnetRefs[id];
+  if (dotnet === null) return;
+
+  const anchor = event.target.closest("a");
+  if (!anchor) return;
+
+  const href = anchor.getAttribute("href");
+  if (!href) return;
+
+  let strategy = anchor.getAttribute("data-page-stack-strategy");
+  strategy = strategy === null ? null : strategy.toLowerCase();
+  if (strategy === "" || strategy === "true" || strategy === "push") {
+    await dotnet.invokeMethodAsync("Push", href);
+  }
+}
+
+export function detachListener(id: number) {
+  const clickHandler = clickHandlers[id];
+  document.removeEventListener("click", clickHandler);
+
+  dotnetRefs[id] && dotnetRefs[id].dispose();
+
+  delete clickHandlers[id];
+  delete dotnetRefs[id];
+}

src/Component/BlazorComponent.Web/src/globals.d.ts

@@ -188,6 +188,10 @@ declare global {
     target: HTMLElement;
   }
 
+  interface MouseEvent {
+    target: HTMLElement;
+  }
+
   interface MbEventTarget {
     elementReferenceId?: string;
     selector?: string;

src/Component/BlazorComponent.Web/src/interop.ts

@@ -1533,3 +1533,11 @@ export function removeStopPropagationEvent(el: any, type: keyof HTMLElementEvent
 export function historyBack() {
   history.back();
 }
+
+export function historyGo(delta: number) {
+  history.go(delta);
+}
+
+export function historyReplace(href) {
+  history.replaceState(null, /*ignore title*/ '', href);
+}

src/Component/BlazorComponent/JSInterop/JsInteropConstants.cs

@@ -153,5 +153,9 @@ public static class JsInteropConstants
         public static string RemoveStopPropagationEvent => $"{JsInteropFuncNamePrefix}removeStopPropagationEvent";
 
         public static string HistoryBack => $"{JsInteropFuncNamePrefix}historyBack";
+
+        public static string HistoryGo => $"{JsInteropFuncNamePrefix}historyGo";
+
+        public static string HistoryReplace => $"{JsInteropFuncNamePrefix}historyReplace";
     }
 }