Add eslint rules and lint project (#56)

* Add lint config and run format

* Move contributing.md to root

.husky/pre-commit

@@ -1 +1 @@
-cd app && npm run format
+cd app && npm run lint && npm run format

app/electron/main/code/index.ts

@@ -46,7 +46,9 @@ function addClassToAst(ast: t.File, className: string) {
     let processed = false;
     traverse(ast, {
         JSXOpeningElement(path) {
-            if (processed) return;
+            if (processed) {
+                return;
+            }
             let classNameAttr = null;
             path.node.attributes.forEach((attribute) => {
                 if (t.isJSXAttribute(attribute) && attribute.name.name === 'className') {

app/electron/main/index.ts

@@ -20,10 +20,14 @@ process.env.VITE_PUBLIC = VITE_DEV_SERVER_URL
     : RENDERER_DIST;
 
 // Disable GPU Acceleration for Windows 7
-if (os.release().startsWith('6.1')) app.disableHardwareAcceleration();
+if (os.release().startsWith('6.1')) {
+    app.disableHardwareAcceleration();
+}
 
 // Set application name for Windows 10+ notifications
-if (process.platform === 'win32') app.setAppUserModelId(app.getName());
+if (process.platform === 'win32') {
+    app.setAppUserModelId(app.getName());
+}
 
 if (!app.requestSingleInstanceLock()) {
     app.quit();
@@ -67,7 +71,9 @@ function initMainWindow() {
 
     // Ensure links open externally
     win.webContents.setWindowOpenHandler(({ url }) => {
-        if (url.startsWith('https:')) shell.openExternal(url);
+        if (url.startsWith('https:')) {
+            shell.openExternal(url);
+        }
         return { action: 'deny' };
     });
 }
@@ -77,13 +83,17 @@ function listenForAppEvents() {
 
     app.on('window-all-closed', () => {
         win = null;
-        if (process.platform !== 'darwin') app.quit();
+        if (process.platform !== 'darwin') {
+            app.quit();
+        }
     });
 
     app.on('second-instance', () => {
         if (win) {
             // Focus on the main window if the user tried to open another
-            if (win.isMinimized()) win.restore();
+            if (win.isMinimized()) {
+                win.restore();
+            }
             win.focus();
         }
     });

app/electron/main/tunnel/index.ts

@@ -10,7 +10,9 @@ export class TunnelService {
     }
 
     async close() {
-        if (this.tunnel) await this.tunnel.close();
+        if (this.tunnel) {
+            await this.tunnel.close();
+        }
     }
 
     async getPassword() {

app/electron/preload/webview/changes/index.ts

@@ -1,4 +1,4 @@
-// @ts-ignore - No external dependencies for webview preload
+// @ts-expect-error - No external dependencies for webview preload
 import { CssNode, Declaration, Rule, generate, parse, walk } from './csstree.esm.js';
 import { EditorAttributes } from '/common/constants';
 
@@ -130,7 +130,9 @@ export class CssStyleChange {
     }
 
     jsToCssProperty(key: string) {
-        if (!key) return '';
+        if (!key) {
+            return '';
+        }
         return key.replace(/([A-Z])/g, '-$1').toLowerCase();
     }
 }

app/electron/preload/webview/elements/finder.ts

@@ -1,7 +1,7 @@
 // License: MIT
 // Author: Anton Medvedev <[email protected]>
 // Source: https://github.com/antonmedv/finder
-// @ts-ignore
+// @ts-expect-error - No declaration
 import { generate, parse } from '../changes/csstree.esm.js';
 
 type Knot = {
@@ -82,7 +82,7 @@ function bottomUpSearch(
     fallback?: () => Path | null,
 ): Path | null {
     let path: Path | null = null;
-    let stack: Knot[][] = [];
+    const stack: Knot[][] = [];
     let current: Element | null = input;
     let i = 0;
     while (current) {
@@ -115,7 +115,7 @@ function bottomUpSearch(
                 level = [nthChild(level[0], nth)];
             }
         }
-        for (let node of level) {
+        for (const node of level) {
             node.level = i;
         }
         stack.push(level);
@@ -142,7 +142,7 @@ function findUniquePath(stack: Knot[][], fallback?: () => Path | null): Path | n
     if (paths.length > config.threshold) {
         return fallback ? fallback() : null;
     }
-    for (let candidate of paths) {
+    for (const candidate of paths) {
         if (unique(candidate)) {
             return candidate;
         }
@@ -278,7 +278,7 @@ function notEmpty<T>(value: T | null | undefined): value is T {
 
 function* combinations(stack: Knot[][], path: Knot[] = []): Generator<Knot[]> {
     if (stack.length > 0) {
-        for (let node of stack[0]) {
+        for (const node of stack[0]) {
             yield* combinations(stack.slice(1, stack.length), path.concat(node));
         }
     } else {

app/electron/preload/webview/elements/index.ts

@@ -2,7 +2,7 @@ import { finder } from './finder';
 import { EditorAttributes } from '/common/constants';
 import { ElementMetadata } from '/common/models';
 
-export const handleMouseEvent = (e: MouseEvent): Object => {
+export const handleMouseEvent = (e: MouseEvent): object => {
     const scroll = { coordinates: { x: e.clientX, y: e.clientY } };
     if (e.type === 'scroll' || e.type === 'wheel') {
         return scroll;
@@ -14,7 +14,9 @@ export const handleMouseEvent = (e: MouseEvent): Object => {
     }
 
     const el = deepElementFromPoint(e.clientX, e.clientY);
-    if (!el) return scroll;
+    if (!el) {
+        return scroll;
+    }
 
     const tagName = el.tagName.toLowerCase();
     const rect = el.getBoundingClientRect();
@@ -37,7 +39,9 @@ export const handleMouseEvent = (e: MouseEvent): Object => {
 
 const getParentRect = (el: HTMLElement): DOMRect | null => {
     const parent = el.parentElement;
-    if (!parent) return null;
+    if (!parent) {
+        return null;
+    }
     return parent.getBoundingClientRect();
 };
 
@@ -63,14 +67,22 @@ export const getUniqueSelector = (el: HTMLElement): string => {
 
 export const deepElementFromPoint = (x: number, y: number): Element | undefined => {
     const el = document.elementFromPoint(x, y);
-    if (!el) return;
+    if (!el) {
+        return;
+    }
     const crawlShadows = (node: Element): Element => {
         if (node?.shadowRoot) {
             const potential = node.shadowRoot.elementFromPoint(x, y);
-            if (potential == node) return node;
-            else if (potential?.shadowRoot) return crawlShadows(potential);
-            else return potential || node;
-        } else return node;
+            if (potential == node) {
+                return node;
+            } else if (potential?.shadowRoot) {
+                return crawlShadows(potential);
+            } else {
+                return potential || node;
+            }
+        } else {
+            return node;
+        }
     };
 
     const nested_shadow = crawlShadows(el);

app/electron/preload/webview/eventBridge.ts

@@ -11,7 +11,7 @@ export class EventBridge {
         this.setListenToHostEvents();
     }
 
-    LOCAL_EVENT_HANDLERS: Record<string, (e: any) => Object> = {
+    LOCAL_EVENT_HANDLERS: Record<string, (e: any) => object> = {
         mouseover: handleMouseEvent,
         click: handleMouseEvent,
         dblclick: handleMouseEvent,

app/eslint.config.js

@@ -0,0 +1,36 @@
+import { fixupConfigRules } from '@eslint/compat';
+import pluginJs from '@eslint/js';
+import pluginReactConfig from 'eslint-plugin-react/configs/recommended.js';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+export default [
+    { files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
+    { languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } } },
+    { languageOptions: { globals: { ...globals.browser, ...globals.node } } },
+    pluginJs.configs.recommended,
+    ...tseslint.configs.recommended,
+    ...fixupConfigRules(pluginReactConfig),
+    {
+        ignores: [
+            'node_modules/',
+            'dist/',
+            'dist-electron/',
+            'release/',
+            'src/out/',
+            'electron/preload/webview/changes/csstree.esm.js',
+        ],
+    },
+    {
+        rules: {
+            curly: ['error', 'all'],
+            'prefer-const': 'warn',
+            'react/react-in-jsx-scope': 'off',
+            'react/jsx-uses-react': 'off',
+            'react/no-unknown-property': 'off',
+            'react/prop-types': 'off',
+            '@typescript-eslint/no-explicit-any': 'off',
+            '@typescript-eslint/no-unused-vars': 'warn',
+        },
+    },
+];

app/package.json

@@ -24,7 +24,7 @@
         "pree2e": "vite build --mode=test",
         "e2e": "playwright test",
         "test": "bun test",
-        "lint": "eslint .",
+        "lint": "eslint --fix .",
         "format": "prettier --write ."
     },
     "dependencies": {
@@ -54,6 +54,8 @@
         "tailwindcss-animate": "^1.0.7"
     },
     "devDependencies": {
+        "@eslint/compat": "^1.1.1",
+        "@eslint/js": "^9.7.0",
         "@playwright/test": "^1.42.1",
         "@types/bun": "^1.1.6",
         "@types/css-tree": "^2.3.8",
@@ -67,8 +69,11 @@
         "css-tree": "^2.3.1",
         "electron": "^31.1.0",
         "electron-builder": "^24.13.3",
-        "eslint": "^9.6.0",
+        "eslint": "9.x",
         "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-react": "^7.34.3",
+        "globals": "^15.8.0",
+        "husky": "^8.0.0",
         "mobx": "^6.12.4",
         "mobx-react-lite": "^4.0.7",
         "postcss": "^8.4.38",
@@ -78,9 +83,9 @@
         "react-dom": "^18.2.0",
         "tailwindcss": "^3.4.4",
         "typescript": "^5.4.2",
+        "typescript-eslint": "^7.16.0",
         "vite": "^5.1.5",
         "vite-plugin-electron": "^0.28.4",
-        "vite-plugin-electron-renderer": "^0.14.5",
-        "husky": "^8.0.0"
+        "vite-plugin-electron-renderer": "^0.14.5"
     }
 }

app/src/components/theme-provider.tsx

@@ -67,7 +67,9 @@ export function ThemeProvider({
 export const useTheme = () => {
     const context = useContext(ThemeProviderContext);
 
-    if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider');
+    if (context === undefined) {
+        throw new Error('useTheme must be used within a ThemeProvider');
+    }
 
     return context;
 };

app/src/components/ui/use-toast.ts

@@ -154,7 +154,9 @@ function toast({ ...props }: Toast) {
             id,
             open: true,
             onOpenChange: (open) => {
-                if (!open) dismiss();
+                if (!open) {
+                    dismiss();
+                }
             },
         },
     });

app/src/lib/editor/engine/code/index.ts

@@ -49,8 +49,9 @@ export class CodeManager {
 
     async getTailwindClasses(stylesheet: string) {
         const tailwindResult = CssToTailwindTranslator(stylesheet);
-        if (tailwindResult.code !== 'OK')
+        if (tailwindResult.code !== 'OK') {
             throw new Error('Failed to translate CSS to Tailwind CSS.');
+        }
         return tailwindResult.data;
     }
 
@@ -59,7 +60,9 @@ export class CodeManager {
         for (const twRes of tailwindResults) {
             const { resultVal, selectorName } = twRes;
             const dataOnlookId = await this.getDataOnlookId(selectorName, webview);
-            if (!dataOnlookId) continue;
+            if (!dataOnlookId) {
+                continue;
+            }
 
             let writeParam = writeParams.get(dataOnlookId);
             if (!writeParam) {

app/src/lib/editor/engine/index.ts

@@ -27,7 +27,9 @@ export class EditorEngine {
     updateStyle(style: string, value: string) {
         this.state.selected.forEach((elementMetadata) => {
             const webview = this.webviews.get(elementMetadata.webviewId);
-            if (!webview) return;
+            if (!webview) {
+                return;
+            }
             webview.send(WebviewChannels.UPDATE_STYLE, {
                 selector: elementMetadata.selector,
                 style,

app/src/lib/editor/engine/overlay/index.ts

@@ -116,7 +116,9 @@ export class OverlayManager {
     };
 
     updateParentRect = (el: HTMLElement) => {
-        if (!el) return;
+        if (!el) {
+            return;
+        }
         const rect = el.getBoundingClientRect();
         this.parentRect.render(rect);
     };
@@ -126,7 +128,9 @@ export class OverlayManager {
     };
 
     updateEditRect = (el: HTMLElement) => {
-        if (!el) return;
+        if (!el) {
+            return;
+        }
         const rect = el.getBoundingClientRect();
         this.editRect.render(rect);
     };

app/src/lib/editor/engine/styles/autolayout.ts

@@ -14,9 +14,15 @@ export function getInputValues(value: string): {
     mode: LayoutMode;
     value: string;
 } {
-    if (value === 'fit-content') return { mode: LayoutMode.Fit, value: value };
-    if (value === '100%' || value === 'auto') return { mode: LayoutMode.Fill, value: '100%' };
-    if (value.includes('%')) return { mode: LayoutMode.Relative, value: value };
+    if (value === 'fit-content') {
+        return { mode: LayoutMode.Fit, value: value };
+    }
+    if (value === '100%' || value === 'auto') {
+        return { mode: LayoutMode.Fill, value: '100%' };
+    }
+    if (value.includes('%')) {
+        return { mode: LayoutMode.Relative, value: value };
+    }
     return { mode: LayoutMode.Fixed, value: value };
 }
 
@@ -42,7 +48,7 @@ export function getStyles(
     parentRect: DOMRect,
 ): Record<string, string> {
     const { width, height } = computedStyles;
-    let MODE_PROPERTIES = {
+    const MODE_PROPERTIES = {
         [LayoutMode.Fit]: 'fit-content',
         [LayoutMode.Fill]: '100%',
         [LayoutMode.Relative]: getRelativeValue(property, computedStyles, parentRect),