locomotivemtl / locomotive-boilerplate

🚂 Front-end boilerplate for projects by Locomotive.
https://locomotivemtl-boilerplate.vercel.app/
MIT License
455 stars 71 forks source link

Feature/js config #147

Closed lucasvallenet closed 1 year ago

lucasvallenet commented 1 year ago

Description:

Create multiple config vars to use project wide in the config.js file.

1. Config:

New frozen objects classed by categories: ENV, CSS_CLASS, CUSTOM_EVENT and FONT Update the use of these variables in all the js for consistencies.

Goal Have every shared data of the app in one place

Before modules/Example.js

import { EAGER_FONT } from '../app';
...
whenReady(EAGER_FONT).then()

utils/image.js

...
let lazyParent = $el.closest('.c-lazy')

app.js

const resizeEndEvent = new CustomEvent('resizeEnd')
...

After example.js

import { FONT } from '../config';
...
whenReady(FONT.EAGER).then()

utils/image.js

import { CSS_CLASS } from '../config'
...
let lazyParent = let lazyParent = $el.closest(`.${CSS_CLASS.LAZY_CONTAINER}`)

app.js

import { CUSTOM_EVENT } from './config'
...
const resizeEndEvent = new CustomEvent(CUSTOM_EVENT.RESIZE_END)

2. DOM:

Rename the util environment.js to dom.js and remove useless vars. Anything that is not related to the DOM should go to the config.js file. Prepend a $ to each DOM reference, to discuss ?

Before

import { html } from './utils/environment'
console.log(html)

After

import { $html } from './utils/dom'
console.log($html)