### Example: Linking GUI, VM, and Blocks for Development

Source: https://github.com/scratchfoundation/scratch-gui/wiki/Getting-Started

A comprehensive example demonstrating the process of cloning, installing, linking, and starting the Scratch GUI, VM, and Blocks repositories together for local development.

```bash
mkdir Scratch
cd Scratch
git clone https://github.com/llk/scratch-gui
git clone https://github.com/llk/scratch-vm
git clone https://github.com/llk/scratch-blocks

cd scratch-vm
npm install
npm link
npm run watch

cd ../scratch-blocks
npm install
npm link

cd ../scratch-gui
npm install
npm link scratch-vm scratch-blocks
npm start

# Access at http://localhost:8601
```

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

### Clone and Set Up Scratch GUI Repository

Source: https://github.com/scratchfoundation/scratch-gui/wiki/Getting-Started

Clones the Scratch GUI repository, sets up the upstream remote, installs dependencies, and starts the local development server. Changes to the 'develop' branch of the upstream repository can be pulled.

```bash
git clone <your-fork-of-scratch-gui>
cd scratch-gui
git remote add upstream https://github.com/LLK/scratch-gui.git
git config branch.develop.remote upstream
npm install
npm start
```

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

### Install Node.js and Git Prerequisites

Source: https://github.com/scratchfoundation/scratch-gui/wiki/Getting-Started

Installs Node.js version 12 and Git, essential for the Scratch GUI development environment. NVM can be used to manage multiple Node.js versions.

```bash
brew install node
# Or use nvm to switch Node versions if multiple are installed
```

```bash
brew install git
```

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

### Install Dependencies (Bash)

Source: https://github.com/scratchfoundation/scratch-gui/blob/develop/README.md

Install project dependencies, with an option to ignore optional dependencies and suppress related warnings. This command is crucial for setting up the development environment.

```bash
npm install --no-optional

```

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

### Clone and Set Up Scratch VM Repository

Source: https://github.com/scratchfoundation/scratch-gui/wiki/Getting-Started

Clones the Scratch VM repository, sets up the upstream remote, and installs its dependencies. A local playground is available for testing.

```bash
git clone <your-fork-of-scratch-vm>
cd scratch-vm
git remote add upstream https://github.com/LLK/scratch-vm.git
git config branch.develop.remote upstream
npm install
```

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

### Configure CircleCI for Custom Dependencies (YAML)

Source: https://github.com/scratchfoundation/scratch-gui/wiki/Publishing-to-GitHub-Pages

An example snippet from a CircleCI configuration file (.circleci/.config.yml) showing how to set up the build environment to handle custom git dependencies, specifically for 'scratch-blocks'. It includes steps to install Google Closure Library and then run npm install for the dependency.

```yaml
jobs:
  setup:
    <<: *defaults
    steps:
      ...
      - run: npm install
      - run: cd node_modules/scratch-blocks && ln -s $(npm root)/google-closure-library ../closure-library --force && npm --production=false install && cd -
```

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

### Example Bug Reproduction Steps (Scratch GUI)

Source: https://github.com/scratchfoundation/scratch-gui/wiki/Writing-good-repro-steps

A practical example demonstrating how to list specific actions and code blocks to reproduce a bug. This includes detailing block interactions and user interface elements.

```text
drag the cat partially off the stage
Add the following stack
  * `When green flag clicked` 
  * `forever` 
  * `if touching mouse pointer` 
  * `change color effect by 15`
place the mouse off the stage but over where the cat would be
Note: the cat changes color
```

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

### Run scratch-gui Development Server

Source: https://github.com/scratchfoundation/scratch-gui/blob/develop/README.md

Starts the development server for scratch-gui. After running this command, the Scratch GUI playground can be accessed at http://localhost:8601/ in your browser.

```bash
npm start
```

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

### Clone and Install scratch-gui Locally

Source: https://github.com/scratchfoundation/scratch-gui/blob/develop/README.md

Clones the scratch-gui repository from GitHub and installs its dependencies locally. This is the recommended approach for developers who wish to edit or run the project themselves. Consider using --depth=1 for the clone to reduce repository history size.

```bash
git clone https://github.com/scratchfoundation/scratch-gui.git
cd scratch-gui
npm install
```

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

### Clone and Set Up Scratch Blocks Repository

