https://github.com/wallabyjs/jsdom-quokka-plugin
Quokka plugin to enable browser environment via jsdom
https://github.com/wallabyjs/jsdom-quokka-plugin
quokka wallaby
Last synced: 2 months ago
JSON representation
Quokka plugin to enable browser environment via jsdom
- Host: GitHub
- URL: https://github.com/wallabyjs/jsdom-quokka-plugin
- Owner: wallabyjs
- Created: 2017-03-09T05:40:49.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T09:03:30.000Z (over 2 years ago)
- Last Synced: 2025-03-25T18:53:47.375Z (3 months ago)
- Topics: quokka, wallaby
- Language: JavaScript
- Size: 94.7 KB
- Stars: 86
- Watchers: 6
- Forks: 7
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
:warning: Please note that this package is no longer requried to use the latest version of Quokka with jsdom. Please refer to [Quokka docs](https://quokkajs.com/docs/configuration.html#jsdom) for more information. :warning:
# FOR LEGACY USERS ONLY
-----
[Quokka.js plugin](https://quokkajs.com/) to enable browser-like environment via [`jsdom`](https://github.com/tmpvar/jsdom).
## Install
```
npm install jsdom-quokka-plugin
```
Note that you may install the plugin to the [Quokka config folder](https://quokkajs.com/docs/configuration.html#global-config-file) instead of installing it to your local project.
## Configuration
Specify the plugin in Quokka [configuration settings](https://quokkajs.com/docs/configuration.html):
```
{
"plugins": ["jsdom-quokka-plugin"]
}
```
If you need to, you may pass additional configuration options to the plugin:
```
{
"plugins": ["jsdom-quokka-plugin"],
"jsdom": {
"file": "/html/file/path"
"html": "...",
"userAgent": "...",
"config": {...}
}
}
```
The `jsdom.file` setting allows to specify a path to any HTML file.
The `jsdom.html` setting allows to specify any HTML as a string.
The `jsdom.config` setting is [the `jsdom` options setting](https://github.com/jsdom/jsdom#customizing-jsdom).
## Web Canvas API
If you want to use `HTMLCanvasElement` objects with Quokka and `jsdom` then you must also install the `canvas` package in the same
location as `jsdom-quokka-plugin`:
## Example 1
Specify inline Quokka configuration to use the `jsdom-quokka-plugin` setting `html` from config:
```javascript
({
plugins: ['jsdom-quokka-plugin'],
jsdom: {html: `
Hello`}
})
const testDiv = document.getElementById('test');
console.log(testDiv.innerHTML);
```
displays
In this example, inline Quokka config is used. You may also place the [config into the global Quokka config file or into your `package.json`](https://quokkajs.com/docs/configuration.html).
## Example 2
Create a new project that loads config from project configuration and sets html from a `file`:
1. Create a new folder for your scratch project.
2. Using terminal in the new folder, run `npm init` (accept all defaults).
3. Using terminal in the new folder, Install jsdom-quokka-plugin with `npm install jsdom-quokka-plugin –save-dev`.
4. In the root of the new folder, create a file `test.html` with the contents:
```html
This is my sample page.
Hello World
```
5. In the root of the new folder, create a file `test.js` with the contents:
```javascript
const testDiv = document.getElementById('testDiv');
testDiv.textContent //?
```
6. In the root of the new folder, create a file `.quokka` with the contents:
```json
{
"plugins": ["jsdom-quokka-plugin"],
"jsdom": {"file": "test.html"}
}
```
6. Start Quokka on `test.js`. You should now see editor output and Quokka console output of `Hello World`.