Update/react imports

.changeset/honest-apples-guess.md

@@ -0,0 +1,21 @@
+---
+"@frontity/analytics": minor
+"@frontity/components": minor
+"@frontity/comscore-analytics": minor
+"@frontity/connect": minor
+"@frontity/core": minor
+"frontity": minor
+"@frontity/google-ad-manager": minor
+"@frontity/google-analytics": minor
+"@frontity/google-tag-manager-analytics": minor
+"@frontity/head-tags": minor
+"@frontity/hooks": minor
+"@frontity/html2react": minor
+"@frontity/mars-theme": minor
+"@frontity/smart-adserver": minor
+"@frontity/twentytwenty-theme": minor
+"@frontity/types": minor
+"@frontity/yoast": minor
+---
+
+Update react imports in all packages (including themes) to removed unnecessary React Imports

e2e/packages/ads/src/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { Slot, connect } from "frontity";
 import { Connect } from "frontity/types";
 import TestAds, { Packages } from "../types";

e2e/packages/analytics/src/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { Head, connect } from "frontity";
 import { Connect } from "frontity/types";
 import Analytics, { Packages } from "../types";

e2e/packages/emotion/src/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { useState } from "react";
 import { Global, css, connect, styled } from "frontity";
 import Package from "../types";
 
