Symfony Reprise

https://github.com/symfony/reprise
Admin
Symfony Reprise integrates Vite and Rsbuild with Symfony, bringing Webpack Encore's asset management...
Tokens:29,207
Snippets:192
Trust Score:9.5
License:MIT
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Install dependencies

Source: https://github.com/symfony/reprise/blob/main/CONTRIBUTING.md

Install PHP and JavaScript dependencies using Composer and pnpm.

```shell
$ composer install
$ pnpm install
```

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

### entrypoints.json example

Source: https://github.com/symfony/reprise/blob/main/AGENTS.md

Example of the entrypoints.json file structure mapping entry names to asset URLs grouped by type, with optional integrity section for SRI hashes.

```json
{ "entrypoints": { "app": { "js": ["/build/runtime.js", "/build/app.js"], "css": ["/build/app.css"] } } }
```

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

### Install @symfony/reprise with npm

Source: https://github.com/symfony/reprise/blob/main/assets/README.md

Install the package as a dev dependency using npm.

```bash
npm install @symfony/reprise --save-dev
```

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

### Install Symfony Reprise with Composer

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Install the Symfony Reprise bundle using Composer and Symfony Flex.

```terminal
$ composer require symfony/reprise
```

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

### Example commit messages

Source: https://github.com/symfony/reprise/blob/main/CONTRIBUTING.md

Examples of commit messages following the [<Scope>] <Short description> convention.

```text
[Stimulus] Emit forward-slash local controller paths
[Docs] Frame Stimulus usage as the Encore experience
[CI] Cancel superseded runs with a concurrency group
```

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

### Start Stimulus App with Reprise

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Imports and starts the Stimulus application using Reprise's startStimulusApp() function. This is the entry point for using Stimulus with Reprise.

```javascript
import { startStimulusApp } from '@symfony/reprise/stimulus'

const app = startStimulusApp()
```

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

### Run Vite dev server in playground

Source: https://github.com/symfony/reprise/blob/main/AGENTS.md

Starts the Vite development server for the playground Symfony app. Run from the playground directory.

```bash
npm -C playground run vite:dev
```

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

### Run Rsbuild dev server in playground

Source: https://github.com/symfony/reprise/blob/main/AGENTS.md

Starts the Rsbuild development server for the playground Symfony app. Run from the playground directory.

```bash
npm -C playground run rsbuild:dev
```

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

### Install Stimulus and UX Leaflet Map

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Command to install required packages for using Stimulus and UX Leaflet Map with Reprise.

```terminal
$ npm install @hotwired/stimulus @symfony/ux-leaflet-map
```

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

### Update main branch

Source: https://github.com/symfony/reprise/blob/main/MAINTAINERS.md

Start from an up-to-date main branch before cutting a release.

```bash
git checkout main
git pull upstream main
```

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

### Local Controller with Lazy Loading Comment

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Example of a local controller file that uses a stimulusFetch: 'lazy' comment to load on demand. The comment can be a block or single-line comment.

```javascript
import { Controller } from '@hotwired/stimulus'

/* stimulusFetch: 'lazy' */
export default class extends Controller {}
```

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

### Build, test, lint, and format assets

Source: https://github.com/symfony/reprise/blob/main/CONTRIBUTING.md

Commands for building the plugin, watching for changes, running tests, linting, and formatting the assets.

```shell
# Build the plugin
$ pnpm build

# Watch and rebuild on change
$ pnpm dev

# Run the test suite
$ pnpm test

# Lint
$ pnpm lint

# Format (use `pnpm fmt:check` to only check, without writing)
$ pnpm fmt
```

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

### Full reprise.yaml configuration reference

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

All optional settings with their default values. Includes output_path, builds, strict_mode, cache, asset_package, crossorigin, preload, script_attributes, and link_attributes.

