Comments (10)
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');
from fosjsroutingbundle.
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! :)
from fosjsroutingbundle.
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);
from fosjsroutingbundle.
Yup, that's part of it: the routes will need to be dumped somewhere/somehow as JavaScript and then export that value.
from fosjsroutingbundle.
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.
from fosjsroutingbundle.
@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.
from fosjsroutingbundle.
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>
from fosjsroutingbundle.
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.
from fosjsroutingbundle.
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.
from fosjsroutingbundle.
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
from fosjsroutingbundle.
Related Issues (20)
- Upgrade guide from v1?
- Importing route and prefix path issue
- webpack-inject-plugin.loader.js?id=webpack-inject-module-1!" contains a reference to the file "fos-router"
- Wrong route in dev env. missing index.php in route HOT 2
- Exception when a route name is a parsable number
- Error: spawn bin/console ENOENT HOT 7
- webpack-inject-plugin > loader-utils vulnerability HOT 4
- Routing isn't finding any routes HOT 2
- webpack problem /FosRouting.js" contains a reference to the file ....
- Symfony 6.3 deprecations
- Symfony 6.3 deprecations when dump routes HOT 1
- Overwriting php location causes console errors that --php is not a valid options
- Session handling is incompatible with stateless routes introducted with Symfony 6.3
- Run webpack encore and execute php fos:js-routing:dump separately HOT 2
- Support Symfony 7 HOT 6
- 3.4.0 not working with Symfony 6.4 HOT 11
- TS2732: Cannot find module './routes.json'. Consider using '--resolveJsonModule' to import module with '.json' extension.
- Is it possible to `npm install` | `yarn install` the router? HOT 1
- modify dump command to generate export call in js routes file.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fosjsroutingbundle.