Skip to content
This repository has been archived by the owner on May 25, 2024. It is now read-only.
/ Naxt.js Public archive

Framework using Hono πŸ”₯ x HTMX </> | Ultrafast

License

Notifications You must be signed in to change notification settings

EdamAme-x/Naxt.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ”₯ Naxt.js

Warn: It is currently under development.

Naxt.js is a framework based on HonoπŸ”₯ and HTMX </>.
We are aiming for a Japanese-made framework.

Useful for building APIs, etc. It is also possible to build an entire site.

Server startup takes only 0.01 seconds.

naxt-js-logo

Ultra-fast framework πŸ”₯

on πŸ¦• Deno and ... coming soon.

(as RSC)

Installation

deno run -A https://raw.githubusercontent.com/EdamAme-x/Naxt.js/main/assets/install.ts my-app

Features

Routing is done in File-Dir Base. & NoBuild & EasyMinifier & LiveReload & Many Middlewares

Example

|-routes
|-@id
  |-- profile.jsx
|-- index.js
|-- about.ts
|-api
  |-- firebase.ts

In the above file structure...

Req: /index => index.js Req: /about => about.ts Req: /api/firebase => firebase.ts Req: /:id/profile => profile.jsx

File extensions are prioritized and routed in the following order: tsx => jsx => ts => js

The file must contain the following code.

export default function Index({ context, connInfo }) {
  return context.html(`
    <h1>Hello Naxt.js!</h1>
  `);
}

Using HTMX

import { html, LiveReload  } from "$naxtjs/helper/mod.ts";

export default function Index(context) {

    const page = html`
    <html>
    <head lang="ja">
        <title>Naxt.js Initial Page πŸ”₯</title>
        <meta charset="UTF-8">
        <link rel="icon" href="/static/favicon.png" type="image/x-icon">
        <link rel="stylesheet" href="/static/index.css">
        <script src="/static/client.js"></script>
    </head>
    <body>
        <img src="/static/favicon.png" alt="icon" width="240" />
        <h1 hx-get="/api/hello" hx-swap="outerHTML" hx-trigger="load"></h1>
        <p>Edit <code>routes/index.js</code> to get started!</p>
        <h2>Ultrafast Fullstack Framework on Hono πŸ”₯</h2>
        ${new Date()}
        ${LiveReload()}
    </body>
    </html>
    `;

    return context.htmx(page); // context.htmx()

}

/api/hello.js

export default function Hello(context) { return context.html("

Welcome to Naxt.js πŸ”₯

") }


The arguments are the same as for Hono. However, some of them are unique. Please refer to the documentation.

URLpattern(as /user/@id as /user/:id) can also be used for routing.

Examples

/user/:id => /user/@id(.js) /user/* => /user/_all(.ts)

/*/profile => /_all/profile(.jsx) /:id/profile => /_all/profile(.tsx)

Normal files (photos, etc.) will be routed as usual.

Please keep contributing!

Helpers

import { [HelperName] } from '$naxtjs/helper/mod.ts';
// renderJSX : render JSX
// html, css, js : minifyCode
// LiveReload : LiveReloadModule (You can put it in a production environment.)

// examples
const minifyHTML = html`
<p class="a" >

hello</p>
`; // as css, js

console.log(minifyHTML); 
// <p class="a">hello</p>

const jsx = renderJSX(<p class="a">
  hello {Date.now()}
</p>)