Build Web in Native JavaScript Syntax
ElexisJS is still in beta test now, some breaking changes might happened very often.
npm i elexis
import 'elexis';
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.
Create and modify element in one line.
$('h1').class('title').css({color: 'red'})
Let's try this code in your entry file:
$(document.body).content([
$('h1').class('title large-text').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 large-text">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.
$State to sync view and data changesThis 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)
FAQs
Build Web in Native JavaScript Syntax
We found that elexis demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.