chore(website): enable eslint in website (#5889)

* chore: enable eslint in website

* Fixes

* prettier users

.eslintignore

@@ -6,7 +6,6 @@ build
 coverage
 jest.config.js
 jest.transform.js
-website/
 scripts
 examples/
 

.eslintrc.js

@@ -49,7 +49,16 @@ module.exports = {
     // Ignore certain webpack alias because it can't be resolved
     'import/no-unresolved': [
       ERROR,
-      {ignore: ['^@theme', '^@docusaurus', '^@generated', 'unist', 'mdast']},
+      {
+        ignore: [
+          '^@theme',
+          '^@docusaurus',
+          '^@generated',
+          '^@site',
+          'unist',
+          'mdast',
+        ],
+      },
     ],
     'import/extensions': OFF,
     'header/header': [

website/_dogfooding/_pages tests/error-boundary-tests.js → website/_dogfooding/_pages tests/error-boundary-tests.tsx

@@ -1,9 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import React from 'react';
 import Layout from '@theme/Layout';
 
 import ErrorBoundaryTestButton from '@site/src/components/ErrorBoundaryTestButton';
 
-export default function ErrorBoundaryTests() {
+export default function ErrorBoundaryTests(): JSX.Element {
   return (
     <>
       <ErrorBoundaryTestButton>Crash outside layout</ErrorBoundaryTestButton>

website/_dogfooding/_pages tests/hydration-tests.js → website/_dogfooding/_pages tests/hydration-tests.tsx

@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import React from 'react';
 import Layout from '@theme/Layout';
 
@@ -6,23 +13,26 @@ function BuggyText() {
   return (
     <span>
       Built using the{' '}
-      <a href="https://www.electronjs.org/" target="_blank">
+      <a href="https://www.electronjs.org/" target="_blank" rel="noreferrer">
         Electron
       </a>{' '}
       , based on{' '}
-      <a href="https://www.chromium.org/" target="_blank">
+      <a href="https://www.chromium.org/" target="_blank" rel="noreferrer">
         Chromium
       </a>
       , and written using{' '}
-      <a href="https://www.typescriptlang.org/" target="_blank">
+      <a
+        href="https://www.typescriptlang.org/"
+        target="_blank"
+        rel="noreferrer">
         TypeScript
       </a>{' '}
       , Xplorer promises you an unprecedented experience.
     </span>
   );
 }
 
-export default function Home() {
+export default function Home(): JSX.Element {
   return (
     <Layout>
       <BuggyText />

website/_dogfooding/clientModuleExample.ts

@@ -7,7 +7,8 @@
 
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 
-export function onRouteUpdate({location}: {location: Location}) {
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function onRouteUpdate({location}: {location: Location}): void {
   // console.log('onRouteUpdate', {location});
 }
 

website/_dogfooding/docs-tests-sidebars.js

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
@@ -64,7 +64,6 @@ module.exports = {
 };
 
 function generateHugeSidebarItems() {
-  const maxLevel = 4;
   const linksCount = 8;
   const categoriesCount = 8;
 
@@ -88,5 +87,5 @@ function generateHugeSidebarItems() {
     return [...linkItems, ...categoryItems];
   }
 
-  return generateRecursive(maxLevel);
+  return generateRecursive(4);
 }

website/_dogfooding/dogfooding.config.js

@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 const fs = require('fs');
 
 /** @type {import('@docusaurus/types').PluginConfig[]} */

website/babel.config.js

@@ -3,8 +3,6 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- *
- * @format
  */
 
 module.exports = {

website/docusaurus.config.js

@@ -11,11 +11,16 @@ const versions = require('./versions.json');
 const math = require('remark-math');
 const katex = require('rehype-katex');
 const VersionsArchived = require('./versionsArchived.json');
-const ArchivedVersionsDropdownItems = Object.entries(VersionsArchived).splice(
-  0,
-  5,
-);
 const {dogfoodingPluginInstances} = require('./_dogfooding/dogfooding.config');
+const FeatureRequestsPlugin = require('./src/featureRequests/FeatureRequestsPlugin');
+const npm2yarn = require('@docusaurus/remark-plugin-npm2yarn');
+// eslint-disable-next-line import/no-extraneous-dependencies
+const lightTheme = require('prism-react-renderer/themes/github');
+// eslint-disable-next-line import/no-extraneous-dependencies
+const darkTheme = require('prism-react-renderer/themes/dracula');
+
+const ArchivedVersionsDropdownItems =
+  Object.entries(VersionsArchived).splice(0, 5);
 
 // This probably only makes sense for the beta phase, temporary
 function getNextBetaVersionName() {
@@ -80,6 +85,7 @@ const config = {
   ],
   i18n: {
     defaultLocale: 'en',
+    // eslint-disable-next-line no-nested-ternary
     locales: isDeployPreview
       ? // Deploy preview: keep it fast!
         ['en']
@@ -109,7 +115,7 @@ const config = {
   clientModules: [require.resolve('./_dogfooding/clientModuleExample.ts')],
   themes: ['@docusaurus/theme-live-codeblock'],
   plugins: [
-    require('./src/featureRequests/FeatureRequestsPlugin'),
+    FeatureRequestsPlugin,
     [
       '@docusaurus/plugin-content-docs',
       /** @type {import('@docusaurus/plugin-content-docs').Options} */
@@ -134,12 +140,13 @@ const config = {
       /** @type {import('@docusaurus/plugin-client-redirects').Options} */
       ({
         fromExtensions: ['html'],
-        createRedirects: function (path) {
+        createRedirects(routePath) {
           // redirect to /docs from /docs/introduction,
           // as introduction has been made the home doc
-          if (allDocHomesPaths.includes(path)) {
-            return [`${path}/introduction`];
+          if (allDocHomesPaths.includes(routePath)) {
+            return [`${routePath}/introduction`];
           }
+          return [];
         },
         redirects: [
           {
@@ -254,11 +261,12 @@ const config = {
           showLastUpdateTime: true,
           remarkPlugins: [
             math,
-            [require('@docusaurus/remark-plugin-npm2yarn'), {sync: true}],
+            [npm2yarn, {sync: true}],
           ],
           rehypePlugins: [katex],
           disableVersioning: isVersioningDisabled,
           lastVersion: isDev ? 'current' : undefined,
+          // eslint-disable-next-line no-nested-ternary
           onlyIncludeVersions: isBuildFast
             ? ['current']
             : !isVersioningDisabled && (isDev || isDeployPreview)
@@ -288,7 +296,7 @@ const config = {
           blogSidebarTitle: 'All our posts',
         },
         pages: {
-          remarkPlugins: [require('@docusaurus/remark-plugin-npm2yarn')],
+          remarkPlugins: [npm2yarn],
         },
         theme: {
           customCss: [require.resolve('./src/css/custom.css')],
@@ -314,8 +322,8 @@ const config = {
         content: `⭐️ If you like Docusaurus, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/facebook/docusaurus">GitHub</a> and follow us on <a target="_blank" rel="noopener noreferrer" href="https://twitter.com/docusaurus" >Twitter</a> ${TwitterSvg}`,
       },
       prism: {
-        theme: require('prism-react-renderer/themes/github'),
-        darkTheme: require('prism-react-renderer/themes/dracula'),
+        theme: lightTheme,
+        darkTheme,
         additionalLanguages: ['java'],
       },
       image: 'img/docusaurus-soc.png',

website/package.json

@@ -38,6 +38,7 @@
     "@docusaurus/preset-classic": "2.0.0-beta.9",
     "@docusaurus/remark-plugin-npm2yarn": "2.0.0-beta.9",
     "@docusaurus/theme-live-codeblock": "2.0.0-beta.9",
+    "@docusaurus/utils": "2.0.0-beta.9",
     "clsx": "^1.1.1",
     "color": "^4.0.1",
     "esbuild-loader": "2.13.1",

website/sidebars.js

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the

website/sidebarsCommunity.js

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the

website/src/components/BrowserWindow/index.tsx

@@ -15,7 +15,7 @@ interface Props {
   url: string;
 }
 
-function BrowserWindow({children, minHeight, url}: Props) {
+function BrowserWindow({children, minHeight, url}: Props): JSX.Element {
   return (
     <div className={styles.browserWindow} style={{minHeight}}>
       <div className={styles.browserWindowHeader}>

website/src/components/ColorGenerator/index.tsx

@@ -66,10 +66,10 @@ const COLOR_SHADES: Record<
 
 const DEFAULT_PRIMARY_COLOR = '3578e5';
 
-function ColorGenerator() {
+function ColorGenerator(): JSX.Element {
   const [baseColor, setBaseColor] = useState(DEFAULT_PRIMARY_COLOR);
   const [shades, setShades] = useState(COLOR_SHADES);
-  const color = Color('#' + baseColor);
+  const color = Color(`#${baseColor}`);
   const adjustedColors = Object.keys(shades)
     .map((shade) => ({
       ...shades[shade],
@@ -83,6 +83,7 @@ function ColorGenerator() {
   return (
     <div>
       <p>
+        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
         <label htmlFor="primary_color">
           <strong className="margin-right--sm">Primary Color:</strong>
         </label>{' '}
@@ -96,7 +97,7 @@ function ColorGenerator() {
             const colorValue = event.target.value.replace(/^#+/, '');
 
             try {
-              Color('#' + colorValue);
+              Color(`#${baseColor}`);
               setBaseColor(colorValue);
             } catch {
               // Don't update for invalid colors.
@@ -150,7 +151,7 @@ function ColorGenerator() {
                               [variableName]: {
                                 ...shades[variableName],
                                 adjustmentInput: event.target.value,
-                                adjustment: isNaN(newValue)
+                                adjustment: Number.isNaN(newValue)
                                   ? adjustment
                                   : newValue / 100.0,
                               },

website/src/components/ErrorBoundaryTestButton/index.tsx

@@ -5,12 +5,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useState} from 'react';
+import React, {ReactNode, useState} from 'react';
 
-export default function ErrorBoundaryTestButton({children = 'Boom!'}) {
+export default function ErrorBoundaryTestButton({
+  children = 'Boom!',
+}: {
+  children?: ReactNode;
+}): JSX.Element {
   const [state, setState] = useState(false);
   if (state) {
     throw new Error('Boom!');
   }
-  return <button onClick={() => setState(true)}>{children}</button>;
+  return (
+    <button type="button" onClick={() => setState(true)}>
+      {children}
+    </button>
+  );
 }

website/src/components/Playground/index.tsx

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/* eslint-disable global-require */
+
 import React from 'react';
 import Translate from '@docusaurus/Translate';
 import Link from '@docusaurus/Link';
@@ -32,7 +34,7 @@ const Playgrounds = [
         id="playground.stackblitz.description"
         values={{
           webContainersLink: (
-            <Link target="https://blog.stackblitz.com/posts/introducing-webcontainers/">
+            <Link href="https://blog.stackblitz.com/posts/introducing-webcontainers/">
               WebContainers
             </Link>
           ),
@@ -77,7 +79,7 @@ function PlaygroundCard({name, image, url, description}: Props) {
   );
 }
 
-export function PlaygroundCardsRow() {
+export function PlaygroundCardsRow(): JSX.Element {
   return (
     <div className="row">
       {Playgrounds.map((playground) => (