AssetMapper TypeScript Bundle

https://symfony.com/bundles/AssetMapperTypeScriptBundle/current
Admin
A Symfony bundle that enables TypeScript compilation using SWC with Symfony's AssetMapper component,...
Tokens:928
Snippets:16
Trust Score:9.7
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install TypeScript Bundle

Source: https://symfony.com/bundles/AssetMapperTypeScriptBundle/current/index.html

Use Composer to install the SensioLabs TypeScript Bundle.

```bash
$ composer require sensiolabs/typescript-bundle
```

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

### Configure TypeScript Worker for Symfony CLI

Source: https://symfony.com/bundles/AssetMapperTypeScriptBundle/current/index.html

Add the TypeScript build command as a worker in your .symfony.local.yaml for automatic compilation on server start.

```yaml
# .symfony.local.yaml
workers:
    # ...
    typescript:
        cmd: ['symfony', 'console', 'typescript:build', '--watch']
```

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

### Configure Custom SWC Binary Path

Source: https://symfony.com/bundles/AssetMapperTypeScriptBundle/current/index.html

Instruct the bundle to use a pre-installed SWC binary by specifying its path.

```yaml
# config/packages/asset_mapper.yaml
sensiolabs_typescript:
    swc_binary: 'node_modules/.bin/swc'
```

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

### Dump TypeScript Bundle Configuration

Source: https://symfony.com/bundles/AssetMapperTypeScriptBundle/current/index.html

View the full configuration options for the SensioLabs TypeScript Bundle.

```bash
$ php bin/console config:dump sensiolabs_typescript
```

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

### Configure SWC Compiler with .swcrc

Source: https://symfony.com/bundles/AssetMapperTypeScriptBundle/current/index.html

Point the bundle to your SWC configuration file (.swcrc) for custom compiler settings.

```yaml
# config/packages/asset_mapper.yaml
sensiolabs_typescript:
    swc_config_file: '%kernel.project_dir%/.swcrc'
```

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

### Specify SWC Version

Source: https://symfony.com/bundles/AssetMapperTypeScriptBundle/current/index.html

Set a specific SWC version for compilation if needed. Remember to remove the existing binary in the download directory if switching versions.

```yaml
# config/packages/sensiolabs_typescript.yaml
sensiolabs_typescript:
    swc_version: v1.7.27-nightly-20240911.1
```

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

### Compile TypeScript Assets

Source: https://symfony.com/bundles/AssetMapperTypeScriptBundle/current/index.html

Run the console command to compile TypeScript files. Use --watch for continuous compilation.

```bash
# to compile only the TypeScript files
$ php bin/console typescript:build --watch

# to compile ALL your assets
$ php bin/console asset-map:compile
```

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

### Configure TypeScript Source Directory

Source: https://symfony.com/bundles/AssetMapperTypeScriptBundle/current/index.html

Specify the directories containing your TypeScript files in the AssetMapper configuration.

```yaml
# config/packages/asset_mapper.yaml
sensiolabs_typescript:
    source_dir: ['%kernel.project_dir%/assets/typescript']
```

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

### Load TypeScript Files in Templates

Source: https://symfony.com/bundles/AssetMapperTypeScriptBundle/current/index.html

Include your compiled TypeScript files in Twig templates using the asset() function.

```twig
{# templates/base.html.twig #}

{% block javascripts %}
    <script type="text/javascript" src="{{ asset('typescript/app.ts') }}"></script>
{% endblock %}
```
Tokens:
Raw