Add linting and formatting (onlook-dev#51)

* Add eslint, husky, and prettier * Remove vscode settings
learnuidev · Jul 12, 2024 · 2c0b32f · 2c0b32f
1 parent 5b0db46
commit 2c0b32f
Show file tree

Hide file tree

Showing 99 changed files with 21,671 additions and 3,313 deletions.
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1 @@
+cd app && npm run format
diff --git a/.vscode/settings.json b/.vscode/settings.json
diff --git a/app/.prettierignore b/app/.prettierignore
@@ -0,0 +1,4 @@
+dist-electron
+dist
+node_modules
+release
diff --git a/app/.prettierrc b/app/.prettierrc
@@ -0,0 +1,11 @@
+{
+    "singleQuote": true,
+    "printWidth": 100,
+    "tabWidth": 4,
+    "useTabs": false,
+    "semi": true,
+    "jsxSingleQuote": false,
+    "bracketSpacing": true,
+    "arrowParens": "always",
+    "endOfLine": "lf"
+}
diff --git a/app/bun.lockb b/app/bun.lockb
diff --git a/app/common/constants.ts b/app/common/constants.ts
@@ -1,29 +1,29 @@
 export enum EditorAttributes {
-    ONLOOK_TOOLBAR = "onlook-toolbar",
-    ONLOOK_RECT_ID = "onlook-rect",
+    ONLOOK_TOOLBAR = 'onlook-toolbar',
+    ONLOOK_RECT_ID = 'onlook-rect',
     ONLOOK_STYLESHEET_ID = 'onlook-stylesheet',
 
-    DATA_ONLOOK_ID = "data-onlook-id",
-    DATA_ONLOOK_IGNORE = "data-onlook-ignore",
-    DATA_ONLOOK_SAVED = "data-onlook-saved",
-    DATA_ONLOOK_SNAPSHOT = "data-onlook-snapshot",
-    DATA_ONLOOK_OLD_VALS = "data-onlook-old-vals",
-    DATA_ONLOOK_COMPONENT_ID = "data-onlook-component-id",
+    DATA_ONLOOK_ID = 'data-onlook-id',
+    DATA_ONLOOK_IGNORE = 'data-onlook-ignore',
+    DATA_ONLOOK_SAVED = 'data-onlook-saved',
+    DATA_ONLOOK_SNAPSHOT = 'data-onlook-snapshot',
+    DATA_ONLOOK_OLD_VALS = 'data-onlook-old-vals',
+    DATA_ONLOOK_COMPONENT_ID = 'data-onlook-component-id',
 }
 
 export enum WebviewChannels {
-    STYLE_UPDATED = "style-updated",
-    UPDATE_STYLE = "update-style",
-    CLEAR_STYLE_SHEET = "clear-style-sheet",
+    STYLE_UPDATED = 'style-updated',
+    UPDATE_STYLE = 'update-style',
+    CLEAR_STYLE_SHEET = 'clear-style-sheet',
 }
 
 export enum MainChannels {
     WEBVIEW_PRELOAD_PATH = 'webview-preload-path',
-    OPEN_CODE_BLOCK = "open-code-block",
-    WRITE_CODE_BLOCK = "write-code-block",
-    GET_STYLE_CODE = "get-style-code",
-    OPEN_TUNNEL = "open-tunnel",
-    CLOSE_TUNNEL = "close-tunnel",
+    OPEN_CODE_BLOCK = 'open-code-block',
+    WRITE_CODE_BLOCK = 'write-code-block',
+    GET_STYLE_CODE = 'get-style-code',
+    OPEN_TUNNEL = 'open-tunnel',
+    CLOSE_TUNNEL = 'close-tunnel',
 }
 
-export const APP_NAME = 'Onlook';
+export const APP_NAME = 'Onlook';
diff --git a/app/common/helpers.ts b/app/common/helpers.ts
@@ -1,7 +1,7 @@
-import { TemplateNode } from "./models";
+import { TemplateNode } from './models';
 
 export function querySelectorCommand(selector: string) {
-    return `document.querySelector('${CSS.escape(selector)}')`
+    return `document.querySelector('${CSS.escape(selector)}')`;
 }
 
 export function compareTemplateNodes(node1: TemplateNode, node2: TemplateNode): number {
@@ -18,4 +18,4 @@ export function compareTemplateNodes(node1: TemplateNode, node2: TemplateNode):
             return 0;
         }
     }
