-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add documentation * Add link to doc to README --------- Co-authored-by: Maelan LE BORGNE <[email protected]>
- Loading branch information
1 parent
1a023f6
commit 87521d4
Showing
2 changed files
with
83 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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' |