Improve TypeScript types for JSX about dom-chef

[fregante]

If we move the types here, it may be worth it listing all the element types inside IntrinsicElements and that might allow us to type them correctly. It's not like new elements pop out every day so it as long as we can at least partially reuse React's we're good

[nickytonline]

It appears to be correct based on the spec here, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td

colspan
This attribute contains a non-negative integer value that indicates for how
many columns the cell extends. Its default value is 1. Values higher than 1000
will be considered as incorrect and will be set to the default value (1).

But in practice colspan="5" has always worked in HTML.

[fregante]

v5 is live thanks to @TheRealSyler!

[nickytonline]

Pulled this out of globals.d.ts from Refined GitHub to leave as a TODO for this issue.

// TODO: add support for `class` in JSX
// The following code works if it's inside the file with JSX, but here it breaks all JSX definitions.
// The `namespace JSX`  merges fine because in react's types it's `global`, but `namespace React` isn't
//
// import React from 'dom-chef';
// declare global {
// 	namespace React {
// 		interface DOMAttributes<T> {
// 			class?: string;
// 		}
// 	}
// }

[fregante]

Also weird edge case to fix, either here or in @types/react:

<td colspan="5">
// TS2322: Type '{ children: Element; colspan: string; }' is not assignable to type 'DetailedHTMLProps<TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>'.
//   Property 'colspan' does not exist on type 'DetailedHTMLProps<TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>'.

<td colSpan="5">
// TS2322: Type 'string' is not assignable to type 'number | undefined'.

<td colSpan={5}>
// fine...

Workaround: sindresorhus/hide-files-on-github@6bd22ba

declare namespace JSX {
	interface Element extends SVGElement, HTMLElement, DocumentFragment {}
	type TdIntrinsicElement = IntrinsicElements['td'];
	interface IntrinsicElements {
		'td': TdIntrinsicElement & {colspan?: string};
	}
}

[fregante]

Indeed, then maybe colSpan={5} isn't too bad. It just looks weird but technically correct.

[jtbandes]

I recently tried to combine usage of dom-chef and React in the same project (some files would use dom-chef, and some would use React). I have custom JSX types for dom-chef (see #54 (comment)), but when I install @types/react it's automatically included and it seems like the TS compiler doesn't allow specifying which JSX types will be used — I get "duplicate identifier" errors in my custom JSX.d.ts.

However, I noticed that refined-github somehow uses @types/react and modifies the types here: https://github.com/sindresorhus/refined-github/blob/0f0fe746be058510455be1bb3ae1c1d78fea6154/source/globals.d.ts#L47-L65

Can you explain how that works without introducing conflicts like "duplicate identifier"?

[fregante]

It’s hard to understand what the problem is without seeing your JSX.d.ts

At some point we’ll merge #62 and that should make it easier

[jtbandes]

Thanks, #62 looks great. When that is merged, will it be possible to use dom-chef and React in the same repo (different files though)?

My question above was more about how the JSX types override in refined-github works. I tried copying this into my project and I got "duplicate identifier" errors, just wanted to know if I was missing something. I couldn't find any TypeScript docs that explain how it works when you have multiple declare globals overriding each other.

[fregante]

I think you can only use that in your global.d.ts making sure it's not read as a "module", i.e. it can't have any import/export

[fregante]

I think this will be closed by #62. Review that PR before it's merged as v5