feat(jsx): make use of the new JSX transforms

awesome-reveal · Jan 18, 2021 · 8b39b3a · 8b39b3a
1 parent 72be5b8
commit 8b39b3a
Show file tree

Hide file tree

Showing 22 changed files with 224 additions and 168 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,11 @@
+{
+  "presets": [
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic",
+        "importSource": "@emotion/react"
+      }
+    ]
+  ]
+}
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -9,5 +9,9 @@ module.exports = {
     react: {
       version: "detect"
     }
+  },
+  rules: {
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off"
   }
 };
diff --git a/example/components/Section.tsx b/example/components/Section.tsx
@@ -1,19 +1,15 @@
-import * as React from "react";
-
-const Section: React.FC = ({ children }) => {
-  return (
-    <section
-      style={{
-        height: "100vh",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        flexDirection: "column"
-      }}
-    >
-      {children}
-    </section>
-  );
-};
+const Section: React.FC = ({ children }) => (
+  <section
+    style={{
+      height: "100vh",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexDirection: "column"
+    }}
+  >
+    {children}
+  </section>
+);
 
 export default Section;
diff --git a/example/index.tsx b/example/index.tsx
@@ -1,5 +1,3 @@
-import "react-app-polyfill/ie11";
-import * as React from "react";
 import * as ReactDOM from "react-dom";
 
 import Fade from "../src/components/Fade";

diff --git a/example/package.json b/example/package.json
@@ -8,18 +8,18 @@
     "build": "parcel build index.html"
   },
   "dependencies": {
-    "components": "^0.1.0",
-    "react-app-polyfill": "^1.0.6"
+    "components": "^0.1.0"
   },
   "alias": {
     "react": "../node_modules/react",
     "react-dom": "../node_modules/react-dom/profiling",
     "scheduler/tracing": "../node_modules/scheduler/tracing-profiling"
   },
   "devDependencies": {
+    "@babel/core": "^7.12.10",
     "@types/react": "^16.9.49",
     "@types/react-dom": "^16.9.8",
     "parcel": "^1.12.4",
-    "typescript": "^3.9.7"
+    "typescript": "^4.1.3"
   }
 }
diff --git a/example/tsconfig.dev.json b/example/tsconfig.dev.json
@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsxdev"
+  }
+}
diff --git a/example/tsconfig.json b/example/tsconfig.json
@@ -3,7 +3,7 @@
     "allowSyntheticDefaultImports": false,
     "target": "es5",
     "module": "commonjs",
-    "jsx": "react",
+    "jsx": "react-jsx",
     "moduleResolution": "node",
     "noImplicitAny": false,
     "noUnusedLocals": false,

diff --git a/example/yarn.lock b/example/yarn.lock
@@ -14,7 +14,7 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.12.7.tgz#9329b4782a7d6bbd7eef57e11addf91ee3ef1e41"
   integrity sha512-YaxPMGs/XIWtYqrdEOZOCPsVWfEoriXopnsz3/i7apYPXQ3698UFhS6dVT1KN5qOsWmVgw/FOrmQgpRaZayGsw==
 
-"@babel/core@^7.4.4":
+"@babel/core@^7.12.10", "@babel/core@^7.4.4":
   version "7.12.10"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.10.tgz#b79a2e1b9f70ed3d84bbfb6d8c4ef825f606bccd"
   integrity sha512-eTAlQKq65zHfkHZV0sIVODCPGVgoo1HdBlbSLi9CqOzuZanMv2ihzY+4paiKr1mH+XmYESMAmJ/dpZ68eN6d8w==
@@ -1043,11 +1043,6 @@ array-unique@^0.3.2:
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
   integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=
 
-asap@~2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
-  integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
-
 asn1.js@^5.2.0:
   version "5.4.1"
   resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-5.4.1.tgz#11a980b84ebb91781ce35b0fdc2ee294e3783f07"
@@ -1632,11 +1627,6 @@ core-js@^2.4.0, core-js@^2.6.5:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
   integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
 
-core-js@^3.5.0:
-  version "3.8.2"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.8.2.tgz#0a1fd6709246da9ca8eff5bb0cbd15fba9ac7044"
-  integrity sha512-FfApuSRgrR6G5s58casCBd9M2k+4ikuu4wbW6pJyYU7bd9zvFc9qf7vr5xmrZOhT9nn+8uwlH1oRR9jTnFoA3A==
-
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -4097,13 +4087,6 @@ process@^0.11.10:
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
 
