routerTest.tsx

import * as React from 'react';

interface AppProps {
    urlParams: { name: string },
    searchParams: { foo: string }
}
class App extends React.Component<AppProps, {}> {
}

interface ListProps {
    urlParams: { foo: string };
    parent: AppProps;
    data: {x: number; y: string; z: number; ff: string}
}

class List extends React.Component<ListProps, {}> {
    static onEnter() {
        return Promise.resolve({x: 1, z: 1});
    }

    foo() {
        return z.sub.list.toUrl({foo: "1"});
    }
}
class ListPast extends React.Component<{}, {}> {

}
class ListUpcoming extends React.Component<{}, {}> {

}
class ListActive extends React.Component<{}, {}> {

}

class Profile extends React.Component<{}, {}> {

}

class ProfileIndex extends React.Component<{}, {}> {

}

class ProfileBalance extends React.Component<{}, {}> {

}

class Route extends React.Component<{ url: string; component: React.ComponentClass<any> }, {}> {

}
class Router extends React.Component<{}, {}> {

}

class Component<P> {
    constructor(public props: P) {

    }
}

interface ComponentClass<Data, Props extends {data?: Data}> {
    new (props: Props): Component<Props>;
    onEnter?(): Promise<Data>;
    onLeave?(): Promise<void>;
}


type RouteComponent<UrlParams, SearchParams, Data> = ComponentClass<Data, { urlParams?: UrlParams; searchParams?: SearchParams; data?: Data }>;
function route<UrlParams, SearchParams, Data, Children extends { [name: string]: Route2<{}, {}, {}, {}> }>(url: string, component: RouteComponent<UrlParams, SearchParams, Data>, children?: Children) {
    return new Route2<UrlParams, SearchParams, Data, Children>(url, component, children);
}


class Route2<UrlParams, SearchParams, Data, Children extends { [name: string]: Route2<{}, {}, {}, {}> }> {
    constructor(private url: string, private component: RouteComponent<UrlParams, SearchParams, Data>, public sub: Children) {
        for (const ch in sub) {
            this.addChildren(sub[ch]);
        }
    }

    private addChildren<A, B, C extends { [name: string]: Route2<{}, {}, {}> }>(route: Route2<A, B, C>) {

    }

    toUrl(params: UrlParams) {

    }
}

const z = route('/', App, {
    list: route('/list', List, {
        active: route('active', ListActive),
        upcoming: route('upcoming', ListUpcoming),
        past: route('past', ListPast),
    }),
    profile: route('/profile', Profile, {
        index: route('index', ProfileIndex),
        balance: route('balance', ProfileBalance),
    })
});

z.sub.list.toUrl({foo: "1"});
// z.sub.list.sub.past.toUrl({});

/*

const y = (
    <Router>
        <Route url="/" component={App}>
            <Route url="list/" component={List}>
                <Route url="active" component={ListActive} />
                <Route url="upcoming" component={ListUpcoming} />
                <Route url="past" component={ListPast} />
            </Route>
            <Route url="profile" component={Profile}>
                <Route url="index" component={ProfileIndex} />
                <Route url="balance" component={ProfileBalance} />
            </Route>
        </Route>
    </Router>
);
*/