@@ -8,7 +8,7 @@ import Package from "../types";
  * @returns React element.
  */
 const GlobalBackgroundBlue = () => {
-  const [global, setGlobal] = React.useState(false);
+  const [global, setGlobal] = useState(false);
   return (
     <>
       {global && (
@@ -34,7 +34,7 @@ const GlobalBackgroundBlue = () => {
  * @returns React element.
  */
 const GlobalColorRed = () => {
-  const [global, setGlobal] = React.useState(false);
+  const [global, setGlobal] = useState(false);
   return (
     <>
       {global && (
@@ -94,7 +94,7 @@ const CSS = ({ children, color }) => (
  * @returns React element.
  */
 const StyledPage = () => {
-  const [isBlue, setIsBlue] = React.useState(false);
+  const [isBlue, setIsBlue] = useState(false);
   return (
     <>
       <Styled color={isBlue && "blue"} data-test-id="styled-div">

e2e/packages/fonts/src/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { Global, css, connect, styled } from "frontity";
 import Package from "../types";
 import aclonicaEot from "./fonts/aclonica-v10-latin-regular.eot";

e2e/packages/head/src/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { Head } from "frontity";
 import Package from "../types";
 

e2e/packages/html2react/src/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { connect } from "frontity";
 import { Connect } from "frontity/types";
 import Html2ReactTests, { Packages } from "../types";

e2e/packages/html2react/src/processors.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { css } from "frontity";
 import { Processor, Node } from "@frontity/html2react/types";
 import Html2ReactTests from "../types";
@@ -15,7 +15,7 @@ export const testProcessor: Processor<
       `;
     }
     return node;
-  }
+  },
 };
 
 export const oldProcessor: Processor = ({
@@ -28,12 +28,12 @@ export const oldProcessor: Processor = ({
       node.children = [
         {
           type: "text",
-          content: root ? "Yes" : "No"
-        }
+          content: root ? "Yes" : "No",
+        },
       ];
     }
     return node;
-  }
+  },
 } as unknown) as Processor;
 
 export default [testProcessor, oldProcessor];

e2e/packages/iframe/src/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import Iframe from "@frontity/components/iframe";
 import Package from "../types";
 import { styled } from "frontity";

e2e/packages/image/src/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { Global, css, styled } from "frontity";
 import Image from "@frontity/components/image";
 import Package from "../types";

e2e/packages/loadable/src/dynamic-2/dynamic-2.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import Static from "../static";
 
 const Dynamic2: React.FC = () => {

e2e/packages/loadable/src/dynamic.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import Static from "./static";
 
 const Dynamic: React.FC = () => {

e2e/packages/loadable/src/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import Package from "../types";
 import { loadable } from "frontity";
 import Dynamic2 from "./dynamic-2";

e2e/packages/loadable/src/static.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 
 const Static: React.FC = () => {
   return <div>I am the Static component</div>;

e2e/packages/preview/src/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { connect, useConnect } from "frontity";
 import { isPostType, isError } from "@frontity/source";
 import Preview, { Packages } from "../types";

e2e/packages/render/src/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import Render, { Packages } from "../types";
 import { connect, useConnect } from "frontity";
 import { isPost, isPostArchive } from "@frontity/source";

e2e/packages/script/src/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import Script from "@frontity/components/script";
 import Package from "../types";
 

e2e/packages/slot-and-fill/src/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { connect, useConnect, useFills } from "frontity";
 import SlotAndFill from "../types";
 

e2e/packages/smart-adserver/src/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { connect, Slot } from "frontity";
 import SmartAdserver, { Packages } from "../types";
 import { Connect } from "frontity/types";

e2e/packages/switch/src/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import Switch from "@frontity/components/switch";
 import Package from "../types";
 

e2e/packages/tiny-router/src/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import TinyRouterTests, { Packages } from "../types";
 import { css, connect } from "frontity";
 import { Connect } from "frontity/types";

e2e/packages/use-in-view/src/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import useInView from "@frontity/hooks/use-in-view";
 import UseInView from "../types";
 

e2e/packages/wp-basic-tests/src/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { useConnect, connect } from "frontity";
 import Link from "@frontity/components/link";
 import { isPostType, isArchive } from "@frontity/source";

e2e/packages/wp-comments/src/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import TestComments, { Packages } from "../types";
 import { connect } from "frontity";
 import { Connect } from "frontity/types";

e2e/packages/wp-source-errors/src/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { connect } from "frontity";
 import { Connect } from "frontity/types";
 import { isError } from "@frontity/source";

jest.babel.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   presets: [
     ["@babel/preset-env", { targets: { node: "current" } }],
-    "@babel/preset-react",
+    ["@babel/preset-react", { runtime: "automatic" }],
   ],
   plugins: [
     [

packages/analytics/src/components/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { connect, Head } from "frontity";
 import { Connect } from "frontity/types";
 import { Packages } from "../../types";

packages/components/__tests__/iframe.jsdom.tests.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable no-global-assign */
+
 /**
  * @jest-environment jsdom
  */
 
-import React from "react";
 import TestRenderer from "react-test-renderer";
 import useInView from "@frontity/hooks/use-in-view";
 import Iframe from "../iframe";

packages/components/__tests__/iframe.node.tests.tsx

@@ -2,7 +2,6 @@
  * @jest-environment node
  */
 
-import React from "react";
 import TestRenderer from "react-test-renderer";
 import { HelmetProvider } from "frontity";
 import { FilledContext } from "react-helmet-async";

packages/components/__tests__/image.jsdom.tests.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable no-global-assign */
+
 /**
  * @jest-environment jsdom
  */
 
-import React from "react";
 import TestRenderer from "react-test-renderer";
 import useInView from "@frontity/hooks/use-in-view";
 import Image from "../image";

packages/components/__tests__/image.node.tests.tsx

@@ -2,7 +2,6 @@
  * @jest-environment node
  */
 
-import React from "react";
 import TestRenderer from "react-test-renderer";
 import { HelmetProvider } from "frontity";
 import { FilledContext } from "react-helmet-async";

packages/components/__tests__/switch.tests.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { create } from "react-test-renderer";
 import Switch from "../switch";
 

packages/components/iframe.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/iframe-has-title */
-import React from "react";
+import * as React from "react";
 import { connect, Head } from "frontity";
 import { Connect, Package } from "frontity/types";
 import useInView from "@frontity/hooks/use-in-view";

packages/components/image.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/alt-text */
 
-import React from "react";
+import * as React from "react";
 import { Head, connect } from "frontity";
 import { Connect, Package } from "frontity/types";
 import useInView from "@frontity/hooks/use-in-view";

packages/components/link/__tests__/link.tests.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { render, unmountComponentAtNode } from "react-dom";
 import { act } from "react-dom/test-utils";
 import { create } from "react-test-renderer";

packages/components/link/index.tsx

@@ -1,4 +1,5 @@
-import React, { MouseEvent, useEffect, useRef, useCallback } from "react";
+import { MouseEvent, useEffect, useRef, useCallback } from "react";
+import * as React from "react";
 import { warn, connect, useConnect } from "frontity";
 import useInView from "@frontity/hooks/use-in-view";
 import {

packages/components/script.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
+import * as React from "react";
 
 /**
  * Props passed to the {@link Script} component.

packages/components/switch.tsx

@@ -1,11 +1,12 @@
 import { connect, warn } from "frontity";
 import { Package } from "frontity/types";
-import React, {
+import {
   isValidElement,
   ReactNodeArray,
   ReactElement,
   createElement,
 } from "react";
+import * as React from "react";
 
 interface SwitchChild {
   when?: boolean;

packages/comscore-analytics/src/components/__tests__/index.tsx

@@ -2,7 +2,6 @@
  * @jest-environment node
  */
 
-import React from "react";
 import TestRenderer from "react-test-renderer";
 import { HelmetProvider } from "frontity";
 import { State } from "frontity/types";

packages/comscore-analytics/src/components/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { Head, connect } from "frontity";
 import { Connect } from "frontity/types";
 import ComscoreAnalytics from "../../types";

packages/comscore-analytics/types.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { Action, MergePackages, Package } from "frontity/types";
 import Analytics, { Pageview } from "@frontity/analytics/types";
 
@@ -89,6 +89,7 @@ interface ComscoreAnalytics extends Package {
    * Package name.
    */
   name: "@frontity/comscore-analytics";
+
   /**
    * Root elements exposed by this package.
    */

packages/connect/src/__tests__/batching.tests.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { create, act } from "react-test-renderer";
 import connect, { Provider, createStore, batch } from "..";
 

packages/connect/src/__tests__/connect.tests.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { create, act } from "react-test-renderer";
 import * as error from "@frontity/error";
 import connect, { Provider, createStore, useConnect } from "..";

packages/connect/src/__tests__/types.tests.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars, jest/expect-expect */
-import React from "react";
+import * as React from "react";
 import connect, { useConnect, createStore, Action, Derived, Connect } from "..";
 
 const delay = () => new Promise((resolve) => setTimeout(resolve, 100));

packages/core/src/app/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import {
   InitializedStore,
   Provider as ConnectProvider,

packages/core/src/client/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { hydrate } from "react-dom";
 import { loadableReady } from "@loadable/component";
 import { getSnapshot } from "@frontity/connect";

packages/core/src/server/index.tsx

@@ -3,7 +3,6 @@ import Koa from "koa";
 import { get } from "koa-route";
 import serve from "koa-static";
 import mount from "koa-mount";
-import React from "react";
 import htmlescape from "htmlescape";
 import { renderToString, renderToStaticMarkup } from "react-dom/server";
 import { FilledContext } from "react-helmet-async";

packages/core/src/utils/__tests__/merge-packages.tests.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import mergePackages from "../merge-packages";
 
 class MyLib {

packages/frontity/src/utils/slot-and-fill/__tests__/slot.tests.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import {
   create,
   ReactTestRenderer,