Source: https://github.com/scratchfoundation/scratch-gui/wiki/Getting-Started

Clones the Scratch Blocks repository, sets up the upstream remote, and installs dependencies. Changes require running 'npm run prepublish' and a hard refresh in the browser, as hot-reloading is not supported.

```bash
git clone <your-fork-of-scratch-blocks>
cd scratch-blocks
git remote add upstream https://github.com/LLK/scratch-blocks.git
git config branch.develop.remote upstream
npm install
# If 'Closure not found' error, follow wiki instructions to install closure library.
npm run prepublish
```

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

### Install scratch-gui from GitHub using npm

Source: https://github.com/scratchfoundation/scratch-gui/blob/develop/README.md

Installs the scratch-gui package directly from its GitHub repository using npm. This is useful for incorporating the latest development version into your Node.js environment or application.

```bash
npm install https://github.com/scratchfoundation/scratch-gui.git
```

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

### Negative Reproduction Case Example (Scratch GUI)

Source: https://github.com/scratchfoundation/scratch-gui/wiki/Writing-good-repro-steps

Shows how to specify conditions under which a bug does *not* occur, providing valuable context. For example, noting that an issue is not reproducible with the square tool when it is with the circle tool.

```text
select the circle tool, note: you can't see this issue with the square tool.
```

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

### Manual Build and Deploy to GitHub Pages (Bash)

Source: https://github.com/scratchfoundation/scratch-gui/wiki/Publishing-to-GitHub-Pages

Builds the Scratch GUI for deployment and pushes the build artifacts to the 'gh-pages' branch. This makes the GUI accessible via github.io. Assumes npm is installed and project dependencies are managed via npm.

```bash
# Build for github.io
npm run build
# Commit and push the build result to your gh-pages branch
npm run deploy
```

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

### View Available Package Versions (Bash)

Source: https://github.com/scratchfoundation/scratch-gui/blob/develop/README.md

Query npm to check available versions of a specific package. This is useful when troubleshooting dependency issues and determining which version to install.

```bash
npm view react-intl-redux@0.* version

```

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

### Watch for Changes and Auto-Rebuild scratch-gui

Source: https://github.com/scratchfoundation/scratch-gui/blob/develop/README.md

Starts a watcher that automatically rebuilds the scratch-gui project whenever code changes are detected. This is an alternative to manual builds during development. Note that this can sometimes be unreliable.

```bash
BUILD_MODE=dist npm run watch
```

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

### Resolve Peer Dependencies (Bash)

Source: https://github.com/scratchfoundation/scratch-gui/blob/develop/README.md

Install specific versions of peer dependencies that are required by project packages. This command helps in resolving 'unmet peer dependency' warnings and ensures compatibility.

```bash
npm install --no-optional --save-dev react-intl-redux@^0.7

```

```bash
npm install --no-optional --save-dev react-responsive@^5.0.0

```

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

### Update Scratch Dependency in package.json (JSON)

Source: https://github.com/scratchfoundation/scratch-gui/wiki/Publishing-to-GitHub-Pages

Demonstrates how to update dependencies in a package.json file to point to custom builds of 'scratch-blocks' or 'scratch-vm' hosted on GitHub. This replaces the standard npm package installation with a direct link to a specific branch or commit in a repository.

```json
"dependencies": {
  "scratch-blocks": "github:yourusername/scratch-blocks#your-branch",
  "scratch-vm": "github:yourusername/scratch-vm#your-branch"
}
```

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

### Build and Run Integration Tests (Bash)

Source: https://github.com/scratchfoundation/scratch-gui/blob/develop/README.md

Build the project and then run integration tests, which simulate user interaction in a headless browser. Requires Chrome/Chromium and Chromedriver. You can run all tests or a single file.

```bash
npm run build

```

```bash
npm run test:integration

```

```bash
$(npm bin)/jest --runInBand test/integration/backpack.test.js

```

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

### Link Scratch VM and Scratch Blocks to Scratch GUI

Source: https://github.com/scratchfoundation/scratch-gui/wiki/Getting-Started

Links the locally developed Scratch VM and Scratch Blocks repositories to the Scratch GUI project. This allows changes in the linked repositories to be reflected in the GUI.

