fix: explicity return type

.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

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

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/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)",

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,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();

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

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"

sandpack-react/src/components/Navigator/index.tsx

@@ -44,19 +44,19 @@ 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}`;
 
     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" });
   };
 

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

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

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

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

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

sandpack-react/src/hooks/useLoadingOverlayState.ts

@@ -40,7 +40,7 @@ export const useLoadingOverlayState = (
       }
     }, clientId);
 
-    return () => {
+    return (): void => {
       clearTimeout(outerHook);
       clearTimeout(innerHook);
       unsub();