diff --git a/.babelrc b/.babelrc index fdd170c..5287f8e 100644 --- a/.babelrc +++ b/.babelrc @@ -1,8 +1,8 @@ { - "presets": [ - ["env", { - "modules": false - }] + "plugins": [ + "@babel/plugin-proposal-class-properties" ], - "plugins": ["transform-object-rest-spread"] + "presets": [ + ["@babel/preset-env", {}] + ] } \ No newline at end of file diff --git a/.eslintrc b/.eslintrc index e504ab1..abed6cb 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,23 +1,22 @@ { + "env": { + "browser": true, + "jest/globals": true + }, + "extends": [ "eslint:recommended", - "eslint-config-airbnb-base", "prettier" ], + "parser": "babel-eslint", + "plugins": [ "prettier", "jest" ], - "env": { - "browser": true, - "jest/globals": true - }, - "rules": { "prettier/prettier": "error" - }, - - "parser": "babel-eslint" + } } \ No newline at end of file diff --git a/.lintstagedrc b/.lintstagedrc index c576556..0b18105 100644 --- a/.lintstagedrc +++ b/.lintstagedrc @@ -4,6 +4,11 @@ "eslint", "git add" ], + "__tests__/**/*.js": [ + "prettier --write", + "eslint", + "git add" + ], "src/**/*.js": [ "prettier --write", "eslint", diff --git a/.nvmrc b/.nvmrc index ec63514..48082f7 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -9 +12 diff --git a/README.md b/README.md index 597f02b..d5d1fd8 100644 --- a/README.md +++ b/README.md @@ -2,15 +2,15 @@ # 🧐 What is Loco-JS? -**Loco-JS** is a front-end framework similar to recently released [Stimulus](https://stimulusjs.org) in a fact that it doesn't want to take over your entire front-end. -The difference is that **Loco-JS** was originally designed in 2016 and it works in more generic fashion. **Loco-JS** teams up well with tools like [React](https://reactjs.org) or [Vue](https://reactjs.org) for crafting a view layer. +**Loco-JS** is a front-end framework similar to [Stimulus](https://stimulusjs.org) in terms of not wanting to take over your entire front-end. +**Loco-JS** was originally designed in 2016, and it works in a more generically. **Loco-JS** teams up well with tools like [React](https://reactjs.org) or [Vue](https://reactjs.org) for crafting a view layer. -Architecturally - Loco-JS is a front-end part of [**Loco-Rails**](http://github.com/locoframework/loco-rails), which can be used separately (with limited functionality). +Architecturally - Loco-JS is a front-end part of the [**Loco**](http://github.com/locoframework) framework. -And **Loco-Rails** is a back-end part of the whole [**Loco**](http://github.com/locoframework) framework and it requires **Loco-JS** to work. +[**Loco-Rails**](http://github.com/locoframework/loco-rails) is a back-end part of the **Loco** framework, and it requires **Loco-JS** to work. -**Loco-Rails** is just a concept that simplifies communication between front-end and back-end code. You can implement it in other languages or frameworks as well. -I am a Rails programmer that's why I created **Loco** for **Rails**. +**Loco** framework is a concept that simplifies communication between front-end and back-end code. It can be implemented in any language or framework. +I am a Rails programmer. That's why I created **Loco** for **Rails**. This is how it can be visualized: @@ -18,52 +18,37 @@ This is how it can be visualized: Loco Framework | |--- Loco-Rails (back-end part) +| | +| |--- Loco-Rails-Core (logical structure for JS / can be used separately with Loco-JS-Core) | -|--- Loco-JS (front-end part / can be used separately) +|--- Loco-JS (front-end part) + | + |--- Loco-JS-Core (logical structure for JS / can be used separately) | |--- Loco-JS-Model (model part / can be used separately) | - |--- other parts of Loco-JS + |--- other built-in parts of Loco-JS + + Loco-JS-UI - connects models with UI elements (a separate library) ``` -Following sections contain more detailed description of its internals and API. # ⛑ But how is Loco supposed to help? -* by providing logical structure for a JavaScript code (along with base classes for models, controllers and views). You exactly know where to start, when looking for a JavaScript code that runs current page (**Loco-JS**) -* you have models that protect from sending invalid data to the API endpoints. They also facilitate fetching objects of a given type from the server ([**Loco-JS-Model**](https://github.com/locoframework/loco-js-model/)) -* you can easily assign a model to a form what will enrich this form with fields' validation (**Loco-JS**) -* you can connect models with controllers and views on the front-end. And they will be notified about every change made to a corresponding model on the server side. This change will be emitted as a signal to the front-end code. And signal is just a fancy name for a JS object (**Loco**) -* it allows you to send messages over WebSockets in both directions with just a single line of code on each side (**Loco**) -* respects permissions (you can send messages only to specified, signed in on the server models _e.g. given admin or user_) (**Loco**) -* solves other common problems - -# 🦕 Origins - -**Loco** framework was created back in 2016. The main reason for it was a need to make my life easier as a full-stack developer. -I was using [Coffeescript](http://coffeescript.org) on the front-end back then and [Ruby on Rails](http://rubyonrails.org) on the back-end. - -I still use **Rails** but my front-end toolbox has changed a lot. Now, I work with modern goodies such as **ES6**, [Webpack](https://webpack.js.org), [Babel](https://babeljs.io), [React](https://reactjs.org), [Redux](https://redux.js.org)... and **Loco-JS** obviously :) - -**Loco-Rails** enriches Ruby on Rails. It's a functionality layer that works on top of Rails to simplify communication between front-end na back-end code. It is a concept that utilizes good parts of Rails to make this communication straightforward. - -But **Loco-JS** can be used as a standalone library to structure a JavaScript code, for example. -[**Loco-JS-Model**](https://github.com/locoframework/loco-js-model/) can be used without Rails as well and in cooperation with other modern tools such as React and Redux. You have to follow only a few rules of formatting JSON responses from the server. - -# 🔬 Tech stack of Loco-JS - -The Origins explain why some parts of **Loco-JS** are still written in CoffeeScript. It shouldn't worry you though unless you want to contribute. - -What's more important is that all Loco-JS' modules are transpiled and bundled using modern tools such as **Babel** and **Webpack** accordingly. Loco-JS works well as a part of modern JavaScript ecosystem alongside libraries such as React. -In the future, while adding features, all modules will be rewritten to Javascript. +* by providing a logical structure for a JavaScript code along with a base class for controllers. You exactly know where to start looking for a JavaScript code that runs a current page ([**Loco-JS-Core**](https://github.com/locoframework/loco-js-core/)) +* you have models that protect API endpoints from sending invalid data. They also facilitate fetching objects of a given type from the server ([**Loco-JS-Model**](https://github.com/locoframework/loco-js-model/)) +* you can easily assign a model to a form enriching this form with fields' validation ([**Loco-JS-UI**](https://github.com/locoframework/loco-js-ui/)) +* you can subscribe to a model or a collection of models on the front-end by passing a function. Front-end and back-end models can be connected. This function is called when a notification for a given model is sent on the server-side. (**Loco**) +* it allows sending messages over WebSockets in both directions with just a single line of code on each side (**Loco**) +* it respects permissions. You can filter out sent messages if a sender is not signed in as a given resource, _for example, a given admin or user_) (**Loco**) # 🤝 Dependencies 🎊 Loco-JS has no external dependencies. 🎉 -It depends only on Loco-JS-Model which is an internal part of Loco-JS but can be used separately as well (look at Loco-JS-Model [**dependencies**](https://github.com/locoframework/loco-js-model#-dependencies)❗️) -Although, [class properties transform](https://babeljs.io/docs/plugins/transform-class-properties/) Babel plugin may be helpful to support static class properties, which are useful in defining models. -Additionally, if you want to use Loco-JS with Loco-Rails and send or receive signals / messages over WebSocket connection, you have to pair up Loco-JS with [Action Cable](https://www.npmjs.com/package/actioncable). +It depends only on [**Loco-JS-Core**](https://github.com/locoframework/loco-js-core/) and [**Loco-JS-Model**](https://github.com/locoframework/loco-js-model/), which are internal parts of Loco-JS but can be used separately. They don't have external dependencies too. +Although [@babel/plugin-proposal-class-properties](https://babeljs.io/docs/en/babel-plugin-proposal-class-properties) may be helpful to support static class properties, which are useful in defining models. +Additionally, if you want to use Loco-JS with Loco-Rails and send or receive messages over a WebSocket connection, you have to pair up Loco-JS with [Action Cable](https://www.npmjs.com/package/actioncable). # 📥 Installation @@ -71,209 +56,136 @@ Additionally, if you want to use Loco-JS with Loco-Rails and send or receive sig $ npm install --save loco-js ``` -If you want to use Loco-JS by a script tag, without the module bundler, it's exposed as an `App` global variable. +If you want to use Loco-JS with a `