Build Web in Native JavaScript Syntax
> ElexisJS is still in beta test now, some breaking changes might happened very often. ## What does ElexisJS bring to developer? 1. Write website with Native JavaScript syntax and full TypeScript development experiance, no more HTML or JSX. 2. For fluent method lovers. 3. Easy to import or create extensions to extend more functional. ## Installation 1. Install from npm ``` npm i elexis ``` 2. Import to your project main entry js/ts file. ```ts import 'elexis'; ``` 3. Use web packaging tools like [Vite](https://vitejs.dev/) to compile your project. ## How to Create Element Using the simple $ function to create any element with node name. ```ts $('a'); ``` > This is not jQuery selector! It looks like same but it actually create `` element, not selecting them. ## Fluent method Create and modify element in one line. ```ts $('h1').class('title').css({color: 'red'}) ``` ## Build your first "Hello, world!" ElexisJS project Let's try this code in your entry file: ```ts $(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 `` element will display `'User input value: 42'`. Now try to change input value in browser, the value text in `
` element will be synced by your input! Using `set` method to set value of `$State`, all displayed content of `value$` will be synced. ```ts value$.set(0) ``` ## Extensions 1. [@elexis/router](https://git.defaultkavy.com/elexis/router): Router for Single Page App. 2. [@elexis/layout](https://git.defaultkavy.com/elexis/layout): Build waterfall/justified layout with automatic compute content size and position. 3. [@elexis/view](https://git.defaultkavy.com/elexis/view): Multiple content switch handler.