SSR Rendering #5

trickypr · 2021-07-06T01:44:31Z

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
)

trickypr · 2021-07-07T00:03:57Z

In addition to this, the following data types will need to be implemented:

Arrays / Vecs
Objects

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SSR Rendering #5

SSR Rendering #5

trickypr commented Jul 6, 2021

trickypr commented Jul 7, 2021

SSR Rendering #5

SSR Rendering #5

Comments

trickypr commented Jul 6, 2021

Specifying MEML to be rendered

Just use a file

Reuse components and exports [Preferred]

Logic blocks

trickypr commented Jul 7, 2021