diff --git a/packages/router/package.json b/packages/router/package.json index 5880f43..28d9a44 100644 --- a/packages/router/package.json +++ b/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", diff --git a/packages/router/src/components/prompt/prompt.tsx b/packages/router/src/components/prompt/prompt.tsx index 0eaea20..2d303a0 100644 --- a/packages/router/src/components/prompt/prompt.tsx +++ b/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(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"]); diff --git a/packages/router/src/utils/createBrowserHistory.ts b/packages/router/src/utils/createBrowserHistory.ts index 558c95d..84bddc2 100644 --- a/packages/router/src/utils/createBrowserHistory.ts +++ b/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; diff --git a/packages/router/src/utils/createHashHistory.ts b/packages/router/src/utils/createHashHistory.ts index be2a8a0..1d70701 100644 --- a/packages/router/src/utils/createHashHistory.ts +++ b/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)) : '';