Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Doc] Minor fixes #36

Merged
merged 1 commit into from
Apr 10, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 33 additions & 21 deletions doc/index.rst
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
TypeScript Bundle For Symfony
=================
=============================

This bundle allows you to compile TypeScript and use it with Symfony's AssetMapper Component
(no Node required!).
This bundle allows you to compile TypeScript and use it with Symfony's AssetMapper
Component (no Node.js 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
* 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
------------
Expand All @@ -20,17 +20,19 @@ Install the bundle:
Usage
-----

Start by setting the ``sensiolabs_typescript.source_dir`` option to the list of location where your typescript files are located.
Start by setting the ``sensiolabs_typescript.source_dir`` option to the list of
locations 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:
For instance, if your TypeScript code lives in ``assets/typescript/`` directory,
with an ``assets/typescript/app.ts`` entrypoint file, 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
Then load your TypeScript files in your templates:

.. code-block:: html+twig

Expand All @@ -40,15 +42,14 @@ Then point your TypeScript files in your templates
<script type="text/javascript" src="{{ asset('typescript/app.ts') }}"></script>
{% endblock %}


Then run the command:
Finally run this command:

.. code-block:: terminal

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

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

And that's it!
Expand All @@ -61,6 +62,7 @@ command as a `worker <https://symfony.com/doc/current/setup/symfony_server.html#
to be started whenever you run ``symfony server:start``:

.. code-block:: yaml

# .symfony.local.yaml
workers:
# ...
Expand All @@ -75,37 +77,47 @@ to be started whenever you run ``symfony server:start``:
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.
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.
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
the ``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.
The main option is ``source_dir``, which defaults to ``[%kernel.project_dir%/assets]``.
This is an array of the 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:
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 with the ``binary`` option:

.. code-block:: yaml

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

Configuring the compiler
--------------------------
------------------------

You can configure the SWC compiler by setting the ``swc_config_file`` option to the the path to your `.swcrc <https://swc.rs/docs/configuration/swcrc>`_ file:
You can configure the SWC compiler by setting the ``swc_config_file`` option to
the the path to your `.swcrc <https://swc.rs/docs/configuration/swcrc>`_ file:

.. code-block:: yaml

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