Lucia is a tiny JavaScript (UMD compatible) library that serves as a bridge between vanilla JavaScript and Vue. Some features of Lucia are:
- Declarative: Lucia provides a declarative API similar to Vue/Alpine to create views, making development predictable and intuitive through markup-centric code.
- Reactive: When the view is changed, the internal reference Virtual DOM will automatically react and will update and render the new view in realtime.
- Lightweight: Lucia is extremely light (~4kb min+brotli) and performant as it does not use a traditional Virtual DOM, rather it renders directives only if necessary by skipping static nodes through selectors.
Right off the bat it should be noted that Lucia should not be implemented in all use cases. Lucia aims to tackle projects that need to be quickly implemented as an experiment, and this by extension doesn't make it very good for production environments. If you are looking for something established and widely used with a similar API to Lucia, check out the similar projects.
Lucia is currently is installable through a CDN and also supports UMD (Node, Browser, Isomorphic/Universal). Put this within your <head> tags in html.
<!-- development version, includes helpful console warnings -->
<script src="https://unpkg.com/lucia/dist/lucia.js"></script><!-- production version, optimized for size and speed -->
<script src="https://unpkg.com/lucia"></script>Below is an example of a clicker game in Lucia. No, your eyes aren't fooling you - it's really that simple.
<div l-use="{ count: 0 }">
<button l-text="count" l-on:click="++count">0</button>
</div>Lucia relies on directives in markup to perform functions:
| Directive | Description |
|---|---|
l-use |
Declares a new component scope. |
l-text |
Works similarly to l-bind, but will update the textContent of an element. |
l-html |
Works similarly to l-bind, but will update the innerHTML of an element. |
l-if |
Toggles display: none; on the element depending on expression (true or false). |
l-on |
Attaches an event listener to the element. Executes JavaScript expression when emitted. |
l-bind |
Sets the value of an attribute to the result of a JavaScript expression. |
l-join |
Create new DOM nodes for each item in an array. |
l-model |
Adds "two-way data binding" to an element. Keeps input element in sync with view data. |
l-link |
Allows access of initialized Lucia applications through JavaScript |
Lucia allows us to create component scopes. It tells the library to initialize a new component with the following data object.
<div l-use="{ message: 'Hello World' }">
<p l-text="message"></p>
</div>At the core of Lucia is a system that enables us to declaratively render data to the DOM using the straightforward l-text and l-html directives:
<div l-use="DeclarativeRendering()">
<p l-text="message"></p>
<p l-html="markupMessage"></p>
</div>function DeclarativeRendering() {
return {
message: 'Hello World!',
markupMessage: '<span>Hello World with Markup!</span>',
};
}It’s easy to toggle the presence of an element, too:
<div l-use="Conditionals()">
<button l-if="!show">You can't see me</button>
<button l-if="show">You can see me</button>
</div>function Conditionals() {
return { show: true };
}To let users interact with your app, we can use the l-on directive to attach event listeners that invoke methods on our Lucia instances:
<div l-use="EventHandlers()">
<button l-on:click="announce()" l-text="message"></button>
</div>function EventHandlers() {
return {
message: 'Hello world!',
announce() {
alert(this.message);
},
};
}In addition to text interpolation, we can also bind element attributes using the l-bind directive:
<div l-use="AttributeBinding()">
<h1 l-bind:class="{ hello: show }">Classes are cool</h1>
<h1 l-bind:style="color">Styles are sassy</h1>
</div>function AttributeBinding() {
return {
show: true,
color: { color: 'purple' },
};
}We can also use the l-join directive to render a list of items based on an array. Note that performance will be affected if using array mutators.
<div l-use="ListRendering()">
<p l-join="fruits by , "></p>
</div>function ListRendering() {
return {
fruits: ['apple', 'orange', 'banana'],
};
}You can use the l-model directive to create two-way data bindings on form input, textarea, and select elements.
<div l-use="FormInputBindings()">
<input l-model="message" />
<p l-text="message"></p>
</div>function FormInputBindings() {
return {
message: 'Nothing submitted yet',
};
}You can use the l-link directive to allow access of Lucia apps through the Lucia.links property
<div l-use="AccessingLuciaApplications()" l-link="AccessingLuciaApplications">
<p l-text="message"></p>
</div>function AccessingLuciaApplications() {
return {
message: 'Hello World',
};
}
console.log(Lucia.links().AccessingLuciaApplications.$view);If you're looking for something production-ready and is widely that has a API similar to Lucia, check these projects out!
- Alpine - A rugged, minimal framework for composing JavaScript behavior in your markup.
- Stimulus - A modest JavaScript framework for the HTML you already have.
- Intercooler.js - Making AJAX as easy as anchor tags.
- Mavo - Create web applications entirely by writing HTML and CSS!
- Htmx - </> htmx - high power tools for HTML
- Unpoly - Unobtrusive Javascript Framework for server-side applications
Lucia is MIT licensed.
This project could not have been created with the inspiration from dedicated developers of the projects listed below:
- Vue for the fantastically structured API.
- Svelte for their dedication to performance and amazing banner header.
- Alpine for the component scope syntax as well as great documentation.
- Moon for the initial itch to start a lightweight JavaScript library.
As well as the developers, awesome contributors, and the CHS Magnet Program for providing this opportunity to me.
＼＿ﾍ(◕‿◕ ✰)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent