hyperapp-router

hyperapp-router copied to clipboard

As noted in the subject, the Typescript type definitions for the library are yet to be done.

i create a Typescript type definition

example code is here

import { h, app, View, ActionsType } from "hyperapp";
import {
  Link,
  Route,
  RenderProps,
  location,
  LocationActions,
  LocationState
} from "@hyperapp/router";

const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
const Topic = ({ match }: RenderProps<{ topicId: string }>) => (
  <h3>{match.params.topicId}</h3>
);
const TopicsView = ({ match }: RenderProps<{ topicId: string }>) => (
  <div>
    <h2>Topics</h2>
    <ul>
      <li>
        <Link to={`${match.url}/components`}>Components</Link>
      </li>
      <li>
        <Link to={`${match.url}/single-state-tree`}>Single State Tree</Link>
      </li>
      <li>
        <Link to={`${match.url}/routing`}>Routing</Link>
      </li>
    </ul>

    {match.isExact && <h3>Please select a topic.</h3>}

    <Route parent path={`${match.path}/:topicId`} render={Topic} />
  </div>
);

interface RouteState {
  location: LocationState;
}
const state: RouteState = {
  location: location.state
};

interface RouteActions {
  location: LocationActions;
}

const routeActions: ActionsType<RouteState, RouteActions> = {
  location: location.actions
};
const view: View<RouteState, RouteActions> = (state: RouteState) => (
  <div>
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/about">About</Link>
      </li>
      <li>
        <Link to="/topics">Topics</Link>
      </li>
    </ul>

    <hr />

    <Route path="/" render={Home} />
    <Route path="/about" render={About} />
    <Route parent path="/topics" render={TopicsView} />
  </div>
);

const main = app(state, routeActions, view, document.body);

const unsubscribe = location.subscribe(main.location);

This does not seem to work for me. Here is an example (adapted from the above sample code) that gives me an error:

Route({ path: "/", render: Home })

where Home is

const Home = () => h('h2', {}, 'Home');

The error I get is this:

ERROR in [at-loader] ./src/index.ts:56:28
    TS2322: Type '() => VNode<{}>' is not assignable to type '(props: RenderProps<{}>) => VNode<RenderProps<{}>>'.
  Type 'VNode<{}>' is not assignable to type 'VNode<RenderProps<{}>>'.
    Type '{}' is missing the following properties from type 'RenderProps<{}>': location, match

This is true for every Route call (so 4 in total).

If I look at the tests for Route, then I see

const render = jest.fn()
Route({ path: "/users", render }, [])

Notice the extra [] (I assume this is children). Doing this, will also give me a type error (wrong number of arguments).

I would upload a failing example, but restrictions at work means I can't push anything to Github.

I looked around in the types a bit, but I am too new to Typescript to actually be able to fix it.

My tsconfig.json, in case it matters, look like this

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "alwaysStrict": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react",
        "strictNullChecks": true,
        "noUnusedLocals": true,
        "lib": [
            "ES2015",
            "dom"
        ]
    },
    "include": [
        "./src/**/*"
    ]
}