ralixjs / ralix Goto Github PK
View Code? Open in Web Editor NEW✨ Microframework for building and organizing your front-end
Home Page: https://www.npmjs.com/package/ralix
License: MIT License
✨ Microframework for building and organizing your front-end
Home Page: https://www.npmjs.com/package/ralix
License: MIT License
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:
fetch
internallypost('...').then((result) => { insertHTML('...') })
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
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:
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:
setParam
added in #12, should be able to set many params at once. Possible implementations:
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:
Lines 29 to 41 in 59d1956
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
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
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:
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:
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))
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.