diff --git a/.babelrc b/.babelrc
index c13c5f6..a29ac99 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,3 +1,5 @@
{
- "presets": ["es2015"]
+ "presets": [
+ "@babel/preset-env"
+ ]
}
diff --git a/.eslintrc b/.eslintrc
deleted file mode 100644
index 415928e..0000000
--- a/.eslintrc
+++ /dev/null
@@ -1,55 +0,0 @@
-{
- "env": {
- "browser": true,
- "jquery": true,
- "node": true
- },
-
- "parserOptions": {
- "ecmaVersion": 6,
- "sourceType": "module"
- },
- "globals": {
- "require": true,
- "define": true
- },
- "rules": {
- "no-bitwise": 2,
- "camelcase": 0,
- "curly": 2,
- "eqeqeq": 2,
- "wrap-iife": [
- 2,
- "any"
- ],
- "no-use-before-define": [
- 2,
- {
- "functions": false
- }
- ],
- "comma-style": [
- 2,
- "last"
- ],
- "max-len": [
- 2,
- {
- "code": 80,
- "ignoreComments": true
- }
- ],
- "new-cap": 2,
- "no-caller": 2,
- "quotes": [
- 2,
- "single"
- ],
- "no-undef": 2,
- "no-unused-vars": 2,
- "strict": [
- 2,
- "function"
- ]
- }
-}
diff --git a/.gitignore b/.gitignore
index da592f8..c78c022 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
node_modules
.DS_Store
dist
+.vscode
\ No newline at end of file
diff --git a/.jsdoc b/.jsdoc
index 31f5be8..67c0c74 100644
--- a/.jsdoc
+++ b/.jsdoc
@@ -4,7 +4,7 @@
"destination": "docs",
"readme": "README.md",
"tutorials": "tutorials",
- "template": "node_modules/minami"
+ "template": "templates/default"
},
"templates": {
"cleverLinks": true,
diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 0000000..593cb75
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+20.16.0
\ No newline at end of file
diff --git a/README.md b/README.md
index ce8e679..1077443 100644
--- a/README.md
+++ b/README.md
@@ -12,16 +12,16 @@ Lateralus is built upon Backbone, Lodash, jQuery, and Mustache.
The standard build of Lateralus does not have its dependencies baked, so you must provide them at runtime. Lateralus expects and is tested with:
- * [Backbone](http://backbonejs.org/) 1.3.3
- * [lodash-compat](https://www.npmjs.com/package/lodash-compat) 3.10.2
- * [jQuery](http://jquery.com/) 1.12.4
- * [Mustache](https://github.com/janl/mustache.js/) 0.8.2
+* [Backbone](http://backbonejs.org/) 1.6.0
+* [lodash-compat](https://www.npmjs.com/package/lodash-compat) 3.10.2
+* [jQuery](http://jquery.com/) 3.7.1
+* [Mustache](https://github.com/janl/mustache.js/) 4.2.0
## Installation
To install Lateralus into an existing app:
-````
+````shell
npm install --save lateralus
````
@@ -29,7 +29,7 @@ npm install --save lateralus
You can run the Lateralus unit tests both in your browser as well as in a command line environment. To run the tests in your browser:
-```
+```shell
npm run start
```
@@ -37,7 +37,7 @@ And then navigate to http://127.0.0.1:8080/test/.
To run them at the command line:
-```
+```shell
npm test
```
@@ -45,10 +45,11 @@ npm test
Once things are ready, you should use `npm version`.
This will:
- - change the version in the `package.json` file.
- - build the documentation (with the new version).
- - commit the new documentation
- - tag the new version
- - push to the repo.
+
+* change the version in the `package.json` file.
+* build the documentation (with the new version).
+* commit the new documentation
+* tag the new version
+* push to the repo.
Once this is done, Travis will publish the change to NPM.
diff --git a/changelog.md b/changelog.md
index ffb80a3..4714fa2 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,135 +1,135 @@
-# 1.0.0
+## 1.0.0
- * Upgrade to jQuery to 1.12.4, Backbone to 1.3.3, and drop Underscore for Lodash
- * Drop Grunt for npm scripts
- * Drop Bower for npm
- * Frop YUIDoc for JSDoc
- * Drop PhantomJS test runner infrastructure for mocha CLI
- * Drop RequireJS build tool for Webpack
- * Drop AMD module format for ES6 (with UMD wrapped build artifacts)
- * Rename scripts/ to src/
- * Untrack dist from source control
- * Convert to comma-last formatting
+* Upgrade to jQuery to 1.12.4, Backbone to 1.3.3, and drop Underscore for Lodash
+* Drop Grunt for npm scripts
+* Drop Bower for npm
+* Frop YUIDoc for JSDoc
+* Drop PhantomJS test runner infrastructure for mocha CLI
+* Drop RequireJS build tool for Webpack
+* Drop AMD module format for ES6 (with UMD wrapped build artifacts)
+* Rename scripts/ to src/
+* Untrack dist from source control
+* Convert to comma-last formatting
-# 0.9.1
+## 0.9.1
- * Add support for Lodash 3.10.1
+* Add support for Lodash 3.10.1
-# 0.9.0
+## 0.9.0
- * Add memory management utilities:
- * Lateralus.Component.Model#destroy
- * Lateralus.Component.Model#dispose
- * Lateralus.Component.Collection#remove
+* Add memory management utilities:
+ * Lateralus.Component.Model#destroy
+ * Lateralus.Component.Model#dispose
+ * Lateralus.Component.Collection#remove
-# 0.8.0
+## 0.8.0
- * Implement provide, collect and collectOne.
+* Implement provide, collect and collectOne.
-# 0.7.1
+## 0.7.1
- * Fix issue around inadvertently modifying Lateralus core prototypes.
+* Fix issue around inadvertently modifying Lateralus core prototypes.
-# 0.7.0
+## 0.7.0
- * Add capability to use a custom Lateralus.Model subclass.
+* Add capability to use a custom Lateralus.Model subclass.
-# 0.6.0
+## 0.6.0
- * Add mixins.amplify.
- * Add Lateralus.prototype.dispose.
- * Lateralus.Component#dispose triggers "beforeDispose" event.
- * Extend Lateralus.Component.Model from Backbone.Model, not Lateralus.Model.
- * Bug fixes.
+* Add mixins.amplify.
+* Add Lateralus.prototype.dispose.
+* Lateralus.Component#dispose triggers "beforeDispose" event.
+* Extend Lateralus.Component.Model from Backbone.Model, not Lateralus.Model.
+* Bug fixes.
-# 0.5.0
+## 0.5.0
- * Add Lateralus.Router.
- * Set up testing infrastructure and some tests/
- * Prevent redundant global model change events.
+* Add Lateralus.Router.
+* Set up testing infrastructure and some tests/
+* Prevent redundant global model change events.
-# 0.4.0
+## 0.4.0
- * Emit events for all Lateralus.Model attribute changes.
- * Add modelEvents map support to delegateLateralusEvents.
- * Expose LateralusModel as Lateralus.Model.
- * Add globalRenderData map.
- * Add globalPartials map.
- * Make generator-lateralus configurable.
- * Drop @protected JSDoc annotation from most members that have it.
+* Emit events for all Lateralus.Model attribute changes.
+* Add modelEvents map support to delegateLateralusEvents.
+* Expose LateralusModel as Lateralus.Model.
+* Add globalRenderData map.
+* Add globalPartials map.
+* Make generator-lateralus configurable.
+* Drop @protected JSDoc annotation from most members that have it.
-# 0.3.1
+## 0.3.1
- * Add missing jQuery reference.
+* Add missing jQuery reference.
-# 0.3.0
+## 0.3.0
- * Improve generator-lateralus. Added Grunt tasks:
- * grunt-gh-pages
- * grunt-bump
- * grunt-rev
- * Move "mixin" method to the mixins object.
- * Add support for templatePartials map.
+* Improve generator-lateralus. Added Grunt tasks:
+ * grunt-gh-pages
+ * grunt-bump
+ * grunt-rev
+* Move "mixin" method to the mixins object.
+* Add support for templatePartials map.
-# 0.2.0
+## 0.2.0
- * Convert Component#delegateEvents to mixins.delegateLateralusEvents.
- * Remove Component.events map support.
- * Add mixin.initModel and mixin.initCollection.
- * Add Component.Collection.
- * Add Component.prototype.dispose.
- * Add Component.View deferredInitialize hook.
+* Convert Component#delegateEvents to mixins.delegateLateralusEvents.
+* Remove Component.events map support.
+* Add mixin.initModel and mixin.initCollection.
+* Add Component.Collection.
+* Add Component.prototype.dispose.
+* Add Component.View deferredInitialize hook.
-# 0.1.0
+## 0.1.0
- * Consolidate ComponentModel and LateralusModel.
- * Properly mix in mixins module to all other modules.
- * Fix build process.
- * Remove _super.
+* Consolidate ComponentModel and LateralusModel.
+* Properly mix in mixins module to all other modules.
+* Fix build process.
+* Remove _super.
-# 0.0.7
+## 0.0.7
- * Don't attach View constructor classnames for subviews.
- * Deprecate _super.
- * Add Component.prototype.delegateEvents, and events and lateralusEvents
- maps.
- * Add opt_base parameter to _super.
- * Introduce Lateralus.Model.
+* Don't attach View constructor classnames for subviews.
+* Deprecate \_super.
+* Add Component.prototype.delegateEvents, and events and lateralusEvents
+ maps.
+* Add opt_base parameter to \_super.
+* Introduce Lateralus.Model.
-# 0.0.6
+## 0.0.6
- * Introduce Lateralus.Component.Model.
- * Add support for providing a component-level Model constructor to Views.
+* Introduce Lateralus.Component.Model.
+* Add support for providing a component-level Model constructor to Views.
-# 0.0.5
+## 0.0.5
- * Adds listenFor mixin method.
- * Makes Lateralus#toString @final.
- * Make Lateralus.Component.View#getTemplateRenderData return model data.
+* Adds listenFor mixin method.
+* Makes Lateralus#toString @final.
+* Make Lateralus.Component.View#getTemplateRenderData return model data.
-# 0.0.4
+## 0.0.4
- * Adds displayName to beget constructor.
- * generator-lateralus sets up ContainerComponent.
+* Adds displayName to beget constructor.
+* generator-lateralus sets up ContainerComponent.
-# 0.0.3
+## 0.0.3
- * Don't append subcomponents when they are added.
- * Get rid of the $appendTo option parameter for addComponent.
- * If a Lateralus.Component.View has a className defined on the prototype,
- attach it to $el in the initialize method.
- * generator-lateralus creates styles/main.sass for new components.
- * Add Lateralus#(log|warn|error) methods.
+* Don't append subcomponents when they are added.
+* Get rid of the $appendTo option parameter for addComponent.
+* If a Lateralus.Component.View has a className defined on the prototype,
+ attach it to $el in the initialize method.
+* generator-lateralus creates styles/main.sass for new components.
+* Add Lateralus#(log|warn|error) methods.
-# 0.0.2
+## 0.0.2
- * Lateralus.Component no longer requires a View parameter.
- * All protoProps properties are mixed into the Lateralus.Component subclass
- by Lateralus.Component.extend.
- * Adds options parameter to Lateralus.Component constructor and passes it to
- initialize function.
- * Adds build tasks and provides compiled binaries in dist/.
+* Lateralus.Component no longer requires a View parameter.
+* All protoProps properties are mixed into the Lateralus.Component subclass
+ by Lateralus.Component.extend.
+* Adds options parameter to Lateralus.Component constructor and passes it to
+ initialize function.
+* Adds build tasks and provides compiled binaries in dist/.
-# 0.0.1
+## 0.0.1
Initial open source release.
diff --git a/docs/Lateralus.Component.Collection.html b/docs/Lateralus.Component.Collection.html
index 0fa2ba1..3e47b5c 100644
--- a/docs/Lateralus.Component.Collection.html
+++ b/docs/Lateralus.Component.Collection.html
@@ -2,35 +2,22 @@
-
- Collection - Documentation
+ JSDoc: Class: Collection
-
-
+
+
-
-
-
-
-
-
-
-
+
provideA map of functions that will handle Lateralus.mixins#collect
calls. Each of the functions attached to this Object should return a
value. These functions must be completely synchronous.
-
provideA map of functions that will handle Lateralus.mixins#collect
calls. Each of the functions attached to this Object should return a
value. These functions must be completely synchronous.
-
provideA map of functions that will handle Lateralus.mixins#collect
calls. Each of the functions attached to this Object should return a
value. These functions must be completely synchronous.
-
The subcomponents belonging to this object. Do not modify this
-property directly, it is managed by Lateralus.
+
The Lateralus.Component.View constructor to use, if any. If
+this Lateralus.Component is intended to render to the DOM,
+View should be defined on the prototype before instantiating:
provideA map of functions that will handle Lateralus.mixins#collect
calls. Each of the functions attached to this Object should return a
value. These functions must be completely synchronous.
-
The Lateralus.Component.View constructor to use, if any. If
-this Lateralus.Component is intended to render to the DOM,
-View should be defined on the prototype before instantiating:
The optional Lateralus.Component.Model to be provided to protoProps.View when it is
-instantiated. This does nothing if protoProps.View is not defined.
-
-
+
The optional Lateralus.Component.Model to be provided to protoProps.View when it is
+instantiated. This does nothing if protoProps.View is not defined.
provideA map of functions that will handle Lateralus.mixins#collect
calls. Each of the functions attached to this Object should return a
value. These functions must be completely synchronous.
-
provideA map of functions that will handle Lateralus.mixins#collect
calls. Each of the functions attached to this Object should return a
value. These functions must be completely synchronous.
-
provideA map of functions that will handle Lateralus.mixins#collect
calls. Each of the functions attached to this Object should return a
value. These functions must be completely synchronous.
-
A map of functions that will handle Lateralus.mixins#collect
calls. Each of the functions attached to this Object should return a
value. These functions must be completely synchronous.
Merge the properties of another object into this object. If the mixin
-configuration object has a method called initialize, it is called in the
-context of the object calling this function.
Merge the properties of another object into this object. If the mixin
+configuration object has a method called initialize, it is called in the
+context of the object calling this function.
+
+
-
-
+
+
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 7ae46a4..d227fdd 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -2,39 +2,32 @@
-
- Home - Documentation
+ JSDoc: Home
-
-
+
+
-
+
-
-
+
-
+
Home
-
-
-
+
+
+
-
@@ -47,23 +40,36 @@
-
-
Lateralus
+
+
+
+
Lateralus
+
Lateralus is a single page web application framework. It is designed around the idea that UIs should be divided into discreet, reusable, loosely-coupled components. These components should communicate only indirectly and be easily swappable or removable. Lateralus provides patterns and utilities to cleanly isolate individual components of your app.
Lateralus is built upon Backbone, Lodash, jQuery, and Mustache.
import _ from 'lodash-compat';
import Backbone from 'backbone';
-import mixins from './lateralus.mixins';
-import ComponentView from './lateralus.component.view';
-import ComponentModel from './lateralus.component.model';
-import ComponentCollection from './lateralus.component.collection';
+import mixins from './lateralus.mixins.js';
+import ComponentView from './lateralus.component.view.js';
+import ComponentModel from './lateralus.component.model.js';
+import ComponentCollection from './lateralus.component.collection.js';
/**
* The constructor for this method should not be called directly. Instead, use
@@ -285,13 +272,17 @@
import $ from 'jquery';
+window.$ = $;
import _ from 'lodash-compat';
import Backbone from 'backbone';
-import mixins from './lateralus.mixins';
-import Component from './lateralus.component';
-import LateralusModel from './lateralus.model';
-import LateralusRouter from './lateralus.router';
+import mixins from './lateralus.mixins.js';
+import Component from './lateralus.component.js';
+import LateralusModel from './lateralus.model.js';
+import LateralusRouter from './lateralus.router.js';
// UNDERSCORE MIXINS
_.mixin({
@@ -269,10 +257,7 @@
lateralus.js
Lateralus.Model = LateralusModel;
Lateralus.Router = LateralusRouter;
-// Using the old-school CommonJS export format here for better
-// backwards-compatibility:
-// https://github.com/webpack/webpack/issues/3929
-module.exports = Lateralus;
+export default Lateralus;
The primary class used within the framework to define UI components. Typically, a component encompasses a Lateralus.Component.View and a template (though these are not required).
The primary class used within the framework to define UI components. Typically, a component encompasses a Lateralus.Component.View and a template (though these are not required).
A component is distinct from a view. A view is a graphical, interactive representation of a model. A component represents all of the interrelated parts of significant, individual part of the UI. This usually includes one or more Views, a template, a Model, and anything else a UI component needs to function. A component is a higher-level abstraction than a View.
This is the standard directory structure for a typical component:
main.js is the main entry point for the component and defines the Lateralus.Component instance. view.js defines the primary Lateralus.Component.View instance, and template.mustache is the primary DOM template. All components should adhere to this directory structure, but you are also free change the directory structure to suit your needs. If you do this, you will need to update the dependency paths in your component's AMD modules.
+ template.mustache
+
+
main.js is the main entry point for the component and defines the Lateralus.Component instance. view.js defines the primary Lateralus.Component.View instance, and template.mustache is the primary DOM template. All components should adhere to this directory structure, but you are also free change the directory structure to suit your needs. If you do this, you will need to update the dependency paths in your component's AMD modules.
Note: The styles/main.sass file is not @imported for you automatically in your main Sass file, you will need to do that manually when you set up a new component.
-
Templates
Lateralus uses Mustache.js for its templating engine. Components that render something have at least one template associated with them as this.template.
+
Templates
+
Lateralus uses Mustache.js for its templating engine. Components that render something have at least one template associated with them as this.template.
Each component can (and should) have its own .sass file. It is recommended that all rules be nested under the [component-name]-view CSS class, as that class is dynamically added to all Lateralus.Component.View instances. This provides clean and easy component-based style isolation.
+
Component styles
+
Each component can (and should) have its own .sass file. It is recommended that all rules be nested under the [component-name]-view CSS class, as that class is dynamically added to all Lateralus.Component.View instances. This provides clean and easy component-based style isolation.
-
Working with components
Building upon the previous example:
+
Working with components
+
Building upon the previous example:
require(['lateralus', 'app.component.my-component'],
function (Lateralus, MyComponent) {
@@ -132,20 +141,26 @@
Working with components
Building upon the previous example:
var app = new App(document.getElementById('app'));
app.addComponent(MyComponent);
-});
Much of the Lateralus workflow involves creating and wiring up components. The majority of code in a Lateralus app should be handled by components, everything outside of component code should focus on glueing them together and providing utilities.
+});
+
+
Much of the Lateralus workflow involves creating and wiring up components. The majority of code in a Lateralus app should be handled by components, everything outside of component code should focus on glueing them together and providing utilities.
+
+
-
-
+
+
\ No newline at end of file
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 0000000..c618d98
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,50 @@
+import stylisticJs from "@stylistic/eslint-plugin-js";
+import { includeIgnoreFile } from "@eslint/compat";
+import globals from "globals";
+import path from 'node:path';
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const gitignorePath = path.resolve(__dirname, ".gitignore");
+
+export default [
+ includeIgnoreFile(gitignorePath),
+ {
+ plugins: {
+ "@stylistic/js": stylisticJs,
+ },
+ languageOptions: {
+ globals: {
+ ...globals.browser,
+ ...globals.jquery,
+ ...globals.node,
+ require: "writable",
+ define: "writable",
+ },
+ ecmaVersion: 6,
+ sourceType: "module",
+ },
+ rules: {
+ "no-bitwise": "error",
+ camelcase: "off",
+ curly: "error",
+ eqeqeq: "error",
+ "@stylistic/js/wrap-iife": ["error", "any"],
+ "no-use-before-define": ["error", {
+ functions: false,
+ }],
+ "@stylistic/js/comma-style": ["error", "last"],
+ "@stylistic/js/max-len": ["error", {
+ code: 80,
+ ignoreComments: true,
+ }],
+ "new-cap": "error",
+ "no-caller": "error",
+ "@stylistic/js/quotes": ["error", "single"],
+ "no-undef": "error",
+ "no-unused-vars": "error",
+ strict: ["error", "function"],
+ },
+ }
+];
\ No newline at end of file
diff --git a/package.json b/package.json
index 35644d8..0ede72b 100644
--- a/package.json
+++ b/package.json
@@ -4,18 +4,19 @@
"description": "A UI component framework",
"license": "MIT",
"main": "dist/lateralus.js",
+ "type": "module",
"author": {
"name": "Jeremy Kahn",
"email": "jeremy@jellyvision.com",
"url": "https://github.com/jeremyckahn"
},
"scripts": {
- "start": "webpack-dev-server --config webpack.test.config.js",
- "build": "webpack",
- "debug": "mocha debug -r jsdom-global/register ./node_modules/babel-core/register.js test/index.js",
- "test": "mocha -r jsdom-global/register ./node_modules/babel-core/register.js test/index.js",
+ "start": "webpack serve --open --config webpack.test.config.cjs",
+ "build": "webpack --config webpack.config.cjs",
+ "debug": "mocha --require @babel/register debug -r jsdom-global/register test/index.js",
+ "test": "mocha --require @babel/register -r jsdom-global/register test/index.js",
"test:watch": "nodemon --exec \"npm test\" --watch src --watch test",
- "lint": "eslint -c .eslintrc src test",
+ "lint": "eslint -c eslint.config.mjs src test",
"validate": "npm test && npm run lint",
"doc": "jsdoc -c .jsdoc src/*.js",
"setup": "npm install",
@@ -29,28 +30,33 @@
"node": ">=6.7.0"
},
"dependencies": {
- "backbone": "~1.3.3",
- "jquery": "~1.12.4",
+ "backbone": "~1.6.0",
+ "jquery": "^3.7.1",
"lodash-compat": "~3.10.2",
- "mustache": "~0.8.2"
+ "mustache": "~4.2.0"
},
"repository": {
"type": "git",
"url": "https://github.com/jellyvision/lateralus.git"
},
"devDependencies": {
- "babel-core": "^6.24.1",
- "babel-loader": "^7.0.0",
- "babel-preset-es2015": "^6.24.1",
- "chai": "~2.1.1",
- "eslint": "^3.19.0",
- "jsdoc": "^3.4.3",
- "jsdom": "^10.1.0",
+ "@babel/core": "^7.25.2",
+ "@babel/preset-env": "^7.25.3",
+ "@babel/register": "^7.24.6",
+ "@eslint/compat": "^1.1.1",
+ "@stylistic/eslint-plugin-js": "^2.6.2",
+ "babel-loader": "^9.1.3",
+ "chai": "~5.1.1",
+ "eslint": "^9.8.0",
+ "globals": "^15.9.0",
+ "jsdoc": "^4.0.3",
+ "jsdom": "^24.1.1",
"jsdom-global": "^3.0.2",
- "minami": "^1.2.3",
- "mocha": "~2.2.0",
- "nodemon": "^1.11.0",
- "webpack": "^2.5.1",
- "webpack-dev-server": "^2.4.5"
+ "mocha": "~10.7.0",
+ "nodemon": "^3.1.4",
+ "webpack": "^5.93.0",
+ "webpack-cli": "^5.1.4",
+ "webpack-dev-server": "^5.0.4",
+ "webpack-merge": "^6.0.1"
}
}
diff --git a/src/lateralus.component.collection.js b/src/lateralus.component.collection.js
index 1201fe8..ab1ae40 100644
--- a/src/lateralus.component.collection.js
+++ b/src/lateralus.component.collection.js
@@ -1,6 +1,6 @@
import _ from 'lodash-compat';
import Backbone from 'backbone';
-import mixins from './lateralus.mixins';
+import mixins from './lateralus.mixins.js';
const Base = Backbone.Collection;
const baseProto = Base.prototype;
diff --git a/src/lateralus.component.js b/src/lateralus.component.js
index 5d0a181..0698465 100644
--- a/src/lateralus.component.js
+++ b/src/lateralus.component.js
@@ -1,9 +1,9 @@
import _ from 'lodash-compat';
import Backbone from 'backbone';
-import mixins from './lateralus.mixins';
-import ComponentView from './lateralus.component.view';
-import ComponentModel from './lateralus.component.model';
-import ComponentCollection from './lateralus.component.collection';
+import mixins from './lateralus.mixins.js';
+import ComponentView from './lateralus.component.view.js';
+import ComponentModel from './lateralus.component.model.js';
+import ComponentCollection from './lateralus.component.collection.js';
/**
* The constructor for this method should not be called directly. Instead, use
diff --git a/src/lateralus.component.model.js b/src/lateralus.component.model.js
index 05b4946..284c98d 100644
--- a/src/lateralus.component.model.js
+++ b/src/lateralus.component.model.js
@@ -1,6 +1,6 @@
import _ from 'lodash-compat';
import Backbone from 'backbone';
-import mixins from './lateralus.mixins';
+import mixins from './lateralus.mixins.js';
const Base = Backbone.Model;
const baseProto = Base.prototype;
diff --git a/src/lateralus.component.view.js b/src/lateralus.component.view.js
index cd90a82..61b1671 100644
--- a/src/lateralus.component.view.js
+++ b/src/lateralus.component.view.js
@@ -2,7 +2,7 @@ import $ from 'jquery';
import _ from 'lodash-compat';
import Backbone from 'backbone';
import Mustache from 'mustache';
-import mixins from './lateralus.mixins';
+import mixins from './lateralus.mixins.js';
const fn = {};
diff --git a/src/lateralus.js b/src/lateralus.js
index 90659e9..1047e2f 100644
--- a/src/lateralus.js
+++ b/src/lateralus.js
@@ -1,10 +1,11 @@
import $ from 'jquery';
+window.$ = $;
import _ from 'lodash-compat';
import Backbone from 'backbone';
-import mixins from './lateralus.mixins';
-import Component from './lateralus.component';
-import LateralusModel from './lateralus.model';
-import LateralusRouter from './lateralus.router';
+import mixins from './lateralus.mixins.js';
+import Component from './lateralus.component.js';
+import LateralusModel from './lateralus.model.js';
+import LateralusRouter from './lateralus.router.js';
// UNDERSCORE MIXINS
_.mixin({
@@ -228,7 +229,4 @@ Lateralus.Component = Component;
Lateralus.Model = LateralusModel;
Lateralus.Router = LateralusRouter;
-// Using the old-school CommonJS export format here for better
-// backwards-compatibility:
-// https://github.com/webpack/webpack/issues/3929
-module.exports = Lateralus;
+export default Lateralus;
diff --git a/src/lateralus.model.js b/src/lateralus.model.js
index 21e9d8c..e6dc224 100644
--- a/src/lateralus.model.js
+++ b/src/lateralus.model.js
@@ -1,6 +1,6 @@
import _ from 'lodash-compat';
import Backbone from 'backbone';
-import mixins from './lateralus.mixins';
+import mixins from './lateralus.mixins.js';
const fn = {};
diff --git a/src/lateralus.router.js b/src/lateralus.router.js
index 9a38ffa..7ebed90 100644
--- a/src/lateralus.router.js
+++ b/src/lateralus.router.js
@@ -1,6 +1,6 @@
import _ from 'lodash-compat';
import Backbone from 'backbone';
-import mixins from './lateralus.mixins';
+import mixins from './lateralus.mixins.js';
const fn = {};
diff --git a/test/index.js b/test/index.js
index 80e3102..aaa94a2 100644
--- a/test/index.js
+++ b/test/index.js
@@ -1,5 +1,5 @@
-import './spec/lateralus';
-import './spec/lateralus.model';
-import './spec/lateralus.component';
-import './spec/lateralus.component.model';
-import './spec/lateralus.component.collection';
+import './spec/lateralus.js';
+import './spec/lateralus.model.js';
+import './spec/lateralus.component.js';
+import './spec/lateralus.component.model.js';
+import './spec/lateralus.component.collection.js';
diff --git a/test/spec/lateralus.component.collection.js b/test/spec/lateralus.component.collection.js
index 3ae19c6..0f0df25 100644
--- a/test/spec/lateralus.component.collection.js
+++ b/test/spec/lateralus.component.collection.js
@@ -1,9 +1,9 @@
-import chai from 'chai';
-import Backbone from 'backbone';
-import Lateralus from '../../src/lateralus';
-import { getLateralusApp } from '../utils';
+/* eslint-disable no-undef */
-const assert = chai.assert;
+import { assert } from 'chai';
+import Backbone from 'backbone';
+import Lateralus from '../../src/lateralus.js';
+import { getLateralusApp } from '../utils.js';
describe('Lateralus.Component.Collection', function () {
describe('constructor', function () {
diff --git a/test/spec/lateralus.component.js b/test/spec/lateralus.component.js
index d60f854..1520c36 100644
--- a/test/spec/lateralus.component.js
+++ b/test/spec/lateralus.component.js
@@ -1,9 +1,9 @@
-import chai from 'chai';
-import _ from 'lodash-compat';
-import Lateralus from '../../src/lateralus';
-import { getLateralusApp } from '../utils';
+/* eslint-disable no-undef */
-const assert = chai.assert;
+import { assert } from 'chai';
+import _ from 'lodash-compat';
+import Lateralus from '../../src/lateralus.js';
+import { getLateralusApp } from '../utils.js';
describe('Lateralus.Component', function () {
describe('Prototype', function () {
@@ -56,9 +56,9 @@ describe('Lateralus.Component', function () {
assert.isTrue(testWasCalled);
});
- /*eslint-disable max-len */
+ /*eslint-disable @stylistic/js/max-len */
it('Inherits lateralusEvents from a parent component that also provides values',
- /*eslint-enable max-len */
+ /*eslint-enable @stylistic/js/max-len */
function () {
const App = getLateralusApp();
const app = new App();
diff --git a/test/spec/lateralus.component.model.js b/test/spec/lateralus.component.model.js
index facf28e..7d34d85 100644
--- a/test/spec/lateralus.component.model.js
+++ b/test/spec/lateralus.component.model.js
@@ -1,9 +1,9 @@
-import chai from 'chai';
-import Backbone from 'backbone';
-import Lateralus from '../../src/lateralus';
-import { getLateralusApp } from '../utils';
+/* eslint-disable no-undef */
-const assert = chai.assert;
+import { assert } from 'chai';
+import Backbone from 'backbone';
+import Lateralus from '../../src/lateralus.js';
+import { getLateralusApp } from '../utils.js';
describe('Lateralus.Component.Model', function () {
describe('constructor', function () {
diff --git a/test/spec/lateralus.js b/test/spec/lateralus.js
index bf61af5..8b3a65a 100644
--- a/test/spec/lateralus.js
+++ b/test/spec/lateralus.js
@@ -1,10 +1,10 @@
-import chai from 'chai';
+/* eslint-disable no-undef */
+
+import { assert } from 'chai';
import _ from 'lodash-compat';
import Backbone from 'backbone';
-import Lateralus from '../../src/lateralus';
-import { getLateralusApp } from '../utils';
-
-const assert = chai.assert;
+import Lateralus from '../../src/lateralus.js';
+import { getLateralusApp } from '../utils.js';
describe('Lateralus', function () {
describe('Static properties', function () {
@@ -460,9 +460,9 @@ describe('Lateralus', function () {
assert.isUndefined(Lateralus.prototype.lateralusEvents);
});
- /*eslint-disable max-len */
+ /*eslint-disable @stylistic/js/max-len */
it('Lateralus.prototype.lateralusEvents remains undefined after delegateLateralusEvents is called',
- /*eslint-enable max-len */
+ /*eslint-enable @stylistic/js/max-len */
function () {
assert.isUndefined(Lateralus.prototype.lateralusEvents);
});
@@ -506,10 +506,10 @@ describe('Lateralus', function () {
const App = getLateralusApp();
const app = new App();
- let recievedOptions;
+ let receivedOptions;
const ExtendedModel = Lateralus.Model.extend({
initialize: function (attributes, options) {
- recievedOptions = options;
+ receivedOptions = options;
}
});
@@ -519,12 +519,12 @@ describe('Lateralus', function () {
assert.instanceOf(model, Lateralus.Model);
});
- it('Recieves a passed-in attribute', function () {
+ it('Receives a passed-in attribute', function () {
assert.isTrue(model.get('foo'));
});
- it('Recieves passed-in options', function () {
- assert.isTrue(recievedOptions.bar);
+ it('Receives passed-in options', function () {
+ assert.isTrue(receivedOptions.bar);
});
it('Has a reference to central Lateralus Object', function () {
diff --git a/test/spec/lateralus.model.js b/test/spec/lateralus.model.js
index f5221c3..d4b149e 100644
--- a/test/spec/lateralus.model.js
+++ b/test/spec/lateralus.model.js
@@ -1,10 +1,10 @@
-import chai from 'chai';
+/* eslint-disable no-undef */
+
+import { assert } from 'chai';
import _ from 'lodash-compat';
import Backbone from 'backbone';
-import Lateralus from '../../src/lateralus';
-import { getLateralusApp } from '../utils';
-
-const assert = chai.assert;
+import Lateralus from '../../src/lateralus.js';
+import { getLateralusApp } from '../utils.js';
describe('Lateralus.Model', function () {
describe('constructor', function () {
diff --git a/test/utils.js b/test/utils.js
index 442211c..6346ace 100644
--- a/test/utils.js
+++ b/test/utils.js
@@ -1,4 +1,4 @@
-import Lateralus from '../src/lateralus';
+import Lateralus from '../src/lateralus.js';
/**
* @param {Function} [extraConstructorCode]
diff --git a/tutorials/using-lateralus.md b/tutorials/using-lateralus.md
index fe92a78..76dab91 100644
--- a/tutorials/using-lateralus.md
+++ b/tutorials/using-lateralus.md
@@ -20,12 +20,12 @@ require(['lateralus'], function (Lateralus) {
Lateralus's functionality is divided up into several primary Objects under the {@link Lateralus} namespace:
- * {@link Lateralus}
- * {@link Lateralus.Component}
- * {@link Lateralus.Component.View}
- * {@link Lateralus.Component.Model}
- * {@link Lateralus.Component.Collection}
- * A stylesheet
+* {@link Lateralus}
+* {@link Lateralus.Component}
+* {@link Lateralus.Component.View}
+* {@link Lateralus.Component.Model}
+* {@link Lateralus.Component.Collection}
+* A stylesheet
-------------------------------------
@@ -43,7 +43,7 @@ A component is distinct from a view. A view is a graphical, interactive represe
This is the standard directory structure for a typical component:
-```
+```text
my-component/
styles/
main.sass
@@ -123,7 +123,7 @@ As a convenience, {@link Lateralus.Component.View} implicitly binds DOM nodes in
```
-The view will automatically have properties `this.$container` and `this.$header` that are jQuery objects referencing the `div` and the `h2`, respecively.
+The view will automatically have properties `this.$container` and `this.$header` that are jQuery objects referencing the `div` and the `h2`, respectively.
{@link Lateralus.Component.View} transparently renders its template for you. {@link Lateralus.Component.View#renderTemplate} is called by {@link Lateralus.Component.View#initialize} (which is why you should generally call `baseProto.initialize` as demonstrated above), but you are free to do further rendering with [`this.render`](http://backbonejs.org/#View-render). [`this.render`](http://backbonejs.org/#View-render) should be used for partial updates, whereas {@link Lateralus.Component.View#renderTemplate} should be used to completely replace the contents of the View's `$el` with whatever is in {@link Lateralus.Component.View#template}.
diff --git a/webpack.common.js b/webpack.common.cjs
similarity index 66%
rename from webpack.common.js
rename to webpack.common.cjs
index a4a1535..90054a7 100644
--- a/webpack.common.js
+++ b/webpack.common.cjs
@@ -1,4 +1,5 @@
const path = require('path');
+const webpack = require('webpack');
module.exports = {
devtool: 'source-map',
@@ -18,5 +19,12 @@ module.exports = {
alias: {
underscore: path.resolve(__dirname, 'node_modules/lodash-compat/index')
}
- }
+ },
+ plugins: [
+ new webpack.ProvidePlugin({
+ jQuery: 'jquery',
+ '$': 'jquery',
+ 'window.jQuery': 'jquery',
+ }),
+ ]
};
diff --git a/webpack.config.js b/webpack.config.cjs
similarity index 73%
rename from webpack.config.js
rename to webpack.config.cjs
index 25bebfd..7ee68d0 100644
--- a/webpack.config.js
+++ b/webpack.config.cjs
@@ -1,14 +1,18 @@
const config = require('./webpack.common');
const path = require('path');
+const { merge } = require('webpack-merge');
-module.exports = Object.assign(config, {
+
+module.exports = merge(config, {
entry: './src/lateralus.js',
+ mode: 'production',
output: {
path: path.join(__dirname, 'dist'),
publicPath: '/assets/',
filename: 'lateralus.js',
library: 'lateralus',
libraryTarget: 'umd',
+ libraryExport: 'default',
umdNamedDefine: true
},
externals: ['backbone', 'lodash-compat', 'jquery', 'mustache']
diff --git a/webpack.test.config.js b/webpack.test.config.cjs
similarity index 67%
rename from webpack.test.config.js
rename to webpack.test.config.cjs
index 9073c0b..a031331 100644
--- a/webpack.test.config.js
+++ b/webpack.test.config.cjs
@@ -1,7 +1,8 @@
const config = require('./webpack.common');
+const { merge } = require('webpack-merge');
const path = require('path');
-module.exports = Object.assign(config, {
+module.exports = merge(config, {
entry: './test/index.js',
output: {
path: path.join(__dirname, 'dist'),
@@ -10,5 +11,9 @@ module.exports = Object.assign(config, {
library: 'index',
libraryTarget: 'umd',
umdNamedDefine: true
+ },
+ mode: 'development',
+ devServer: {
+ static: './dist',
}
});
