# lux

A slightly cursed transpiler for JSX-like syntax to Lustre in Gleam

> [!CAUTION]
> This project is a superset of Gleam and no tooling made
> for the Gleam Programming language should be expected to
> work with a codebase utilising Lux.
> This project is also not affiliated with Gleam or Lustre, any
> issues related to the html syntax should be reported here in
> the lux repository.

## How it works

It takes this lux code from the 01-hello-world lustre example

```
let styles = [#("width", "100vw"), #("height", "100vh"), #("padding", "1rem")]

let app = lustre.element((<div style={styles}>
    <h1>Hello, world.</h1>
    <h2>Welcome to Lustre.</h2>
  </div>))
```

and turns it into lustre

```
let styles = [#("width", "100vw"), #("height", "100vh"), #("padding", "1rem")]

let app =
  lustre.element(
    html.div([attribute.style(styles)], [
      html.h1([], [element.text("Hello, world.")]),
      html.h2([], [element.text("Welcome to Lustre.")]),
    ]),
  )
```

## Usage

Currently running `gleam run` in the project will transpile any lux files in or below the project directory with a **.lux** extension to a **.lux.gleam** with the transpiled gleam code.