https://github.com/ngasull/htmax

Minimal layers helping you build interactive applications around web standards
https://github.com/ngasull/htmax

Last synced: 5 days ago
JSON representation

Minimal layers helping you build interactive applications around web standards

• Host: GitHub
• URL: https://github.com/ngasull/htmax
• Owner: ngasull
• Created: 2023-10-09T12:43:11.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2023-12-07T16:21:57.000Z (about 1 year ago)
• Last Synced: 2024-11-05T21:15:26.250Z (about 2 months ago)
• Language: TypeScript
• Homepage:
• Size: 75.2 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Minimal layers helping you build interactive applications around web standards.

## Installation ( for now (: )

```sh

mkdir hello-world

cd hello-world

git clone https://github.com/ngasull/htmax

```

## Usage with Hono

```jsx

/** @jsx jsx */

/** @jsxFrag Fragment */

import { jsx, Fragment } from "./htmax/src/jsx/jsx-runtime.ts"

import { Hono } from "https://deno.land/x/[email protected]/mod.ts";

import { compress, serveStatic } from "https://deno.land/x/[email protected]/middleware.ts";

import { setupRoutes } from "./htmax/src/hono.ts";

const app = new Hono()

app.use("*", compress());

app.use("/public/htmax.js", serveStatic({ path: "./htmax/dist/register.js" }));

app.use("/public/*", serveStatic({ root: "./" }));

setupRoutes(app, {

  layout: {

    "": ({ children }) => (

      

        

          World builder

          

          

          

        

        

          {children}

        

      

    ),

  },

  index: {

    "": () => (

      <>

        
My website

        
Yo world ✌️

      >

    ),

    "/world": () => (

      <>

        
World

        
Time to build some world 🌍

      >

    ),

  }

});


Deno.serve({ port: 3000 }, app.fetch);

```

```sh

deno run --watch -A server.tsx

```

## `tsconfig`/`deno.json` without `@jsx*` pragma

```json

{

  "compilerOptions": {

    "jsx": "react-jsx",

    "jsxImportSource": "./htmax/src/jsx"

  }

}

```