"native" attribute fails TypeScript type check

[kmxz]

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>'.

[webyom]

@kmxz use data-native instead.

[kmxz]

@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.

[firatsarlar]

369

[martinrue]

@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.

[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.

[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.

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.

[firatsarlar]

@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 ...

[lujjjh]

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

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