Enforce prettier and eslint at commit, ran on all files

.pre-commit-config.yaml

@@ -1,12 +1,12 @@
 repos:
   # Black
   - repo: https://github.com/psf/black
-    rev: 23.10.0
+    rev: 23.10.1
     hooks:
       - id: black
   # Ruff
   - repo: https://github.com/charliermarsh/ruff-pre-commit
-    rev: v0.1.1
+    rev: v0.1.2
     hooks:
       - id: ruff
   # Mypy
@@ -15,3 +15,34 @@ repos:
     hooks:
       - id: mypy
         additional_dependencies: ["types-requests", "types-PyYAML"]
+  ## JS ##
+  - repo: https://github.com/pre-commit/mirrors-prettier
+    rev: v3.0.3
+    hooks:
+      - id: prettier
+        args: ['--config', 'frontend/.prettierrc', '--ignore-unknown', '--write', '--check']
+        language: node
+        entry: frontend/node_modules/.bin/prettier
+        require_serial: true
+        files: ^frontend/.*\.(js|jsx|ts|tsx|css|svelte)$
+        additional_dependencies:
+          - prettier@2.8.8
+          - prettier-plugin-svelte@2.10.1
+  - repo: https://github.com/pre-commit/mirrors-eslint
+    rev: v8.52.0
+    hooks:
+      - id: eslint
+        name: eslint
+        language: node
+        entry: frontend/node_modules/eslint/bin/eslint.js
+        #args: ['--fix'] #lets wait before using this
+        require_serial: true
+        files: \.(js|ts|svelte)$
+        additional_dependencies:
+          - eslint
+          - svelte
+          - typescript
+          - eslint-plugin-svelte
+          - "@typescript-eslint/eslint-plugin"
+          - "@typescript-eslint/parser"
+          - svelte-eslint-parser

frontend/package.json

@@ -21,14 +21,14 @@
 		"@typescript-eslint/eslint-plugin": "^6.0.0",
 		"@typescript-eslint/parser": "^6.0.0",
 		"autoprefixer": "^10.4.14",
-		"eslint": "^8.28.0",
+		"eslint": "^8.52.0",
 		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-svelte": "^2.30.0",
+		"eslint-plugin-svelte": "^2.34.0",
 		"postcss": "^8.4.24",
 		"postcss-load-config": "^4.0.1",
-		"prettier": "^2.8.0",
+		"prettier": "^2.8.8",
 		"prettier-plugin-svelte": "^2.10.1",
-		"svelte": "^4.0.5",
+		"svelte": "^4.2.2",
 		"svelte-check": "^3.4.3",
 		"tailwindcss": "^3.3.2",
 		"tslib": "^2.4.1",

frontend/src/app.d.ts

@@ -10,4 +10,4 @@ declare global {
 	}
 }
 
-export { };
+export {};

frontend/src/lib/utils/generateIds.ts

@@ -1,5 +1,5 @@
 let n: number = Date.now();
 
 export default function (): string {
-    return (++n).toString(36);
+	return (++n).toString(36);
 }

frontend/src/routes/+layout.server.ts

@@ -2,36 +2,31 @@ export const ssr = true;
 export const csr = false;
 
 export interface Categories {
-    mycats: any;
-    status?: number;
-    error?: string;
+	mycats: any;
+	status?: number;
+	error?: string;
 }
 
-
-
 /** @type {import('./$types').PageServerLoad} */
 export async function load(): Promise<Categories> {
-    console.log(`load categories start`);
-    try {
-
-        const res = await fetch(`http://localhost:8000/api/categories`);
-
-        if (!res.ok) {
-            throw new Error(`Failed to fetch categories with status ${res.status}`);
-        }
-
-        const categories = await res.json();
-
-        console.log(`load categories len: ${Object.keys(categories).length}`);
-        return { mycats: categories };
-
-    } catch (error) {
-        console.error('Failed to load layout categories data:', error);
-        return {
-            mycats: null,
-            status: 500,
-            error: 'Failed to load categories'
-        };
-    }
+	console.log(`load categories start`);
+	try {
+		const res = await fetch(`http://localhost:8000/api/categories`);
+
+		if (!res.ok) {
+			throw new Error(`Failed to fetch categories with status ${res.status}`);
+		}
+
+		const categories = await res.json();
+
+		console.log(`load categories len: ${Object.keys(categories).length}`);
+		return { mycats: categories };
+	} catch (error) {
+		console.error('Failed to load layout categories data:', error);
+		return {
+			mycats: null,
+			status: 500,
+			error: 'Failed to load categories'
+		};
+	}
 }
-

frontend/src/routes/+page.server.ts