-}
+}
diff --git a/app/common/models.ts b/app/common/models.ts
@@ -1,4 +1,3 @@
-
 export interface ElementMetadata {
     tagName: string;
     selector: string;
@@ -21,15 +20,15 @@ export interface TemplateTagPosition {
 }
 
 export interface TemplateTag {
-    start: TemplateTagPosition
-    end: TemplateTagPosition
+    start: TemplateTagPosition;
+    end: TemplateTagPosition;
 }
 
 export interface TemplateNode {
-    path: string,
-    startTag: TemplateTag,
-    endTag: TemplateTag,
-    commit: string,
+    path: string;
+    startTag: TemplateTag;
+    endTag: TemplateTag;
+    commit: string;
 }
 
 export interface CodeResult {

diff --git a/app/components.json b/app/components.json
@@ -1,17 +1,17 @@
 {
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": {
-    "config": "tailwind.config.js",
-    "css": "src/index.css",
-    "baseColor": "stone",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils"
-  }
-}
+    "$schema": "https://ui.shadcn.com/schema.json",
+    "style": "new-york",
+    "rsc": false,
+    "tsx": true,
+    "tailwind": {
+        "config": "tailwind.config.js",
+        "css": "src/index.css",
+        "baseColor": "stone",
+        "cssVariables": true,
+        "prefix": ""
+    },
+    "aliases": {
+        "components": "@/components",
+        "utils": "@/lib/utils"
+    }
+}
diff --git a/app/electron-builder.json5 b/app/electron-builder.json5
@@ -2,54 +2,42 @@
  * @see https://www.electron.build/configuration/configuration
  */
 {
-  "appId": "dev.onlook.studio",
-  "asar": true,
-  "directories": {
-    "output": "release/${version}"
-  },
-  "files": [
-    "dist-electron",
-    "dist"
-  ],
-  "mac": {
-    "artifactName": "${productName}_${version}.${ext}",
-    "target": [
-      "dmg",
-      "zip"
-    ]
-  },
-  "win": {
-    "target": [
-      {
-        "target": "nsis",
-        "arch": [
-          "x64"
-        ]
-      }
-    ],
-    "artifactName": "${productName}_${version}.${ext}"
-  },
-    "linux": {
-    "target": [
-      "AppImage",
-      "deb",
-      "rpm"
-    ],
-    "artifactName": "${productName}_${version}.${ext}",
-    "category": "Utility",
-    "desktop": {
-      "Name": "Onlook",
-    }
-  },
-  "nsis": {
-    "oneClick": false,
-    "perMachine": false,
-    "allowToChangeInstallationDirectory": true,
-    "deleteAppDataOnUninstall": false
-  },
-  "publish": {
-    "provider": "generic",
-    "channel": "latest",
-    "url": "https://onlook.dev/"
-  }
+    appId: 'dev.onlook.studio',
+    asar: true,
+    directories: {
+        output: 'release/${version}',
+    },
+    files: ['dist-electron', 'dist'],
+    mac: {
+        artifactName: '${productName}_${version}.${ext}',
+        target: ['dmg', 'zip'],
+    },
+    win: {
+        target: [
+            {
+                target: 'nsis',
+                arch: ['x64'],
+            },
+        ],
+        artifactName: '${productName}_${version}.${ext}',
+    },
+    linux: {
+        target: ['AppImage', 'deb', 'rpm'],
+        artifactName: '${productName}_${version}.${ext}',
+        category: 'Utility',
+        desktop: {
+            Name: 'Onlook',
+        },
+    },
+    nsis: {
+        oneClick: false,
+        perMachine: false,
+        allowToChangeInstallationDirectory: true,
+        deleteAppDataOnUninstall: false,
+    },
+    publish: {
+        provider: 'generic',
+        channel: 'latest',
+        url: 'https://onlook.dev/',
+    },
 }
