marko-js / fastify

Render Marko templates in a Fastify application.

@marko/fastify

Render Marko templates in a Fastify application.

Installation

npm install @marko/fastify

Examples

Setup

Note: the example below assumes that you've configured the environment to handle .marko files. This means using the require hook (@marko/compiler/register) or a bundler like webpack, vite, etc. We recommend using npm init marko -- --template vite-fastify for a more complete example!

import fastify from "fastify";
import markoPlugin from "@marko/fastify";
import Template from "./template.marko";

const app = fastify();

app.register(markoPlugin);

app.get("/", (request, reply) => {
  // Streams Marko template into the response.
  // Forwards errors into fa error handler.
  reply.marko(Template, { hello: "world" });
});

$global / out.global

When calling reply.marko the input.$global is automatically merged with app.locals and reply.locals (both added by this plugin). This makes it easy to set some global data via fastify hook or globally, eg:

app.locals.appName = "My App";

app.addHook("onRequest", (request, reply, done) => {
  reply.locals.locale = "en-US";
  reply.locals.serializedGlobals.locale = true;
  done();
});

Then later in a template access via:

<div>${out.global.appName}: ${out.global.locale}</div>

Using with fastify-compress

fastify-compress does not currently expose a way for Marko to indicate when it is appropriate to flush out content while streaming. The default behavior for zlib is to buffer all content, which we don't wan't if we're trying to send out responses as fast as possible.

To properly use Marko with fastify-compress you should configure it to allow flushing out content as it is written. Marko internally will be sure to only write to the response stream when we've reached a point where we're waiting for async content.

import zlib from "zlib";
import fastifyCompress from "fastify-compress";

fastify.register(fastifyCompress, {
  zlibOptions: {
    flush: zlib.constants.Z_SYNC_FLUSH,
  },
  brotliOptions: {
    flush: zlib.constants.BROTLI_OPERATION_FLUSH,
  },
});

Code of Conduct

This project adheres to the eBay Code of Conduct. By participating in this project you agree to abide by its terms.

fastify's Issues

Example not working

Version: 1.0.2

Details

Example fails with TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".marko" for <path to template.marko>

Expected Behavior

rendered Marko when calling server

Your Environment

• Node 17.2.0
• OSX M1 Monterey

Steps to Reproduce

Run the example in README, in the above environment.

SyntaxError: Unexpected token '<'

Version: 1.0.2

Details

I am unable to render templates with this library and fastify.

Expected Behavior

No error, template rendered.

Actual Behavior

The following error occurs:
SyntaxError: Unexpected token '<'

Your Environment

• Environment name and version: node 15.12.0
• Operating System and version (desktop or mobile): macOS Big Sur (11.2)

Steps to Reproduce

Simply following the example from the readme.
Created a typescript project with fastify, marko v5 and this library.
package.json:

{
  "dependencies": {
    "@marko/fastify": "^1.0.2",
    "fastify": "^3.14.0",
    "marko": "^5.5.2",
    "tslib": "^2.1.0",
  }
}

index.ts:

import Fastify from "fastify";
import markoPlugin from "@marko/fastify";
import Hello from "./templates/hello.marko";

const app = Fastify().register(markoPlugin);

app.get('/', (req: any, reply: any) => {
  reply.marko(Hello, {})
})

app.listen(3000, (err: any) => {
  if (err) throw err
  console.log(`server listening`)
})

hello.marko:

<div>
  Hello world
</div>

Stack Trace

templates/hello.marko:1
<div>
^

SyntaxError: Unexpected token '<'
    at Object.compileFunction (node:vm:355:18)
    at wrapSafe (node:internal/modules/cjs/loader:1022:15)
    at Module._compile (node:internal/modules/cjs/loader:1056:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1121:10)
    at Module.load (node:internal/modules/cjs/loader:972:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:996:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at Object.<anonymous> (/index.js:5:23)
    at Module._compile (node:internal/modules/cjs/loader:1092:14)

out in component.js

Description

In template.marko ${out.global} works perfect.

But how can I get global out in component.js?

I've tried

console.log(window.locals);
console.log(window.out);

and so on, but alas...

fastify streaming waiting till done (<await()> not firing)

Version: 1.0.2

Details

The fastify server currently waits till the entire stream is done till it starts sending to the client. This causes any <await(promise) client-reorder=true> tag to be shipped, already fullfilled, negating any benefit.

Expected Behavior

As with the express plugin, streaming should start as soon as possible. Any await tags with reordering should also get sent out, with the stream staying open till the promises finish up serverside

Actual Behavior

The server stalls till the stream is completed, only then starting to send it to the client.

Possible Fix / Steps to Reproduce

Repro Repo
^ this repo also includes the fix to try out