Merge pull request #23 from python-discord/build/new-process

Introduce new build system: SWC

11 files changed, 92 insertions, 32 deletions

diff --git a/src/App.tsx b/src/App.tsx
index 19ba6a6..56aff08 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,6 @@
 /** @jsx jsx */
 /** @global location */
+import React, { Suspense } from "react";
 import { jsx, Global } from "@emotion/core";
 
 import {
@@ -8,14 +9,16 @@ import {
   Switch
 } from "react-router-dom";
 
-import { CSSTransition, TransitionGroup } from "react-transition-group";
+import { HashLoader } from "react-spinners";
 
-import LandingPage from "./pages/LandingPage";
-import FormPage from "./pages/FormPage";
-import CallbackPage from "./pages/CallbackPage";
+import { CSSTransition, TransitionGroup } from "react-transition-group";
 
 import globalStyles from "./globalStyles";
 
+const LandingPage = React.lazy(() => import("./pages/LandingPage"));
+const FormPage = React.lazy(() => import("./pages/FormPage"));
+const CallbackPage = React.lazy(() => import("./pages/CallbackPage"));
+
 const routes = [
   { path: "/", Component: LandingPage },
   { path: "/form/:id", Component: FormPage},
@@ -36,7 +39,11 @@ function App() {
             >
               <Switch location={location}>
                 {routes.map(({path, Component}) => (
-                  <Route key={path} exact path={path} component={Component}/>
+                  <Route exact key={path} path={path}>
+                    <Suspense fallback={<HashLoader color="white"/>}>
+                      <Component/>
+                    </Suspense>
+                  </Route>
                 ))}
               </Switch>
             </CSSTransition>
diff --git a/src/components/HeaderBar/header_1.svg b/src/components/HeaderBar/header_1.svg
index e7db64c..c9349e5 100644
--- a/src/components/HeaderBar/header_1.svg
+++ b/src/components/HeaderBar/header_1.svg
@@ -1,3 +1,3 @@
-<svg width="1440" height="264" viewBox="0 0 1440 264" fill="none" id="header_1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 1440 264" fill="none" id="header_1" xmlns="http://www.w3.org/2000/svg">
 <path d="M-5.85724 -6.18774V109.725C71.6463 154.832 238.796 275.611 529.296 262.865C819.777 250.113 820.413 92.4954 1447.77 223.42V-6.18451L-5.85724 -6.18774Z" fill="#AFB8F0"/>
 </svg>
diff --git a/src/components/HeaderBar/header_2.svg b/src/components/HeaderBar/header_2.svg
index e17b3e6..6e82067 100644
--- a/src/components/HeaderBar/header_2.svg
+++ b/src/components/HeaderBar/header_2.svg
@@ -1,3 +1,3 @@
-<svg width="1440" height="293" viewBox="0 0 1440 293" fill="none" id="header_2" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 1440 293" fill="none" id="header_2" xmlns="http://www.w3.org/2000/svg">
 <path opacity="1" d="M1447.27 -6.18774V132.565C1428.83 231.124 1378.94 292.543 1114.48 292.543C775.159 292.543 477.003 5.74973 -6.39087 232.513V-6.18713L1447.27 -6.18774Z" fill="#7289DA"/>
 </svg>
diff --git a/src/components/HeaderBar/index.tsx b/src/components/HeaderBar/index.tsx
index c3d46fc..8928a08 100644
--- a/src/components/HeaderBar/index.tsx
+++ b/src/components/HeaderBar/index.tsx
@@ -1,9 +1,8 @@
 /** @jsx jsx */
 import { css, jsx } from "@emotion/core";
-import SVG from "react-inlinesvg";
 
-import header1 from "./header_1.svg";
-import header2 from "./header_2.svg";
+import Header1 from "./header_1.svg";
+import Header2 from "./header_2.svg";
 
 interface HeaderBarProps {
   title?: string
@@ -15,10 +14,6 @@ top: 0;
 position: absolute;
 width: 100%;
 transition: height 1s;
-
-@media (max-width: 770px) {
-  height: 140px;
-}
 `;
 
 function HeaderBar({ title }: HeaderBarProps) {
@@ -28,8 +23,8 @@ function HeaderBar({ title }: HeaderBarProps) {
   
   return <div>
     <div>
-      <SVG src={header1} css={headerImageStyles}/>
-      <SVG src={header2} css={headerImageStyles}/>
+      <Header1 css={headerImageStyles}/>
+      <Header2 css={headerImageStyles}/>
     </div>
     <h1 css={css`
       font-size: 4vw;
diff --git a/src/index.tsx b/src/index.tsx
index 783d34f..fd6ec18 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -38,6 +38,10 @@ ReactDOM.render(
       dialogOptions={{
         title: "You've found a bug in PyDis forms!"
       }}
+      onError={(err) => {
+        if(process.env.NODE_ENV === "development")
+          console.log(err)
+      }}
     >
       <App />
     </Sentry.ErrorBoundary>
@@ -45,7 +49,4 @@ ReactDOM.render(
   document.getElementById('root')
 );
 
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
 serviceWorker.unregister();
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
index 6431bc5..981cd73 100644
--- a/src/react-app-env.d.ts
+++ b/src/react-app-env.d.ts
@@ -1 +1,66 @@
-/// <reference types="react-scripts" />
+/// <reference types="node" />
+/// <reference types="react" />
+/// <reference types="react-dom" />
+
+declare namespace NodeJS {
+  interface ProcessEnv {
+    readonly NODE_ENV: 'development' | 'production' | 'test';
+    readonly PUBLIC_URL: string;
+  }
+}
+
+declare module '*.bmp' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.gif' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpeg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.webp' {
+    const src: string;
+    export default src;
+}
+
+declare module '*.svg' {
+  import * as React from 'react';
+
+  export const ReactComponent: React.FunctionComponent<React.SVGProps<
+    SVGSVGElement
+  > & { title?: string }>;
+
+  const src: string;
+  export default src;
+}
+
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
diff --git a/src/serviceWorker.ts b/src/serviceWorker.ts
index b09523f..2b4d2b5 100644
--- a/src/serviceWorker.ts
+++ b/src/serviceWorker.ts
@@ -1,15 +1,3 @@
-// This optional code is used to register a service worker.
-// register() is not called by default.
-
-// This lets the app load faster on subsequent visits in production, and gives
-// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on subsequent visits to a page, after all the
-// existing tabs open on the page have been closed, since previously cached
-// resources are updated in the background.
-
-// To learn more about the benefits of this model and instructions on how to
-// opt-in, read https://bit.ly/CRA-PWA
-
 const isLocalhost = Boolean(
   window.location.hostname === 'localhost' ||
     // [::1] is the IPv6 localhost address.
diff --git a/src/tests/components/FormListing.test.tsx b/src/tests/components/FormListing.test.tsx
index 82d1380..5062a95 100644
--- a/src/tests/components/FormListing.test.tsx
+++ b/src/tests/components/FormListing.test.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 import FormListing from "../../components/FormListing";
 
 import { BrowserRouter as Router } from 'react-router-dom';
diff --git a/src/tests/components/HeaderBar.test.tsx b/src/tests/components/HeaderBar.test.tsx
index 2e1f868..6963859 100644
--- a/src/tests/components/HeaderBar.test.tsx
+++ b/src/tests/components/HeaderBar.test.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect'
 import HeaderBar from "../../components/HeaderBar";
 
 test('renders header bar with title', () => {
diff --git a/src/tests/components/OAuth2Button.test.tsx b/src/tests/components/OAuth2Button.test.tsx
index 53875dc..49c0f8a 100644
--- a/src/tests/components/OAuth2Button.test.tsx
+++ b/src/tests/components/OAuth2Button.test.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 import OAuth2Button from "../../components/OAuth2Button";
 
 test('renders oauth2 sign in button text', () => {
diff --git a/src/tests/components/Tag.test.tsx b/src/tests/components/Tag.test.tsx
index 67f2a85..26c8afb 100644
--- a/src/tests/components/Tag.test.tsx
+++ b/src/tests/components/Tag.test.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 import Tag from "../../components/Tag";
 
 test('renders tag with specified text', () => {