can-zone-jsdom

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

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