[AssetMapper] Add support for loading JSON using import statements #61133
Conversation
nicolas-grekas
force-pushed
the
am-json
branch
2 times, most recently
from
a5a31cb to
12eba70
Compare
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
|
Switched to a project with AssetMapper correctly installed, the following code import json from './foo.json' with {type: 'json'};
console.log(json)with the patch suggested in #61133 (review) correctly resolves the JSON |
|
This PR is about this: -import json from './foo.json' with {type: 'json'};
+import jsonPromise from './foo.json';and then (note the await): console.log(await jsonPromise); |
|
Ah, fine then |
|
We should skip using the loader when |
|
This looks great! The workflow for loading javascript-routes within a module right now is klunky: bin/console fos:js-routing:dump --format=js --target=public/js/fos_js_routes.js --callback="export default"and then import Routing from "fos-routing";
import RoutingData from "/js/fos_js_routes.js";
Routing.setData(RoutingData);I think the ux-translator component works the same way, dumping javascript instead of json https://symfony.com/bundles/ux-translator/current/index.html#configuring-the-dumped-translations Both of these may make for good examples when writing the documentation or blog post about it. |
This is inspired by https://web.dev/blog/json-imports-baseline-newly-available
Modern browsers support loading JSONs via the
import data from './foo.json' with {type: 'json'}syntax. While this has been promoted as a new baseline, that's still not widely supported.This PR proposes to add support for a more portable alternative using
import jsonPromise from './foo.json'instead, with some server-side assisted loader.On the client-side, one could then use the imported data by awaiting it first (the import returns a Promise):
json = await jsonPromiseNote that we already support importing css via import statements.
Native support for
import './foo.css' with {type: 'css'}exists, but that's even less available.