From 26f540fe0254d25db968178d226305bd4b85cf50 Mon Sep 17 00:00:00 2001
From: haijian <haijian@vaadin.com>
Date: Tue, 21 Jan 2020 15:50:20 +0200
Subject: [PATCH] feat(typescript): add View, NavigationTrigger, lifecycle
 types

Fixes #422
---
 ...aadin-router-navigation-trigger-demos.html |   2 +-
 docs/vaadin-router/demo/demo-shell.html       |  14 +-
 ...aadin-router-navigation-trigger-demos.html |   2 +-
 interfaces.d.ts                               | 266 +++++++++++-------
 test/typescript/compile_fixture.ts            |  82 +++++-
 5 files changed, 258 insertions(+), 108 deletions(-)

diff --git a/demo/vaadin-router-navigation-trigger-demos.html b/demo/vaadin-router-navigation-trigger-demos.html
index c2ecbecf..5856185d 100644
--- a/demo/vaadin-router-navigation-trigger-demos.html
+++ b/demo/vaadin-router-navigation-trigger-demos.html
@@ -28,7 +28,7 @@ <h3>Navigation Triggers</h3>
       Developers can define and use additional Navigation Triggers that are
       specific to their application. A Navigation Trigger object must have
       two methods: <code>activate()</code> to start listening on some UI events,
-      and <code>deactivate()</code> to stop.
+      and <code>inactivate()</code> to stop.
     </p>
 
     <h3><code>NavigationTrigger.POPSTATE</code></h3>
