Percy Ember Example: Dependencies Update #328

pranavz28 · 2025-10-10T13:41:34Z

📋 Overview

This PR completely modernizes the Percy Ember example repository by updating all dependencies to their latest versions and fixing all npm scripts to work properly. The project now uses modern Ember.js patterns, updated linting configurations, and an improved CI pipeline.

✨ Key Achievements

✅ All 20+ dependencies updated to latest compatible versions
✅ All 4 tests passing with Percy visual testing integration
✅ All npm scripts working (lint, build, start, test, lint:fix)
✅ Modern Ember.js 6.7.0 with Octane patterns
✅ Updated GitHub Actions workflow with Node.js 18
✅ Fixed ESLint, Stylelint, and Template-lint configurations

🔧 Technical Updates

Dependencies Updated (20 packages)

Ember.js: Updated to 6.7.0 with modern class syntax
Percy: Updated to @percy/ember 5.0.0 with latest API
ESLint: Upgraded to 8.x with @babel/eslint-parser
Stylelint: Updated to 16.x with modern configuration
Template-lint: Updated to 7.x with recommended preset
Node dependencies: All packages updated via npm-check-updates

Code Modernization

Template Syntax: Fixed @model → this.model in Handlebars templates
Service Imports: Updated inject as service → service decorator
Missing Dependencies: Added ember-inflector for proper pluralization
Route Structure: Created proper index route and controller
Service Enhancement: Improved repo service with reset() method

Testing & Quality

