TypeScript support in Live Editor?

[hhimanshu]

Hello,

I tried using TypeScript code and it does not seem to work

() => {
  const person: {name: string} = {name: "Sam"}
  return <h3>
    So functional. Much wow!
  </h3>
}

Is it possible to use typescript today? or are there any plans to bringing it to life? Thanks

[zzkkui]

I have the same problem with tsx，I think the language props does not work

[elvorad]

It seems that react-live does not support TypeScript. I found two answers by @kitten to similar requests:

This project uses buble and thus doesn't support Typescript.

I don't think it'll ever support it as it's kind of unrealistic to maintain typings and a Typescript transpiler (if that exists in a similar browser-ready form) for a live-editing app.

Source: https://github.com/FormidableLabs/react-live/issues/45#issuecomment-341418725

There are currently no plans to modify react-live to make it adaptable to different transpilers or compilers apart from Buble. Although that has been discussed before, we then decided against it as as it stands react-live is a simple solution to a small problem, but not a full adapter library for live-sandboxes :)

Source: https://github.com/FormidableLabs/react-live/issues/203#issuecomment-630462806

[ntucker]

https://www.typescriptlang.org/dev/sandbox/ let's you do this today - unfortunately it doesn't bind into react so it's a bit of work getting it setup

[tcd]

One thing you can do as a quick and dirty solution is strip the TypeScript syntax out with transformCode. Your mileage may vary. Here's an example:

import { createRoot } from "react-dom/client"
import {
    LiveProvider,
    LiveEditor,
    LiveError,
    LivePreview,
} from "react-live"

const cleanCode = (code: string): string => {
    return `${code}` // don't modify the original value
        .replaceAll(/^import \{[^{]+\} from .+$\n/gm, "") // import { x, y } from "z"
        .replaceAll(/^import \* as \S+ from .+$\n/gm, "") // import * as abc from "z"
        .replaceAll(/: \S+ = /g, " = ")                   // let a: string = "something"
}

const code = `
const Demo: React.FC = () => (
    <h3>
        So functional.  Much wow!
    </h3>
)
render(<Demo />)
`.trim()

export const Example = () => (
    <LiveProvider
        noInline
        code={code}
        transformCode={cleanCode}
    >
        <LiveEditor />
        <LiveError />
        <LivePreview />
    </LiveProvider>
)

const container = document.getElementById("root")
const root = createRoot(container)
root.render(<Example />)

[ntucker]

Yeah, I currently do the transform using the TypeScript library itself (see https://github.com/data-client/rest-hooks/blob/master/website/src/components/Playground/typescriptTransform.ts#L4).

This works to have it read typescript, but unfortunately doesn't give any of the benefits like seeing what the types are on hover, or doing type-ahead.

[ntucker]

Interestingly, sucrase supports typescript now but since react-live doesn't allow us to configure the options at all, we cannot take advantage of this.