Percy Ember Example: Dependencies Update

.eslintignore

@@ -1,21 +1,19 @@
-# unconventional js
-/blueprints/*/files/
-/vendor/
-
-# compiled output
+# Compiled output
 /dist/
 /tmp/
+/coverage/
 
-# dependencies
-/bower_components/
+# Dependencies
 /node_modules/
 
-# misc
-/coverage/
-!.*
-.eslintcache
+# Testing output
+/.nyc_output/
+
+# Build artifacts
+/build/
+/public/robots.txt
 
-# ember-try
-/.node_modules.ember-try/
-/bower.json.ember-try
-/package.json.ember-try
+# Misc
+.env*
+.pnp*
+.yarn/*

.eslintrc.js

@@ -2,16 +2,17 @@
 
 module.exports = {
   root: true,
-  parser: 'babel-eslint',
+  parser: '@babel/eslint-parser',
   parserOptions: {
-    ecmaVersion: 2018,
+    ecmaVersion: 2020,
     sourceType: 'module',
-    ecmaFeatures: {
-      legacyDecorators: true,
+    requireConfigFile: false,
+    babelOptions: {
+      plugins: [['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }]],
     },
   },
   plugins: ['ember'],
-  extends: ['eslint:recommended', 'plugin:ember/recommended', 'plugin:prettier/recommended'],
+  extends: ['eslint:recommended', 'plugin:ember/recommended'],
   env: {
     browser: true,
   },

.github/workflows/Semgrep.yml

@@ -5,24 +5,23 @@ on:
   # Scan changed files in PRs (diff-aware scanning):
   # The branches below must be a subset of the branches above
   pull_request:
-    branches: ["master", "main"]
+    branches: ['master', 'main']
   push:
-    branches: ["master", "main"]
+    branches: ['master', 'main']
   schedule:
     - cron: '0 6 * * *'
 
-
 permissions:
   contents: read
 
 jobs:
   semgrep:
     # User definable name of this GitHub Actions job.
     permissions:
-      contents: read  # for actions/checkout to fetch code
-      security-events: write  # for github/codeql-action/upload-sarif to upload SARIF results
-    name: semgrep/ci 
-    # If you are self-hosting, change the following `runs-on` value: 
+      contents: read # for actions/checkout to fetch code
+      security-events: write # for github/codeql-action/upload-sarif to upload SARIF results
+    name: semgrep/ci
+    # If you are self-hosting, change the following `runs-on` value:
     runs-on: ubuntu-latest
 
     container:
@@ -38,11 +37,11 @@ jobs:
       # Run the "semgrep ci" command on the command line of the docker image.
       - run: semgrep ci --sarif --output=semgrep.sarif
         env:
-            # Add the rules that Semgrep uses by setting the SEMGREP_RULES environment variable. 
-            SEMGREP_RULES: p/default # more at semgrep.dev/explore
+          # Add the rules that Semgrep uses by setting the SEMGREP_RULES environment variable.
+          SEMGREP_RULES: p/default # more at semgrep.dev/explore
 
       - name: Upload SARIF file for GitHub Advanced Security Dashboard
         uses: github/codeql-action/upload-sarif@6c089f53dd51dc3fc7e599c3cb5356453a52ca9e # v2.20.0
         with:
           sarif_file: semgrep.sarif
-        if: always()
+        if: always()

.github/workflows/test.yml

@@ -8,15 +8,11 @@ jobs:
   percy:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 14
-      - uses: actions/cache@v3
-        with:
-          path: ~/.npm
-          key: v1/${{ runner.os }}/node-14/${{ hashFiles('**/package-lock.lock') }}
-          restore-keys: v1/${{ runner.os }}/node-14/
+          node-version: 18
+          cache: npm
       - name: Install dependencies
         run: npm ci
       - name: Run tests

.prettierrc

@@ -1,4 +1,4 @@
 {
   "singleQuote": true,
-  printWidth: 110
+  "printWidth": 110
 }

.template-lintrc.js

@@ -1,9 +1,10 @@
 'use strict';
 
 module.exports = {
-  extends: 'octane',
+  extends: 'recommended',
   rules: {
     'no-duplicate-landmark-elements': 'off',
     'require-input-label': 'off',
+    'no-autofocus-attribute': 'off',
   },
 };

README.md

@@ -11,7 +11,7 @@ The tutorial assumes you're already familiar with JavaScript and [Ember](https:/
 focuses on using it with Percy. You'll still be able to follow along if you're not familiar with
 Ember, but we won't spend time introducing Ember concepts.
 
