menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

Parcel

📦🚀 Blazing fast, zero configuration web application bundler

Channels
Team

Differentiation of Assets and Transformers

April 20, 2020 at 9:57pm

Differentiation of Assets and Transformers

April 20, 2020 at 9:57pm
Trying to implement a feature and am having trouble figuring out the distinction between a transformer and asset. It seems that they can both provide similar functionality and have similar. Looking through some of the implementations, there seems to be duplicate code. Wondering if there are any prior conversations I could look at or documentation to help clarify this.
Ideally I would like to:
  • parse each graphql file to an ast (using graphql package)
  • parse the imports and send those to parcel to get the resolved files as an ast (the parsing will be done by an npm package)
  • expand the imports using the ast (done by an npm package)
  • emit a graphql and js version of the file (using graphql package)
This will allow parcel to handle the import resolution
Additionally, I would like to add some configuration that I can use to change how the code is emitted (minified/possibly format). Is it possible to allow the user to configure this?
Thanks in advanced, so far the guidance has been excellent!

April 20, 2020 at 9:59pm
Looking through some of the implementations, there seems to be duplicate code.
Are you looking into packages/core/parcel-bundler? That is the old code for Parcel 1, ignore that for Parcel 2.
Parcel 2 also has Assets (but they're not a plugin type), the concept there is: a transformer gets an asset, modifies (transforms) it, and returns an asset
Edited
I was looking there. Makes sense why there system imports there vs es6 imports elsewhere.
So Parcel 2 has a more generic asset type?
So it seems the flow should be:
  • Transformer#parse is called then an AST is requested
  • Transformer#transform is called to process the asset, creating files that can be imported
What I am is missing is how to specify an asset's dependencies then how to get their associated Asset and AST.
Edited
I see, that link answers some questions.
There is still a bit of a disconnect for me between how JS handles imports (first class) and graphql when looking at most of the examples. GraphQL importers typically resolve all the imports at "compile time". Are there any transformer that do something similar to this? It would be nice to fully leverage Parcel for the import resolution and recursion, if possible, then emit a single asset per js import.
How can I get access to the files (assets?) that Parcel has already seen?
If there is an example transformer that does this I can look at that.
It would be nice to fully leverage Parcel for the import resolution and recursion
This would create multiple assets (per file) which is not what you want. Transformers like less, pug and sass do this "don't tell Parcel about the files I import, create a single asset for all of them" thing
How do I manage cache invalidation in this case, for files that the transformer reads but does not expose to parcel? I was thinking asset.addIncludedFile but it did not seem to be working. I'm going to dive back into this later tonight so I may get it working with fresh eyes.
If this is the case then I have everything in place and just need to do some cleanup.
I was thinking asset.addIncludedFile
That is correct, but it's currently broken: https://github.com/parcel-bundler/parcel/issues/3708. (So your code should work once that bug is fixed)
Awesome! Thanks for the support and quick responses.