Update import/export style

remix-run · Sep 23, 2019 · 0f29d23 · 0f29d23
1 parent 443126b
commit 0f29d23
Show file tree

Hide file tree

Showing 36 changed files with 186 additions and 257 deletions.
diff --git a/website/modules/components/API.js b/website/modules/components/API.js
@@ -8,7 +8,7 @@ import MarkdownViewer from "./MarkdownViewer";
 
 // nearly identical to Guide, haven't taken the time to abstact cause I'm not sure it'll
 // remain so identical ... maybe it will?
-class API extends Component {
+export default class API extends Component {
   static propTypes = {
     match: PropTypes.object,
     data: PropTypes.object
@@ -31,12 +31,10 @@ class API extends Component {
           ))}
         </Block>
         {mod && !doc && <Redirect to={`/${environment}/api`} />}
-        {headerParam &&
-          doc &&
-          !header && <Redirect to={`/${environment}/api/${mod}`} />}
+        {headerParam && doc && !header && (
+          <Redirect to={`/${environment}/api/${mod}`} />
+        )}
       </Block>
     );
   }
 }
-
-export default API;
diff --git a/website/modules/components/APISmall.js b/website/modules/components/APISmall.js
@@ -3,10 +3,10 @@ import { Redirect, Route } from "react-router-dom";
 import { Block } from "jsxstyle";
 import PropTypes from "prop-types";
 
-import ScrollToDoc from "./ScrollToDoc";
-import MarkdownViewer from "./MarkdownViewer";
+import ScrollToDoc from "./ScrollToDoc.js";
+import MarkdownViewer from "./MarkdownViewer.js";
 
