Eliora is a front-end JavaScript framework for building browser applications. It is largely inspired by Aurelia framework for its syntax and it is designed to work with Vite.
To setup a new project, just setup a ViteJS vanilla typescript project and add dependency to Eliora framework:
npm create vite@latest my-project -- --template vanilla-ts
cd my-project
npm install
npm i eliora --save
To bootstrap Eliora, update main.ts with this content :
import { Eliora } from "eliora";
new Eliora()
.registerTemplateModules(import.meta.glob("/src/**/*.html", { as: 'raw' }))
.register(import("./app-component"));Then, create the app component, you'll need a app-component.ts...
// app-component.ts
export class AppComponent {
welcome: string = "Welcome to Eliora";
name: string = "";
}...and app-component.html
<!-- app-component.html -->
<form>
<label>
<span>What is your name?</span>
<input value.bind="name">
</label>
</form>
<p if.bind="name">${welcome}, ${name}!</p>Finaly, add your component in your index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + TS + Eliora</title>
</head>
<body>
<script type="module" src="/src/main.ts"></script>
<app-component />
</body>
</html>