ralixjs / ralix Goto Github PK

Support multiple attributes, via JSON notation, in data() and attr() methods (setters). Examples:

• data("#menu", { status: 'closed', color: 'white' })
• attr("#password", { type: 'text' })

In progress 👉 https://github.com/ralixjs/ralix-todomvc

Would be nice to have ajax helpers (ala jquery). We are actually copypasting the Ajax component on every Ralix app, so it seems to be a useful abstraction.

Example:

• ajax(url, params = {}, options = {})
• get & post => shortcuts using ajax under the hood with predefined "verb"

Considerations:

• we can use fetch internally
• we should return promises? this will allow us something like post('...').then((result) => { insertHTML('...') })
• Automatically parse JSONs ??

We should document better all CORE methods API and available options.

I propose the following: since the README is getting larger, I'd create a new file under docs/ and expand this section https://github.com/ralixjs/ralix#core-methods with more details for each method (even an example for complex cases). In the main section (in README), I'd put just a link to this new document.

A method(s) to manipulate location (maybe pushState, changeState...) and hash (location.hash), would be really useful I think. It's a very useful helper for most of web-apps we work nowadays.

Probably under https://github.com/ralixjs/ralix#navigation.

PROBLEM

We can not send formData to ajax and post helper methods.

PROPOSED SOLUTION

To be able to send formData object as argument param to ajax and post helper methods.

ajax(path, { params: formData, options: options })

NOTES

• When sending formData to the fetch method we don't have to pass any kind of Content-Type header.

New section Attributes?

Proposal:

attr(el, attr) => get
attr(el, attr, new_value) => set

Would be nice to allow the following functions to accept an array with multiple selectors:

• addClass
• removeClass
• toggleClass

Example:

addClass(['q1', 'q2'], 'hidden')

Using string template literals under the hood ✨ (ala Rails partials):

render('users/form', { name: user.name, back_to: '/users'})

Interesting links:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
• https://underscorejs.org/#template
• https://github.com/borismoore/jsrender

setParam added in #12, should be able to set many params at once. Possible implementations:

• pass object instead of key-value
• pass extra argument, ala "base" url

Would be nice to have a setParam(param, value) (consistent with getParam https://github.com/ralixjs/ralix#navigation)

in addEventListener we can pass an object with some usefult options like once, capture or signal but right now we can't pass this options using the on helper. So my proposal is to add an optional param:
on(query, events, callback, options = {})

This code:

if (event == 'click' && ['A', 'BUTTON'].includes(elem.tagName) || (elem.tagName == 'INPUT' && elem.type == 'submit'))

Should be something like:

if (event == 'click' && (['A', 'BUTTON'].includes(elem.tagName) || (elem.tagName == 'INPUT' && elem.type == 'submit')))

Current implementation is a bit dangerous, as it only adds/removes "display" attribute with no cache about previous value:

At the end you use addClass/removeClass most of the times. In almost all our Ralix apps, we are overriding those methods with:

hide(query) {
  addClass(query, 'hidden')
}

show(query) {
  removeClass(query, 'hidden')
}

So, after discussing this with @jfelip937, I'm +1 to remove them.

MORE CONTEXT In jquery, they have an internal cache where they save the previous values to restore them later (https://github.com/jquery/jquery/blob/main/src/css/showHide.js), but this seems to much for a lightweight framework like Ralix.

Yes, we need some tests and CI 💪

PROBLEM

We might want to add or remove a class depending on a boolean and then we end with an example like this:

if(value) {
  addClass(".container", "hide")
} else {
  removeClass(".container", "hide")
}

PROPOSED SOLUTION

Use a state optional value to know if the class has to be removed or added.

toggleClass(".container", "hide", value)

Notes

• This is already supported by classList.toggle() so it should only be to forward the boolean. https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/toggle#setting_the_force_parameter

Problem

Right now we don't have any information as how the request went (status code) as we are only returning the parsed body of the response.

Proposed solution

Return the whole Response object.

Notes

• This would be a breaking change.
• We will have to parse the response but this will give as more flexibility.

Let's imagine we have a list of menus that we want to observe and do something if that menu is opened, right now we should something like this:

findAll('.menu').forEach(menu => {
  const observerMenu = new MutationObserver(() => {
    if (hasClass(menu, 'opened')) ...
  })
  observerMenu.observe(menu, { attributes: true })
})

so my suggestion is to create a wrapper
the helper would be something like:

observer(query, callback, options = { attributes: true }) {
  findAll(query).forEach(element => {
    const observerMenu = new MutationObserver((mutationList, observer) => {
      callback(element, mutationList)
    })
    observerMenu.observe(element, options)
  })
}

so we can just write

observer('.menu', currentTarget => { if (hasClass(currentTarget, 'opened')) ...})

other option for the helper could be:

observer(query, callback, options = { attributes: true }) {
    const observerMenu = new MutationObserver((mutationList, observer) => {
      callback(mutationList)
    })
    findAll(query).forEach(element => { observerMenu.observe(element, options) })
  })
}