```bash
# In scratch-vm directory:
npm link

# In scratch-blocks directory:
npm link

# In scratch-gui directory:
npm link scratch-vm scratch-blocks
```

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

### Build scratch-gui for Distribution

Source: https://github.com/scratchfoundation/scratch-gui/blob/develop/README.md

Builds the scratch-gui project for distribution. This command compiles the React components into a usable format for deployment. The BUILD_MODE=dist flag ensures it's optimized for production.

```bash
BUILD_MODE=dist npm run build
```

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

### Conditional Bug Reproduction Logic (Scratch GUI)

Source: https://github.com/scratchfoundation/scratch-gui/wiki/Writing-good-repro-steps

Illustrates how to describe conditions within reproduction steps, such as 'select the circle or square tools', indicating that the bug can be reproduced via multiple input methods.

```text
Select the circle or square tools.
```

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

### Run All scratch-gui Tests

Source: https://github.com/scratchfoundation/scratch-gui/blob/develop/README.md

Executes all tests for the scratch-gui project, including linting, unit tests, builds, and integration tests. This command ensures the project's code quality and stability.

```bash
npm test
```

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

### Link Local scratch-gui Repository

Source: https://github.com/scratchfoundation/scratch-gui/blob/develop/README.md

Creates a symbolic link from the global npm modules to your local scratch-gui repository. This allows other projects to use your local build of scratch-gui instead of fetching it from npm.

```bash
npm link
```

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

### VS Code Basic launch.json Configuration

Source: https://github.com/scratchfoundation/scratch-gui/wiki/Debugging-with-Visual-Studio-Code

This JSON snippet represents the minimum required structure for a `launch.json` file in VS Code for debugging. It includes version control and a placeholder for debugging configurations, typically for browsers like Chrome.

```json
{
    "version": "0.2.0",
    "configurations": []
}
```

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

### Run Integration Tests with Watch Mode (Bash)

Source: https://github.com/scratchfoundation/scratch-gui/blob/develop/README.md

Run integration tests for a specific file while observing the browser's activity, rather than running in headless mode. This is achieved by setting the USE_HEADLESS environment variable.

```bash
USE_HEADLESS=no $(npm bin)/jest --runInBand test/integration/backpack.test.js

```

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

### VS Code Workspace Configuration for Debugging

Source: https://github.com/scratchfoundation/scratch-gui/wiki/Debugging-with-Visual-Studio-Code

This JSON snippet shows the minimal required structure for a VS Code workspace configuration to enable debugging, specifically ensuring the 'launch' and 'configurations' properties are present.

```json
{
    "folders": [
      // no need to edit the folders section
    ],
    "launch": {
        "configurations": [],  // this line is REQUIRED
        "compounds": []        // this line is optional
    }
}
```

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

### Run Single Unit Test File (Bash)

Source: https://github.com/scratchfoundation/scratch-gui/blob/develop/README.md

Execute a specific unit test file, such as the button component tests. This is useful for targeted debugging and development.

```bash
$(npm bin)/jest --runInBand test/unit/components/button.test.jsx

```

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

### Deploy to GitHub Pages with Custom Directory (Bash)

Source: https://github.com/scratchfoundation/scratch-gui/wiki/Publishing-to-GitHub-Pages

Deploys the Scratch GUI build to a specific directory within the gh-pages branch, allowing it to be accessed at a custom URL path. This is useful for organizing different versions or branches.

```bash
npm run deploy -- -e branchName
```

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

### Link Dependent Project to Local scratch-gui

Source: https://github.com/scratchfoundation/scratch-gui/blob/develop/README.md

Links a project (e.g., scratch-www) to use the locally linked scratch-gui package. After running 'npm link scratch-gui' in the dependent project, it will use your local build.

```bash
npm link scratch-gui
```

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

### Run Unit Tests (Bash)

Source: https://github.com/scratchfoundation/scratch-gui/blob/develop/README.md

Execute unit tests in isolation or in watch mode. These tests focus on individual components and functions without involving external dependencies.

```bash
npm run test:unit

```

```bash
npm run test:unit -- --watch

```

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

### Push English Source File to Transifex in scratch-blocks

Source: https://github.com/scratchfoundation/scratch-gui/wiki/Localization

Pushes the generated en.json source file from scratch-blocks to Transifex for translation.

```bash
> npm run translate:sync:src
```

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