```yaml
# config/packages/reprise.yaml
reprise:
    # Directory the @symfony/reprise plugin writes entrypoints.json and manifest.json into.
    # Set to false when using only named builds (requires at least one entry under builds).
    output_path: '%kernel.project_dir%/public/build'

    # Additional named builds: a map of build name -> output directory (see `Multiple builds`_).
    builds: {}

    # Throw when entrypoints.json or a requested entry is missing, instead of rendering nothing.
    strict_mode: true

    # Cache the parsed entrypoints.json in a compiled PHP file, warmed at cache:warmup (needs symfony/cache).
    cache: false

    # A framework.assets package name used to resolve entry URLs. null uses the default package.
    asset_package: null

    # crossorigin attribute set alongside SRI integrity: false, 'anonymous' or 'use-credentials'.
    crossorigin: false

    # Register rendered assets as WebLink HTTP/2 Link: preload headers (needs symfony/web-link).
    preload: true

    # Default attributes added to every rendered <script> / <link> tag.
    script_attributes: []
    link_attributes: []
```

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

### reprise_entry_css_files

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Returns a list of CSS URLs for a given entry point. This is the Reprise equivalent of `encore_entry_css_files`.

```APIDOC
## reprise_entry_css_files

### Description
Returns a list of CSS file URLs for the specified entry point. This is the Reprise equivalent of `encore_entry_css_files`.

### Method
Twig Function

### Parameters
- **entryName** (string) - Required - The name of the entry point (e.g., 'app').
- **packageName** (string) - Optional - The asset package name (defaults to the default package).

### Response
Returns an array of CSS URLs.
```

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

### reprise.yaml with multiple builds

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Configuration for the main app and an additional named build. The main app is addressed without a build name; each extra build maps a name to its output directory.

```yaml
# config/packages/reprise.yaml
reprise:
    # the main app (your existing config), addressed without a build name
    output_path: '%kernel.project_dir%/public/build'
    builds:
        # each extra build: name -> the directory its entrypoints.json lives in
        widget: '%kernel.project_dir%/public/widget-build'
```

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

### Cut release commit and tag

Source: https://github.com/symfony/reprise/blob/main/MAINTAINERS.md

Run the release helper script with a bump level (minor, patch, major, or explicit version). It checks for a clean main in sync with upstream, runs pnpm version in assets/, and creates the v<version> tag.

```bash
./release.sh minor   # or patch / major / an explicit version such as 0.2.0
```

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

### Register Extra Controllers with startStimulusApp()

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Shows how to keep the Stimulus Application returned by startStimulusApp() and register controllers not declared in controllers.json, similar to Webpack Encore.

```javascript
import { startStimulusApp } from '@symfony/reprise/stimulus'
import Clipboard from '@stimulus-components/clipboard'

const app = startStimulusApp()

app.register('clipboard', Clipboard)
```

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

### Run playground for manual verification

Source: https://github.com/symfony/reprise/blob/main/CONTRIBUTING.md

Commands to run the playground app with Vite and Rsbuild for manual end-to-end verification.

```shell
$ npm -C playground run vite:dev
$ npm -C playground run vite:build

$ npm -C playground run rsbuild:dev
$ npm -C playground run rsbuild:build
```

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

### reprise_entry_js_files

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Returns a list of JavaScript URLs for a given entry point. This is the Reprise equivalent of `encore_entry_js_files`.

```APIDOC
## reprise_entry_js_files

### Description
Returns a list of JavaScript file URLs for the specified entry point. This is the Reprise equivalent of `encore_entry_js_files`.

### Method
Twig Function

### Parameters
- **entryName** (string) - Required - The name of the entry point (e.g., 'app').
- **packageName** (string) - Optional - The asset package name (defaults to the default package).

### Response
Returns an array of JavaScript URLs.
```

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

### Build Vite assets in playground

Source: https://github.com/symfony/reprise/blob/main/AGENTS.md

Builds the Vite assets for the playground Symfony app. Run from the playground directory.

