eslint (#9)

Author: alex-clickhouse

eslint.config.js

@@ -0,0 +1,26 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
+    },
+  }
+);

package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "eslint . && tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
     "test": "vitest run",

src/components/App.tsx

@@ -2,7 +2,8 @@ import { useEffect } from 'react';
 import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 import { HexViewer } from './HexViewer/HexViewer';
 import { AstTree } from './AstTree/AstTree';
-import { QueryInput, decodeBase64Url } from './QueryInput';
+import { QueryInput } from './QueryInput';
+import { decodeBase64Url } from '../core/base64url';
 import { useStore } from '../store/store';
 import { ClickHouseFormat } from '../core/types/formats';
 import logo from '../assets/clickhouse-yellow-badge.svg';

src/components/QueryInput.tsx

@@ -2,21 +2,7 @@ import { useCallback, useRef, useState } from 'react';
 import { useStore } from '../store/store';
 import { DEFAULT_QUERY } from '../core/clickhouse/client';
 import { ClickHouseFormat, FORMAT_METADATA } from '../core/types/formats';
-
-function encodeBase64Url(str: string): string {
-  const bytes = new TextEncoder().encode(str);
-  const binary = String.fromCharCode(...bytes);
-  return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
-}
-
-function decodeBase64Url(encoded: string): string {
-  const base64 = encoded.replace(/-/g, '+').replace(/_/g, '/');
-  const binary = atob(base64);
-  const bytes = Uint8Array.from(binary, (c) => c.charCodeAt(0));
-  return new TextDecoder().decode(bytes);
-}
-
-export { encodeBase64Url, decodeBase64Url };
+import { encodeBase64Url } from '../core/base64url';
 
 export function QueryInput() {
   const query = useStore((s) => s.query);

src/core/base64url.ts

@@ -0,0 +1,12 @@
+export function encodeBase64Url(str: string): string {
+  const bytes = new TextEncoder().encode(str);
+  const binary = String.fromCharCode(...bytes);
+  return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+}
+
+export function decodeBase64Url(encoded: string): string {
+  const base64 = encoded.replace(/-/g, '+').replace(/_/g, '/');
+  const binary = atob(base64);
+  const bytes = Uint8Array.from(binary, (c) => c.charCodeAt(0));
+  return new TextDecoder().decode(bytes);
+}