rocon icon indicating copy to clipboard operation
rocon copied to clipboard

Sample code doesn't work with TS 4.4 strict mode

Open arayaryoma opened this issue 3 years ago • 1 comments

I tried to run sample codes written in official doc, but I got errors from tsc.

app.tsx

import React from "react";
import { FunctionComponent } from "react";
import { RoconRoot } from "rocon/react";
import { Routes } from "./routes";

const App: FunctionComponent = () => {
  return (
    <RoconRoot>
      <Routes />
    </RoconRoot>
  );
};

routes.tsx

import React from "react";
import Rocon from "rocon";
import { useRoutes } from "rocon/react";
const toplevelRoutes = Rocon.Path()
  .exact({
    action: () => <p>I am top page</p>,
  })
  .route("foo", (route) => route.action(() => <p>This is foo</p>))
  .route("bar", (route) => route.action(() => <p>This is bar</p>));

export const Routes: React.FC = () => {
  return useRoutes(toplevelRoutes);
};

tsconifg

{
  "compilerOptions": {
    "target": "es2021",
    "lib": ["DOM"],
    "jsx": "react",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

tsc and node version

$./node_modules/.bin/tsc -v
Version 4.4.4

$ node -v
v16.8.0

Result of running tsc

tsc --noEmit
src/routes.tsx:12:20 - error TS2345: Argument of type 'PathRouteBuilder<unknown, { foo: RouteDefinition<unknown, {}>; bar: RouteDefinition<unknown, {}>; }, "none", "hasaction", {}>' is not assignable to parameter of type 'AttachableRouteBuilder<ReactElement | null, unknown>'.
  The types returned by 'getBuilderLink()' are incompatible between these types.
    Type 'RouteBuilderLink<unknown, string | undefined>' is not assignable to type 'BuilderLink<ReactElement | null, unknown, RouteBuilderLinkValue<ReactElement | null>>'.
      Type 'RouteBuilderLinkValue<unknown>' is not assignable to type 'RouteBuilderLinkValue<ReactElement | null>'.
        Type 'unknown' is not assignable to type 'ReactElement | null'.
          Type 'unknown' is not assignable to type 'ReactElement'.

12   return useRoutes(toplevelRoutes);
                      ~~~~~~~~~~~~~~


Found 1 error.

arayaryoma avatar Nov 05 '21 01:11 arayaryoma

I'm afraid you need to import everything from rocon/react. 😨

- import Rocon from "rocon";
- import { useRoutes } from "rocon/react";
+ import Rocon, { useRoutes } from "rocon/react";

The package structure seems to have room for improvement, or documentation may be improved...

uhyo avatar Nov 14 '21 12:11 uhyo