rename Core methods to Helpers (#47)

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

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
 <a href="#" onclick="back()">Back</a>
 <div id="menu">...</div>
@@ -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
 

docs/CORE_API.md → docs/HELPERS_API.md

@@ -1,4 +1,4 @@
-# Core methods API
+# Helpers API
 
 ## Selectors
 

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/).

index.js

@@ -1,3 +1,3 @@
-import RalixApp  from './src/app'
+import RalixApp from './src/app'
 
 export { RalixApp }

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 => {

src/core.js → 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')

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
+}

src/router.js

@@ -1,4 +1,4 @@
-import Utils from './utils'
+import * as Utils from './internal_utils'
 
 export default class Router {
   constructor(routes) {