Vine Framework

Tiny, easy and functional JS framework to simplify the building of enhanced web projects:

• Just works, super easy usage.
• Zero dependencies, including module loaders.
• Import directly as Typescript.
• Or use the compiled Javascript code.

Some of the features:

• Very small memory usage.
• Full async (everything can be asynchronous).
• Optimized selector with context.
• Event delegation by default.
• Components with mount, render and destroy events.
• State and template management for components.
• Support to build observable event system.
• Template parse engine with if / else and for loops.
• Route handling library.
• HTTP request library.

Usage

Just put the distribution file in your project and start coding:

<script src="lib/vine.js"></script>
<script>
    // Your code goes here
    Vine.register(...)
</script>

You can also use it with TypeScript and ES6:

import { register } from "lib/vine"

// Your code goes here
register(...)

Component Lifecycle

You can use the following cycle to understand how components work and attach the appropriate code when building components:

Register ↓
    ↓ Mount ↓
        ⇅ Render (Loop) ↺
    ↑ Destroy ↓
UnRegister

1 - REGISTER

• Only once without element attached
• Setup component to be attached to elements

2 - MOUNT

• Only once for each element attached
• Useful to set up component events
• Component event: onMount

3 - RENDER ↺

• After mount and each time the component renders again
• Update output from template
• Calls lifecycle events on child components after render and wait for it
• Component events: template, onRender

4 - DESTROY

• Only once for each attached element if mounted
• Destroys the component from the element
• Can be mounted again later with new mounts
• Destroy child components also and wait for it
• Useful to remove component events
• Component events: onDestroy

5 - UNREGISTER

• Only once without element attached
• Removes the component definition from index, cannot be used again
• This does not run the destroy lifecycle, you should call it first