var $globalCounter = 0;
$createEffect(() => {
console.log("Global counter increased to", $globalCounter);
});
function Component() {
var $localCounter = 0;
var increment = function() {
$globalCounter++;
$localCounter++;
};
return (
<div>
<button onClick={increment}>
Increment to {$localCounter}
</button>
</div>
);
}
export default Component;
export { $globalCounter }Mango Framework
A framework designed with performance and compatibility in mind.
- 👾 IE5+ Compatibility
- ✨ 1.53kb (gzipped)
- 🚀 Native DOM manipulation
- 🤏 Negligible memory usage
Eco Friendly
For the sake of reduced carbon footprint, Mango is designed to be compatible with every browser released since 1999. In addition, It's very small and uses negligible memory and CPU processing power.
Remote Functions
const res = await fetch("https://example.com/api/encrypt", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ msg: "Hello World!" }),
});
const { encryptedMsg } = await res.json();
console.log(encryptedMsg);import { encrypt } from "./encryption.remote";
const encryptedMsg = await encrypt("Hello World!");
console.log(encryptedMsg);Dynamic Content
Whatever your content is dynamically generated at runtime or compile-time, Mango can handle it. All pages templates are loaded into the server memory to make sure that content is populated and served as fast as possible.
52.7.69.8
Much Sweet
<button
id={true && 'real-id'}
id={false && 'troll-id'}
class="base-class"
class={new Date().getHours() > 12 ? 'afternoon' : 'morning'}
onClick={() => alert('Hello World!')}
onClick={() => alert('Goodbye World!')}
/>Attribute Accumulation
Feel free to use the same attribute multiple times. Compiler will merge them into one.
<button
ID="myDiv"
onClick={() => alert('Hello World!')}
onclick={() => alert('Goodbye World!')}
innerHTML="Click Me"
auto_focus
/>Case Insensitivity
Whatever the case you use for HTML attribute names, compiler will interpret them correctly.
<video
bind:currentTime={$progress}
bind:duration={$duration}
bind:paused={$isPaused}
bind:volume={$volume}
bind:muted={$isMuted}
/>Bound Attributes
Brought from Svelte, keep form controls and media elements attributes in sync with variables.
<p
color="red"
font-size={20}
font-weight="bold"
text-align="center"
text-decoration="underline"
/>Attribute-Like Styles
No problem if you want to define styles as attributes. Compiler can differentiate them from attributes.
<Card
title="Hello World"
link="https://google.com"
style:color="black"
event:onClick={toggleBgColor}
event:onClick={() => console.log("Card clicked!")}
/>Component Styling
Style components or add event listeners to them using attributes. No need to manipulate their definitions.
<Range
min={0}
max={$duration || 0}
step={1}
disabled={false}
$value={$progress}
/>2-Way Binding
Brought from Angular, keep parents and their children in communication with each other.
Native Performance
Mango does not use a virtual DOM but instead applies changes through DOM API. To reduce the time needed to render changes, only attributes whose values have changed are updated natively without re-rendering the entire element.
Innovated techniques are used to manipulate and render massive lists efficiently. This is done by manipulating values of elements attributes instead of replacing the existing elements with new ones.
Friendly To Memory
Every piece of data retained by Mango is optimized for low memory consumption. This makes it ideal for building web applications that are used on small gadgets.
Size of memory snapshot when 10K rows are rendered. Unit: megabytes
Power Efficient
Unlike other frameworks, Mango exploits the existing implementation of DOM API to render any change that happened. It does not use a virtual DOM, nor re-render the entire element when a change occurs. Instead, it uses publisher-subscriber design pattern to update the attributes of the updated element natively. This secures enough resources to run heavy tasks such as JavaScript-driven animations.
Bound Attributes
Developing custom media players and form controls isn't a problem anymore. Mango provides a set of attributes that can be kept in sync with any state variable. Whenever the state of your application changes, the bound attributes are updated automatically. The same applies when the value of a bound attribute changes, where the state variable is updated accordingly.
by Blender Foundation