diff --git a/docs/vaadin-router/demo/demo-shell.html b/docs/vaadin-router/demo/demo-shell.html
index 12dcfa55..d6dc71c6 100644
--- a/docs/vaadin-router/demo/demo-shell.html
+++ b/docs/vaadin-router/demo/demo-shell.html
@@ -6624,7 +6624,18 @@
    * @memberof Vaadin
    */Vaadin.ThemePropertyMixin=function(superClass){return(/*#__PURE__*/function(_superClass){babelHelpers.inherits(VaadinThemePropertyMixin,_superClass);function VaadinThemePropertyMixin(){babelHelpers.classCallCheck(this,VaadinThemePropertyMixin);return babelHelpers.possibleConstructorReturn(this,babelHelpers.getPrototypeOf(VaadinThemePropertyMixin).apply(this,arguments))}babelHelpers.createClass(VaadinThemePropertyMixin,[{key:"attributeChangedCallback",/** @protected */value:function attributeChangedCallback(name,oldValue,newValue){babelHelpers.get(babelHelpers.getPrototypeOf(VaadinThemePropertyMixin.prototype),"attributeChangedCallback",this).call(this,name,oldValue,newValue);if("theme"===name){this._setTheme(newValue)}}}],[{key:"properties",get:function get(){return{/**
          * Helper property with theme attribute value facilitating propagation
-         * in shadow DOM. Allows using `theme$="[[theme]]"` in the template.
+         * in shadow DOM.
+         *
+         * Enables the component implementation to propagate the `theme`
+         * attribute value to the subcomponents in Shadow DOM by binding
+         * the subcomponent’s "theme" attribute to the `theme` property of
+         * the host.
+         *
+         * **NOTE:** Extending the mixin only provides the property for binding,
+         * and does not make the propagation alone.
+         *
+         * See [Theme Attribute and Subcomponents](https://github.com/vaadin/vaadin-themable-mixin/wiki/5.-Theme-Attribute-and-Subcomponents).
+         * page for more information.
          *
          * @protected
          */theme:{type:String,readOnly:!0}}}}]);return VaadinThemePropertyMixin}(superClass))};</script><script>/**
@@ -6632,6 +6643,7 @@
    */window.Vaadin=window.Vaadin||{};/**
    * @polymerMixin
    * @memberof Vaadin
+   * @mixes Vaadin.ThemePropertyMixin
    */Vaadin.ThemableMixin=function(superClass){return(/*#__PURE__*/function(_Vaadin$ThemeProperty){babelHelpers.inherits(VaadinThemableMixin,_Vaadin$ThemeProperty);function VaadinThemableMixin(){babelHelpers.classCallCheck(this,VaadinThemableMixin);return babelHelpers.possibleConstructorReturn(this,babelHelpers.getPrototypeOf(VaadinThemableMixin).apply(this,arguments))}babelHelpers.createClass(VaadinThemableMixin,null,[{key:"finalize",/** @protected */value:function finalize(){var _this=this;babelHelpers.get(babelHelpers.getPrototypeOf(VaadinThemableMixin),"finalize",this).call(this);var template=this.prototype._template,hasOwnTemplate=this.template&&this.template.parentElement&&this.template.parentElement.id===this.is,inheritedTemplate=Object.getPrototypeOf(this.prototype)._template;if(inheritedTemplate&&!hasOwnTemplate){// The element doesn't define its own template -> include the theme modules from the inherited template
 Array.from(inheritedTemplate.content.querySelectorAll("style[include]")).forEach(function(s){_this._includeStyle(s.getAttribute("include"),template)})}this._includeMatchingThemes(template)}/** @protected */},{key:"_includeMatchingThemes",value:function _includeMatchingThemes(template){var _this2=this,domModule=Polymer.DomModule,modules=domModule.prototype.modules,hasThemes=!1,defaultModuleName=this.is+"-default-theme";Object.keys(modules).sort(function(moduleNameA,moduleNameB){var vaadinA=0===moduleNameA.indexOf("vaadin-"),vaadinB=0===moduleNameB.indexOf("vaadin-"),vaadinThemePrefixes=["lumo-","material-"],vaadinThemeA=0<vaadinThemePrefixes.filter(function(prefix){return 0===moduleNameA.indexOf(prefix)}).length,vaadinThemeB=0<vaadinThemePrefixes.filter(function(prefix){return 0===moduleNameB.indexOf(prefix)}).length;if(vaadinA!==vaadinB){// Include vaadin core styles first
 return vaadinA?-1:1}else if(vaadinThemeA!==vaadinThemeB){// Include vaadin theme styles after that
diff --git a/docs/vaadin-router/demo/vaadin-router-navigation-trigger-demos.html b/docs/vaadin-router/demo/vaadin-router-navigation-trigger-demos.html
index 28787427..4f3cb77b 100644
--- a/docs/vaadin-router/demo/vaadin-router-navigation-trigger-demos.html
+++ b/docs/vaadin-router/demo/vaadin-router-navigation-trigger-demos.html
@@ -28,7 +28,7 @@ <h3>Navigation Triggers</h3>
       Developers can define and use additional Navigation Triggers that are
       specific to their application. A Navigation Trigger object must have
       two methods: <code>activate()</code> to start listening on some UI events,
-      and <code>deactivate()</code> to stop.
+      and <code>inactivate()</code> to stop.
     </p>
 
     <h3><code>NavigationTrigger.POPSTATE</code></h3>
diff --git a/interfaces.d.ts b/interfaces.d.ts
index 82bfa768..a300aac4 100644
--- a/interfaces.d.ts
+++ b/interfaces.d.ts
@@ -5,125 +5,183 @@
 // This file is supplemental, it only covers the types missing from
 // the generated declarations.
 
-declare class Router {
-}
-
-declare namespace Router {
-  class NotFoundResult {
-    // Prevent instantiation and extension
-    private constructor();
-
-    // Prevent treating any object literals `{}` as a match for this type
-    private _notFoundResultBrand: never;
-  }
-
-  class ComponentResult {
-    private constructor();
-    private _componentResultBrand: never;
-  }
-
-  class PreventResult {
+import {Router} from './dist/vaadin-router';
+
+declare module './dist/vaadin-router' {
+  namespace Router {
+    class NotFoundResult {
+      // Prevent instantiation and extension
+      private constructor();
+
+      // Prevent treating any object literals `{}` as a match for this type
+      private _notFoundResultBrand: never;
+    }
+
+    class ComponentResult {
+      private constructor();
+      private _componentResultBrand: never;
+    }
+
+    class PreventResult {
+      private constructor();
+      private _preventResultBrand: never;
+    }
+
+    class RedirectResult {
+      private constructor();
+      private _redirectResultBrand: never;
+    }
+
+    type ActionResult = void
+      | null
+      | HTMLElement
+      | NotFoundResult
+      | ComponentResult
+      | RedirectResult
+      | PreventResult;
+
+    type ParamValue = string | string[];
+    type IndexedParams = {[key in string | number]: ParamValue};
+    type Params = IndexedParams | ParamValue[];
+
+    class Context {
+      pathname: string;
+      search: string;
+      hash: string;
+      params: IndexedParams;
+      route: Route;
+      next: () => Promise<ActionResult>;
+    }
+
+    class Commands {
+      component: (name: string) => ComponentResult;
+      redirect: (path: string) => RedirectResult;
+      prevent: () => PreventResult;
+    }
+
+    interface ActionFn {
+      (context: Context, commmands: Commands): ActionResult | Promise<ActionResult>;
+    }
+
+    interface ChildrenFn {
+      (): Route[] | Promise<Route[]>
+    }
+
+    interface BaseRoute {
+      path: string;
+      name?: string;
+      // Route requires at least one of the following optional properties
+      action?: ActionFn;
+      bundle?: string;
+      children?: Route[] | ChildrenFn;
+      component?: string;
+      redirect?: string;
+    }
+    interface RouteWithAction extends BaseRoute {
+      action: ActionFn;
+    }
+    interface RouteWithBundle extends BaseRoute {
+      bundle: string;
+    }
+    interface RouteWithChildren extends BaseRoute {
+      children: Route[] | ChildrenFn;
+    }
+    interface RouteWithComponent extends BaseRoute {
+      component: string;
+    }
+    interface RouteWithRedirect extends BaseRoute {
+      redirect: string;
+    }
+    type Route = RouteWithAction
+      | RouteWithBundle
+      | RouteWithChildren
+      | RouteWithComponent
+      | RouteWithRedirect;
+
+    class Location {
+      baseUrl: string;
+      params: IndexedParams;
+      pathname: string;
+      search: string;
+      hash: string;
+      redirectFrom?: string;
+      route: Route | null;
+      routes: Array<Route>;
+      getUrl(params?: Params): string;
+    }
+
+    interface Options {
+      baseUrl?: string;
+    }
+
+    interface NavigationTrigger {
+      activate(): void;
+      inactivate(): void;
+    }
+
+    namespace NavigationTrigger {
+      const CLICK: NavigationTrigger;
+      const POPSTATE: NavigationTrigger;
+    }
+  }
+
+  export type RouterLocation = Router.Location;
+
+  export class View {
     private constructor();
-    private _preventResultBrand: never; 
-  }
 
-  class RedirectResult {
-    private constructor();
-    private _redirectResultBrand: never;
+    location: RouterLocation
   }
 
-  type ActionResult = void
-    | null
-    | HTMLElement
-    | NotFoundResult
-    | ComponentResult
-    | RedirectResult
-    | PreventResult;
-
-  type ParamValue = string | string[];
-  type IndexedParams = {[key in string | number]: ParamValue};
-  type Params = IndexedParams | ParamValue[];
-
-  class Context {
-    pathname: string;
-    search: string;
-    hash: string;
-    params: IndexedParams;
-    route: Route;
-    next: () => Promise<ActionResult>;
+  export class PreventAndRedirectCommands {
+    redirect: (path: string) => Router.RedirectResult;
+    prevent: () => Router.PreventResult;
   }
 
-  class Commands {
-    component: (name: string) => ComponentResult;
-    redirect: (path: string) => RedirectResult;
-    prevent: () => PreventResult;
+  export class PreventCommands {
+    prevent: () => Router.PreventResult;
   }
 
-  interface ActionFn {
-    (context: Context, commmands: Commands): ActionResult | Promise<ActionResult>;
+  export class EmptyCommands {
   }
 
-  interface ChildrenFn {
-    (): Route[] | Promise<Route[]>
+  export interface BeforeEnterObserver {
+    onBeforeEnter: (
+      location: Location,
+      commands: PreventAndRedirectCommands,
+      router: Router
+    ) => void
+      | Router.PreventResult
+      | Router.RedirectResult
+      | Promise<void
+        | Router.PreventResult
+        | Router.RedirectResult>;
   }
 
-  interface BaseRoute {
-    path: string;
-    name?: string;
-    // Route requires at least one of the following optional properties
-    action?: ActionFn;
-    bundle?: string;
-    children?: Route[] | ChildrenFn;
-    component?: string;
-    redirect?: string;
-  }
-  interface RouteWithAction extends BaseRoute {
-    action: ActionFn;
-  }
-  interface RouteWithBundle extends BaseRoute {
-    bundle: string;
-  }
-  interface RouteWithChildren extends BaseRoute {
-    children: Route[] | ChildrenFn;
-  }
-  interface RouteWithComponent extends BaseRoute {
-    component: string;
-  }
-  interface RouteWithRedirect extends BaseRoute {
-    redirect: string;
-  }
-  type Route = RouteWithAction
-    | RouteWithBundle
-    | RouteWithChildren
-    | RouteWithComponent
-    | RouteWithRedirect;
-
-  class Location {
-    baseUrl: string;
-    params: IndexedParams;
-    pathname: string;
-    search: string;
-    hash: string;
-    redirectFrom?: string;
-    route: Route | null;
-    routes: Array<Route>;
-    getUrl(params?: Params): string;
+  export interface BeforeLeaveObserver {
+    onBeforeLeave: (
+      location: Location,
+      commands: PreventCommands,
+      router: Router
+    ) => void
+      | Router.PreventResult
+      | Promise<void
+        | Router.PreventResult>;
   }
 
-  interface Options {
-    baseUrl?: string;
+  export interface AfterEnterObserver {
+    onAfterEnter: (
+      location: Location,
+      commands: EmptyCommands,
+      router: Router
+    ) => void;
   }
 
-  interface NavigationTrigger {
-    activate(): void;
-    inactivate(): void;
+  export interface AfterLeaveObserver {
+    onAfterLeave: (
+      location: Location,
+      commands: EmptyCommands,
+      router: Router
+    ) => void;
   }
-
-  // FIXME(platosha): declare builtin navigation triggers
-  // // Alias for referencing interface from the class below
-  // type _NavigationTrigger = NavigationTrigger;
-  // namespace NavigationTrigger {
-  //   const CLICK: _NavigationTrigger;
-  //   const POPSTATE: _NavigationTrigger;
-  // }
 }
diff --git a/test/typescript/compile_fixture.ts b/test/typescript/compile_fixture.ts
index 72443e5d..320785c8 100644
--- a/test/typescript/compile_fixture.ts
+++ b/test/typescript/compile_fixture.ts
@@ -2,7 +2,18 @@
 // Only the compilation success is tested. We don’t emit any JS from the
 // code below and don't execute it.
 
-import {Router} from '@vaadin/router';
+import {
+  Router,
+  View,
+  RouterLocation,
+  BeforeEnterObserver,
+  BeforeLeaveObserver,
+  AfterEnterObserver,
+  AfterLeaveObserver,
+  PreventAndRedirectCommands,
+  PreventCommands,
+  EmptyCommands
+} from '@vaadin/router';
 
 const outlet: Node = document.body.firstChild as Node;
 
@@ -155,3 +166,72 @@ router.setOutlet(null);
 
 // getOutlet
 expectTypeOfValue<Node | null>(router.getOutlet());
+
+// Location property
+class MyViewWithLocation extends HTMLElement {
+  connectedCallback() {
+    this.localName;
+    this.location;
+  }
+}
+interface MyViewWithLocation extends View {}
+customElements.define('my-view-with-location', MyViewWithLocation);
+
+// Lifecycle
+
+class MyViewWithBeforeEnter extends HTMLElement implements BeforeEnterObserver {
+  onBeforeEnter(location: RouterLocation, commands: PreventAndRedirectCommands, router: Router) {
+    this.localName;
+    location.baseUrl;
+    router.baseUrl;
+    commands.prevent();
+    if ('component' in commands) { throw new Error('unexpected'); }
+    return commands.redirect('/');
+  }
+}
+customElements.define('my-view-with-before-enter', MyViewWithBeforeEnter);
+
+class MyViewWithBeforeLeave extends HTMLElement implements BeforeLeaveObserver {
+  onBeforeLeave(location: Router.Location, commands: PreventCommands, router: Router) {
+    this.localName;
+    location.baseUrl;
+    router.baseUrl;
+    if (('component' in commands) || ('redirect' in commands)) {
+      throw new Error('unexpected');
+    }
+    return commands.prevent();
+  }
+}
+customElements.define('my-view-with-before-leave', MyViewWithBeforeLeave);
+
+class MyViewWithAfterEnter extends HTMLElement implements AfterEnterObserver {
+  onAfterEnter(location: Router.Location, commands: EmptyCommands, router: Router) {
+    this.localName;
+    location.baseUrl;
+    if (('component' in commands) || ('redirect' in commands) || ('prevent' in commands)) {
+      throw new Error('unexpected');
+    }
+    router.baseUrl;
+  }
+}
+customElements.define('my-view-with-after-enter', MyViewWithAfterEnter);
+
+class MyViewWithAfterLeave extends HTMLElement implements AfterLeaveObserver {
+  onAfterLeave(location: Router.Location, commands: EmptyCommands, router: Router) {
+    this.localName;
+    location.baseUrl;
+    if (('component' in commands) || ('redirect' in commands) || ('prevent' in commands)) {
+      throw new Error('unexpected');
+    }
+    router.baseUrl;
+  }
+}
+customElements.define('my-view-with-after-leave', MyViewWithAfterLeave);
+
+// Navigation triggers
+const MyNavigationTrigger: Router.NavigationTrigger = {
+  activate() {},
+  inactivate() {}
+};
+const {CLICK, POPSTATE} = Router.NavigationTrigger;
+Router.setTriggers(CLICK, POPSTATE, MyNavigationTrigger);