enhance-ssr-wasm: A JavaScript repository from Enhance

Enhance SSR WASM

Compiling Enhance SSR to WASM allows server-side rendering of Enhance elements in any language that supports WASM.

This project compiles enhance-ssr into an Extism plugin. It can be used with any language that Extism has an SDK for including Python, Ruby, .NET, Rust, Go, PHP, Java and more.

Build

Install extism-js pdk: sh install.sh
Build: npm run build

Usage

Here is an example using Node JS.

import createPlugin from "@extism/extism";

const plugin = await createPlugin("dist/enhance-ssr.wasm", {
  useWasi: true,
})

const input = {
  markup: "<my-header>Hello World</my-header>",
  elements: {
    "my-header":
      "function MyHeader({ html }) { return html`<style>h1{color:red;}</style><h1><slot></slot></h1>` }",
  },
  initialState: {},
}

const output = await plugin.call("ssr", JSON.stringify(input))
const parsedOutput = JSON.parse(output.text())
const htmlDoc = parsedOutput.document 

})

Input:

The plugin accepts a JSON string as input with three properties.

{
  "markup": "<my-header>Hello World</my-header>",
  "elements": {
    "my-header":
      "function MyHeader({ html }) { return html`<style>h1{color:red;}</style><h1><slot></slot></h1>` }",
  },
  "initialState": {},
}

markup: HTML string for the page to be rendered.
elements: Is an Object of elements. The keys are the custom element names and values are string representations of the function for rendering the elements.
initialState: Is an object of data used to render the components.

Output:

The output returned by the plugin is also a JSON string with multiple properties.

{
  "document": "<html><head><style>my-header h1 {\n  color: red;\n}</style></head><body><my-header enhanced=\"✨\"><h1>Hello World</h1></my-header></body></html>",
  "body": "<my-header enhanced=\"✨\"><h1>Hello World</h1></my-header>",
  "styles": "my-header h1 {\n  color: red;\n}",
}

Latest Release:

The latest release of the compiled plugin can be found under the Releases on this repository.