🔧 Build an offscreen DOM tree using this method.

I found the below code snippet in packages/scan/core/index.ts in react-scan source code.

const fragment = document.createDocumentFragment();

In this article, you will learn

1. What is DocumentFragment?

2. How is DocumentFragment used in react-scan?

3. createDocumentFragment method.

What is DocumentFragment

The below information is picked from MDN docs.

Definition

The DocumentFragment interface represents a minimal document object that has no parent.

It is used as a lightweight version of Document that stores a segment of a document structure comprised of nodes just like a standard document. The key difference is due to the fact that the document fragment isn't part of the active document tree structure. Changes made to the fragment don't affect the document.

Usage

A common use for DocumentFragment is to create one, assemble a DOM subtree within it, then append or insert the fragment into the DOM using Node interface methods such as appendChild(), append(), or insertBefore(). Doing this moves the fragment's nodes into the DOM, leaving behind an empty DocumentFragment.

This interface is also of great use with Web components: <template> elements contain a DocumentFragment in their HTMLTemplateElement.content property.

An empty DocumentFragment can be created using the document.createDocumentFragment() method or the constructor.

Read more about DocumentFragment.

How is DocumentFragment used in react-scan?

I searched for DocumentFragment in the react-scan codebase and found the below shown results.

createDocumentFragment is used in two files:

1. react-is-not-available.ts

2. packages/scan/src/core/index.ts

createDocumentFragment method

Creates a new empty DocumentFragment into which DOM nodes can be added to build an offscreen DOM tree. Read more about createDocumentFragment.

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on interesting projects. Send me an email at [email protected]

My Github — https://github.com/ramu-narasinga

My website — https://ramunarasinga.com

My Youtube channel — https://www.youtube.com/@thinkthroo

Learning platform — https://thinkthroo.com

Codebase Architecture — https://app.thinkthroo.com/architecture

Best practices — https://app.thinkthroo.com/best-practices

Production-grade projects — https://app.thinkthroo.com/production-grade-projects

References:

1. https://github.com/search?q=repo%3Aaidenybai%2Freact-scan%20DocumentFragment&type=code

2. https://github.com/aidenybai/react-scan/blob/cd12e388f46a40293e6a276cd46dc3c6455246d7/packages/extension/src/inject/react-is-not-available.ts#L42

3. https://github.com/aidenybai/react-scan/blob/cd12e388f46a40293e6a276cd46dc3c6455246d7/packages/scan/src/core/index.ts#L49

4. https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment