Quokka.js

https://quokkajs.com/docs/
Admin
Quokka.js is a rapid prototyping playground in your editor that displays runtime values inline as...
Tokens:55,132
Snippets:165
Trust Score:9.4
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Quokka.js in JetBrains IDE

Source: https://quokkajs.com/docs/intro/quick-start

Instructions for installing the Quokka.js plugin in JetBrains IDEs. Access the plugin installation through the IDE's settings.

```bash
Go to `Settings - Plugins`, search for `Quokka`, and install it.
```

--------------------------------

### Launch Quokka.js Interactive Demo

Source: https://quokkajs.com/docs/intro/quick-start

Guidance on how to launch the interactive demo for Quokka.js after installation to explore its features.

```menu
Help -> Quokka.js -> Launch Interactive Demo
```

--------------------------------

### Install Quokka.js in Sublime Text

Source: https://quokkajs.com/docs/intro/quick-start

Instructions for installing the Quokka.js package in Sublime Text using Package Control.

```bash
Use `Package Control: Install Package` and search for `Quokka` to install.
```

--------------------------------

### Install Quokka.js in VS Code

Source: https://quokkajs.com/docs/intro/quick-start

Instructions for installing the Quokka.js extension in Visual Studio Code. Ensure your VS Code version is 1.10.0 or higher.

```bash
Search for `Quokka` in the Extensions view and install it.
```

--------------------------------

### Create Interactive Examples in VS Code

Source: https://quokkajs.com/docs/features/interactive-examples

Learn how to launch curated interactive examples within VS Code using the 'Create File' command. These examples are beneficial for both experienced developers as references and for new developers to learn Quokka.js.

```VS Code Command
Ctrl + K, L
```

--------------------------------

### Install Previous Quokka Version in IntelliJ

Source: https://quokkajs.com/docs/support/previous

Guidance for users of IntelliJ IDEA to install a previous version of Quokka.js. This requires downloading the specific version from the Quokka website and installing it via the 'Install plugin from disk...' command.

```bash
Download the previous version of Quokka from the Quokka website.
Use the 'Install plugin from disk...' command in IntelliJ to install the downloaded version.
```

--------------------------------

### Configure VS Code Quokka.js Automatic Start Regex

Source: https://quokkajs.com/docs/config/overview

This configuration allows Quokka.js to automatically start on files matching a specified regular expression in VS Code. The example shows how to start Quokka on all files ending with `.quokka.js`.

```JSON
{
  "quokka.automaticStartRegex": "\.quokka\.js$"
}
```

--------------------------------

### Install Plugin Globally

Source: https://quokkajs.com/docs/config/extensibility

Instructions for installing a Quokka.js plugin to the global Quokka folder using npm, avoiding project module pollution.

```Bash
cd ~/.quokka
npm install dotenv-quokka-plugin
```

--------------------------------

### Run Context-Aware Code Snippets with Quokka Snaps

Source: https://quokkajs.com/docs/intro/quick-start

