elexis/README.md at 4c143cad9058e571879d0aea30f25cc70ee3001c

fix: README image source

2024-04-26 18:56:23 +08:00

3.4 KiB

Raw Blame History

Build Web in Native JavaScript Syntax

ElexisJS is still in beta test now, some breaking changes might happen very often.

What does ElexisJS bring to developer?

Write website with Native JavaScript syntax and full TypeScript development experiance, no more HTML or JSX.
For fluent method lovers.
Easy to import or create extensions to extend more functional.

Installation

Install from npm
```
npm i elexis
```
Import to your project main entry js/ts file.
```
import 'elexis';
```
Use web packaging tools like Vite to compile your project.

How to Create Element

Using the simple $ function to create any element with node name.

$('a');

This is not jQuery selector! It looks like same but it actually create <a> element, not selecting them.

Fluent method

Create and modify element in one line.

$('h1').class('title').css({color: 'red'})

Build your first "Hello, world!" ElexisJS project

Let's try this code in your entry file:

$(document.body).content([
    $('h1').class('title').content('Hello, world!')
])

In the first line, we create a $Container to using Elexis API on document.body element. Then we see a content method after the container object, this method mean the following elements will be the content of container.

We can pass an array into content method. In this array, we put a new <h1> element which have a class name "title" and text content "Hello, world!".

Run the code, we will get this body structure in DOM:

<body>
    <h1 class="title">Hello, world!</h1>
</body>

So far, we just simply do a hello world project that you can type less in HTML way, and these is not the point of ElexisJS. Let's figure out what ElexisJS will boost development speed in the following examples.

Using `$State` to sync view and data changes

This line will create a $State value, usually we will put $ sign behind variable name to mean this is a $State variable.

const number$ = $.state(42);

This $State value has been set a number 42, which will become a number type $State. We can simply put this state value into any display content!

const value$ = $.state(42);

$(document.body).content([
    $('input').type('number').value(value$),
    $('p').content(['User input value: ', value$])
])

You will see the <input> element is fill with number 42, and also <p> element will display 'User input value: 42'. Now try to change input value in browser, the value text in <p> element will be synced by your input!

Using set method to set value of $State, all displayed content of value$ will be synced.

value$.set(0)

Extensions

@elexis/router: Router for Single Page App.
@elexis/layout: Build waterfall/justified layout with automatic compute content size and position.

3.4 KiB Raw Blame History