SSR Rendering #5
Description
This is an issue tracker for language design around basic SSR, similar to handlebars or pug. Before SSR will be usable, a number of language design decisions need to be made.
Specifying MEML to be rendered
There a number of different methods that could be used to specify what MEML should be rendered.
Just use a file
Just pass a MEML file and dump an object into its scope. For example with the following MEML file.
(head
(title "" page " | Fushra")
)
(body
(h1 "Hello " username)
)Which in JS could be used like:
import { page } from 'meml-ssr'
// Scan and parse on program start
const home = page('./src/index.meml')
app.get('/', (req, res) => {
res.send(home({ page: 'Home', username: 'trickypr' }))
})Would output:
<!DOCTYPE html>
<html>
<head>
<title>Home | Fushra</title>
</head>
<body>
<h1>Hello trickypr</h1>
</body>
</html>Advantages:
- Any existing MEML code can be ssr rendered without any changes
- Simple idea
Disadvantages: - There is no way to specify what arguments should be provided
Reuse components and exports [Preferred]
In your SSR application you can execute components at any time. For example, the following MEML:
(component Home (page, username) (
(head
(title "" page " | Fushra")
)
(body
(h1 "Hello " username)
)
))
(component Logout (page, username) (
(head
(title "" page " | Fushra")
)
(body
(h1 "Goodbye " username)
)
))
(export (Home, Logout))Which in JS could be used like:
import { page } from 'meml-ssr'
// Scan and parse on program start
const { Home, Logout } = page('./src/index.meml')
app.get('/', (req, res) => {
res.send(Home({ page: 'Home', username: 'trickypr' }))
// or
res.send(Home('Home', 'trickypr'}))
})Would output:
<!DOCTYPE html>
<html>
<head>
<title>Home | Fushra</title>
</head>
<body>
<h1>Hello trickypr</h1>
</body>
</html>Advantages:
- Fairly easy to migrate everything
- Obvious what arguments will be supplied
- Allows for multiple pages per file
- You can render smaller components easier
Logic blocks
The following blocks will need to be implemented
(if (a == b)
"equal"
elseif (a > b)
"greater"
else
"something else"
)(for item in array
item
)Given
let obj = { name: 'trickypr', twitter: '@_trickypr' }then
(using obj
"Follow " name " on twitter at " twitter
)