fix(): bind window as first param of getConfirmation

When `create***History` runs, `getUserConfirmation` defaults to the
`getConfirmation` function, which expects the global `window` object as
its first parameter.  However, it is later invoked without passing
`window`, probably because the signature for the user-defined flavor in
`CreateBrowserHistoryOptions` does not expect `window` to be passed.

The simple fix is to bind `window` to the default `getConfirmation`
function as its first parameter.

packages/router/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/router",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Stencil Router",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

packages/router/src/components/prompt/prompt.tsx

@@ -1,14 +1,21 @@
-import { Component, Prop, Element, ComponentInterface, Watch, State } from '@stencil/core';
-import { RouterHistory, Prompt } from '../../global/interfaces';
-import ActiveRouter from '../../global/active-router';
+import {
+  Component,
+  Prop,
+  Element,
+  ComponentInterface,
+  Watch,
+  State,
+} from "@stencil/core";
+import { RouterHistory, Prompt } from "../../global/interfaces";
+import ActiveRouter from "../../global/active-router";
 
 @Component({
-  tag: 'stencil-router-prompt'
+  tag: "stencil-router-prompt",
 })
 export class StencilRouterPrompt implements ComponentInterface {
-  @Element() el!: HTMLElement;
+  @Element() el!: HTMLStencilRouterPromptElement;
   @Prop() when = true;
-  @Prop() message: string | Prompt = '';
+  @Prop() message: string | Prompt = "";
   @Prop() history?: RouterHistory;
 
   @State() unblock?: () => void;
@@ -30,20 +37,21 @@ export class StencilRouterPrompt implements ComponentInterface {
   }
 
   componentWillLoad() {
-    if (this.when ) {
+    if (this.when) {
       this.enable(this.message);
     }
   }
 
-  @Watch('message')
-  @Watch('when')
-  updateMessage(newMessage: string, prevMessage: string) {
-    if (this.when) {
-      if (!this.when || prevMessage !== newMessage) {
-        this.enable(this.message);
-      }
-    } else {
+  updateMessage(newMessage: string, prevMessage: string): void; // `message` updated
+  updateMessage(newMessage: boolean, prevMessage: boolean): void; // `when` updated
+
+  @Watch("message")
+  @Watch("when")
+  updateMessage<T extends string | boolean>(newMessage: T, prevMessage: T) {
+    if (!this.when) {
       this.disable();
+    } else if (prevMessage !== newMessage) {
+      this.enable(this.message);
     }
   }
 
@@ -56,6 +64,4 @@ export class StencilRouterPrompt implements ComponentInterface {
   }
 }
 
-ActiveRouter.injectProps(StencilRouterPrompt, [
-  'history',
-]);
+ActiveRouter.injectProps(StencilRouterPrompt, ["history"]);

packages/router/src/utils/createBrowserHistory.ts

@@ -49,7 +49,10 @@ const createBrowserHistory = (win: Window, props: CreateBrowserHistoryOptions =
   const scrollHistory = createScrollHistory(win);
 
   const forceRefresh = (props.forceRefresh != null) ? props.forceRefresh : false;
-  const getUserConfirmation = (props.getUserConfirmation != null) ? props.getUserConfirmation : getConfirmation;
+  const getUserConfirmation =
+    props.getUserConfirmation != null
+      ? props.getUserConfirmation
+      : getConfirmation.bind(undefined, win);
   const keyLength = (props.keyLength != null) ? props.keyLength : 6;
   const basename = props.basename ? stripTrailingSlash(addLeadingSlash(props.basename)) : '';
 
@@ -83,11 +86,9 @@ const createBrowserHistory = (win: Window, props: CreateBrowserHistoryOptions =
     return createLocation(path, state, key || createKey(keyLength));
   };
 
-
   const transitionManager = createTransitionManager();
 
   const setState = (nextState?: NextState) => {
-
     // Capture location for the view before changing history.
     scrollHistory.capture(history.location.key);
 
@@ -103,7 +104,7 @@ const createBrowserHistory = (win: Window, props: CreateBrowserHistoryOptions =
     );
   };
 
-  const handlePopState = (event: any) => {
+  const handlePopState = (event: PopStateEvent) => {
     // Ignore extraneous popstate events in WebKit.
     if (!isExtraneousPopstateEvent(globalNavigator, event)) {
       handlePop(getDOMLocation(event.state));
@@ -114,7 +115,6 @@ const createBrowserHistory = (win: Window, props: CreateBrowserHistoryOptions =
     handlePop(getDOMLocation(getHistoryState()));
   };
 
-
   const handlePop = (location: LocationSegments) => {
     if (forceNextPop) {
       forceNextPop = false;
@@ -263,7 +263,6 @@ const createBrowserHistory = (win: Window, props: CreateBrowserHistoryOptions =
   const goBack = () => go(-1);
   const goForward = () => go(1);
 
-
   const checkDOMListeners = (delta: number) => {
     listenerCount += delta;
 

packages/router/src/utils/createHashHistory.ts

@@ -52,7 +52,7 @@ const createHashHistory = (win: Window, props: CreateHashHistoryOptions = {}) =>
   const keyLength = (props.keyLength != null) ? props.keyLength : 6;
 
   const {
-    getUserConfirmation = getConfirmation,
+    getUserConfirmation = getConfirmation.bind(undefined, win),
     hashType = 'slash'
   } = props;
   const basename = props.basename ? stripTrailingSlash(addLeadingSlash(props.basename)) : '';