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 }
A framework designed with performance and compatibility in mind.
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.
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);
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.
<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.
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.
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
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.
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