something like swiftui
the goal of this project is to generate html from swiftui-like syntax.
for example, this piece of code in SwiftUI
struct MyView: View {
var body: some View {
VStack {
Text("Direction")
.font(.title)
.padding(25)
Group {
Text("Row")
.font(.title)
HStack {
Text("Left")
Divider()
Text("Right")
}
}
.padding(50)
Divider()
Group {
Text("Column")
.font(.title)
VStack {
Text("Top")
Divider()
Text("Bottom")
}
}
.padding(50)
Spacer()
}
}
}would be like this in JavascriptUI
class MyView implements UI.View {
body = UI.Body(function() {
UI.Text("Direction")
.font(UI.Font.title)
.padding(25)
UI.Group(function() {
UI.Text("Row")
.font(UI.Font.title)
UI.HStack(function() {
UI.Text("Left")
UI.Divider()
UI.Text("Right")
})
})
.padding(50)
UI.Divider()
UI.Group(function() {
UI.Text("Column")
.font(UI.Font.title)
UI.VStack(function() {
UI.Text("Top")
UI.Divider()
UI.Text("Bottom")
})
})
.padding(50)
UI.Spacer()
})
}i have implemented basic elements for displaying text including
This resembles the div shown below
<div style="display: flex; flex-flow: row;">
...
</div>This resembles the div shown below
<div style="display: flex; flex-flow: column;">
...
</div>This resembles the div shown below
<div style="display: flex; flex-flow: inherit;">
...
</div>This could be a h1 if the font is set to be a title
<h1>...</h1>or be a p element if it's just set to be normal text
<p>...</p>This resembles the div shown below
<div style="flex: 1 1 auto;"></div><span style="background-color: #000000; width: auto; height: 5px;"></span><span style="background-color: #000000; width: 5px; height: auto;"></span>