Skip to content

Commit

Permalink
Add documentation (#12)
Browse files Browse the repository at this point in the history
* Add documentation

* Add link to doc to README

---------

Co-authored-by: Maelan LE BORGNE <[email protected]>
  • Loading branch information
maelanleborgne and maelanleborgne authored Oct 25, 2023
1 parent 1a023f6 commit 87521d4
Show file tree
Hide file tree
Showing 2 changed files with 83 additions and 1 deletion.
3 changes: 2 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,11 @@ This bundle allows you to compile TypeScript and use it with Symfony's AssetMapp

- Automatically downloads the correct [SWC](https://github.com/swc-project/swc) binary
- Adds a ``typescript:build`` command to compile your typescript files
- Automatically compiles your typescript files when you run ``asset-map:compile`` command

## Documentation

Read the documentation at: **#- TODO -#**
Read the documentation at: [doc/index.md](doc/index.rst)

## Credits
This bundle was greatly inspired by the [Sass Bundle](https://github.com/SymfonyCasts/sass-bundle) from [SymfonyCasts](https://github.com/SymfonyCasts).
Expand Down
81 changes: 81 additions & 0 deletions doc/index.rst
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
TypeScript Bundle For Symfony
=================

This bundle allows you to compile TypeScript and use it with Symfony's AssetMapper Component
(no Node required!).

- Automatically downloads the correct [SWC](https://github.com/swc-project/swc) binary
- Adds a ``typescript:build`` command to compile your typescript files
- Automatically compiles your typescript files when you run ``asset-map:compile`` command

Installation
------------

Install the bundle:

.. code-block:: terminal
$ composer require sensiolabs/typescript-bundle
Usage
-----

Start by setting the ``sensiolabs_typescript.source_dir`` option to the list of location where your typescript files are located.

For instance, if your TypeScript code lives in ``assets/typescript`` directory, with a ``assets/typescript/app.ts`` entrypoint file, you could set the option like this:

.. code-block:: yaml
# config/packages/asset_mapper.yaml
sensiolabs_typescript:
source_dir: ['%kernel.project_dir%/assets/typescript']
Then point your TypeScript files in your templates

.. code-block:: html+twig

{# templates/base.html.twig #}

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


Then run the command:

.. code-block:: terminal
# To compile only the typescript files
$ php bin/console typescript:build
# To compile ALL your assets
$ php bin/console asset-map:compile
And that's it!

How Does it Work?
-----------------

The first time you run one of the TypeScript commands, the bundle will download the correct SWC binary for your system into the ``var`` directory.

When you run ``typescript:build``, that binary is used to compile TypeScript files into a ``var/typescript`` directory. Finally, when the contents of ``assets/typescript/app.ts`` is requested, the bundle swaps the contents of that file with the contents of from ``var/typescript/`` directory.

Configuration
--------------

To see the full config from this bundle, run:

.. code-block:: terminal
$ php bin/console config:dump sensiolabs_typescript
The main option is ``source_dir`` option, which defaults to ``[%kernel.project_dir%/assets]``. This is an array of directories that will be compiled.

Using a different binary
--------------------------

This bundle already installed for you the right SWC binary. However, if you already have a SWC binary installed on your machine you can instruct the bundle to use that binary, set the ``binary`` option:

.. code-block:: yaml
sensiolabs_typescript:
binary: 'node_modules/.bin/swc'

0 comments on commit 87521d4

Please sign in to comment.