Add Inter

[DenisPower1]

Add Inter framework Inter repo

Best of JavaScript is for the most popular open-source projects related to the web platform and Node.js.

Before submitting the request to add a new project, please check the following points:

• [x] The project is related to the web platform or Node.js
• [ ] The project has more than 100 stars on GitHub
• [ ] The project has thorough documentation in English
• [x] The project is not deprecated and actively maintained

How would this project be tagged? (Pick one or several existing tags from this list: https://bestofjs.org/tags)

Review Process

After you submit your project the members of Best of JS will respond with 👍 or 👎, and will provide feedback about your project. Once a consensus has been reached your project will either be approved and added to Best of JS, or it will be rejected until you have addressed the areas of your project that could be improved.

[michaelrambeau]

Hello Denis @DenisPower1 , thank you for the recommendation. How does Inter compares to minimalist solutions like Alpine.js that was very popular recently? I'm thinking about PetiteVue too. or less trendy solutions like Forgo or HTMX, check all the contenders here: https://bestofjs.org/projects?tags=framework) It could be interesting to add a section that compares the pros and cons of different libraries (including the bundle size).

About the documentation, what is the API of Inter? From the main example I can see a global Inter object that provides renderIf() methods but on the other hand the template() function seems to be global. Also I was curious: why renderIf instead of just render since there is no condition?

About reactive variables, it would be interesting to have information about the magic that happens behind the scene, do you have to call the variable reactive and make it global? Can it work with nested objects too? Do you use Proxy?

Maybe you should format the source code and the examples with a tool like Prettier to make the code more consistent and easier to read because it's the first thing I noticed when I checked the code and the examples 😅 .

I tried to check the web site but it seems that clicking on the "English" links triggers nothing? Sorry for all the questions but you know that the UI framework category is very crowded! Thank you for your understanding!

[DenisPower1]

The main goal of Inter is to provide a powerful API that let the developer build even the most complex web apps, using nothing but the browser.

The template() function is global, you can use it to construct the template in Inter.for() or Inter.renderIf(). It returns the template constructed.

In Inter.renderIf() there is a condition in render() function:

const r={

rendered:false,

}

Inter.renderIf({
in:"parentId",
watch:r,
conditions:[{
index:0,
render(){

if(r.rendered){
//When the rendered property is set to true
//the template will be rendered.

return template({

elements:[{
tag:"p", text:"rendered"
}]

})

}

}

}]

})

The react property value is called reactor, it will be a reactive global object, But in a future realese we will be able to make it either private or public(global).

<div id="counter">
<p>Counter progress : { counter }.</p>
<button onclick="addOne()">Add 1</button>
</div>

toHTML({
in:"counter",
data:{
counter:0,
},
react:"add"
})

// add will be an object that will proxy the data object.

function addOne(){

add.counter++;

}

I'm working in the english documentation now, the documentation is in portuguese but you can use the Google Chrome translator. And I'll give a look at prettier.