preact-router icon indicating copy to clipboard operation
preact-router copied to clipboard

"native" attribute fails TypeScript type check

Open kmxz opened this issue 5 years ago • 8 comments

When I follow the doc to use <a href="/foo" native>Foo</a> to let the browser perform routing on its own, the code generates an error during TypeScript compilation: Property 'native' does not exist on type 'HTMLAttributes<HTMLAnchorElement>'.

kmxz avatar Dec 25 '19 08:12 kmxz

@kmxz use data-native instead.

webyom avatar Feb 06 '20 03:02 webyom

@kmxz use data-native instead.

From what I see in https://github.com/preactjs/preact-router/blob/61671b38fd5e371e886a6b33db2c66df7a6444db/src/index.js#L116, only the attribute native is being checked. data-native won't work.

kmxz avatar Feb 06 '20 05:02 kmxz

#369

firatsarlar avatar Jun 13 '20 06:06 firatsarlar

@kmxz

I'm currently working around the issue by extending the PreactDOMAttributes interface. I created a preact.d.ts file (doesn't matter where) with the following:

import "preact";

declare module "preact" {
  interface PreactDOMAttributes {
    native?: boolean;
  }
}

Not the best solution, but moves the problem out of the way until the built-in types are updated.

martinrue avatar Jun 14 '20 12:06 martinrue

@martinrue What about submitting a PR for that here? We already have an index.d.ts file that specifies the types for preact-router in this repo.

marvinhagemeister avatar Jun 14 '20 12:06 marvinhagemeister

@martinrue What about submitting a PR for that here? We already have an index.d.ts file that specifies the types for preact-router in this repo.

Just sharing the workaround I'm using currently, but not sure it's the correct solution beyond a quick fix. For example, there's currently a PR to change the prop to another name to avoid the non-standard issue all together.

martinrue avatar Jun 14 '20 15:06 martinrue

@martinrue , I've tested your solution, but something should missing , only dts. file you provided is not enough. I'm still getting same error. is there anything else should be done to make this work ? tsconfig , etc ...

firatsarlar avatar Jul 27 '20 09:07 firatsarlar

My workaround before #369 is merged is to use the spread syntax:

<a href="/foo/" {...{ native: "" }}>foo</a>

lujjjh avatar Mar 09 '21 05:03 lujjjh