Is m.Fragment going to be added in future version?

[idlist]

I'm currently using Mithril in jsx syntax and using the solution in #2660. Is the m.Fragment going to be added in the further version of Mithril, or as the solution works, it would not be added?

The consideration is that this issue is a certain to be met when using Mithril with jsx and esbuild (or other tools using esbuild like Vite). Although the first item of Googleing "mithril esbuild" would be #2660 so that finding the solution is not that hard. 🤔

Mithril version: 2.0.4

Browser and OS: Edge, Windows 10

Code

Currently I'm using the solution like:

Create a file named fragment-polyfill.js (although it is not really a polyfill)

import m from 'mithril'

m.Fragment = {
  view(vnode) {
    return vnode.children
  }
}

and in the first few lines of index.js, add

import './components/fragment-polyfix'

and in vite.config.js, add

const config = {
  // other configs...
  esbuild: {
    jsxFactory: 'm',
    jsxFragment: 'm.Fragment'
  }
}

[dead-claudia]

@idlist Can you not do jsxFragment: '"["'? That's how you'd set Babel up.

[idlist]

@idlist Can you not do jsxFragment: '"["'? That's how you'd set Babel up.

I tried setting jsxFragment to '"["' from your advice, but it seems to be invalid.

The modified configuration is like:

const config = {
  // other options
  esbuild: {
    jsxFactory: 'm',
    jsxFragment: '"["'
  }
}

and Vite would throw this error:

Plugin: vite:esbuild
  File: I:/dev/idlist.github.io/index.jsx
  
  Invalid JSX fragment: "\"[\""
  
      at failureErrorWithLog (I:\dev\idlist.github.io\node_modules\esbuild\lib\main.js:1224:15)
      at I:\dev\idlist.github.io\node_modules\esbuild\lib\main.js:1072:33
      at I:\dev\idlist.github.io\node_modules\esbuild\lib\main.js:568:9
      at handleIncomingPacket (I:\dev\idlist.github.io\node_modules\esbuild\lib\main.js:657:9)
      at Socket.readFromStdout (I:\dev\idlist.github.io\node_modules\esbuild\lib\main.js:535:7)
      at Socket.emit (events.js:315:20)
      at addChunk (_stream_readable.js:309:12)
      at readableAddChunk (_stream_readable.js:284:9)
      at Socket.Readable.push (_stream_readable.js:223:10)
      at Pipe.onStreamRead (internal/stream_base_commons.js:188:23)

esbuild seems to be the source of this issue (as discussed in #2660). I searched for a while for the possible difference in transpiling between babel and esbuild, but it seems to be no difference...

[idlist]

Tried for some possible m.Fragments and finally this works as well:

// fragment-polyfix.js

m.Fragment = '['

Other similar ways are also available, just simply defining a variable valued '[' and setting the variable as jsxFragment would work. The convenient ways are to add a property like Fragment to m or to auto-inject a line Fragment = '[' so that I do not need to add Fragment = '[' in every necessary files one by one.

So I guess the only reason for '"["' not working is that the jsxFragment of esbuild simply treat its value as a variable name and it does not support setting a constant string to it (like with a "" grammar in babel).

In conclusion, this is not a problem of Mithril itself, and as I said in the beginning, it's okay if Mithril does not provide a m.Fragment at the end, since it might not be in the philosophy of Mithril and there are simple solutions to it. But having a consideration on it is still valuable, in my opinion.

Edit: I tried to open an issue under esbuild to see if they can add support of setting constant string to jsxFragment option.

[idlist]

Since esbuild has added support to set literal string to jsxFragment in its newer version, I would like to close the issue for now. However, since there may still be other tools that support jsx but do not support jsxFragment (or other similar config) as a string, I would like to create new issues or re-open this one when I encounter them.