Skip to content

Commit

Permalink
feat(typescript): add View, NavigationTrigger, lifecycle types
Browse files Browse the repository at this point in the history 
Fixes #422
  • Loading branch information
@haijian-vaadin @platosha
haijian-vaadin authored and platosha committed Jan 24, 2020
1 parent 6c1eca9 commit fe3ca2c
Show file tree
Hide file tree
Showing 5 changed files with 258 additions and 108 deletions.
2 changes: 1 addition & 1 deletion demo/vaadin-router-navigation-trigger-demos.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
14 changes: 13 additions & 1 deletion docs/vaadin-router/demo/demo-shell.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6624,14 +6624,26 @@
* @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>/**
* @namespace Vaadin
*/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
Expand Down
2 changes: 1 addition & 1 deletion docs/vaadin-router/demo/vaadin-router-navigation-trigger-demos.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
266 changes: 162 additions & 104 deletions interfaces.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: RouterLocation,
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: RouterLocation,
commands: PreventCommands,
router: Router
) => void
| Router.PreventResult
| Promise<void
| Router.PreventResult>;
}

interface Options {
baseUrl?: string;
export interface AfterEnterObserver {
onAfterEnter: (
location: RouterLocation,
commands: EmptyCommands,
router: Router
) => void;
}

interface NavigationTrigger {
activate(): void;
inactivate(): void;
export interface AfterLeaveObserver {
onAfterLeave: (
location: RouterLocation,
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;
// }
}
Loading

0 comments on commit fe3ca2c

Please sign in to comment.