ssr-window

What is ssr-window?

The ssr-window package provides a simple way to handle window and document objects in server-side rendering (SSR) environments. It allows developers to use window and document objects without worrying about SSR compatibility issues.

What are ssr-window's main functionalities?

Window Object

This feature allows you to use the window object in an SSR environment. The code sample demonstrates how to access the window's innerWidth property.

const { window } = require('ssr-window');
console.log(window.innerWidth);

Document Object

This feature allows you to use the document object in an SSR environment. The code sample demonstrates how to create a new div element and set its innerHTML.

const { document } = require('ssr-window');
const div = document.createElement('div');
div.innerHTML = 'Hello, world!';
console.log(div.outerHTML);

Custom Window and Document

This feature allows you to create custom window and document objects by extending the default ones provided by ssr-window. The code sample demonstrates how to add custom properties and methods.

const { window, document } = require('ssr-window');
const customWindow = { ...window, customProperty: 'customValue' };
const customDocument = { ...document, customMethod: () => 'customMethod' };
console.log(customWindow.customProperty);
console.log(customDocument.customMethod());

Other packages similar to ssr-window

jsdom

jsdom is a JavaScript implementation of the WHATWG DOM and HTML standards, primarily intended for use with Node.js. It provides a complete, fully-featured DOM environment, making it more comprehensive than ssr-window. However, it is also heavier and more complex to set up.

domino

domino is a fast, minimal DOM implementation for Node.js. It is lighter than jsdom and provides a basic DOM environment, making it more similar to ssr-window in terms of simplicity and performance. However, it may lack some of the advanced features of jsdom.

happy-dom

happy-dom is a lightweight and fast DOM implementation for Node.js. It aims to be a drop-in replacement for jsdom with better performance. It provides a more complete DOM environment compared to ssr-window, but it is still relatively simple to use.

README

SSR Window

Better handling for window and document object in SSR environment.

This library doesn't implement the DOM (like JSDOM), it just patches (or creates window and document objects) to avoid them to fail (throw errors) during server-side rendering.

Was created for use in:

• Dom7
• Swiper
• Framework7

Installation

Library available on NPM:

npm i ssr-window

Usage

import { window, document } from 'ssr-window';

window.addEventListener('resize', () => {});

const div = document.querySelectorAll('div');

Extending

If you rely on some window/document properties which are not included here, you can use extend helper to add them:

import { window, document, extend } from 'ssr-window';

// add window.navigator.language
extend(window, {
  navigator: {
    language: 'en',
  },
});

// add document.body
extend(document, {
  body: {
    /* ... */
  },
});

Contribution

Yes please! See the contributing guidelines for details.

Licence

This project is licensed under the terms of the MIT license.

Changelog

4.0.0-beta.1 - Released on July 22, 2021

• Now package uses only exports field which exports ES module