Usage in a preact/compat codebase with TypeScript

[nickrttn]

This might not be directly an issue, but I'm looking for some advice.

I'm trying to use this package ([email protected]) in a Next.js codebase set up with preact/compat as detailed in the using-preact example. I've also got TypeScript configured, with the following tsconfig:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext", "ESNext.Intl", "ES2018.Intl"],
    "allowJs": false,
    "skipLibCheck": false,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "typeRoots": ["node_modules/@types", "./src/types"]
  },
  "exclude": ["node_modules", ".next", "out"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"]
}

I haven't followed the advice to add "jsxImportSource": "preact", from the Preact TS docs as that causes hundreds of errors in our codebase. I'm guessing that would be beneficial in a 'pure' Preact codebase, but isn't useful here. (If you can confirm this hunch, that would be great).

Now, the issue here is that, when I try to use <Markup /> in my JSX, I'm getting the following TS error:

'Markup' cannot be used as a JSX component.
  Its instance type 'Markup' is not a valid JSX element.
    Property 'refs' is missing in type 'Markup' but required in type 'ElementClass'.ts(2786)

ElementClass is defined in @types/react, likely because the TS compiler (erroneously) figures that (the return value of) any component used in JSX should extend JSX.ElementClass. I'm by no means a very experienced TS user, so this is a best guess.

Now, I've tried to monkey patch the type of Markup like this by overwriting the keys the TS compiler complains about in my own code:

import BaseMarkup from 'preact-markup';
import { ReactInstance } from 'react';

const Markup = BaseMarkup as typeof BaseMarkup & {
  refs: { [key: string]: ReactInstance };
};

export { Markup };

Unfortunately, that doesn't work either as it doesn't seem to be possible to extend classes like this. Now I could probably just go const Markup = BaseMarkup as any; and call it a day, but I would like to find a way to accurately type this for my codebase, if at all possible so we can keep code completion in our editors. Is it possible to get this typed correctly somehow?

[danielweck]

Hello, you could try what WMR does:

https://github.com/preactjs/wmr/blob/92541eec21a048ab2325acbd4266b87cf0e3c9d9/packages/wmr/types.d.ts#L199-L217

types.d.ts
=>

// Make Preact's JSX the global JSX
declare namespace JSX {
	// @ts-ignore
	interface IntrinsicElements extends preact.JSX.IntrinsicElements {}
	// @ts-ignore
	interface IntrinsicAttributes extends preact.JSX.IntrinsicAttributes {}
	// @ts-ignore
	interface Element extends preact.JSX.Element {}
	// @ts-ignore
	interface ElementClass extends preact.JSX.ElementClass {}
	interface ElementAttributesProperty extends preact.JSX.ElementAttributesProperty {}
	interface ElementChildrenAttribute extends preact.JSX.ElementChildrenAttribute {}
	interface CSSProperties extends preact.JSX.CSSProperties {}
	interface SVGAttributes extends preact.JSX.SVGAttributes {}
	interface PathAttributes extends preact.JSX.PathAttributes {}
	interface TargetedEvent extends preact.JSX.TargetedEvent {}
	interface DOMAttributes<Target extends EventTarget> extends preact.JSX.DOMAttributes<Target> {}
	interface HTMLAttributes<RefType extends EventTarget = EventTarget> extends preact.JSX.HTMLAttributes<RefType> {}
}

[nickrttn]

Hi @danielweck,

Thanks for the response to my issue. I've since moved to a solution implemented with rehype so sadly I can't currently verify that it would work.

Nevertheless, in a preact/compat codebase (where components are typed with @types/react and @types/react-dom) I'm not sure this wouldn't cause type errors. Doesn't the jsxImportSource setting do roughly the same?

[danielweck]

That's a good point, and I must admit using pure Preact myself, so I am not not 100% sure the JSX typing trick works.