Eliora NPM | npm.io

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>

@infinitebrahmanuniverse/nolb-eli @everything-registry/sub-chunk-1569

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago