No description
|
|
||
|---|---|---|
| .forgejo/workflows | ||
| assets | ||
| src | ||
| tests | ||
| .gitignore | ||
| .gitlab-ci.yml | ||
| LICENSE | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
| vite.config.ts | ||
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.
Getting started
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>