Modernize tooling and improve documentation #514

seijikohara · 2025-11-21T13:06:48Z

Summary

This PR modernizes the development tooling and significantly improves the project documentation to provide a better developer experience and clearer usage instructions.

Changes

Tooling & Dependencies

ESLint Configuration Migration: Migrated from legacy .eslintrc.cjs to modern flat config (eslint.config.js)
Dependency Updates: Updated all development dependencies to their latest versions for better security and compatibility
TypeScript Configuration: Enhanced TypeScript settings with stricter type checking
Vite Configuration: Added vite-plugin-lib-inject-css for proper CSS injection in library builds

Documentation Improvements

Enhanced README:
- Added comprehensive installation and usage instructions
- Documented all component props with detailed descriptions and type information
- Added API reference section with complete prop and event documentation
- Included CSS customization guide with all available CSS variables
- Added dark mode styling examples
- Improved badges with CI/CD status indicators
- Better structured content with clear sections

Testing

E2E Tests: Added comprehensive Playwright tests covering:
- JSON parsing and rendering
- Tree navigation and expansion/collapse behavior
- Value selection events
- Theme support (light/dark modes)
- Edge cases and error handling

Code Organization

Utility Functions: Extracted common utility functions into src/components/utils.ts for better code organization
Entry Point: Added proper src/index.ts entry point for library exports

CI/CD Improvements

Node.js Version Support: Removed Node.js 18.x support (Vite 7.x requires Node.js 20.19+)
- Supported versions: 20.x, 22.x, 24.x
GitHub Actions Updates: Updated all actions to their latest versions
- actions/checkout: v4 → v5
- actions/setup-node: v4 → v5
- actions/upload-artifact: v4 → v5
Playwright Test Matrix Optimization: Simplified test matrix to reduce CI overhead
- Removed OS matrix (ubuntu-latest, windows-latest, macos-latest)
- Now runs only on ubuntu-latest with all three browsers (chromium, firefox, webkit)
- Reduced from 9 test jobs to 3 test jobs while maintaining cross-browser coverage

Test Plan

All existing tests pass
New E2E tests validate component behavior
TypeScript compilation succeeds with stricter settings
ESLint runs successfully with new flat config
Documentation examples are accurate and complete
CI builds pass on all supported Node.js versions (20.x, 22.x, 24.x)
Playwright tests pass on all three browser engines

Breaking Changes

None. This is a non-breaking enhancement that maintains full backward compatibility.

Note: Node.js 18.x is no longer supported due to Vite 7.x requirements. Users must upgrade to Node.js 20.19+ or 22.12+.

Related Issues

N/A

- Migrate from legacy ESLint configuration (.eslintrc.cjs) to flat config (eslint.config.js) - Update all development dependencies to latest versions - Enhance README with comprehensive API documentation, usage examples, and styling guide - Add E2E tests with Playwright for component behavior validation - Improve TypeScript configuration with stricter settings - Add utility functions for better code organization - Update Vite configuration with CSS injection plugin - Improve CI/CD workflows with E2E test integration

Vite 7.x requires Node.js 20.19+ or 22.12+, so Node.js 18.x is no longer supported.

- actions/checkout: v4 -> v5 - actions/setup-node: v4 -> v5 - actions/upload-artifact: v4 -> v5 - actions/create-github-app-token: v2 (already latest) - dependabot/fetch-metadata: v2 (already latest)

Remove OS matrix to reduce CI overhead. Tests now run only on ubuntu-latest with all three browsers (chromium, firefox, webkit), which is sufficient for component testing.

Copilot

Pull Request Overview

This PR modernizes the development tooling and significantly improves the project documentation. Key updates include migrating to ESLint flat config, updating all dependencies to latest versions (including Vite 7.x which requires Node.js 20+), refactoring component code for better maintainability, and adding comprehensive documentation with detailed API references and customization guides.

Key Changes

Tooling Modernization: Migrated from legacy ESLint configuration to flat config, updated all dependencies, removed the switch-ts dependency in favor of native implementations
Code Refactoring: Extracted utility functions into a separate module, replaced reactive state with ref, and improved component structure with better type safety
Documentation & Testing: Enhanced README with comprehensive API documentation, added E2E tests with Playwright, and optimized CI/CD workflows

Reviewed Changes

Copilot reviewed 14 out of 16 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
`vite.config.ts`	Updated build configuration with new plugin and improved entry point
`src/index.ts`	Added new entry point for library exports
`src/components/utils.ts`	Created utility functions module for type checking and formatting
`src/components/JsonTreeViewItem.vue`	Refactored component with improved state management and modernized styling
`src/components/JsonTreeView.vue`	Refactored data building logic into smaller functions and updated color values
`playwright.config.ts`	Updated configuration with trailing comma fixes
`package.json`	Updated dependencies, entry points, and removed `switch-ts` dependency
`eslint.config.js`	Migrated to new flat config format
`e2e/json-tree-view.spec.ts`	Improved test assertions and formatting
`README.md`	Significantly expanded with comprehensive documentation and examples
`.github/workflows/playwright.yml`	Optimized test matrix and updated actions to v5
`.github/workflows/npm-publish.yml`	Updated GitHub actions to v5
`.github/workflows/npm-ci.yml`	Removed Node.js 18.x support and updated actions to v5
`.eslintrc.cjs`	Removed legacy ESLint configuration file

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-11-21T13:19:47Z

src/components/utils.ts