```bash
npm -C playground run vite:build
```

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

### Twig functions with build argument

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Shows how to load assets from the default build (no build argument) and from a named build using the 'build' argument on reprise_entry_script_tags and reprise_entry_link_tags.

```twig
{# the main app (default build) #}
{{ reprise_entry_script_tags('app') }}
{{ reprise_entry_link_tags('app') }}

{# the widget build, selected with the build argument #}
{{ reprise_entry_script_tags('widget', build='widget') }}
{{ reprise_entry_link_tags('widget', build='widget') }}
```

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

### Swap Composer packages from WebpackEncoreBundle to Reprise

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Run these commands to remove the old bundle and require the new one.

```terminal
$ composer remove symfony/webpack-encore-bundle
$ composer require symfony/reprise
```

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

### Configure asset copying with Rsbuild

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Basic Rsbuild configuration using the Symfony plugin to copy assets from 'assets/images' to 'images'. Both 'from' and 'to' are required; 'to' is the destination prefix for the manifest key. Pass an empty 'to' to copy files at the root of 'outputPath'.

```javascript
// rsbuild.config.ts
import { defineConfig } from '@rsbuild/core'
import Symfony from '@symfony/reprise/rsbuild'

export default defineConfig({
  // ...
  plugins: [
    Symfony({
      copy: [
        {
          from: 'assets/images',
          to: 'images',
        },
      ],
    }),
  ],
})
```

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

### Run a single test file with pnpm test

Source: https://github.com/symfony/reprise/blob/main/AGENTS.md

Use this command to run a specific test file within the assets package. The path is relative to the assets/ directory.

```bash
pnpm test test/core/format.test.ts
```

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

### Build Rsbuild assets in playground

Source: https://github.com/symfony/reprise/blob/main/AGENTS.md

Builds the Rsbuild assets for the playground Symfony app. Run from the playground directory.

```bash
npm -C playground run rsbuild:build
```

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

### Vite File Copy Configuration

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Vite configuration to copy static assets (e.g., images) into the build and record them in manifest.json.

```javascript
// vite.config.ts
import { defineConfig } from 'vite'
import Symfony from '@symfony/reprise/vite'

export default defineConfig({
  // ...
  plugins: [
    Symfony({
      copy: [
        {
          from: 'assets/images',
          to: 'images',
        },
      ],
    }),
  ],
})
```

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

### reprise_entry_exists

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Checks whether a given entry point exists. This is the Reprise equivalent of `encore_entry_exists`.

```APIDOC
## reprise_entry_exists

### Description
Checks whether a given entry point exists in the entrypoints.json file. This is the Reprise equivalent of `encore_entry_exists`.

### Method
Twig Function

### Parameters
- **entryName** (string) - Required - The name of the entry point (e.g., 'app').
- **packageName** (string) - Optional - The asset package name (defaults to the default package).

### Response
Returns `true` if the entry exists, `false` otherwise.
```

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

### Fork and clone the repository

Source: https://github.com/symfony/reprise/blob/main/CONTRIBUTING.md

Clone your fork of symfony/reprise using GitHub CLI or SSH, then add the upstream remote.

```shell
# With GitHub CLI https://cli.github.com/
$ gh repo clone <USERNAME>/reprise reprise

# Using SSH
$ git clone git@github.com:<USERNAME>/reprise.git reprise
$ cd reprise
$ git remote add upstream git@github.com:symfony/reprise.git
```

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

### entrypoints.json with integrity section

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Shows the resulting entrypoints.json structure when SRI integrity is enabled. The 'integrity' section maps each built file to its hash, covering all referenced files per entry.

```json
{
  "integrity": {
    "/build/app-1a2b3c.js": "sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K...",
    "/build/app-4d5e6f.css": "sha384-9ehJ4G8v3aQ2p1o0..."
  }
}
```

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

