Skip to content

Commit

Permalink
use meta
Browse files Browse the repository at this point in the history
  • Loading branch information
shahrul committed Oct 13, 2024
1 parent a910690 commit 160a285
Show file tree
Hide file tree
Showing 7 changed files with 135 additions and 219 deletions.
97 changes: 4 additions & 93 deletions .rockspec
Original file line number Diff line number Diff line change
@@ -1,102 +1,13 @@
package = "luax"
version = "1.0.1-2"
version = "1.0.2-1"

source = {
url = "https://github.com/syarul/luax/archive/refs/tags/v1.0.1.tar.gz",
dir = "luax-1.0.1"
url = "https://github.com/syarul/luax/archive/refs/tags/v1.0.2.tar.gz",
dir = "luax-1.0.2"
}
description = {
summary = "HTML parse in Lua",
detailed = [[## LuaX
Decent parse for HTML, so you don't have to write as concatenates string, in short a React JSX implementation in LUA.
<a href="https://luarocks.org/modules/syarul/luax" rel="nofollow"><img alt="Luarocks Package" src="https://img.shields.io/badge/Luarocks-1.0.1-blue.svg" style="max-width:100%;"></a>
[![Lua CI](https://github.com/syarul/luax/actions/workflows/lua.yml/badge.svg)](https://github.com/syarul/luax/actions/workflows/lua.yml)
### Usage
```lua
local h = require('h')
local el = div(
{ class = "container" },
p({ class = "title" }, "Hello, world!"),
span({ style = "color: red;" }, "This is a span")
)
print(h(el))
```
You'll get,
```html
<div class="container"><p class="title">Hello, world!</p><span style="color: red;">This is a span</span></div>
```
### Usage with JSX like syntax (HTML inside Lua)
first create a `*.luax` file, then import the `LuaX` pragma `h`
```lua
-- el.luax
local class = "container"
local el = <div id="hello" class={class}>Hello, world!</div>
return el
```
import it on to the main
```lua
local h = require('luax')
local el = require('el')
print(h(el))
```
You'll get,
```html
<div class="container" id="hello">Hello, world!</div>
```
Sample usage with list/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 = table.concat(map(filters, function(filter)
return h(<li>
<a
class={filter.selected and 'selected' or nil}
href={filter.url}
_="on click add .selected to me"
>
{filter.name}
</a>
</li>)
end), '\n')
return <ul class="filters" _="on load set $filter to me">
{content}
</ul>
```
See the test folder to see more usage cases.
> Inspired by https://bvisness.me/luax/.
]],
detailed = "LuaX is Lua + XML Syntax extension with builtin decent parse. In retrospect it's akin to React JSX.",
homepage = "https://github.com/syarul/luax",
license = "MIT"
}
Expand Down
17 changes: 10 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,21 @@
## LuaX
Decent parse for HTML, so you don't have to write as concatenates string, in short a React JSX implementation in LUA.

<a href="https://luarocks.org/modules/syarul/luax" rel="nofollow"><img alt="Luarocks Package" src="https://img.shields.io/badge/Luarocks-1.0.1-blue.svg" style="max-width:100%;"></a>
LuaX is Lua + XML Syntax extension with builtin decent parse. In retrospect it's akin to React JSX.


<a href="https://luarocks.org/modules/syarul/luax" rel="nofollow"><img alt="Luarocks Package" src="https://img.shields.io/badge/Luarocks-1.0.2-blue.svg" style="max-width:100%;"></a>
[![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`

load the `LuaX` `h` pragma **only** with
If you only need the pragma without handling transpiling lua files, load the `LuaX` `h` pragma **only** with
```lua
local h = require('h')

Expand All @@ -32,7 +37,7 @@ return <div style={attr.stlye}>hello from LuaX!</div>

import it on to the main
```lua
-- import luax to handle the parsing of *.luax file
-- import luax transpiler to handle the parsing of *.luax file
local h = require('luax')

local el = require('el')
Expand All @@ -46,7 +51,7 @@ You'll get,
<div style="color: red;">Hello from LuaX!</div>
```

Sample usage with list/table structure
Sample usage with table structure

```lua
local function map(a, fcn)
Expand Down Expand Up @@ -81,5 +86,3 @@ return <ul class="filters" _="on load set $filter to me">
```

See the test folder to see more usage cases.

> Inspired by https://bvisness.me/luax/.
25 changes: 0 additions & 25 deletions h.lua
Original file line number Diff line number Diff line change
@@ -1,28 +1,3 @@
-- inspired by https://bvisness.me/luax/
-- a React createElement/hyperscript shallow implementation in LUA
-- usage
-- local myElement = div(
-- { class = "container" },
-- p({ class = "title" }, "Hello, world!"),
-- span({ style = "color: red;" }, "This is a span")
-- )

-- print(h(myElement))

function printTable(t, indent)
indent = indent or 0
local tab = string.rep(" ", indent)

for key, value in pairs(t) do
if type(value) == "table" then
print(tab .. tostring(key) .. ": ")
printTable(value, indent + 1)
else
print(tab .. tostring(key) .. ": " .. tostring(value))
end
end
end

local voidTags = {
"area", "base", "basefont", "br", "col",
"frame", "hr", "img", "input", "link",
Expand Down
Loading

0 comments on commit 160a285

Please sign in to comment.