Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SSR Rendering #5

Open
trickypr opened this issue Jul 6, 2021 · 1 comment
Open

SSR Rendering #5

trickypr opened this issue Jul 6, 2021 · 1 comment

Comments

@trickypr
Copy link
Member

trickypr commented Jul 6, 2021

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
Copy link
Member Author

trickypr commented Jul 7, 2021

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

  • Arrays / Vecs
  • Objects
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
1 participant
@trickypr