https://github.com/uiedbook/naxtjs
Naxt - SSR library for server-side javascript 🚀
https://github.com/uiedbook/naxtjs
cradova front-end-development server-side-rendering ssr web
Last synced: 6 months ago
JSON representation
Naxt - SSR library for server-side javascript 🚀
- Host: GitHub
- URL: https://github.com/uiedbook/naxtjs
- Owner: Uiedbook
- License: apache-2.0
- Created: 2023-05-07T10:20:09.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-02T02:17:42.000Z (8 months ago)
- Last Synced: 2024-11-09T07:42:38.980Z (6 months ago)
- Topics: cradova, front-end-development, server-side-rendering, ssr, web
- Language: TypeScript
- Homepage:
- Size: 335 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Naxt
Naxt - SSR library for server-side javascript
Explore the 🎙️ docs »
Join Community
.
Report Bug
.
Request Feature
  
[](https://www.npmjs.com/package/Naxtjs)[](https://github.com/uiedbook/Naxt.js/blob/next/contributing.md) 
# Contents
- [What is Naxtjs](#what-is-Naxtjs)
- [Installation](#installation)
- [Examples](#example)
- [Getting Help](#getting-help)
## What is Naxtjs?
Naxtjs is a javascript lib for server rending html similar to htmx.
But Naxtjs is rather light weight and simple. let see.
Naxt follows the [VJS specification](https://github.com/Uiedbook/cradova/blob/main/VJS_spec)
If you want support my telegram group (link below).
## Installation
### npm
```bash
npm i naxtjs
```
## Examples
## A basic component in Naxtjs:
```js
import { div, h1, naxt } from "naxtjs";
function Hello(name) {
return h1("Hello " + name, {
className: "title",
style: {
color: "grey",
},
});
}
const html = naxt.compile(div(Hello("peter"), Hello("joe"))); // html string
app.get("/", (req, res) => {
res.send(html);
});
```
## client usage
```html
```
In the above code, Naxtjs will immediately replace the div with the html responces from the data-naxt-load attribute.
If no html comes, nothing happens.
```html
Home
```
In ths above Naxtjs will replace the contents of the element with id "main" with the html responces from the href when the a tag is clicked.
If no html comes, nothing happens.
```js
const updateMain = (type, key) => {
// ? params = element, href
naxt.update(
document.getElementById("main"),
"/o/search/?type=" +
type +
"&q=" +
document.getElementById("search").value +
"&kq=" +
key
);
};
```
In ths above function, Naxtjs will replace the contents of the element with the html responces from the href when the fucntion is called.
If no html comes, nothing happens.
See line 5 of dist/client.min.js to see how Naxtjs handles request headers for security measures when access content from servers
## Server Usage
```js
export const LoginPage = (req, res) => {
const html = naxt.compile(
div(
img({
src: "./logo.png",
style: { maxWidth: "100px", margin: "4rem auto" },
}),
h1("Login"),
input({ placeholder: "email", id: "email" }),
input({ placeholder: "password", id: "password" }),
button("Login", {
id: "login",
style: {
color: "black",
},
})
)
);
res.send(html);
};
```
There's a difference between naxt.compile and naxt.pile
Both compiles javascript to html, but can only be used on the server, but only naxt.compile can load naxtjs to the dom.
So if you are using naxt.pile on a page that has no naxtjs in the window yet, you will get errors
## Getting Help and Contributing
To get help on Naxtjs, join [Telegram](https://t.me/uiedbookHQ) Community.