@@ -1,5 +1,5 @@
 import { redirect } from '@sveltejs/kit';
 
 export function load() {
-    throw redirect(307, '/collections/new_weekly');
-}
+	throw redirect(307, '/collections/new_weekly');
+}

frontend/src/routes/apps/[id]/+page.server.ts

@@ -3,7 +3,8 @@ export const csr = false;
 
 /** @type {import('../[id]/$types').PageServerLoad} */
 export async function load({ params }) {
-	console.log('load app started'); try {
+	console.log('load app started');
+	try {
 		const id = params.id;
 
 		const res = await fetch(`http://localhost:8000/api/apps/${id}`);
@@ -15,7 +16,6 @@ export async function load({ params }) {
 		const app_detail = await res.json();
 		console.log(`loaded app_detail with len: ${Object.keys(app_detail).length}`);
 		return { myapp: app_detail };
-
 	} catch (error) {
 		console.error('Failed to load app data:', error);
 		return {
@@ -24,5 +24,3 @@ export async function load({ params }) {
 		};
 	}
 }
-
-

frontend/src/routes/collections/[collection]/+page.server.ts

@@ -4,31 +4,32 @@ export const csr: boolean = true;
 console.log('Script executed');
 
 interface LoadResponse {
-    myapps: any;
-    status?: number;
-    error?: string;
+	myapps: any;
+	status?: number;
+	error?: string;
 }
+
 /** @type {import('../[collection]/$types').PageServerLoad} */
 export async function load({ params }): Promise<LoadResponse> {
-    const collectionValue = params.collection
-    console.log(`load started collection=${collectionValue}`);
-    try {
-        const res = await fetch(`http://localhost:8000/api/apps/collections/${collectionValue}`);
+	const collectionValue = params.collection;
+	console.log(`load started collection=${collectionValue}`);
+	try {
+		const res = await fetch(`http://localhost:8000/api/apps/collections/${collectionValue}`);
 
-        if (!res.ok) {
-            const text = await res.text();
-            throw new Error(`Failed to fetch collections status ${res.status} ${text}`);
-        }
+		if (!res.ok) {
+			const text = await res.text();
+			throw new Error(`Failed to fetch collections status ${res.status} ${text}`);
+		}
 
-        const app_collections: any = await res.json();
-        console.log(`loaded collections with len: ${Object.keys(app_collections).length}`);
-        return { myapps: app_collections };
-    } catch (error) {
-        console.error('Failed to load data:', error);
-        return {
-            myapps: {},
-            status: 500,
-            error: 'Failed to load trending apps'
-        };
-    }
+		const app_collections: any = await res.json();
+		console.log(`loaded collections with len: ${Object.keys(app_collections).length}`);
+		return { myapps: app_collections };
+	} catch (error) {
+		console.error('Failed to load data:', error);
+		return {
+			myapps: {},
+			status: 500,
+			error: 'Failed to load trending apps'
+		};
+	}
 }

frontend/src/routes/collections/[collection]/+page.svelte

@@ -5,6 +5,7 @@
 	function getClass(app) {
 		return app.featured_image_url && app.featured_image_url !== 'null' ? 'col-span-2' : '';
 	}
+
 	import { myStoreSelection } from '../../../stores';
 	import { myCategorySelection } from '../../../stores';
 

frontend/src/stores.ts

@@ -4,4 +4,4 @@ export const myCollectionStore = writable('new_weekly');
 export const myStoreSelection = writable('google');
 export const myCategorySelection = writable('overall');
 
-export const myCategoryMap = writable();
+export const myCategoryMap = writable();

frontend/tailwind.config.ts

@@ -1,4 +1,3 @@
-
 import { join } from 'path';
 import type { Config } from 'tailwindcss';
 
@@ -11,28 +10,24 @@ const config = {
 	content: [
 		'./src/**/*.{html,js,svelte,ts}',
 		// 3. Append the path to the Skeleton package
-		join(require.resolve(
-			'@skeletonlabs/skeleton'),
-			'../**/*.{html,js,svelte,ts}'
-		)
+		join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
 	],
 	theme: {
-		extend: {},
+		extend: {}
 	},
 	plugins: [
 		// 4. Append the Skeleton plugin (after other plugins)
 		skeleton({
 			themes: {
 				preset: [
-					{ name: "skeleton", enhancements: true },
-					{ name: "vintage", enhancements: true },
-					{ name: "wintry", enhancements: true },
-					{ name: "modern", enhancements: true },
+					{ name: 'skeleton', enhancements: true },
+					{ name: 'vintage', enhancements: true },
+					{ name: 'wintry', enhancements: true },
+					{ name: 'modern', enhancements: true }
 				]
 			}
 		})
 	]
 } satisfies Config;
 
 export default config;
-