Useful JavaScript Tools

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
  build: {
    target: 'es2020',
    minify: 'esbuild',
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
        },
      },
    },
  },
  server: {
    port: 3000,
    open: true,
  },
})

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  module: {
    rules: [
      { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ },
      { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
    ],
  },
  optimization: {
    splitChunks: { chunks: 'all' },
    runtimeChunk: 'single',
  },
}

# Bundle and minify a single file
$ esbuild src/app.jsx --bundle --minify --outfile=dist/app.js --target=es2020

# With TypeScript and JSX
$ esbuild src/app.tsx --bundle --format=esm --outdir=dist --loader:.tsx=tsx

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import terser from '@rollup/plugin-terser'
import typescript from '@rollup/plugin-typescript'

export default {
  input: 'src/index.ts',
  output: [
    { file: 'dist/index.cjs', format: 'cjs' },
    { file: 'dist/index.mjs', format: 'esm' },
  ],
  plugins: [resolve(), commonjs(), typescript(), terser()],
}

// eslint.config.js
import js from '@eslint/js'
import tseslint from 'typescript-eslint'
import reactHooks from 'eslint-plugin-react-hooks'

export default [
  js.configs.recommended,
  ...tseslint.configs.recommended,
  {
    plugins: { 'react-hooks': reactHooks },
    rules: {
      'react-hooks/exhaustive-deps': 'warn',
      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
    },
  },
  { ignores: ['dist/**', 'node_modules/**'] },
]

// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100,
  "tabWidth": 2,
  "arrowParens": "always",
  "endOfLine": "lf"
}

# Run oxlint on the project
$ npx oxlint@latest

# With specific rules
$ npx oxlint@latest --deny no-console --allow no-unused-vars

// vitest.config.ts
import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: './src/test/setup.ts',
    coverage: { provider: 'v8', reporter: ['text', 'html'] },
    include: ['src/**/*.{test,spec}.{ts,tsx}'],
  },
})

// src/components/Counter.test.tsx
import { describe, it, expect } from 'vitest'
import { render, screen, fireEvent } from '@testing-library/react'
import { Counter } from './Counter'

describe('Counter', () => {
  it('renders initial count', () => {
    render(<Counter />)
    expect(screen.getByText('Count: 0')).toBeDefined()
  })

  it('increments on click', async () => {
    render(<Counter />)
    fireEvent.click(screen.getByRole('button', { name: /increment/i }))
    expect(await screen.findByText('Count: 1')).toBeDefined()
  })
})

// e2e/checkout.spec.ts
import { test, expect } from '@playwright/test'

test('user completes purchase flow', async ({ page }) => {
  await page.goto('/products')
  await page.click('[data-testid="add-to-cart"]')
  await page.click('[data-testid="checkout"]')
  await page.fill('[name="email"]', '[email protected]')
  await page.fill('[name="card"]', '4242424242424242')
  await page.click('[data-testid="pay-now"]')
  await expect(page.locator('[data-testid="confirmation"]')).toBeVisible()
})

// playwright.config.ts
import { defineConfig } from '@playwright/test'

export default defineConfig({
  testDir: './e2e',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
  projects: [
    { name: 'chromium', use: { browserName: 'chromium' } },
    { name: 'firefox', use: { browserName: 'firefox' } },
    { name: 'webkit', use: { browserName: 'webkit' } },
  ],
})

# Installation speed benchmark (clean install, 50 dependencies)
npm install    # ~15s
yarn install   # ~12s
pnpm install   # ~8s
bun install    # ~2s

{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src/ && prettier --check src/",
    "format": "prettier --write src/",
    "test": "vitest run",
    "test:watch": "vitest",
    "test:e2e": "playwright test",
    "typecheck": "tsc --noEmit",
    "preview": "vite preview"
  }
}

// TypeScript: full static type checking
interface User {
  id: string
  email: string
  role: 'admin' | 'user'
}

function formatUser(user: User): string {
  return `${user.email} (${user.role})`
}

// JSDoc: type checking without a build step
/**
 * @param {string} id
 * @param {string} email
 * @param {'admin' | 'user'} role
 * @returns {string}
 */
function formatUser(id, email, role) {
  return `${email} (${role})`
}

{
  "compilerOptions": {
    "checkJs": true,
    "allowJs": true,
    "noEmit": true,
    "strict": true,
    "target": "ESNext",
    "moduleResolution": "bundler"
  }
}

Tool      | Cold Build | HMR (single edit) | Bundle Size (gzip)
----------|------------|--------------------|---------------------
Vite      | 2.1s       | ~50ms              | 42kB
webpack 5 | 8.4s       | ~300ms             | 44kB
esbuild   | 0.3s       | N/A (no HMR)       | 46kB
Turbopack | 1.2s       | ~30ms              | 43kB