Converted React Live codebase to TypeScript

.babelrc

@@ -6,7 +6,8 @@
         "loose": true
       }
     ],
-    "@babel/preset-react"
+    "@babel/preset-typescript",
+    ["@babel/preset-react", { "runtime": "automatic" }]
   ],
   "plugins": [
     "add-module-exports",
@@ -21,4 +22,4 @@
       }
     ]
   ]
-}
+}

.changeset/ninety-boats-sit.md

@@ -0,0 +1,5 @@
+---
+"react-live": major
+---
+
+Migrated codebase to TypeScript.

.eslintrc

@@ -1,14 +1,15 @@
 {
   "root": true,
   "parser": "@babel/eslint-parser",
-  "plugins": ["prettier"],
+  "plugins": ["prettier", "@typescript-eslint"],
   "settings": {
     "react": {
       "version": "detect"
     }
   },
   "extends": [
     "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
     "plugin:import/recommended"
   ],

.github/workflows/code-check.yml

@@ -28,6 +28,9 @@ jobs:
       - name: Test
         run: yarn run test
 
+      - name: Type Check
+        run: yarn run typecheck
+
       - name: Library Build
         run: yarn run build
 

.storybook/.babelrc

@@ -1,11 +1,12 @@
 {
   "presets": [
     "@babel/preset-env",
-    "@babel/preset-react"
+    "@babel/preset-typescript",
+    ["@babel/preset-react", { "runtime": "automatic" }]
   ],
   "plugins": [
     "add-module-exports",
     "@babel/plugin-proposal-object-rest-spread",
     "@babel/plugin-proposal-class-properties"
   ]
-}
+}

.storybook/main.js

