Merge pull request #1318 from capricorn86/1317-add-sponsors-to-readmemd

chore: [#1317] Improves documentation and adds sponsors to README.md
capricorn86 · Mar 16, 2024 · 35d8db5 · 35d8db5
2 parents 8b2eb74 + e02ef46
commit 35d8db5
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 368 deletions.
diff --git a/README.md b/README.md
@@ -1,94 +1,64 @@
-![Happy DOM Logo](https://github.com/capricorn86/happy-dom/raw/master/docs/happy-dom-logo.jpg)
 
-# About
+<h1 align="center">
+    <img alt="Happy DOM Logo" src="https://github.com/capricorn86/happy-dom/raw/master/docs/happy-dom-logo.jpg" />
+</h1>
+<p align="center">
+    A JavaScript implementation of a web browser without its graphical user interface.
+</p>
 
-[Happy DOM](https://github.com/capricorn86/happy-dom) is a JavaScript implementation of a web browser without its graphical user interface. It includes many web standards from WHATWG [DOM](https://dom.spec.whatwg.org/) and [HTML](https://html.spec.whatwg.org/multipage/).
+<p align="center">
+    <a href="https://www.npmjs.com/package/happy-dom">
+        <img alt="Published on NPM" src="https://img.shields.io/npm/v/happy-dom.svg">
+    </a>
+</p>
 
-The goal of [Happy DOM](https://github.com/capricorn86/happy-dom) is to emulate enough of a web browser to be useful for testing, scraping web sites and server-side rendering.
+<p align="center">
+    <a href="https://github.com/capricorn86/happy-dom/wiki/">Documentation</a> | <a href="https://github.com/capricorn86/happy-dom/wiki/Getting-started">Getting started</a> | <a href="https://github.com/capricorn86/happy-dom/wiki/Setup-as-Test-Environment">Setup as Test Environment</a>
+</p>
 
-[Happy DOM](https://github.com/capricorn86/happy-dom) focuses heavily on performance and can be used as an alternative to [JSDOM](https://github.com/jsdom/jsdom).
+## DOM Features
 
-### DOM Features
+- Custom Elements (Web Components)
 
--   Custom Elements (Web Components)
+- Declarative Shadow DOM
 
--   Shadow Root (Shadow DOM)
+- Mutation Observer
 
--   Declarative Shadow DOM
+- Tree Walker
 
--   Mutation Observer
-
--   Tree Walker
-
--   Fetch
+- Fetch API
 
 And much more..
 
-### Works With
-
--   [Google LitHTML](https://lit-html.polymer-project.org)
-
--   [Google LitElement](https://lit-element.polymer-project.org)
-
--   [React](https://reactjs.org)
-
--   [Angular](https://angular.io/)
-
--   [Vue](https://vuejs.org/)
-
-### Module Systems
-
--   [ESM](https://nodejs.org/api/esm.html#introduction)
--   [CommonJS](https://nodejs.org/api/modules.html#modules-commonjs-modules)
+## Works With
 
-# Documentation
+ - [Vitest](https://vitest.dev/)
+ - [Bun](https://bun.sh)
+ - [Jest](https://jestjs.io/)
+ - [Testing Library](https://testing-library.com/)
+ - [React](https://reactjs.org)
+ - [Vue](https://vuejs.org/)
+ - [Angular](https://angular.io/)
+ - [Google LitElement](https://lit.dev/)
 
-Read more about how to use Happy DOM in our [Wiki](https://github.com/capricorn86/happy-dom/wiki).
+## Sponsors
 
-# Packages
+<p align="center"><b>Gold Sponsors</b></p>
 
-This repository is a _Monorepo_. Each package lives under `packages/<package>`.
+<p align="center"><a href="https://rtvision.com"><img alt="RTVision" width="120px" src="https://avatars.githubusercontent.com/u/8292810?s=200&v=4"></a></p>
 
-### [![Published on npm](https://img.shields.io/npm/v/happy-dom.svg)](https://www.npmjs.com/package/happy-dom) [happy-dom](https://github.com/capricorn86/happy-dom/tree/master/packages/happy-dom)
+<p align="center"><b>Sponsors</b></p>
 
-This package contains the core functionality of Happy DOM.
+<p align="center"><a href="https://sentry.io/"><img alt="Sentry" width="50px" src="https://avatars.githubusercontent.com/u/1396951?s=200&v=4"></a></p>
 
----
+<p align="center"><b>Backers</b></p>
 
-### [![Published on npm](https://img.shields.io/npm/v/@happy-dom/jest-environment.svg)](https://www.npmjs.com/package/@happy-dom/jest-environment) [jest-environment](https://github.com/capricorn86/happy-dom/tree/master/packages/jest-environment)
+<p align="center"><a href="https://github.com/maxmilton"><img alt="Github user @maxmilton" src="https://images.weserv.nl/?url=avatars.githubusercontent.com/u/14946546?v=4&h=40&w=40&fit=cover&mask=circle&maxage=7d"></a> <a href="https://github.com/taufiq-dev"><img alt="Github user @taufiq-dev" src="https://images.weserv.nl/?url=avatars.githubusercontent.com/u/20721306?v=4&h=40&w=40&fit=cover&mask=circle&maxage=7d"></a></p>
 
-This package makes it possible to use Happy DOM with [Jest](https://jestjs.io/).
-
----
-
-### [![Published on npm](https://img.shields.io/npm/v/@happy-dom/global-registrator.svg)](https://www.npmjs.com/package/@happy-dom/global-registrator) [global-registrator](https://github.com/capricorn86/happy-dom/tree/master/packages/global-registrator)
-
-A utility that registers Happy DOM globally, which makes it possible to use Happy DOM for testing in a Node environment.
-
-# Performance
-
-| Operation                            | JSDOM   | Happy DOM |
-| ------------------------------------ | ------- | --------- |
-| Import / Require                     | 333 ms  | 45 ms     |
-| Parse HTML                           | 256 ms  | 26 ms     |
-| Serialize HTML                       | 65 ms   | 8 ms      |
-| Render custom element                | 214 ms  | 19 ms     |
-| querySelectorAll('tagname')          | 4.9 ms  | 0.7 ms    |
-| querySelectorAll('.class')           | 6.4 ms  | 3.7 ms    |
-| querySelectorAll('[attribute]')      | 4.0 ms  | 1.7 ms    |
-| querySelectorAll('[class~="name"]')  | 5.5 ms  | 2.9 ms    |
-| querySelectorAll(':nth-child(2n+1)') | 10.4 ms | 3.8 ms    |
-
-See how the test was done [here](https://github.com/capricorn86/happy-dom-performance-test)
-
-# Contributing
+## Contributing
 
 See [Contributing Guide](https://github.com/capricorn86/happy-dom/blob/master/docs/contributing.md).
 
-# Sister Projects
-
-[<img alt="Happy Conventional Commit" width="120px" src="https://raw.githubusercontent.com/capricorn86/happy-conventional-commit/main/docs/logo_thumbnail.jpg" />](https://github.com/capricorn86/happy-conventional-commit)
-
-# Sponsors
+## License
 
-[<img alt="RTVision" width="120px" src="https://avatars.githubusercontent.com/u/8292810?s=200&v=4" />](https://rtvision.com)
+MIT License © 2020-Present [David Ortner](https://github.com/capricorn86)
diff --git a/packages/global-registrator/README.md b/packages/global-registrator/README.md
@@ -1,57 +1,16 @@
 ![Happy DOM Logo](https://github.com/capricorn86/happy-dom/raw/master/docs/happy-dom-logo.jpg)
 
-# About
+This package makes it possible to register [Happy DOM](https://github.com/capricorn86/happy-dom) in the global scope, e.g. for testing purposes.
 
-[Happy DOM](https://github.com/capricorn86/happy-dom) is a JavaScript implementation of a web browser without its graphical user interface. It includes many web standards from WHATWG [DOM](https://dom.spec.whatwg.org/) and [HTML](https://html.spec.whatwg.org/multipage/).
-
-The goal of [Happy DOM](https://github.com/capricorn86/happy-dom) is to emulate enough of a web browser to be useful for testing, scraping web sites and server-side rendering.
-
-[Happy DOM](https://github.com/capricorn86/happy-dom) focuses heavily on performance and can be used as an alternative to [JSDOM](https://github.com/jsdom/jsdom).
-
-This package contains a utility that registers [Happy DOM](https://github.com/capricorn86/happy-dom) globally, which makes it possible to use [Happy DOM](https://github.com/capricorn86/happy-dom) for testing in a Node environment.
-
-### DOM Features
-
-- Custom Elements (Web Components)
-
-- Shadow Root (Shadow DOM)
-
-- Declarative Shadow DOM
-
-- Mutation Observer
-
-- Tree Walker
-
-- Fetch
-
-And much more..
-
-### Works With
-
-- [Google LitHTML](https://lit-html.polymer-project.org)
-
-- [Google LitElement](https://lit-element.polymer-project.org)
-
-- [React](https://reactjs.org)
-
-- [Angular](https://angular.io/)
-
-- [Vue](https://vuejs.org/)
-
-### Module Systems
-
-- [ESM](https://nodejs.org/api/esm.html#introduction)
-- [CommonJS](https://nodejs.org/api/modules.html#modules-commonjs-modules)
-
-# Installation
+## Installation
 
 ```bash
 npm install @happy-dom/global-registrator --save-dev
 ```
 
-# Usage
+## Usage
 
-## Register
+#### Register
 
 ```javascript
 import { GlobalRegistrator } from '@happy-dom/global-registrator';
@@ -66,7 +25,7 @@ const button = document.querySelector('button');
 console.log(button.innerText);
 ```
 
-## Unregister
+#### Unregister
 
 ```javascript
 import { GlobalRegistrator } from '@happy-dom/global-registrator';
@@ -79,30 +38,6 @@ GlobalRegistrator.unregister();
 console.log(global.document);
 ```
 
-# Documentation
-
-Read more about how Happy DOM works in our [documentation](https://github.com/capricorn86/happy-dom/wiki).
-
-# Performance
-
-| Operation                            | JSDOM   | Happy DOM |
-| ------------------------------------ | ------- | --------- |
-| Import / Require                     | 333 ms  | 45 ms     |
-| Parse HTML                           | 256 ms  | 26 ms     |
-| Serialize HTML                       | 65 ms   | 8 ms      |
-| Render custom element                | 214 ms  | 19 ms     |
-| querySelectorAll('tagname')          | 4.9 ms  | 0.7 ms    |
-| querySelectorAll('.class')           | 6.4 ms  | 3.7 ms    |
-| querySelectorAll('[attribute]')      | 4.0 ms  | 1.7 ms    |
-| querySelectorAll('[class~="name"]')  | 5.5 ms  | 2.9 ms    |
-| querySelectorAll(':nth-child(2n+1)') | 10.4 ms | 3.8 ms    |
-
-See how the test was done [here](https://github.com/capricorn86/happy-dom-performance-test)
-
-# Sister Projects
-
-[<img alt="Happy Conventional Commit" width="120px" src="https://raw.githubusercontent.com/capricorn86/happy-conventional-commit/main/docs/logo_thumbnail.jpg" />](https://github.com/capricorn86/happy-conventional-commit)
-
-# Sponsors
+## Happy DOM
 
-[<img alt="RTVision" width="120px" src="https://avatars.githubusercontent.com/u/8292810?s=200&v=4" />](https://rtvision.com)
+[Documentation](https://github.com/capricorn86/happy-dom/wiki) | [Getting Started](https://github.com/capricorn86/happy-dom/wiki/Getting-started) | [Setup as Test Environment](https://github.com/capricorn86/happy-dom/wiki/Setup-as-Test-Environment) | [GitHub](https://github.com/capricorn86/happy-dom/)
diff --git a/packages/happy-dom/README.md b/packages/happy-dom/README.md
@@ -1,107 +1,34 @@
 ![Happy DOM Logo](https://github.com/capricorn86/happy-dom/raw/master/docs/happy-dom-logo.jpg)
 
-# About
+A JavaScript implementation of a web browser without its graphical user interface.
 
-[Happy DOM](https://github.com/capricorn86/happy-dom) is a JavaScript implementation of a web browser without its graphical user interface. It includes many web standards from WHATWG [DOM](https://dom.spec.whatwg.org/) and [HTML](https://html.spec.whatwg.org/multipage/).
-
-The goal of [Happy DOM](https://github.com/capricorn86/happy-dom) is to emulate enough of a web browser to be useful for testing, scraping web sites and server-side rendering.
-
-[Happy DOM](https://github.com/capricorn86/happy-dom) focuses heavily on performance and can be used as an alternative to [JSDOM](https://github.com/jsdom/jsdom).
-
-### DOM Features
+## DOM Features
 
 - Custom Elements (Web Components)
 
-- Shadow Root (Shadow DOM)
-
 - Declarative Shadow DOM
 
 - Mutation Observer
 
 - Tree Walker
 
-- Fetch
+- Fetch API
 
 And much more..
 
-### Works With
-
-- [Google LitHTML](https://lit-html.polymer-project.org)
-
-- [Google LitElement](https://lit-element.polymer-project.org)
-
-- [React](https://reactjs.org)
-
-- [Angular](https://angular.io/)
-
-- [Vue](https://vuejs.org/)
-
-### Module Systems
-
-- [ESM](https://nodejs.org/api/esm.html#introduction)
-- [CommonJS](https://nodejs.org/api/modules.html#modules-commonjs-modules)
-
-# Installation
-
-```bash
-npm install happy-dom
-```
-
-# Usage
-
-Happy DOM can be used as a simulated [Browser](https://github.com/capricorn86/happy-dom/wiki/Browser) or by using the [Window](https://github.com/capricorn86/happy-dom/wiki/Window) class directly to quickly setup up a DOM.
-
-## Window
-
-```javascript
-import { Window } from 'happy-dom';
-
-const window = new Window({ url: 'https://localhost:8080' });
-const document = window.document;
-
-document.body.innerHTML = '<div class="container"></div>';
+## Documentation
 
-const container = document.querySelector('.container');
-const button = document.createElement('button');
+[Documentation](https://github.com/capricorn86/happy-dom/wiki/) | [Getting Started](https://github.com/capricorn86/happy-dom/wiki/Getting-started) | [Setup as Test Environment](https://github.com/capricorn86/happy-dom/wiki/Setup-as-Test-Environment) | [GitHub](https://github.com/capricorn86/happy-dom/)
 
-container.appendChild(button);
+## Works With
 
-// Outputs "<div class="container"><button></button></div>"
-console.log(document.body.innerHTML);
+[Vitest](https://vitest.dev/) | [Bun](https://bun.sh) | [Jest](https://jestjs.io/) | [Testing Library](https://testing-library.com/) | [React](https://reactjs.org) | [Vue](https://vuejs.org/) | [Angular](https://angular.io/) | [Google LitElement](https://lit.dev/)
 
-// Closes the window
-await window.happyDOM.close();
-```
+## Module Systems
 
-## Browser
+[ESM](https://nodejs.org/api/esm.html#introduction) | [CommonJS](https://nodejs.org/api/modules.html#modules-commonjs-modules)
 
-```javascript
-import { Browser, BrowserErrorCaptureEnum } from 'happy-dom';
-
-const browser = new Browser({ settings: { errorCapture: BrowserErrorCaptureEnum.processLevel } });
-const page = browser.newPage();
-
-// Navigates page
-await page.goto('https://github.com/capricorn86');
-
-// Clicks on link
-page.mainFrame.document.querySelector('a[href*="capricorn86/happy-dom"]').click();
-
-// Waits for all operations on the page to complete (fetch, timers etc.)
-await page.waitUntilComplete();
-
-// Outputs "GitHub - capricorn86/happy-dom: Happy DOM..."
-console.log(page.mainFrame.document.title);
-
-// Closes the browser
-await browser.close();
-```
-
-# Documentation
-
-Read more about how to use Happy DOM in our [Wiki](https://github.com/capricorn86/happy-dom/wiki).
-
-# Performance
+## Performance
 
 | Operation                            | JSDOM   | Happy DOM |
 | ------------------------------------ | ------- | --------- |
@@ -110,29 +37,6 @@ Read more about how to use Happy DOM in our [Wiki](https://github.com/capricorn8
 | Serialize HTML                       | 65 ms   | 8 ms      |
 | Render custom element                | 214 ms  | 19 ms     |
 | querySelectorAll('tagname')          | 4.9 ms  | 0.7 ms    |
-| querySelectorAll('.class')           | 6.4 ms  | 3.7 ms    |
-| querySelectorAll('[attribute]')      | 4.0 ms  | 1.7 ms    |
-| querySelectorAll('[class~="name"]')  | 5.5 ms  | 2.9 ms    |
 | querySelectorAll(':nth-child(2n+1)') | 10.4 ms | 3.8 ms    |
 
-See how the test was done [here](https://github.com/capricorn86/happy-dom-performance-test)
-
-# Jest
-
-Happy DOM provide with a package called [@happy-dom/jest-environment](https://github.com/capricorn86/happy-dom/tree/master/packages/jest-environment) that makes it possible to use Happy DOM with [Jest](https://jestjs.io/).
-
-# Vitest
-
-[Vitest](https://github.com/vitest-dev/vitest) supports Happy DOM out of the box.
-
-# Global Registration
-
-Happy DOM provide with a package called [@happy-dom/global-registrator](https://github.com/capricorn86/happy-dom/tree/master/packages/global-registrator) that can register Happy DOM globally. It makes it possible to use Happy DOM for testing in a Node environment.
-
-# Sister Projects
-
-[<img alt="Happy Conventional Commit" width="120px" src="https://raw.githubusercontent.com/capricorn86/happy-conventional-commit/main/docs/logo_thumbnail.jpg" />](https://github.com/capricorn86/happy-conventional-commit)
-
-# Sponsors
-
-[<img alt="RTVision" width="120px" src="https://avatars.githubusercontent.com/u/8292810?s=200&v=4" />](https://rtvision.com)
+See how the test was done [here](https://github.com/capricorn86/happy-dom-performance-test)