Remove JSXChildren type in favor of provided interface (ReactNode)

webpack/devices/components/lockable_button.tsx

@@ -1,10 +1,9 @@
 import * as React from "react";
-import { JSXChildren } from "../../util";
 
 interface Props {
   onClick: Function;
   disabled: boolean;
-  children?: JSXChildren;
+  children?: React.ReactChild | React.ReactChild[];
 }
 
 export function LockableButton({ onClick, disabled, children }: Props) {

webpack/devices/must_be_online.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { JSXChildren } from "../util";
 import { NetworkState } from "../connectivity/interfaces";
 import { SyncStatus } from "farmbot";
 
@@ -9,7 +8,7 @@ export interface MBOProps {
   syncStatus: SyncStatus | undefined;
   lockOpen?: boolean;
   hideBanner?: boolean;
-  children?: JSXChildren;
+  children?: React.ReactNode | React.ReactNode[];
 }
 
 export function isBotUp(status: SyncStatus | undefined) {

webpack/draggable/interfaces.ts

@@ -1,5 +1,4 @@
 import { SequenceBodyItem as Step } from "farmbot";
-import { JSXChildren } from "../util";
 
 /** An entry in the data transfer table. Used to transfer data from a "draggable"
  * to a "dropable". For type safety, this is a "tagged union". See Typescript
@@ -50,6 +49,6 @@ export interface StepDraggerProps {
   dispatch: Function;
   step: Step;
   intent: DataXferIntent;
-  children?: JSXChildren;
+  children?: React.ReactNode | React.ReactNode[];
   draggerId: number;
 }

webpack/farm_designer/farm_events/add_farm_event.tsx

@@ -5,7 +5,7 @@ import { connect } from "react-redux";
 import { mapStateToPropsAddEdit, } from "./map_state_to_props_add_edit";
 import { init, destroy } from "../../api/crud";
 import { EditFEForm } from "./edit_fe_form";
-import { betterCompact, JSXChildren, catchErrors } from "../../util";
+import { betterCompact, catchErrors } from "../../util";
 import { entries } from "../../resources/util";
 import { Link } from "react-router";
 import {
@@ -86,7 +86,7 @@ export class AddFarmEvent
     return <p>{t("Loading")}...</p>;
   }
 
-  placeholderTemplate(children: JSXChildren) {
+  placeholderTemplate(children: React.ReactChild | React.ReactChild[]) {
     return <div className="panel-container magenta-panel add-farm-event-panel">
       <div className="panel-header magenta-panel">
         <p className="panel-title"> <BackArrow /> {t("No Executables")} </p>

webpack/farm_designer/plants/crop_info.tsx

@@ -9,12 +9,12 @@ import { findBySlug } from "../search_selectors";
 import { Everything } from "../../interfaces";
 import { OpenFarm } from "../openfarm";
 import { OFSearch } from "../util";
-import { catchErrors, JSXChildren } from "../../util";
+import { catchErrors } from "../../util";
 import { unselectPlant } from "../actions";
 
 interface InforFieldProps {
   title: string;
-  children?: JSXChildren;
+  children?: React.ReactChild | React.ReactChild[];
 }
 
 function InfoField(props: InforFieldProps) {

webpack/regimens/interfaces.ts

@@ -4,7 +4,6 @@ import { AuthState } from "../auth/interfaces";
 import { BotState } from "../devices/interfaces";
 import { TaggedRegimen, TaggedSequence } from "../resources/tagged_resources";
 import { ResourceIndex } from "../resources/interfaces";
-import { JSXChildren } from "../util";
 
 export interface MiddleSectionProps {
   regimen: TaggedRegimen | undefined;
@@ -77,7 +76,7 @@ export interface RegimenItem {
 export interface AddRegimenProps {
   dispatch: Function;
   className?: string;
-  children?: JSXChildren;
+  children?: React.ReactNode | React.ReactNode[];
   length: number;
 }
 

webpack/sequences/interfaces.ts

@@ -11,7 +11,6 @@ import {
 import { StepMoveDataXfer, StepSpliceDataXfer } from "../draggable/interfaces";
 import { TaggedSequence } from "../resources/tagged_resources";
 import { ResourceIndex } from "../resources/interfaces";
-import { JSXChildren } from "../util";
 import { ShouldDisplay } from "../devices/interfaces";
 
 export interface HardwareFlags {
@@ -89,7 +88,7 @@ export interface StepButtonParams {
   current: TaggedSequence | undefined;
   step: SequenceBodyItem;
   dispatch: Function;
-  children?: JSXChildren;
+  children?: React.ReactNode | React.ReactNode[];
   color: "blue"
   | "green"
   | "orange"

webpack/sequences/step_tiles/tile_move_absolute/interfaces.ts

@@ -1,6 +1,5 @@
 import { ResourceIndex } from "../../../resources/interfaces";
 import { MoveAbsolute, PointType } from "farmbot/dist";
-import { JSXChildren } from "../../../util";
 import { ShouldDisplay } from "../../../devices/interfaces";
 export const TOOL: "Tool" = "Tool";
 
@@ -15,7 +14,7 @@ export interface TileMoveAbsProps {
 
 export interface InputBoxProps {
   onCommit(e: React.SyntheticEvent<HTMLInputElement>): void;
-  children?: JSXChildren;
+  children?: React.ReactNode | React.ReactNode[];
   disabled?: boolean;
   name: string;
   value: string;

webpack/sequences/step_ui/step_content.tsx

@@ -1,9 +1,8 @@
 import * as React from "react";
-import { JSXChildren } from "../../util";
 import { Row, Col } from "../../ui/index";
 
 interface StepContentProps {
-  children?: JSXChildren;
+  children?: React.ReactChild | React.ReactChild[];
   className: string;
 }
 

webpack/sequences/step_ui/step_header.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { t } from "i18next";
-import { JSXChildren } from "../../util";
 import { Row, Col } from "../../ui/index";
 import { TaggedSequence } from "../../resources/tagged_resources";
 import { SequenceBodyItem } from "farmbot";
@@ -9,7 +8,7 @@ import { StepIconGroup } from "../step_icon_group";
 import { splice, remove } from "../step_tiles/index";
 
 export interface StepHeaderProps {
-  children?: JSXChildren;
+  children?: React.ReactNode | React.ReactNode[];
   className: string;
   helpText: string;
   currentSequence: TaggedSequence;
@@ -26,7 +25,7 @@ export function StepHeader(props: StepHeaderProps) {
     currentStep,
     dispatch,
     index
-     } = props;
+  } = props;
   return <Row>
     <Col sm={12}>
       <div className={`step-header ${className}`} draggable={true}>

webpack/sequences/step_ui/step_wrapper.tsx

@@ -1,8 +1,7 @@
 import * as React from "react";
-import { JSXChildren } from "../../util";
 
 interface StepWrapperProps {
-  children?: JSXChildren;
+  children?: React.ReactChild | React.ReactChild[];
   className?: string;
 }
 

webpack/ui/column.tsx

@@ -1,9 +1,8 @@
 import * as React from "react";
 import { parseClassNames } from "./util";
-import { JSXChildren } from "../util";
 
 interface ColumnProps {
-  children?: JSXChildren;
+  children?: React.ReactNode | React.ReactNode[];
   /** {xs-col-size} */
   xs?: number;
   /** {sm-col-size} */

webpack/ui/markdown.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { JSXChildren } from "../util";
 const emoji = require("markdown-it-emoji");
 const md = require("markdown-it")({
   /** Enable HTML tags in source */
@@ -15,7 +14,7 @@ const md = require("markdown-it")({
 md.use(emoji);
 
 interface MarkdownProps {
-  children?: JSXChildren;
+  children?: React.ReactChild | React.ReactChild[];
 }
 
 export function Markdown(props: MarkdownProps) {

webpack/ui/page.tsx

@@ -1,8 +1,7 @@
 import * as React from "react";
-import { JSXChildren } from "../util";
 
 interface PageProps {
-  children?: JSXChildren;
+  children?: React.ReactChild | React.ReactChild[];
   className?: string;
 }
 

webpack/ui/row.tsx

@@ -1,8 +1,7 @@
 import * as React from "react";
-import { JSXChildren } from "../util";
 
 interface RowProps extends React.HTMLProps<HTMLDivElement> {
-  children?: JSXChildren;
+  children?: React.ReactNode | React.ReactNode[];
   className?: string;
 }
 

webpack/ui/tooltip.tsx

@@ -1,9 +1,8 @@
 import * as React from "react";
 import { t } from "i18next";
-import { JSXChildren } from "../util";
 
 interface ToolTipProps {
-  children?: JSXChildren;
+  children?: React.ReactNode | React.ReactNode[];
   className?: string;
   helpText: string;
 }

webpack/ui/widget.tsx

@@ -1,8 +1,7 @@
 import * as React from "react";
-import { JSXChildren } from "../util";
 
 interface WidgetProps {
-  children?: JSXChildren;
+  children?: React.ReactNode | React.ReactNode[];
   className?: string;
 }
 

webpack/ui/widget_body.tsx

@@ -1,8 +1,7 @@
 import * as React from "react";
-import { JSXChildren } from "../util";
 
 interface WidgetBodyProps {
-  children?: JSXChildren;
+  children?: React.ReactNode | React.ReactNode[];
 }
 
 export function WidgetBody(props: WidgetBodyProps) {

webpack/ui/widget_footer.tsx

@@ -1,8 +1,7 @@
 import * as React from "react";
-import { JSXChildren } from "../util";
 
 interface WidgetFooterProps {
-  children?: JSXChildren;
+  children?: React.ReactNode | React.ReactNode[];
 }
 
 export function WidgetFooter(props: WidgetFooterProps) {

webpack/ui/widget_header.tsx

@@ -1,10 +1,9 @@
 import * as React from "react";
 import { t } from "i18next";
-import { JSXChildren } from "../util";
 import { docLink, DocSlug } from "./doc_link";
 
 interface WidgetHeaderProps {
-  children?: JSXChildren;
+  children?: React.ReactNode | React.ReactNode[];
   helpText?: string;
   docPage?: DocSlug;
   title: string;

webpack/util/util.ts

@@ -135,11 +135,6 @@ export function oneOf(list: string[], target: string) {
   return !!matches;
 }
 
-/** TODO: Upgrading to TSC 2.4, maybe we don't need this?
- * - RC 20 June 2016 */
-type JSXChild = JSX.Element | JSX.Element[] | Primitive | undefined;
-export type JSXChildren = JSXChild[] | JSXChild;
-
 export type Primitive = boolean | string | number;
 
 export function shortRevision() {