Add an option to inject the `document` for a `render()` #4500

alshdavid · 2024-09-16T00:11:33Z

The Problem

I'd like to be able to inject the document to use for my render() to allow me to use happy-dom or JSDOM to test my Preact components without assigning a global document.

Currently you must assign it to the globalThis object like so:

import { h, render } from 'preact'

// Imagine this is a mock Window
const browser = new Browser(`<body></body>`)

// Assign itto the global context so Preact can use them
globalThis.document = browser.document

// Run the preact render
render(<div>Hi</div>, browser.document.body)

However this prevents me from being able to run the tests concurrently

setTimeout(() => {
  const browser = new Browser(`<body></body>`)
  globalThis.document = browser.document
  render(<div>Hi</div>, browser.document.body)
})

setTimeout(() => {
  const browser = new Browser(`<body></body>`)
  globalThis.document = browser.document
  render(<div>Hi</div>, browser.document.body)
})

What I've Tried

I have tried to use Node's node:vm module to alter the globalThis context, however this does not work as it doesn't have access to imports.

I have tried bundling the import and using that as a script evaluation in the mock browser, however this is slow and cumbersome, negating the benefits of making tests concurrent.

Request

From what I can tell, the globalThis.document is used in the diff function: https://github.com/preactjs/preact/blob/main/src/diff/index.js#L414

Use element.ownerDocument

This would allow preact to use the document object associated with the current HTMLElement

Add a new function, something like renderToDom(component, target, globalContext).

This would allow me to inject the specific DOM into the render pipeline. This might cause issues with iframes though

const browser = new Browser(`<body></body>`)
renderToDom(
  <div>Hi</div>, 
  browser.document.body,
  browser.document, // <- here
)

I can raise a PR for this, is that okay?

The text was updated successfully, but these errors were encountered:

JoviDeCroock · 2024-09-16T00:57:04Z

Hey it might be worth revisiting #3042 for this

alshdavid · 2024-09-16T04:36:41Z

Rebased it: #4501

alshdavid added the feature request label Sep 16, 2024

alshdavid changed the title ~~Add an option to inject the window/document context for a render()~~ Add an option to inject the document for a render() Sep 16, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add an option to inject the `document` for a `render()` #4500

Add an option to inject the `document` for a `render()` #4500

alshdavid commented Sep 16, 2024 •

edited

Loading

JoviDeCroock commented Sep 16, 2024

alshdavid commented Sep 16, 2024

Add an option to inject the document for a render() #4500

Add an option to inject the document for a render() #4500

Comments

alshdavid commented Sep 16, 2024 • edited Loading

The Problem

What I've Tried

Request

JoviDeCroock commented Sep 16, 2024

alshdavid commented Sep 16, 2024

Add an option to inject the `document` for a `render()` #4500

Add an option to inject the `document` for a `render()` #4500

alshdavid commented Sep 16, 2024 •

edited

Loading