### Push Source Strings to Transifex (scratch-gui, scratch-paint, scratch-vm)

Source: https://github.com/scratchfoundation/scratch-gui/wiki/Localization

This command pushes extracted source strings to Transifex for localization. It's crucial to run this before pulling translations to ensure that new strings include English defaults for translators.

```bash
> npm run i18n:push
```

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

### Configure Transifex for Translations

Source: https://github.com/scratchfoundation/scratch-gui/wiki/Localization

This command configures the Transifex client to manage translation files. It specifies the source English file and the pattern for other language files, setting up automatic local file handling and source file synchronization.

```bash
tx set --auto-local -r scratch-editor.interface translations/<lang>.json' -s en --type CHROME --source-file translations/en.json
```

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

### Extract Strings from Source Files (scratch-gui, scratch-paint, scratch-vm)

Source: https://github.com/scratchfoundation/scratch-gui/wiki/Localization

Extracts translatable strings from the source files of scratch-gui, scratch-paint, and scratch-vm into an en.json file.

```bash
> npm run i18n:src
```

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

### Unlink Repositories

Source: https://github.com/scratchfoundation/scratch-gui/blob/develop/README.md

Removes the symbolic links created by 'npm link' and 'npm link scratch-gui'. This command should be run in both the scratch-gui repository and any dependent projects to revert to using the npm-installed version.

```bash
npm unlink
```

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

### Pull Translations from Transifex using Transifex Client

Source: https://github.com/scratchfoundation/scratch-gui/wiki/Localization

These commands use the Transifex client to pull translations for the 'scratch-editor' resource. The `-f` flag forces an update, and the `-s` flag fetches the source language (English). Pulling specific locales or all available languages is also supported.

```bash
> tx pull -r 'scratch-editor.*' -f
> tx pull -r 'scratch-editor.*' -s
> tx pull -r 'scratch-editor.*' -l <locale>
> tx pull -r 'scratch-editor.*' -a
```

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

### Chrome Launch Configuration for Scratch GUI Debugging

Source: https://github.com/scratchfoundation/scratch-gui/wiki/Debugging-with-Visual-Studio-Code

This JSON configuration is used within VS Code's launch settings to enable debugging of the Scratch GUI application in Chrome. It specifies the debugger type, request method, name, source map path overrides, the URL to launch, and the web root.

```json
{
    "type": "chrome",
    "request": "launch",
    "name": "Launch scratch-gui in Chrome",
    "sourceMapPathOverrides": {
        "webpack://GUI/./*": "${workspaceFolder}/*", // use ${workspaceFolder:scratch-gui} in a multi-root workspace
    },
    "url": "http://localhost:8601", // note the port number!
    "webRoot": "/:" // map other / generated files to an impossible path
}
```

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

### Combined Translation Update in scratch-blocks

Source: https://github.com/scratchfoundation/scratch-gui/wiki/Localization

A convenience command that combines pushing source strings and pulling updated translations for scratch-blocks.

```bash
> npm run translate:update
```

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

### Source Map Path Overrides for Multi-root Workspaces

Source: https://github.com/scratchfoundation/scratch-gui/wiki/Debugging-with-Visual-Studio-Code

This JSON snippet demonstrates how to configure `sourceMapPathOverrides` in VS Code for a multi-root workspace. It maps webpack-generated paths for the GUI and scratch-vm to their respective workspace folders, enabling VS Code to correctly locate and display non-minified source code for debugging.

```json
"sourceMapPathOverrides": {
     "webpack://GUI/./*": "${workspaceFolder:scratch-gui}/*",
     "webpack://GUI/./node_modules/scratch-vm/*": "${workspaceFolder:scratch-vm}/*",
}
```

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

### Generate English Source File in scratch-blocks

Source: https://github.com/scratchfoundation/scratch-gui/wiki/Localization

Generates the English source file (en.json) for scratch-blocks. If new messages are introduced, this file needs to be committed as part of the pull request.

```bash
> npm run translate
```

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

### Update Translations in scratch-blocks

Source: https://github.com/scratchfoundation/scratch-gui/wiki/Localization

This process updates translations for scratch-blocks. It involves updating the scratch-l10n dependency and then pulling the latest translations. The expected outcome is that only the scratch_msgs.js file will be modified.

```bash
> npm run translate:sync:translations
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.