-promise@^8.0.3:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/promise/-/promise-8.1.0.tgz#697c25c3dfe7435dd79fcd58c38a135888eaf05e"
-  integrity sha512-W04AqnILOL/sPRXziNicCjSNRruLAuIHEOVBazepu0545DDNGYHz7ar9ZgZ1fMU8/MA4mVxp5rkBWRi6OXIy3Q==
-  dependencies:
-    asap "~2.0.6"
-
 psl@^1.1.28:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24"
@@ -4175,13 +4158,6 @@ quote-stream@^1.0.1, quote-stream@~1.0.2:
     minimist "^1.1.3"
     through2 "^2.0.0"
 
-raf@^3.4.1:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
-  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
-  dependencies:
-    performance-now "^2.1.0"
-
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -4202,18 +4178,6 @@ range-parser@~1.2.1:
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
   integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
 
-react-app-polyfill@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-1.0.6.tgz#890f8d7f2842ce6073f030b117de9130a5f385f0"
-  integrity sha512-OfBnObtnGgLGfweORmdZbyEz+3dgVePQBb3zipiaDsMHV1NpWm0rDFYIVXFV/AK+x4VIIfWHhrdMIeoTLyRr2g==
-  dependencies:
-    core-js "^3.5.0"
-    object-assign "^4.1.1"
-    promise "^8.0.3"
-    raf "^3.4.1"
-    regenerator-runtime "^0.13.3"
-    whatwg-fetch "^3.0.0"
-
 readable-stream@^2.0.2, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.3, readable-stream@~2.3.6:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
@@ -4262,7 +4226,7 @@ regenerator-runtime@^0.11.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
-regenerator-runtime@^0.13.3, regenerator-runtime@^0.13.4:
+regenerator-runtime@^0.13.4:
   version "0.13.7"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
   integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
@@ -4959,10 +4923,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@^3.9.7:
-  version "3.9.7"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa"
-  integrity sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==
+typescript@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.3.tgz#519d582bd94cba0cf8934c7d8e8467e473f53bb7"
+  integrity sha512-B3ZIOf1IKeH2ixgHhj6la6xdwR9QrLC5d1VKeCSY4tvkqhF2eqd9O7txNlS0PO3GrBAFIdr3L1ndNwteUbZLYg==
 
 uncss@^0.17.3:
   version "0.17.3"
@@ -5171,11 +5135,6 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.5:
   dependencies:
     iconv-lite "0.4.24"
 
-whatwg-fetch@^3.0.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.5.0.tgz#605a2cd0a7146e5db141e29d1c62ab84c0c4c868"
-  integrity sha512-jXkLtsR42xhXg7akoDKvKWE40eJeI+2KZqcp2h3NsOrRnDvtWX36KcKl30dy+hxECivdk2BVUHVNrPtoMBUx6A==
-
 whatwg-mimetype@^2.2.0, whatwg-mimetype@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"

diff --git a/package.json b/package.json
@@ -63,6 +63,8 @@
     }
   ],
   "devDependencies": {
+    "@babel/core": "^7.12.10",
+    "@babel/preset-react": "^7.12.10",
     "@emotion/eslint-plugin": "^11.0.0",
     "@size-limit/preset-small-lib": "^4.8.0",
     "@types/jest": "^26.0.15",
@@ -74,12 +76,17 @@
     "react-dom": "^17.0.1",
     "size-limit": "^4.8.0",
     "tsdx": "^0.14.1",
-    "tslib": "^2.0.3",
-    "typescript": "^3.9.7"
+    "tslib": "^2.1.0",
+    "typescript": "^4.1.3"
   },
   "dependencies": {
     "@emotion/react": "^11.1.4",
     "react-intersection-observer": "^8.31.0",
     "react-is": "^17.0.1"
+  },
+  "resolutions": {
+    "**/typescript": "^4.1.3",
+    "**/@typescript-eslint/eslint-plugin": "^4.13.0",
+    "**/@typescript-eslint/parser": "^4.13.0"
   }
 }
diff --git a/src/Reveal.tsx b/src/Reveal.tsx
@@ -1,5 +1,4 @@
-/** @jsx jsx */
-import * as React from "react";
+import { Children, FC } from "react";
 import { isFragment } from "react-is";
 import { ClassNames, Interpolation, Theme, css, jsx } from "@emotion/react";
 import { Keyframes } from "@emotion/serialize";
@@ -84,7 +83,7 @@ export interface RevealProps {
   onVisibilityChange?(inView: boolean, entry: IntersectionObserverEntry): void;
 }
 
