Document how to install using AssetMapper

[tacman]

Is there a way to install the javascript using AssetMapper? That is, a package on jsdelivr?

I've opened an issue on the Symfony discussions: symfony/symfony#52249

I see this package, but it's 5 years old and I'm wondering if there's an official package, or an way to install this without a package manager.

https://www.npmjs.com/package/fos-routing

[weaverryan]

I've written some notes about how this bundle could have great AssetMapper support here: symfony/symfony#52249 (comment)

I'd be happy to help anyone who wants to try this! :)

[tacman]

What about dumping the routes as javascript constants instead of json, and importing it rather than calling

import 'fos_js_routes.js';

// instead of 

routes = require('../../public/js/fos_js_routes.json');
Routing.setRoutingData(routes);

[weaverryan]

Yup, that's part of it: the routes will need to be dumped somewhere/somehow as JavaScript and then export that value.

[tacman]

I was poking around about how to create js rather than json, and discovered it already exists! And in fact, is the default.

bin/console fos:js-routing:dump  --target=assets/js/fos_js_routes.js --pretty-print

Generates javascript.

fos.Router.setData({
    "base_url": "",
    "routes": {
        "empty_headline_json": {
            "tokens": [
                [
                    "variable",
                    ".",
                    "[^\/]++",
                    "_format",
                    true

I'm still not sure how to use this with AssetMapper, but it seems like it's might already be possible.

[tacman]

@weaverryan it would be pretty cool to not have to run the dump step and have that done automatically. What's the level of effort? I assume it's less complicated than the example for AssetMapper.

[tacman]

FWIW, I got this working.

Install fos-routing from npm or jsdelivr

Dump the js with a callback:

bin/console fos:js-routing:dump --format=js --target=public/js/fos_js_routes.js --callback="export default  "

      <script type="module">
        import Routing from 'fos-routing';
        import RoutingData from '../../js/fos_js_routes.js';
        Routing.setData(RoutingData);
        console.log(Routing.getHost());
        let path = Routing.generate('app_login');
    </script>

[weaverryan]

That's great! And yea, that's the general idea :). What we would add, to make it shine with AssetMapper, is NOT the need to run fos:js-routing:dump. Instead, you would have something like:

// ...
import RoutingData from '@FOSJsRoutingBundle/routes.js';
// ...

And this routes.js file would be automatically-generated for you on-the-fly (by an AssetMapper compiler). Or, quite possibly, we'd simplify a bit further, because, why not?

// this would import the routes for you, set them on the Routing object and export it
// so the 3 lines all in one
import Routing from '@FOSJSRoutingBundle';
console.log(Routing.getHost());
let path = Routing.generate('app_login');

[tacman]

Well, that would rock. I think @tobias-93 is the main contributor at this point, I'd love to get feedback from him or @willdurand or any of the other maintainers.

[tacman]

I started to tweak the documentation to include this, but it didn't quite fit.

Step 5 talks about yarn and webpack. Assetmapper is different, because it requires that the routes be dumped as js, not json as most of the examples show.

So really it's two different paths, one with assetmapper and modules, the other with webpack and yarn. Going forward, Symfony's best practices will be to use AssetMapper, so we should document how to use it. It works great, I've switched all my projects to using it and haven't had any problems.

My favorite commit is removing webpack and the build steps. I can write this up in the installation instructions, but wasn't sure how to break up step 5.

[thor-juhasz]

Just to chime in, I for one (and very likely not the only one), would love to have this as an NPM package so that I can stick to using npm/yarn/pnpm/etc with whatever bundler/build system I choose to.

I am using Symfony 6+ (soon 7) with Vite (and Yarn as package manager).
Using this: https://github.com/lhapaipai/vite-plugin-symfony

[nibsirahsieu]

Another workaround:

1. Install fos-router: php bin/console importmap:require @toyokumo/fos-router
2. Dump the js with callback: php bin/console fos:js-routing:dump --format=js --target=assets/js/fos_routes.js --callback="export default "

Usage:

import routes from './fos_routes.js';
import Router from '@toyokumo/fos-router';

Router.setRoutingData(routes);
Router.generate('your_router');

P.S: i'm using Symfony 7.1