Allow implicit React import?

Since JSX-Transform, I have not used to importing React explicitly in my codebases. I want to treat the same with my code blocks i.e. I want to configure so that React is imported implicitly in my tsx code blocks.

Currently, I think best I can do is to cut imports like,

import React from 'react'
// ---cut---

But I don’t think it’s the best option. Or am I missing something?

[orta]

Sure, at a guess we need two things, a way to disable the magic and some magic.

First disabling the magic: extend TwoslashShikiOptions in shiki-twoslash to have a new property, I don’t have time to think the name through right now, but lets just call it ‘dontAddImplicitGlobals’. Any of this work needs to be able to be turned off.

Second:

• check if // @allowUmdGlobalAccess works fine in a normal jsx/tsx file with React code - if it does then we really just need to jam that in on line one at shiki-twoslash level before passing that code into shiki - so somewhere in runTwoSlash before we call twoslash. It’ll get removed automatically and we don’t have to think about it at different levels.

• If it does not work. I think we need a way to pass code in and then ignore it on the way out. That could be something like adding support for an inline version of ‘cut’:

  import React from "react" // --- cut
  

  Where twoslash would see it on the way in, but not pass it back out - this would need to happen over in the TS website. Then shiki-twoslash’s job would be to add a prefix of that import in react files with the cut comment line specifically removed.

[frencojobs]

Hi @orta, I implemented a less busier solution by combining all the cuts before passing the code to twoslasher. Because otherwise, to implement inline cut comments requires the need to shift the metadata positions after cutting all theese lines, which I think is overkill just for this feature.