-const Reveal: React.FC<RevealProps> = ({
+const Reveal: FC<RevealProps> = ({
   cascade = false,
   damping = 0.5,
   delay = 0,
@@ -185,8 +184,8 @@ const Reveal: React.FC<RevealProps> = ({
   }
 
   return (
-    <React.Fragment>
-      {React.Children.map(children, (node, index) => {
+    <>
+      {Children.map(children, (node, index) => {
         const nodeElement = node as React.ReactElement;
         const nodeCss: Interpolation<Theme>[] = nodeElement.props.css
           ? [nodeElement.props.css]
@@ -206,9 +205,10 @@ const Reveal: React.FC<RevealProps> = ({
             return (
               <ClassNames>
                 {({ cx }) =>
-                  React.cloneElement(
-                    nodeElement,
+                  jsx(
+                    nodeElement.type,
                     {
+                      ...nodeElement.props,
                       className: cx(className, nodeElement.props.className),
                       style: { ...style, ...nodeElement.props.style }
                     },
@@ -289,7 +289,7 @@ const Reveal: React.FC<RevealProps> = ({
             );
         }
       })}
-    </React.Fragment>
+    </>
   );
 };
 

diff --git a/src/components/AttentionSeeker.tsx b/src/components/AttentionSeeker.tsx
@@ -1,4 +1,3 @@
-import * as React from "react";
 import { Interpolation, Theme } from "@emotion/react";
 import { Keyframes } from "@emotion/serialize";
 
@@ -34,7 +33,7 @@ type AttentionSeekerEffect =
   | "tada"
   | "wobble";
 
-interface AttentionSeekerProps extends Omit<RevealProps, "keyframes"> {
+interface AttentionSeekerProps extends Omit<RevealProps, "keyframes" | "css"> {
   /**
    * The animation effect to use for this attention seeker.
    * @default "bounce"
@@ -78,12 +77,11 @@ function getAttentionSeekerKeyframesAndCss(
 
 const AttentionSeeker: React.FC<AttentionSeekerProps> = ({
   effect = "bounce",
-  css,
-  ...rest
+  ...otherProps
 }) => {
   const [keyframes, animationCss] = getAttentionSeekerKeyframesAndCss(effect);
 
-  return <Reveal keyframes={keyframes} css={[css, animationCss]} {...rest} />;
+  return <Reveal keyframes={keyframes} css={animationCss} {...otherProps} />;
 };
 
 export default AttentionSeeker;
diff --git a/src/components/Bounce.tsx b/src/components/Bounce.tsx
@@ -1,5 +1,3 @@
-import * as React from "react";
-
 import Reveal, { RevealProps } from "../Reveal";
 import {
   bounceIn,
@@ -18,7 +16,7 @@ import {
 
 type BounceDirection = "down" | "left" | "right" | "up";
 
-interface BounceProps extends Omit<RevealProps, "keyframes"> {
+interface BounceProps extends Omit<RevealProps, "keyframes" | "css"> {
   /**
    * Origin of the animation.
    * @default undefined
@@ -49,10 +47,13 @@ function getBounceKeyframes(reverse: boolean, direction?: BounceDirection) {
 const Bounce: React.FC<BounceProps> = ({
   direction,
   reverse = false,
-  ...rest
+  ...otherProps
 }) => {
   return (
-    <Reveal keyframes={getBounceKeyframes(reverse, direction)} {...rest} />
+    <Reveal
+      keyframes={getBounceKeyframes(reverse, direction)}
+      {...otherProps}
+    />
   );
 };
 

diff --git a/src/components/Fade.tsx b/src/components/Fade.tsx
@@ -1,5 +1,3 @@
-import * as React from "react";
-
 import Reveal, { RevealProps } from "../Reveal";
 import {
   fadeIn,
@@ -42,7 +40,7 @@ type FadeDirection =
   | "top-right"
   | "up";
 
-interface FadeProps extends Omit<RevealProps, "keyframes"> {
+interface FadeProps extends Omit<RevealProps, "keyframes" | "css"> {
   /**
    * Causes the animation to start farther. Only works with "down", "left", "right" and "up" directions.
    * @default false
@@ -115,10 +113,13 @@ const Fade: React.FC<FadeProps> = ({
   big = false,
   direction,
   reverse = false,
-  ...rest
+  ...otherProps
 }) => {
   return (
-    <Reveal keyframes={getFadeKeyframes(big, reverse, direction)} {...rest} />
+    <Reveal
+      keyframes={getFadeKeyframes(big, reverse, direction)}
+      {...otherProps}
+    />
   );
 };