Repository files navigation

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

Initial inspiration comes fromhttps://bvisness.me/luax/. The reason is to make it simpler with support of Luametaprogramming where nodetags is handle automatically without defining it.

Install withLuarocks

luarocks install luax

If you only need the pragma without handling transpiling lua files, load theLuaXh pragmaonly with

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

You'll get,

<divstyle="color: red;">Hello from LuaX!</div>

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

-- el.luaxlocalattr= {style="color: red;"}return<divstyle={attr.stlye}>hellofromLuaX!</div>

import it on to the main

-- import luax transpiler to handle the parsing of *.luax filelocalh=require('luax')localel=require('el')print(h(el))

You'll get,

<divstyle="color: red;">Hello from LuaX!</div>

Sample usage with table structure

localfunctionmap(a,fcn)localb= {}for_,vinipairs(a)dotable.insert(b,fcn(v))endreturnbendlocalfilters= {  {url="#/",name="All",selected=true },  {url="#/active",name="Active",selected=false },  {url="#/completed",name="Completed",selected=false },}localcontent=map(filters,function(filter)return<li><aclass={filter.selectedand'selected'ornil}href={filter.url}_="on click add .selected to me">      {filter.name}</a></li>end)return<ulclass="filters"_="on load set $filter to me">    {content}</ul>

See the test folder to see more usage cases.

Check example withlua examples/web-component/server.lua

Also todoMCV example at,https://github.com/syarul/todomvc-lua-luasocket-htmx-_hyperscript

Install fromVSCode Extension Marketplace to support syntax highlighlight for.luax extension

• Since nodeName suchdiv,p, etc+ are used as declared variables, so doNOT declare a function with the same name i.e.,

localfunctionli()return<li>todo1</li>end

• when usingtable.concat you need to convert to string so encapsulate withh 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.