### Use CDN publicPath with Vite

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Vite configuration that sets an absolute CDN URL for production builds and '/build/' for dev. 'manifestKeyPrefix' is required when 'publicPath' is absolute; keys stay logical, values point at the CDN.

```javascript
// vite.config.ts  (command is 'serve' or 'build')
import { defineConfig } from 'vite'
import Symfony from '@symfony/reprise/vite'

export default defineConfig(({ command }) => ({
  // ...
  plugins: [
    Symfony({
      publicPath:
        command === 'build'
          ? 'https://my-cool-app.com.global.prod.fastly.net/build/'
          : '/build/',
      manifestKeyPrefix: 'build/',
    }),
  ],
}))
```

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

### Rsbuild config: separate metadata with metadataPath

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Configures the Rsbuild plugin to write entrypoints.json and manifest.json to var/reprise instead of public/build. Use when you want to avoid uploading metadata to public object storage. Requires setting output_path in config/packages/reprise.yaml to point Symfony at the metadata directory.

```javascript
// rsbuild.config.ts
import { defineConfig } from '@rsbuild/core'
import Symfony from '@symfony/reprise/rsbuild'

export default defineConfig({
  plugins: [
    Symfony({
      outputPath: 'public/build',
      metadataPath: 'var/reprise',
    }),
  ],
})
```

```yaml
# config/packages/reprise.yaml
reprise:
    output_path: '%kernel.project_dir%/var/reprise'
```

```yaml
# config/packages/framework.yaml
framework:
    assets:
        json_manifest_path: '%kernel.project_dir%/var/reprise/manifest.json'
```

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

### Vite Style Entry Configuration

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Vite configuration for defining style entries (e.g., theme.scss) alongside app entry, using the Symfony() plugin.

```javascript
// vite.config.ts
export default defineConfig({
  input: {
    app: './assets/app.js',
    theme: './assets/styles/theme.scss',
  },
  plugins: [
    Symfony(),
  ],
})
```

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

### Push main and tag to upstream

Source: https://github.com/symfony/reprise/blob/main/MAINTAINERS.md

Push the main branch and the new tag to the upstream remote, triggering the npm release workflow.

```bash
git push upstream main --follow-tags
```

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

### reprise_entry_link_tags

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Renders <link rel="stylesheet"> tags for a given entry point. Accepts an optional attributes argument to merge with global link_attributes.

```APIDOC
## reprise_entry_link_tags

### Description
Renders `<link rel="stylesheet">` tags for the specified entry point. This is the Reprise equivalent of `encore_entry_link_tags`.

### Method
Twig Function

### Parameters
- **entryName** (string) - Required - The name of the entry point (e.g., 'app').
- **packageName** (string) - Optional - The asset package name (defaults to the default package).
- **attributes** (array) - Optional - Additional HTML attributes to merge over the global `link_attributes`. Per-call wins; `false` drops the attribute.

### Example
```twig
{{ reprise_entry_link_tags('app', attributes={ media: 'print' }) }}
```

### Response
Returns a string containing the `<link>` tags for the entry's CSS files.
```

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

### Use CDN publicPath with Rsbuild

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Rsbuild configuration that sets an absolute CDN URL for production builds and '/build/' for dev. 'manifestKeyPrefix' is required when 'publicPath' is absolute; keys stay logical, values point at the CDN.

```javascript
// rsbuild.config.ts  (command is 'dev' or 'build')
import { defineConfig } from '@rsbuild/core'
import Symfony from '@symfony/reprise/rsbuild'

export default defineConfig(({ command }) => ({
  // ...
  plugins: [
    Symfony({
      publicPath:
        command === 'build'
          ? 'https://my-cool-app.com.global.prod.fastly.net/build/'
          : '/build/',
      manifestKeyPrefix: 'build/',
    }),
  ],
}))
```

```json
{
  "build/app.js": "https://my-cool-app.com.global.prod.fastly.net/build/app-1a2b3c.js"
}
```

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

