diff --git a/LICENSE b/LICENSE index 7ef2470..0704699 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2019-2020 Ralix Core Team +Copyright (c) 2019-2021 Ralix Core Team Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index f21881c..32d6b56 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ Ralix consists basically in 2 concepts, `Controllers` and `Components`: - `Controllers`: Controllers are meant to be mounted under a route path, they are like page-specific (scoped) JavaScript. - `Components`: Components are like widgets you will have in several pages: modals, tooltips, notifications, etc. Components can be also auto-mounted on each DOM load, you just need to pass them to the `RalixApp` instance (and implement the static method `onload`). -On the other hand, Ralix also provides some helpers and utilities to facilitate most common operations like: selectors, manipulations, events, etc. [Check it out here](#core-methods). +On the other hand, Ralix also provides some helpers and utilities to facilitate most common operations like: selectors, manipulations, events, etc. [Check it out here](#helpers). You can read more about Ralix Design, Vision and Philosophy [here](docs/PHILOSOPHY.md). @@ -38,9 +38,8 @@ Structure: ``` ├── components -│   ├── geolocation.js │   ├── modal.js -│   ├── tooltip.js +│   └── tooltip.js ├── controllers │   ├── app.js │   ├── dashboard.js @@ -84,6 +83,12 @@ Turbolinks.start() App.start() ``` +In your main entrypoint file (`app/packs/application.js`), you should just import the main application: + +```js +import App from '../app' +```` + ### Controllers ```js @@ -161,6 +166,8 @@ export default class Modal { ### Views +In your regular HTML views, you can call directly Ralix Helpers or the methods provided by the _current_ Ralix controller. + ```html Back @@ -204,9 +211,9 @@ render('todoItem', { id: id, value: value }) Check a complete Rails application with Ralix here: [Ralix TodoMVC](https://github.com/ralixjs/ralix-todomvc). -## Core methods +## Helpers -You can find a complete API documentation [here](docs/CORE_API.md). +You can find the complete API documentation [here](docs/HELPERS_API.md). ### Selectors diff --git a/docs/CORE_API.md b/docs/HELPERS_API.md similarity index 99% rename from docs/CORE_API.md rename to docs/HELPERS_API.md index 4d33ac8..2b53354 100644 --- a/docs/CORE_API.md +++ b/docs/HELPERS_API.md @@ -1,4 +1,4 @@ -# Core methods API +# Helpers API ## Selectors diff --git a/docs/PHILOSOPHY.md b/docs/PHILOSOPHY.md index 8baeeaa..1b85201 100644 --- a/docs/PHILOSOPHY.md +++ b/docs/PHILOSOPHY.md @@ -12,11 +12,11 @@ Ralix has no runtime dependencies (relays only in [Webpacker](https://github.com Ralix aims to provide a basic structure to organize your JavaScript code. But gives you a lot of freedom, it just assumes a couple of directories and files, but you can create more to split your code, for example: `app/javascript/services/`, `app/javascript/validators/`, etc. -There are two basic concepts: Router (Controllers) and Components. +There are two basic concepts in a Ralix app: Router (Controllers) and Components. The Router tries to follow the idea of Rails Controllers. You should define an main controller (for example `ApplicationController.js`) and the other controllers inherit from it. This way, if you define a method in the main controller, you will have access to this method in all pages or even override this method behavior on per page basis. -The Router uses regular expressions to match the current location (url) with the defined controller. So you can have one controller to match different urls/pages: +The Router uses regular expressions to match the current location (url) with the defined controller. So you can have one controller to match different urls/pages too. Example: ```js routes: { @@ -33,10 +33,8 @@ Components can be also auto-mounted on each DOM load, you just need to pass them ```js export default class Tooltip { static onload() { - findAll('.tooltip').forEach(el => { - on(el, 'mouseover', () => { - new Tooltip(data(el)) - }) + on('.tooltip', 'mouseover', (event) => { + new Tooltip(data(event.target)) }) } @@ -46,10 +44,10 @@ export default class Tooltip { } ``` -## Utilities +## Helpers -Utilities, aka Core methods, are helpers to help you write most common operations with a nicer and shorter API: finders, manage classes, manage elements attributes and data-attributes, submit forms, change browser history, listeners and more. You can find all helpers documentation [here](CORE_API.md). +Utilities, aka _Helpers_, are a set of functions to help you write most common operations with a nicer and shorter API: finders, manage classes, manage elements attributes and data-attributes, submit forms, change browser history, listeners and more. You can find the complete documentation [here](HELPERS_API.md). ## Logo -We use a bear, a sloth bear, inspired by **Baloo** (from **The Jungle Book**) performing the song **The Bare Necessities**. +We use a bear, a sloth bear, inspired by **Baloo** (from **The Jungle Book**) performing the song **The Bare Necessities**. You can find all logo versions [here](../logos/). diff --git a/index.js b/index.js index 0a884d7..e941513 100644 --- a/index.js +++ b/index.js @@ -1,3 +1,3 @@ -import RalixApp from './src/app' +import RalixApp from './src/app' export { RalixApp } diff --git a/logos/default-monochrome-black.svg b/logos/default-monochrome-black.svg deleted file mode 100644 index 1ca639a..0000000 --- a/logos/default-monochrome-black.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/logos/default.svg b/logos/default.svg deleted file mode 100644 index 4c62231..0000000 --- a/logos/default.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/app.js b/src/app.js index 5df20b2..ebfa445 100644 --- a/src/app.js +++ b/src/app.js @@ -1,14 +1,14 @@ import Router from './router' import Events from './events' import Templates from './templates' -import Core from './core' +import Helpers from './helpers' export default class App { constructor(config) { - this.router = new Router(config.routes) - this.events = new Events() - this.templates = new Templates(config.templates) - this.core = new Core() + this.router = new Router(config.routes) + this.events = new Events() + this.templates = new Templates(config.templates) + this.helpers = new Helpers() this.rails_ujs = config.rails_ujs || null this.components = config.components || [] @@ -24,7 +24,7 @@ export default class App { const loadEvent = (typeof Turbolinks !== 'undefined') ? 'turbolinks:load' : 'DOMContentLoaded' document.addEventListener(loadEvent, () => { - this.core.inject() + this.helpers.inject() this.router.dispatch() this.events.bind() this.components.forEach(component => { diff --git a/src/core.js b/src/helpers.js similarity index 98% rename from src/core.js rename to src/helpers.js index c5bf810..6ae3d3b 100644 --- a/src/core.js +++ b/src/helpers.js @@ -1,6 +1,6 @@ -import Utils from './utils' +import * as Utils from './internal_utils' -export default class Core { +export default class Helpers { inject() { Utils.getMethods(this).forEach(method => { if (typeof this[method] === 'function' && method != 'inject') diff --git a/src/internal_utils.js b/src/internal_utils.js new file mode 100644 index 0000000..e4ca47a --- /dev/null +++ b/src/internal_utils.js @@ -0,0 +1,10 @@ +export function getMethods(obj) { + let methods = new Set() + + while (obj = Reflect.getPrototypeOf(obj)) { + let keys = Reflect.ownKeys(obj) + keys.forEach(k => methods.add(k)) + } + + return methods +} diff --git a/src/router.js b/src/router.js index 4a5b69a..1102be7 100644 --- a/src/router.js +++ b/src/router.js @@ -1,4 +1,4 @@ -import Utils from './utils' +import * as Utils from './internal_utils' export default class Router { constructor(routes) { diff --git a/src/utils.js b/src/utils.js deleted file mode 100644 index 14bf525..0000000 --- a/src/utils.js +++ /dev/null @@ -1,12 +0,0 @@ -export default class Utils { - static getMethods(obj) { - let methods = new Set() - - while (obj = Reflect.getPrototypeOf(obj)) { - let keys = Reflect.ownKeys(obj) - keys.forEach(k => methods.add(k)) - } - - return methods - } -}