Snaps
Please note that Quokka’s Code Story Viewer feature is available in VS Code only.
Quokka’s Snaps feature is designed to address the delay between writing code and validating it, allowing you to quickly and easily make sure that you are on the right track. Normally you need to switch context between writing your code and running your code in order to validate it. With Snaps, you can execute context aware code snippets directly in your editor, anywhere in your project, even if your application/tests are not working.
{{ in VS Code, the editor will automatically add the closing }} for you. Quokka then runs your code within these blocks, providing instant feedback.Execution model
Each Quokka Snap’s code, and any code that it is calling, is executed in node.js, as if the snap’s code was located at the end of your source file. Prior to the execution, a few changes are made to the code to make it possible for a snap to run even if imports are failing or if there are any other global scope runtime errors.
Within a Quokka Snap, you have access to your file’s program scope, import/exports, global scope variables/functions, node.js built-in objects and functions, and environment variables. You do not have access to code that is not in the global scope, such as code within a function or class, even if the Snap is within that function or class.
Unlike when you start Quokka on your file, if there are errors in your program scope, like a failing import, the code in your Snap will still execute. This significantly reduces the hassle of trying to set up an environment for testing your code, and allows you to focus on the specific code you’re testing.
Output
In addition to other ways to capture and explore code output, such as Logpoints, Live
Comments and Value Explorer, Quokka Snaps introduces a new capability for outputting
runtime values. By adding two backticks `` next to the closing }}, any logged values will be dynamically
logged between the backticks in your file.
Commands to quickly add and remove the backticks output are available via the editor’s command palette, quick lightbulb actions, and snap hover icons.
Security
To ensure a safe and controlled environment, Quokka Snaps includes security settings in VS Code, that prohibit Quokka Snaps from running automatically. With the default settings, you will be prompted to allow Quokka Snaps to run for a given file each time you open that file, or whenever you restart the editor.
To allow running ALL snaps in the file you may simply press Spacebar twice inside a snap’s body. Commands to allow
running ALL snaps in the file are also available via the editor’s command palette, quick lightbulb actions, and snap
hover icons.
You may want to allow Quokka Snaps to run automatically in certain scenarios. For example, you may want to create a
workspace setting override to allow Quokka Snaps to run automatically in a trusted workspace. To modify the settings,
open VS Code settings and search for quokka.snaps. Then, adjust the settings to your preference.
Other commands and settings
To completely disable Quokka Snaps feature, you may use the Quokka: Snaps Auto Discovery VS Code setting.
To temporarily disable the feature on a selected file, you may use the Quokka.js: Stop Snaps Discovery in Current File and Quokka.js: Start Snaps Discovery in Current File commands.
The feature comes with two handy code snippets, snap and snapo, which you can use to quickly generate a snap with
or without output. Additionally, you can employ these snippets to surround an existing code fragment with a snap.
Supported languages
Quokka Snaps are supported in JavaScript, TypeScript, Vue and Svelte files.