### Vite config: separate metadata with metadataPath

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Configures the Vite plugin to write entrypoints.json and manifest.json to var/reprise instead of public/build. Use when you want to avoid uploading metadata to public object storage. Requires setting output_path in config/packages/reprise.yaml to point Symfony at the metadata directory.

```javascript
// vite.config.ts
import { defineConfig } from 'vite'
import Symfony from '@symfony/reprise/vite'

export default defineConfig({
  plugins: [
    Symfony({
      outputPath: 'public/build',
      metadataPath: 'var/reprise',
    }),
  ],
})
```

```yaml
# config/packages/reprise.yaml
reprise:
    output_path: '%kernel.project_dir%/var/reprise'
```

```yaml
# config/packages/framework.yaml
framework:
    assets:
        json_manifest_path: '%kernel.project_dir%/var/reprise/manifest.json'
```

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

### Rsbuild Style Entry Configuration

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Rsbuild configuration for defining style entries (e.g., theme.scss) alongside app entry, using pluginSass() and Symfony() plugins.

```javascript
// rsbuild.config.ts
export default defineConfig({
  source: {
    entry: {
      app: './assets/app.js',
      theme: './assets/styles/theme.scss',
    },
  },
  plugins: [
    pluginSass(),
    Symfony(),
  ],
})
```

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

### Twig: Using reprise_entry_script_tags and reprise_entry_link_tags with attributes

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Passes a fourth 'attributes' argument to reprise_entry_script_tags and reprise_entry_link_tags, merged over global script_attributes/link_attributes. Per-call wins, and false drops the attribute. Use Twig named arguments because the argument follows the optional package name.

```twig
{# a fourth `attributes` argument, merged over the configured script_attributes/link_attributes #}
{{ reprise_entry_script_tags('app', attributes={ 'data-turbo-track': 'reload' }) }}
{{ reprise_entry_link_tags('app', attributes={ media: 'print' }) }}
```

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

### Vite config: enable Subresource Integrity

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Enables SRI for production builds by setting integrity.enabled to command === 'build' and algorithms to ['sha384']. The integrity option adds an integrity map to entrypoints.json, and RepriseBundle renders integrity attributes on script and link tags. No hashes are emitted in dev because the dev server serves changing in-memory assets.

```javascript
// vite.config.ts  (command is 'serve' or 'build')
import { defineConfig } from 'vite'
import Symfony from '@symfony/reprise/vite'

export default defineConfig(({ command }) => ({
  // ...
  plugins: [
    Symfony({
      integrity: {
        enabled: command === 'build',
        algorithms: ['sha384'],
      },
    }),
  ],
}))
```

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

### Rsbuild config: enable Subresource Integrity

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Enables SRI for production builds by setting integrity.enabled to command === 'build' and algorithms to ['sha384']. The integrity option adds an integrity map to entrypoints.json, and RepriseBundle renders integrity attributes on script and link tags. No hashes are emitted in dev because the dev server serves changing in-memory assets.

```javascript
// rsbuild.config.ts  (command is 'dev' or 'build')
import { defineConfig } from '@rsbuild/core'
import Symfony from '@symfony/reprise/rsbuild'

export default defineConfig(({ command }) => ({
  // ...
  plugins: [
    Symfony({
      integrity: {
        enabled: command === 'build',
        algorithms: ['sha384'],
      },
    }),
  ],
}))
```

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

### Rsbuild config for widget build

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Alternative Rsbuild configuration for a separate widget build. Run with `rsbuild build --config rsbuild.config.widget.ts`. Points the Symfony plugin at a separate output directory.

```javascript
// rsbuild.config.widget.ts  -- run with `rsbuild build --config rsbuild.config.widget.ts`
import { defineConfig } from '@rsbuild/core'
import Symfony from '@symfony/reprise/rsbuild'

export default defineConfig({
  source: {
    entry: {
      widget: './assets/widget.js',
    },
  },
  plugins: [
    Symfony({
      outputPath: 'public/widget-build',
      publicPath: '/widget-build/',
    }),
  ],
})
```

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