-class APISmall extends Component {
+export default class APISmall extends Component {
   static propTypes = {
     match: PropTypes.object,
     data: PropTypes.object
@@ -51,5 +51,3 @@ class APISmall extends Component {
     );
   }
 }
-
-export default APISmall;
diff --git a/website/modules/components/App.js b/website/modules/components/App.js
@@ -1,12 +1,12 @@
 import React from "react";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 
-import DelegateMarkdownLinks from "./DelegateMarkdownLinks";
-import Home from "./Home";
-import Environment from "./Environment";
-import basename from "../basename";
+import basename from "../basename.js";
+import DelegateMarkdownLinks from "./DelegateMarkdownLinks.js";
+import Home from "./Home/index.js";
+import Environment from "./Environment.js";
 
-function App() {
+export default function App() {
   return (
     <Router basename={basename}>
       <DelegateMarkdownLinks>
@@ -18,5 +18,3 @@ function App() {
     </Router>
   );
 }
-
-export default App;
diff --git a/website/modules/components/Bundle.js b/website/modules/components/Bundle.js
@@ -1,18 +1,13 @@
 import { useState, useEffect } from "react";
 
-function Bundle({ children, load }) {
+export default function Bundle({ children, load }) {
   const [mod, setMod] = useState();
 
-  useEffect(
-    () => {
-      load(mod => {
-        setMod(mod.default ? mod.default : mod);
-      });
-    },
-    [load]
-  );
+  useEffect(() => {
+    load(mod => {
+      setMod(mod.default ? mod.default : mod);
+    });
+  }, [load]);
 
   return children(mod);
 }
-
-export default Bundle;
diff --git a/website/modules/components/DelegateMarkdownLinks.js b/website/modules/components/DelegateMarkdownLinks.js
@@ -2,7 +2,7 @@ import { Component } from "react";
 import PropTypes from "prop-types";
 import { withRouter } from "react-router-dom";
 
-import basename from "../basename";
+import basename from "../basename.js";
 
 const matchBase = new RegExp(`^${basename}`);
 

diff --git a/website/modules/components/Environment.js b/website/modules/components/Environment.js
@@ -2,19 +2,19 @@ import React, { useEffect } from "react";
 import { Redirect } from "react-router-dom";
 import PropTypes from "prop-types";
 
-import EnvironmentLarge from "./EnvironmentLarge";
-import EnvironmentSmall from "./EnvironmentSmall";
-import Bundle from "./Bundle";
-import SmallScreen from "./SmallScreen";
-import Loading from "./Loading";
+import EnvironmentLarge from "./EnvironmentLarge.js";
+import EnvironmentSmall from "./EnvironmentSmall.js";
+import Bundle from "./Bundle.js";
+import SmallScreen from "./SmallScreen.js";
+import Loading from "./Loading.js";
 
 const envData = {
   web: require("bundle-loader?lazy!../docs/Web"),
   native: require("bundle-loader?lazy!../docs/Native"),
   core: require("bundle-loader?lazy!../docs/Core")
 };
 
-function Environment({
+export default function Environment({
   history,
   location,
   match,
@@ -65,5 +65,3 @@ Environment.propTypes = {
     })
   })
 };
-
-export default Environment;
diff --git a/website/modules/components/EnvironmentHeader.js b/website/modules/components/EnvironmentHeader.js
@@ -3,8 +3,8 @@ import { Link, Route } from "react-router-dom";
 import { Block, Row, Inline, Col } from "jsxstyle";
 import PropTypes from "prop-types";
 
-import { LIGHT_GRAY, RED } from "../Theme";
-import Logo from "./Logo";
+import { LIGHT_GRAY, RED } from "../Theme.js";
+import Logo from "./Logo.js";
 
 function Tab({ to, ...rest }) {
   return (
@@ -79,13 +79,11 @@ function Branding() {
   );
 }
 
-function EnvironmentHeader() {
+export default function EnvironmentHeader() {
   return (
     <Block>
       <Branding />
       <Tabs />
     </Block>
   );
 }
-
-export default EnvironmentHeader;
diff --git a/website/modules/components/EnvironmentLarge.js b/website/modules/components/EnvironmentLarge.js
@@ -3,24 +3,21 @@ import PropTypes from "prop-types";
 import { Block, InlineBlock } from "jsxstyle";
 import { Link, Route, Redirect, Switch } from "react-router-dom";
 
-import { LIGHT_GRAY, RED } from "../Theme";
-import EnvironmentHeader from "./EnvironmentHeader";
-import Example from "./Example";
-import Guide from "./Guide";
-import API from "./API";
-
-function EnvironmentLarge({ data, match }) {
-  useEffect(
-    () => {
-      data.examples.forEach(example => {
-        // native doesn't have `load`
-        if (example.load) example.load(() => {});
-        // all have `loadSource`
-        if (example.loadSource) example.loadSource(() => {});
-      });
-    },
-    [data]
-  );
+import { LIGHT_GRAY, RED } from "../Theme.js";
+import EnvironmentHeader from "./EnvironmentHeader.js";
+import Example from "./Example.js";
+import Guide from "./Guide.js";
+import API from "./API.js";
+
+export default function EnvironmentLarge({ data, match }) {
+  useEffect(() => {
+    data.examples.forEach(example => {
+      // native doesn't have `load`
+      if (example.load) example.load(() => {});
+      // all have `loadSource`
+      if (example.loadSource) example.loadSource(() => {});
+    });
+  }, [data]);
 
   return (
     <Fragment>
@@ -108,22 +105,21 @@ function NavLinks({ data, environment }) {
           </Block>
         </Block>
       </Block>
-      {Array.isArray(data.examples) &&
-        data.examples.length > 0 && (
-          <Block>
-            <Title>Examples</Title>
-            <Block paddingLeft="10px">
-              {data.examples.map((item, i) => (
-                <NavLink
-                  key={i}
-                  to={`/${environment}/example/${item.slug}`}
-                  triangleColor="rgb(45, 45, 45)"
-                  children={item.label}
-                />
-              ))}
-            </Block>
+      {Array.isArray(data.examples) && data.examples.length > 0 && (
+        <Block>
+          <Title>Examples</Title>
+          <Block paddingLeft="10px">
+            {data.examples.map((item, i) => (
+              <NavLink
+                key={i}
+                to={`/${environment}/example/${item.slug}`}
+                triangleColor="rgb(45, 45, 45)"
+                children={item.label}
+              />
+            ))}
           </Block>
-        )}
+        </Block>
+      )}
 
       <Title>Guides</Title>
       <Block paddingLeft="10px">
@@ -230,5 +226,3 @@ Content.propTypes = {
   data: PropTypes.object,
   match: PropTypes.object
 };
-
-export default EnvironmentLarge;
diff --git a/website/modules/components/EnvironmentSmall.js b/website/modules/components/EnvironmentSmall.js
@@ -5,19 +5,19 @@ import ChevronLeft from "react-icons/lib/md/chevron-left";
 import PropTypes from "prop-types";
 import { Block, Col } from "jsxstyle";
 
-import EnvironmentHeader from "./EnvironmentHeader";
-import { RED } from "../Theme";
-import Example from "./Example";
-import API from "./APISmall";
-import Guide from "./Guide";
+import EnvironmentHeader from "./EnvironmentHeader.js";
+import { RED } from "../Theme.js";
+import Example from "./Example.js";
+import API from "./APISmall.js";
+import Guide from "./Guide.js";
 
 const paths = {
   api: match => `${match.path}/api/:mod`,
   example: match => `${match.path}/example/:example`,
   guide: match => `${match.path}/guides/:mod/:header?`
 };
 
-class EnvironmentSmall extends Component {
+export default class EnvironmentSmall extends Component {
   static propTypes = {
     data: PropTypes.object,
     match: PropTypes.object,
@@ -532,21 +532,20 @@ class Nav extends Component {
         overflow="scroll"
         paddingTop="150px"
       >
-        {Array.isArray(data.examples) &&
-          data.examples.length > 0 && (
+        {Array.isArray(data.examples) && data.examples.length > 0 && (
+          <Block>
+            <Title>Examples</Title>
             <Block>
-              <Title>Examples</Title>
-              <Block>
-                {data.examples.map((item, i) => (
-                  <NavLink
-                    key={i}
-                    to={`/${environment}/example/${item.slug}`}
-                    children={item.label}
-                  />
-                ))}
-              </Block>
+              {data.examples.map((item, i) => (
+                <NavLink
+                  key={i}
+                  to={`/${environment}/example/${item.slug}`}
+                  children={item.label}
+                />
+              ))}
             </Block>
-          )}
+          </Block>
+        )}
 
         <Block>
           <Title>Guides</Title>
@@ -584,5 +583,3 @@ class Nav extends Component {
     );
   }
 }
-
-export default EnvironmentSmall;
diff --git a/website/modules/components/Example.js b/website/modules/components/Example.js
@@ -1,9 +1,10 @@
 import React from "react";
 import { Redirect } from "react-router-dom";
 import PropTypes from "prop-types";
-import SandboxExample from "./SandboxExample";
 
-function Example({ data, match }) {
+import SandboxExample from "./SandboxExample.js";
+
+export default function Example({ data, match }) {
   const { example: exampleParam, environment } = match.params;
   const example = data.examples.find(e => e.slug === exampleParam);
   const isNative = environment === "native";
@@ -49,5 +50,3 @@ Example.propTypes = {
     })
   })
 };
-
-export default Example;
diff --git a/website/modules/components/Footer.js b/website/modules/components/Footer.js
@@ -1,8 +1,8 @@
 import React from "react";
 import { Block, Inline } from "jsxstyle";
 
-import { DARK_GRAY, BRIGHT_GRAY, LIGHT_GRAY } from "../Theme";
-import MailingListSignup from "./MailingListSignup";
+import { DARK_GRAY, BRIGHT_GRAY, LIGHT_GRAY } from "../Theme.js";
+import MailingListSignup from "./MailingListSignup.js";
 
 function FooterLink({ href, ...rest }) {
   return (
@@ -39,7 +39,7 @@ function CC() {
 
 const year = new Date().getFullYear();
 
-function Footer() {
+export default function Footer() {
   return (
     <Block>
       <MailingListSignup />
@@ -64,5 +64,3 @@ function Footer() {
     </Block>
   );
 }
-
-export default Footer;
diff --git a/website/modules/components/Guide.js b/website/modules/components/Guide.js
@@ -3,11 +3,11 @@ import PropTypes from "prop-types";
 import { Redirect, Route } from "react-router-dom";
 import { Block } from "jsxstyle";
 
-import ScrollToDoc from "./ScrollToDoc";
-import MarkdownViewer from "./MarkdownViewer";
+import ScrollToDoc from "./ScrollToDoc.js";
+import MarkdownViewer from "./MarkdownViewer.js";
 
 // almost identical to `API`, but I'm lazy rn
-function Guide({ match, data }) {
+export default function Guide({ match, data }) {
   const {
     params: { mod, header: headerParam, environment }
   } = match;
@@ -45,5 +45,3 @@ Guide.propTypes = {
   match: PropTypes.object,
   data: PropTypes.object
 };
-
-export default Guide;