In this case we are not creating a MutationObserver for each element but we don't have the currentTarget so we should use finds or something inside the callback

Under DOM section, add a method to create HTML elements (uses createElement under the hood: https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement + maybe Ralix attr()??).

Something like:

createElement('input', { id: 'search_input', class: 'form-control', required: true })

Possible names:

• createElement
• createEl
• element
• elem
• tag (similar to rails tag.input...)
• ...

In some cases, when I try to use core methods as (find, findAll) into the controller constructor, it raises this error:

Uncaught ReferenceError: find is not defined

[PROBLEM] It seems that when Controller is created, Ralix has not added the core methods into window object yet.

We need a logo to make some branding and online presence ✨

Our idea is a simplistic/minimal logo according to the project "values". Our "tagline" is: "The bare necessities", so we thought a "geometric" bear fits really well as our logo 🐻

Under https://github.com/ralixjs/ralix#forms. Something like https://api.jquery.com/serialize/

Provide back() helper (under Navigation), but with a fallback url:

back(fallbackUrl = null) {
  ...
}

Some times, I'd like to use something:

<a href="#" onclick="back('/home')">Back</a>

In case someone visits the page with that button, without a referrer, at least to easily provide a fallback url. It seems useful to me.

What do you think @jfelip937 @araluce @AlexLarra @franpb14?

Something like: on(query, type, callback)?? what do you think team?

on(query, type, callback) {
  find(query).addEventListener(type, callback)
}

So we can write:

on('#btn-primary', 'click', () => {
  console.log('click!!')
})

Probably fits well under https://github.com/ralixjs/ralix#events.

To be able to remove all listeners of a type/types given an element/array/query selector.

As we already have the on method it will be consistent to have a method to remove the listeners.

PROPOSED SOLUTION

To remove a specific eventListener:

unbind(elements, events, function)

To remove all eventListeners:

unbind(elements, events)

Arguments:

• elements: Element / Array of Elements / Query selector
• events: String with the type of events to remove
• function: eventListener to be removed. If not added all eventListeners of the given types will be removed.

PROBLEM

With attributes that only their presense is checked (like disable) we can not remove them with the method attr().

PROPOSED SOLUTION

To be able to send false as value if we want to remove the attribute (in case that we want to set "false" as a attribute value we can send it as string):

attr(elem, "disabled", false)

Right now false has the same behaviour as null and it returns the attribute value.

ALTERNATIVE SOLUTION

New method to remove attributes. Still the other solution seems better to me as we can do things like attr(elem, "disabled", checkbox.checked).

Would be nice and useful something like:

// assuming ?a=1&b=2
getParam()
// { a: '1', b: '2' }

💡 quick implementation:

if (!param)
  return Object.fromEntries(new URLSearchParams(location.search))