Quokka Snaps allow you to run code snippets within any file in your project, providing access to the file's context. This feature is ideal for testing and debugging specific pieces of logic without running a full file or a separate scratch file. The editor automatically adds closing braces when you type '{{'.

```javascript
import { validateEmail } from'./validators';


functionComponent() {


useEffect(()=> {


...


{{ 


// Quokka will execute the code below

// and display the results in your editor.

// Once you finish, you may remove the

// {{ }} snap markers and the code inside.


validateEmail('test@test.abc');


}}


...


});


...


return (


<div>


...


</div>

);

}
```

--------------------------------

### Benchmarking Plugin Example

Source: https://quokkajs.com/docs/config/extensibility

An example of a Quokka.js plugin that adds a global 'time' function for benchmarking code execution and repeating tasks.

```JavaScript
module.exports = {
  before: config => {
    global.time = func => {
      console.time('Execution time');
      func();
      console.timeEnd('Execution time');
    };
    global.time.repeat = (times, func) => {
      ...
    };
  },
};
```

--------------------------------

### Configure Quokka to use Yarn

Source: https://quokkajs.com/docs/features/quick-package-install

This configuration snippet shows how to set the 'installPackageCommand' in Quokka's configuration file to use 'yarn add' instead of the default 'npm install' for package installations.

```json
{
  "installPackageCommand": "yarn add {packageName}"
}
```

--------------------------------

### Install Quokka.js for JetBrains IDEs

Source: https://quokkajs.com/docs/support/previous

This snippet lists the available versions of Quokka.js for JetBrains IDEs. It indicates the release dates for each version.

```text
| Quokka-1.0.306 for JetBrains IDEs | 2021-08-25
| Quokka-1.0.305 for JetBrains IDEs | 2021-07-14
| Quokka-1.0.304 for JetBrains IDEs | 2021-07-03
| Quokka-1.0.303 for JetBrains IDEs | 2021-06-18
| Quokka-1.0.302 for JetBrains IDEs | 2021-06-15
| Quokka-1.0.301 for JetBrains IDEs | 2021-05-28
| Quokka-1.0.300 for JetBrains IDEs | 2021-05-21
| Quokka-1.0.299 for JetBrains IDEs | 2021-05-17
| Quokka-1.0.298 for JetBrains IDEs | 2021-05-13
| Quokka-1.0.297 for JetBrains IDEs | 2021-05-12
| Quokka-1.0.296 for JetBrains IDEs | 2021-05-11
```

--------------------------------

### Install Quokka.js for VS Code

Source: https://quokkajs.com/docs/support/previous

This snippet provides instructions for installing Quokka.js for VS Code. It specifies a version compatibility requirement for VS Code.

```text
VS Code 1.82.x or earlier is required due to breaking changes in VS Code.
```

--------------------------------

### Personal License Key Example

Source: https://quokkajs.com/docs/support/license

Demonstrates the format of a personal license key email received after purchasing Quokka.js. It highlights the license key itself, which is a string of characters.

```text
Dear Name,

Thank you for your order. Please find your Quokka.js personal license key below.

abc==

Regards, The Wallaby Team
```

--------------------------------

### Install vite-node

Source: https://quokkajs.com/docs/guides/vite

Command to install the vite-node package, which Quokka.js uses for Vite projects.

```bash
npm install vite-node
```

--------------------------------

### Visual Studio Code License Activation

Source: https://quokkajs.com/docs/support/license

Provides instructions on activating the Quokka.js license within Visual Studio Code. It mentions using the 'Quokka Start View' or the Command Palette.

```bash
Cmd/Ctrl + Shift + P then Quokka.js: Manage License Key
```

--------------------------------

### Run Quokka CPU Profiler Command

Source: https://quokkajs.com/docs/features/cpu-profiler

This snippet shows how to initiate the CPU profiling process using a command within the editor. It's a key step to start analyzing code performance with Quokka.

```shell
Quokka.js: Profile
```

--------------------------------

### Install Quokka.js for VS Code

Source: https://quokkajs.com/docs/support/previous

This snippet provides instructions for installing Quokka.js for VS Code. It specifies a version requirement for VS Code due to breaking changes.

```text
VS Code 1.82.x or earlier is required due to breaking changes in VS Code.
| Quokka-1.0.394 for VS Code (Read Instructions) | 2021-08-23
| Quokka-1.0.393 for VS Code (Read Instructions) | 2021-08-18
| Quokka-1.0.392 for VS Code (Read Instructions) | 2021-08-17
| Quokka-1.0.391 for VS Code (Read Instructions) | 2021-08-16
| Quokka-1.0.390 for VS Code (Read Instructions) | 2021-08-08
| Quokka-1.0.389 for VS Code (Read Instructions) | 2021-08-06
| Quokka-1.0.388 for VS Code (Read Instructions) | 2021-08-04
| Quokka-1.0.387 for VS Code (Read Instructions) | 2021-08-04
| Quokka-1.0.386 for VS Code (Read Instructions) | 2021-07-19
| Quokka-1.0.385 for VS Code (Read Instructions) | 2021-07-14
| Quokka-1.0.384 for VS Code (Read Instructions) | 2021-07-05
| Quokka-1.0.383 for VS Code (Read Instructions) | 2021-07-02
| Quokka-1.0.382 for VS Code (Read Instructions) | 2021-07-01
| Quokka-1.0.381 for VS Code (Read Instructions) | 2021-06-18
| Quokka-1.0.380 for VS Code (Read Instructions) | 2021-06-16
| Quokka-1.0.379 for VS Code (Read Instructions) | 2021-06-15
| Quokka-1.0.378 for VS Code (Read Instructions) | 2021-06-15
| Quokka-1.0.377 for VS Code (Read Instructions) | 2021-06-15
| Quokka-1.0.376 for VS Code (Read Instructions) | 2021-06-14
| Quokka-1.0.375 for VS Code (Read Instructions) | 2021-06-12
| Quokka-1.0.374 for VS Code (Read Instructions) | 2021-06-06
| Quokka-1.0.373 for VS Code (Read Instructions) | 2021-06-03
| Quokka-1.0.372 for VS Code (Read Instructions) | 2021-05-31
| Quokka-1.0.371 for VS Code (Read Instructions) | 2021-05-31
| Quokka-1.0.370 for VS Code (Read Instructions) | 2021-05-31
| Quokka-1.0.369 for VS Code (Read Instructions) | 2021-05-28
| Quokka-1.0.368 for VS Code (Read Instructions) | 2021-05-21
| Quokka-1.0.367 for VS Code (Read Instructions) | 2021-05-17
| Quokka-1.0.366 for VS Code (Read Instructions) | 2021-05-13
| Quokka-1.0.365 for VS Code (Read Instructions) | 2021-05-12
| Quokka-1.0.364 for VS Code (Read Instructions) | 2021-05-11
```

--------------------------------

### Install Quokka.js for JetBrains IDEs

Source: https://quokkajs.com/docs/support/previous

This snippet indicates the availability of Quokka.js for JetBrains IDEs, listing various version releases.

```text
Quokka-1.0.202 for JetBrains IDEs
```

--------------------------------

### Install Quokka.js for VS Code (v1.0.592+)

Source: https://quokkajs.com/docs/support/previous

This snippet represents the installation of Quokka.js for VS Code, specifically for versions 1.0.592 and later. It requires VS Code 1.82.x or earlier due to breaking changes.

```text
Quokka-1.0.592 for VS Code (Read Instructions)
```

--------------------------------

### Company License Keys Example

Source: https://quokkajs.com/docs/support/license

Illustrates the format of a company license key email for a two-seat license. It shows how multiple license keys are provided within the email.

```text
Dear Company Name,

Thank you for your order. Please find your Quokka.js company license keys below.

Key #xxxxx:

abc==

Key #yyyyy:

def==

Regards, The Wallaby Team
```

--------------------------------

### Install Quokka.js for JetBrains IDEs (v1.0.412+)

Source: https://quokkajs.com/docs/support/previous

This snippet represents the installation of Quokka.js for JetBrains IDEs, specifically for versions 1.0.412 and later. The release notes do not specify IDE version compatibility.

```text
Quokka-1.0.412 for JetBrains IDEs
```

--------------------------------

### Install JSDOM for Quokka.js

Source: https://quokkajs.com/docs/config/jsdom

Installs the JSDOM package using npm, which is required to emulate a browser-like environment in Quokka.js.

```bash
npm install jsdom
```

--------------------------------

### Quokka.js Plugin Configuration

Source: https://quokkajs.com/docs/config/extensibility

Example of how to configure Quokka.js to use local or global plugins by specifying them in the 'plugins' array within the configuration.

```JSON
{
  "plugins": ["./my-plugin", "dotenv-quokka-plugin"]
}
```

--------------------------------

### HTML File for Quokka.js Example

Source: https://quokkajs.com/docs/config/jsdom

A sample HTML file ('test.html') used in conjunction with Quokka.js to demonstrate loading content from an external file via JSDOM.

```html
<html>
<head>
<title>This is my sample page.</title>
</head>
<body>
<pid="testDiv">Hello World</p>
</body>
</html>
```

--------------------------------

### Vite Configuration for vite-node

Source: https://quokkajs.com/docs/guides/vite

Example Vite configuration file (vite.config.ts) demonstrating how to set server dependencies for vite-node.

```typescript
/// <reference types="vitest"/>

import { defineConfig } from'vite';

export default defineConfig({

  test: {
    server: {
      deps: {

        inline: ['vuetify'],

      },
    },
  },
});
```

--------------------------------

### Install Previous Quokka Version in VS Code

Source: https://quokkajs.com/docs/support/previous

Instructions on how to downgrade Quokka.js in VS Code to a version compatible with an expired license. This involves checking the license expiry date and using the 'Install Another Version' context menu.

```bash
Right-click on the extension name in VS Code and use the 'Install Another Version' menu item.
```

```json
{
  "quokka.suppressExpirationNotifications": true
}
```

--------------------------------

### Quokka.js for JetBrains IDEs Releases

Source: https://quokkajs.com/docs/support/previous

Lists historical releases of Quokka.js specifically for JetBrains Integrated Development Environments (IDEs). Each entry includes the version number and release date. This information is useful for users managing their Quokka.js installations within JetBrains products.

```text
| Quokka-1.0.351 for JetBrains IDEs | 2022-06-29  
| Quokka-1.0.350 for JetBrains IDEs | 2022-06-28  
| Quokka-1.0.349 for JetBrains IDEs | 2022-06-24  
| Quokka-1.0.348 for JetBrains IDEs | 2022-06-24  
| Quokka-1.0.347 for JetBrains IDEs | 2022-06-22  
| Quokka-1.0.346 for JetBrains IDEs | 2022-06-21  
| Quokka-1.0.345 for JetBrains IDEs | 2022-06-16  
| Quokka-1.0.344 for JetBrains IDEs | 2022-06-16  
| Quokka-1.0.343 for JetBrains IDEs | 2022-06-16  
| Quokka-1.0.342 for JetBrains IDEs | 2022-05-22  
| Quokka-1.0.341 for JetBrains IDEs | 2022-05-16  
| Quokka-1.0.340 for JetBrains IDEs | 2022-05-16  
| Quokka-1.0.339 for JetBrains IDEs | 2022-05-06  
| Quokka-1.0.338 for JetBrains IDEs | 2022-05-03  
| Quokka-1.0.337 for JetBrains IDEs | 2022-05-03  
| Quokka-1.0.336 for JetBrains IDEs | 2022-05-03  
| Quokka-1.0.335 for JetBrains IDEs | 2022-04-26  
| Quokka-1.0.334 for JetBrains IDEs | 2022-04-26  
| Quokka-1.0.333 for JetBrains IDEs | 2022-04-19  
```

--------------------------------

### Quokka Scratch File with Inline HTML

Source: https://quokkajs.com/docs/config/jsdom

An example of using Quokka.js with an inline HTML string for JSDOM configuration, demonstrating how to access and log content from the simulated DOM.

```javascript
({ 
  plugins: ['jsdom-quokka-plugin'],
  jsdom: { html: `<div id="testDiv">Hello</div>` },
});

const testDiv = document.getElementById('testDiv');
console.log(testDiv.innerHTML);
```

--------------------------------

### Quokka Auto-Configuration for Create React App

Source: https://quokkajs.com/docs/guides/react

This JSON configuration enables Quokka's automatic detection and setup for projects created with Create React App. It includes necessary plugins and Babel presets for React.

```json
{
  "plugins": ["jsdom-quokka-plugin"],
  "babel": {
    "ts": true,
    "presets": ["react-app"]
  }
}
```

--------------------------------

### Inline Quokka Configuration

Source: https://quokkajs.com/docs/config/overview

Configure Quokka directly within your Quokka file by starting the file with an object expression containing your settings. This method offers the highest precedence for configuration.

```javascript
({\n\n\nbabel: true\n\n})\n\nvar abc = 123;\n\nabc\n\n// the rest of your Quokka file
```

--------------------------------

### Trigger Quokka CPU Profiler Action

Source: https://quokkajs.com/docs/features/cpu-profiler

This describes triggering the CPU profiler through an intention action or a profile button, which is another method to start performance analysis in Quokka.

```shell
Profile
```

--------------------------------

### Start Quokka Time Machine Debugger

Source: https://quokkajs.com/docs/features/time-machine

This snippet shows the command to initiate the Quokka.js Time Machine debugger. It can be activated via a keyboard shortcut or by clicking an icon in the Quokka output panel.

```JavaScript
Quokka.js: Start Time Machine On The Current Line (Shift + F5)
```

--------------------------------

### Quokka Scratch File Loading HTML from File

Source: https://quokkajs.com/docs/config/jsdom

An example of configuring Quokka.js to load HTML content from an external file ('test.html') using the JSDOM plugin, and then accessing DOM elements.

```javascript
({ 
  plugins: ['jsdom-quokka-plugin'],
  jsdom: { file: 'test.html' }, // Located in project root
});

const testDiv = document.getElementById('testDiv');
console.log(testDiv.innerHTML);
```

--------------------------------

### React Component Example in Quokka

Source: https://quokkajs.com/docs/guides/how-does-it-work

Demonstrates a React functional component that will not execute in Quokka's Node.js environment because it's defined but never called. This highlights the need for runtime compatibility and execution context.

```JavaScript
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// Running this code in Quokka does nothing as the
// "Welcome" function is defined but is never called.
```

--------------------------------

### Launch Code Story Viewer in VS Code

Source: https://quokkajs.com/docs/features/code-story

This snippet demonstrates how to launch Quokka's Code Story Viewer in VS Code. The viewer can be accessed via the 'View Code Story' command or through a code lens in the Quokka output header. It also starts Quokka's Time Machine if it's not already running.

```shell
View Code Story
```

--------------------------------

### Configure jsdom for Browser Runtime in Quokka.js

Source: https://quokkajs.com/docs/guides/jsdom

This snippet shows how to configure Quokka.js to use jsdom for simulating a browser runtime environment. It requires the jsdom package to be installed in your project and specific configuration settings within Quokka.

```JavaScript
{
  "quokka": {
    "framework": "jsdom"
  }
}
```

--------------------------------

### Quokka.js: Rapid Prototyping Playground

Source: https://quokkajs.com/docs/intro/quokka

Quokka.js acts as a rapid prototyping playground within your editor. It provides access to project files, inline reporting, code coverage, and interactive output, updating runtime values as you type.

```JavaScript
console.log('Hello from Quokka!');
```

```TypeScript
const message: string = 'Hello from Quokka!';
console.log(message);
```

--------------------------------

### Install tsx or @swc-node/register Globally

Source: https://quokkajs.com/docs/config/typescript

Instructions to install TypeScript compilers globally for Quokka.js. This allows you to set tsx or @swc-node/register as the default compiler.

```Bash
npm install tsx
```

```Bash
npm install @swc-node/register
```

--------------------------------

### Install Canvas Package for Web Canvas API

Source: https://quokkajs.com/docs/config/jsdom

Installs the 'canvas' package using npm, which is necessary when using HTMLCanvasElement objects with Quokka.js and JSDOM.

```bash
npm install canvas
```

--------------------------------

### Quokka Snap Commands (VS Code)

Source: https://quokkajs.com/docs/features/snaps

Lists VS Code commands provided by Quokka.js for managing Snaps, such as starting/stopping discovery in a file and generating snaps with or without output using snippets like `snap` and `snapo`.

```Text
Quokka: Snaps Auto Discovery
Quokka.js: Stop Snaps Discovery in Current File
Quokka.js: Start Snaps Discovery in Current File
snap
snapo
```

--------------------------------

### Using Benchmarking Plugin

Source: https://quokkajs.com/docs/config/extensibility

Illustrates how a user can utilize the global 'time' function provided by a benchmarking plugin within a Quokka file.

```JavaScript
time(() => {
  // code to measure the execution time for
});

time.repeat(10, () => {
  // ...
});
```

--------------------------------

### Configure TypeScript Compiler in Quokka.js

Source: https://quokkajs.com/docs/config/typescript

Example of how to specify a preferred TypeScript compiler (e.g., @swc-node/register) within the Quokka.js configuration file.

```JSON
{

"ts": {

"compiler": "@swc-node/register"

}

}
```

--------------------------------

### Quokka.js for JetBrains IDEs Releases

Source: https://quokkajs.com/docs/support/previous

Lists Quokka.js versions compatible with JetBrains IDEs. Each entry includes the version number and release date.

```IDE Configuration
Quokka-1.0.270 for JetBrains IDEs | 2021-01-20
Quokka-1.0.269 for JetBrains IDEs | 2021-01-14
Quokka-1.0.268 for JetBrains IDEs | 2020-12-07
Quokka-1.0.267 for JetBrains IDEs | 2020-12-04
Quokka-1.0.266 for JetBrains IDEs | 2020-12-02
Quokka-1.0.265 for JetBrains IDEs | 2020-11-13
Quokka-1.0.263 for JetBrains IDEs | 2020-11-09
Quokka-1.0.261 for JetBrains IDEs | 2020-10-15
Quokka-1.0.260 for JetBrains IDEs | 2020-10-13
Quokka-1.0.259 for JetBrains IDEs | 2020-10-11
Quokka-1.0.258 for JetBrains IDEs | 2020-10-06
Quokka-1.0.257 for JetBrains IDEs | 2020-10-03
Quokka-1.0.256 for JetBrains IDEs | 2020-09-28
Quokka-1.0.255 for JetBrains IDEs | 2020-09-20
Quokka-1.0.254 for JetBrains IDEs | 2020-09-09
Quokka-1.0.253 for JetBrains IDEs | 2020-09-01
Quokka-1.0.252 for JetBrains IDEs | 2020-08-26
Quokka-1.0.251 for JetBrains IDEs | 2020-08-03
Quokka-1.0.250 for JetBrains IDEs | 2020-07-24
Quokka-1.0.249 for JetBrains IDEs | 2020-07-22
```

--------------------------------

### Specify Babel Path

Source: https://quokkajs.com/docs/config/babel

Allows Quokka to use a specific installation of 'babel-core' by providing its absolute or relative path. This is helpful when 'babel-core' is not in the default project or global node_modules.

```json
{
  "babel": {
    "path": "...babel-core"
  }
}
```
Tokens:
Raw