-The tutorial also assumes you have [Node 12+ with npm](https://nodejs.org/en/download/) and
+The tutorial also assumes you have [Node 18+ with npm](https://nodejs.org/en/download/) and
 [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) installed.
 
 ### Step 1
@@ -38,13 +38,13 @@ In the shell window you're working in, export the token environment variable:
 
 **Unix**
 
-``` shell
+```shell
 $ export PERCY_TOKEN="<your token here>"
 ```
 
 **Windows**
 
-``` shell
+```shell
 $ set PERCY_TOKEN="<your token here>"
 
 # PowerShell
@@ -59,14 +59,14 @@ configure it in your shell so that Percy is enabled in your local environment.
 Check out a new branch for your work in this tutorial (we'll call this branch `tutorial-example`),
 then run tests & take snapshots:
 
-``` shell
+```shell
 $ git checkout -b tutorial-example
 $ npm run test
 ```
 
 This will run the app's Ember tests, which contain calls to create Percy snapshots. The snapshots
 will then be uploaded to Percy for comparison. Percy will use the Percy token you used in **Step 2**
-to know which organization and project to upload the snapshots to.
+to know which organization and project to upload the snapshots to. 
 
 You can view the screenshots in Percy now if you want, but there will be no visual comparisons
 yet. You'll see that Percy shows you that these snapshots come from your `tutorial-example` branch.
@@ -77,13 +77,8 @@ Use your text editor to edit `app/templates/application.hbs` and introduce some
 example, you can add inline CSS to bold the "Clear completed" button starting on line 21. After the
 change, that button looks like this:
 
-``` hbs
-<button
-  type="button"
-  class="clear-completed"
-  style="font-weight:bold"
-  {{on "click" this.clearCompleted}}
->
+```hbs
+<button type='button' class='clear-completed' style='font-weight:bold' {{on 'click' this.clearCompleted}}>
   Clear completed
 </button>
 ```
@@ -92,15 +87,15 @@ change, that button looks like this:
 
 Commit the change:
 
-``` shell
+```shell
 $ git commit -am "Emphasize 'Clear completed' button"
 ```
 
 ### Step 7
 
 Run the tests with snapshots again:
 
-``` shell
+```shell
 $ npm run test
 ```
 

app/components/todo-item.js

@@ -1,6 +1,6 @@
 import { action, set } from '@ember/object';
 import { isBlank } from '@ember/utils';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 

app/components/todo-list.js

@@ -1,5 +1,5 @@
 import { action } from '@ember/object';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 

app/controllers/application.js

@@ -1,6 +1,6 @@
 import { action } from '@ember/object';
 import { isBlank } from '@ember/utils';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import Controller from '@ember/controller';
 
 export default class ApplicationController extends Controller {

app/index.html

@@ -1,14 +1,14 @@
 <!doctype html>
 <html language="en" data-framework="emberjs">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Ember • TodoMVC</title>
 
     {{content-for "head"}}
 
-    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
-    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/todomvc.css">
+    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css" />
+    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/todomvc.css" />
 
     {{content-for "head-footer"}}
   </head>

app/routes/application.js

@@ -1,4 +1,4 @@
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import Route from '@ember/routing/route';
 
 export default class ApplicationRoute extends Route {

app/routes/index.js

@@ -0,0 +1,10 @@
+import { service } from '@ember/service';
+import Route from '@ember/routing/route';
+
+export default class IndexRoute extends Route {
+  @service repo;
+
+  model() {
+    return this.repo.findAll();
+  }
+}

app/services/repo.js

@@ -6,11 +6,19 @@ export default class RepoService extends Service {
   data = null;
 
   findAll() {
-    this.data ||= A(JSON.parse(window.localStorage.getItem('todos') || '[]'));
+    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;
+      }
+    }
     return this.data;
   }
 
   add(attrs) {
+    // Ensure data is initialized
+    this.findAll();
     let todo = Object.assign({ id: this.lastId++ }, attrs);
     this.data.pushObject(todo);
     this.persist();
@@ -25,4 +33,11 @@ export default class RepoService extends Service {
   persist() {
     window.localStorage.setItem('todos', JSON.stringify(this.data));
   }
+
+  // Add method to reset data (useful for tests)
+  reset() {
+    this.data = null;
+    this.lastId = 0;
+    window.localStorage.removeItem('todos');
+  }
 }

app/styles/app.css

@@ -0,0 +1 @@
+/* Application styles */

app/templates/active.hbs

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

app/templates/application.hbs

@@ -1,40 +1,33 @@
-<section class="todoapp">
-  <header class="header">
+<section class='todoapp'>
+  <header class='header'>
     <h1>todos</h1>
-    <input
-      class="new-todo"
-      {{on "keyup" this.createTodo}}
-      placeholder="What needs to be done?"
-      autofocus
-    >
+    <input class='new-todo' {{on 'keyup' this.createTodo}} placeholder='What needs to be done?' autofocus />
   </header>
   {{outlet}}
-  {{#if (gt @model.length 0)}}
-    <footer class="footer">
-      <span class="todo-count"><strong>{{this.remaining.length}}</strong> {{pluralize "item" this.remaining.length}} left</span>
-      <ul class="filters">
-        <li><LinkTo @route="index" @activeClass="selected">All</LinkTo></li>
-        <li><LinkTo @route="active" @activeClass="selected">Active</LinkTo></li>
-        <li><LinkTo @route="completed" @activeClass="selected">Completed</LinkTo></li>
+  {{#if (gt this.model.length 0)}}
+    <footer class='footer'>
+      <span class='todo-count'><strong>{{this.remaining.length}}</strong>
+        {{pluralize 'item' this.remaining.length}}
+        left</span>
+      <ul class='filters'>
+        <li><LinkTo @route='index' @activeClass='selected'>All</LinkTo></li>
+        <li><LinkTo @route='active' @activeClass='selected'>Active</LinkTo></li>
+        <li><LinkTo @route='completed' @activeClass='selected'>Completed</LinkTo></li>
       </ul>
       {{#if this.completed.length}}
-        <button
-          type="button"
-          class="clear-completed"
-          {{on "click" this.clearCompleted}}
-        >
+        <button type='button' class='clear-completed' {{on 'click' this.clearCompleted}}>
           Clear completed
         </button>
       {{/if}}
     </footer>
   {{/if}}
 </section>
-<footer class="info">
+<footer class='info'>
   <p>Double-click to edit a todo</p>
   <p>
     Created by
-    <a href="http://github.com/cibernox">Miguel Camba</a>,
-    <a href="http://github.com/addyosmani">Addy Osmani</a>
+    <a href='http://github.com/cibernox'>Miguel Camba</a>,
+    <a href='http://github.com/addyosmani'>Addy Osmani</a>
   </p>
-  <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+  <p>Part of <a href='http://todomvc.com'>TodoMVC</a></p>
 </footer>

app/templates/completed.hbs

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