harmonize eslint and vite configuration with hightable

bin/cli.js

@@ -23,7 +23,7 @@ if (arg === 'chat') {
   console.log(packageJson.version)
 } else if (!arg) {
   serve(process.cwd(), undefined) // current directory
-} else if (arg.match(/^https?:\/\//)) {
+} else if (/^https?:\/\//.exec(arg)) {
   serve(undefined, arg) // url
 } else {
   // resolve file or directory

bin/serve.js

@@ -123,7 +123,7 @@ function handleRequest(req, serveDirectory) {
  */
 async function handleStatic(filePath, range) {
   const stats = await fs.stat(filePath).catch(() => undefined)
-  if (!stats || !stats.isFile()) {
+  if (!stats?.isFile()) {
     return { status: 404, content: 'not found' }
   }
   const contentLength = stats.size
@@ -164,7 +164,7 @@ async function handleStatic(filePath, range) {
  */
 async function handleHead(filePath) {
   const stats = await fs.stat(filePath).catch(() => undefined)
-  if (!stats || !stats.isFile()) {
+  if (!stats?.isFile()) {
     console.error(`file not found ${filePath}`)
     return { status: 404, content: 'not found' }
   }
@@ -271,7 +271,7 @@ function startServer(port, path) {
       if (result.contentType) headers['Content-Type'] = result.contentType
       if (status === 301 && typeof content === 'string') {
         // handle redirect
-        headers['Location'] = content
+        headers.Location = content
         content = ''
       }
       // compress content

bin/streamConverters.js

@@ -26,9 +26,9 @@ export async function pipe(input, output) {
 export function readStreamToReadableStream(fsStream) {
   return new ReadableStream({
     start(/** @type {ReadableStreamDefaultController} */ controller) {
-      fsStream.on('data', (chunk) => controller.enqueue(chunk))
-      fsStream.on('end', () => controller.close())
-      fsStream.on('error', (error) => controller.error(error))
+      fsStream.on('data', (chunk) => { controller.enqueue(chunk) })
+      fsStream.on('end', () => { controller.close() })
+      fsStream.on('error', (error) => { controller.error(error) })
     },
     cancel() {
       fsStream.destroy()

eslint.config.js

@@ -3,71 +3,22 @@ import react from 'eslint-plugin-react'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 import globals from 'globals'
-import tseslint from 'typescript-eslint'
+import typescript from 'typescript-eslint'
 
-/** @type {import('eslint').Linter.Config.RulesRecord} */
-const sharedJsRules = {
-  'arrow-spacing': 'error',
-  camelcase: 'off',
-  'comma-spacing': 'error',
-  'comma-dangle': ['error', 'always-multiline'],
-  'eol-last': 'error',
-  eqeqeq: 'error',
-  'func-style': ['error', 'declaration'],
-  indent: ['error', 2],
-  'no-constant-condition': 'off',
-  'no-extra-parens': 'error',
-  'no-multi-spaces': 'error',
-  'no-multiple-empty-lines': ['error', { max: 1, maxEOF: 0 }],
-  'no-trailing-spaces': 'error',
-  'no-unused-vars': 'off',
-  'no-useless-concat': 'error',
-  'no-useless-rename': 'error',
-  'no-useless-return': 'error',
-  'no-var': 'error',
-  'object-curly-spacing': ['error', 'always'],
-  'prefer-const': 'warn',
-  'prefer-destructuring': ['warn', {
-    object: true,
-    array: false,
-  }],
-  'prefer-promise-reject-errors': 'error',
-  quotes: ['error', 'single'],
-  'require-await': 'warn',
-  semi: ['error', 'never'],
-
-  'sort-imports': ['error', {
-    ignoreDeclarationSort: true,
-    ignoreMemberSort: false,
-    memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'],
-  }],
-
-  'space-infix-ops': 'error',
-}
-
-/** @type {import('eslint').Linter.Config.RulesRecord} */
-const sharedTsRules = {
-  '@typescript-eslint/restrict-template-expressions': 'off',
-  '@typescript-eslint/no-unused-vars': 'warn',
-  '@typescript-eslint/require-await': 'warn',
-}
-
-export default tseslint.config(
-  { ignores: ['coverage/', 'dist/', 'lib/', 'packages/'] },
+export default typescript.config(
+  { ignores: ['coverage/', 'dist/', 'lib/'] },
   {
-    settings: { react: { version: '18.3' } },
-    extends: [javascript.configs.recommended, ...tseslint.configs.strictTypeChecked, ...tseslint.configs.stylisticTypeChecked],
+    extends: [javascript.configs.recommended, ...typescript.configs.strictTypeChecked, ...typescript.configs.stylisticTypeChecked],
     files: ['**/*.{ts,tsx,js}'],
     languageOptions: {
-      ecmaVersion: 2020,
       globals: globals.browser,
       parserOptions: {
         project: ['./tsconfig.json', './tsconfig.eslint.json'],
         tsconfigRootDir: import.meta.dirname,
       },
     },
     plugins: {
-      'react': react,
+      react,
       'react-hooks': reactHooks,
       'react-refresh': reactRefresh,
     },
@@ -80,11 +31,55 @@ export default tseslint.config(
         { allowConstantExport: true },
       ],
       ...javascript.configs.recommended.rules,
-      ...tseslint.configs.recommended.rules,
-      ...sharedJsRules,
-      ...sharedTsRules,
-      'no-extra-parens': 'warn',
+      ...typescript.configs.recommended.rules,
+      // javascript
+      'arrow-spacing': 'error',
+      camelcase: 'off',
+      'comma-spacing': 'error',
+      'comma-dangle': ['error', {
+        arrays: 'always-multiline',
+        objects: 'always-multiline',
+        imports: 'always-multiline',
+        exports: 'always-multiline',
+        functions: 'never',
+      }],
+      'eol-last': 'error',
+      eqeqeq: 'error',
+      'func-style': ['error', 'declaration'],
+      indent: ['error', 2],
+      'no-constant-condition': 'off',
+      'no-extra-parens': 'error',
+      'no-multi-spaces': 'error',
+      'no-multiple-empty-lines': ['error', { max: 1, maxEOF: 0 }],
+      'no-trailing-spaces': 'error',
+      'no-undef': 'error',
+      'no-unused-vars': 'off',
+      'no-useless-concat': 'error',
+      'no-useless-rename': 'error',
+      'no-useless-return': 'error',
+      'no-var': 'error',
+      'object-curly-spacing': ['error', 'always'],
+      'prefer-const': 'warn',
+      'prefer-destructuring': ['warn', {
+        object: true,
+        array: false,
+      }],
+      'prefer-promise-reject-errors': 'error',
+      quotes: ['error', 'single'],
+      'require-await': 'warn',
+      semi: ['error', 'never'],
+      'sort-imports': ['error', {
+        ignoreDeclarationSort: true,
+        ignoreMemberSort: false,
+        memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'],
+      }],
+      'space-infix-ops': 'error',
+      // typescript
+      '@typescript-eslint/restrict-template-expressions': 'off',
+      '@typescript-eslint/no-unused-vars': 'warn',
+      '@typescript-eslint/require-await': 'warn',
     },
+    settings: { react: { version: 'detect' } },
   },
   {
     files: ['test/**/*.{ts,tsx}', '*.{js,ts}'],
@@ -98,7 +93,7 @@ export default tseslint.config(
   },
   {
     files: ['**/*.js'],
-    ...tseslint.configs.disableTypeChecked,
+    ...typescript.configs.disableTypeChecked,
   },
   {
     files: ['bin/**/*.js', 'test/bin/**/*.js'],
@@ -107,5 +102,5 @@ export default tseslint.config(
         ...globals.node,
       },
     },
-  },
+  }
 )

package.json

@@ -28,16 +28,16 @@
   ],
   "scripts": {
     "build:types": "tsc -b",
-    "build:lib": "vite build -c vite.lib.config.ts",
-    "build:app": "vite build -c vite.app.config.ts",
+    "build:lib": "vite build -c vite.lib.config.js",
+    "build:app": "vite build -c vite.app.config.js",
     "build": "run-s build:lib build:types build:app",
-    "coverage": "vitest run -c vite.lib.config.ts --coverage --coverage.include=src --coverage.include=bin",
+    "coverage": "vitest run -c vite.lib.config.js --coverage --coverage.include=src --coverage.include=bin",
     "dev": "run-p -l watch:ts watch:vite watch:serve",
     "lint": "eslint .",
     "prepublishOnly": "npm run build",
     "serve": "node bin/cli.js",
     "preserve": "npm run build",
-    "test": "vitest run -c vite.lib.config.ts",
+    "test": "vitest run -c vite.lib.config.js",
     "typecheck": "tsc --noEmit",
     "url": "run-p -l watch:ts watch:vite watch:url",
     "watch:ts": "tsc --watch",

src/app.tsx

@@ -9,5 +9,5 @@ if (!root) throw new Error('missing root element')
 createRoot(root).render(
   <StrictMode>
     <App />
-  </StrictMode>,
+  </StrictMode>
 )

src/components/Breadcrumb.tsx

@@ -16,7 +16,7 @@ export default function Breadcrumb({ source, config, children }: BreadcrumbProps
   return <nav className='top-header top-header-divided'>
     <div className='path'>
       {source.sourceParts.map((part, depth) =>
-        <a href={config?.routes?.getSourceRouteUrl?.({ sourceId: part.sourceId }) ?? ''} key={depth}>{part.text}</a>,
+        <a href={config?.routes?.getSourceRouteUrl?.({ sourceId: part.sourceId }) ?? ''} key={depth}>{part.text}</a>
       )}
     </div>
     {children}

src/components/Folder.tsx

@@ -105,7 +105,7 @@ export default function Folder({ source, config }: FolderProps) {
               </span>
             </>}
           </a>
-        </li>,
+        </li>
       )}
     </ul>}
     {files?.length === 0 && <div className='center'>No files</div>}

src/components/Json.tsx

@@ -75,7 +75,7 @@ function JsonObject({ obj, label }: { obj: object, label?: string }): ReactNode
       {Object.entries(obj).map(([key, value]) =>
         <li key={key}>
           <Json json={value as unknown} label={key} />
-        </li>,
+        </li>
       )}
     </ul>
     <div className={styles.object}>{'}'}</div>

src/components/Markdown.tsx

@@ -28,7 +28,7 @@ export default function Markdown({ text, className }: MarkdownProps) {
       function applyRegex(
         currentText: ReactNode[],
         regex: RegExp,
-        renderFn: (match: RegExpExecArray) => ReactNode,
+        renderFn: (match: RegExpExecArray) => ReactNode
       ) {
         const newResult: ReactNode[] = []
         for (const segment of currentText) {

src/lib/tableProvider.ts

@@ -28,7 +28,7 @@ export function parquetDataFrame(from: AsyncBufferFrom, metadata: FileMetaData):
           for (let i = rowStart; i < rowEnd; i++) {
             data[i]?.index.resolve(i)
             for (const [key, value] of Object.entries(
-              groupData[i - rowStart],
+              groupData[i - rowStart]
             )) {
               data[i]?.cells[key].resolve(value)
             }
@@ -91,7 +91,7 @@ export function parquetDataFrame(from: AsyncBufferFrom, metadata: FileMetaData):
         }).catch((error: unknown) => {
           console.error(
             'Error fetching sort index or resolving sorted rows',
-            error,
+            error
           )
         })
 

src/lib/workers/parquetWorker.ts

@@ -38,7 +38,7 @@ self.onmessage = async ({ data }: {
         throw new Error('sortIndex requires all rows')
       const sortColumn = await parquetQuery({ metadata, file, columns: [orderBy], compressors })
       const indices = Array.from(sortColumn, (_, index) => index).sort((a, b) =>
-        compare<unknown>(sortColumn[a][orderBy], sortColumn[b][orderBy]),
+        compare<unknown>(sortColumn[a][orderBy], sortColumn[b][orderBy])
       )
       postIndicesMessage({ indices, queryId })
     } catch (error) {

src/lib/workers/parquetWorkerClient.ts

@@ -28,7 +28,7 @@ function getWorker() {
       const pendingQueryAgent = pending.get(data.queryId)
       if (!pendingQueryAgent) {
         console.warn(
-          `Unexpected: no pending promise found for queryId: ${data.queryId.toString()}`,
+          `Unexpected: no pending promise found for queryId: ${data.queryId.toString()}`
         )
         return
       }

test/components/File.test.tsx

@@ -16,7 +16,7 @@ const config: RoutesConfig = {
 // Mock fetch
 const text = vi.fn()
 const headers = { get: vi.fn() }
-global.fetch = vi.fn(() => Promise.resolve({ text, headers } as unknown as Response))
+globalThis.fetch = vi.fn(() => Promise.resolve({ text, headers } as unknown as Response))
 
 describe('File Component', () => {
   it('renders a local file path', async () => {
@@ -25,7 +25,7 @@ describe('File Component', () => {
     assert(source?.kind === 'file')
 
     const { getByText } = await act(() => render(
-      <File source={source} config={config}/>,
+      <File source={source} config={config}/>
     ))
 
     expect(getByText('/')).toBeDefined()
@@ -51,7 +51,7 @@ describe('File Component', () => {
     assert(source?.kind === 'file')
 
     const { getAllByRole } = await act(() => render(
-      <File source={source} config={config} />,
+      <File source={source} config={config} />
     ))
 
     const links = getAllByRole('link')

test/components/Folder.test.tsx

@@ -16,7 +16,7 @@ const config: RoutesConfig = {
   },
 }
 
-global.fetch = vi.fn()
+globalThis.fetch = vi.fn()
 
 describe('Folder Component', () => {
   test.for([

test/components/viewers/ImageView.test.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { describe, expect, it, vi } from 'vitest'
 import { ImageView, getHyperparamSource } from '../../../src/index.js'
 
-global.fetch = vi.fn()
+globalThis.fetch = vi.fn()
 
 describe('ImageView Component', () => {
   it('renders the image correctly', async () => {
@@ -18,7 +18,7 @@ describe('ImageView Component', () => {
     assert(source?.kind === 'file')
 
     const { findByRole, findByText } = render(
-      <ImageView source={source} setError={console.error} />,
+      <ImageView source={source} setError={console.error} />
     )
 
     // wait for asynchronous image loading

test/components/viewers/MarkdownView.test.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { describe, expect, it, vi } from 'vitest'
 import { MarkdownView, getHyperparamSource } from '../../../src/index.js'
 
-global.fetch = vi.fn()
+globalThis.fetch = vi.fn()
 
 describe('MarkdownView Component', () => {
   it('renders markdown correctly', async () => {
@@ -18,7 +18,7 @@ describe('MarkdownView Component', () => {
     assert(source?.kind === 'file')
 
     const { findByText } = render(
-      <MarkdownView source={source} setError={console.error} />,
+      <MarkdownView source={source} setError={console.error} />
     )
 
     expect(fetch).toHaveBeenCalled()

test/lib/sources/httpSource.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it, test, vi } from 'vitest'
 import { getHttpSource } from '../../../src/lib/sources/httpSource.js'
 
-global.fetch = vi.fn()
+globalThis.fetch = vi.fn()
 
 describe('getHttpSource', () => {
   test.for([

test/lib/sources/hyperparamSource.test.ts

@@ -1,7 +1,7 @@
 import { assert, describe, expect, it, test, vi } from 'vitest'
 import { HyperparamFileMetadata, getHyperparamSource } from '../../../src/lib/sources/hyperparamSource.js'
 
-global.fetch = vi.fn()
+globalThis.fetch = vi.fn()
 
 describe('getHyperparamSource', () => {
   const endpoint = 'http://localhost:3000'