Update ember

examples/emberjs/todomvc/app/app.js

@@ -5,6 +5,7 @@
  * things that wouldn't depend on user state.
  */
 import 'todomvc-common/base.css';
+import 'todomvc-common/base.js';
 import 'todomvc-app-css/index.css';
 
 import Application from '@ember/application';

examples/emberjs/todomvc/app/components/attribution.gjs

@@ -1,14 +1,13 @@
-
 <template>
- <footer class="info">
- <p>Double-click to edit a todo</p>
- <p>
- Created by
- <a href="https:/cibernox">Miguel Camba</a>,
- <a href="https:/addyosmani">Addy Osmani</a>,
- <a href="https:/NullVoxPopuli">NullVoxPopuli</a>
- </p>
+ <footer class="info">
+ <p>Double-click to edit a todo</p>
+ <p>
+ Created by
+ <a href="https:/cibernox">Miguel Camba</a>,
+ <a href="https:/addyosmani">Addy Osmani</a>,
+ <a href="https:/NullVoxPopuli">NullVoxPopuli</a>
+ </p>
 
- <p>Part of <a href="https://todomvc.com">TodoMVC</a></p>
- </footer>
+ <p>Part of <a href="https://todomvc.com">TodoMVC</a></p>
+ </footer>
 </template>

examples/emberjs/todomvc/app/components/create.gjs

@@ -4,29 +4,30 @@ import { service } from '@ember/service';
 import { isBlank } from '@ember/utils';
 
 export default class Create extends Component {
- <template>
- <input
- class="new-todo"
- {{on 'keydown' this.createTodo}}
- aria-label="What needs to be done?"
- placeholder="What needs to be done?"
- autofocus
- >
- </template>
+ <template>
+ <input
+ class="new-todo"
+ {{on "keydown" this.createTodo}}
+ aria-label="What needs to be done?"
+ placeholder="What needs to be done?"
+ {{! template-lint-disable no-autofocus-attribute }}
+ autofocus
+ />
+ </template>
 
- @service repo;
+ @service repo;
 
- // TODO: we should use a <form> instead of this.
- // this logic was copied from "the old way"
- // which was Ember 3.2, and todomvc has historically
- // been not great for a11y
- createTodo = (event) => {
- let { keyCode, target } = event;
- let value = target.value.trim();
+ // TODO: we should use a <form> instead of this.
+ // this logic was copied from "the old way"
+ // which was Ember 3.2, and todomvc has historically
+ // been not great for a11y
+ createTodo = (event) => {
+ let { keyCode, target } = event;
+ let value = target.value.trim();
 
- if (keyCode === 13 && !isBlank(value)) {
-  this.repo.add({ title: value, completed: false });
-  target.value = '';
-  }
- };
+ if (keyCode === 13 && !isBlank(value)) {
+ this.repo.add({ title: value, completed: false });
+ target.value = '';
+ }
+ };
 }

examples/emberjs/todomvc/app/components/filters.gjs

@@ -1,21 +1,21 @@
 import { LinkTo } from '@ember/routing';
 
 <template>
- <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>
+ <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>
 </template>

examples/emberjs/todomvc/app/components/todo-item.gjs