### Run PHP tests, static analysis, and coding standards fixer

Source: https://github.com/symfony/reprise/blob/main/CONTRIBUTING.md

Commands to run the PHP test suite, static analysis with PHPStan, and fix coding standards with PHP-CS-Fixer.

```shell
# Run the test suite
$ vendor/bin/phpunit

# Run static analysis
$ vendor/bin/phpstan analyse

# Fix coding standards
$ vendor/bin/php-cs-fixer fix
```

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

### reprise_entry_script_tags

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Renders <script type="module"> tags for a given entry point. Accepts an optional attributes argument to merge with global script_attributes. In dev, injects the Vite HMR client automatically.

```APIDOC
## reprise_entry_script_tags

### Description
Renders `<script type="module">` tags for the specified entry point. This is the Reprise equivalent of `encore_entry_script_tags`. In dev mode, it automatically injects the Vite HMR client (or uses the compiled client under Rsbuild).

### Method
Twig Function

### Parameters
- **entryName** (string) - Required - The name of the entry point (e.g., 'app').
- **packageName** (string) - Optional - The asset package name (defaults to the default package).
- **attributes** (array) - Optional - Additional HTML attributes to merge over the global `script_attributes`. Per-call wins; `false` drops the attribute. A `nonce` passed here also reaches the `<link rel="modulepreload">` tags and HTTP `Link:` preload header.

### Example
```twig
{{ reprise_entry_script_tags('app', attributes={ 'data-turbo-track': 'reload' }) }}
```

### Response
Returns a string containing the `<script>` tags for the entry's JavaScript files.
```

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

### Vite config for widget build

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Alternative Vite configuration for a separate widget build. Run with `vite build --config vite.config.widget.ts`. Points the Symfony plugin at a separate output directory.

```javascript
// vite.config.widget.ts  -- run with `vite build --config vite.config.widget.ts`
import { defineConfig } from 'vite'
import Symfony from '@symfony/reprise/vite'

export default defineConfig({
  input: {
    widget: './assets/widget.js',
  },
  plugins: [
    Symfony({
      outputPath: 'public/widget-build',
      publicPath: '/widget-build/',
    }),
  ],
})
```

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

### Configure Symfony Reprise plugin in Rsbuild

Source: https://github.com/symfony/reprise/blob/main/assets/README.md

Add the Symfony plugin to your Rsbuild configuration. The plugin is imported from '@symfony/reprise/rsbuild' and added to the plugins array.

```javascript
// rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import Symfony from '@symfony/reprise/rsbuild';

export default defineConfig({
    plugins: [Symfony({/* options */})],
});
```

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

### Reset local main to match upstream

Source: https://github.com/symfony/reprise/blob/main/CONTRIBUTING.md

Commands to reset your local main branch to match the upstream repository.

```shell
$ git checkout main && \
  git fetch upstream && \
  git reset --hard upstream/main && \
  git push origin main
```

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

### PHP: RenderAssetTagEvent listener for CSP nonce

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Listener for RenderAssetTagEvent that stamps a Content-Security-Policy nonce on every rendered tag. The event is dispatched before any <script> or <link> tag is written, and listeners can mutate $event->attributes. After listeners run, the final nonce, integrity, and crossorigin attributes are copied onto the HTTP Link: preload header.

```php
namespace App\EventListener;

use Symfony\Component\EventDispatcher\Attribute\AsEventListener;
use Symfony\Reprise\Event\RenderAssetTagEvent;

#[AsEventListener]
final class CspNonceListener
{
    public function __construct(private NonceGenerator $nonceGenerator)
    {
    }

    public function __invoke(RenderAssetTagEvent $event): void
    {
        $event->attributes['nonce'] = $this->nonceGenerator->getNonce();
    }
}
```

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

