Wouter isn't compatible with TypeScript and Preact at the same time

[Hubro]

Wouter can't be used with TypeScript and Preact at the same time.

If you install @types/wouter, that also installs @types/react, which conflicts with and breaks type definitions for preact.

It (probably) works if you use preact-compat, but at that point you're not really "compatible with preact" in my opinion.

A possible fix would be to push an alternative @types/wouter-preact that worked with Preact's type definitions.

CC @StrayFromThePath - Thought this would be relevant for you.

[Ty3uK]

@Hubro I've already creating PR to DefinitelyTyped with types for wouter/preact module. Stay tuned!

[Ty3uK]

Also, @molefrog, maybe we can move typings inside this repo?

[molefrog]

Thanks @Ty3uK, appreciate the help!

maybe we can move typings inside this repo?

I'm not super proficient in typings, but aren't they supposed to live in DefinitelyTyped repo? What I mean is if we had typings inside of the repo, we would still need to copy these files to DT in a PR whenever we want to update types, right?

I think I read somewhere that unless your project is written in TS, you shouldn't put types next to our source files (not 100% sure).

[molefrog]

@Ty3uK Here is what other projects do: they have a separate repo with types, which they sync with DT on every release. I don't mind having that at all!
https://github.com/pixijs/pixi-typescript

This repository contains the most recent version of the declarations for pixi.js and follows the v4.x branch with periodical Releases which are supposed to match pixi releases by the core team.

[Ty3uK]

@molefrog as I know, recommended approach is store TypeScript typings with source code or generate them from Flow typings with prepublish hook.

Also, there is a quote from DefinitelyTyped:

If you are the library author and your package is written in TypeScript, bundle the autogenerated declaration files in your package instead of publishing to Definitely Typed.

[molefrog]

Alright, the quote says:

If you are the library author and your package is written in TypeScript

which isn't the case, right? I'm confused sorry 😕

[Ty3uK]

https://github.com/pixijs/pixi-typescript

Also there:

Note This repository is not intended for v5.x which ships with its own generated declarations.

Prior to version 5.0 of PixiJS, there were no native types, so the community had to create a separate repository

[Ty3uK]

which isn't the case, right? I'm confused sorry

My bad, sorry

[Hubro]

Yeah, my understanding is that DefinitelyTyped is a collection of typings for libraries that lack type information. If you can ship up-to-date typescript typings with your repository, that is definitely preferred.

[molefrog]

@Hubro @Ty3uK Got it. So would the following file structure work?

• index.js
• ... other source files
• index.d.ts
• preact/
  • index.js
  • ...
  • index.d.ts

Is there a special constraint on file names? Would it automatically fetch types if I just do import ... from "wouter" in my ts?

[SolarLiner]

Just tested by creating preact/index.d.ts inside the wouter folder in node_modules (on a personal project) - and it works. I've borrowed the contents from the top-level definitions, replacing with Preact imports instead. Here it is:

import { ComponentType, FunctionComponent, VNode, ComponentChildren, AnyComponent } from "preact";

export type Params = { [paramName: string]: string } | null;
export type Path = string;
export type PushCallback = (to: string) => void;
export type LocationTuple = [Path, PushCallback];
export type Match = [boolean, Params];
export type MatcherFn = (pattern: string, path: Path) => Match;

export interface RouteProps {
	children?: ((params: Params) => VNode) | VNode;
	path: Path;
	component?: ComponentType<any>;
	match?: boolean;
}
export const Route: FunctionComponent<RouteProps>;

export interface LinkProps {
	to?: string;
	href?: string;
	children: ComponentChildren;
	onClick?: () => void;
}
export const Link: FunctionComponent<LinkProps>;

export interface RedirectProps {
	to?: string;
	href?: string;
}
export const Redirect: FunctionComponent<RedirectProps>;

export interface SwitchProps {
	location?: string;
	children: Array<AnyComponent<RouteProps>>;
}
export const Switch: FunctionComponent<SwitchProps>;

export interface RouterProps {
	hook: () => LocationTuple;
	matcher: MatcherFn;
}
export const Router: FunctionComponent<
	Partial<RouterProps> & {
		children: ComponentChildren;
	}
>;

export function useRouter(): RouterProps;

export function useRoute(pattern: string): Match;

export function useLocation(): LocationTuple;

(EDIT: For some reason VS Code didn't register my copy command, pasted the original type definition... 🤨)

[Hubro]

@Hubro @Ty3uK Got it. So would the following file structure work?

• index.js

• ... other source files

• index.d.ts

• preact/

  • index.js
  • ...
  • index.d.ts

Is there a special constraint on file names? Would it automatically fetch types if I just do import ... from "wouter" in my ts?

@molefrog Yeah, I believe you just make a .d.ts file for every .ts file and you're good. Here's a project for reference: https://github.com/storeon/storeon

[Ty3uK]

I can make PR tomorrow

[molefrog]

Wow, what a team work guys. @Hubro thanks for the reference, I now feel more confident about the structure.

And seems like we gonna have types quite soon 😄

[cedeber]

If the pull request #55 is merged, there will be 2 different package.json (one for wouter and one for wouter/preact) and it should solve this issue. I've added the types property on both so the installation of @types/wouter won’t be necessary anymore for TypeScript.

[Ty3uK]

@cedeber @types/wouter already not necessary since #51

[molefrog]

Hey @Hubro and everyone in the thread,

We have just published a new version of wouter which comes with a standalone Preact package. Just replace wouter with wouter-preact in your package json:

- "wouter": "^2.1.1",
- "@types/wouter": "^2.0.1",
+ "wouter-preact": ^2.2.0"

This package now has proper peer deps and doesn't rely on React anymore. And finally it comes with TS bundled in the package, so no need to use DT.

Hope it works, looking forward for feedback!