+
+export const formatKey = (key: string): string => {
+  const numericKey = Number(key)
+  return Number.isNaN(numericKey) ? `"${key}":` : `${key}":`


The quotes placement is incorrect for numeric keys. When the key is numeric, it should return ${key}: without quotes, not ${key}\":. The closing quote appears after the key instead of not being present at all.

Suggested change

return Number.isNaN(numericKey) ? `"${key}":` : `${key}":`

return Number.isNaN(numericKey) ? `"${key}":` : `${key}:`

Copilot · 2025-11-21T13:19:47Z

src/components/utils.ts

+  if (!includeKey) return basePath
+
+  if (isArrayElement) {
+    return `${basePath}${key}[${key}].`


The array path construction duplicates the key. It should be ${basePath}[${key}]. without the first ${key} since basePath already contains the path up to this point. This creates incorrect paths like root.items0[0]. instead of root.items[0]..

Suggested change

return `${basePath}${key}[${key}].`

return `${basePath}[${key}].`

Copilot · 2025-11-21T13:19:48Z

package.json

+      }
    },
-    "./dist/style.css": "./dist/style.css"
+    "./style.css": "./dist/style.css"


The export path has changed from ./dist/style.css to ./style.css, which is a breaking change. Users who import the stylesheet using json-tree-view-vue3/dist/style.css will experience import failures. Consider maintaining the old export path or documenting this as a breaking change.

Suggested change

"./style.css": "./dist/style.css"

"./style.css": "./dist/style.css",

"./dist/style.css": "./dist/style.css"

Copilot · 2025-11-21T13:19:48Z

src/components/JsonTreeViewItem.vue

-      @keyup.enter="onClick(data)"
-      @keyup.space="onClick(data)"
+      :type="canSelect ? 'button' : null"
+      :tabindex="canSelect ? 0 : null"


Setting HTML attributes to null doesn't remove them in Vue; it sets them to the string 'null'. Use undefined instead of null to properly omit the attributes when canSelect is false.

Suggested change

:tabindex="canSelect ? 0 : null"

:tabindex="canSelect ? 0 : undefined"

Copilot · 2025-11-21T13:19:48Z

src/components/JsonTreeViewItem.vue

+      @click="canSelect ? onClick(data) : null"
+      @keyup.enter="canSelect ? onClick(data) : null"


[nitpick] Instead of conditionally calling onClick within the event handlers, use v-on directives conditionally. When canSelect is false and the component is a div, these event listeners are unnecessary. Consider using :onClick=\"canSelect ? onClick : undefined\" or wrapping the handlers more elegantly.

Copilot · 2025-11-21T13:19:49Z

src/components/JsonTreeView.vue

+      index.toString(),
+      element,
+      depth + 1,
+      buildPath(path, key, includeKey, true),


[nitpick] The boolean true parameter would be clearer with a named argument or comment. Consider using an options object like buildPath(path, key, { includeKey, isArrayElement: true }) for better readability.

Suggested change

buildPath(path, key, includeKey, true),

buildPath(path, key, { includeKey, isArrayElement: true }),

seijikohara added 4 commits November 21, 2025 22:06

fix: remove Node.js 18.x from CI matrix

ae5cb10

Vite 7.x requires Node.js 20.19+ or 22.12+, so Node.js 18.x is no longer supported.

chore: update GitHub Actions to latest versions

3e6ee71

- actions/checkout: v4 -> v5 - actions/setup-node: v4 -> v5 - actions/upload-artifact: v4 -> v5 - actions/create-github-app-token: v2 (already latest) - dependabot/fetch-metadata: v2 (already latest)

refactor: simplify Playwright test matrix

34a71ea

Remove OS matrix to reduce CI overhead. Tests now run only on ubuntu-latest with all three browsers (chromium, firefox, webkit), which is sufficient for component testing.

seijikohara marked this pull request as ready for review November 21, 2025 13:18

Copilot AI review requested due to automatic review settings November 21, 2025 13:18

seijikohara merged commit 5bc75fd into main Nov 21, 2025
13 checks passed

Copilot AI reviewed Nov 21, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Modernize tooling and improve documentation #514

Modernize tooling and improve documentation #514

Uh oh!

seijikohara commented Nov 21, 2025 •

edited

Loading

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Nov 21, 2025

Uh oh!

Copilot AI Nov 21, 2025

Uh oh!

Copilot AI Nov 21, 2025

Uh oh!

Copilot AI Nov 21, 2025

Uh oh!

Copilot AI Nov 21, 2025

Uh oh!

Copilot AI Nov 21, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	return Number.isNaN(numericKey) ? `"${key}":` : `${key}":`
	return Number.isNaN(numericKey) ? `"${key}":` : `${key}:`

	return `${basePath}${key}[${key}].`
	return `${basePath}[${key}].`

	"./style.css": "./dist/style.css"
	"./style.css": "./dist/style.css",
	"./dist/style.css": "./dist/style.css"

	:tabindex="canSelect ? 0 : null"
	:tabindex="canSelect ? 0 : undefined"

		@click="canSelect ? onClick(data) : null"
		@keyup.enter="canSelect ? onClick(data) : null"

	buildPath(path, key, includeKey, true),
	buildPath(path, key, { includeKey, isArrayElement: true }),

Modernize tooling and improve documentation #514

Modernize tooling and improve documentation #514

Uh oh!

Conversation

seijikohara commented Nov 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Tooling & Dependencies

Documentation Improvements

Testing

Code Organization

CI/CD Improvements

Test Plan

Breaking Changes

Related Issues

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Key Changes

Reviewed Changes

Uh oh!

Copilot AI Nov 21, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 21, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 21, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 21, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 21, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 21, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

seijikohara commented Nov 21, 2025 •

edited

Loading