@@ -5,70 +5,74 @@ import { service } from '@ember/service';
 import { isBlank } from '@ember/utils';
 
 export default class TodoItem extends Component {
- <template>
- <li class="{{if @todo.completed 'completed'}} {{if this.editing 'editing'}}">
- <div class="view">
- <input
- class="toggle"
- type="checkbox"
- aria-label="Toggle the completion state of this todo"
- checked={{@todo.completed}}
- {{on 'change' this.toggleCompleted}}
- >
- <label {{on 'dblclick' this.startEditing}}>{{@todo.title}}</label>
- <button
- class="destroy"
- {{on 'click' this.removeTodo}}
- type="button"
- aria-label="Delete this todo"></button>
- </div>
- <input
- class="edit"
- value={{@todo.title}}
- {{on 'blur' this.doneEditing}}
- {{on 'keydown' this.handleKeydown}}
- autofocus
- >
- </li>
- </template>
+ <template>
+ <li class="{{if @todo.completed 'completed'}} {{if this.editing 'editing'}}">
+ <div class="view">
+ <input
+ class="toggle"
+ type="checkbox"
+ aria-label="Toggle the completion state of this todo"
+ checked={{@todo.completed}}
+ {{on "change" this.toggleCompleted}}
+ />
+ <label {{on "dblclick" this.startEditing}}>{{@todo.title}}</label>
+ <button
+ class="destroy"
+ {{on "click" this.removeTodo}}
+ type="button"
+ aria-label="Delete this todo"
+ ></button>
+ </div>
+ <input
+ class="edit"
+ aria-label="Edit this todo"
+ value={{@todo.title}}
+ {{on "blur" this.doneEditing}}
+ {{on "keydown" this.handleKeydown}}
+ {{! template-lint-disable no-autofocus-attribute }}
+ autofocus
+ />
+ </li>
+ </template>
 
- @service repo;
- @tracked editing;
+ @service repo;
+ @tracked editing;
 
- removeTodo = () => this.repo.delete(this.args.todo);
+ removeTodo = () => this.repo.delete(this.args.todo);
 
- toggleCompleted = (event) => {
- this.args.todo.completed = event.target.checked;
-  this.repo.persist();
- }
+ toggleCompleted = (event) => {
+ this.args.todo.completed = event.target.checked;
+ this.repo.persist();
+ };
 
- handleKeydown = (event) => {
- if (event.keyCode === 13) {
- event.target.blur();
- } else if (event.keyCode === 27) {
- this.editing = false;
- }
- }
-
- startEditing = (event) => {
- this.args.onStartEdit();
- this.editing = true;
-
- event.target.closest('li')?.querySelector('input.edit').focus();
+ handleKeydown = (event) => {
+ if (event.keyCode === 13) {
+ event.target.blur();
+ } else if (event.keyCode === 27) {
+ this.editing = false;
  }
+ };
 
- doneEditing = (event) => {
- if (!this.editing) { return; }
+ startEditing = (event) => {
+ this.args.onStartEdit();
+ this.editing = true;
 
- let todoTitle = event.target.value.trim();
+ event.target.closest('li')?.querySelector('input.edit').focus();
+ };
 
- if (isBlank(todoTitle)) {
- this.removeTodo();
- } else {
- this.args.todo.title = todoTitle;
- this.editing = false;
- this.args.onEndEdit();
- }
- }
+ doneEditing = (event) => {
+ if (!this.editing) {
+ return;
+ }
 
+ let todoTitle = event.target.value.trim();
+
+ if (isBlank(todoTitle)) {
+ this.removeTodo();
+ } else {
+ this.args.todo.title = todoTitle;
+ this.editing = false;
+ this.args.onEndEdit();
+ }
+ };
 }

examples/emberjs/todomvc/app/index.html

@@ -12,6 +12,7 @@
  <link integrity="" rel="stylesheet" href="{{rootURL}}assets/todomvc.css" />
 
  {{content-for "head-footer"}}
+ <script src="node_modules/todomvc-common/base.js"></script>
  </head>
  <body>
  {{content-for "body"}}

examples/emberjs/todomvc/app/templates/active.gjs

@@ -3,10 +3,9 @@ import Route from 'ember-route-template';
 import TodoList from 'todomvc/components/todo-list';
 
 export default Route(
- <template>
- {{title "Active"}}
-
- <TodoList @todos={{@model.todos}} />
- </template>
-)
+ <template>
+ {{title "Active"}}
 
+ <TodoList @todos={{@model.todos}} />
+ </template>,
+);

examples/emberjs/todomvc/app/templates/application.gjs

@@ -4,14 +4,13 @@ import Attribution from 'todomvc/components/attribution';
 import Layout from 'todomvc/components/layout';
 
 export default Route(
- <template>
- {{title "TodoMVC"}}
+ <template>
+ {{title "TodoMVC"}}
 
- <Layout>
- {{outlet}}
- </Layout>
-
- <Attribution />
- </template>
-)
+ <Layout>
+ {{outlet}}
+ </Layout>
 
+ <Attribution />
+ </template>,
+);

examples/emberjs/todomvc/app/templates/completed.gjs

@@ -3,10 +3,9 @@ import Route from 'ember-route-template';
 import TodoList from 'todomvc/components/todo-list';
 
 export default Route(
- <template>
- {{title "Completed"}}
-
- <TodoList @todos={{@model.todos}} />
- </template>
-)
+ <template>
+ {{title "Completed"}}
 
+ <TodoList @todos={{@model.todos}} />
+ </template>,
+);

examples/emberjs/todomvc/app/templates/index.gjs

@@ -2,9 +2,9 @@ import Route from 'ember-route-template';
 import TodoList from 'todomvc/components/todo-list';
 
 export default Route(
- <template>
- {{#if @model.todos.length}}
- <TodoList @todos={{@model.todos}} />
- {{/if}}
- </template>
-)
+ <template>
+ {{#if @model.todos.length}}
+ <TodoList @todos={{@model.todos}} />
+ {{/if}}
+ </template>,
+);

examples/emberjs/todomvc/dist/assets/chunk.21a7dc4906237ee38116.js.LICENSE.txt

@@ -0,0 +1,4 @@
+/*!
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */