Updates "@babel/preset-react" preset "runtime" param to "automatic" and cleans up import lines

newsfeed/babel.config.json

@@ -1,4 +1,12 @@
 {
-  "presets": ["@babel/preset-react", "@babel/preset-typescript"],
+  "presets": [
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ],
+    "@babel/preset-typescript"
+  ],
   "plugins": ["relay"]
 }

newsfeed/server/resolvers.mjs

@@ -142,7 +142,8 @@ const nodes = [
     id: "99",
     category: "NEWS",
     title: "Study: The egg came first, but only after the chicken",
-    summary: 'In a shocking new study, scientists have finally determined the age-old question of whether the chicken or the egg came first. And it turns out, the answer is both!\n      According to the research, the egg actually came first — but only after the chicken had already laid it.\n      \n      "We were amazed by the results," said lead researcher Dr. Janet Hennessy. "It seems that the chicken somehow managed to lay an egg before it even existed. It\'s a real chicken-and-egg paradox."\n      \n      The study, which involved observing hundreds of chickens on a farm, found that the birds would lay eggs and then, a short time later, a fully-formed chicken would emerge from the shell.\n      \n      "We always thought that the egg came first and the chicken was born from it," said Hennessy. "But it turns out, the chicken was there all along, just waiting to hatch."\n      \n      The findings have caused quite a stir in the scientific community, with many experts calling for further research to be done on the mysterious life cycle of the chicken.\n      \n      "It\'s a groundbreaking discovery that will change the way we think about the chicken and the egg," said Hennessy. "Who knows what other secrets these amazing creatures may be hiding?"',
+    summary:
+      'In a shocking new study, scientists have finally determined the age-old question of whether the chicken or the egg came first. And it turns out, the answer is both!\n      According to the research, the egg actually came first — but only after the chicken had already laid it.\n      \n      "We were amazed by the results," said lead researcher Dr. Janet Hennessy. "It seems that the chicken somehow managed to lay an egg before it even existed. It\'s a real chicken-and-egg paradox."\n      \n      The study, which involved observing hundreds of chickens on a farm, found that the birds would lay eggs and then, a short time later, a fully-formed chicken would emerge from the shell.\n      \n      "We always thought that the egg came first and the chicken was born from it," said Hennessy. "But it turns out, the chicken was there all along, just waiting to hatch."\n      \n      The findings have caused quite a stir in the scientific community, with many experts calling for further research to be done on the mysterious life cycle of the chicken.\n      \n      "It\'s a groundbreaking discovery that will change the way we think about the chicken and the egg," said Hennessy. "Who knows what other secrets these amazing creatures may be hiding?"',
     authorID: "30",
     createdAt: "2020-01-01T00:00:00.000Z",
     attachments: [

newsfeed/src/components/App.tsx

@@ -1,16 +1,17 @@
-import * as React from "react";
+import { Suspense } from "react";
+
 import RelayEnvironment from "../relay/RelayEnvironment";
-import Newsfeed from "./Newsfeed";
 import LoadingSpinner from "./LoadingSpinner";
+import Newsfeed from "./Newsfeed";
 
-export default function App(): React.ReactElement {
+export default function App() {
   return (
     <RelayEnvironment>
-      <React.Suspense fallback={<LoadingSpinner />}>
+      <Suspense fallback={<LoadingSpinner />}>
         <div className="app">
           <Newsfeed />
         </div>
-      </React.Suspense>
+      </Suspense>
     </RelayEnvironment>
   );
 }

newsfeed/src/components/Card.tsx

@@ -1,11 +1,11 @@
-import * as React from "react";
+import { ReactNode } from "react";
 
 export default function Card({
   children,
   dim,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
   dim?: boolean;
-}): React.ReactElement {
+}) {
   return <div className={"card" + (dim ? " dim" : "")}>{children}</div>;
 }

newsfeed/src/components/CategorySelector.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import SmallSpinner from "./SmallSpinner";
 
 // In a real app this would be imported from NewsfeedQuery.graphql; it is only defined
@@ -18,7 +17,7 @@ export default function CategorySelector({
   value: Category;
   onChange: (newValue: Category) => void;
   isPending?: boolean;
-}): React.ReactElement {
+}) {
   return (
     <div>
       <select value={value} onChange={(e) => onChange(coerce(e.target.value))}>

newsfeed/src/components/Comment.tsx

@@ -1,10 +1,8 @@
-import * as React from "react";
+import { useFragment } from "react-relay";
+import { graphql } from "relay-runtime";
 
 import type { CommentFragment$key } from "./__generated__/CommentFragment.graphql";
 
-import { graphql } from "relay-runtime";
-import { useFragment } from "react-relay";
-
 const CommentFragment = graphql`
   fragment CommentFragment on Comment {
     text
@@ -15,7 +13,7 @@ type Props = {
   comment: CommentFragment$key;
 };
 
-export default function Comment({ comment }: Props): React.ReactElement {
+export default function Comment({ comment }: Props) {
   const data = useFragment(CommentFragment, comment);
   return <div className="comment">{data.text}</div>;
 }

newsfeed/src/components/Heading.tsx

@@ -1,9 +1,5 @@
-import * as React from "react";
+import { ReactNode } from "react";
 
-export default function Heading({
-  children,
-}: {
-  children: React.ReactNode;
-}): React.ReactElement {
+export default function Heading({ children }: { children: ReactNode }) {
   return <h2 className="heading">{children}</h2>;
 }

newsfeed/src/components/Hovercard.tsx

@@ -1,8 +1,7 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-import LoadingSpinner from "./LoadingSpinner";
+import { Suspense, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 
-const { useEffect, useState } = React;
+import LoadingSpinner from "./LoadingSpinner";
 
 export type Props = {
   children: React.ReactElement;
@@ -40,15 +39,15 @@ export default function Hovercard({
   if (!hoverState) {
     return null;
   }
-  return ReactDOM.createPortal(
+  return createPortal(
     <div
       className="hovercard"
       style={{
         top: hoverState.y + "px",
         left: hoverState.x + "px",
       }}
     >
-      <React.Suspense fallback={<LoadingSpinner />}>{children}</React.Suspense>
+      <Suspense fallback={<LoadingSpinner />}>{children}</Suspense>
     </div>,
     document.body
   );

newsfeed/src/components/Image.tsx

@@ -1,5 +1,3 @@
-import * as React from "react";
-
 type Props = {
   image: {
     url: string;
@@ -9,12 +7,7 @@ type Props = {
   className?: string;
 };
 
-export default function Image({
-  image,
-  width,
-  height,
-  className,
-}: Props): React.ReactElement {
+export default function Image({ image, width, height, className }: Props) {
   if (image == null) {
     return null;
   }

newsfeed/src/components/LoadMoreCommentsButton.tsx

@@ -1,14 +1,9 @@
-import * as React from "react";
-
 type Props = {
   onClick: () => void;
   disabled?: boolean;
 };
 
-export default function LoadMoreCommentsButton({
-  onClick,
-  disabled,
-}: Props): React.ReactElement {
+export default function LoadMoreCommentsButton({ onClick, disabled }: Props) {
   return (
     <button
       onClick={onClick}

newsfeed/src/components/LoadingSpinner.tsx

@@ -1,6 +1,4 @@
-import * as React from "react";
-
-export default function LoadingSpinner({}): React.ReactElement {
+export default function LoadingSpinner({}) {
   return (
     <div className="loading-spinner-wrapper">
       <div className="loading-spinner">

newsfeed/src/components/Newsfeed.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import Story from "./Story";
 
 export default function Newsfeed() {

newsfeed/src/components/OrganizationKind.tsx

@@ -1,8 +1,3 @@
-import * as React from "react";
-
-import { graphql } from "relay-runtime";
-import { useFragment } from "react-relay";
-
 // In a real app this would be imported from PosterBylineFragment.graphql; it is only defined
 // separately here to make the step-by-step examples work when partially completed.
 type OrganizationKind =
@@ -16,9 +11,7 @@ type Props = {
   kind: OrganizationKind;
 };
 
-export default function OrganizationKind({
-  kind,
-}: Props): React.ReactElement {
+export default function OrganizationKind({ kind }: Props) {
   return <div className="byline__detail">{label(kind)}</div>;
 }
 

newsfeed/src/components/PosterByline.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import Image from "./Image";
 
 export type Props = {
@@ -10,7 +9,7 @@ export type Props = {
   };
 };
 
-export default function PosterByline({ poster }: Props): React.ReactElement {
+export default function PosterByline({ poster }: Props) {
   if (poster == null) {
     return null;
   }

newsfeed/src/components/PosterBylineLocation.tsx

@@ -1,10 +1,8 @@
-import * as React from "react";
+import { useFragment } from "react-relay";
+import { graphql } from "relay-runtime";
 
 import type { PosterBylineLocationFragment$key } from "./__generated__/PosterBylineLocationFragment.graphql";
 
-import { graphql } from "relay-runtime";
-import { useFragment } from "react-relay";
-
 const PosterBylineLocationFragment = graphql`
   fragment PosterBylineLocationFragment on Location {
     name
@@ -15,9 +13,7 @@ type Props = {
   location: PosterBylineLocationFragment$key;
 };
 
-export default function PosterBylineLocation({
-  location,
-}: Props): React.ReactElement {
+export default function PosterBylineLocation({ location }: Props) {
   const data = useFragment(PosterBylineLocationFragment, location);
   return <div className="byline__detail">{data.name}</div>;
 }

newsfeed/src/components/SearchInput.tsx

@@ -1,5 +1,3 @@
-import * as React from "react";
-
 import SmallSpinner from "./SmallSpinner";
 
 export type Props = {

newsfeed/src/components/SmallSpinner.tsx

@@ -1,5 +1,3 @@
-import * as React from "react";
-
-export default function SmallSpinner({}): React.ReactElement {
+export default function SmallSpinner({}) {
   return <div className="small-spinner"></div>;
 }

newsfeed/src/components/Story.tsx

@@ -1,9 +1,8 @@
-import * as React from "react";
 import Card from "./Card";
 import Heading from "./Heading";
+import Image from "./Image";
 import PosterByline, { type Props as PosterBylineProps } from "./PosterByline";
 import StorySummary from "./StorySummary";
-import Image from "./Image";
 
 type Props = {
   story: {
@@ -16,7 +15,7 @@ type Props = {
   };
 };
 
-export default function Story({ story }: Props): React.ReactElement {
+export default function Story({ story }: Props) {
   return (
     <Card>
       <PosterByline poster={story.poster} />

newsfeed/src/components/StoryCommentsComposer.tsx

@@ -1,11 +1,9 @@
-import * as React from "react";
-import { graphql } from "relay-runtime";
+import { useState } from "react";
 import { useFragment } from "react-relay";
+import { graphql } from "relay-runtime";
 
 import type { StoryCommentsComposerFragment$key } from "./__generated__/StoryCommentsComposerFragment.graphql";
 
-const { useState } = React;
-
 export type Props = {
   story: StoryCommentsComposerFragment$key;
 };

newsfeed/src/components/StoryCommentsSection.tsx

@@ -1,11 +1,9 @@
-import * as React from "react";
-import { graphql } from "relay-runtime";
 import { useFragment } from "react-relay";
+import { graphql } from "relay-runtime";
+
 import type { StoryCommentsSectionFragment$key } from "./__generated__/StoryCommentsSectionFragment.graphql";
 import Comment from "./Comment";
 
-const { useState, useTransition } = React;
-
 export type Props = {
   story: StoryCommentsSectionFragment$key;
 };

newsfeed/src/components/StoryLikeButton.tsx

@@ -1,6 +1,5 @@
-import * as React from "react";
-import { graphql } from "relay-runtime";
 import { useFragment } from "react-relay";
+import { graphql } from "relay-runtime";
 
 import type { StoryLikeButtonFragment$key } from "./__generated__/StoryLikeButtonFragment.graphql";
 
@@ -16,7 +15,7 @@ const StoryLikeButtonFragment = graphql`
   }
 `;
 
-export default function StoryLikeButton({ story }: Props): React.ReactElement {
+export default function StoryLikeButton({ story }: Props) {
   const data = useFragment<StoryLikeButtonFragment$key>(
     StoryLikeButtonFragment,
     story

newsfeed/src/components/playground/GraphiQL.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
 import { GraphiQL as GraphQLPlayground, GraphiQLProviderProps } from "graphiql";
 import "graphiql/graphiql.css";
+import { useState } from "react";
 
 const defaultQuery = `
 query MyQuery {
@@ -30,7 +30,7 @@ const fetcher: GraphiQLProviderProps["fetcher"] = async (
 };
 
 export default function GraphiQL() {
-  const [query, setQuery] = React.useState("");
+  const [query, setQuery] = useState("");
 
   return (
     <GraphQLPlayground

newsfeed/src/index.tsx

@@ -1,9 +1,8 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom/client";
-import "./style.css";
+import { createRoot } from "react-dom/client";
 
 import App from "./components/App";
 import GraphiQL from "./components/playground/GraphiQL";
+import "./style.css";
 
 function Routes() {
   if (window.location.pathname === "/playground") {
@@ -12,5 +11,5 @@ function Routes() {
   return <App />;
 }
 
-const root = ReactDOM.createRoot(document.getElementById("app"));
+const root = createRoot(document.getElementById("app"));
 root.render(<Routes />);

newsfeed/src/relay/RelayEnvironment.tsx

@@ -1,13 +1,13 @@
-import * as React from "react";
-import { useMemo } from "react";
+import { ReactNode, useMemo } from "react";
 import { RelayEnvironmentProvider } from "react-relay";
+
 import { createEnvironment } from "./environment";
 
 export default function RelayEnvironment({
   children,
 }: {
-  children: React.ReactNode;
-}): React.ReactElement {
+  children: ReactNode;
+}) {
   const environment = useMemo(() => {
     return createEnvironment();
   }, []);

newsfeed/src/relay/environment.ts

@@ -1,11 +1,11 @@
+import type { FetchFunction, IEnvironment } from "relay-runtime";
 import {
-  Store,
-  RecordSource,
   Environment,
   Network,
   Observable,
+  RecordSource,
+  Store,
 } from "relay-runtime";
-import type { FetchFunction, IEnvironment } from "relay-runtime";
 
 const fetchFn: FetchFunction = (params, variables) => {
   const response = fetch("/api", {