refactor: drop jsx pragma

P0lip · P0lip · commit 69f07252342e · 2019-04-16T11:44:31.000+02:00
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "react-dom": ">=16.7.0-alpha.1"
   },
   "dependencies": {
+    "@emotion/core": "^10.0.10",
     "@fortawesome/free-solid-svg-icons": "5.6.x",
     "@stoplight/json": "1.9.x",
     "lodash": "4.17.x"
diff --git a/src/JsonSchemaViewer.tsx b/src/JsonSchemaViewer.tsx
@@ -1,8 +1,5 @@
-/* @jsx jsx */
-
-import { jsx } from '@emotion/core';
 import { Omit } from '@stoplight/types';
-import { Component } from 'react';
+import * as React from 'react';
 import { ErrorMessage } from './common/ErrorMessage';
 import { MutedText } from './common/MutedText';
 import { ISchemaView, SchemaView } from './SchemaView';
@@ -17,7 +14,7 @@ export interface IJsonSchemaViewerState {
   error: null | string;
 }
 
-export class JsonSchemaViewer extends Component<IJsonSchemaViewer, IJsonSchemaViewerState> {
+export class JsonSchemaViewer extends React.PureComponent<IJsonSchemaViewer, IJsonSchemaViewerState> {
   public state = {
     error: null,
   };
diff --git a/src/SchemaView.tsx b/src/SchemaView.tsx
@@ -1,10 +1,7 @@
-/* @jsx jsx */
-
-import { jsx } from '@emotion/core';
 import { Dictionary, ISchema } from '@stoplight/types';
 import { Box, Button, IBox } from '@stoplight/ui-kit';
 import dropRight = require('lodash/dropRight');
-import { FunctionComponent, MouseEventHandler, ReactNodeArray, useCallback, useState } from 'react';
+import * as React from 'react';
 import { MutedText } from './common/MutedText';
 import { renderSchema } from './renderers/renderSchema';
 import { useTheme } from './theme';
@@ -24,7 +21,7 @@ export interface ISchemaViewProps {
 
 export interface ISchemaView extends ISchemaViewProps, IBox {}
 
-export const SchemaView: FunctionComponent<ISchemaView> = props => {
+export const SchemaView: React.FunctionComponent<ISchemaView> = props => {
   const {
     defaultExpandedDepth = 1,
     emptyText,
@@ -38,17 +35,17 @@ export const SchemaView: FunctionComponent<ISchemaView> = props => {
   } = props;
 
   const theme = useTheme();
-  const [showExtra, setShowExtra] = useState<boolean>(false);
-  const [expandedRows, setExpandedRows] = useState<Dictionary<boolean>>({ all: expanded });
+  const [showExtra, setShowExtra] = React.useState<boolean>(false);
+  const [expandedRows, setExpandedRows] = React.useState<Dictionary<boolean>>({ all: expanded });
 
-  const toggleExpandRow = useCallback<(rowKey: string, expanded: boolean) => void>(
+  const toggleExpandRow = React.useCallback<(rowKey: string, expanded: boolean) => void>(
     (rowKey, expandRow) => {
       setExpandedRows({ ...expandedRows, [rowKey]: expandRow });
     },
     [expandedRows]
   );
 
-  const toggleShowExtra = useCallback<MouseEventHandler<HTMLElement>>(
+  const toggleShowExtra = React.useCallback<React.MouseEventHandler<HTMLElement>>(
     () => {
       setShowExtra(!showExtra);
     },
@@ -73,7 +70,7 @@ export const SchemaView: FunctionComponent<ISchemaView> = props => {
     actualSchema = buildAllOfSchema(schemaProps);
   }
 
-  let rowElems: ReactNodeArray = [];
+  let rowElems: React.ReactNodeArray = [];
 
   renderSchema({
     schemas,
diff --git a/src/__tests__/JsonSchemaViewer.spec.tsx b/src/__tests__/JsonSchemaViewer.spec.tsx
@@ -1,7 +1,6 @@
-/* @jsx jsx */
-import { jsx } from '@emotion/core';
 import { shallow } from 'enzyme';
 import 'jest-enzyme';
+import * as React from 'react';
 import { MutedText } from '../common/MutedText';
 import { JsonSchemaViewer } from '../JsonSchemaViewer';
 import { SchemaView } from '../SchemaView';
diff --git a/src/__tests__/SchemaView.spec.tsx b/src/__tests__/SchemaView.spec.tsx
@@ -1,5 +1,3 @@
-/* @jsx jsx */
-import { jsx } from '@emotion/core';
 import { Button } from '@stoplight/ui-kit';
 import { shallow } from 'enzyme';
 import 'jest-enzyme';
diff --git a/src/common/ErrorMessage.tsx b/src/common/ErrorMessage.tsx
@@ -1,11 +1,8 @@
-/* @jsx jsx */
-
-import { jsx } from '@emotion/core';
 import { Box, IBox } from '@stoplight/ui-kit';
-import { FunctionComponent } from 'react';
+import * as React from 'react';
 import { useTheme } from '../theme';
 
-export const ErrorMessage: FunctionComponent<IErrorMessage> = props => {
+export const ErrorMessage: React.FunctionComponent<IErrorMessage> = props => {
   const { children, ...rest } = props;
   const css = errorMessageStyles();
 
diff --git a/src/common/MutedText.tsx b/src/common/MutedText.tsx
@@ -1,11 +1,8 @@
-/* @jsx jsx */
-
-import { jsx } from '@emotion/core';
 import { Box, IBox } from '@stoplight/ui-kit';
-import { FunctionComponent } from 'react';
+import * as React from 'react';
 import { useTheme } from '../theme';
 
-export const MutedText: FunctionComponent<IMutedText> = props => {
+export const MutedText: React.FunctionComponent<IMutedText> = props => {
   const { children, ...rest } = props;
   const css = mutedTextStyles();
 
diff --git a/src/common/Row.tsx b/src/common/Row.tsx
@@ -1,12 +1,10 @@
-/* @jsx jsx */
-
-import { css, jsx } from '@emotion/core';
-import { Box, IBox } from '@stoplight/ui-kit';
-import { FunctionComponent } from 'react';
+import { css } from '@emotion/core';
+import { Box, IBox, IBoxCSS } from '@stoplight/ui-kit';
+import * as React from 'react';
 import { DEFAULT_PADDING, GUTTER_WIDTH } from '../consts';
 import { useTheme } from '../theme';
 
-export const Row: FunctionComponent<IRow> = props => {
+export const Row: React.FunctionComponent<IRow> = props => {
   const { children, level, ...rest } = props;
   const styles = rowStyles({ level });
 
@@ -23,13 +21,11 @@ export interface IRowProps {
 
 export interface IRow extends IRowProps, IBox {}
 
-export const rowStyles = ({ level }: IRowProps) => {
+export const rowStyles = ({ level }: IRowProps): IBoxCSS => {
   const theme = useTheme();
 
   return [
-    {
-      ...(level !== undefined && { paddingLeft: DEFAULT_PADDING + GUTTER_WIDTH * level }),
-    },
+    level !== undefined && { paddingLeft: DEFAULT_PADDING + GUTTER_WIDTH * level },
     css`
       user-select none;
       line-height: 1rem;
diff --git a/src/common/RowType.tsx b/src/common/RowType.tsx
@@ -1,11 +1,8 @@
-/* @jsx jsx */
-
-import { jsx } from '@emotion/core';
-import { Box, IBox } from '@stoplight/ui-kit';
-import { FunctionComponent } from 'react';
+import { Box, IBox, IBoxCSS } from '@stoplight/ui-kit';
+import * as React from 'react';
 import { useTheme } from '../theme';
 
-export const RowType: FunctionComponent<IRowType> = props => {
+export const RowType: React.FunctionComponent<IRowType> = props => {
   const { children, type, ...rest } = props;
   const css = rowStyles({ type });
 
@@ -22,10 +19,8 @@ export interface IRowTypeProps {
 
 export interface IRowType extends IRowTypeProps, IBox {}
 
-export const rowStyles = ({ type }: IRowTypeProps) => {
+export const rowStyles = ({ type }: IRowTypeProps): IBoxCSS => {
   const theme = useTheme();
 
-  return {
-    ...(type !== undefined && type in theme.types && { color: theme.types[type] }),
-  };
+  return type !== undefined && type in theme.types && { color: theme.types[type] };
 };
diff --git a/src/renderers/renderProp.tsx b/src/renderers/renderProp.tsx
@@ -1,10 +1,8 @@
-/* @jsx jsx */
-import { jsx } from '@emotion/core';
 import { Box, Flex, Icon, IconLibrary } from '@stoplight/ui-kit';
 import has = require('lodash/has');
 import isEmpty = require('lodash/isEmpty');
 import isString = require('lodash/isString');
-import { ReactNode, ReactNodeArray } from 'react';
+import * as React from 'react';
 
 import { faCaretDown } from '@fortawesome/free-solid-svg-icons/faCaretDown';
 import { faCaretRight } from '@fortawesome/free-solid-svg-icons/faCaretRight';
@@ -113,9 +111,9 @@ export const renderProp = ({
     types = propType;
   }
 
-  let typeElems: ReactNodeArray = [];
+  let typeElems: React.ReactNodeArray = [];
   if (!isEmpty(types)) {
-    typeElems = types.reduce((acc: ReactNode[], type: string, i) => {
+    typeElems = types.reduce((acc: React.ReactNode[], type: string, i) => {
       acc.push(
         <RowType as="span" type={type} key={i}>
           {type === 'array' && childPropType && childPropType !== 'array' ? `array[${childPropType}]` : type}
diff --git a/src/renderers/renderRowDivider.tsx b/src/renderers/renderRowDivider.tsx
@@ -1,7 +1,5 @@
-/* @jsx jsx */
-import { jsx } from '@emotion/core';
 import { Box, Flex } from '@stoplight/ui-kit';
-import { FunctionComponent } from 'react';
+import * as React from 'react';
 import { MutedText } from '../common/MutedText';
 import { DEFAULT_PADDING, GUTTER_WIDTH } from '../consts';
 import { useTheme } from '../theme';
@@ -12,12 +10,12 @@ interface IRowDivider {
   text: string;
 }
 
-export const renderRowDivider: FunctionComponent<IRowDivider> = ({ key, level, text }) => {
+export const renderRowDivider: React.FunctionComponent<IRowDivider> = ({ key, level, text }) => {
   const theme = useTheme();
 
   return (
-    <Flex alignItems="center" key={`${key}-d`} height="2.5rem" pl={DEFAULT_PADDING + GUTTER_WIDTH * (level - 1)}>
-      <MutedText fontSize=".875rem" textTransform="uppercase" pr={11}>
+    <Flex alignItems="center" key={`${key}-d`} height="2.5rem" pl={`${DEFAULT_PADDING + GUTTER_WIDTH * (level - 1)}px`}>
+      <MutedText fontSize=".875rem" textTransform="uppercase" pr={3}>
         {text}
       </MutedText>
       <Box backgroundColor={theme.divider.bg} height="1px" mr={15} flex="1 1 0%" />
diff --git a/yarn.lock b/yarn.lock
@@ -1335,7 +1335,7 @@
     "@emotion/sheet" "0.9.2"
     "@emotion/utils" "0.11.1"
 
-"@emotion/core@^10.0.7":
+"@emotion/core@^10.0.10", "@emotion/core@^10.0.7":
   version "10.0.10"
   resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.10.tgz#8d3114e5a2f8b178a7067c603a2937516f180b08"
   integrity sha512-U1aE2cOWUscjc8ZJ3Cx32udOzLeRoJwGxBH93xQD850oQFpwPKZARzdUtdc9SByUOwzSFYxhDhrpXnV34FJmWg==

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-/* @jsx jsx */`
`2`		`-import { jsx } from '@emotion/core';`
`3`	`1`	`import { Button } from '@stoplight/ui-kit';`
`4`	`2`	`import { shallow } from 'enzyme';`
`5`	`3`	`import 'jest-enzyme';`