Skip to content

Dynamically render MEML components with data provided by a server

License

Notifications You must be signed in to change notification settings

fushra/meml-ssr

Repository files navigation

MEML SSR

Dynamically render MEML components with data provided by a server. This is a prototype

Codecov Discord

Todo

  • Performance
    • Multithreading
    • Partial pre-execution
  • Features
    • Import linking
  • Safety
    • Testing

Current performance

Tested on an Intel i5-6500 with 32GB of memory

Commit Requests per second Average time per request 99% worst time Bottle neck
f699229 22520 0.0022 sec 0.0047 sec Benchmarker network connection

Usage

Use this repo as a dependency.

npm install --save fushra/meml-ssr

Create a new file pages/home.meml and add the following contents:

(component home (name)
    (
        (head
            (meta charset="UTF-8")
            (meta name="viewport" content="width=device-width, initial-scale=1.0")

            (title "Home")
        )
        (body
            (if (name)
                (h1 "Hello, " name)
            else
                (h1 "Hello")
            )

            (p "Welcome to a test website. Try adding ?name=[yourName] to the title bar")
        )
    )
)

(export (home))

Create a nodejs file containing the server code in server.js:

const fastify = require('fastify')
const load = require('meml-ssr')

// Create a webserver. Doesn't have to be fastify, you can use express, koa, etc.
const app = fastify()

// Import the component from the file we just created
const { home } = await load('./pages/home.meml')

// Create a home page route
app.get('/', async (req, reply) => {
    reply.type('html')

    return home.render((req.query as { name: string }).name || null)
})

// Listen on 8080
app.listen(8080, '0.0.0.0', (err, address) => {
    if (err) {
        throw err
    }

    console.log(`Server listening on ${address}`)
})

Then run it with node --harmony-top-level-await server.js. Note --harmony-top-level-await is allows you to await the load of the component at the top of the file.

About

Dynamically render MEML components with data provided by a server

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages