fix: lint errors (#234)

.eslintrc

@@ -12,6 +12,7 @@
   ],
   "parser": "@typescript-eslint/parser",
   "rules": {
+    "@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
@@ -43,7 +44,7 @@
 
     // Consistently sort props
     "react/jsx-sort-props": [
-      "warn",
+      "error",
       {
         "ignoreCase": true,
         // key, ref must always come first
@@ -57,7 +58,7 @@
 
     // Group module and relative imports
     "import/order": [
-      "warn",
+      "error",
       {
         // Imports are grouped as follows:
         "groups": [
@@ -79,6 +80,14 @@
       }
     ]
   },
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {
+        "@typescript-eslint/explicit-function-return-type": ["error"]
+      }
+    }
+  ],
   "settings": {
     "version": "detect"
   }

sandpack-client/src/client.ts

@@ -169,9 +169,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
@@ -349,7 +351,7 @@ export class SandpackClient {
       this.dispatch({ type: "get-transpiler-context" });
     });
 
-  private getFiles() {
+  private getFiles(): SandpackBundlerFiles {
     const { sandboxInfo } = this;
 
     if (sandboxInfo.files["/package.json"] === undefined) {
@@ -364,7 +366,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%";

sandpack-client/src/iframe-protocol.ts

@@ -77,15 +77,15 @@ 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;
       };
     }
 
     const listenerId = this.globalListenersCount;
     this.globalListeners[listenerId] = listener;
     this.globalListenersCount++;
-    return () => {
+    return (): void => {
       delete this.globalListeners[listenerId];
     };
   }
@@ -94,21 +94,21 @@ export class IFrameProtocol {
   // All other messages (eg: from other iframes) are ignored
   channelListen(listener: ListenerFunction): UnsubscribeFunction {
     if (typeof listener !== "function") {
-      return () => {
+      return (): void => {
         return;
       };
     }
 
     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;
     }

sandpack-client/src/utils.ts

@@ -81,21 +81,23 @@ export function extractErrorDetails(msg: SandpackErrorMessage): SandpackError {
   };
 }
 
-function getRelevantStackFrame(frames?: ErrorStackFrame[]) {
+function getRelevantStackFrame(
+  frames?: ErrorStackFrame[]
+): ErrorStackFrame | undefined {
   if (!frames) {
     return;
   }
 
   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}`;
 }

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");
 

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");
 

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}
       >

sandpack-react/src/common/RunButton.tsx

@@ -7,14 +7,14 @@ import { RunIcon } from "../icons";
 /**
  * @category Components
  */
-export const RunButton: React.FC = () => {
+export const RunButton = (): JSX.Element | null => {
   const c = useClasser("sp");
   const { sandpack } = useSandpack();
 
   return (
     <button
       className={c("button")}
-      onClick={() => sandpack.runSandpack()}
+      onClick={(): void => sandpack.runSandpack()}
       style={{
         position: "absolute",
         bottom: "var(--sp-space-2)",

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>

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,13 +242,14 @@ export const CodeMirror = React.forwardRef<CodeMirrorRef, CodeMirrorProps>(
         cmView.current = view;
       }, 0);
 
-      return () => {
+      return (): void => {
         cmView.current?.destroy();
 
         clearTimeout(timer);
       };
 
       // 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,11 +273,12 @@ 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(
       function messageToInlineError() {
-        if (!showInlineErrors) return () => null;
+        if (!showInlineErrors) return;
 
         const unsubscribe = listen((message) => {
           const view = cmView.current;
@@ -316,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();

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) => {

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;
       }

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);
     };
 

sandpack-react/src/components/CodeEditor/utils.ts

@@ -171,5 +171,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
   );

sandpack-react/src/components/CodeViewer/CodeViewer.stories.tsx

@@ -62,10 +62,11 @@ export const VueCode: React.FC = () => (
 
 export const Decorators: React.FC = () => {
   const [itemClick, setItemClicked] = React.useState();
-  const ref = React.useRef<HTMLDivElement>();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const ref = React.useRef<any>(null);
 
   React.useEffect(() => {
-    const handle = (event) => {
+    const handle = (event): void => {
       let id = event.target.dataset.id;
 
       if (!id) {
@@ -80,7 +81,7 @@ export const Decorators: React.FC = () => {
       element.addEventListener("click", handle);
     });
 
-    return () => {
+    return (): void => {
       node?.querySelectorAll(".widget").forEach((element) => {
         element.removeEventListener("click", handle);
       });