Finished pass of source to TS

Author: carloskelly13

rollup.config.js

@@ -53,7 +53,7 @@ const prodPlugins = plugins.concat([
 ]);
 
 const base = {
-  input: "src/index.js",
+  input: "src/index.ts",
   external: [
     "react",
     "react-dom",

src/components/Editor/index.js renamed to 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.ts";
+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",
-};
+} satisfies Pick<Props, 'tabMode'>;
 
 export default CodeEditor;

src/components/Live/LiveContext.ts

@@ -1,5 +1,17 @@
-import { createContext } from "react";
+import { Language, PrismTheme } from "prism-react-renderer";
+import { ComponentType, createContext } from "react";
 
-const LiveContext = createContext({});
+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;

src/components/Live/LiveEditor.js renamed to src/components/Live/LiveEditor.tsx

@@ -1,8 +1,8 @@
 import React, { useContext } from "react";
-import LiveContext from "./LiveContext.ts";
-import Editor from "../Editor";
+import LiveContext from "./LiveContext";
+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 renamed to src/components/Live/LiveError.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from "react";
-import LiveContext from "./LiveContext.ts";
+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.js

@@ -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;

src/components/Live/LivePreview.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from "react";
 import { act } from "react-dom/test-utils";
 import { renderElementAsync } from "../../utils/transpile/index.ts";
 import { render } from "../../utils/test/renderer";
-import LiveProvider from "./LiveProvider";
+import LiveProvider from "./LiveProvider.tsx";
 import LiveContext from "./LiveContext.ts";
 
 jest.mock("../../utils/transpile");

src/components/Live/LiveProvider.js

@@ -0,0 +1,109 @@
+import { useEffect, useState, ComponentType, PropsWithChildren } from "react";
+import LiveContext from "./LiveContext";
+import { generateElement, renderElementAsync } from "../../utils/transpile";
+import type { Language, PrismTheme } from "prism-react-renderer";
+
+type ProviderState = {
+  element?: ComponentType | null;
+  error?: string;
+};
+
+type Props = {
+  code: string;
+  disabled: boolean;
+  enableTypeScript: boolean;
+  language: Language;
+  noInline: boolean;
+  scope: Record<string, unknown>;
+  theme: PrismTheme;
+  transformCode(code: string): void;
+};
+
+function LiveProvider({
+  children,
+  code = "",
+  language = "tsx",
+  theme,
+  enableTypeScript = true,
+  disabled = false,
+  scope,
+  transformCode,
+  noInline = false,
+}: PropsWithChildren<Props>) {
+  const [state, setState] = useState<ProviderState>({
+    error: undefined,
+    element: undefined,
+  });
+
+  async function transpileAsync(newCode: string) {
+    const errorCallback = (error: Error) => {
+      setState({ error: error.toString(), element: undefined });
+    };
+
+    // - transformCode may be synchronous or asynchronous.
+    // - transformCode may throw an exception or return a rejected promise, e.g.
+    //   if newCode is invalid and cannot be transformed.
+    // - Not using async-await to since it requires targeting ES 2017 or
+    //   importing regenerator-runtime... in the next major version of
+    //   react-live, should target ES 2017+
+    try {
+      const transformResult = transformCode ? transformCode(newCode) : newCode;
+      try {
+        const transformedCode = await Promise.resolve(transformResult);
+        const renderElement = (element: ComponentType) =>
+          setState({ error: undefined, element });
+
+        if (typeof transformedCode !== "string") {
+          throw new Error("Code failed to transform");
+        }
+
+        // Transpilation arguments
+        const input = {
+          code: transformedCode,
+          scope,
+          enableTypeScript,
+        };
+
+        if (noInline) {
+          setState({ error: undefined, element: null }); // Reset output for async (no inline) evaluation
+          renderElementAsync(input, renderElement, errorCallback);
+        } else {
+          renderElement(generateElement(input, errorCallback));
+        }
+      } catch (error) {
+        return errorCallback(error as Error);
+      }
+    } catch (e) {
+      errorCallback(e as Error);
+      return Promise.resolve();
+    }
+  }
+
+  const onError = (error: Error) => setState({ error: error.toString() });
+
+  useEffect(() => {
+    transpileAsync(code).catch(onError);
+  }, [code, scope, noInline, transformCode]);
+
+  const onChange = (newCode: string) => {
+    transpileAsync(newCode).catch(onError);
+  };
+
+  return (
+    <LiveContext.Provider
+      value={{
+        ...state,
+        code,
+        language,
+        theme,
+        disabled,
+        onError,
+        onChange,
+      }}
+    >
+      {children}
+    </LiveContext.Provider>
+  );
+}
+
+export default LiveProvider;