From 12786dd2c2c77b3cd9de1e27e0ab2f0ea082ffee Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Fri, 3 Dec 2021 16:11:09 +0000
Subject: [PATCH 1/6] fix: lint warning

---
 .eslintrc                                     |  4 +-
 sandpack-client/src/client.ts                 |  2 +
 .../src/components/CodeEditor/CodeMirror.tsx  |  3 +
 .../src/components/CodeEditor/utils.ts        |  1 +
 .../CodeViewer/CodeViewer.stories.tsx         |  2 +-
 .../src/components/Navigator/index.tsx        |  1 +
 .../src/components/Preview/index.tsx          | 14 +++--
 .../src/components/TranspiledCode/index.tsx   | 14 ++++-
 .../src/contexts/sandpackContext.tsx          |  8 ++-
 .../src/hooks/useCodeSandboxLink.ts           |  1 +
 sandpack-react/src/hooks/useErrorMessage.ts   |  1 +
 .../src/hooks/useLoadingOverlayState.ts       |  1 +
 .../src/presets/CustomSandpack.stories.tsx    |  3 +-
 .../src/templates/Templates.stories.tsx       |  3 +-
 sandpack-react/src/themes/Theme.stories.tsx   |  3 +-
 .../Hero/HeroDesktop/HeroDesktop.tsx          |  2 +
 .../components/Intro/Sections/Custom.tsx      |  1 +
 .../components/Intro/Sections/Editor.tsx      |  5 +-
 .../components/Intro/Sections/Layout.tsx      |  8 ++-
 .../components/Intro/Sections/Template.tsx    |  1 +
 .../components/Intro/Sections/Theme.tsx       |  3 +-
 .../landing/components/common/Clipboard.tsx   | 61 +++++++++----------
 22 files changed, 89 insertions(+), 53 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index a0532af30..5c5387ff7 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -43,7 +43,7 @@
 
     // Consistently sort props
     "react/jsx-sort-props": [
-      "warn",
+      "error",
       {
         "ignoreCase": true,
         // key, ref must always come first
@@ -57,7 +57,7 @@
 
     // Group module and relative imports
     "import/order": [
-      "warn",
+      "error",
       {
         // Imports are grouped as follows:
         "groups": [
diff --git a/sandpack-client/src/client.ts b/sandpack-client/src/client.ts
index 62c108178..db0660876 100644
--- a/sandpack-client/src/client.ts
+++ b/sandpack-client/src/client.ts
@@ -167,9 +167,11 @@ export class SandpackClient {
             "file-resolver",
             async (data: { m: "isFile" | "readFile"; p: string }) => {
               if (data.m === "isFile") {
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                 return this.options.fileResolver!.isFile(data.p);
               }
 
+              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
               return this.options.fileResolver!.readFile(data.p);
             },
             this.iframe.contentWindow
diff --git a/sandpack-react/src/components/CodeEditor/CodeMirror.tsx b/sandpack-react/src/components/CodeEditor/CodeMirror.tsx
index dc32535cd..a16ca90a7 100644
--- a/sandpack-react/src/components/CodeEditor/CodeMirror.tsx
+++ b/sandpack-react/src/components/CodeEditor/CodeMirror.tsx
@@ -249,6 +249,7 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
       };
 
       // TODO: Would be nice to reconfigure the editor when these change, instead of recreating with all the extensions from scratch
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [initEditor, showLineNumbers, wrapContent, themeId, decorators]);
 
     React.useEffect(() => {
@@ -261,6 +262,7 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
       ) {
         cmView.current.contentDOM.focus();
       }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     // Update editor when code passed as prop from outside sandpack changes
@@ -271,6 +273,7 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
           changes: { from: 0, to: view.state.doc.length, insert: code },
         });
       }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [code]);
 
     React.useEffect(
diff --git a/sandpack-react/src/components/CodeEditor/utils.ts b/sandpack-react/src/components/CodeEditor/utils.ts
index 8f925a7de..46738d57d 100644
--- a/sandpack-react/src/components/CodeEditor/utils.ts
+++ b/sandpack-react/src/components/CodeEditor/utils.ts
@@ -172,5 +172,6 @@ export const useCombinedRefs = <T extends any>(
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         (ref as any).current = element;
       }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     refs
   );
diff --git a/sandpack-react/src/components/CodeViewer/CodeViewer.stories.tsx b/sandpack-react/src/components/CodeViewer/CodeViewer.stories.tsx
index 6c28e610d..2501f40d7 100644
--- a/sandpack-react/src/components/CodeViewer/CodeViewer.stories.tsx
+++ b/sandpack-react/src/components/CodeViewer/CodeViewer.stories.tsx
@@ -1,5 +1,5 @@
 import type { Story } from "@storybook/react";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 import { SandpackProvider } from "../../contexts/sandpackContext";
 import { SandpackThemeProvider } from "../../contexts/themeContext";
diff --git a/sandpack-react/src/components/Navigator/index.tsx b/sandpack-react/src/components/Navigator/index.tsx
index 0ff9f2a6d..400a97e8a 100644
--- a/sandpack-react/src/components/Navigator/index.tsx
+++ b/sandpack-react/src/components/Navigator/index.tsx
@@ -45,6 +45,7 @@ export const Navigator: React.FC<NavigatorProps> = ({
     }, clientId);
 
     return () => unsub();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/sandpack-react/src/components/Preview/index.tsx b/sandpack-react/src/components/Preview/index.tsx
index f4369de86..d39e78eda 100644
--- a/sandpack-react/src/components/Preview/index.tsx
+++ b/sandpack-react/src/components/Preview/index.tsx
@@ -71,19 +71,23 @@ export const SandpackPreview: React.FC<PreviewProps> = ({
   loadingScreenRegisteredRef.current = true;
 
   React.useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const iframeElement = iframeRef.current!;
-    registerBundler(iframeElement, clientId.current);
+    const clientIdValue = clientId.current;
 
-    const unsub = listen((message) => {
+    registerBundler(iframeElement, clientIdValue);
+
+    const unsubscribe = listen((message) => {
       if (message.type === "resize") {
         setComputedAutoHeight(message.height);
       }
-    }, clientId.current);
+    }, clientIdValue);
 
     return () => {
-      unsub();
-      unregisterBundler(clientId.current);
+      unsubscribe();
+      unregisterBundler(clientIdValue);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const handleNewURL = (newUrl: string) => {
diff --git a/sandpack-react/src/components/TranspiledCode/index.tsx b/sandpack-react/src/components/TranspiledCode/index.tsx
index 260dbb801..11ad9d4cd 100644
--- a/sandpack-react/src/components/TranspiledCode/index.tsx
+++ b/sandpack-react/src/components/TranspiledCode/index.tsx
@@ -18,11 +18,15 @@ export const SandpackTranspiledCode: React.FC<CodeViewerProps> = (props) => {
 
   const hiddenIframeRef = React.useRef<HTMLIFrameElement | null>(null);
   React.useEffect(() => {
-    const hiddenIframe = hiddenIframeRef.current!;
-    sandpack.registerBundler(hiddenIframe, "hidden");
+    const hiddenIframe = hiddenIframeRef.current;
+
+    if (hiddenIframe) {
+      sandpack.registerBundler(hiddenIframe, "hidden");
+    }
     return () => {
       sandpack.unregisterBundler("hidden");
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
@@ -34,7 +38,11 @@ export const SandpackTranspiledCode: React.FC<CodeViewerProps> = (props) => {
           {...props}
         />
       )}
-      <iframe ref={hiddenIframeRef} style={{ display: "none" }} />
+      <iframe
+        ref={hiddenIframeRef}
+        style={{ display: "none" }}
+        title="transpiled sandpack code"
+      />
       <ErrorOverlay />
       <LoadingOverlay clientId="hidden" />
     </div>
diff --git a/sandpack-react/src/contexts/sandpackContext.tsx b/sandpack-react/src/contexts/sandpackContext.tsx
index 63f9866d2..336dbab3f 100644
--- a/sandpack-react/src/contexts/sandpackContext.tsx
+++ b/sandpack-react/src/contexts/sandpackContext.tsx
@@ -248,8 +248,8 @@ class SandpackProvider extends React.PureComponent<
       threshold: 0.2,
     };
 
-    if (this.intersectionObserver) {
-      this.intersectionObserver?.unobserve(this.lazyAnchorRef.current!);
+    if (this.intersectionObserver && this.lazyAnchorRef.current) {
+      this.intersectionObserver?.unobserve(this.lazyAnchorRef.current);
     }
 
     if (this.lazyAnchorRef.current && this.state.initMode === "lazy") {
@@ -261,7 +261,9 @@ class SandpackProvider extends React.PureComponent<
             this.runSandpack();
           }, 50);
 
-          this.intersectionObserver?.unobserve(this.lazyAnchorRef.current!);
+          if (this.lazyAnchorRef.current) {
+            this.intersectionObserver?.unobserve(this.lazyAnchorRef.current);
+          }
         }
       }, observerOptions);
 
diff --git a/sandpack-react/src/hooks/useCodeSandboxLink.ts b/sandpack-react/src/hooks/useCodeSandboxLink.ts
index c8e26988d..71b297f51 100644
--- a/sandpack-react/src/hooks/useCodeSandboxLink.ts
+++ b/sandpack-react/src/hooks/useCodeSandboxLink.ts
@@ -38,6 +38,7 @@ export const useCodeSandboxLink = (): string => {
   // Register the usage of the codesandbox link
   React.useEffect(() => {
     sandpack.openInCSBRegisteredRef.current = true;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return `https://codesandbox.io/api/v1/sandboxes/define?parameters=${params}&query=file=${sandpack.activePath}%26from-sandpack=true`;
diff --git a/sandpack-react/src/hooks/useErrorMessage.ts b/sandpack-react/src/hooks/useErrorMessage.ts
index 568209445..9f2f8d4f5 100644
--- a/sandpack-react/src/hooks/useErrorMessage.ts
+++ b/sandpack-react/src/hooks/useErrorMessage.ts
@@ -11,6 +11,7 @@ export const useErrorMessage = (): string | null => {
 
   React.useEffect(() => {
     sandpack.errorScreenRegisteredRef.current = true;
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return error?.message ?? null;
diff --git a/sandpack-react/src/hooks/useLoadingOverlayState.ts b/sandpack-react/src/hooks/useLoadingOverlayState.ts
index 5d4c522c5..59c22c829 100644
--- a/sandpack-react/src/hooks/useLoadingOverlayState.ts
+++ b/sandpack-react/src/hooks/useLoadingOverlayState.ts
@@ -45,6 +45,7 @@ export const useLoadingOverlayState = (
       clearTimeout(innerHook);
       unsub();
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   if (sandpack.status === "timeout") {
diff --git a/sandpack-react/src/presets/CustomSandpack.stories.tsx b/sandpack-react/src/presets/CustomSandpack.stories.tsx
index e2706c762..acee19e51 100644
--- a/sandpack-react/src/presets/CustomSandpack.stories.tsx
+++ b/sandpack-react/src/presets/CustomSandpack.stories.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
 
-import { useSandpack } from "../hooks/useSandpack";
 import type { ViewportSize } from "../";
 import {
   Sandpack,
@@ -19,6 +18,7 @@ import {
   useSandpackNavigation,
   SandpackStack,
 } from "../";
+import { useSandpack } from "../hooks/useSandpack";
 
 export default {
   title: "presets/Sandpack: custom",
@@ -180,6 +180,7 @@ const CustomPreview = () => {
 
   useEffect(() => {
     sandpack.registerBundler(iframeRef.current, "custom");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
diff --git a/sandpack-react/src/templates/Templates.stories.tsx b/sandpack-react/src/templates/Templates.stories.tsx
index 93dcdd79c..4d00cf0ed 100644
--- a/sandpack-react/src/templates/Templates.stories.tsx
+++ b/sandpack-react/src/templates/Templates.stories.tsx
@@ -1,9 +1,10 @@
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import { SANDBOX_TEMPLATES } from ".";
 import { Sandpack } from "../";
 
+import { SANDBOX_TEMPLATES } from ".";
+
 const stories = storiesOf("presets/Template", module);
 
 Object.keys(SANDBOX_TEMPLATES).forEach((template) =>
diff --git a/sandpack-react/src/themes/Theme.stories.tsx b/sandpack-react/src/themes/Theme.stories.tsx
index d50c2d0d5..a45091a87 100644
--- a/sandpack-react/src/themes/Theme.stories.tsx
+++ b/sandpack-react/src/themes/Theme.stories.tsx
@@ -1,9 +1,10 @@
 import { storiesOf } from "@storybook/react";
 import React from "react";
 
-import { SANDPACK_THEMES } from ".";
 import { Sandpack } from "../";
 
+import { SANDPACK_THEMES } from ".";
+
 const stories = storiesOf("presets/Themes", module);
 
 Object.keys(SANDPACK_THEMES).forEach((themeName) =>
diff --git a/website/landing/components/Hero/HeroDesktop/HeroDesktop.tsx b/website/landing/components/Hero/HeroDesktop/HeroDesktop.tsx
index 7be3a7394..741e7a621 100644
--- a/website/landing/components/Hero/HeroDesktop/HeroDesktop.tsx
+++ b/website/landing/components/Hero/HeroDesktop/HeroDesktop.tsx
@@ -149,6 +149,7 @@ export const HeroDesktop: React.FC = () => {
     return () => {
       element?.removeEventListener("focus", finishAnimation);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editorRef.current]);
 
   // revert all changes on scroll up
@@ -156,6 +157,7 @@ export const HeroDesktop: React.FC = () => {
     if (!animationComplete) {
       sandpack.resetAllFiles();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [animationComplete]);
 
   return (
diff --git a/website/landing/components/Intro/Sections/Custom.tsx b/website/landing/components/Intro/Sections/Custom.tsx
index 05850364a..258fcf070 100644
--- a/website/landing/components/Intro/Sections/Custom.tsx
+++ b/website/landing/components/Intro/Sections/Custom.tsx
@@ -89,6 +89,7 @@ export const CustomExample: React.FC = () => {
     } else {
       setOptions({ customSetup: {} });
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [code, inView]);
 
   return (
diff --git a/website/landing/components/Intro/Sections/Editor.tsx b/website/landing/components/Intro/Sections/Editor.tsx
index de6a4b613..d68c08d59 100644
--- a/website/landing/components/Intro/Sections/Editor.tsx
+++ b/website/landing/components/Intro/Sections/Editor.tsx
@@ -53,6 +53,7 @@ export const EditorExample: React.FC = () => {
 
   useEffect(() => {
     setOptions({ options: custom });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [custom]);
 
   useEffect(
@@ -78,13 +79,14 @@ export const EditorExample: React.FC = () => {
 
   useEffect(function componentMount() {
     sandpack.updateCurrentFile(ORIGINAL_CODE);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(
     function listener() {
       const newCustomOptions: Record<string, any> = {};
 
-      Object.keys(custom).map((key) => {
+      Object.keys(custom).forEach((key) => {
         const value = code.match(new RegExp(`${key}:(.+)`));
 
         newCustomOptions[key] = value?.[1]?.includes("true") ?? false;
@@ -92,6 +94,7 @@ export const EditorExample: React.FC = () => {
 
       setCustom((prev) => ({ ...prev, ...(newCustomOptions as any) }));
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [code]
   );
 
diff --git a/website/landing/components/Intro/Sections/Layout.tsx b/website/landing/components/Intro/Sections/Layout.tsx
index 1e17aa988..b86ac10e8 100644
--- a/website/landing/components/Intro/Sections/Layout.tsx
+++ b/website/landing/components/Intro/Sections/Layout.tsx
@@ -9,7 +9,7 @@ import {
   SandpackLayout,
   useSandpack,
 } from "@codesandbox/sandpack-react";
-import { useEffect, useLayoutEffect, useRef } from "react";
+import { useEffect, useLayoutEffect } from "react";
 import { useInView } from "react-intersection-observer";
 
 import { CardTitle, CardDescription } from "../../common";
@@ -36,17 +36,19 @@ export const LayoutExample: React.FC = () => {
 
   useLayoutEffect(() => {
     setLayoutFiles(sandpack.activePath, code);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [code, sandpack.activePath]);
 
   useEffect(() => {
-    Object.entries(layoutFiles).map(([filename, fileCode]) => {
+    Object.entries(layoutFiles).forEach(([filename, fileCode]) => {
       sandpack.updateFile(filename, fileCode);
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
     setVisibility(inView);
-  }, [inView]);
+  }, [inView, setVisibility]);
 
   return (
     <FadeAnimation>
diff --git a/website/landing/components/Intro/Sections/Template.tsx b/website/landing/components/Intro/Sections/Template.tsx
index 9d2435a72..7dc2c8745 100644
--- a/website/landing/components/Intro/Sections/Template.tsx
+++ b/website/landing/components/Intro/Sections/Template.tsx
@@ -45,6 +45,7 @@ export const TemplateExample: React.FC = () => {
 
   useEffect(() => {
     setOptions({ template });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [template]);
 
   useEffect(() => {
diff --git a/website/landing/components/Intro/Sections/Theme.tsx b/website/landing/components/Intro/Sections/Theme.tsx
index 6426b78c1..37af5027b 100644
--- a/website/landing/components/Intro/Sections/Theme.tsx
+++ b/website/landing/components/Intro/Sections/Theme.tsx
@@ -47,6 +47,7 @@ export const ThemeExample: React.FC = () => {
 
   useEffect(() => {
     setOptions({ theme });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [theme]);
 
   useEffect(() => {
@@ -61,7 +62,7 @@ export const ThemeExample: React.FC = () => {
     } else {
       setTheme("sandpack-dark");
     }
-  }, [inView]);
+  }, [higherMobile, inView]);
 
   const shuffleTheme = () => {
     const currentIndex = themeOptions.indexOf(theme);
diff --git a/website/landing/components/common/Clipboard.tsx b/website/landing/components/common/Clipboard.tsx
index bf0437fdb..5eabd1e1a 100644
--- a/website/landing/components/common/Clipboard.tsx
+++ b/website/landing/components/common/Clipboard.tsx
@@ -1,42 +1,41 @@
 import { useCallback, useEffect, useState } from "react";
 
-import { styled } from "../../stitches.config";
 import content from "../../website.config.json";
 
 import { Box, Button, Text } from ".";
 
 const command = content.commands.install;
 
-const ClipboardToast = styled("div", {
-  alignItems: "center",
-  background: "$primary",
-  borderRadius: "72px",
-  bottom: "32px",
-  display: "flex",
-  color: "$lightTextPrimary",
-  gap: "10px",
-  left: "50%",
-  padding: "15px 20px",
-  pointerEvents: "none",
-  position: "fixed",
-  transform: "translateX(-50%) translateY(calc(100% + 240px)) ",
-  transition: "transform .5s cubic-bezier(0.190, 1.000, 0.220, 1.000)",
-  zIndex: "1",
-
-  span: {
-    fontSize: "1.6rem",
-    letterSpacing: "-0.025em",
-    margin: 0,
-  },
-
-  variants: {
-    visible: {
-      true: {
-        transform: "translateX(-50%) translateY(0) ",
-      },
-    },
-  },
-});
+// const ClipboardToast = styled("div", {
+//   alignItems: "center",
+//   background: "$primary",
+//   borderRadius: "72px",
+//   bottom: "32px",
+//   display: "flex",
+//   color: "$lightTextPrimary",
+//   gap: "10px",
+//   left: "50%",
+//   padding: "15px 20px",
+//   pointerEvents: "none",
+//   position: "fixed",
+//   transform: "translateX(-50%) translateY(calc(100% + 240px)) ",
+//   transition: "transform .5s cubic-bezier(0.190, 1.000, 0.220, 1.000)",
+//   zIndex: "1",
+
+//   span: {
+//     fontSize: "1.6rem",
+//     letterSpacing: "-0.025em",
+//     margin: 0,
+//   },
+
+//   variants: {
+//     visible: {
+//       true: {
+//         transform: "translateX(-50%) translateY(0) ",
+//       },
+//     },
+//   },
+// });
 
 export const Clipboard: React.FC = () => {
   const [toastVisible, setToastVisible] = useState(false);

From 6c16b6b375f67bf001128d7af6dad76da652a034 Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Fri, 3 Dec 2021 16:24:33 +0000
Subject: [PATCH 2/6] fix: explicity return type

---
 .eslintrc                                     |  1 +
 sandpack-client/src/client.ts                 |  4 +-
 sandpack-client/src/iframe-protocol.ts        | 10 ++---
 sandpack-client/src/utils.ts                  | 10 +++--
 sandpack-react/src/common/RunButton.tsx       |  2 +-
 .../CodeEditor/CodeMirror.stories.tsx         |  2 +-
 .../src/components/CodeEditor/CodeMirror.tsx  | 18 ++++----
 .../CodeEditor/highlightDecorators.ts         |  4 +-
 .../CodeEditor/highlightInlineError.ts        |  4 +-
 .../src/components/CodeEditor/index.tsx       |  2 +-
 .../CodeViewer/CodeViewer.stories.tsx         |  4 +-
 .../src/components/FileTabs/index.tsx         |  4 +-
 .../src/components/Navigator/index.tsx        | 12 +++---
 .../src/components/Preview/index.tsx          |  4 +-
 .../src/components/TranspiledCode/index.tsx   |  2 +-
 .../src/contexts/sandpackContext.tsx          |  4 +-
 .../src/hooks/useActiveCode.stories.tsx       |  6 ++-
 .../src/hooks/useCodeSandboxLink.ts           |  2 +-
 sandpack-react/src/hooks/useErrorMessage.ts   |  2 +-
 .../src/hooks/useLoadingOverlayState.ts       |  2 +-
 .../hooks/useSandpackNavigation.stories.tsx   |  2 +-
 .../src/hooks/useSandpackNavigation.ts        |  6 +--
 sandpack-react/src/hooks/useTranspiledCode.ts |  2 +-
 .../src/presets/CustomSandpack.stories.tsx    | 42 +++++++++----------
 sandpack-react/src/themes/index.ts            |  2 +-
 .../AdvancedUsage/AdvancedUsage.tsx           |  4 +-
 website/landing/components/Banner/Banner.tsx  |  4 +-
 .../landing/components/Features/Features.tsx  |  4 +-
 .../Hero/HeroDesktop/HeroDesktop.tsx          |  8 ++--
 website/landing/components/Intro/Examples.tsx |  6 +--
 .../components/Intro/SandpackExample.tsx      |  2 +-
 .../components/Intro/Sections/Custom.tsx      |  4 +-
 .../components/Intro/Sections/Editor.tsx      |  2 +-
 .../components/Intro/Sections/Layout.tsx      |  3 +-
 .../Intro/Sections/LayoutContext.tsx          |  2 +-
 .../components/Intro/Sections/Template.tsx    |  8 ++--
 .../components/Intro/Sections/Theme.tsx       |  8 ++--
 .../components/Intro/Sections/common.tsx      | 11 +++--
 .../landing/components/Showcase/Showcase.tsx  |  4 +-
 .../landing/components/common/Clipboard.tsx   |  2 +-
 .../components/common/useBreakpoint.ts        |  3 +-
 41 files changed, 119 insertions(+), 109 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 5c5387ff7..b7cd56760 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -12,6 +12,7 @@
   ],
   "parser": "@typescript-eslint/parser",
   "rules": {
+    "@typescript-eslint/explicit-function-return-type": "error",
     "@typescript-eslint/no-explicit-any": "error",
     "@typescript-eslint/no-empty-function": "error",
     // Enforce return types on exported functions or public methods
diff --git a/sandpack-client/src/client.ts b/sandpack-client/src/client.ts
index db0660876..f43faa83c 100644
--- a/sandpack-client/src/client.ts
+++ b/sandpack-client/src/client.ts
@@ -348,7 +348,7 @@ export class SandpackClient {
       this.dispatch({ type: "get-transpiler-context" });
     });
 
-  private getFiles() {
+  private getFiles(): SandpackBundlerFiles {
     const { sandboxInfo } = this;
 
     if (sandboxInfo.files["/package.json"] === undefined) {
@@ -363,7 +363,7 @@ export class SandpackClient {
     return this.sandboxInfo.files;
   }
 
-  private initializeElement() {
+  private initializeElement(): void {
     this.iframe.style.border = "0";
     this.iframe.style.width = this.options.width || "100%";
     this.iframe.style.height = this.options.height || "100%";
diff --git a/sandpack-client/src/iframe-protocol.ts b/sandpack-client/src/iframe-protocol.ts
index 6e7f7f025..625b7dead 100644
--- a/sandpack-client/src/iframe-protocol.ts
+++ b/sandpack-client/src/iframe-protocol.ts
@@ -77,7 +77,7 @@ export class IFrameProtocol {
   // This is needed for the `initialize` message which comes without a channelId
   globalListen(listener: ListenerFunction): UnsubscribeFunction {
     if (typeof listener !== "function") {
-      return () => {
+      return (): void => {
         return;
       };
     }
@@ -85,7 +85,7 @@ export class IFrameProtocol {
     const listenerId = this.globalListenersCount;
     this.globalListeners[listenerId] = listener;
     this.globalListenersCount++;
-    return () => {
+    return (): void => {
       delete this.globalListeners[listenerId];
     };
   }
@@ -94,7 +94,7 @@ export class IFrameProtocol {
   // All other messages (eg: from other iframes) are ignored
   channelListen(listener: ListenerFunction): UnsubscribeFunction {
     if (typeof listener !== "function") {
-      return () => {
+      return (): void => {
         return;
       };
     }
@@ -102,13 +102,13 @@ export class IFrameProtocol {
     const listenerId = this.channelListenersCount;
     this.channelListeners[listenerId] = listener;
     this.channelListenersCount++;
-    return () => {
+    return (): void => {
       delete this.channelListeners[listenerId];
     };
   }
 
   // Handles message windows coming from iframes
-  private eventListener(message: MessageEvent) {
+  private eventListener(message: MessageEvent): void {
     if (!message.data.codesandbox) {
       return;
     }
diff --git a/sandpack-client/src/utils.ts b/sandpack-client/src/utils.ts
index a4294c9cc..f6ca14920 100644
--- a/sandpack-client/src/utils.ts
+++ b/sandpack-client/src/utils.ts
@@ -81,7 +81,9 @@ export function extractErrorDetails(msg: SandpackErrorMessage): SandpackError {
   };
 }
 
-function getRelevantStackFrame(frames?: ErrorStackFrame[]) {
+function getRelevantStackFrame(
+  frames?: ErrorStackFrame[]
+): ErrorStackFrame | undefined {
   if (!frames) {
     return;
   }
@@ -89,13 +91,13 @@ function getRelevantStackFrame(frames?: ErrorStackFrame[]) {
   return frames.find((frame) => !!frame._originalFileName);
 }
 
-function getErrorLocation(errorFrame: ErrorStackFrame) {
+function getErrorLocation(errorFrame: ErrorStackFrame): string {
   return errorFrame
     ? ` (${errorFrame._originalLineNumber}:${errorFrame._originalColumnNumber})`
     : ``;
 }
 
-function getErrorInOriginalCode(errorFrame: ErrorStackFrame) {
+function getErrorInOriginalCode(errorFrame: ErrorStackFrame): string {
   const lastScriptLine =
     errorFrame._originalScriptCode[errorFrame._originalScriptCode.length - 1];
   const numberOfLineNumberCharacters =
@@ -138,7 +140,7 @@ function formatErrorMessage(
   message: string,
   location: string,
   errorInCode: string
-) {
+): string {
   return `${filePath}: ${message}${location}
 ${errorInCode}`;
 }
diff --git a/sandpack-react/src/common/RunButton.tsx b/sandpack-react/src/common/RunButton.tsx
index a6af38188..40101f9f4 100644
--- a/sandpack-react/src/common/RunButton.tsx
+++ b/sandpack-react/src/common/RunButton.tsx
@@ -14,7 +14,7 @@ export const RunButton: React.FC = () => {
   return (
     <button
       className={c("button")}
-      onClick={() => sandpack.runSandpack()}
+      onClick={(): void => sandpack.runSandpack()}
       style={{
         position: "absolute",
         bottom: "var(--sp-space-2)",
diff --git a/sandpack-react/src/components/CodeEditor/CodeMirror.stories.tsx b/sandpack-react/src/components/CodeEditor/CodeMirror.stories.tsx
index 2682b3ff6..98dcb301b 100644
--- a/sandpack-react/src/components/CodeEditor/CodeMirror.stories.tsx
+++ b/sandpack-react/src/components/CodeEditor/CodeMirror.stories.tsx
@@ -16,7 +16,7 @@ export const JustEditor: React.FC = () => (
       <CodeEditor
         code="const c = a+b;"
         fileType="jsx"
-        onCodeUpdate={() => console.log("code update")}
+        onCodeUpdate={(): void => console.log("code update")}
       />
     </SandpackThemeProvider>
   </SandpackProvider>
diff --git a/sandpack-react/src/components/CodeEditor/CodeMirror.tsx b/sandpack-react/src/components/CodeEditor/CodeMirror.tsx
index a16ca90a7..89bd112e0 100644
--- a/sandpack-react/src/components/CodeEditor/CodeMirror.tsx
+++ b/sandpack-react/src/components/CodeEditor/CodeMirror.tsx
@@ -67,7 +67,7 @@ interface CodeMirrorProps {
   editorState?: SandpackEditorState;
   readOnly?: boolean;
   decorators?: Decorators;
-  initMode: SandpackInitMode;
+  initMode?: SandpackInitMode;
 }
 
 export interface CodeMirrorRef {
@@ -109,10 +109,10 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
     });
 
     React.useImperativeHandle(ref, () => ({
-      getCodemirror: () => cmView.current,
+      getCodemirror: (): EditorView | undefined => cmView.current,
     }));
 
-    const shouldInitEditor = () => {
+    const shouldInitEditor = (): boolean => {
       if (initMode === "immediate") {
         return true;
       }
@@ -151,7 +151,7 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
           },
           {
             key: "Escape",
-            run: () => {
+            run: (): boolean => {
               if (readOnly) return true;
 
               if (wrapper.current) {
@@ -218,7 +218,7 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
         const view = new EditorView({
           state: startState,
           parent: parentDiv,
-          dispatch: (tr) => {
+          dispatch: (tr): void => {
             view.update([tr]);
 
             if (tr.docChanged) {
@@ -242,7 +242,7 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
         cmView.current = view;
       }, 0);
 
-      return () => {
+      return (): void => {
         cmView.current?.destroy();
 
         clearTimeout(timer);
@@ -278,7 +278,7 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
 
     React.useEffect(
       function messageToInlineError() {
-        if (!showInlineErrors) return () => null;
+        if (!showInlineErrors) return;
 
         const unsubscribe = listen((message) => {
           const view = cmView.current;
@@ -319,12 +319,12 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
           }
         });
 
-        return () => unsubscribe();
+        return (): void => unsubscribe();
       },
       [listen, showInlineErrors]
     );
 
-    const handleContainerKeyDown = (evt: React.KeyboardEvent) => {
+    const handleContainerKeyDown = (evt: React.KeyboardEvent): void => {
       if (evt.key === "Enter" && cmView.current) {
         evt.preventDefault();
         cmView.current.contentDOM.focus();
diff --git a/sandpack-react/src/components/CodeEditor/highlightDecorators.ts b/sandpack-react/src/components/CodeEditor/highlightDecorators.ts
index 312231420..0ed76708f 100644
--- a/sandpack-react/src/components/CodeEditor/highlightDecorators.ts
+++ b/sandpack-react/src/components/CodeEditor/highlightDecorators.ts
@@ -15,11 +15,11 @@ export function highlightDecorators(positions: Decorators): Extension {
         this.decorations = this.getDecoration(view);
       }
 
-      update(update: ViewUpdate) {
+      update(update: ViewUpdate): void {
         return;
       }
 
-      getDecoration(view: EditorView) {
+      getDecoration(view: EditorView): DecorationSet {
         if (!positions) return Decoration.none;
 
         const rangesDecorators = positions.map((item) => {
diff --git a/sandpack-react/src/components/CodeEditor/highlightInlineError.ts b/sandpack-react/src/components/CodeEditor/highlightInlineError.ts
index 8653f35bc..2fde4a54d 100644
--- a/sandpack-react/src/components/CodeEditor/highlightInlineError.ts
+++ b/sandpack-react/src/components/CodeEditor/highlightInlineError.ts
@@ -18,7 +18,7 @@ const activeLineHighlighter = ViewPlugin.fromClass(
       this.decorations = Decoration.none;
     }
 
-    update(update: ViewUpdate) {
+    update(update: ViewUpdate): void {
       let message = null;
 
       update.transactions.forEach((trans) => {
@@ -47,7 +47,7 @@ const activeLineHighlighter = ViewPlugin.fromClass(
     getDecoration(
       view: EditorView,
       message: { type: "clean-error" } | { type: "error"; value: number } | null
-    ) {
+    ): DecorationSet {
       if (message === null || message.type === "clean-error") {
         return Decoration.none;
       }
diff --git a/sandpack-react/src/components/CodeEditor/index.tsx b/sandpack-react/src/components/CodeEditor/index.tsx
index ad1c7cfd7..e08e9015d 100644
--- a/sandpack-react/src/components/CodeEditor/index.tsx
+++ b/sandpack-react/src/components/CodeEditor/index.tsx
@@ -58,7 +58,7 @@ export const SandpackCodeEditor = React.forwardRef<
 
     const c = useClasser("sp");
 
-    const handleCodeUpdate = (newCode: string) => {
+    const handleCodeUpdate = (newCode: string): void => {
       updateCode(newCode);
     };
 
diff --git a/sandpack-react/src/components/CodeViewer/CodeViewer.stories.tsx b/sandpack-react/src/components/CodeViewer/CodeViewer.stories.tsx
index 2501f40d7..62c2a7932 100644
--- a/sandpack-react/src/components/CodeViewer/CodeViewer.stories.tsx
+++ b/sandpack-react/src/components/CodeViewer/CodeViewer.stories.tsx
@@ -65,7 +65,7 @@ export const Decorators: React.FC = () => {
   const ref = useRef<HTMLDivElement>();
 
   useEffect(() => {
-    const handle = (event) => {
+    const handle = (event): void => {
       let id = event.target.dataset.id;
 
       if (!id) {
@@ -80,7 +80,7 @@ export const Decorators: React.FC = () => {
       element.addEventListener("click", handle);
     });
 
-    return () => {
+    return (): void => {
       node?.querySelectorAll(".widget").forEach((element) => {
         element.removeEventListener("click", handle);
       });
diff --git a/sandpack-react/src/components/FileTabs/index.tsx b/sandpack-react/src/components/FileTabs/index.tsx
index 10bcf48c0..deaef744a 100644
--- a/sandpack-react/src/components/FileTabs/index.tsx
+++ b/sandpack-react/src/components/FileTabs/index.tsx
@@ -16,7 +16,7 @@ export const FileTabs: React.FC<{ closableTabs?: boolean }> = ({
 
   const { activePath, openPaths, setActiveFile } = sandpack;
 
-  const handleCloseFile = (ev: React.MouseEvent<HTMLDivElement>) => {
+  const handleCloseFile = (ev: React.MouseEvent<HTMLDivElement>): void => {
     ev.stopPropagation();
     const tabElm = (ev.target as HTMLElement).closest(
       "[data-active]"
@@ -41,7 +41,7 @@ export const FileTabs: React.FC<{ closableTabs?: boolean }> = ({
             aria-selected={filePath === activePath}
             className={c("tab-button")}
             data-active={filePath === activePath}
-            onClick={() => setActiveFile(filePath)}
+            onClick={(): void => setActiveFile(filePath)}
             role="tab"
             title={filePath}
             type="button"
diff --git a/sandpack-react/src/components/Navigator/index.tsx b/sandpack-react/src/components/Navigator/index.tsx
index 400a97e8a..b9097fc01 100644
--- a/sandpack-react/src/components/Navigator/index.tsx
+++ b/sandpack-react/src/components/Navigator/index.tsx
@@ -44,11 +44,11 @@ export const Navigator: React.FC<NavigatorProps> = ({
       }
     }, clientId);
 
-    return () => unsub();
+    return (): void => unsub();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
     const path = e.target.value.startsWith("/")
       ? e.target.value
       : `/${e.target.value}`;
@@ -56,7 +56,7 @@ export const Navigator: React.FC<NavigatorProps> = ({
     setRelativeUrl(path);
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
     if (e.code === "Enter") {
       //  Enter
       e.preventDefault();
@@ -68,15 +68,15 @@ export const Navigator: React.FC<NavigatorProps> = ({
     }
   };
 
-  const handleRefresh = () => {
+  const handleRefresh = (): void => {
     dispatch({ type: "refresh" });
   };
 
-  const handleBack = () => {
+  const handleBack = (): void => {
     dispatch({ type: "urlback" });
   };
 
-  const handleForward = () => {
+  const handleForward = (): void => {
     dispatch({ type: "urlforward" });
   };
 
diff --git a/sandpack-react/src/components/Preview/index.tsx b/sandpack-react/src/components/Preview/index.tsx
index d39e78eda..3bad9a3d2 100644
--- a/sandpack-react/src/components/Preview/index.tsx
+++ b/sandpack-react/src/components/Preview/index.tsx
@@ -83,14 +83,14 @@ export const SandpackPreview: React.FC<PreviewProps> = ({
       }
     }, clientIdValue);
 
-    return () => {
+    return (): void => {
       unsubscribe();
       unregisterBundler(clientIdValue);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const handleNewURL = (newUrl: string) => {
+  const handleNewURL = (newUrl: string): void => {
     if (!iframeRef.current) {
       return;
     }
diff --git a/sandpack-react/src/components/TranspiledCode/index.tsx b/sandpack-react/src/components/TranspiledCode/index.tsx
index 11ad9d4cd..ce9666123 100644
--- a/sandpack-react/src/components/TranspiledCode/index.tsx
+++ b/sandpack-react/src/components/TranspiledCode/index.tsx
@@ -23,7 +23,7 @@ export const SandpackTranspiledCode: React.FC<CodeViewerProps> = (props) => {
     if (hiddenIframe) {
       sandpack.registerBundler(hiddenIframe, "hidden");
     }
-    return () => {
+    return (): void => {
       sandpack.unregisterBundler("hidden");
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/sandpack-react/src/contexts/sandpackContext.tsx b/sandpack-react/src/contexts/sandpackContext.tsx
index 336dbab3f..a541c6c9b 100644
--- a/sandpack-react/src/contexts/sandpackContext.tsx
+++ b/sandpack-react/src/contexts/sandpackContext.tsx
@@ -577,7 +577,7 @@ class SandpackProvider extends React.PureComponent<
 
         this.queuedListeners[clientId][listenerId] = listener;
 
-        const unsubscribeListener = () => {
+        const unsubscribeListener = (): void => {
           if (this.queuedListeners[clientId][listenerId]) {
             // unsubscribe was called before the client was instantiated
             // common example - a component with autorun=false that unmounted
@@ -603,7 +603,7 @@ class SandpackProvider extends React.PureComponent<
         client.listen(listener)
       );
 
-      const unsubscribeListener = () => {
+      const unsubscribeListener = (): void => {
         const unsubscribeQueuedClients = Object.values(
           this.unsubscribeQueuedListeners
         );
diff --git a/sandpack-react/src/hooks/useActiveCode.stories.tsx b/sandpack-react/src/hooks/useActiveCode.stories.tsx
index 626037c79..8a2eb96ac 100644
--- a/sandpack-react/src/hooks/useActiveCode.stories.tsx
+++ b/sandpack-react/src/hooks/useActiveCode.stories.tsx
@@ -10,10 +10,12 @@ export default {
   title: "hooks/useActiveCode",
 };
 
-const CustomEditor = () => {
+const CustomEditor: React.FC = () => {
   const { code, updateCode } = useActiveCode();
   return (
-    <textarea onChange={(evt) => updateCode(evt.target.value)}>{code}</textarea>
+    <textarea onChange={(evt): void => updateCode(evt.target.value)}>
+      {code}
+    </textarea>
   );
 };
 
diff --git a/sandpack-react/src/hooks/useCodeSandboxLink.ts b/sandpack-react/src/hooks/useCodeSandboxLink.ts
index 71b297f51..3c1a35ab2 100644
--- a/sandpack-react/src/hooks/useCodeSandboxLink.ts
+++ b/sandpack-react/src/hooks/useCodeSandboxLink.ts
@@ -9,7 +9,7 @@ import { useSandpack } from "./useSandpack";
 const getFileParameters = (
   files: SandpackBundlerFiles,
   environment?: SandboxEnvironment
-) => {
+): string => {
   const normalized: Record<string, { content: string; isBinary: boolean }> =
     Object.keys(files).reduce(
       (prev, next) => ({
diff --git a/sandpack-react/src/hooks/useErrorMessage.ts b/sandpack-react/src/hooks/useErrorMessage.ts
index 9f2f8d4f5..f03935f18 100644
--- a/sandpack-react/src/hooks/useErrorMessage.ts
+++ b/sandpack-react/src/hooks/useErrorMessage.ts
@@ -11,7 +11,7 @@ export const useErrorMessage = (): string | null => {
 
   React.useEffect(() => {
     sandpack.errorScreenRegisteredRef.current = true;
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return error?.message ?? null;
diff --git a/sandpack-react/src/hooks/useLoadingOverlayState.ts b/sandpack-react/src/hooks/useLoadingOverlayState.ts
index 59c22c829..b73052bcf 100644
--- a/sandpack-react/src/hooks/useLoadingOverlayState.ts
+++ b/sandpack-react/src/hooks/useLoadingOverlayState.ts
@@ -40,7 +40,7 @@ export const useLoadingOverlayState = (
       }
     }, clientId);
 
-    return () => {
+    return (): void => {
       clearTimeout(outerHook);
       clearTimeout(innerHook);
       unsub();
diff --git a/sandpack-react/src/hooks/useSandpackNavigation.stories.tsx b/sandpack-react/src/hooks/useSandpackNavigation.stories.tsx
index 6b41d36ad..266b5c141 100644
--- a/sandpack-react/src/hooks/useSandpackNavigation.stories.tsx
+++ b/sandpack-react/src/hooks/useSandpackNavigation.stories.tsx
@@ -10,7 +10,7 @@ export default {
   title: "hooks/useSandpackNavigation",
 };
 
-const CustomRefreshButton = () => {
+const CustomRefreshButton: React.FC = () => {
   const { refresh } = useSandpackNavigation();
   return (
     <button onClick={refresh} type="button">
diff --git a/sandpack-react/src/hooks/useSandpackNavigation.ts b/sandpack-react/src/hooks/useSandpackNavigation.ts
index 915c59329..6974086a3 100644
--- a/sandpack-react/src/hooks/useSandpackNavigation.ts
+++ b/sandpack-react/src/hooks/useSandpackNavigation.ts
@@ -13,8 +13,8 @@ export const useSandpackNavigation = (
   const { dispatch } = useSandpack();
 
   return {
-    refresh: () => dispatch({ type: "refresh" }, clientId),
-    back: () => dispatch({ type: "urlback" }, clientId),
-    forward: () => dispatch({ type: "urlforward" }, clientId),
+    refresh: (): void => dispatch({ type: "refresh" }, clientId),
+    back: (): void => dispatch({ type: "urlback" }, clientId),
+    forward: (): void => dispatch({ type: "urlforward" }, clientId),
   };
 };
diff --git a/sandpack-react/src/hooks/useTranspiledCode.ts b/sandpack-react/src/hooks/useTranspiledCode.ts
index cd70deb83..8e09dc628 100644
--- a/sandpack-react/src/hooks/useTranspiledCode.ts
+++ b/sandpack-react/src/hooks/useTranspiledCode.ts
@@ -2,7 +2,7 @@ import type { SandpackState } from "../types";
 
 import { useSandpack } from "./useSandpack";
 
-function getTranspiledCode(sandpack: SandpackState) {
+function getTranspiledCode(sandpack: SandpackState): string | null {
   const { activePath, bundlerState } = sandpack;
   if (bundlerState == null) {
     return null;
diff --git a/sandpack-react/src/presets/CustomSandpack.stories.tsx b/sandpack-react/src/presets/CustomSandpack.stories.tsx
index acee19e51..b9d435ef2 100644
--- a/sandpack-react/src/presets/CustomSandpack.stories.tsx
+++ b/sandpack-react/src/presets/CustomSandpack.stories.tsx
@@ -71,29 +71,29 @@ export const UsingVisualElements: React.FC = () => (
   </SandpackProvider>
 );
 
-const CustomOpenInCSB = () => {
+const CustomOpenInCSB: React.FC = () => {
   const url = useCodeSandboxLink();
 
   return <a href={url}>Open in CodeSandbox</a>;
 };
 
-const CustomRefreshButton = () => {
+const CustomRefreshButton: React.FC = () => {
   const { refresh } = useSandpackNavigation();
 
   return (
-    <button onClick={() => refresh()} type="button">
+    <button onClick={(): void => refresh()} type="button">
       Refresh Sandpack
     </button>
   );
 };
 
-const CustomCodeEditor = () => {
+const CustomCodeEditor: React.FC = () => {
   const { code, updateCode } = useActiveCode();
   const { theme } = useSandpackTheme();
 
   return (
     <textarea
-      onChange={(evt) => updateCode(evt.target.value)}
+      onChange={(evt): void => updateCode(evt.target.value)}
       style={{
         width: 400,
         height: 200,
@@ -103,7 +103,7 @@ const CustomCodeEditor = () => {
         background: theme.palette.defaultBackground,
         border: `1px solid ${theme.palette.inactiveText}`,
         color: theme.palette.activeText,
-        lineHeight: theme.typography.lineheight,
+        lineHeight: theme.typography.lineHeight,
       }}
     >
       {code}
@@ -174,7 +174,7 @@ export default function KittenGallery() {
   )
 }`;
 
-const CustomPreview = () => {
+const CustomPreview: React.FC = () => {
   const { sandpack } = useSandpack();
   const iframeRef = useRef<HTMLIFrameElement>();
 
@@ -218,7 +218,7 @@ export const JustIframe = (): React.ReactElement => {
         }}
       >
         <CustomRefreshButton />
-        <button onClick={() => setFirst(!first)} type="button">
+        <button onClick={(): void => setFirst(!first)} type="button">
           Switch
         </button>
         <CustomOpenInCSB />
@@ -242,13 +242,13 @@ export const MultiplePreviews: React.FC = () => {
           ))}
         </SandpackLayout>
       </SandpackProvider>
-      <button onClick={() => setCount(count + 1)}>Add</button>
-      <button onClick={() => setCount(count - 1)}>Remove</button>
+      <button onClick={(): void => setCount(count + 1)}>Add</button>
+      <button onClick={(): void => setCount(count - 1)}>Remove</button>
     </>
   );
 };
 
-function SandpackListener() {
+const SandpackListener: React.FC = () => {
   const { listen } = useSandpack();
 
   useEffect(() => {
@@ -258,7 +258,7 @@ function SandpackListener() {
   }, [listen]);
 
   return null;
-}
+};
 
 export const MultiplePreviewsAndListeners: React.FC = () => {
   const [count, setCount] = useState(2);
@@ -279,14 +279,14 @@ export const MultiplePreviewsAndListeners: React.FC = () => {
           ))}
         </SandpackLayout>
       </SandpackProvider>
-      <button onClick={() => setCount(count + 1)}>Add</button>
-      <button onClick={() => setCount(count - 1)}>Remove</button>
+      <button onClick={(): void => setCount(count + 1)}>Add</button>
+      <button onClick={(): void => setCount(count - 1)}>Remove</button>
 
       <p>Amount of listeners: {listenersCount}</p>
-      <button onClick={() => setListenersCount(listenersCount + 1)}>
+      <button onClick={(): void => setListenersCount(listenersCount + 1)}>
         Add listener
       </button>
-      <button onClick={() => setListenersCount(listenersCount - 1)}>
+      <button onClick={(): void => setListenersCount(listenersCount - 1)}>
         Remove listener
       </button>
     </>
@@ -324,8 +324,8 @@ export const MultiplePreviewsRandomViewports: React.FC = () => {
 
   return (
     <>
-      <button onClick={() => setCount(count + 1)}>Add</button>
-      <button onClick={() => setCount(count > 0 ? count - 1 : 0)}>
+      <button onClick={(): void => setCount(count + 1)}>Add</button>
+      <button onClick={(): void => setCount(count > 0 ? count - 1 : 0)}>
         Remove
       </button>
       <SandpackProvider>
@@ -353,7 +353,7 @@ export const ClosableTabs: React.FC = () => (
   <Sandpack options={{ closableTabs: true }} template="react" />
 );
 
-const ResetButtonComp = () => {
+const ResetButtonComp: React.FC = () => {
   const { sandpack } = useSandpack();
 
   return (
@@ -372,13 +372,13 @@ const ResetButtonComp = () => {
   );
 };
 
-const ResetCurrentFileButton = () => {
+const ResetCurrentFileButton: React.FC = () => {
   const { sandpack } = useSandpack();
 
   return (
     <button
       className="sp-tab-button"
-      onClick={() => sandpack.resetFile(sandpack.activePath)}
+      onClick={(): void => sandpack.resetFile(sandpack.activePath)}
       style={{
         background: "none",
         border: 0,
diff --git a/sandpack-react/src/themes/index.ts b/sandpack-react/src/themes/index.ts
index cd262040e..fa4289e88 100644
--- a/sandpack-react/src/themes/index.ts
+++ b/sandpack-react/src/themes/index.ts
@@ -336,7 +336,7 @@ export const createThemeObject = (
   };
 };
 
-const simpleHashFunction = (str: string) => {
+const simpleHashFunction = (str: string): number => {
   let hash = 0;
   for (let i = 0; i < str.length; hash &= hash) {
     hash = 31 * hash + str.charCodeAt(i++);
diff --git a/website/landing/components/AdvancedUsage/AdvancedUsage.tsx b/website/landing/components/AdvancedUsage/AdvancedUsage.tsx
index 250f2b357..5122c14c1 100644
--- a/website/landing/components/AdvancedUsage/AdvancedUsage.tsx
+++ b/website/landing/components/AdvancedUsage/AdvancedUsage.tsx
@@ -37,14 +37,14 @@ export const AdvancedUsage: React.FC = () => {
     const container = section.current;
     if (!container || !window) return;
 
-    const onResize = () => {
+    const onResize = (): void => {
       setSectionTop(container.offsetTop);
       setWindowHeight(window.innerHeight);
     };
 
     onResize();
     window.addEventListener("resize", onResize);
-    return () => window.removeEventListener("resize", onResize);
+    return (): void => window.removeEventListener("resize", onResize);
   }, [section]);
 
   return (
diff --git a/website/landing/components/Banner/Banner.tsx b/website/landing/components/Banner/Banner.tsx
index 41aac2983..1925c7a39 100644
--- a/website/landing/components/Banner/Banner.tsx
+++ b/website/landing/components/Banner/Banner.tsx
@@ -37,14 +37,14 @@ export const Banner: React.FC = () => {
     const container = section.current;
     if (!container || !window) return;
 
-    const onResize = () => {
+    const onResize = (): void => {
       setSectionTop(container.offsetTop);
       setSectionHeight(container.offsetHeight);
     };
 
     onResize();
     window.addEventListener("resize", onResize);
-    return () => window.removeEventListener("resize", onResize);
+    return (): void => window.removeEventListener("resize", onResize);
   }, [section]);
 
   return (
diff --git a/website/landing/components/Features/Features.tsx b/website/landing/components/Features/Features.tsx
index 8c9f6f3fc..0847bdf59 100644
--- a/website/landing/components/Features/Features.tsx
+++ b/website/landing/components/Features/Features.tsx
@@ -57,14 +57,14 @@ export const Features: React.FC = () => {
     const sectionEl = sectionRef.current;
     if (!sectionEl) return;
 
-    const onResize = () => {
+    const onResize = (): void => {
       setSectionTop(sectionEl.offsetTop);
       setSectionHeight(sectionEl.offsetHeight);
     };
 
     onResize();
     window.addEventListener("resize", onResize);
-    return () => window.removeEventListener("resize", onResize);
+    return (): void => window.removeEventListener("resize", onResize);
   }, [sectionRef]);
 
   const fadeProps = useMemo(
diff --git a/website/landing/components/Hero/HeroDesktop/HeroDesktop.tsx b/website/landing/components/Hero/HeroDesktop/HeroDesktop.tsx
index 741e7a621..d7023c40f 100644
--- a/website/landing/components/Hero/HeroDesktop/HeroDesktop.tsx
+++ b/website/landing/components/Hero/HeroDesktop/HeroDesktop.tsx
@@ -93,7 +93,7 @@ export const HeroDesktop: React.FC = () => {
     const hero = sectionRef.current;
     if (!hero) return;
 
-    const onResize = () => {
+    const onResize = (): void => {
       const updatedTop = hero.offsetTop;
       setSectionTop(updatedTop);
 
@@ -104,7 +104,7 @@ export const HeroDesktop: React.FC = () => {
     onResize();
 
     window.addEventListener("resize", onResize);
-    return () => window.removeEventListener("resize", onResize);
+    return (): void => window.removeEventListener("resize", onResize);
   }, [sectionRef]);
 
   useLayoutEffect(() => {
@@ -135,7 +135,7 @@ export const HeroDesktop: React.FC = () => {
     const editorElement = editorRef.current?.getCodemirror();
     if (!editorElement) return;
 
-    const finishAnimation = () => {
+    const finishAnimation = (): void => {
       window.scrollTo({
         top: sectionTop + scrollHeight * 1.2 + 2,
         behavior: "smooth",
@@ -146,7 +146,7 @@ export const HeroDesktop: React.FC = () => {
 
     element?.addEventListener("focus", finishAnimation);
 
-    return () => {
+    return (): void => {
       element?.removeEventListener("focus", finishAnimation);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/website/landing/components/Intro/Examples.tsx b/website/landing/components/Intro/Examples.tsx
index 523946525..60d4fbb4d 100644
--- a/website/landing/components/Intro/Examples.tsx
+++ b/website/landing/components/Intro/Examples.tsx
@@ -35,7 +35,7 @@ export const Examples: React.FC = () => {
   const [sandpackSectionHeight, setSandpackSectionHeight] = useState(0);
 
   useLayoutEffect(() => {
-    const onResize = () => {
+    const onResize = (): void => {
       if (!sandpackRefSectionTop.current || !sandpackRefSectionHeight.current)
         return;
 
@@ -46,7 +46,7 @@ export const Examples: React.FC = () => {
     onResize();
     window.addEventListener("resize", onResize);
 
-    return () => window.removeEventListener("resize", onResize);
+    return (): void => window.removeEventListener("resize", onResize);
   }, []);
 
   const scrollRangeX = [
@@ -56,7 +56,7 @@ export const Examples: React.FC = () => {
   ];
 
   // Max width that the left container can grow
-  const breakpoint = () => {
+  const breakpoint = (): string => {
     if (isXLarge) return "600px";
     if (isLarge) return "30vw";
     if (isMedium) return "38vw";
diff --git a/website/landing/components/Intro/SandpackExample.tsx b/website/landing/components/Intro/SandpackExample.tsx
index 5b23be9de..fff406ce6 100644
--- a/website/landing/components/Intro/SandpackExample.tsx
+++ b/website/landing/components/Intro/SandpackExample.tsx
@@ -27,7 +27,7 @@ export const SandpackExampleProvider: React.FC = ({ children }) => {
   return (
     <SandpackExampleContext.Provider
       value={{
-        setOptions: (payload) =>
+        setOptions: (payload): void =>
           setOptions((prev) => ({ ...prev, ...payload })),
         options,
       }}
diff --git a/website/landing/components/Intro/Sections/Custom.tsx b/website/landing/components/Intro/Sections/Custom.tsx
index 258fcf070..b805bf582 100644
--- a/website/landing/components/Intro/Sections/Custom.tsx
+++ b/website/landing/components/Intro/Sections/Custom.tsx
@@ -128,7 +128,7 @@ export const CustomExample: React.FC = () => {
               <SandpackCodeEditor ref={codeEditorRef} showTabs={false} />
 
               <RefreshButton
-                onClick={() => {
+                onClick={(): void => {
                   sandpack.updateCurrentFile(ORIGINAL_CODE);
                 }}
               >
@@ -162,7 +162,7 @@ export const CustomExample: React.FC = () => {
   );
 };
 
-const parseFromSandpackToJson = (code: string) => {
+const parseFromSandpackToJson = (code: string): any => {
   try {
     const customSetup = code.match(/customSetup={{([\s\S]*?)}}/)?.[1];
     if (!customSetup) return;
diff --git a/website/landing/components/Intro/Sections/Editor.tsx b/website/landing/components/Intro/Sections/Editor.tsx
index d68c08d59..c0f8bcee4 100644
--- a/website/landing/components/Intro/Sections/Editor.tsx
+++ b/website/landing/components/Intro/Sections/Editor.tsx
@@ -131,7 +131,7 @@ export const EditorExample: React.FC = () => {
               <SandpackCodeEditor ref={codeEditorRef} showTabs={false} />
 
               <RefreshButton
-                onClick={() => {
+                onClick={(): void => {
                   sandpack.updateCurrentFile(ORIGINAL_CODE);
                   setOptions(ORIGINAL_CUSTOM);
                 }}
diff --git a/website/landing/components/Intro/Sections/Layout.tsx b/website/landing/components/Intro/Sections/Layout.tsx
index b86ac10e8..7553193b1 100644
--- a/website/landing/components/Intro/Sections/Layout.tsx
+++ b/website/landing/components/Intro/Sections/Layout.tsx
@@ -48,7 +48,8 @@ export const LayoutExample: React.FC = () => {
 
   useEffect(() => {
     setVisibility(inView);
-  }, [inView, setVisibility]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [inView]);
 
   return (
     <FadeAnimation>
diff --git a/website/landing/components/Intro/Sections/LayoutContext.tsx b/website/landing/components/Intro/Sections/LayoutContext.tsx
index ec25dfa7c..a54bc7bed 100644
--- a/website/landing/components/Intro/Sections/LayoutContext.tsx
+++ b/website/landing/components/Intro/Sections/LayoutContext.tsx
@@ -49,7 +49,7 @@ export const LayoutExampleProvider: React.FC = ({ children }) => {
     <LayoutContext.Provider
       value={{
         layoutFiles,
-        setLayoutFiles: (filename, code) =>
+        setLayoutFiles: (filename, code): void =>
           setLayoutFiles((prev) => ({ ...prev, [filename]: code })),
         visibility,
         setVisibility,
diff --git a/website/landing/components/Intro/Sections/Template.tsx b/website/landing/components/Intro/Sections/Template.tsx
index 7dc2c8745..77a60837f 100644
--- a/website/landing/components/Intro/Sections/Template.tsx
+++ b/website/landing/components/Intro/Sections/Template.tsx
@@ -62,7 +62,7 @@ export const TemplateExample: React.FC = () => {
     }
   }, [higherMobile, inView]);
 
-  const shuffleTemplate = () => {
+  const shuffleTemplate = (): void => {
     const currentIndex = frameworkOptions.indexOf(template);
 
     setTemplate(frameworkOptions[(currentIndex + 1) % frameworkOptions.length]);
@@ -90,9 +90,9 @@ export const TemplateExample: React.FC = () => {
           <SnippetButton
             ref={boxRef}
             onClick={shuffleTemplate}
-            onMouseEnter={() => setToolTipVisibility(true)}
-            onMouseLeave={() => setToolTipVisibility(false)}
-            onMouseMove={(event) =>
+            onMouseEnter={(): void => setToolTipVisibility(true)}
+            onMouseLeave={(): void => setToolTipVisibility(false)}
+            onMouseMove={(event): void =>
               setMousePosition(getRelativeCoordinates(event, boxRef.current))
             }
           >
diff --git a/website/landing/components/Intro/Sections/Theme.tsx b/website/landing/components/Intro/Sections/Theme.tsx
index 37af5027b..e9df75ecf 100644
--- a/website/landing/components/Intro/Sections/Theme.tsx
+++ b/website/landing/components/Intro/Sections/Theme.tsx
@@ -64,7 +64,7 @@ export const ThemeExample: React.FC = () => {
     }
   }, [higherMobile, inView]);
 
-  const shuffleTheme = () => {
+  const shuffleTheme = (): void => {
     const currentIndex = themeOptions.indexOf(theme);
 
     setTheme(themeOptions[(currentIndex + 1) % themeOptions.length]);
@@ -93,9 +93,9 @@ export const ThemeExample: React.FC = () => {
           <SnippetButton
             ref={boxRef}
             onClick={shuffleTheme}
-            onMouseEnter={() => setToolTipVisibility(true)}
-            onMouseLeave={() => setToolTipVisibility(false)}
-            onMouseMove={(event) =>
+            onMouseEnter={(): void => setToolTipVisibility(true)}
+            onMouseLeave={(): void => setToolTipVisibility(false)}
+            onMouseMove={(event): void =>
               setMousePosition(getRelativeCoordinates(event, boxRef.current))
             }
           >
diff --git a/website/landing/components/Intro/Sections/common.tsx b/website/landing/components/Intro/Sections/common.tsx
index 552a33aa3..19da2b1eb 100644
--- a/website/landing/components/Intro/Sections/common.tsx
+++ b/website/landing/components/Intro/Sections/common.tsx
@@ -91,7 +91,10 @@ export const SandpackContainerMobile = styled("div", {
   },
 });
 
-export const getRelativeCoordinates = (event: any, referenceElement: any) => {
+export const getRelativeCoordinates = (
+  event: any,
+  referenceElement: any
+): Record<"x" | "y", number> => {
   const position = {
     x: event.pageX,
     y: event.pageY,
@@ -178,14 +181,14 @@ export const FadeAnimation: React.FC = ({ children }) => {
     const sectionEl = sectionRef.current;
     if (!sectionEl) return;
 
-    const onResize = () => {
+    const onResize = (): void => {
       setSectionTop(sectionEl.offsetTop);
       setSectionHeight(sectionEl.offsetHeight);
     };
 
     onResize();
     window.addEventListener("resize", onResize);
-    return () => window.removeEventListener("resize", onResize);
+    return (): void => window.removeEventListener("resize", onResize);
   }, [sectionRef]);
 
   const { scrollY } = useViewportScroll();
@@ -213,7 +216,7 @@ export const FadeAnimation: React.FC = ({ children }) => {
   );
 };
 
-FadeAnimation.toString = () => `.fade-animation`;
+FadeAnimation.toString = (): string => `.fade-animation`;
 
 export const CodeWrapper = styled("div", {
   position: "relative",
diff --git a/website/landing/components/Showcase/Showcase.tsx b/website/landing/components/Showcase/Showcase.tsx
index 74236dc43..29d83fdc5 100644
--- a/website/landing/components/Showcase/Showcase.tsx
+++ b/website/landing/components/Showcase/Showcase.tsx
@@ -67,14 +67,14 @@ export const Showcase: React.FC = () => {
     const container = sectionRef.current;
     if (!container || !window) return;
 
-    const onResize = () => {
+    const onResize = (): void => {
       setSectionTop(container.offsetTop);
       setSectionScroll(container.offsetHeight - window.innerHeight);
     };
 
     onResize();
     window.addEventListener("resize", onResize);
-    return () => window.removeEventListener("resize", onResize);
+    return (): void => window.removeEventListener("resize", onResize);
   }, [sectionRef]);
 
   return (
diff --git a/website/landing/components/common/Clipboard.tsx b/website/landing/components/common/Clipboard.tsx
index 5eabd1e1a..d5389f8c5 100644
--- a/website/landing/components/common/Clipboard.tsx
+++ b/website/landing/components/common/Clipboard.tsx
@@ -54,7 +54,7 @@ export const Clipboard: React.FC = () => {
       setToastVisible(false);
     }, 2000);
 
-    return () => clearTimeout(timeout);
+    return (): void => clearTimeout(timeout);
   }, [toastVisible]);
 
   return (
diff --git a/website/landing/components/common/useBreakpoint.ts b/website/landing/components/common/useBreakpoint.ts
index 2662422b4..7f1cc0d48 100644
--- a/website/landing/components/common/useBreakpoint.ts
+++ b/website/landing/components/common/useBreakpoint.ts
@@ -20,7 +20,8 @@ export const useBreakpoint = (
     checkBreakpoint();
 
     window.addEventListener("resize", checkBreakpoint);
-    return () => {
+
+    return (): void => {
       window.removeEventListener("resize", checkBreakpoint);
     };
   }, [checkBreakpoint]);

From eccb32911d6ed4edf9d48f7814be42b469fa1df1 Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Thu, 9 Dec 2021 16:29:43 +0000
Subject: [PATCH 3/6] fix dependency

---
 website/theme/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/theme/package.json b/website/theme/package.json
index 4a018a7d2..b62bba496 100644
--- a/website/theme/package.json
+++ b/website/theme/package.json
@@ -10,7 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "^0.9.1",
+    "@codesandbox/sandpack-react": "*",
     "framer-motion": "^5.3.3",
     "next": "12.0.3",
     "react": "17.0.2",

From 741cdf256f3a54fb37a7c11434c9a249f36aad33 Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Thu, 9 Dec 2021 16:34:36 +0000
Subject: [PATCH 4/6] lint fixes

---
 .../UnstyledOpenInCodeSandboxButton.tsx                    | 7 ++++---
 .../src/components/CodeViewer/CodeViewer.stories.tsx       | 1 +
 sandpack-react/src/components/ReactDevTools/index.tsx      | 1 +
 website/landing/components/common/ClipboardProvider.tsx    | 2 +-
 website/landing/pages/index.tsx                            | 2 +-
 5 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/sandpack-react/src/common/OpenInCodeSandboxButton/UnstyledOpenInCodeSandboxButton.tsx b/sandpack-react/src/common/OpenInCodeSandboxButton/UnstyledOpenInCodeSandboxButton.tsx
index 15262d078..edf76ba1d 100644
--- a/sandpack-react/src/common/OpenInCodeSandboxButton/UnstyledOpenInCodeSandboxButton.tsx
+++ b/sandpack-react/src/common/OpenInCodeSandboxButton/UnstyledOpenInCodeSandboxButton.tsx
@@ -10,7 +10,7 @@ const CSB_URL = "https://codesandbox.io/api/v1/sandboxes/define";
 const getFileParameters = (
   files: SandpackBundlerFiles,
   environment?: SandboxEnvironment
-) => {
+): string => {
   type NormalizedFiles = Record<
     string,
     {
@@ -50,7 +50,7 @@ export const UnstyledOpenInCodeSandboxButton: React.FC<{
         setParamsValues(params);
       }, 600);
 
-      return () => {
+      return (): void => {
         clearTimeout(timer);
       };
     },
@@ -60,6 +60,7 @@ export const UnstyledOpenInCodeSandboxButton: React.FC<{
   // Register the usage of the codesandbox link
   React.useEffect(function registerUsage() {
     sandpack.openInCSBRegisteredRef.current = true;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   /**
@@ -69,7 +70,7 @@ export const UnstyledOpenInCodeSandboxButton: React.FC<{
   if (paramsValues.length > 1500) {
     return (
       <button
-        onClick={() => formRef.current?.submit()}
+        onClick={(): void => formRef.current?.submit()}
         title="Open in CodeSandbox"
         {...props}
       >
diff --git a/sandpack-react/src/components/CodeViewer/CodeViewer.stories.tsx b/sandpack-react/src/components/CodeViewer/CodeViewer.stories.tsx
index df8e9e815..66c721de8 100644
--- a/sandpack-react/src/components/CodeViewer/CodeViewer.stories.tsx
+++ b/sandpack-react/src/components/CodeViewer/CodeViewer.stories.tsx
@@ -62,6 +62,7 @@ export const VueCode: React.FC = () => (
 
 export const Decorators: React.FC = () => {
   const [itemClick, setItemClicked] = React.useState();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const ref = React.useRef<any>(null);
 
   React.useEffect(() => {
diff --git a/sandpack-react/src/components/ReactDevTools/index.tsx b/sandpack-react/src/components/ReactDevTools/index.tsx
index 39cfecf4a..028d8b865 100644
--- a/sandpack-react/src/components/ReactDevTools/index.tsx
+++ b/sandpack-react/src/components/ReactDevTools/index.tsx
@@ -46,6 +46,7 @@ export const SandpackReactDevTools = ({
 
   useEffect(() => {
     sandpack.registerReactDevTools();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   if (!ReactDevTools) return null;
diff --git a/website/landing/components/common/ClipboardProvider.tsx b/website/landing/components/common/ClipboardProvider.tsx
index 3b3356c35..6ae95c14c 100644
--- a/website/landing/components/common/ClipboardProvider.tsx
+++ b/website/landing/components/common/ClipboardProvider.tsx
@@ -65,7 +65,7 @@ const ClipboardProvider: React.FC = ({ children }) => {
       setToastVisible(false);
     }, 2000);
 
-    return () => clearTimeout(timeout);
+    return (): void => clearTimeout(timeout);
   }, [toastVisible]);
 
   return (
diff --git a/website/landing/pages/index.tsx b/website/landing/pages/index.tsx
index 2e540849f..e5c0fb3d7 100644
--- a/website/landing/pages/index.tsx
+++ b/website/landing/pages/index.tsx
@@ -10,9 +10,9 @@ import { Hero } from "../components/Hero";
 import { Intro } from "../components/Intro";
 import { Showcase } from "../components/Showcase";
 import { Users } from "../components/Users";
+import { ClipboardProvider } from "../components/common";
 import { styled } from "../stitches.config";
 import content from "../website.config.json";
-import { ClipboardProvider } from "../components/common";
 
 const DEFAULT_HOST = "https://sandpack.codesandbox.io";
 

From bf373fbae9929aee462c82b33ac8bc1783386f8d Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Thu, 9 Dec 2021 17:03:15 +0000
Subject: [PATCH 5/6] fix(theme): lint

---
 .eslintrc                                | 10 +++++++++-
 website/theme/components/footer/index.js | 13 +++++++++++--
 website/theme/components/logo/index.js   | 12 ++++++------
 website/theme/components/menu/index.js   |  2 +-
 website/theme/pages/_app.js              |  1 +
 5 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index b7cd56760..3dd6c3304 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -12,7 +12,7 @@
   ],
   "parser": "@typescript-eslint/parser",
   "rules": {
-    "@typescript-eslint/explicit-function-return-type": "error",
+    "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/no-explicit-any": "error",
     "@typescript-eslint/no-empty-function": "error",
     // Enforce return types on exported functions or public methods
@@ -80,6 +80,14 @@
       }
     ]
   },
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {
+        "@typescript-eslint/explicit-function-return-type": ["error"]
+      }
+    }
+  ],
   "settings": {
     "version": "detect"
   }
diff --git a/website/theme/components/footer/index.js b/website/theme/components/footer/index.js
index 42d737c4e..e4cf55e99 100644
--- a/website/theme/components/footer/index.js
+++ b/website/theme/components/footer/index.js
@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 import styles from "./Footer.module.scss";
 
 export default function Footer({ ...props }) {
@@ -5,14 +6,22 @@ export default function Footer({ ...props }) {
     <footer className={styles.container} {...props}>
       <p className={styles.warning}>
         Learn how to implement Sandpack in your project on{" "}
-        <a href="#" target="_blank">
+        <a
+          href="https://sandpack.codesandbox.io/docs"
+          rel="noreferrer"
+          target="_blank"
+        >
           <u>Sandpack Documentation</u>
         </a>
         .
       </p>
       <div className={styles.logoContainer}>
         Powered by{" "}
-        <img className={styles.logo} src="theme/codesandbox-logo.svg" />
+        <img
+          alt="CodeSandbox"
+          className={styles.logo}
+          src="theme/codesandbox-logo.svg"
+        />
       </div>
     </footer>
   );
diff --git a/website/theme/components/logo/index.js b/website/theme/components/logo/index.js
index 1294a71ed..278f63af8 100644
--- a/website/theme/components/logo/index.js
+++ b/website/theme/components/logo/index.js
@@ -4,48 +4,48 @@ export default function Logo() {
   return (
     <svg
       className={styles.logo}
-      width={903}
       height={98}
       viewBox="0 0 903 98"
+      width={903}
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        fillRule="evenodd"
         clipRule="evenodd"
         d="M38 8H8v67h30V8ZM0 0v83h46V0H0Z"
         fill="#000"
+        fillRule="evenodd"
       />
       <path
-        fillRule="evenodd"
         clipRule="evenodd"
         d="M38 8H8v67h30V8ZM0 0v83h46V0H0Z"
         fill="#000"
+        fillRule="evenodd"
       />
       <path
-        fillRule="evenodd"
         clipRule="evenodd"
         d="M76 23H46v67h30V23Zm-38-8v83h46V15H38Z"
         fill="#000"
+        fillRule="evenodd"
       />
       <path
         d="M164.081 58.527c0-8.32-4.972-13.51-14.915-15.8l-7.649-1.832c-7.801-1.832-10.478-3.51-10.478-7.098 0-4.503 4.36-7.098 10.402-7.098 6.195 0 11.473 3.053 12.161 9.311h8.949c-.918-9.082-7.801-16.41-21.263-16.41-10.632 0-19.351 5.954-19.351 14.807 0 7.328 5.125 12.137 15.45 14.579l7.649 1.756c6.807 1.602 10.02 3.892 10.02 8.166 0 4.885-4.972 7.786-11.703 7.786-7.419 0-13.002-5.343-13.538-12.213h-8.949c.842 9.541 8.414 19.311 22.411 19.311 12.237 0 20.804-6.488 20.804-15.265Z"
         fill="#000"
       />
       <path
-        fillRule="evenodd"
         clipRule="evenodd"
         d="M194.341 65.015h.229v8.014h8.184V34.866h-8.184v7.938h-.229c-1.836-5.267-6.272-8.702-12.085-8.702-10.173 0-16.062 9.16-16.062 19.845 0 10.686 5.66 19.845 16.062 19.845 5.813 0 10.249-3.51 12.085-8.777ZM174.99 53.947c0-8.167 3.671-13.662 9.866-13.662 6.196 0 10.02 5.495 10.02 13.662 0 8.09-3.824 13.663-10.02 13.663-6.118 0-9.866-5.572-9.866-13.663Z"
         fill="#000"
+        fillRule="evenodd"
       />
       <path
         d="M217.513 50.13V73.03h-8.337V34.866h8.108v7.48h.153c1.606-5.343 5.583-8.244 11.167-8.244 8.413 0 12.543 5.725 12.543 14.12V73.03h-8.337V50.665c0-7.098-2.524-10.304-7.648-10.304-5.125 0-7.649 3.511-7.649 9.77Z"
         fill="#000"
       />
       <path
-        fillRule="evenodd"
         clipRule="evenodd"
         d="M273.337 65.015h.229v8.014h8.184V20.363h-8.184v22.44h-.229c-1.836-5.266-6.272-8.7-12.085-8.7-10.173 0-16.062 9.158-16.062 19.844 0 10.686 5.66 19.845 16.062 19.845 5.813 0 10.249-3.51 12.085-8.777Zm-19.351-11.068c0-8.167 3.595-13.662 9.943-13.662 6.425 0 9.943 5.495 9.943 13.662 0 8.09-3.518 13.663-9.943 13.663-6.348 0-9.943-5.572-9.943-13.663ZM296.356 65.015V87.61h-8.184V34.865h8.184v7.938h.229c1.836-5.266 6.272-8.7 12.085-8.7 10.173 0 16.062 9.158 16.062 19.844 0 10.686-5.66 19.845-16.062 19.845-5.813 0-10.249-3.51-12.085-8.777h-.229Zm9.637-24.73c-6.425 0-9.943 5.495-9.943 13.662 0 8.09 3.518 13.663 9.943 13.663 6.349 0 9.944-5.572 9.944-13.663 0-8.167-3.595-13.662-9.944-13.662ZM355.246 65.015h.229v8.014h8.184V34.866h-8.184v7.938h-.229c-1.836-5.267-6.272-8.702-12.085-8.702-10.173 0-16.062 9.16-16.062 19.845 0 10.686 5.66 19.845 16.062 19.845 5.813 0 10.249-3.51 12.085-8.777Zm-19.351-11.068c0-8.167 3.671-13.662 9.866-13.662 6.196 0 10.02 5.495 10.02 13.662 0 8.09-3.824 13.663-10.02 13.663-6.119 0-9.866-5.572-9.866-13.663Z"
         fill="#000"
+        fillRule="evenodd"
       />
       <path
         d="M395.092 59.748h8.49c-1.453 9.007-8.261 14.044-17.209 14.044-11.244 0-18.434-9.312-18.434-19.845 0-10.304 6.961-19.845 18.128-19.845 8.948 0 15.679 4.885 17.132 13.892h-8.413c-.918-4.885-4.054-7.71-8.566-7.71-6.196 0-9.485 5.725-9.485 13.663 0 8.014 3.519 13.663 9.867 13.663 4.436 0 7.649-2.977 8.49-7.862ZM431.968 73.029h10.479l-17.515-21.372 16.75-16.791h-10.325L415.6 50.588V20.363h-8.337V73.03h8.337V53.108l16.368 19.92ZM489.558 28.984h15.269v43.343h5.881V28.984h15.269v-5.217h-36.419v5.217Zm46.993 21.434c0-6.354 4.055-9.958 9.579-9.958 5.264 0 8.441 3.32 8.441 9.105v22.762h5.596V49.185c0-9.365-4.979-13.752-12.425-13.752-5.738 0-9.01 2.395-10.717 6.165h-.474v-17.83h-5.596v48.559h5.596V50.418Zm45.784 22.668c7.398 0 12.804-3.7 14.511-9.2l-5.406-1.518c-1.423 3.794-4.718 5.691-9.105 5.691-6.568 0-11.096-4.244-11.357-12.045h26.437v-2.371c0-13.563-8.062-18.21-15.649-18.21-9.864 0-16.408 7.777-16.408 18.969 0 11.191 6.45 18.684 16.977 18.684Zm-11.357-21.909c.379-5.667 4.386-10.717 10.788-10.717 6.07 0 9.959 4.552 9.959 10.717h-20.747Zm31.611 21.15h5.595V49.565c0-5.335 3.889-9.105 8.252-9.105 4.244 0 7.208 2.774 7.208 6.923v24.944h5.69v-23.71c0-4.695 2.941-8.157 8.062-8.157 3.983 0 7.398 2.11 7.398 7.492v24.375h5.595V47.952c0-8.56-4.599-12.519-11.096-12.519-5.216 0-9.034 2.395-10.907 6.165h-.379c-1.802-3.889-4.98-6.165-9.769-6.165-4.742 0-8.252 2.276-9.769 6.165h-.474v-5.69h-5.406v36.419Zm69.963.759c7.398 0 12.804-3.7 14.511-9.2l-5.406-1.518c-1.423 3.794-4.719 5.691-9.105 5.691-6.568 0-11.097-4.244-11.358-12.045h26.438v-2.371c0-13.563-8.062-18.21-15.649-18.21-9.864 0-16.408 7.777-16.408 18.969 0 11.191 6.449 18.684 16.977 18.684Zm-11.358-21.909c.38-5.667 4.387-10.717 10.789-10.717 6.07 0 9.958 4.552 9.958 10.717h-20.747Zm47.811 21.15h17.545c11.476 0 16.219-5.596 16.219-12.899 0-7.682-5.312-11.855-9.769-12.14v-.474c4.173-1.138 7.872-3.888 7.872-10.148 0-7.113-4.742-12.898-14.891-12.898h-16.976v48.559Zm5.88-5.216V50.229h11.95c6.354 0 10.338 4.267 10.338 9.2 0 4.267-2.94 7.682-10.623 7.682h-11.665Zm0-22.004V28.984h11.096c6.45 0 9.295 3.414 9.295 7.682 0 5.122-4.173 8.441-9.484 8.441h-10.907Zm56.4 12.33c0 6.828-5.216 9.958-9.389 9.958-4.647 0-7.967-3.414-7.967-8.725V35.907h-5.596V59.05c0 9.295 4.932 13.752 11.761 13.752 5.501 0 9.105-2.94 10.812-6.639h.379v6.165h5.596v-36.42h-5.596v21.53Zm12.507 14.89h5.595v-36.42h-5.595v36.42Zm2.845-42.49c2.181 0 3.983-1.707 3.983-3.793 0-2.087-1.802-3.794-3.983-3.794-2.182 0-3.984 1.707-3.984 3.794 0 2.086 1.802 3.793 3.984 3.793Zm15.256-6.07h-5.595v48.56h5.595v-48.56Zm20.663 49.319c7.018 0 9.39-4.363 10.622-6.355h.664v5.596h5.406v-48.56h-5.595v17.926h-.475c-1.232-1.897-3.414-6.26-10.527-6.26-9.2 0-15.554 7.303-15.554 18.779 0 11.57 6.354 18.874 15.459 18.874Zm.759-5.027c-7.018 0-10.623-6.165-10.623-13.942 0-7.682 3.51-13.657 10.623-13.657 6.829 0 10.433 5.5 10.433 13.657 0 8.251-3.699 13.942-10.433 13.942Zm38.89 5.027c7.398 0 12.804-3.7 14.511-9.2l-5.406-1.518c-1.423 3.794-4.718 5.691-9.105 5.691-6.568 0-11.096-4.244-11.357-12.045h26.437v-2.371c0-13.563-8.062-18.21-15.649-18.21-9.864 0-16.408 7.777-16.408 18.969 0 11.191 6.45 18.684 16.977 18.684Zm-11.357-21.909c.379-5.667 4.386-10.717 10.788-10.717 6.07 0 9.959 4.552 9.959 10.717h-20.747Zm31.611 21.15h5.595V49.28c0-4.932 3.889-8.536 9.2-8.536 1.494 0 3.035.285 3.415.38v-5.69a53.87 53.87 0 0 0-2.941-.096c-4.362 0-8.156 2.466-9.484 6.07h-.379v-5.5h-5.406v36.419ZM476.201 20.01h-4.734l-14.465 53.74h4.734l14.465-53.74Z"
diff --git a/website/theme/components/menu/index.js b/website/theme/components/menu/index.js
index bbb861faf..29ba912d2 100644
--- a/website/theme/components/menu/index.js
+++ b/website/theme/components/menu/index.js
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import { useRef, useState } from "react";
 
 import styles from "./Menu.module.scss";
 
diff --git a/website/theme/pages/_app.js b/website/theme/pages/_app.js
index ed5913f2b..50b70d6ec 100644
--- a/website/theme/pages/_app.js
+++ b/website/theme/pages/_app.js
@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-page-custom-font */
 import "@codesandbox/sandpack-react/dist/index.css";
 import "../styles/globals.scss";
 import Head from "next/head";

From 596369e814ffcb427f394a9e18f1b871a9b603cd Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Tue, 14 Dec 2021 17:06:20 +0000
Subject: [PATCH 6/6] remove react.fc type

---
 sandpack-react/src/common/ErrorOverlay.tsx                      | 2 +-
 .../common/OpenInCodeSandboxButton/OpenInCodeSandboxButton.tsx  | 2 +-
 sandpack-react/src/common/RunButton.tsx                         | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/sandpack-react/src/common/ErrorOverlay.tsx b/sandpack-react/src/common/ErrorOverlay.tsx
index e89319b20..727dc9423 100644
--- a/sandpack-react/src/common/ErrorOverlay.tsx
+++ b/sandpack-react/src/common/ErrorOverlay.tsx
@@ -6,7 +6,7 @@ import { useErrorMessage } from "../hooks/useErrorMessage";
 /**
  * @category Components
  */
-export const ErrorOverlay: React.FC = () => {
+export const ErrorOverlay = (): JSX.Element | null => {
   const errorMessage = useErrorMessage();
   const c = useClasser("sp");
 
diff --git a/sandpack-react/src/common/OpenInCodeSandboxButton/OpenInCodeSandboxButton.tsx b/sandpack-react/src/common/OpenInCodeSandboxButton/OpenInCodeSandboxButton.tsx
index 2e0045af0..e56406a1d 100644
--- a/sandpack-react/src/common/OpenInCodeSandboxButton/OpenInCodeSandboxButton.tsx
+++ b/sandpack-react/src/common/OpenInCodeSandboxButton/OpenInCodeSandboxButton.tsx
@@ -10,7 +10,7 @@ import { UnstyledOpenInCodeSandboxButton } from "./UnstyledOpenInCodeSandboxButt
 /**
  * @category Components
  */
-export const OpenInCodeSandboxButton: React.FC = () => {
+export const OpenInCodeSandboxButton = (): JSX.Element | null => {
   const { theme } = useSandpackTheme();
   const c = useClasser("sp");
 
diff --git a/sandpack-react/src/common/RunButton.tsx b/sandpack-react/src/common/RunButton.tsx
index 40101f9f4..0c2a88fb2 100644
--- a/sandpack-react/src/common/RunButton.tsx
+++ b/sandpack-react/src/common/RunButton.tsx
@@ -7,7 +7,7 @@ import { RunIcon } from "../icons";
 /**
  * @category Components
  */
-export const RunButton: React.FC = () => {
+export const RunButton = (): JSX.Element | null => {
   const c = useClasser("sp");
   const { sandpack } = useSandpack();