added JSX test, fix table sorting

h.lua

@@ -1,13 +1,13 @@
 -- inspired by https://bvisness.me/luax/
 -- a React createElement/hyperscript shallow implementation in LUA
 -- usage
---local myElement = div(
+-- local myElement = div(
 --  { class = "container" },
 --  p({ class = "title" }, "Hello, world!"),
 --  span({ style = "color: red;" }, "This is a span")
---)
---
---print(h(myElement))
+-- )
+
+-- print(h(myElement))
 
 local function createElement(tag, atts, children)
   return {
@@ -56,8 +56,12 @@ setmetatable(_G, {
 })
 
 local function h(element)
+  local tkeys = {}
+  for k in pairs(element.atts) do table.insert(tkeys, k) end
+  table.sort(tkeys)
   local atts = ""
-  for k, v in pairs(element.atts) do
+  for _, k in ipairs(tkeys) do
+    local v = element.atts[k]
     if type(v) ~= "table" then
       atts = atts .. " " .. k .. "=\"" .. v .. "\""
     end

luax.lua

@@ -16,18 +16,18 @@ local function tokenize(input)
         output = output .. ")"   -- close the Lua function call
       else
         local tagName = input:match("<(%w+)", pos)
-        pos = pos + #tagName + 1          -- skip "<tag>"
+        pos = pos + #tagName + 1           -- skip "<tag>"
         output = output .. tagName .. "({" -- opening the Lua function call
 
         local tagEnd = input:find(">", pos)
-        local attrs = ""
 
         if true then
           local attributesString = input:sub(pos, tagEnd)
           local attributes = {}
           local attrPos = 1
           while attrPos <= #attributesString do
-            local attrNameBracket, attrValueBracket, endPosBracket = attributesString:match('%s*(%w+)%s*=%s*{([^}]*)}%s*()', attrPos)
+            local attrNameBracket, attrValueBracket, endPosBracket = attributesString:match(
+              '%s*(%w+)%s*=%s*{([^}]*)}%s*()', attrPos)
             local attrName, attrValue, endPos = attributesString:match('%s*(%w+)%s*=%s*"([^\'"]*)"%s*()', attrPos)
             if attrName then
               table.insert(attributes, attrName .. ' = "' .. attrValue .. '"')
@@ -70,7 +70,6 @@ local function tokenize(input)
       end
     end
   end
-
   return output
 end
 
@@ -89,9 +88,10 @@ function require(moduleName)
     local str = preprocessLuaFile(luaxFile)
     -- eval back to buffer file after transform
     luaFile = load(str)()
+  else
+    return originalRequire(moduleName)
   end
   return luaFile
 end
 
 return h
-

test/test_spec.lua

@@ -18,22 +18,37 @@ end
 
 package.path = package.path .. ";" .. getDir() .. "/?.lua"
 
-local h = require("h")
-
-local el = div(
-  { class = "container" },
-  p({ class = "title" }, "Hello, world!"),
-  span({ style = "color: red;" }, "This is a span")
-)
+local h = require("luax")
 
 describe("LuaX", function()
-  it("should pass this basic test", function()
-    assert.is_true(true)
-  end)
-  it("h should return a function", function()
+  it("should return type function", function()
     assert.is.equal("function", type(h))
   end)
-  it("h should return a createElement DSL", function()
-    assert.is.equal('<div class="container"><p class="title">Hello, world!</p><span style="color: red;">This is a span</span></div>', h(el))
+  it("should return a HTML string with createElement DSL", function()
+    local el = div(
+      { class = "container" },
+      p({ class = "title" }, "Hello, world!"),
+      span({ style = "color: red;" }, "This is a span")
+    )
+    assert.is.equal(
+    '<div class="container"><p class="title">Hello, world!</p><span style="color: red;">This is a span</span></div>',
+      h(el))
+  end)
+
+  it("should return a HTML string when given JSX like syntax", function()
+    local el = require("test.element")
+    assert.is.equal('<div bar="bar" class="container" d="1" id="foo" val="value">Hello, world!</div>', h(el))
+  end)
+
+  it("should return a HTML string when given JSX like syntax", function()
+    local el = require("test.foo")
+    assert.is.equal('<div>foo</div>', h(el))
+  end)
+
+  it("should return a HTML string when given JSX like syntax", function()
+    local el = require("test.varin")
+    assert.is.equal(
+    '<div class="container" id="div_1"><p class="title" id="p_2" style="border: 1px solid red;">Hello, world!</p></div>',
+      h(el))
   end)
 end)

test/varin.luax

@@ -5,4 +5,4 @@ local span_style = "color: red;"
 local span_inner = "This is a span"
 
 local el = <div id="div_1" class={div_class}><p id="p_2" style="border: 1px solid red;" class={p_class}>{p_inner}</p></div>
-return el
+return el