Test Fixes: All 4 tests now pass including Ember.onerror validation
Percy Integration: Visual snapshots working correctly (build #134)
Linting: All code now passes ESLint, Stylelint, and Template-lint
Formatting: Consistent code formatting with Prettier

🛠 Configuration Improvements

ESLint Configuration

// Updated .eslintrc.js
parser: '@babel/eslint-parser', // Was: babel-eslint (deprecated)
parserOptions: {
  requireConfigFile: false,
  // Modern parser configuration
}

Stylelint Configuration

// New stylelint.config.js
module.exports = {
  extends: ['stylelint-config-standard'],
  ignoreFiles: ['dist/**/*', 'vendor/**/*'], // Ignore build artifacts
}

GitHub Actions

# Updated .github/workflows/test.yml
- uses: actions/checkout@v4      # Was: v3
- uses: actions/setup-node@v4    # Was: v1
  with:
    node-version: 18             # Was: 14
    cache: npm                   # Built-in caching

📊 Before vs After

Aspect	Before	After
Node.js	14	18 (LTS)
ESLint	Deprecated parser	@babel/eslint-parser
Tests Passing	Inconsistent	✅ All 4 tests
npm scripts	Broken linting	✅ All working
Dependencies	Outdated	✅ Latest versions
CI Pipeline	Basic	✅ Linting + Testing

🔍 Testing Results

Local Testing

Build: npm run build ✅ Success (production build)
Development: npm start ✅ Server running on http://localhost:4200
Testing: npm test ✅ All 4 tests pass with Percy snapshots
Linting: npm run lint ✅ All code quality checks pass

Percy Visual Testing

Build [Security] Bump jquery from 3.4.1 to 3.5.0 #134: All snapshots captured successfully
Visual Diffs: No unexpected changes detected
Integration: Percy token and CLI working correctly

🚦 npm Scripts Status

All scripts now work correctly:

✅ npm run build          # Production build
✅ npm run start          # Development server  
✅ npm test               # Run tests with Percy
✅ npm run lint           # All linting (js, css, hbs, format)
✅ npm run lint:js        # JavaScript linting
✅ npm run lint:css       # CSS linting
✅ npm run lint:hbs       # Template linting
✅ npm run lint:fix       # Fix all lint issues
✅ npm run format         # Prettier formatting

🎯 Breaking Changes

None! This update maintains full backward compatibility while modernizing the underlying tooling. All existing functionality works as expected.

🔄 Migration Notes

For developers working on this project:

Node.js 18+ recommended (CI uses 18)
npm ci will install exact dependency versions
All linting rules now enforced in CI
Percy token required for visual testing (set via web-t command)

📈 Benefits

🔧 Developer Experience: All tools work out of the box
🛡️ Code Quality: Comprehensive linting and formatting
⚡ Performance: Latest dependency versions with optimizations
🔒 Security: Updated packages with latest security patches
🤖 CI/CD: Robust pipeline with linting and visual testing
📚 Maintainability: Modern patterns and clear configuration

🏗️ Build Links

Percy Build: #134
GitHub Actions: Will run automatically on PR merge
Demo: Available at http://localhost:4200 after npm start

This update brings the Percy Ember example into 2025 with modern tooling, comprehensive testing, and a robust development workflow. All scripts work reliably, dependencies are current, and the codebase follows modern Ember.js best practices.

@model

- Update all dependencies to latest versions (20 packages updated) - Fix template syntax: @model → this.model in Handlebars templates - Update service imports: inject as service → service decorator - Add missing ember-inflector dependency for proper pluralization - Create index route and controller for proper model passing - Enhance repo service with reset() method and better error handling - Fix all 4 tests including missing setupEmberOnerrorValidation - Update Percy integration to latest version (5.0.0) ESLint Configuration: - Replace deprecated babel-eslint with @babel/eslint-parser - Add .eslintignore to exclude dist/ and vendor/ directories - Fix parser configuration for modern JavaScript features Stylelint Configuration: - Create stylelint.config.js with proper module format - Configure to ignore build artifacts and vendor files - Use stylelint-config-standard for consistent CSS rules Template Lint Configuration: - Update to use 'recommended' preset instead of 'octane' - Add rule exceptions for TodoMVC demo requirements - Fix autofocus accessibility rule for demo purposes GitHub Actions: - Update workflow to use latest action versions (v4) - Upgrade Node.js from 14 to 18 (current LTS) - Add linting step to CI pipeline - Simplify caching with built-in setup-node cache - Maintain Percy visual testing integration All npm scripts now work correctly: ✅ npm run build, start, test ✅ npm run lint (js, css, hbs, format) ✅ npm run lint:fix (all variants) ✅ All 4 tests pass with Percy snapshots ✅ Compatible with modern Ember.js 6.7.0

Shivanshu-07 · 2025-10-14T12:17:57Z

.eslintignore

+# Misc
+.env*
+.pnp*
+.yarn/*


add new line

Shivanshu-07 · 2025-10-14T12:18:37Z

.github/dependabot.yml

+  - package-ecosystem: npm
+    directory: /
+    schedule:
+      interval: monthly
+    commit-message:
+      prefix: ⬆️


Why this change? Do we need this?

.github/workflows/test.yml

- Revert dependabot.yml to correct YAML indentation (list items should not have extra indent) - Add trailing newline to .eslintignore per best practices

Shivanshu-07 · 2025-10-14T12:22:49Z

app/controllers/index.js

+import Controller from '@ember/controller';
+
+export default class IndexController extends Controller {
+  // The model comes from the route
+}


Is it required?

Shivanshu-07 · 2025-10-14T12:25:49Z

app/services/repo.js

+    if (!this.data) {
+      this.data = A(JSON.parse(window.localStorage.getItem('todos') || '[]'));
+      // Set lastId to be higher than any existing todo id
+      if (this.data.length > 0) {
+        this.lastId = Math.max(...this.data.map((todo) => todo.id || 0)) + 1;
+      }
+    }


Suggested change

if (!this.data) {

this.data = A(JSON.parse(window.localStorage.getItem('todos') || '[]'));

// Set lastId to be higher than any existing todo id

if (this.data.length > 0) {

this.lastId = Math.max(...this.data.map((todo) => todo.id || 0)) + 1;

}

}

this.data = A(JSON.parse(localStorage.getItem('todos') ?? '[]'));

this.lastId = Math.max(0, ...this.data.map(({ id = 0 }) => id)) + 1;

Tried this change. But the tests are failing with this changes

Shivanshu-07 · 2025-10-15T10:38:05Z

app/templates/active.hbs

@@ -1 +1 @@
-<TodoList @todos={{this.todos}}/>
+<TodoList @todos={{this.todos}} />


add new line

Shivanshu-07 · 2025-10-15T10:38:34Z

app/templates/application.hbs

-  <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
-</footer>
+  <p>Part of <a href='http://todomvc.com'>TodoMVC</a></p>
+</footer>


Shivanshu-07 · 2025-10-15T10:38:49Z

app/templates/completed.hbs

@@ -1 +1 @@
-<TodoList @todos={{this.todos}}/>
+<TodoList @todos={{this.todos}} />


Shivanshu-07 · 2025-10-15T10:41:00Z

@pranavz28 Please add a newline at the end of all files that don't already have one. there are many such files

Shivanshu-07 · 2025-10-15T11:14:47Z

.template-lintrc.js


 module.exports = {
-  extends: 'octane',
+  extends: 'recommended',


Why do we need to change from octane to recommended?

ember-template-lint v7.9.3 removed the 'octane' preset. Available presets are: 'recommended', '5-x-recommended', 'a11y', 'stylistic'. Octane is now the default in Ember, so 'recommended' includes all Octane rules. Using 'octane' would cause linting to FAIL with "preset not found" error

Shivanshu-07

LGTM!!

pranavz28 requested a review from a team as a code owner October 10, 2025 13:41

pranavz28 requested review from ninadbstack and pankaj443 October 10, 2025 13:41

pranavz28 changed the title ~~🚀 Modernize Percy Ember Example: Dependencies & Tooling Update~~ Percy Ember Example: Dependencies Update Oct 10, 2025

Fix formatting issues in README.md

eccae12

Shivanshu-07 reviewed Oct 14, 2025

View reviewed changes

.github/workflows/test.yml Show resolved Hide resolved

fix: address PR review feedback

69d900a

- Revert dependabot.yml to correct YAML indentation (list items should not have extra indent) - Add trailing newline to .eslintignore per best practices

Shivanshu-07 reviewed Oct 15, 2025

View reviewed changes

add new line

a19eb4b

Shivanshu-07 approved these changes Oct 17, 2025

View reviewed changes

pranavz28 merged commit 41f20c9 into master Oct 17, 2025
7 checks passed

pranavz28 deleted the PER_5831 branch October 17, 2025 10:41

		@@ -1 +1 @@
		<TodoList @todos={{this.todos}}/>
		<TodoList @todos={{this.todos}} /> No newline at end of file

Percy Ember Example: Dependencies Update #328

Percy Ember Example: Dependencies Update #328

Uh oh!

Conversation

pranavz28 commented Oct 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📋 Overview

✨ Key Achievements

🔧 Technical Updates

Dependencies Updated (20 packages)

Code Modernization

Testing & Quality

🛠 Configuration Improvements

ESLint Configuration

Stylelint Configuration

GitHub Actions

📊 Before vs After

🔍 Testing Results

Local Testing

Percy Visual Testing

🚦 npm Scripts Status

🎯 Breaking Changes

🔄 Migration Notes

📈 Benefits

🏗️ Build Links

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Shivanshu-07 Oct 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Shivanshu-07 commented Oct 15, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Shivanshu-07 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

pranavz28 commented Oct 10, 2025 •

edited

Loading

Shivanshu-07 Oct 14, 2025 •

edited

Loading