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 <[email protected]>

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

docs/jsx.md

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

Did you forget to push this? Also, don't forget to update the TOC.

docs/jsx.md

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.

I do agree with that change but not with your last addition ("You'll see what we mean after reading this section. It's not simple to work around TypeScript's missing feature here").
The actual workaround are only 3 lines of code and its usage is almost identical to normal closure components. I have been working with it for a while now and find it a lot more convenient than using class components.

We might also want to point out that class compoments dont fully work in TSX either (attribute inspection is broken).

I do agree with that change but not with your last addition ("You'll see what we mean after reading this section. It's not simple to work around TypeScript's missing feature here").

The actual workaround are only 3 lines of code and its usage is almost identical to normal closure components. I have been working with it for a while now and find it a lot more convenient than using class components.

That's fair. I'd need some more time to think about it. How does ripping out this entire block quote and filing a follow-up issue in this repo sound?

We might also want to point out that class compoments dont fully work in TSX either (attribute inspection is broken).

Good catch. Honestly, I'm convinced the attribute inspection problem may be more of an issue with the current types. Might be better to just file a tracking issue in Mithril core about this. (I've almost moved the types back into Mithril core I don't know how many times by now, because it's just easier to make sure it tracks changes correctly here.)

And if we integrate that here, we could look into what's truly necessary to make Mithril play nice with TypeScript. (I'm leaning towards maybe a @m.component decorator that just magically fixes up all the types. JS can continue to be free-form, and TS users can benefit from the static annotation.)

docs/jsx.md

Co-authored-by: Claudia Meadows <[email protected]>

JodliDev · 2025-08-13T07:35:09Z

I completed another round of reworks. I bundled some of the changes into single commits since there would have been a lot of small ones. I also tried to leave comments, that you might have opinions about, unresolved.

dead-claudia

Aside from that discussion, I noticed you missed some stuff from the previous review.

dead-claudia · 2025-08-14T19:49:20Z

docs/jsx.md

+
+This setup should be enough to get most JSX functionality working.
+
+#### Using closure components in TSX


In accordance with previous feedback

Suggested change

#### Using closure components in TSX

#### Using closure components in TypeScript with JSX

dead-claudia · 2025-08-14T19:50:16Z

docs/jsx.md

