https://github.com/exalt/exalt-ssr
A module to render web components on the server.
https://github.com/exalt/exalt-ssr
Last synced: 10 months ago
JSON representation
A module to render web components on the server.
- Host: GitHub
- URL: https://github.com/exalt/exalt-ssr
- Owner: exalt
- License: mit
- Created: 2021-06-06T00:48:27.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-10-27T18:27:03.000Z (over 4 years ago)
- Last Synced: 2025-07-09T18:05:51.595Z (about 1 year ago)
- Language: JavaScript
- Size: 257 KB
- Stars: 4
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Exalt SSR
A module to render web components on the server.
[](https://github.com/exalt/exalt-ssr/blob/main/LICENSE)
[](https://www.patreon.com/outwalkstudios)
[](https://twitter.com/exaltjs)
---
## Installation
You can install @exalt/ssr using npm:
```
npm install @exalt/ssr
```
---
## Getting Started
@exalt/ssr provides 2 functions to render web components on the server.
- `loadBundle(path)` - initalizes the DOM environment and loads the application bundle.
- `renderToString(component, callback)` - renders a component to a string.
The DOM environment provided is a subset of the DOM spec and is designed to render exalt components,
however as long as the required apis are provided any web component can be rendered.
@exalt/ssr will detect a components props and serialize them as a script tag in the markup.
When a shadow root is detected it will be rendered as a [declarative shadow root](https://web.dev/declarative-shadow-dom/).
**Example - Rendering the app component**
```js
import { loadBundle, renderToString } from "@exalt/ssr";
import path from "path";
const bundlePath = path.join(process.cwd(), "dist", "index.js");
/* loadBundle returns the bundle exports, in this case it returns the App component */
const { App } = loadBundle(bundlePath);
const html = renderToString(new App());
console.log(html);
```
**Example - Rendering the app component with callback**
```js
import { loadBundle, renderToString } from "@exalt/ssr";
import path from "path";
const bundlePath = path.join(process.cwd(), "dist", "index.js");
/* loadBundle returns the bundle exports, in this case it returns the App component */
const { App } = loadBundle(bundlePath);
const html = renderToString(new App(), (currentNode) => {
console.log(`Rendering: ${currentNode.nodeName}`);
});
console.log(html);
```
---
## Reporting Issues
If you are having trouble getting something to work with exalt or run into any problems, you can create a new [issue](https://github.com/exalt/exalt-ssr/issues).
If this framework does not fit your needs or is missing a feature you would like to see, let us know! We would greatly appreciate your feedback on it.
---
## License
Exalt SSR is licensed under the terms of the [**MIT**](https://github.com/exalt/exalt-ssr/blob/main/LICENSE) license.