### Configure asset_package with version: false in YAML

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Required when setting asset_package to avoid re-hashing by a version strategy. Defines a framework.assets package with version: false.

```yaml
reprise:
    asset_package: reprise

framework:
    assets:
        packages:
            reprise:
                version: false
```

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

### JavaScript: Enabling Stimulus controllers in Vite/Rsbuild plugin

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Enables the Symfony UX/Stimulus controllers feature by pointing the plugin at controllers.json. The first form uses a string path; the second overrides the local controllers directory. This is the Vite/Rsbuild counterpart of @symfony/stimulus-bridge.

```javascript
Symfony({
  stimulus: 'assets/controllers.json',
})
```

```javascript
// or, to override the local controllers dir:
Symfony({
  stimulus: {
    controllersJson: 'assets/controllers.json',
    controllersDir: 'assets/controllers',
  },
})
```

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

### Configure Symfony asset manifest path

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

YAML configuration for Symfony's asset component to use the generated manifest.json. This is native manifest support, the same setting Webpack Encore relies on, and applies to every logical asset reference.

```yaml
# config/packages/framework.yaml
framework:
    assets:
        json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'
```

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

### Vite config: set devServerOrigin

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Sets devServerOrigin to 'https://assets.myapp.test' so that in dev, entrypoints.json points to that public origin instead of localhost. Use when the browser reaches the dev server through a reverse proxy, Docker port mapping, or local domain. The front must forward WebSocket connections for HMR to work.

```javascript
// vite.config.ts
import { defineConfig } from 'vite'
import Symfony from '@symfony/reprise/vite'

export default defineConfig({
  plugins: [
    Symfony({
      devServerOrigin: 'https://assets.myapp.test',
    }),
  ],
})
```

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

### Rebase feature branch on upstream/main

Source: https://github.com/symfony/reprise/blob/main/CONTRIBUTING.md

Commands to rebase a feature branch on top of upstream/main and push it.

```shell
$ git checkout my-feature-branch && \
  git rebase upstream/main && \
  git push -u origin my-feature-branch
```

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

### Configure Symfony Reprise plugin in Vite

Source: https://github.com/symfony/reprise/blob/main/assets/README.md

Add the Symfony plugin to your Vite configuration. The plugin is imported from '@symfony/reprise/vite' and added to the plugins array.

```javascript
// vite.config.ts
import { defineConfig } from 'vite';
import Symfony from '@symfony/reprise/vite';

export default defineConfig({
    plugins: [Symfony({/* options */})],
});
```

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

### Run a single test by name with pnpm test

Source: https://github.com/symfony/reprise/blob/main/AGENTS.md

Use this command to run a single test by its name. The -t flag filters tests by name.

```bash
pnpm test -t "<test name>"
```

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

### Rsbuild config: set devServerOrigin

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Sets devServerOrigin to 'https://assets.myapp.test' so that in dev, entrypoints.json points to that public origin instead of localhost. Use when the browser reaches the dev server through a reverse proxy, Docker port mapping, or local domain. The front must forward WebSocket connections for HMR to work.

```javascript
// rsbuild.config.ts
import { defineConfig } from '@rsbuild/core'
import Symfony from '@symfony/reprise/rsbuild'

export default defineConfig({
  plugins: [
    Symfony({
      devServerOrigin: 'https://assets.myapp.test',
    }),
  ],
})
```

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

### Vite configuration with Symfony Reprise

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Configure Vite to use the Symfony Reprise plugin. Note: On Vite 8.1 and older, use build.rollupOptions.input instead.

```javascript
// vite.config.ts
import { defineConfig } from 'vite'
import Symfony from '@symfony/reprise/vite'

export default defineConfig({
  input: {
    app: './assets/app.js',
  },
  plugins: [
    Symfony({
      // options
    }),
  ],
})
```

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

