Refactor into ES6 classes, add JSDoc comments and types

.eslintrc.json

@@ -1,16 +1,21 @@
 {
-    "parser": "babel-eslint",
+    "parser": "@typescript-eslint/parser",
     "parserOptions": {
-        "ecmaVersion": 2017,
+        "ecmaVersion": 2020,
         "sourceType": "module",
         "allowImportExportEverywhere": true
     },
     "env": {
         "browser": true,
-        "jasmine": true
+        "jasmine": true,
+        "es6": true
     },
-    "plugins": [],
-    "extends": ["eslint:recommended"],
+    "plugins": ["@typescript-eslint"],
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
     "globals": {
         "Uint8Array": true,
         "Promise": true,
@@ -33,7 +38,7 @@
         "callback-return": "off",
         "camelcase": "off",
         "capitalized-comments": "off",
-        "class-methods-use-this": "error",
+        "class-methods-use-this": "off",
         "comma-dangle": "off",
         "comma-spacing": "off",
         "comma-style": "off",
@@ -179,6 +184,7 @@
         "no-underscore-dangle": "off",
         "no-unmodified-loop-condition": "error",
         "no-unneeded-ternary": "off",
+        "@typescript-eslint/no-unused-vars": "off",
         "no-unused-vars": "off",
         "no-unused-expressions": "off",
         "no-use-before-define": "off",

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "printWidth": 120,
+  "quoteProps": "preserve",
+  "singleQuote": true,
+  "tabWidth": 2
+}

CHANGES.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 2.0.0 (Unreleased)
+
+Breaking changes:
+- Removed the `clone()` method on `Model`.
+
 ## 1.0.0 (Unreleased)
 
 - Fix a race condition when setting a localForage driver

README.md

@@ -13,7 +13,7 @@ and instead start writing declarative, component-based code that automatically
 updates only the changed parts of the DOM, similarly to basically all modern
 JavaScript frameworks.
 
-The original Backbone Views aren't components can't be rendered in a nested and
+The original Backbone Views aren't components and can't be rendered in a nested and
 declarative way. Instead, it's up to you to manually make sure that these views
 are rendered in the correct place in the DOM. This approach becomes unwieldy,
 difficult and fragile as your site becomes larger and more complex.
@@ -41,6 +41,14 @@ We can cheat a little by letting the existing Views also be web components
 (more accurately, "custom elements"), this allows us to declaratively render the
 UI, while we're progressively getting rid of the views.
 
+## Big changes in version 2
+
+We've made big, backwards incompatible changes in version 2.
+
+- Removed the old `View` type
+- Removed the `Router` and `History` classes.
+- TypeScript type declarations (generated from typed JSDoc comments)
+- All other types (`Model`, `Collection`, `ElementView`) are now ES6 classes.
 
 ## Sekeletor adds the following changes to Backbone
 
@@ -56,16 +64,17 @@ UI, while we're progressively getting rid of the views.
   as an instance of HTMLElement and can be used to register a custom element or
   web-component.
 
-![](https://raw.githubusercontent.com/conversejs/skeletor/master/images/skeletor.jpg)
-
 ### Backwards incompatible changes
 
 * Collection.prototype.forEach no longer returns the items being iterated over.
   If you need that, use `map` instead.
-* The `chain` method on Models has been removed.
+* The `chain`, `clone` and `escape` methods on Models have been removed.
+* The `clone` method has also been removed from Collections
 * The `inject`, `foldl` and `foldr` methods on Collections has been removed. You can use `reduce` instead.
 * Removed the `sample`, `take`, `tail` and `initial` method on Collections.
 * Removed the `without`, `reject` and `select` methods on Collections, use `filter`.
+* Removed the `.extend()` method on `Model` and `Collection`.
+* Models and Collections should be defined via `class .. extends` syntax.
 
 #### Changes due to using Lodash instead of Underscore
 

karma.conf.js

@@ -1,8 +1,7 @@
 /* global module */
 const path = require('path');
 
-
-module.exports = function(config) {
+module.exports = function (config) {
   config.set({
     // base path that will be used to resolve all patterns (eg. files, exclude)
     basePath: '',
@@ -14,22 +13,21 @@ module.exports = function(config) {
 
     // list of files / patterns to load in the browser
     files: [
-        'node_modules/lodash/lodash.js',
-        'node_modules/sinon/pkg/sinon.js',
-        'test/vendor/json2.js',
-        'dist/skeletor.js',
-        'test/indexeddb.test.js',
-        'test/localStorage.test.js',
-        'test/sessionStorage.test.js',
+      'node_modules/lodash/lodash.js',
+      'node_modules/sinon/pkg/sinon.js',
+      'test/vendor/json2.js',
+      'dist/skeletor.js',
+      'test/indexeddb.test.js',
+      'test/localStorage.test.js',
+      'test/sessionStorage.test.js',
 
-        'test/setup/dom-setup.js',
-        'test/collection.js',
-        'test/events.js',
-        'test/model.js',
-        'test/noconflict.js',
-        'test/router.js',
-        'test/sync.js',
-        'test/view.js',
+      'test/setup/dom-setup.js',
+      'test/collection.js',
+      'test/events.js',
+      'test/model.js',
+      'test/noconflict.js',
+      'test/router.js',
+      'test/sync.js',
     ],
 
     // list of files to exclude
@@ -40,37 +38,42 @@ module.exports = function(config) {
     preprocessors: {
       'test/indexeddb.test.js': ['webpack'],
       'test/localStorage.test.js': ['webpack'],
-      'test/sessionStorage.test.js': ['webpack']
+      'test/sessionStorage.test.js': ['webpack'],
     },
     webpack: {
       mode: 'development',
       devtool: 'inline-source-map',
       module: {
-         rules: [{
-           test: /\.js$/,
-           use: {
-             loader: 'babel-loader',
-             options: {
-               presets: [
-                 ["@babel/preset-env", {
-                     "targets": {
-                         "browsers": [">1%", "not ie 11", "not op_mini all", "not dead"]
-                     }
-                 }]
-               ],
-               plugins: [
+        rules: [
+          {
+            test: /\.js$/,
+            use: {
+              loader: 'babel-loader',
+              options: {
+                presets: [
+                  [
+                    '@babel/preset-env',
+                    {
+                      'targets': {
+                        'browsers': ['>1%', 'not ie 11', 'not op_mini all', 'not dead'],
+                      },
+                    },
+                  ],
+                ],
+                plugins: [
                   '@babel/plugin-proposal-optional-chaining',
-                  '@babel/plugin-proposal-nullish-coalescing-operator'
-               ]
-             }
-           }
-         }]
+                  '@babel/plugin-proposal-nullish-coalescing-operator',
+                ],
+              },
+            },
+          },
+        ],
       },
       output: {
         path: path.resolve('test'),
         filename: '[name].out.js',
-        chunkFilename: '[id].[chunkHash].js'
-      }
+        chunkFilename: '[id].[chunkHash].js',
+      },
     },
 
     // test results reporter to use
@@ -80,8 +83,8 @@ module.exports = function(config) {
     client: {
       mocha: {
         reporter: 'html',
-        ui: 'bdd'
-      }
+        ui: 'bdd',
+      },
     },
 
     // web server port
@@ -107,6 +110,6 @@ module.exports = function(config) {
 
     // Concurrency level
     // how many browser should be started simultaneous
-    concurrency: Infinity
-  })
-}
+    concurrency: Infinity,
+  });
+};