fengari-lua / fengari

🌙 φεγγάρι - The Lua VM written in JS ES6 for Node and the browser
MIT License
1.8k stars 64 forks source link

JSX support? #127

Closed d9k closed 6 years ago

d9k commented 6 years ago

Hi! I plan to use fengari with mithril.js, but I want to use jsx either:

https://mithril.js.org/jsx.html

JSX is a way to represent html nodes in readable way.

For example if jsx is configured for mithril.js:

JS code

return ( <main><h1>Hello world</h1></main>);

transpiles to

return m("main", [
    m("h1", "Hello world"),
]);

JSX transpiler is available as babel plugin. This plugin code is short, but I can't understand it yet: https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-react-jsx/src/index.js

More on JSX: https://babeljs.io/docs/plugins/transform-react-jsx https://jasonformat.com/wtf-is-jsx/

What do you think about JSX? Is this syntaxic sugar worth usage? Do fengari support transpile plugins?

daurnimator commented 6 years ago

JSX is a language that compiles to JS. What you seem to be asking for is some sort of language that looks like XML that compiles to Lua. Such a language doesn't neccesarily need to be related to the fengari ecosystem; it could be used universally across Lua communities. I'd probably suggest opening up a thread on the lua mailing list about it.

However I wonder if Lua may already have "close enough" syntax for you. e.g. this is valid lua code:

return main { h1 "Hello world" }

With use of _ENV this can be made to be quite nice!

I know @nikki93 has been playing around with things over here. I have my own experiments here and here using Vue

d9k commented 6 years ago

@daurnimator, thanks! :relaxed:

What you seem to be asking for is some sort of language that looks like XML that compiles to Lua.

Yes, I'm looking into language extension. It may be some lua preprocessor (maybe even separate github project)

it could be used universally across Lua communities.

Yes, such language extension may be useful for example for server-side rendering.

With use of _ENV this can be made to be quite nice!

Why _ENV? Can you add more details to your idea explanation?

However I wonder if Lua may already have "close enough" syntax for you

The main idea is to copy-paste html nodes into lua code without change.

daurnimator commented 6 years ago

Why _ENV? Can you add more details to your idea explanation?

_ENV in lua 5.2+ lets you change the 'global' environment in a lexical manner. It means you can do e.g.:

local dom = require "some.dom.thing"
local function render()
    local _ENV = dom
   return main { h1 "Hello world" }
end

Which is the same as writing:

local dom = require "some.dom.thing"
local function render()
   return dom.main { dom.h1 "Hello world" }
end
daurnimator commented 6 years ago

I'm going to close this issue; as I don't think it can be solved here: "JSX for Lua" would be a language that compiles to lua (and is not fengari specific).