@@ -1,6 +1,6 @@
 module.exports = {
   "stories": [
-    "../stories/**/*js"
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
   ],
   "addons": [
     "@storybook/addon-controls",

CHANGELOG.md

@@ -1,5 +1,10 @@
 # React-Live Changelog
 
+## 4.0.0
+
+* Migrated codebase over to TypeScript
+* Added support for TypeScript-based components in the React Live editor
+
 ## 3.2.0
 
 ### Minor Changes

package.json

@@ -3,7 +3,7 @@
   "version": "3.2.0",
   "description": "A production-focused playground for live editing React code",
   "main": "dist/react-live.cjs.js",
-  "typings": "./typings/react-live.d.ts",
+  "types": "dist/index.d.ts",
   "jsnext:main": "dist/react-live.es.js",
   "module": "dist/react-live.es.js",
   "license": "MIT",
@@ -16,6 +16,7 @@
     "prepublishOnly": "npm run build",
     "test": "jest",
     "test:typings": "typings-tester --dir typings",
+    "typecheck": "tsc --noEmit",
     "lint": "eslint --config .eslintrc \"./src/**/*.js\"",
     "install:docs": "yarn --cwd website install",
     "start:docs": "yarn --cwd website start",
@@ -37,17 +38,23 @@
     "@babel/plugin-transform-runtime": "^7.15.0",
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.5",
+    "@babel/preset-typescript": "^7.21.0",
     "@changesets/cli": "^2.26.1",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "@rollup/plugin-replace": "^3.0.0",
+    "@rollup/plugin-typescript": "^11.0.0",
     "@storybook/addon-controls": "^6.4.13",
     "@storybook/builder-webpack5": "^6.5.16",
     "@storybook/manager-webpack5": "^6.5.16",
     "@storybook/react": "^6.4.13",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
-    "@types/react": "^17.0.38",
+    "@types/prismjs": "^1.26.0",
+    "@types/react": "^18.0.31",
+    "@types/styled-components": "^5.1.26",
+    "@typescript-eslint/eslint-plugin": "^5.57.0",
+    "@typescript-eslint/parser": "^5.57.0",
     "babel-jest": "^27.0.6",
     "babel-loader": "^8.2.2",
     "babel-plugin-add-module-exports": "^1.0.4",
@@ -61,15 +68,16 @@
     "prettier": "^2.5.1",
     "prismjs": "^1.26.0",
     "prop-types": "^15.7.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-docgen-typescript": "^2.2.2",
+    "react-dom": "^18.2.0",
     "react-test-renderer": "^17.0.2",
     "rollup": "^2.55.1",
     "rollup-plugin-filesize": "^9.1.1",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-visualizer": "^5.5.4",
     "styled-components": "^4.0.0-beta.8",
-    "typescript": "^2.9.2",
+    "typescript": "^4.9",
     "typings-tester": "^0.3.1",
     "webpack": "^5.76.3"
   },

rollup.config.js

@@ -5,6 +5,7 @@ import { babel } from "@rollup/plugin-babel";
 import { terser } from "rollup-plugin-terser";
 import filesize from "rollup-plugin-filesize";
 import { visualizer } from "rollup-plugin-visualizer";
+import typescript from "@rollup/plugin-typescript";
 
 const plugins = [
   nodeResolve({
@@ -33,13 +34,15 @@ const plugins = [
 ];
 
 const devPlugins = plugins.concat([
+  typescript(),
   replace({
     "process.env.NODE_ENV": JSON.stringify("development"),
     preventAssignment: true,
   }),
 ]);
 
 const prodPlugins = plugins.concat([
+  typescript(),
   replace({
     "process.env.NODE_ENV": JSON.stringify("production"),
     preventAssignment: true,
@@ -50,19 +53,21 @@ const prodPlugins = plugins.concat([
 ]);
 
 const base = {
-  input: "src/index.js",
+  input: "src/index.ts",
   external: [
     "react",
     "react-dom",
     "prop-types",
     "prism-react-renderer",
     "sucrase",
+    "react/jsx-runtime",
   ],
 };
 
 const output = {
   exports: "named",
   globals: {
+    "react/jsx-runtime": "jsx-runtime",
     "prism-react-renderer": "Prism",
     react: "React",
     sucrase: "Sucrase",

src/components/Editor/index.js → src/components/Editor/index.tsx

@@ -1,18 +1,29 @@
-import Highlight, { Prism } from "prism-react-renderer";
-import PropTypes from "prop-types";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import Highlight, { Language, Prism, PrismTheme } from "prism-react-renderer";
+import { CSSProperties, useCallback, useEffect, useRef, useState } from "react";
 import { useEditable } from "use-editable";
 import { theme as liveTheme } from "../../constants/theme";
 
-const CodeEditor = (props) => {
+export type Props = {
+  className?: string;
+  code: string;
+  disabled?: boolean;
+  language: Language;
+  prism?: typeof Prism;
+  style?: CSSProperties;
+  tabMode?: "focus" | "indentation";
+  theme?: PrismTheme;
+  onChange?(value: string): void;
+};
+
+const CodeEditor = (props: Props) => {
   const editorRef = useRef(null);
   const [code, setCode] = useState(props.code || "");
 
   useEffect(() => {
     setCode(props.code);
   }, [props.code]);
 
-  const onEditableChange = useCallback((_code) => {
+  const onEditableChange = useCallback((_code: string) => {
     setCode(_code.slice(0, -1));
   }, []);
 
@@ -41,6 +52,7 @@ const CodeEditor = (props) => {
           getLineProps,
           getTokenProps,
           style: _style,
+          /* @ts-ignore — this property exists but the lib's types are incorrect */
           theme: _theme,
         }) => (
           <pre
@@ -79,20 +91,8 @@ const CodeEditor = (props) => {
   );
 };
 
-CodeEditor.propTypes = {
-  className: PropTypes.string,
-  code: PropTypes.string,
-  disabled: PropTypes.bool,
-  language: PropTypes.string,
-  onChange: PropTypes.func,
-  prism: PropTypes.object,
-  style: PropTypes.object,
-  tabMode: PropTypes.oneOf(["focus", "indentation"]),
-  theme: PropTypes.object,
-};
-
 CodeEditor.defaultProps = {
   tabMode: "indentation",
-};
+} as Pick<Props, "tabMode">;
 
 export default CodeEditor;

src/components/Live/LiveContext.ts

@@ -0,0 +1,17 @@
+import { Language, PrismTheme } from "prism-react-renderer";
+import { ComponentType, createContext } from "react";
+
+type ContextValue = {
+  error?: string;
+  element?: ComponentType | null;
+  code: string;
+  disabled: boolean;
+  language: Language;
+  theme?: PrismTheme;
+  onError(error: Error): void;
+  onChange(value: string): void;
+}
+
+const LiveContext = createContext<ContextValue>({} as ContextValue);
+
+export default LiveContext;

stories/Editor.js → src/components/Live/LiveEditor.stories.tsx

@@ -1,23 +1,23 @@
-import React from "react";
 import Prism from "prismjs";
-import { Editor } from "../src/index";
+import { Editor } from "../../index";
+import type { Story } from "@storybook/react";
 
 export default {
   title: "Editor",
   component: Editor,
 };
 
-const Template = (args) => <Editor {...args} />;
+const Template = (args: any) => <Editor {...args} />;
 
 const defaultArgs = {
   language: "js",
   code: "const x = 'Hello World!';",
 };
 
-export const Default = Template.bind({});
+export const Default: Story = Template.bind({});
 Default.args = defaultArgs;
 
-export const FontFamilyExample = Template.bind({});
+export const FontFamilyExample: Story = Template.bind({});
 FontFamilyExample.args = {
   ...defaultArgs,
   style: {
@@ -27,5 +27,9 @@ FontFamilyExample.args = {
 
 // Can't pass Prism as an arg since it is not JSON-serializable
 export const PrismFromNpm = () => (
-  <Editor language="js" prism={Prism} code="const x = 'Hello World!';" />
+  <Editor
+    language="javascript"
+    prism={Prism as any}
+    code="const x = 'Hello World!';"
+  />
 );

src/components/Live/LiveEditor.js → src/components/Live/LiveEditor.tsx

@@ -1,8 +1,8 @@
 import React, { useContext } from "react";
 import LiveContext from "./LiveContext";
-import Editor from "../Editor";
+import Editor, { Props as EditorProps } from "../Editor";
 
-export default function LiveEditor(props) {
+export default function LiveEditor(props: Partial<EditorProps>) {
   const { code, language, theme, disabled, onChange } = useContext(LiveContext);
 
   return (

src/components/Live/LiveError.js → src/components/Live/LiveError.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from "react";
 import LiveContext from "./LiveContext";
 
-export default function LiveError(props) {
+export default function LiveError<T extends Record<string, unknown>>(props: T) {
   const { error } = useContext(LiveContext);
   return error ? <pre {...props}>{error}</pre> : null;
 }

src/components/Live/LivePreview.tsx

@@ -0,0 +1,16 @@
+import React, { PropsWithChildren, useContext } from "react";
+import LiveContext from "./LiveContext";
+
+type Props = {
+  Component?: React.ComponentType<PropsWithChildren<Record<string, unknown>>>;
+};
+
+const fallbackComponent = (
+  props: PropsWithChildren<Record<string, unknown>>
+) => <div {...props} />;
+
+function LivePreview({ Component = fallbackComponent, ...rest }: Props) {
+  const { element: Element } = useContext(LiveContext);
+  return <Component {...rest}>{Element ? <Element /> : null}</Component>;
+}
+export default LivePreview;