### Disable hashing for copied files

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Rsbuild copy configuration with 'hash: false' to keep stable file paths. The content hash moves to the manifest.json value as a query string, so cache-busting via asset() still works. Note that proxies or CDNs ignoring query strings will not pick up new versions.

```javascript
copy: [
  {
    from: 'assets/images',
    to: 'images',
    hash: false,
  },
],
```

```json
{ "build/images/logo.svg": "/build/images/logo.svg?87dcc351" }
```

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

### Twig template with reprise_entry_link_tags and reprise_entry_script_tags

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Base Twig template showing how to render asset tags for an entry using the provided functions. The script tag renders as type="module" for ESM output.

```twig
{# templates/base.html.twig #}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">
        {% block stylesheets %}
            {{ reprise_entry_link_tags('app') }}
        {% endblock %}

        {% block javascripts %}
            {# reprise_entry_script_tags renders <script type="module"> (ESM output from both Vite and Rsbuild) #}
            {{ reprise_entry_script_tags('app') }}
        {% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}
    </body>
</html>
```

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

### RenderAssetTagEvent

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Event dispatched before any <script> or <link> tag is rendered, allowing listeners to modify attributes on the tag. Useful for adding nonces, integrity, or crossorigin attributes.

```APIDOC
## RenderAssetTagEvent

### Description
Dispatched before Reprise writes any `<script>` or `<link>` tag (entry files, CSS, `modulepreload` links, and dev-server tags). Listeners can read and mutate `$event->attributes` to add, change, or remove attributes on that tag.

### Event Class
`Symfony\Reprise\Event\RenderAssetTagEvent`

### Properties
- **attributes** (array) - Mutable array of HTML attributes for the tag.
- **isModulepreload()** (bool) - Returns `true` if the tag is a `<link rel="modulepreload">` tag.
- **isScript()** (bool) - Returns `true` if the tag is a `<script>` tag.
- **isLink()** (bool) - Returns `true` if the tag is a `<link>` tag.

### Example Listener
```php
use Symfony\Component\EventDispatcher\Attribute\AsEventListener;
use Symfony\Reprise\Event\RenderAssetTagEvent;

#[AsEventListener]
final class CspNonceListener
{
    public function __construct(private NonceGenerator $nonceGenerator) {}

    public function __invoke(RenderAssetTagEvent $event): void
    {
        $event->attributes['nonce'] = $this->nonceGenerator->getNonce();
    }
}
```

### Notes
After listeners run, the tag's final `nonce`, `integrity`, and `crossorigin` attributes are copied onto its HTTP `Link:` preload header. For `modulepreload` links, use the script nonce if your CSP uses separate script and style nonces.
```

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

### Rename Twig functions from encore_ to reprise_

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Shows the before and after Twig template changes when migrating from Webpack Encore to Reprise.

```twig
{# before #}
{{ encore_entry_link_tags('app') }}
{{ encore_entry_script_tags('app') }}

{# after #}
{{ reprise_entry_link_tags('app') }}
{{ reprise_entry_script_tags('app') }}
```

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

### Twig guard with reprise_entry_exists

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Use reprise_entry_exists to guard a page-specific or optional entry so rendering its tags doesn't error in strict mode.

```twig
{% if reprise_entry_exists('checkout') %}
    {{ reprise_entry_script_tags('checkout') }}
{% endif %}
```

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

### Vite Alias for Leaflet CSS

Source: https://github.com/symfony/reprise/blob/main/doc/index.rst

Vite configuration to alias the Webpack-specific Leaflet CSS to the plain CSS build, required for UX Leaflet Map.

```javascript
// vite.config.ts
export default defineConfig({
  // ...
  resolve: {
    alias: {
      'leaflet/dist/leaflet.min.css': 'leaflet/dist/leaflet.css',
    },
  },
})
```
Tokens:
Raw