feat(compilers): set typescript option { jsx: 'react-jsx' }

live-codes · Jan 21, 2024 · e46450d · e46450d
1 parent 6daace7
commit e46450d
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 10 deletions.
diff --git a/src/livecodes/languages/jsx/jsx-runtime.ts b/src/livecodes/languages/jsx/jsx-runtime.ts
@@ -1,9 +1,9 @@
 export const reactRuntime = `
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createRoot } from "react-dom/client";
 import App from './script';
 const root = createRoot(document.querySelector("#livecodes-app") || document.body.appendChild(document.createElement('div')));
-root.render(React.createElement(App, null));
+root.render(_jsx(App, {}));
 `;
 
 export const hasCustomJsxRuntime = (code: string) => new RegExp(/\/\*\*[\s\*]*@jsx\s/g).test(code);

diff --git a/src/livecodes/languages/typescript/lang-typescript.ts b/src/livecodes/languages/typescript/lang-typescript.ts
@@ -7,7 +7,7 @@ import { hasCustomJsxRuntime } from '../jsx/jsx-runtime';
 
 export const typescriptOptions = {
   target: 'es2015',
-  jsx: 'react',
+  jsx: 'react-jsx',
   allowUmdGlobalAccess: true,
   esModuleInterop: true,
 };
@@ -24,16 +24,13 @@ export const typescript: LanguageSpecs = {
     url: typescriptUrl,
     factory:
       () =>
-      async (code, { config }) => {
-        if (['jsx', 'tsx'].includes(config.script.language) && !hasCustomJsxRuntime(code)) {
-          code = `import React from 'react';\n${code}`;
-        }
-        return (window as any).ts.transpile(code, {
+      async (code, { config }) =>
+        (window as any).ts.transpile(code, {
           ...typescriptOptions,
+          ...(hasCustomJsxRuntime(code) ? { jsx: 'react' } : {}),
           ...getLanguageCustomSettings('typescript', config),
           ...getLanguageCustomSettings(config.script.language, config),
-        });
-      },
+        }),
   },
   extensions: ['ts', 'typescript'],
   editor: 'script',