diff --git a/app/electron/electron-env.d.ts b/app/electron/electron-env.d.ts
@@ -1,23 +1,23 @@
 /// <reference types="vite-electron-plugin/electron-env" />
 
 declare namespace NodeJS {
-  interface ProcessEnv {
-    VSCODE_DEBUG?: 'true'
-    /**
-     * The built directory structure
-     *
-     * ```tree
-     * ├─┬ dist-electron
-     * │ ├─┬ main
-     * │ │ └── index.js    > Electron-Main
-     * │ └─┬ preload
-     * │   └── index.mjs   > Preload-Scripts
-     * ├─┬ dist
-     * │ └── index.html    > Electron-Renderer
-     * ```
-     */
-    APP_ROOT: string
-    /** /dist/ or /public/ */
-    VITE_PUBLIC: string
-  }
+    interface ProcessEnv {
+        VSCODE_DEBUG?: 'true';
+        /**
+         * The built directory structure
+         *
+         * ```tree
+         * ├─┬ dist-electron
+         * │ ├─┬ main
+         * │ │ └── index.js    > Electron-Main
+         * │ └─┬ preload
+         * │   └── index.mjs   > Preload-Scripts
+         * ├─┬ dist
+         * │ └── index.html    > Electron-Renderer
+         * ```
+         */
+        APP_ROOT: string;
+        /** /dist/ or /public/ */
+        VITE_PUBLIC: string;
+    }
 }
diff --git a/app/electron/main/code/files.ts b/app/electron/main/code/files.ts
@@ -40,7 +40,8 @@ export async function readBlock(templateNode: TemplateNode): Promise<string> {
         const fileContent = await readFile(filePath);
         const lines = fileContent.split('\n');
 
-        const selectedText = lines.slice(startRow - 1, endRow)
+        const selectedText = lines
+            .slice(startRow - 1, endRow)
             .map((line, index, array) => {
                 if (index === 0 && array.length === 1) {
                     // Only one line
@@ -66,25 +67,35 @@ export async function readBlock(templateNode: TemplateNode): Promise<string> {
 
 export async function writeCodeResults(codeResults: CodeResult[]): Promise<void> {
     // Write from bottom to prevent line offset
-    const sortedCodeResults = codeResults.sort((a, b) => compareTemplateNodes(a.param.templateNode, b.param.templateNode)).toReversed()
-    const files = new Map<string, string>()
+    const sortedCodeResults = codeResults
+        .sort((a, b) => compareTemplateNodes(a.param.templateNode, b.param.templateNode))
+        .toReversed();
+    const files = new Map<string, string>();
 
     for (const result of sortedCodeResults) {
-        let fileContent = files.get(result.param.templateNode.path)
+        let fileContent = files.get(result.param.templateNode.path);
         if (!fileContent) {
-            fileContent = await readFile(result.param.templateNode.path)
+            fileContent = await readFile(result.param.templateNode.path);
         }
 
-        const newFileContent = await writeBlock(result.param.templateNode, result.generated, fileContent)
-        files.set(result.param.templateNode.path, newFileContent)
+        const newFileContent = await writeBlock(
+            result.param.templateNode,
+            result.generated,
+            fileContent,
+        );
+        files.set(result.param.templateNode.path, newFileContent);
     }
 
     for (const [filePath, content] of files) {
-        await writeFile(filePath, content)
+        await writeFile(filePath, content);
     }
 }
 
-export async function writeBlock(templateNode: TemplateNode, newBlock: string, fileContent: string): Promise<string> {
+export async function writeBlock(
+    templateNode: TemplateNode,
+    newBlock: string,
+    fileContent: string,
+): Promise<string> {
     try {
         const startTag = templateNode.startTag;
         const startRow = startTag.start.line;
@@ -103,7 +114,6 @@ export async function writeBlock(templateNode: TemplateNode, newBlock: string, f
 
         const newFileContent = [before, firstLine + newBlock + lastLine, after].join('\n');
         return newFileContent;
-
     } catch (error: any) {
         console.error('Error replacing range in file:', error);
         throw error;