-   [Setup](#setup)
+-   [Setup JSX](#setup-jsx)
 -   [Production build](#production-build)
 -   [Using Babel with Webpack](#using-babel-with-webpack)
+-   [Setup TSX](#setup-tsx-jsx-in-typescript)
+-   [Using Closure Components in TSX](#using-closure-components-in-tsx)


You forgot to update the TOC to reflect the new titles.

dead-claudia · 2025-08-14T19:53:15Z

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


I do agree with that change but not with your last addition ("You'll see what we mean after reading this section. It's not simple to work around TypeScript's missing feature here").

The actual workaround are only 3 lines of code and its usage is almost identical to normal closure components. I have been working with it for a while now and find it a lot more convenient than using class components.

That's fair. I'd need some more time to think about it. How does ripping out this entire block quote and filing a follow-up issue in this repo sound?

We might also want to point out that class compoments dont fully work in TSX either (attribute inspection is broken).

Good catch. Honestly, I'm convinced the attribute inspection problem may be more of an issue with the current types. Might be better to just file a tracking issue in Mithril core about this. (I've almost moved the types back into Mithril core I don't know how many times by now, because it's just easier to make sure it tracks changes correctly here.)

And if we integrate that here, we could look into what's truly necessary to make Mithril play nice with TypeScript. (I'm leaning towards maybe a @m.component decorator that just magically fixes up all the types. JS can continue to be free-form, and TS users can benefit from the static annotation.)

dead-claudia · 2025-08-14T20:08:11Z

docs/jsx.md

+interface Attributes {
+  greet: string
+}
+function ChildComponent(vNode: Vnode<Attributes>): m.Component<Attributes> {
+  return {
+    view: () => <div>{vNode.attrs.greet}</div>
+  };
+}
+
+function ParentComponent() {
+  return {
+    view: () => <div>
+      <ChildComponent greet="Hello World"/>
+    </div>
+  };
+}


As requested in the previous review.

Suggested change

interface Attributes {

greet: string

}

function ChildComponent(vNode: Vnode<Attributes>): m.Component<Attributes> {

return {

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

};

}

function ParentComponent() {

return {

view: () => <div>

<ChildComponent greet="Hello World"/>

</div>

};

}

interface Attributes {

greet: string

}

function ChildComponent(vNode: Vnode<Attributes>): m.Component<Attributes> {

return {

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

}

}

function ParentComponent() {

return {

view: () => <div>

<ChildComponent greet="Hello World"/>

</div>

}

}

dead-claudia · 2025-08-14T20:08:56Z

docs/jsx.md

+interface Attributes {
+  greet: string
+}
+// We slightly altered the definition of `ChildComponent` by using `TsClosureComponent`
+const ChildComponent = TsClosureComponent<Attributes>(vNode => {
+  return {
+    view: () => <div>{vNode.attrs.greet}</div>
+  };
+})
+
+function ParentComponent() {
+  return {
+    view: () => <div>
+      <ChildComponent greet="Hello World"/>
+    </div>
+  };
+}


As requested in the previous review.

Suggested change

interface Attributes {

greet: string

}

// We slightly altered the definition of `ChildComponent` by using `TsClosureComponent`

const ChildComponent = TsClosureComponent<Attributes>(vNode => {

return {

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

};

})

function ParentComponent() {

return {

view: () => <div>

<ChildComponent greet="Hello World"/>

</div>

};

}

interface Attributes {

greet: string

}

// We slightly altered the definition of `ChildComponent` by using `TsClosureComponent`

const ChildComponent = TsClosureComponent<Attributes>(vNode => {

return {

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

}

})

function ParentComponent() {

return {

view: () => <div>

<ChildComponent greet="Hello World"/>

</div>

}

}

dead-claudia · 2025-08-14T20:09:45Z

docs/jsx.md

+function ChildComponentImpl<T>() {
+  // ...
+}
+
+const ChildComponent = TsClosureComponent(ChildComponentImpl);


As requested in the previous review.

Suggested change

function ChildComponentImpl<T>() {

// ...

}

const ChildComponent = TsClosureComponent(ChildComponentImpl);

function ChildComponentImpl<T>() {

// ...

}

const ChildComponent = TsClosureComponent(ChildComponentImpl)

Edit: missed your comment, sorry. Semicolon's still important, though.

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 <[email protected]>

Fix TsClosureComponent

58f5601

Co-authored-by: Claudia Meadows <[email protected]>

Improve introduction to TSX

e7505e6

Co-authored-by: Claudia Meadows <[email protected]>

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

JodliDev and others added 12 commits August 13, 2025 08:39

Grammar nit

dd5a169

Co-authored-by: Claudia Meadows <[email protected]>

Rewording

07ea4f3

Co-authored-by: Claudia Meadows <[email protected]>

hyperscript clarification

bef2403

Co-authored-by: Claudia Meadows <[email protected]>

Improve wording in React section

d77bb64

Co-authored-by: Claudia Meadows <[email protected]>

Fix faulty syntax

18c8d03

Co-authored-by: Claudia Meadows <[email protected]>

Improve readability in code example

1b34947

Co-authored-by: Claudia Meadows <[email protected]>

Fix error message example

b26bd4a

Co-authored-by: Claudia Meadows <[email protected]>

Shorten code format

be73195

Co-authored-by: Claudia Meadows <[email protected]>

Shorten code format

84b6c46

Co-authored-by: Claudia Meadows <[email protected]>

Fix wording in React section

039d85f

Co-authored-by: Claudia Meadows <[email protected]>

Fix wording in React section 2

3c5e9e8

Co-authored-by: Claudia Meadows <[email protected]>

Fix issues in TSX section.

1f0e45d

Co-authored-by: Claudia Meadows <[email protected]>

dead-claudia requested changes Aug 14, 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)

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


		This setup should be enough to get most JSX functionality working.

		#### Using closure components in TSX

	#### Using closure components in TSX
	#### Using closure components in TypeScript with 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!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dead-claudia Aug 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JodliDev Aug 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

JodliDev commented Aug 13, 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!

dead-claudia Aug 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

dead-claudia Aug 14, 2025 •

edited

Loading

JodliDev Aug 13, 2025 •

edited

Loading

dead-claudia Aug 14, 2025 •

edited

Loading