Vanilla ES6
diff --git a/updates/javascript-es5/.gitignore b/updates/javascript-es5/.gitignore
new file mode 100644
index 0000000000..03e05e4c07
--- /dev/null
+++ b/updates/javascript-es5/.gitignore
@@ -0,0 +1,2 @@
+.DS_Store
+/node_modules
diff --git a/updates/javascript-es5/README.md b/updates/javascript-es5/README.md
new file mode 100644
index 0000000000..19e1dddf4d
--- /dev/null
+++ b/updates/javascript-es5/README.md
@@ -0,0 +1,42 @@
+# TodoMVC: JavaScript Es5
+
+## Description
+
+This application uses JavaScript with ES5 language features to implement a todo application.
+
+JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it..
+
+[JavaScript - developer.mozilla.org](http://developer.mozilla.org/en-US/docs/JavaScript)
+
+## Implementation Details
+
+This implementation uses an explicit MVC pattern, with a clear file structure to reflect the architecture. The storage solution uses an in-memory data object that implements a simple array to hold the todos.
+
+## Build Steps
+
+A simple build script copies all necessary files to a `dist` folder.
+It does not rely on compilers or transpilers and serves raw html, css and js files to the user.
+
+```
+npm run build
+```
+
+## Requirements
+
+The only requirement is an installation of Node, to be able to install dependencies and run scripts to serve a local server.
+
+```
+* Node (min version: 18.13.0)
+* NPM (min version: 8.19.3)
+```
+
+## Local Preview
+
+```
+terminal:
+1. npm install
+2. npm run dev
+
+browser:
+1. http://localhost:7001/
+```
diff --git a/updates/javascript-es5/dist/app.js b/updates/javascript-es5/dist/app.js
new file mode 100644
index 0000000000..c4bc5924db
--- /dev/null
+++ b/updates/javascript-es5/dist/app.js
@@ -0,0 +1,25 @@
+/* global app, $on */
+(function () {
+ "use strict";
+
+ /**
+ * Sets up a brand new Todo list.
+ *
+ * @param {string} name The name of your new to do list.
+ */
+ function Todo(name) {
+ this.storage = new app.Store(name);
+ this.model = new app.Model(this.storage);
+ this.template = new app.Template();
+ this.view = new app.View(this.template);
+ this.controller = new app.Controller(this.model, this.view);
+ }
+
+ var todo = new Todo("javascript-es5");
+
+ function setView() {
+ todo.controller.setView(document.location.hash);
+ }
+ $on(window, "load", setView);
+ $on(window, "hashchange", setView);
+})();
diff --git a/updates/javascript-es5/dist/base.css b/updates/javascript-es5/dist/base.css
new file mode 100644
index 0000000000..da65968a73
--- /dev/null
+++ b/updates/javascript-es5/dist/base.css
@@ -0,0 +1,141 @@
+hr {
+ margin: 20px 0;
+ border: 0;
+ border-top: 1px dashed #c5c5c5;
+ border-bottom: 1px dashed #f7f7f7;
+}
+
+.learn a {
+ font-weight: normal;
+ text-decoration: none;
+ color: #b83f45;
+}
+
+.learn a:hover {
+ text-decoration: underline;
+ color: #787e7e;
+}
+
+.learn h3,
+.learn h4,
+.learn h5 {
+ margin: 10px 0;
+ font-weight: 500;
+ line-height: 1.2;
+ color: #000;
+}
+
+.learn h3 {
+ font-size: 24px;
+}
+
+.learn h4 {
+ font-size: 18px;
+}
+
+.learn h5 {
+ margin-bottom: 0;
+ font-size: 14px;
+}
+
+.learn ul {
+ padding: 0;
+ margin: 0 0 30px 25px;
+}
+
+.learn li {
+ line-height: 20px;
+}
+
+.learn p {
+ font-size: 15px;
+ font-weight: 300;
+ line-height: 1.3;
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+#issue-count {
+ display: none;
+}
+
+.quote {
+ border: none;
+ margin: 20px 0 60px 0;
+}
+
+.quote p {
+ font-style: italic;
+}
+
+.quote p:before {
+ content: '“';
+ font-size: 50px;
+ opacity: .15;
+ position: absolute;
+ top: -20px;
+ left: 3px;
+}
+
+.quote p:after {
+ content: '”';
+ font-size: 50px;
+ opacity: .15;
+ position: absolute;
+ bottom: -42px;
+ right: 3px;
+}
+
+.quote footer {
+ position: absolute;
+ bottom: -40px;
+ right: 0;
+}
+
+.quote footer img {
+ border-radius: 3px;
+}
+
+.quote footer a {
+ margin-left: 5px;
+ vertical-align: middle;
+}
+
+.speech-bubble {
+ position: relative;
+ padding: 10px;
+ background: rgba(0, 0, 0, .04);
+ border-radius: 5px;
+}
+
+.speech-bubble:after {
+ content: '';
+ position: absolute;
+ top: 100%;
+ right: 30px;
+ border: 13px solid transparent;
+ border-top-color: rgba(0, 0, 0, .04);
+}
+
+.learn-bar > .learn {
+ position: absolute;
+ width: 272px;
+ top: 8px;
+ left: -300px;
+ padding: 10px;
+ border-radius: 5px;
+ background-color: rgba(255, 255, 255, .6);
+ transition-property: left;
+ transition-duration: 500ms;
+}
+
+@media (min-width: 899px) {
+ .learn-bar {
+ width: auto;
+ padding-left: 300px;
+ }
+
+ .learn-bar > .learn {
+ left: 8px;
+ }
+}
diff --git a/updates/javascript-es5/dist/controller.js b/updates/javascript-es5/dist/controller.js
new file mode 100644
index 0000000000..229b19dde9
--- /dev/null
+++ b/updates/javascript-es5/dist/controller.js
@@ -0,0 +1,266 @@
+(function (window) {
+ "use strict";
+
+ /**
+ * Takes a model and view and acts as the controller between them
+ *
+ * @constructor
+ * @param {object} model The model instance
+ * @param {object} view The view instance
+ */
+ function Controller(model, view) {
+ var self = this;
+ self.model = model;
+ self.view = view;
+
+ self.view.bind("newTodo", function (title) {
+ self.addItem(title);
+ });
+
+ self.view.bind("itemEdit", function (item) {
+ self.editItem(item.id);
+ });
+
+ self.view.bind("itemEditDone", function (item) {
+ self.editItemSave(item.id, item.title);
+ });
+
+ self.view.bind("itemEditCancel", function (item) {
+ self.editItemCancel(item.id);
+ });
+
+ self.view.bind("itemRemove", function (item) {
+ self.removeItem(item.id);
+ });
+
+ self.view.bind("itemToggle", function (item) {
+ self.toggleComplete(item.id, item.completed);
+ });
+
+ self.view.bind("removeCompleted", function () {
+ self.removeCompletedItems();
+ });
+
+ self.view.bind("toggleAll", function (status) {
+ self.toggleAll(status.completed);
+ });
+ }
+
+ /**
+ * Loads and initialises the view
+ *
+ * @param {string} '' | 'active' | 'completed'
+ */
+ Controller.prototype.setView = function (locationHash) {
+ var route = locationHash.split("/")[1];
+ var page = route || "";
+ this._updateFilterState(page);
+ };
+
+ /**
+ * An event to fire on load. Will get all items and display them in the
+ * todo-list
+ */
+ Controller.prototype.showAll = function () {
+ var self = this;
+ self.model.read(function (data) {
+ self.view.render("showEntries", data);
+ });
+ };
+
+ /**
+ * Renders all active tasks
+ */
+ Controller.prototype.showActive = function () {
+ var self = this;
+ self.model.read({ completed: false }, function (data) {
+ self.view.render("showEntries", data);
+ });
+ };
+
+ /**
+ * Renders all completed tasks
+ */
+ Controller.prototype.showCompleted = function () {
+ var self = this;
+ self.model.read({ completed: true }, function (data) {
+ self.view.render("showEntries", data);
+ });
+ };
+
+ /**
+ * An event to fire whenever you want to add an item. Simply pass in the event
+ * object and it'll handle the DOM insertion and saving of the new item.
+ */
+ Controller.prototype.addItem = function (title) {
+ var self = this;
+
+ if (title.trim() === "")
+ return;
+
+ self.model.create(title, function () {
+ self.view.render("clearNewTodo");
+ self._filter(true);
+ });
+ };
+
+ /*
+ * Triggers the item editing mode.
+ */
+ Controller.prototype.editItem = function (id) {
+ var self = this;
+ self.model.read(id, function (data) {
+ self.view.render("editItem", { id: id, title: data[0].title });
+ });
+ };
+
+ /*
+ * Finishes the item editing mode successfully.
+ */
+ Controller.prototype.editItemSave = function (id, title) {
+ var self = this;
+ title = title.trim();
+
+ if (title.length !== 0) {
+ self.model.update(id, { title: title }, function () {
+ self.view.render("editItemDone", { id: id, title: title });
+ });
+ } else {
+ self.removeItem(id);
+ }
+ };
+
+ /*
+ * Cancels the item editing mode.
+ */
+ Controller.prototype.editItemCancel = function (id) {
+ var self = this;
+ self.model.read(id, function (data) {
+ self.view.render("editItemDone", { id: id, title: data[0].title });
+ });
+ };
+
+ /**
+ * By giving it an ID it'll find the DOM element matching that ID,
+ * remove it from the DOM and also remove it from storage.
+ *
+ * @param {number} id The ID of the item to remove from the DOM and
+ * storage
+ */
+ Controller.prototype.removeItem = function (id) {
+ var self = this;
+ self.model.remove(id, function () {
+ self.view.render("removeItem", id);
+ });
+
+ self._filter();
+ };
+
+ /**
+ * Will remove all completed items from the DOM and storage.
+ */
+ Controller.prototype.removeCompletedItems = function () {
+ var self = this;
+ self.model.read({ completed: true }, function (data) {
+ data.forEach(function (item) {
+ self.removeItem(item.id);
+ });
+ });
+
+ self._filter();
+ };
+
+ /**
+ * Give it an ID of a model and a checkbox and it will update the item
+ * in storage based on the checkbox's state.
+ *
+ * @param {number} id The ID of the element to complete or uncomplete
+ * @param {object} checkbox The checkbox to check the state of complete
+ * or not
+ * @param {boolean|undefined} silent Prevent re-filtering the todo items
+ */
+ Controller.prototype.toggleComplete = function (id, completed, silent) {
+ var self = this;
+ self.model.update(id, { completed: completed }, function () {
+ self.view.render("elementComplete", {
+ id: id,
+ completed: completed,
+ });
+ });
+
+ if (!silent)
+ self._filter();
+ };
+
+ /**
+ * Will toggle ALL checkboxes' on/off state and completeness of models.
+ * Just pass in the event object.
+ */
+ Controller.prototype.toggleAll = function (completed) {
+ var self = this;
+ self.model.read({ completed: !completed }, function (data) {
+ data.forEach(function (item) {
+ self.toggleComplete(item.id, completed, true);
+ });
+ });
+
+ self._filter();
+ };
+
+ /**
+ * Updates the pieces of the page which change depending on the remaining
+ * number of todos.
+ */
+ Controller.prototype._updateCount = function () {
+ var self = this;
+ self.model.getCount(function (todos) {
+ self.view.render("updateElementCount", todos.active);
+ self.view.render("clearCompletedButton", {
+ completed: todos.completed,
+ visible: todos.completed > 0,
+ });
+
+ self.view.render("toggleAll", { checked: todos.completed === todos.total });
+ self.view.render("contentBlockVisibility", { visible: todos.total > 0 });
+ });
+ };
+
+ /**
+ * Re-filters the todo items, based on the active route.
+ * @param {boolean|undefined} force forces a re-painting of todo items.
+ */
+ Controller.prototype._filter = function (force) {
+ var activeRoute = this._activeRoute.charAt(0).toUpperCase() + this._activeRoute.substr(1);
+
+ // Update the elements on the page, which change with each completed todo
+ this._updateCount();
+
+ // If the last active route isn't "All", or we're switching routes, we
+ // re-create the todo item elements, calling:
+ // this.show[All|Active|Completed]();
+ if (force || this._lastActiveRoute !== "All" || this._lastActiveRoute !== activeRoute)
+ this[`show${activeRoute}`]();
+
+ this._lastActiveRoute = activeRoute;
+ };
+
+ /**
+ * Simply updates the filter nav's selected states
+ */
+ Controller.prototype._updateFilterState = function (currentPage) {
+ // Store a reference to the active route, allowing us to re-filter todo
+ // items as they are marked complete or incomplete.
+ this._activeRoute = currentPage;
+
+ if (currentPage === "")
+ this._activeRoute = "All";
+
+ this._filter();
+
+ this.view.render("setFilter", currentPage);
+ };
+
+ // Export to window
+ window.app = window.app || {};
+ window.app.Controller = Controller;
+})(window);
diff --git a/updates/javascript-es5/dist/helpers.js b/updates/javascript-es5/dist/helpers.js
new file mode 100644
index 0000000000..de93a88f2d
--- /dev/null
+++ b/updates/javascript-es5/dist/helpers.js
@@ -0,0 +1,51 @@
+/* global NodeList */
+(function (window) {
+ "use strict";
+
+ // Get element(s) by CSS selector:
+ window.qs = function (selector, scope) {
+ return (scope || document).querySelector(selector);
+ };
+ window.qsa = function (selector, scope) {
+ return (scope || document).querySelectorAll(selector);
+ };
+
+ // addEventListener wrapper:
+ window.$on = function (target, type, callback, useCapture) {
+ target.addEventListener(type, callback, !!useCapture);
+ };
+
+ // Attach a handler to event for all elements that match the selector,
+ // now or in the future, based on a root element
+ window.$delegate = function (target, selector, type, handler) {
+ function dispatchEvent(event) {
+ var targetElement = event.target;
+ var potentialElements = window.qsa(selector, target);
+ var hasMatch = Array.prototype.indexOf.call(potentialElements, targetElement) >= 0;
+
+ if (hasMatch)
+ handler.call(targetElement, event);
+ }
+
+ // https://developer.mozilla.org/en-US/docs/Web/Events/blur
+ var useCapture = type === "blur" || type === "focus";
+
+ window.$on(target, type, dispatchEvent, useCapture);
+ };
+
+ // Find the element's parent with the given tag name:
+ // $parent(qs('a'), 'div');
+ window.$parent = function (element, tagName) {
+ if (!element.parentNode)
+ return undefined;
+
+ if (element.parentNode.tagName.toLowerCase() === tagName.toLowerCase())
+ return element.parentNode;
+
+ return window.$parent(element.parentNode, tagName);
+ };
+
+ // Allow for looping on nodes by chaining:
+ // qsa('.foo').forEach(function () {})
+ NodeList.prototype.forEach = Array.prototype.forEach;
+})(window);
diff --git a/updates/javascript-es5/dist/index.css b/updates/javascript-es5/dist/index.css
new file mode 100644
index 0000000000..fcc3da583a
--- /dev/null
+++ b/updates/javascript-es5/dist/index.css
@@ -0,0 +1,393 @@
+@charset "utf-8";
+
+html,
+body {
+ margin: 0;
+ padding: 0;
+}
+
+button {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ background: none;
+ font-size: 100%;
+ vertical-align: baseline;
+ font-family: inherit;
+ font-weight: inherit;
+ color: inherit;
+ -webkit-appearance: none;
+ appearance: none;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+ font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ line-height: 1.4em;
+ background: #f5f5f5;
+ color: #111111;
+ min-width: 230px;
+ max-width: 550px;
+ margin: 0 auto;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ font-weight: 300;
+}
+
+.hidden {
+ display: none;
+}
+
+.todoapp {
+ background: #fff;
+ margin: 130px 0 40px 0;
+ position: relative;
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+ 0 25px 50px 0 rgba(0, 0, 0, 0.1);
+}
+
+.todoapp input::-webkit-input-placeholder {
+ font-style: italic;
+ font-weight: 400;
+ color: rgba(0, 0, 0, 0.4);
+}
+
+.todoapp input::-moz-placeholder {
+ font-style: italic;
+ font-weight: 400;
+ color: rgba(0, 0, 0, 0.4);
+}
+
+.todoapp input::input-placeholder {
+ font-style: italic;
+ font-weight: 400;
+ color: rgba(0, 0, 0, 0.4);
+}
+
+.todoapp h1 {
+ position: absolute;
+ top: -140px;
+ width: 100%;
+ font-size: 80px;
+ font-weight: 200;
+ text-align: center;
+ color: #b83f45;
+ -webkit-text-rendering: optimizeLegibility;
+ -moz-text-rendering: optimizeLegibility;
+ text-rendering: optimizeLegibility;
+}
+
+.new-todo,
+.edit {
+ position: relative;
+ margin: 0;
+ width: 100%;
+ font-size: 24px;
+ font-family: inherit;
+ font-weight: inherit;
+ line-height: 1.4em;
+ color: inherit;
+ padding: 6px;
+ border: 1px solid #999;
+ box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+ box-sizing: border-box;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+.new-todo {
+ padding: 16px 16px 16px 60px;
+ height: 65px;
+ border: none;
+ background: rgba(0, 0, 0, 0.003);
+ box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
+}
+
+.main {
+ position: relative;
+ z-index: 2;
+ border-top: 1px solid #e6e6e6;
+}
+
+.toggle-all {
+ width: 1px;
+ height: 1px;
+ border: none; /* Mobile Safari */
+ opacity: 0;
+ position: absolute;
+ right: 100%;
+ bottom: 100%;
+}
+
+.toggle-all + label {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 45px;
+ height: 65px;
+ font-size: 0;
+ position: absolute;
+ top: -65px;
+ left: -0;
+}
+
+.toggle-all + label:before {
+ content: '❯';
+ display: inline-block;
+ font-size: 22px;
+ color: #949494;
+ padding: 10px 27px 10px 27px;
+ -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
+}
+
+.toggle-all:checked + label:before {
+ color: #484848;
+}
+
+.todo-list {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.todo-list li {
+ position: relative;
+ font-size: 24px;
+ border-bottom: 1px solid #ededed;
+}
+
+.todo-list li:last-child {
+ border-bottom: none;
+}
+
+.todo-list li.editing {
+ border-bottom: none;
+ padding: 0;
+}
+
+.todo-list li.editing .edit {
+ display: block;
+ width: calc(100% - 43px);
+ padding: 12px 16px;
+ margin: 0 0 0 43px;
+}
+
+.todo-list li.editing .view {
+ display: none;
+}
+
+.todo-list li .toggle {
+ text-align: center;
+ width: 40px;
+ /* auto, since non-WebKit browsers doesn't support input styling */
+ height: auto;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ margin: auto 0;
+ border: none; /* Mobile Safari */
+ -webkit-appearance: none;
+ appearance: none;
+}
+
+.todo-list li .toggle {
+ opacity: 0;
+}
+
+.todo-list li .toggle + label {
+ /*
+ Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
+ IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
+ */
+ background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23949494%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
+ background-repeat: no-repeat;
+ background-position: center left;
+}
+
+.todo-list li .toggle:checked + label {
+ background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%2359A193%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20fill%3D%22%233EA390%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22%2F%3E%3C%2Fsvg%3E');
+}
+
+.todo-list li label {
+ word-break: break-all;
+ padding: 15px 15px 15px 60px;
+ display: block;
+ line-height: 1.2;
+ transition: color 0.4s;
+ font-weight: 400;
+ color: #484848;
+}
+
+.todo-list li.completed label {
+ color: #949494;
+ text-decoration: line-through;
+}
+
+.todo-list li .destroy {
+ display: none;
+ position: absolute;
+ top: 0;
+ right: 10px;
+ bottom: 0;
+ width: 40px;
+ height: 40px;
+ margin: auto 0;
+ font-size: 30px;
+ color: #949494;
+ transition: color 0.2s ease-out;
+}
+
+.todo-list li .destroy:hover,
+.todo-list li .destroy:focus {
+ color: #C18585;
+}
+
+.todo-list li .destroy:after {
+ content: '×';
+ display: block;
+ height: 100%;
+ line-height: 1.1;
+}
+
+.todo-list li:hover .destroy {
+ display: block;
+}
+
+.todo-list li .edit {
+ display: none;
+}
+
+.todo-list li.editing:last-child {
+ margin-bottom: -1px;
+}
+
+.footer {
+ padding: 10px 15px;
+ height: 20px;
+ text-align: center;
+ font-size: 15px;
+ border-top: 1px solid #e6e6e6;
+}
+
+.footer:before {
+ content: '';
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ height: 50px;
+ overflow: hidden;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+ 0 8px 0 -3px #f6f6f6,
+ 0 9px 1px -3px rgba(0, 0, 0, 0.2),
+ 0 16px 0 -6px #f6f6f6,
+ 0 17px 2px -6px rgba(0, 0, 0, 0.2);
+}
+
+.todo-count {
+ float: left;
+ text-align: left;
+}
+
+.todo-count strong {
+ font-weight: 300;
+}
+
+.filters {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ position: absolute;
+ right: 0;
+ left: 0;
+}
+
+.filters li {
+ display: inline;
+}
+
+.filters li a {
+ color: inherit;
+ margin: 3px;
+ padding: 3px 7px;
+ text-decoration: none;
+ border: 1px solid transparent;
+ border-radius: 3px;
+}
+
+.filters li a:hover {
+ border-color: #DB7676;
+}
+
+.filters li a.selected {
+ border-color: #CE4646;
+}
+
+.clear-completed,
+html .clear-completed:active {
+ float: right;
+ position: relative;
+ line-height: 19px;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+.clear-completed:hover {
+ text-decoration: underline;
+}
+
+.info {
+ margin: 65px auto 0;
+ color: #4d4d4d;
+ font-size: 11px;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+ text-align: center;
+}
+
+.info p {
+ line-height: 1;
+}
+
+.info a {
+ color: inherit;
+ text-decoration: none;
+ font-weight: 400;
+}
+
+.info a:hover {
+ text-decoration: underline;
+}
+
+/*
+ Hack to remove background from Mobile Safari.
+ Can't use it globally since it destroys checkboxes in Firefox
+*/
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+ .toggle-all,
+ .todo-list li .toggle {
+ background: none;
+ }
+
+ .todo-list li .toggle {
+ height: 40px;
+ }
+}
+
+@media (max-width: 430px) {
+ .footer {
+ height: 50px;
+ }
+
+ .filters {
+ bottom: 10px;
+ }
+}
+
+:focus,
+.toggle:focus + label,
+.toggle-all:focus + label {
+ box-shadow: 0 0 2px 2px #CF7D7D;
+ outline: 0;
+}
diff --git a/updates/javascript-es5/dist/index.html b/updates/javascript-es5/dist/index.html
new file mode 100644
index 0000000000..2665af63f3
--- /dev/null
+++ b/updates/javascript-es5/dist/index.html
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+
+ TodoMVC: JavaScript Es5
+
+
+
+
+
+
+
todos
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/updates/javascript-es5/dist/model.js b/updates/javascript-es5/dist/model.js
new file mode 100644
index 0000000000..2268fe8539
--- /dev/null
+++ b/updates/javascript-es5/dist/model.js
@@ -0,0 +1,119 @@
+(function (window) {
+ "use strict";
+
+ /**
+ * Creates a new Model instance and hooks up the storage.
+ *
+ * @constructor
+ * @param {object} storage A reference to the client side storage class
+ */
+ function Model(storage) {
+ this.storage = storage;
+ }
+
+ /**
+ * Creates a new todo model
+ *
+ * @param {string} [title] The title of the task
+ * @param {function} [callback] The callback to fire after the model is created
+ */
+ Model.prototype.create = function (title, callback) {
+ title = title || "";
+ callback = callback || function () {};
+
+ var newItem = {
+ title: title.trim(),
+ completed: false,
+ };
+
+ this.storage.save(newItem, callback);
+ };
+
+ /**
+ * Finds and returns a model in storage. If no query is given it'll simply
+ * return everything. If you pass in a string or number it'll look that up as
+ * the ID of the model to find. Lastly, you can pass it an object to match
+ * against.
+ *
+ * @param {string|number|object} [query] A query to match models against
+ * @param {function} [callback] The callback to fire after the model is found
+ *
+ * @example
+ * model.read(1, func); // Will find the model with an ID of 1
+ * model.read('1'); // Same as above
+ * //Below will find a model with foo equalling bar and hello equalling world.
+ * model.read({ foo: 'bar', hello: 'world' });
+ */
+ Model.prototype.read = function (query, callback) {
+ var queryType = typeof query;
+ callback = callback || function () {};
+
+ if (queryType === "function") {
+ callback = query;
+ return this.storage.findAll(callback);
+ } else if (queryType === "string" || queryType === "number") {
+ query = parseInt(query, 10);
+ return this.storage.find({ id: query }, callback);
+ } else {
+ return this.storage.find(query, callback);
+ }
+ };
+
+ /**
+ * Updates a model by giving it an ID, data to update, and a callback to fire when
+ * the update is complete.
+ *
+ * @param {number} id The id of the model to update
+ * @param {object} data The properties to update and their new value
+ * @param {function} callback The callback to fire when the update is complete.
+ */
+ Model.prototype.update = function (id, data, callback) {
+ this.storage.save(data, callback, id);
+ };
+
+ /**
+ * Removes a model from storage
+ *
+ * @param {number} id The ID of the model to remove
+ * @param {function} callback The callback to fire when the removal is complete.
+ */
+ Model.prototype.remove = function (id, callback) {
+ this.storage.remove(id, callback);
+ };
+
+ /**
+ * WARNING: Will remove ALL data from storage.
+ *
+ * @param {function} callback The callback to fire when the storage is wiped.
+ */
+ Model.prototype.removeAll = function (callback) {
+ this.storage.drop(callback);
+ };
+
+ /**
+ * Returns a count of all todos
+ */
+ Model.prototype.getCount = function (callback) {
+ var todos = {
+ active: 0,
+ completed: 0,
+ total: 0,
+ };
+
+ this.storage.findAll(function (data) {
+ data.forEach(function (todo) {
+ if (todo.completed)
+ todos.completed++;
+ else
+ todos.active++;
+
+ todos.total++;
+ });
+ callback(todos);
+ });
+ };
+
+ // Export to window
+ window.app = window.app || {};
+ window.app.Model = Model;
+})(window);
diff --git a/updates/javascript-es5/dist/store.js b/updates/javascript-es5/dist/store.js
new file mode 100644
index 0000000000..2493c12aa2
--- /dev/null
+++ b/updates/javascript-es5/dist/store.js
@@ -0,0 +1,146 @@
+/* jshint eqeqeq:false */
+(function (window) {
+ "use strict";
+
+ var MemoryStorage = {};
+ var ID = 1;
+
+ /**
+ * Creates a new client side storage object and will create an empty
+ * collection if no collection already exists.
+ *
+ * @param {string} name The name of our DB we want to use
+ * @param {function} callback Our fake DB uses callbacks because in
+ * real life you probably would be making AJAX calls
+ */
+ function Store(name, callback) {
+ callback = callback || function () {};
+
+ this._dbName = name;
+
+ if (!MemoryStorage[name]) {
+ var data = {
+ todos: [],
+ };
+
+ MemoryStorage[name] = JSON.stringify(data);
+ }
+
+ callback.call(this, JSON.parse(MemoryStorage[name]));
+ }
+
+ /**
+ * Finds items based on a query given as a JS object
+ *
+ * @param {object} query The query to match against (i.e. {foo: 'bar'})
+ * @param {function} callback The callback to fire when the query has
+ * completed running
+ *
+ * @example
+ * db.find({foo: 'bar', hello: 'world'}, function (data) {
+ * // data will return any items that have foo: bar and
+ * // hello: world in their properties
+ * });
+ */
+ Store.prototype.find = function (query, callback) {
+ if (!callback)
+ return;
+
+ var todos = JSON.parse(MemoryStorage[this._dbName]).todos;
+
+ callback.call(
+ this,
+ todos.filter(function (todo) {
+ for (var q in query) {
+ if (query[q] !== todo[q])
+ return false;
+ }
+
+ return true;
+ })
+ );
+ };
+
+ /**
+ * Will retrieve all data from the collection
+ *
+ * @param {function} callback The callback to fire upon retrieving data
+ */
+ Store.prototype.findAll = function (callback) {
+ callback = callback || function () {};
+ callback.call(this, JSON.parse(MemoryStorage[this._dbName]).todos);
+ };
+
+ /**
+ * Will save the given data to the DB. If no item exists it will create a new
+ * item, otherwise it'll simply update an existing item's properties
+ *
+ * @param {object} updateData The data to save back into the DB
+ * @param {function} callback The callback to fire after saving
+ * @param {number} id An optional param to enter an ID of an item to update
+ */
+ Store.prototype.save = function (updateData, callback, id) {
+ var data = JSON.parse(MemoryStorage[this._dbName]);
+ var todos = data.todos;
+
+ callback = callback || function () {};
+
+ // If an ID was actually given, find the item and update each property
+ if (id) {
+ for (var i = 0; i < todos.length; i++) {
+ if (todos[i].id === id) {
+ for (var key in updateData)
+ todos[i][key] = updateData[key];
+
+ break;
+ }
+ }
+
+ MemoryStorage[this._dbName] = JSON.stringify(data);
+ callback.call(this, todos);
+ } else {
+ // Generate an ID
+ updateData.id = ID++;
+
+ todos.push(updateData);
+ MemoryStorage[this._dbName] = JSON.stringify(data);
+ callback.call(this, [updateData]);
+ }
+ };
+
+ /**
+ * Will remove an item from the Store based on its ID
+ *
+ * @param {number} id The ID of the item you want to remove
+ * @param {function} callback The callback to fire after saving
+ */
+ Store.prototype.remove = function (id, callback) {
+ var data = JSON.parse(MemoryStorage[this._dbName]);
+ var todos = data.todos;
+
+ for (var i = 0; i < todos.length; i++) {
+ if (todos[i].id === id) {
+ todos.splice(i, 1);
+ break;
+ }
+ }
+
+ MemoryStorage[this._dbName] = JSON.stringify(data);
+ callback.call(this, todos);
+ };
+
+ /**
+ * Will drop all storage and start fresh
+ *
+ * @param {function} callback The callback to fire after dropping the data
+ */
+ Store.prototype.drop = function (callback) {
+ var data = { todos: [] };
+ MemoryStorage[this._dbName] = JSON.stringify(data);
+ callback.call(this, data.todos);
+ };
+
+ // Export to window
+ window.app = window.app || {};
+ window.app.Store = Store;
+})(window);
diff --git a/updates/javascript-es5/dist/template.js b/updates/javascript-es5/dist/template.js
new file mode 100644
index 0000000000..fca160f3ba
--- /dev/null
+++ b/updates/javascript-es5/dist/template.js
@@ -0,0 +1,111 @@
+/* jshint laxbreak:true */
+(function (window) {
+ "use strict";
+
+ var htmlEscapes = {
+ "&": "&",
+ "<": "<",
+ ">": ">",
+ '"': """,
+ "'": "'",
+ "`": "`",
+ };
+
+ var escapeHtmlChar = function (chr) {
+ return htmlEscapes[chr];
+ };
+
+ var reUnescapedHtml = /[&<>"'`]/g;
+ var reHasUnescapedHtml = new RegExp(reUnescapedHtml.source);
+
+ var escape = function (string) {
+ return string && reHasUnescapedHtml.test(string) ? string.replace(reUnescapedHtml, escapeHtmlChar) : string;
+ };
+
+ /**
+ * Sets up defaults for all the Template methods such as a default template
+ *
+ * @constructor
+ */
+ function Template() {
+ this.defaultTemplate
+ = '
'
+ + '
'
+ + ''
+ + ""
+ + ''
+ + "
"
+ + "
";
+ }
+
+ /**
+ * Creates an
HTML string and returns it for placement in your app.
+ *
+ * NOTE: In real life you should be using a templating engine such as Mustache
+ * or Handlebars, however, this is a vanilla JS example.
+ *
+ * @param {object} data The object containing keys you want to find in the
+ * template to replace.
+ * @returns {string} HTML String of an
element
+ *
+ * @example
+ * view.show({
+ * id: 1,
+ * title: "Hello World",
+ * completed: 0,
+ * });
+ */
+ Template.prototype.show = function (data) {
+ var i, l;
+ var view = "";
+
+ for (i = 0, l = data.length; i < l; i++) {
+ var template = this.defaultTemplate;
+ var completed = "";
+ var checked = "";
+
+ if (data[i].completed) {
+ completed = "completed";
+ checked = "checked";
+ }
+
+ template = template.replace("{{id}}", data[i].id);
+ template = template.replace("{{title}}", escape(data[i].title));
+ template = template.replace("{{completed}}", completed);
+ template = template.replace("{{checked}}", checked);
+
+ view = view + template;
+ }
+
+ return view;
+ };
+
+ /**
+ * Displays a counter of how many to dos are left to complete
+ *
+ * @param {number} activeTodos The number of active todos.
+ * @returns {string} String containing the count
+ */
+ Template.prototype.itemCounter = function (activeTodos) {
+ var plural = activeTodos === 1 ? "" : "s";
+
+ return `${activeTodos} item${plural} left`;
+ };
+
+ /**
+ * Updates the text within the "Clear completed" button
+ *
+ * @param {[type]} completedTodos The number of completed todos.
+ * @returns {string} String containing the count
+ */
+ Template.prototype.clearCompletedButton = function (completedTodos) {
+ if (completedTodos > 0)
+ return "Clear completed";
+ else
+ return "";
+ };
+
+ // Export to window
+ window.app = window.app || {};
+ window.app.Template = Template;
+})(window);
diff --git a/updates/javascript-es5/dist/view.js b/updates/javascript-es5/dist/view.js
new file mode 100644
index 0000000000..b34323332f
--- /dev/null
+++ b/updates/javascript-es5/dist/view.js
@@ -0,0 +1,215 @@
+/* global qs, qsa, $on, $parent, $delegate */
+
+(function (window) {
+ "use strict";
+
+ /**
+ * View that abstracts away the browser's DOM completely.
+ * It has two simple entry points:
+ *
+ * - bind(eventName, handler)
+ * Takes a todo application event and registers the handler
+ * - render(command, parameterObject)
+ * Renders the given command with the options
+ */
+ function View(template) {
+ this.template = template;
+
+ this.ENTER_KEY = 13;
+ this.ESCAPE_KEY = 27;
+
+ this.$todoList = qs(".todo-list");
+ this.$todoItemCounter = qs(".todo-count");
+ this.$clearCompleted = qs(".clear-completed");
+ this.$main = qs(".main");
+ this.$footer = qs(".footer");
+ this.$toggleAllInput = qs(".toggle-all");
+ this.$toggleAll = qs(".toggle-all-label");
+ this.$newTodo = qs(".new-todo");
+ }
+
+ View.prototype._removeItem = function (id) {
+ var elem = qs(`[data-id="${id}"]`);
+
+ if (elem)
+ this.$todoList.removeChild(elem);
+ };
+
+ View.prototype._clearCompletedButton = function (completedCount, visible) {
+ this.$clearCompleted.textContent = this.template.clearCompletedButton(completedCount);
+ this.$clearCompleted.style.display = visible ? "block" : "none";
+ };
+
+ View.prototype._setFilter = function (currentPage) {
+ qs(".filters .selected").className = "";
+ qs(`.filters [href="#/${currentPage}"]`).className = "selected";
+ };
+
+ View.prototype._elementComplete = function (id, completed) {
+ var listItem = qs(`[data-id="${id}"]`);
+
+ if (!listItem)
+ return;
+
+ listItem.className = completed ? "completed" : "";
+
+ // In case it was toggled from an event and not by clicking the checkbox
+ qs("input", listItem).checked = completed;
+ };
+
+ View.prototype._editItem = function (id, title) {
+ var listItem = qs(`[data-id="${id}"]`);
+
+ if (!listItem)
+ return;
+
+ listItem.className = `${listItem.className} editing`;
+
+ var input = document.createElement("input");
+ input.className = "edit";
+
+ listItem.appendChild(input);
+ input.focus();
+ input.value = title;
+ };
+
+ View.prototype._editItemDone = function (id, title) {
+ var listItem = qs(`[data-id="${id}"]`);
+
+ if (!listItem)
+ return;
+
+ var input = qs("input.edit", listItem);
+ listItem.removeChild(input);
+
+ listItem.className = listItem.className.replace("editing", "");
+
+ qsa("label", listItem).forEach(function (label) {
+ label.textContent = title;
+ });
+ };
+
+ View.prototype._replaceContentWithHtml = function (element, html) {
+ const parsedDocument = new DOMParser().parseFromString(html, "text/html");
+ element.replaceChildren(...parsedDocument.body.childNodes);
+ };
+
+ View.prototype.render = function (viewCmd, parameter) {
+ var self = this;
+ var viewCommands = {
+ showEntries: function () {
+ self._replaceContentWithHtml(self.$todoList, self.template.show(parameter));
+ },
+ removeItem: function () {
+ self._removeItem(parameter);
+ },
+ updateElementCount: function () {
+ self._replaceContentWithHtml(self.$todoItemCounter, self.template.itemCounter(parameter));
+ },
+ clearCompletedButton: function () {
+ self._clearCompletedButton(parameter.completed, parameter.visible);
+ },
+ contentBlockVisibility: function () {
+ self.$main.style.display = self.$footer.style.display = parameter.visible ? "block" : "none";
+ },
+ toggleAll: function () {
+ self.$toggleAll.checked = parameter.checked;
+ },
+ setFilter: function () {
+ self._setFilter(parameter);
+ },
+ clearNewTodo: function () {
+ self.$newTodo.value = "";
+ },
+ elementComplete: function () {
+ self._elementComplete(parameter.id, parameter.completed);
+ },
+ editItem: function () {
+ self._editItem(parameter.id, parameter.title);
+ },
+ editItemDone: function () {
+ self._editItemDone(parameter.id, parameter.title);
+ },
+ };
+
+ viewCommands[viewCmd]();
+ };
+
+ View.prototype._itemId = function (element) {
+ var li = $parent(element, "li");
+ return parseInt(li.dataset.id, 10);
+ };
+
+ View.prototype._bindItemEditDone = function (handler) {
+ var self = this;
+ $delegate(self.$todoList, "li .edit", "blur", function () {
+ if (!this.dataset.iscanceled) {
+ handler({
+ id: self._itemId(this),
+ title: this.value,
+ });
+ }
+ });
+
+ $delegate(self.$todoList, "li .edit", "keypress", function (event) {
+ if (event.keyCode === self.ENTER_KEY) {
+ // Remove the cursor from the input when you hit enter just like if it
+ // were a real form
+ this.blur();
+ }
+ });
+ };
+
+ View.prototype._bindItemEditCancel = function (handler) {
+ var self = this;
+ $delegate(self.$todoList, "li .edit", "keyup", function (event) {
+ if (event.keyCode === self.ESCAPE_KEY) {
+ this.dataset.iscanceled = true;
+ this.blur();
+
+ handler({ id: self._itemId(this) });
+ }
+ });
+ };
+
+ View.prototype.bind = function (event, handler) {
+ var self = this;
+ if (event === "newTodo") {
+ $on(self.$newTodo, "change", function () {
+ handler(self.$newTodo.value);
+ });
+ } else if (event === "removeCompleted") {
+ $on(self.$clearCompleted, "click", function () {
+ handler();
+ });
+ } else if (event === "toggleAll") {
+ $on(self.$toggleAll, "click", function () {
+ self.$toggleAllInput.click();
+ handler({ completed: self.$toggleAllInput.checked });
+ });
+ } else if (event === "itemEdit") {
+ $delegate(self.$todoList, "li label", "dblclick", function () {
+ handler({ id: self._itemId(this) });
+ });
+ } else if (event === "itemRemove") {
+ $delegate(self.$todoList, ".destroy", "click", function () {
+ handler({ id: self._itemId(this) });
+ });
+ } else if (event === "itemToggle") {
+ $delegate(self.$todoList, ".toggle", "click", function () {
+ handler({
+ id: self._itemId(this),
+ completed: this.checked,
+ });
+ });
+ } else if (event === "itemEditDone") {
+ self._bindItemEditDone(handler);
+ } else if (event === "itemEditCancel") {
+ self._bindItemEditCancel(handler);
+ }
+ };
+
+ // Export to window
+ window.app = window.app || {};
+ window.app.View = View;
+})(window);
diff --git a/updates/javascript-es5/index.html b/updates/javascript-es5/index.html
new file mode 100644
index 0000000000..fc4d28bbc6
--- /dev/null
+++ b/updates/javascript-es5/index.html
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+
+ TodoMVC: JavaScript Es5
+
+
+
+
+
+
+
todos
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/updates/javascript-es5/package-lock.json b/updates/javascript-es5/package-lock.json
new file mode 100644
index 0000000000..3794b03322
--- /dev/null
+++ b/updates/javascript-es5/package-lock.json
@@ -0,0 +1,787 @@
+{
+ "name": "todomvc-javascript-es5",
+ "version": "1.0.0",
+ "lockfileVersion": 2,
+ "requires": true,
+ "packages": {
+ "": {
+ "name": "todomvc-javascript-es5",
+ "version": "1.0.0",
+ "dependencies": {
+ "todomvc-app-css": "^2.4.2",
+ "todomvc-common": "^1.0.5"
+ },
+ "devDependencies": {
+ "http-server": "^14.1.1"
+ },
+ "engines": {
+ "node": ">=18.13.0",
+ "npm": ">=8.19.3"
+ }
+ },
+ "node_modules/ansi-styles": {
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+ "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+ "dev": true,
+ "dependencies": {
+ "color-convert": "^2.0.1"
+ },
+ "engines": {
+ "node": ">=8"
+ },
+ "funding": {
+ "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+ }
+ },
+ "node_modules/async": {
+ "version": "2.6.4",
+ "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+ "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
+ "dev": true,
+ "dependencies": {
+ "lodash": "^4.17.14"
+ }
+ },
+ "node_modules/basic-auth": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
+ "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
+ "dev": true,
+ "dependencies": {
+ "safe-buffer": "5.1.2"
+ },
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
+ "node_modules/call-bind": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+ "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+ "dev": true,
+ "dependencies": {
+ "function-bind": "^1.1.1",
+ "get-intrinsic": "^1.0.2"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/chalk": {
+ "version": "4.1.2",
+ "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+ "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+ "dev": true,
+ "dependencies": {
+ "ansi-styles": "^4.1.0",
+ "supports-color": "^7.1.0"
+ },
+ "engines": {
+ "node": ">=10"
+ },
+ "funding": {
+ "url": "https://github.com/chalk/chalk?sponsor=1"
+ }
+ },
+ "node_modules/color-convert": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+ "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+ "dev": true,
+ "dependencies": {
+ "color-name": "~1.1.4"
+ },
+ "engines": {
+ "node": ">=7.0.0"
+ }
+ },
+ "node_modules/color-name": {
+ "version": "1.1.4",
+ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+ "dev": true
+ },
+ "node_modules/corser": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz",
+ "integrity": "sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ==",
+ "dev": true,
+ "engines": {
+ "node": ">= 0.4.0"
+ }
+ },
+ "node_modules/debug": {
+ "version": "3.2.7",
+ "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+ "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+ "dev": true,
+ "dependencies": {
+ "ms": "^2.1.1"
+ }
+ },
+ "node_modules/eventemitter3": {
+ "version": "4.0.7",
+ "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+ "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+ "dev": true
+ },
+ "node_modules/follow-redirects": {
+ "version": "1.15.2",
+ "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+ "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+ "dev": true,
+ "funding": [
+ {
+ "type": "individual",
+ "url": "https://github.com/sponsors/RubenVerborgh"
+ }
+ ],
+ "engines": {
+ "node": ">=4.0"
+ },
+ "peerDependenciesMeta": {
+ "debug": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/function-bind": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+ "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+ "dev": true
+ },
+ "node_modules/get-intrinsic": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
+ "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
+ "dev": true,
+ "dependencies": {
+ "function-bind": "^1.1.1",
+ "has": "^1.0.3",
+ "has-symbols": "^1.0.3"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/has": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+ "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+ "dev": true,
+ "dependencies": {
+ "function-bind": "^1.1.1"
+ },
+ "engines": {
+ "node": ">= 0.4.0"
+ }
+ },
+ "node_modules/has-flag": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+ "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+ "dev": true,
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/has-symbols": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+ "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+ "dev": true,
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/he": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+ "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+ "dev": true,
+ "bin": {
+ "he": "bin/he"
+ }
+ },
+ "node_modules/html-encoding-sniffer": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
+ "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+ "dev": true,
+ "dependencies": {
+ "whatwg-encoding": "^2.0.0"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/http-proxy": {
+ "version": "1.18.1",
+ "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+ "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+ "dev": true,
+ "dependencies": {
+ "eventemitter3": "^4.0.0",
+ "follow-redirects": "^1.0.0",
+ "requires-port": "^1.0.0"
+ },
+ "engines": {
+ "node": ">=8.0.0"
+ }
+ },
+ "node_modules/http-server": {
+ "version": "14.1.1",
+ "resolved": "https://registry.npmjs.org/http-server/-/http-server-14.1.1.tgz",
+ "integrity": "sha512-+cbxadF40UXd9T01zUHgA+rlo2Bg1Srer4+B4NwIHdaGxAGGv59nYRnGGDJ9LBk7alpS0US+J+bLLdQOOkJq4A==",
+ "dev": true,
+ "dependencies": {
+ "basic-auth": "^2.0.1",
+ "chalk": "^4.1.2",
+ "corser": "^2.0.1",
+ "he": "^1.2.0",
+ "html-encoding-sniffer": "^3.0.0",
+ "http-proxy": "^1.18.1",
+ "mime": "^1.6.0",
+ "minimist": "^1.2.6",
+ "opener": "^1.5.1",
+ "portfinder": "^1.0.28",
+ "secure-compare": "3.0.1",
+ "union": "~0.5.0",
+ "url-join": "^4.0.1"
+ },
+ "bin": {
+ "http-server": "bin/http-server"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/iconv-lite": {
+ "version": "0.6.3",
+ "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+ "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+ "dev": true,
+ "dependencies": {
+ "safer-buffer": ">= 2.1.2 < 3.0.0"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/lodash": {
+ "version": "4.17.21",
+ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+ "dev": true
+ },
+ "node_modules/mime": {
+ "version": "1.6.0",
+ "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+ "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+ "dev": true,
+ "bin": {
+ "mime": "cli.js"
+ },
+ "engines": {
+ "node": ">=4"
+ }
+ },
+ "node_modules/minimist": {
+ "version": "1.2.8",
+ "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+ "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+ "dev": true,
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/mkdirp": {
+ "version": "0.5.6",
+ "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+ "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+ "dev": true,
+ "dependencies": {
+ "minimist": "^1.2.6"
+ },
+ "bin": {
+ "mkdirp": "bin/cmd.js"
+ }
+ },
+ "node_modules/ms": {
+ "version": "2.1.3",
+ "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+ "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+ "dev": true
+ },
+ "node_modules/object-inspect": {
+ "version": "1.12.3",
+ "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
+ "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
+ "dev": true,
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/opener": {
+ "version": "1.5.2",
+ "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+ "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+ "dev": true,
+ "bin": {
+ "opener": "bin/opener-bin.js"
+ }
+ },
+ "node_modules/portfinder": {
+ "version": "1.0.32",
+ "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
+ "integrity": "sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==",
+ "dev": true,
+ "dependencies": {
+ "async": "^2.6.4",
+ "debug": "^3.2.7",
+ "mkdirp": "^0.5.6"
+ },
+ "engines": {
+ "node": ">= 0.12.0"
+ }
+ },
+ "node_modules/qs": {
+ "version": "6.11.0",
+ "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+ "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+ "dev": true,
+ "dependencies": {
+ "side-channel": "^1.0.4"
+ },
+ "engines": {
+ "node": ">=0.6"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/requires-port": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+ "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+ "dev": true
+ },
+ "node_modules/safe-buffer": {
+ "version": "5.1.2",
+ "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+ "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+ "dev": true
+ },
+ "node_modules/safer-buffer": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+ "dev": true
+ },
+ "node_modules/secure-compare": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz",
+ "integrity": "sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw==",
+ "dev": true
+ },
+ "node_modules/side-channel": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+ "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+ "dev": true,
+ "dependencies": {
+ "call-bind": "^1.0.0",
+ "get-intrinsic": "^1.0.2",
+ "object-inspect": "^1.9.0"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/supports-color": {
+ "version": "7.2.0",
+ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+ "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+ "dev": true,
+ "dependencies": {
+ "has-flag": "^4.0.0"
+ },
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/todomvc-app-css": {
+ "version": "2.4.2",
+ "resolved": "https://registry.npmjs.org/todomvc-app-css/-/todomvc-app-css-2.4.2.tgz",
+ "integrity": "sha512-ViAkQ7ed89rmhFIGRsT36njN+97z8+s3XsJnB8E2IKOq+/SLD/6PtSvmTtiwUcVk39qPcjAc/OyeDys4LoJUVg=="
+ },
+ "node_modules/todomvc-common": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/todomvc-common/-/todomvc-common-1.0.5.tgz",
+ "integrity": "sha512-D8kEJmxVMQIWwztEdH+WeiAfXRbbSCpgXq4NkYi+gduJ2tr8CNq7sYLfJvjpQ10KD9QxJwig57rvMbV2QAESwQ=="
+ },
+ "node_modules/union": {
+ "version": "0.5.0",
+ "resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz",
+ "integrity": "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==",
+ "dev": true,
+ "dependencies": {
+ "qs": "^6.4.0"
+ },
+ "engines": {
+ "node": ">= 0.8.0"
+ }
+ },
+ "node_modules/url-join": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz",
+ "integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==",
+ "dev": true
+ },
+ "node_modules/whatwg-encoding": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
+ "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+ "dev": true,
+ "dependencies": {
+ "iconv-lite": "0.6.3"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ }
+ },
+ "dependencies": {
+ "ansi-styles": {
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+ "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+ "dev": true,
+ "requires": {
+ "color-convert": "^2.0.1"
+ }
+ },
+ "async": {
+ "version": "2.6.4",
+ "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+ "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
+ "dev": true,
+ "requires": {
+ "lodash": "^4.17.14"
+ }
+ },
+ "basic-auth": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
+ "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
+ "dev": true,
+ "requires": {
+ "safe-buffer": "5.1.2"
+ }
+ },
+ "call-bind": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+ "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+ "dev": true,
+ "requires": {
+ "function-bind": "^1.1.1",
+ "get-intrinsic": "^1.0.2"
+ }
+ },
+ "chalk": {
+ "version": "4.1.2",
+ "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+ "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+ "dev": true,
+ "requires": {
+ "ansi-styles": "^4.1.0",
+ "supports-color": "^7.1.0"
+ }
+ },
+ "color-convert": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+ "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+ "dev": true,
+ "requires": {
+ "color-name": "~1.1.4"
+ }
+ },
+ "color-name": {
+ "version": "1.1.4",
+ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+ "dev": true
+ },
+ "corser": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz",
+ "integrity": "sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ==",
+ "dev": true
+ },
+ "debug": {
+ "version": "3.2.7",
+ "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+ "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+ "dev": true,
+ "requires": {
+ "ms": "^2.1.1"
+ }
+ },
+ "eventemitter3": {
+ "version": "4.0.7",
+ "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+ "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+ "dev": true
+ },
+ "follow-redirects": {
+ "version": "1.15.2",
+ "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+ "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+ "dev": true
+ },
+ "function-bind": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+ "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+ "dev": true
+ },
+ "get-intrinsic": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
+ "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
+ "dev": true,
+ "requires": {
+ "function-bind": "^1.1.1",
+ "has": "^1.0.3",
+ "has-symbols": "^1.0.3"
+ }
+ },
+ "has": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+ "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+ "dev": true,
+ "requires": {
+ "function-bind": "^1.1.1"
+ }
+ },
+ "has-flag": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+ "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+ "dev": true
+ },
+ "has-symbols": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+ "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+ "dev": true
+ },
+ "he": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+ "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+ "dev": true
+ },
+ "html-encoding-sniffer": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
+ "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+ "dev": true,
+ "requires": {
+ "whatwg-encoding": "^2.0.0"
+ }
+ },
+ "http-proxy": {
+ "version": "1.18.1",
+ "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+ "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+ "dev": true,
+ "requires": {
+ "eventemitter3": "^4.0.0",
+ "follow-redirects": "^1.0.0",
+ "requires-port": "^1.0.0"
+ }
+ },
+ "http-server": {
+ "version": "14.1.1",
+ "resolved": "https://registry.npmjs.org/http-server/-/http-server-14.1.1.tgz",
+ "integrity": "sha512-+cbxadF40UXd9T01zUHgA+rlo2Bg1Srer4+B4NwIHdaGxAGGv59nYRnGGDJ9LBk7alpS0US+J+bLLdQOOkJq4A==",
+ "dev": true,
+ "requires": {
+ "basic-auth": "^2.0.1",
+ "chalk": "^4.1.2",
+ "corser": "^2.0.1",
+ "he": "^1.2.0",
+ "html-encoding-sniffer": "^3.0.0",
+ "http-proxy": "^1.18.1",
+ "mime": "^1.6.0",
+ "minimist": "^1.2.6",
+ "opener": "^1.5.1",
+ "portfinder": "^1.0.28",
+ "secure-compare": "3.0.1",
+ "union": "~0.5.0",
+ "url-join": "^4.0.1"
+ }
+ },
+ "iconv-lite": {
+ "version": "0.6.3",
+ "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+ "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+ "dev": true,
+ "requires": {
+ "safer-buffer": ">= 2.1.2 < 3.0.0"
+ }
+ },
+ "lodash": {
+ "version": "4.17.21",
+ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+ "dev": true
+ },
+ "mime": {
+ "version": "1.6.0",
+ "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+ "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+ "dev": true
+ },
+ "minimist": {
+ "version": "1.2.8",
+ "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+ "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+ "dev": true
+ },
+ "mkdirp": {
+ "version": "0.5.6",
+ "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+ "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+ "dev": true,
+ "requires": {
+ "minimist": "^1.2.6"
+ }
+ },
+ "ms": {
+ "version": "2.1.3",
+ "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+ "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+ "dev": true
+ },
+ "object-inspect": {
+ "version": "1.12.3",
+ "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
+ "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
+ "dev": true
+ },
+ "opener": {
+ "version": "1.5.2",
+ "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+ "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+ "dev": true
+ },
+ "portfinder": {
+ "version": "1.0.32",
+ "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
+ "integrity": "sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==",
+ "dev": true,
+ "requires": {
+ "async": "^2.6.4",
+ "debug": "^3.2.7",
+ "mkdirp": "^0.5.6"
+ }
+ },
+ "qs": {
+ "version": "6.11.0",
+ "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+ "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+ "dev": true,
+ "requires": {
+ "side-channel": "^1.0.4"
+ }
+ },
+ "requires-port": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+ "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+ "dev": true
+ },
+ "safe-buffer": {
+ "version": "5.1.2",
+ "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+ "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+ "dev": true
+ },
+ "safer-buffer": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+ "dev": true
+ },
+ "secure-compare": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz",
+ "integrity": "sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw==",
+ "dev": true
+ },
+ "side-channel": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+ "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+ "dev": true,
+ "requires": {
+ "call-bind": "^1.0.0",
+ "get-intrinsic": "^1.0.2",
+ "object-inspect": "^1.9.0"
+ }
+ },
+ "supports-color": {
+ "version": "7.2.0",
+ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+ "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+ "dev": true,
+ "requires": {
+ "has-flag": "^4.0.0"
+ }
+ },
+ "todomvc-app-css": {
+ "version": "2.4.2",
+ "resolved": "https://registry.npmjs.org/todomvc-app-css/-/todomvc-app-css-2.4.2.tgz",
+ "integrity": "sha512-ViAkQ7ed89rmhFIGRsT36njN+97z8+s3XsJnB8E2IKOq+/SLD/6PtSvmTtiwUcVk39qPcjAc/OyeDys4LoJUVg=="
+ },
+ "todomvc-common": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/todomvc-common/-/todomvc-common-1.0.5.tgz",
+ "integrity": "sha512-D8kEJmxVMQIWwztEdH+WeiAfXRbbSCpgXq4NkYi+gduJ2tr8CNq7sYLfJvjpQ10KD9QxJwig57rvMbV2QAESwQ=="
+ },
+ "union": {
+ "version": "0.5.0",
+ "resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz",
+ "integrity": "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==",
+ "dev": true,
+ "requires": {
+ "qs": "^6.4.0"
+ }
+ },
+ "url-join": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz",
+ "integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==",
+ "dev": true
+ },
+ "whatwg-encoding": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
+ "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+ "dev": true,
+ "requires": {
+ "iconv-lite": "0.6.3"
+ }
+ }
+ }
+}
diff --git a/updates/javascript-es5/package.json b/updates/javascript-es5/package.json
new file mode 100644
index 0000000000..ac516bdb93
--- /dev/null
+++ b/updates/javascript-es5/package.json
@@ -0,0 +1,22 @@
+{
+ "name": "todomvc-javascript-es5",
+ "version": "1.0.0",
+ "description": "A TodoMVC written with JavaScript es5 features.",
+ "engines": {
+ "node": ">=18.13.0",
+ "npm": ">=8.19.3"
+ },
+ "private": true,
+ "scripts": {
+ "dev": "http-server ./ -p 7001 -c-1 --cors",
+ "build": "node scripts/build.js",
+ "serve": "http-server ./dist -p 7002 -c-1 --cors"
+ },
+ "dependencies": {
+ "todomvc-app-css": "^2.4.2",
+ "todomvc-common": "^1.0.5"
+ },
+ "devDependencies": {
+ "http-server": "^14.1.1"
+ }
+}
diff --git a/updates/javascript-es5/scripts/build.js b/updates/javascript-es5/scripts/build.js
new file mode 100644
index 0000000000..046de0e7ed
--- /dev/null
+++ b/updates/javascript-es5/scripts/build.js
@@ -0,0 +1,56 @@
+const fs = require("fs").promises;
+const path = require("path");
+
+const rootDirectory = "./";
+const sourceDirectory = "./src";
+const targetDirectory = "./dist";
+
+const htmlFile = "index.html";
+
+const filesToMove = ["node_modules/todomvc-common/base.css", "node_modules/todomvc-app-css/index.css"];
+
+const copy = async (src, dest) => {
+ await fs.copyFile(src, dest);
+};
+
+const build = async () => {
+ // remove dist directory if it exists
+ await fs.rm(targetDirectory, { recursive: true, force: true });
+
+ // re-create the directory.
+ await fs.mkdir(targetDirectory);
+
+ // copy src folder
+ await fs.cp(sourceDirectory, targetDirectory, { recursive: true }, (err) => {
+ if (err)
+ console.error(err);
+ });
+
+ // copy html file
+ await fs.copyFile(path.join(rootDirectory, htmlFile), path.join(targetDirectory, htmlFile));
+
+ // copy files to move
+ for (let i = 0; i < filesToMove.length; i++)
+ await copy(filesToMove[i], path.join(targetDirectory, path.basename(filesToMove[i])));
+
+ // read html file
+ let html = await fs.readFile(path.join(targetDirectory, htmlFile), "utf8");
+
+ // remove base paths from files to move
+ for (let i = 0; i < filesToMove.length; i++) {
+ const basePath = `${filesToMove[i].split("/").slice(0, -1).join("/")}/`;
+ html = html.replace(basePath, "");
+ }
+
+ // remove basePath from source directory
+ const basePath = `${path.basename(sourceDirectory)}/`;
+ const re = new RegExp(basePath, "g");
+ html = html.replace(re, "");
+
+ // write html files
+ await fs.writeFile(`${targetDirectory}/${htmlFile}`, html);
+
+ console.log("done!!");
+};
+
+build();
diff --git a/updates/javascript-es5/src/app.js b/updates/javascript-es5/src/app.js
new file mode 100644
index 0000000000..c4bc5924db
--- /dev/null
+++ b/updates/javascript-es5/src/app.js
@@ -0,0 +1,25 @@
+/* global app, $on */
+(function () {
+ "use strict";
+
+ /**
+ * Sets up a brand new Todo list.
+ *
+ * @param {string} name The name of your new to do list.
+ */
+ function Todo(name) {
+ this.storage = new app.Store(name);
+ this.model = new app.Model(this.storage);
+ this.template = new app.Template();
+ this.view = new app.View(this.template);
+ this.controller = new app.Controller(this.model, this.view);
+ }
+
+ var todo = new Todo("javascript-es5");
+
+ function setView() {
+ todo.controller.setView(document.location.hash);
+ }
+ $on(window, "load", setView);
+ $on(window, "hashchange", setView);
+})();
diff --git a/updates/javascript-es5/src/controller.js b/updates/javascript-es5/src/controller.js
new file mode 100644
index 0000000000..229b19dde9
--- /dev/null
+++ b/updates/javascript-es5/src/controller.js
@@ -0,0 +1,266 @@
+(function (window) {
+ "use strict";
+
+ /**
+ * Takes a model and view and acts as the controller between them
+ *
+ * @constructor
+ * @param {object} model The model instance
+ * @param {object} view The view instance
+ */
+ function Controller(model, view) {
+ var self = this;
+ self.model = model;
+ self.view = view;
+
+ self.view.bind("newTodo", function (title) {
+ self.addItem(title);
+ });
+
+ self.view.bind("itemEdit", function (item) {
+ self.editItem(item.id);
+ });
+
+ self.view.bind("itemEditDone", function (item) {
+ self.editItemSave(item.id, item.title);
+ });
+
+ self.view.bind("itemEditCancel", function (item) {
+ self.editItemCancel(item.id);
+ });
+
+ self.view.bind("itemRemove", function (item) {
+ self.removeItem(item.id);
+ });
+
+ self.view.bind("itemToggle", function (item) {
+ self.toggleComplete(item.id, item.completed);
+ });
+
+ self.view.bind("removeCompleted", function () {
+ self.removeCompletedItems();
+ });
+
+ self.view.bind("toggleAll", function (status) {
+ self.toggleAll(status.completed);
+ });
+ }
+
+ /**
+ * Loads and initialises the view
+ *
+ * @param {string} '' | 'active' | 'completed'
+ */
+ Controller.prototype.setView = function (locationHash) {
+ var route = locationHash.split("/")[1];
+ var page = route || "";
+ this._updateFilterState(page);
+ };
+
+ /**
+ * An event to fire on load. Will get all items and display them in the
+ * todo-list
+ */
+ Controller.prototype.showAll = function () {
+ var self = this;
+ self.model.read(function (data) {
+ self.view.render("showEntries", data);
+ });
+ };
+
+ /**
+ * Renders all active tasks
+ */
+ Controller.prototype.showActive = function () {
+ var self = this;
+ self.model.read({ completed: false }, function (data) {
+ self.view.render("showEntries", data);
+ });
+ };
+
+ /**
+ * Renders all completed tasks
+ */
+ Controller.prototype.showCompleted = function () {
+ var self = this;
+ self.model.read({ completed: true }, function (data) {
+ self.view.render("showEntries", data);
+ });
+ };
+
+ /**
+ * An event to fire whenever you want to add an item. Simply pass in the event
+ * object and it'll handle the DOM insertion and saving of the new item.
+ */
+ Controller.prototype.addItem = function (title) {
+ var self = this;
+
+ if (title.trim() === "")
+ return;
+
+ self.model.create(title, function () {
+ self.view.render("clearNewTodo");
+ self._filter(true);
+ });
+ };
+
+ /*
+ * Triggers the item editing mode.
+ */
+ Controller.prototype.editItem = function (id) {
+ var self = this;
+ self.model.read(id, function (data) {
+ self.view.render("editItem", { id: id, title: data[0].title });
+ });
+ };
+
+ /*
+ * Finishes the item editing mode successfully.
+ */
+ Controller.prototype.editItemSave = function (id, title) {
+ var self = this;
+ title = title.trim();
+
+ if (title.length !== 0) {
+ self.model.update(id, { title: title }, function () {
+ self.view.render("editItemDone", { id: id, title: title });
+ });
+ } else {
+ self.removeItem(id);
+ }
+ };
+
+ /*
+ * Cancels the item editing mode.
+ */
+ Controller.prototype.editItemCancel = function (id) {
+ var self = this;
+ self.model.read(id, function (data) {
+ self.view.render("editItemDone", { id: id, title: data[0].title });
+ });
+ };
+
+ /**
+ * By giving it an ID it'll find the DOM element matching that ID,
+ * remove it from the DOM and also remove it from storage.
+ *
+ * @param {number} id The ID of the item to remove from the DOM and
+ * storage
+ */
+ Controller.prototype.removeItem = function (id) {
+ var self = this;
+ self.model.remove(id, function () {
+ self.view.render("removeItem", id);
+ });
+
+ self._filter();
+ };
+
+ /**
+ * Will remove all completed items from the DOM and storage.
+ */
+ Controller.prototype.removeCompletedItems = function () {
+ var self = this;
+ self.model.read({ completed: true }, function (data) {
+ data.forEach(function (item) {
+ self.removeItem(item.id);
+ });
+ });
+
+ self._filter();
+ };
+
+ /**
+ * Give it an ID of a model and a checkbox and it will update the item
+ * in storage based on the checkbox's state.
+ *
+ * @param {number} id The ID of the element to complete or uncomplete
+ * @param {object} checkbox The checkbox to check the state of complete
+ * or not
+ * @param {boolean|undefined} silent Prevent re-filtering the todo items
+ */
+ Controller.prototype.toggleComplete = function (id, completed, silent) {
+ var self = this;
+ self.model.update(id, { completed: completed }, function () {
+ self.view.render("elementComplete", {
+ id: id,
+ completed: completed,
+ });
+ });
+
+ if (!silent)
+ self._filter();
+ };
+
+ /**
+ * Will toggle ALL checkboxes' on/off state and completeness of models.
+ * Just pass in the event object.
+ */
+ Controller.prototype.toggleAll = function (completed) {
+ var self = this;
+ self.model.read({ completed: !completed }, function (data) {
+ data.forEach(function (item) {
+ self.toggleComplete(item.id, completed, true);
+ });
+ });
+
+ self._filter();
+ };
+
+ /**
+ * Updates the pieces of the page which change depending on the remaining
+ * number of todos.
+ */
+ Controller.prototype._updateCount = function () {
+ var self = this;
+ self.model.getCount(function (todos) {
+ self.view.render("updateElementCount", todos.active);
+ self.view.render("clearCompletedButton", {
+ completed: todos.completed,
+ visible: todos.completed > 0,
+ });
+
+ self.view.render("toggleAll", { checked: todos.completed === todos.total });
+ self.view.render("contentBlockVisibility", { visible: todos.total > 0 });
+ });
+ };
+
+ /**
+ * Re-filters the todo items, based on the active route.
+ * @param {boolean|undefined} force forces a re-painting of todo items.
+ */
+ Controller.prototype._filter = function (force) {
+ var activeRoute = this._activeRoute.charAt(0).toUpperCase() + this._activeRoute.substr(1);
+
+ // Update the elements on the page, which change with each completed todo
+ this._updateCount();
+
+ // If the last active route isn't "All", or we're switching routes, we
+ // re-create the todo item elements, calling:
+ // this.show[All|Active|Completed]();
+ if (force || this._lastActiveRoute !== "All" || this._lastActiveRoute !== activeRoute)
+ this[`show${activeRoute}`]();
+
+ this._lastActiveRoute = activeRoute;
+ };
+
+ /**
+ * Simply updates the filter nav's selected states
+ */
+ Controller.prototype._updateFilterState = function (currentPage) {
+ // Store a reference to the active route, allowing us to re-filter todo
+ // items as they are marked complete or incomplete.
+ this._activeRoute = currentPage;
+
+ if (currentPage === "")
+ this._activeRoute = "All";
+
+ this._filter();
+
+ this.view.render("setFilter", currentPage);
+ };
+
+ // Export to window
+ window.app = window.app || {};
+ window.app.Controller = Controller;
+})(window);
diff --git a/updates/javascript-es5/src/helpers.js b/updates/javascript-es5/src/helpers.js
new file mode 100644
index 0000000000..de93a88f2d
--- /dev/null
+++ b/updates/javascript-es5/src/helpers.js
@@ -0,0 +1,51 @@
+/* global NodeList */
+(function (window) {
+ "use strict";
+
+ // Get element(s) by CSS selector:
+ window.qs = function (selector, scope) {
+ return (scope || document).querySelector(selector);
+ };
+ window.qsa = function (selector, scope) {
+ return (scope || document).querySelectorAll(selector);
+ };
+
+ // addEventListener wrapper:
+ window.$on = function (target, type, callback, useCapture) {
+ target.addEventListener(type, callback, !!useCapture);
+ };
+
+ // Attach a handler to event for all elements that match the selector,
+ // now or in the future, based on a root element
+ window.$delegate = function (target, selector, type, handler) {
+ function dispatchEvent(event) {
+ var targetElement = event.target;
+ var potentialElements = window.qsa(selector, target);
+ var hasMatch = Array.prototype.indexOf.call(potentialElements, targetElement) >= 0;
+
+ if (hasMatch)
+ handler.call(targetElement, event);
+ }
+
+ // https://developer.mozilla.org/en-US/docs/Web/Events/blur
+ var useCapture = type === "blur" || type === "focus";
+
+ window.$on(target, type, dispatchEvent, useCapture);
+ };
+
+ // Find the element's parent with the given tag name:
+ // $parent(qs('a'), 'div');
+ window.$parent = function (element, tagName) {
+ if (!element.parentNode)
+ return undefined;
+
+ if (element.parentNode.tagName.toLowerCase() === tagName.toLowerCase())
+ return element.parentNode;
+
+ return window.$parent(element.parentNode, tagName);
+ };
+
+ // Allow for looping on nodes by chaining:
+ // qsa('.foo').forEach(function () {})
+ NodeList.prototype.forEach = Array.prototype.forEach;
+})(window);
diff --git a/updates/javascript-es5/src/model.js b/updates/javascript-es5/src/model.js
new file mode 100644
index 0000000000..2268fe8539
--- /dev/null
+++ b/updates/javascript-es5/src/model.js
@@ -0,0 +1,119 @@
+(function (window) {
+ "use strict";
+
+ /**
+ * Creates a new Model instance and hooks up the storage.
+ *
+ * @constructor
+ * @param {object} storage A reference to the client side storage class
+ */
+ function Model(storage) {
+ this.storage = storage;
+ }
+
+ /**
+ * Creates a new todo model
+ *
+ * @param {string} [title] The title of the task
+ * @param {function} [callback] The callback to fire after the model is created
+ */
+ Model.prototype.create = function (title, callback) {
+ title = title || "";
+ callback = callback || function () {};
+
+ var newItem = {
+ title: title.trim(),
+ completed: false,
+ };
+
+ this.storage.save(newItem, callback);
+ };
+
+ /**
+ * Finds and returns a model in storage. If no query is given it'll simply
+ * return everything. If you pass in a string or number it'll look that up as
+ * the ID of the model to find. Lastly, you can pass it an object to match
+ * against.
+ *
+ * @param {string|number|object} [query] A query to match models against
+ * @param {function} [callback] The callback to fire after the model is found
+ *
+ * @example
+ * model.read(1, func); // Will find the model with an ID of 1
+ * model.read('1'); // Same as above
+ * //Below will find a model with foo equalling bar and hello equalling world.
+ * model.read({ foo: 'bar', hello: 'world' });
+ */
+ Model.prototype.read = function (query, callback) {
+ var queryType = typeof query;
+ callback = callback || function () {};
+
+ if (queryType === "function") {
+ callback = query;
+ return this.storage.findAll(callback);
+ } else if (queryType === "string" || queryType === "number") {
+ query = parseInt(query, 10);
+ return this.storage.find({ id: query }, callback);
+ } else {
+ return this.storage.find(query, callback);
+ }
+ };
+
+ /**
+ * Updates a model by giving it an ID, data to update, and a callback to fire when
+ * the update is complete.
+ *
+ * @param {number} id The id of the model to update
+ * @param {object} data The properties to update and their new value
+ * @param {function} callback The callback to fire when the update is complete.
+ */
+ Model.prototype.update = function (id, data, callback) {
+ this.storage.save(data, callback, id);
+ };
+
+ /**
+ * Removes a model from storage
+ *
+ * @param {number} id The ID of the model to remove
+ * @param {function} callback The callback to fire when the removal is complete.
+ */
+ Model.prototype.remove = function (id, callback) {
+ this.storage.remove(id, callback);
+ };
+
+ /**
+ * WARNING: Will remove ALL data from storage.
+ *
+ * @param {function} callback The callback to fire when the storage is wiped.
+ */
+ Model.prototype.removeAll = function (callback) {
+ this.storage.drop(callback);
+ };
+
+ /**
+ * Returns a count of all todos
+ */
+ Model.prototype.getCount = function (callback) {
+ var todos = {
+ active: 0,
+ completed: 0,
+ total: 0,
+ };
+
+ this.storage.findAll(function (data) {
+ data.forEach(function (todo) {
+ if (todo.completed)
+ todos.completed++;
+ else
+ todos.active++;
+
+ todos.total++;
+ });
+ callback(todos);
+ });
+ };
+
+ // Export to window
+ window.app = window.app || {};
+ window.app.Model = Model;
+})(window);
diff --git a/updates/javascript-es5/src/store.js b/updates/javascript-es5/src/store.js
new file mode 100644
index 0000000000..2493c12aa2
--- /dev/null
+++ b/updates/javascript-es5/src/store.js
@@ -0,0 +1,146 @@
+/* jshint eqeqeq:false */
+(function (window) {
+ "use strict";
+
+ var MemoryStorage = {};
+ var ID = 1;
+
+ /**
+ * Creates a new client side storage object and will create an empty
+ * collection if no collection already exists.
+ *
+ * @param {string} name The name of our DB we want to use
+ * @param {function} callback Our fake DB uses callbacks because in
+ * real life you probably would be making AJAX calls
+ */
+ function Store(name, callback) {
+ callback = callback || function () {};
+
+ this._dbName = name;
+
+ if (!MemoryStorage[name]) {
+ var data = {
+ todos: [],
+ };
+
+ MemoryStorage[name] = JSON.stringify(data);
+ }
+
+ callback.call(this, JSON.parse(MemoryStorage[name]));
+ }
+
+ /**
+ * Finds items based on a query given as a JS object
+ *
+ * @param {object} query The query to match against (i.e. {foo: 'bar'})
+ * @param {function} callback The callback to fire when the query has
+ * completed running
+ *
+ * @example
+ * db.find({foo: 'bar', hello: 'world'}, function (data) {
+ * // data will return any items that have foo: bar and
+ * // hello: world in their properties
+ * });
+ */
+ Store.prototype.find = function (query, callback) {
+ if (!callback)
+ return;
+
+ var todos = JSON.parse(MemoryStorage[this._dbName]).todos;
+
+ callback.call(
+ this,
+ todos.filter(function (todo) {
+ for (var q in query) {
+ if (query[q] !== todo[q])
+ return false;
+ }
+
+ return true;
+ })
+ );
+ };
+
+ /**
+ * Will retrieve all data from the collection
+ *
+ * @param {function} callback The callback to fire upon retrieving data
+ */
+ Store.prototype.findAll = function (callback) {
+ callback = callback || function () {};
+ callback.call(this, JSON.parse(MemoryStorage[this._dbName]).todos);
+ };
+
+ /**
+ * Will save the given data to the DB. If no item exists it will create a new
+ * item, otherwise it'll simply update an existing item's properties
+ *
+ * @param {object} updateData The data to save back into the DB
+ * @param {function} callback The callback to fire after saving
+ * @param {number} id An optional param to enter an ID of an item to update
+ */
+ Store.prototype.save = function (updateData, callback, id) {
+ var data = JSON.parse(MemoryStorage[this._dbName]);
+ var todos = data.todos;
+
+ callback = callback || function () {};
+
+ // If an ID was actually given, find the item and update each property
+ if (id) {
+ for (var i = 0; i < todos.length; i++) {
+ if (todos[i].id === id) {
+ for (var key in updateData)
+ todos[i][key] = updateData[key];
+
+ break;
+ }
+ }
+
+ MemoryStorage[this._dbName] = JSON.stringify(data);
+ callback.call(this, todos);
+ } else {
+ // Generate an ID
+ updateData.id = ID++;
+
+ todos.push(updateData);
+ MemoryStorage[this._dbName] = JSON.stringify(data);
+ callback.call(this, [updateData]);
+ }
+ };
+
+ /**
+ * Will remove an item from the Store based on its ID
+ *
+ * @param {number} id The ID of the item you want to remove
+ * @param {function} callback The callback to fire after saving
+ */
+ Store.prototype.remove = function (id, callback) {
+ var data = JSON.parse(MemoryStorage[this._dbName]);
+ var todos = data.todos;
+
+ for (var i = 0; i < todos.length; i++) {
+ if (todos[i].id === id) {
+ todos.splice(i, 1);
+ break;
+ }
+ }
+
+ MemoryStorage[this._dbName] = JSON.stringify(data);
+ callback.call(this, todos);
+ };
+
+ /**
+ * Will drop all storage and start fresh
+ *
+ * @param {function} callback The callback to fire after dropping the data
+ */
+ Store.prototype.drop = function (callback) {
+ var data = { todos: [] };
+ MemoryStorage[this._dbName] = JSON.stringify(data);
+ callback.call(this, data.todos);
+ };
+
+ // Export to window
+ window.app = window.app || {};
+ window.app.Store = Store;
+})(window);
diff --git a/updates/javascript-es5/src/template.js b/updates/javascript-es5/src/template.js
new file mode 100644
index 0000000000..fca160f3ba
--- /dev/null
+++ b/updates/javascript-es5/src/template.js
@@ -0,0 +1,111 @@
+/* jshint laxbreak:true */
+(function (window) {
+ "use strict";
+
+ var htmlEscapes = {
+ "&": "&",
+ "<": "<",
+ ">": ">",
+ '"': """,
+ "'": "'",
+ "`": "`",
+ };
+
+ var escapeHtmlChar = function (chr) {
+ return htmlEscapes[chr];
+ };
+
+ var reUnescapedHtml = /[&<>"'`]/g;
+ var reHasUnescapedHtml = new RegExp(reUnescapedHtml.source);
+
+ var escape = function (string) {
+ return string && reHasUnescapedHtml.test(string) ? string.replace(reUnescapedHtml, escapeHtmlChar) : string;
+ };
+
+ /**
+ * Sets up defaults for all the Template methods such as a default template
+ *
+ * @constructor
+ */
+ function Template() {
+ this.defaultTemplate
+ = '
'
+ + '
'
+ + ''
+ + ""
+ + ''
+ + "
"
+ + "
";
+ }
+
+ /**
+ * Creates an
HTML string and returns it for placement in your app.
+ *
+ * NOTE: In real life you should be using a templating engine such as Mustache
+ * or Handlebars, however, this is a vanilla JS example.
+ *
+ * @param {object} data The object containing keys you want to find in the
+ * template to replace.
+ * @returns {string} HTML String of an
element
+ *
+ * @example
+ * view.show({
+ * id: 1,
+ * title: "Hello World",
+ * completed: 0,
+ * });
+ */
+ Template.prototype.show = function (data) {
+ var i, l;
+ var view = "";
+
+ for (i = 0, l = data.length; i < l; i++) {
+ var template = this.defaultTemplate;
+ var completed = "";
+ var checked = "";
+
+ if (data[i].completed) {
+ completed = "completed";
+ checked = "checked";
+ }
+
+ template = template.replace("{{id}}", data[i].id);
+ template = template.replace("{{title}}", escape(data[i].title));
+ template = template.replace("{{completed}}", completed);
+ template = template.replace("{{checked}}", checked);
+
+ view = view + template;
+ }
+
+ return view;
+ };
+
+ /**
+ * Displays a counter of how many to dos are left to complete
+ *
+ * @param {number} activeTodos The number of active todos.
+ * @returns {string} String containing the count
+ */
+ Template.prototype.itemCounter = function (activeTodos) {
+ var plural = activeTodos === 1 ? "" : "s";
+
+ return `${activeTodos} item${plural} left`;
+ };
+
+ /**
+ * Updates the text within the "Clear completed" button
+ *
+ * @param {[type]} completedTodos The number of completed todos.
+ * @returns {string} String containing the count
+ */
+ Template.prototype.clearCompletedButton = function (completedTodos) {
+ if (completedTodos > 0)
+ return "Clear completed";
+ else
+ return "";
+ };
+
+ // Export to window
+ window.app = window.app || {};
+ window.app.Template = Template;
+})(window);
diff --git a/updates/javascript-es5/src/view.js b/updates/javascript-es5/src/view.js
new file mode 100644
index 0000000000..b34323332f
--- /dev/null
+++ b/updates/javascript-es5/src/view.js
@@ -0,0 +1,215 @@
+/* global qs, qsa, $on, $parent, $delegate */
+
+(function (window) {
+ "use strict";
+
+ /**
+ * View that abstracts away the browser's DOM completely.
+ * It has two simple entry points:
+ *
+ * - bind(eventName, handler)
+ * Takes a todo application event and registers the handler
+ * - render(command, parameterObject)
+ * Renders the given command with the options
+ */
+ function View(template) {
+ this.template = template;
+
+ this.ENTER_KEY = 13;
+ this.ESCAPE_KEY = 27;
+
+ this.$todoList = qs(".todo-list");
+ this.$todoItemCounter = qs(".todo-count");
+ this.$clearCompleted = qs(".clear-completed");
+ this.$main = qs(".main");
+ this.$footer = qs(".footer");
+ this.$toggleAllInput = qs(".toggle-all");
+ this.$toggleAll = qs(".toggle-all-label");
+ this.$newTodo = qs(".new-todo");
+ }
+
+ View.prototype._removeItem = function (id) {
+ var elem = qs(`[data-id="${id}"]`);
+
+ if (elem)
+ this.$todoList.removeChild(elem);
+ };
+
+ View.prototype._clearCompletedButton = function (completedCount, visible) {
+ this.$clearCompleted.textContent = this.template.clearCompletedButton(completedCount);
+ this.$clearCompleted.style.display = visible ? "block" : "none";
+ };
+
+ View.prototype._setFilter = function (currentPage) {
+ qs(".filters .selected").className = "";
+ qs(`.filters [href="#/${currentPage}"]`).className = "selected";
+ };
+
+ View.prototype._elementComplete = function (id, completed) {
+ var listItem = qs(`[data-id="${id}"]`);
+
+ if (!listItem)
+ return;
+
+ listItem.className = completed ? "completed" : "";
+
+ // In case it was toggled from an event and not by clicking the checkbox
+ qs("input", listItem).checked = completed;
+ };
+
+ View.prototype._editItem = function (id, title) {
+ var listItem = qs(`[data-id="${id}"]`);
+
+ if (!listItem)
+ return;
+
+ listItem.className = `${listItem.className} editing`;
+
+ var input = document.createElement("input");
+ input.className = "edit";
+
+ listItem.appendChild(input);
+ input.focus();
+ input.value = title;
+ };
+
+ View.prototype._editItemDone = function (id, title) {
+ var listItem = qs(`[data-id="${id}"]`);
+
+ if (!listItem)
+ return;
+
+ var input = qs("input.edit", listItem);
+ listItem.removeChild(input);
+
+ listItem.className = listItem.className.replace("editing", "");
+
+ qsa("label", listItem).forEach(function (label) {
+ label.textContent = title;
+ });
+ };
+
+ View.prototype._replaceContentWithHtml = function (element, html) {
+ const parsedDocument = new DOMParser().parseFromString(html, "text/html");
+ element.replaceChildren(...parsedDocument.body.childNodes);
+ };
+
+ View.prototype.render = function (viewCmd, parameter) {
+ var self = this;
+ var viewCommands = {
+ showEntries: function () {
+ self._replaceContentWithHtml(self.$todoList, self.template.show(parameter));
+ },
+ removeItem: function () {
+ self._removeItem(parameter);
+ },
+ updateElementCount: function () {
+ self._replaceContentWithHtml(self.$todoItemCounter, self.template.itemCounter(parameter));
+ },
+ clearCompletedButton: function () {
+ self._clearCompletedButton(parameter.completed, parameter.visible);
+ },
+ contentBlockVisibility: function () {
+ self.$main.style.display = self.$footer.style.display = parameter.visible ? "block" : "none";
+ },
+ toggleAll: function () {
+ self.$toggleAll.checked = parameter.checked;
+ },
+ setFilter: function () {
+ self._setFilter(parameter);
+ },
+ clearNewTodo: function () {
+ self.$newTodo.value = "";
+ },
+ elementComplete: function () {
+ self._elementComplete(parameter.id, parameter.completed);
+ },
+ editItem: function () {
+ self._editItem(parameter.id, parameter.title);
+ },
+ editItemDone: function () {
+ self._editItemDone(parameter.id, parameter.title);
+ },
+ };
+
+ viewCommands[viewCmd]();
+ };
+
+ View.prototype._itemId = function (element) {
+ var li = $parent(element, "li");
+ return parseInt(li.dataset.id, 10);
+ };
+
+ View.prototype._bindItemEditDone = function (handler) {
+ var self = this;
+ $delegate(self.$todoList, "li .edit", "blur", function () {
+ if (!this.dataset.iscanceled) {
+ handler({
+ id: self._itemId(this),
+ title: this.value,
+ });
+ }
+ });
+
+ $delegate(self.$todoList, "li .edit", "keypress", function (event) {
+ if (event.keyCode === self.ENTER_KEY) {
+ // Remove the cursor from the input when you hit enter just like if it
+ // were a real form
+ this.blur();
+ }
+ });
+ };
+
+ View.prototype._bindItemEditCancel = function (handler) {
+ var self = this;
+ $delegate(self.$todoList, "li .edit", "keyup", function (event) {
+ if (event.keyCode === self.ESCAPE_KEY) {
+ this.dataset.iscanceled = true;
+ this.blur();
+
+ handler({ id: self._itemId(this) });
+ }
+ });
+ };
+
+ View.prototype.bind = function (event, handler) {
+ var self = this;
+ if (event === "newTodo") {
+ $on(self.$newTodo, "change", function () {
+ handler(self.$newTodo.value);
+ });
+ } else if (event === "removeCompleted") {
+ $on(self.$clearCompleted, "click", function () {
+ handler();
+ });
+ } else if (event === "toggleAll") {
+ $on(self.$toggleAll, "click", function () {
+ self.$toggleAllInput.click();
+ handler({ completed: self.$toggleAllInput.checked });
+ });
+ } else if (event === "itemEdit") {
+ $delegate(self.$todoList, "li label", "dblclick", function () {
+ handler({ id: self._itemId(this) });
+ });
+ } else if (event === "itemRemove") {
+ $delegate(self.$todoList, ".destroy", "click", function () {
+ handler({ id: self._itemId(this) });
+ });
+ } else if (event === "itemToggle") {
+ $delegate(self.$todoList, ".toggle", "click", function () {
+ handler({
+ id: self._itemId(this),
+ completed: this.checked,
+ });
+ });
+ } else if (event === "itemEditDone") {
+ self._bindItemEditDone(handler);
+ } else if (event === "itemEditCancel") {
+ self._bindItemEditCancel(handler);
+ }
+ };
+
+ // Export to window
+ window.app = window.app || {};
+ window.app.View = View;
+})(window);