https://github.com/syarul/luax

Template engine for writing HTML inside *.lua(x) files, like JSX.
https://github.com/syarul/luax

ast dsl jsx jsx-syntax lua react

Last synced: 1 day ago
JSON representation

Template engine for writing HTML inside *.lua(x) files, like JSX.

• Host: GitHub
• URL: https://github.com/syarul/luax
• Owner: syarul
• License: mit
• Created: 2024-08-29T15:52:02.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-10-26T03:36:06.000Z (4 months ago)
• Last Synced: 2024-10-30T05:33:38.401Z (4 months ago)
• Topics: ast, dsl, jsx, jsx-syntax, lua, react
• Language: Lua
• Homepage:
• Size: 67.4 KB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## LuaX

LuaX is Lua + HTML Syntax extension with built-in decent parse. In retrospect it's akin to React JSX.



[![Lua CI](https://github.com/syarul/luax/actions/workflows/lua.yml/badge.svg)](https://github.com/syarul/luax/actions/workflows/lua.yml)

## Decent Parser

Initial inspiration comes from [https://bvisness.me/luax/](https://bvisness.me/luax/). The reason is to make it simpler with support of Lua `metaprogramming` where node `tags` is handle automatically without defining it.

### Usage

Install with `Luarocks`

`luarocks install luax`

If you only need the pragma without handling transpiling lua files, load the `LuaX` `h` pragma **only** with

```lua

local h = require('h')

print(h(div({ style = "color: red;" }, "Hello from LuaX!")))

```

You'll get,

```html

Hello from LuaX!

```

So how to use with actual HTML syntax in Lua? First create a `*.luax` file,


```lua

-- el.luax

local attr = { style="color: red;" }

return 
hello from LuaX!

```


import it on to the main

```lua

-- import luax transpiler to handle the parsing of *.luax file

local h = require('luax')

local el = require('el')

print(h(el))

```

You'll get,

```html

Hello from LuaX!

```


Sample usage with table structure

```lua

local function map(a, fcn)

  local b = {}

  for _, v in ipairs(a) do

    table.insert(b, fcn(v))

  end

  return b

end

local filters = {

  { url = "#/",          name = "All",       selected = true },

  { url = "#/active",    name = "Active",    selected = false },

  { url = "#/completed", name = "Completed", selected = false },

}

local content = map(filters, function(filter)

  return 


    

      {filter.name}

    

  

end)


return 


    {content}



```


See the test folder to see more usage cases.

## Sample Project

Check example with `lua examples/web-component/server.lua`

Also todoMCV example at,

[https://github.com/syarul/todomvc-lua-luasocket-htmx-_hyperscript](https://github.com/syarul/todomvc-lua-luasocket-htmx-_hyperscript)

## VSCode Integration

Install from [VSCode Extension Marketplace](https://marketplace.visualstudio.com/items?itemName=syarul.luax-syntax-highlighter) to support syntax highlighlight for `.luax` extension

## Caveats

- Since nodeName such `div`, `p`, etc+ are used as declared variables, so do **NOT** declare a function with the same name i.e.,

```lua

local function li()

  return 
todo 1

end


```

- when using `table.concat` you need to convert to string so encapsulate with `h` pragma,

- defining in bracket try to limit by using `'` instead of `"` i.e., `{foo and 'foo' or nil}`,

- leave attributes assignment with no spacing `{ foo="foo" }` instead of `{ foo = "foo" }`,

-  HTML comments, not supported yet.