Add section for TSX #36

JodliDev · 2025-07-16T12:24:57Z

I have read https://mithril.js.org/contributing.html

Description

This change adds a new section that describes the setup of TSX (JSX for Typescript) including some additional configurations that should solve all (most?) problems with TSX.

Motivation and Context

There is no official documentation on how to set up JSX in Typescript and other resources often target outdated versions of MithrilJS. There are also a few pitfals that are not trivial to solve.
I wrote up what I have found and implemented for myself. Hopefully this is usefull (and wanted) in the documentation as well :)

dead-claudia

Sorry for the delay. It took about an hour for me to go through this PR, because of all the feedback needed on it.

I do appreciate the effort. And I've been through worse early in my time with open source, so I completely understand how it may feel to be suddenly blasted with large amounts of feedback like that.

docs/jsx.md

dead-claudia · 2025-08-09T04:58:50Z

docs/jsx.md


-The simplest way to use JSX is via a [Babel](https://babeljs.io/) plugin.
+When using JavaScript, the simplest way to use JSX is via a [Babel](https://babeljs.io/) plugin. When using using [TypeScript](https://www.typescriptlang.org/) follow the [instructions below](#setup-tsx-jsx-in-typescript)


Let's move the "when using TypeScript" to the next section.

Suggested change

When using JavaScript, the simplest way to use JSX is via a [Babel](https://babeljs.io/) plugin. When using using [TypeScript](https://www.typescriptlang.org/) follow the [instructions below](#setup-tsx-jsx-in-typescript)

When using JavaScript, the simplest way to use JSX is via a [Babel](https://babeljs.io/) plugin.

I shortened it. But I do think its wise to link to TSX in this secion. A lot of times the term "JSX" is used for "TSX" interchangably (so is "JavaScript" for "TypeScript") and TypeScript users might stumble over this section and follow the wrong instructions. Tell me if you find that unnecessary and I should fully remove it

docs/jsx.md

Co-authored-by: Claudia Meadows <contact@claudiameadows.dev>

JodliDev · 2025-08-09T10:16:28Z

I incorporated your suggestions. Let me know if you notice other problems / improvements.

No worries about the amount of feedback. I do apreciate you being thorough :)

dead-claudia

In addition to the other comments, we avoid unnecessary semicolons in the docs in the same way we do in core. I decided it was better to raise it here than to just spam even more comments (it's already over 20 for this one review).

dead-claudia · 2025-08-11T18:15:45Z

docs/jsx.md


-The simplest way to use JSX is via a [Babel](https://babeljs.io/) plugin.
+When using JavaScript, the simplest way to use JSX is via a [Babel](https://babeljs.io/) plugin. (For TypeScript follow the [instructions below](#setup-tsx-jsx-in-typescript)).


Grammar nit

Suggested change

When using JavaScript, the simplest way to use JSX is via a [Babel](https://babeljs.io/) plugin. (For TypeScript follow the [instructions below](#setup-tsx-jsx-in-typescript)).

When using JavaScript, the simplest way to use JSX is via a [Babel](https://babeljs.io/) plugin. (For TypeScript, follow the [instructions below](#setup-tsx-jsx-in-typescript).)

dead-claudia · 2025-08-11T18:18:05Z

docs/jsx.md

@@ -58,9 +60,9 @@ m.render(document.body, <MyComponent />)

 ---

-### Setup
+### Setup JSX


The TypeScript docs call it JSX, so I'd prefer to stick with that idiom for both.

Suggested change

### Setup JSX

### Setup for JavaScript

dead-claudia · 2025-08-11T18:20:24Z

docs/jsx.md

+### Setup TSX (JSX in TypeScript)
+
+When using [TypeScript](https://www.typescriptlang.org/), all you need to do is tell TypeScript how to handle JSX code correctly. Since TypeScript can transpile JSX and TSX on its own, you don't need any other tools like Babel to do it for you. (More information can be found about JSX in TypeScript [here](https://www.typescriptlang.org/docs/handbook/jsx.html).)


See earlier regarding TypeScript and JSX. Also, in your parenthetical, it's pretty obvious from context we're talking about JSX in TypeScript, so we don't need to repeat ourselves there.

Suggested change

### Setup TSX (JSX in TypeScript)

When using [TypeScript](https://www.typescriptlang.org/), all you need to do is tell TypeScript how to handle JSX code correctly. Since TypeScript can transpile JSX and TSX on its own, you don't need any other tools like Babel to do it for you. (More information can be found about JSX in TypeScript [here](https://www.typescriptlang.org/docs/handbook/jsx.html).)

### Setup for TypeScript

When using [TypeScript](https://www.typescriptlang.org/), all you need to do is tell TypeScript how to handle JSX code correctly. Since TypeScript can transpile JSX on its own, you don't need any other tools like Babel to do it for you. (More information can be found [here](https://www.typescriptlang.org/docs/handbook/jsx.html).)

dead-claudia · 2025-08-11T18:31:20Z

docs/jsx.md

+This setup should be enough to get most JSX functionality working.
+
+#### Using closure components in TSX
+>Because of https://github.com/microsoft/TypeScript/issues/21699, we advise against using [closure components](components.md#closure-component-state) in TypeScript for now. Either use [class components](components.md#class-component-state) without attribute inspection or Hyperscript instead (see the list of alternatives below the code example).


Suggestion to clean this up and elaborate on the recommendation better. Also, we usually keep spaces after Markdown block-level syntax like > and #, and this suggestiin factors that in.

If there's anything you feel is unclear or you disagree with, feel free to comment here on it.

Suggested change

>Because of https://github.com/microsoft/TypeScript/issues/21699, we advise against using [closure components](components.md#closure-component-state) in TypeScript for now. Either use [class components](components.md#class-component-state) without attribute inspection or Hyperscript instead (see the list of alternatives below the code example).

> Because [TypeScript does not, at the time of writing, allow customizing the type used to check JSX component validity](https://github.com/microsoft/TypeScript/issues/21699), we recommend you avoid using [closure components](components.md#closure-component-state) as JSX component names in TypeScript for now. Either use [class components](components.md#class-component-state) exclusively or use [hyperscript](hyperscript.md) to construct them.

>

> You'll see what we mean after reading this section. It's not simple to work around TypeScript's missing feature here.

dead-claudia · 2025-08-11T18:33:05Z

docs/jsx.md

+```
+
+There are several options to circumvent that problem:
+1. Instead of `<div><ChildComponent greet="Hello World"/></div>`, use `<div>{m(ChildComponent, {greet: "Hello World"})}</div>` instead.


Suggestion to clarify this a bit better.

Suggested change

1. Instead of `<div><ChildComponent greet="Hello World"/></div>`, use `<div>{m(ChildComponent, {greet: "Hello World"})}</div>` instead.

1. Instead of `<div><ChildComponent greet="Hello World"/></div>`, use [hyperscript](hyperscript.md) instead: `<div>{m(ChildComponent, {greet: "Hello World"})}</div>`.

dead-claudia · 2025-08-11T19:18:35Z

docs/jsx.md

+}
+function ChildComponent(vNode: Vnode<Attributes>): m.Component<Attributes> {
+  return {
+    view: <div>{vNode.attrs.greet}</div>


Suggested change

view: <div>{vNode.attrs.greet}</div>

view: () => <div>{vNode.attrs.greet}</div>

dead-claudia · 2025-08-11T19:19:42Z

docs/jsx.md

+
+function ParentComponent() {
+  return {
+    view: () => <div><ChildComponent greet="Hello World"/></div>


Same readability fix.

Suggested change

view: () => <div><ChildComponent greet="Hello World"/></div>

view: () => <div>

<ChildComponent greet="Hello World"/>

</div>

dead-claudia · 2025-08-11T19:29:32Z

docs/jsx.md

+
+```
+TS2739: Type { greet: string; } is missing the following properties from type Vnode<{}, {}>: tag, attrs, state
+TS2786: LoadingSpinner cannot be used as a JSX component.


Suggested change

TS2786: LoadingSpinner cannot be used as a JSX component.

TS2786: ChildComponent cannot be used as a JSX component.

dead-claudia · 2025-08-11T19:30:12Z

docs/jsx.md

+
+For example, if you try to compile this code:
+
+```typescript jsx


Suggested change

```typescript jsx

```tsx

dead-claudia · 2025-08-11T19:31:12Z

docs/jsx.md

+
+The following code will work without errors:
+
+```typescript jsx


Suggested change

```typescript jsx

```tsx

Add section for TSX

9f77526

dead-claudia requested changes Aug 9, 2025

View reviewed changes

JodliDev and others added 8 commits August 9, 2025 11:50

Improve closure compiler example

5f041de

Co-authored-by: Claudia Meadows <contact@claudiameadows.dev>

Fix TsClosureComponent

58f5601

Co-authored-by: Claudia Meadows <contact@claudiameadows.dev>

Improve introduction to TSX

e7505e6

Co-authored-by: Claudia Meadows <contact@claudiameadows.dev>

Remove section Enabling Fragments since it is unnecessary.

ac6ab35

Shorten referral to Typescript

0ddb5a6

Simplify introduction to closure components in TSX

5545b6e

Replace Mithril with Mithril.js

3be690c

Improve code example for closure component

cfb5f34

Improve wording in closure component introduction

3fc4e23

dead-claudia requested changes Aug 11, 2025

View reviewed changes


		The simplest way to use JSX is via a [Babel](https://babeljs.io/) plugin.
		When using JavaScript, the simplest way to use JSX is via a [Babel](https://babeljs.io/) plugin. When using using [TypeScript](https://www.typescriptlang.org/) follow the [instructions below](#setup-tsx-jsx-in-typescript)

		### Setup TSX (JSX in TypeScript)

		When using [TypeScript](https://www.typescriptlang.org/), all you need to do is tell TypeScript how to handle JSX code correctly. Since TypeScript can transpile JSX and TSX on its own, you don't need any other tools like Babel to do it for you. (More information can be found about JSX in TypeScript [here](https://www.typescriptlang.org/docs/handbook/jsx.html).)

->Because of https://github.com/microsoft/TypeScript/issues/21699, we advise against using [closure components](components.md#closure-component-state) in TypeScript for now. Either use [class components](components.md#class-component-state) without attribute inspection or Hyperscript instead (see the list of alternatives below the code example).
+> Because [TypeScript does not, at the time of writing, allow customizing the type used to check JSX component validity](https://github.com/microsoft/TypeScript/issues/21699), we recommend you avoid using [closure components](components.md#closure-component-state) as JSX component names in TypeScript for now. Either use [class components](components.md#class-component-state) exclusively or use [hyperscript](hyperscript.md) to construct them.
+>
+> You'll see what we mean after reading this section. It's not simple to work around TypeScript's missing feature here.

	1. Instead of `<div><ChildComponent greet="Hello World"/></div>`, use `<div>{m(ChildComponent, {greet: "Hello World"})}</div>` instead.
	1. Instead of `<div><ChildComponent greet="Hello World"/></div>`, use [hyperscript](hyperscript.md) instead: `<div>{m(ChildComponent, {greet: "Hello World"})}</div>`.

	view: <div>{vNode.attrs.greet}</div>
	view: () => <div>{vNode.attrs.greet}</div>

	TS2786: LoadingSpinner cannot be used as a JSX component.
	TS2786: ChildComponent cannot be used as a JSX component.


		For example, if you try to compile this code:

		```typescript jsx


		The following code will work without errors:

		```typescript jsx

Uh oh!

Add section for TSX #36

Are you sure you want to change the base?

Add section for TSX #36

Uh oh!

Conversation

JodliDev commented Jul 16, 2025

Description

Motivation and Context

Uh oh!

dead-claudia left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

JodliDev commented Aug 9, 2025

Uh oh!

dead-claudia left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!