A Zone plugin for using JSDOM for server rendering
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
test
.editorconfig
.gitignore
.npmignore
.npmrc
.travis.yml
package.json
readme.md

readme.md

can-zone-jsdom

can-zone-jsdom is a Zone plugin that provides a DOM implementation backed by jsdom.

Build Status npm version

Install

npm install can-zone-jsdom --save

Usage

The most common way to use can-zone-jsdom is to provide a HTML page as the entry point. This page will be loaded in a new JSDOM context, and its scripts executed. Below shows using the plugin within an Express app.

const Zone = require('can-zone');
const express = require('express');
const app = express();

const dom = require('can-zone-jsdom');
const requests = require('done-ssr/zones/requests');

app.use(express.static('build', { index: false }));
app.use(express.static('.'));

app.get('*', async (request, response) => {
  var zone = new Zone([
    // Overrides XHR, fetch
    requests(request),

    // Sets up a DOM
    dom(request, {
      root: __dirname + '/../build',
      html: 'index.html'
    })
  ]);

  const { html } = await zone.run();
  response.end(html);
});

app.listen(8080);

See this guide for a more full featured example using incremental rendering within a React app.

License

MIT