Merge pull request #344 from FormidableLabs/feature/typescript-support

Add first-class support for `inline` and `render` TypeScript components

Author: carloskelly13

.eslintrc

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

docs/api.md

@@ -16,6 +16,7 @@ It supports these props, while passing any others through to the `children`:
 | noInline      | `PropTypes.bool`   | Doesn’t evaluate and mount the inline code (Default: `false`). Note: when using `noInline` whatever code you write must be a single expression (function, class component or some `jsx`) that can be returned immediately. If you'd like to render multiple components, use `noInline={true}` |
 | transformCode | `PropTypes.func`   | Accepts and returns the code to be transpiled, affording an opportunity to first transform it                                                                                                                                                                                                 |
 | language      | `PropTypes.string` | What language you're writing for correct syntax highlighting. (Default: `jsx`)                                                                                                                                                                                                                |
+| enableTypeScript      | `PropTypes.bool` | Enables TypeScript support in transpilation. (Default: `true`)                                                                                                                                                                                                                |
 | disabled      | `PropTypes.bool`   | Disable editing on the `<LiveEditor />` (Default: `false`)                                                                                                                                                                                                                                    |
 | theme         | `PropTypes.object` | A `prism-react-renderer` theme object. See more [here](https://github.com/FormidableLabs/prism-react-renderer#theming)                                                                                                                                                                        |
 

package.json

@@ -16,15 +16,15 @@
     "prepublishOnly": "npm run build",
     "test": "jest",
     "test:typings": "typings-tester --dir typings",
-    "lint": "eslint --config .eslintrc \"./**/*.js\"",
+    "lint": "eslint --config .eslintrc \"./src/**/*.js\"",
     "install:docs": "yarn --cwd website install",
     "start:docs": "yarn --cwd website start",
     "build:docs": "yarn --cwd website build",
     "format:docs": "prettier --write docs"
   },
   "dependencies": {
     "prism-react-renderer": "^1.3.1",
-    "sucrase": "^3.21.0",
+    "sucrase": "^3.31.0",
     "use-editable": "^2.3.3"
   },
   "devDependencies": {

src/components/Live/LivePreview.js

@@ -2,7 +2,7 @@ import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import LiveContext from "./LiveContext";
 
-function LivePreview({ Component, ...rest }) {
+function LivePreview({ Component = "div", ...rest }) {
   const { element: Element } = useContext(LiveContext);
   return <Component {...rest}>{Element ? <Element /> : null}</Component>;
 }

src/components/Live/LiveProvider.js

@@ -9,6 +9,7 @@ function LiveProvider({
   code,
   language,
   theme,
+  enableTypeScript = true,
   disabled,
   scope,
   transformCode,
@@ -42,6 +43,7 @@ function LiveProvider({
           const input = {
             code: transformedCode,
             scope,
+            enableTypeScript,
           };
 
           if (noInline) {
@@ -89,6 +91,7 @@ LiveProvider.propTypes = {
   children: PropTypes.node,
   code: PropTypes.string,
   disabled: PropTypes.bool,
+  enableTypeScript: PropTypes.bool,
   language: PropTypes.string,
   noInline: PropTypes.bool,
   scope: PropTypes.object,
@@ -98,6 +101,7 @@ LiveProvider.propTypes = {
 
 LiveProvider.defaultProps = {
   code: "",
+  enableTypeScript: true,
   noInline: false,
   language: "jsx",
   disabled: false,

src/utils/test/compose.test.js

@@ -0,0 +1,12 @@
+import compose from "../transpile/compose";
+
+describe("compose", () => {
+  it("should compose functions and call the result", () => {
+    const curriedAdd = (a) => (b) => b + a;
+    const curriedSubtract = (a) => (b) => b - a;
+    /**
+     * Compose (flow right): 5 + 10 - 2 = 13
+     */
+    expect(compose(curriedSubtract(2), curriedAdd(10))(5)).toBe(13);
+  });
+});

src/utils/transpile/compose.js

@@ -0,0 +1,12 @@
+/**
+ * Creates a new composite function that invokes the functions from right to left
+ * @param  {...function} functions: all the functions to invoke
+ * @returns a composite function
+ */
+export default function compose(...functions) {
+  return functions.reduce(
+    (acc, currentFn) =>
+      (...args) =>
+        acc(currentFn(...args))
+  );
+}

src/utils/transpile/index.js

@@ -2,21 +2,43 @@ import React from "react";
 import transform from "./transform";
 import errorBoundary from "./errorBoundary";
 import evalCode from "./evalCode";
+import compose from "./compose";
 
-export const generateElement = ({ code = "", scope = {} }, errorCallback) => {
-  // NOTE: Remove trailing semicolon to get an actual expression.
-  const codeTrimmed = code.trim().replace(/;$/, "");
+const jsxConst = 'const _jsxFileName = "";';
+const trimCode = (code) => code.trim().replace(/;$/, "");
+const spliceJsxConst = (code) => code.replace(jsxConst, "").trim();
+const addJsxConst = (code) => jsxConst + code;
+const wrapReturn = (code) => `return (${code})`;
+
+export const generateElement = (
+  { code = "", scope = {}, enableTypeScript = true },
+  errorCallback
+) => {
+  /**
+   * To enable TypeScript we need to transform the TS to JS code first,
+   * splice off the JSX const, wrap the eval in a return statement, then
+   * transform any imports. The two-phase approach is required to do
+   * the implicit evaluation and not wrap leading Interface or Type
+   * statements in the return.
+   */
+  const transformed = compose(
+    addJsxConst,
+    transform({ transforms: ["imports"] }),
+    wrapReturn,
+    spliceJsxConst,
+    trimCode,
+    transform({ transforms: ["jsx", enableTypeScript && "typescript"] }),
+    trimCode
+  )(code);
 
-  // NOTE: Workaround for classes and arrow functions.
-  const transformed = transform(`return (${codeTrimmed})`).trim();
   return errorBoundary(
     evalCode(transformed, { React, ...scope }),
     errorCallback
   );
 };
 
 export const renderElementAsync = (
-  { code = "", scope = {} },
+  { code = "", scope = {}, enableTypeScript = true },
   resultCallback,
   errorCallback
   // eslint-disable-next-line consistent-return
@@ -35,5 +57,10 @@ export const renderElementAsync = (
     );
   }
 
-  evalCode(transform(code), { React, ...scope, render });
+  evalCode(
+    transform({
+      transforms: ["jsx", enableTypeScript && "typescript", "imports"],
+    })(code),
+    { React, ...scope, render }
+  );
 };

src/utils/transpile/transform.js

@@ -1,5 +1,11 @@
 import { transform as _transform } from "sucrase";
 
-const opts = { transforms: ["jsx", "imports"] };
+const defaultTransforms = ["jsx", "imports"];
 
-export default (code) => _transform(code, opts).code;
+export default function transform(opts = {}) {
+  const transforms = Array.isArray(opts.transforms)
+    ? opts.transforms.filter(Boolean)
+    : defaultTransforms;
+
+  return (code) => _transform(code, { transforms }).code;
+}

src/utils/transpile/tsTransform.js

@@ -0,0 +1,5 @@
+import { transform as _transform } from "sucrase";
+
+export default (code) => {
+  return _transform(code, { transforms: ["jsx", "typescript"] }).code;
+};