Image transformer #4209

DeMoorJasper · 2020-02-23T16:21:07Z

↪️ Pull Request

Allow resizing of images using query parameters and sharp

Closes #3737
Closes #3736
Closes #3477

Closes T-6

💻 Examples

import image from 'url:./image.jpg?height=200';
import image from 'url:./image.webp?height=200&width=300';
import image from 'url:./image.png?width=300';

🚨 Test instructions

Run kitchen sink example

✔️ PR Todo

Added/updated unit tests for this change
Filled out test instructions (In case there aren't any unit tests)
Included links to related issues/PRs

parcel-benchmark · 2020-02-23T16:28:27Z

Benchmark Results

packages/benchmarks/three ✅

Timings

Description	Time	Difference
Cold	1.37m	+7.00ms
Cached	4.56s	-279.00ms 🚀

Cold Bundles

No bundle changes detected.

Cached Bundles

Bundle	Size	Difference	Time	Difference
dist/three/entry.js	2.68mb	+0.00b	65.00ms	-26.00ms 🚀

packages/benchmarks/kitchen-sink ✅

Timings

Description	Time	Difference
Cold	7.20s	+701.00ms ⚠️
Cached	3.20s	-175.00ms 🚀

Cold Bundles

Bundle	Size	Difference	Time	Difference
dist/legacy/parcel.d5807e82.webp	102.94kb	-12.74kb 🚀	167.00ms	-105.00ms 🚀
dist/modern/parcel.d5807e82.webp	102.94kb	-12.74kb 🚀	287.00ms	+113.00ms ⚠️
dist/legacy/kitchen-sink.a00e2ace.js	1.21kb	+0.00b	937.00ms	-123.00ms 🚀
dist/legacy/index.html	709.00b	+0.00b	923.00ms	-141.00ms 🚀
dist/legacy/styles.27b3555b.css	29.00b	+0.00b	1.51s	-104.00ms 🚀

Cached Bundles

Bundle	Size	Difference	Time	Difference
dist/legacy/parcel.d5807e82.webp	102.94kb	-12.74kb 🚀	5.00ms	-0.00ms
dist/modern/parcel.d5807e82.webp	102.94kb	-12.74kb 🚀	3.00ms	-0.00ms
dist/modern/kitchen-sink.19a3eecb.js	1.21kb	+0.00b	3.00ms	-1.00ms 🚀
dist/legacy/index.html	709.00b	+0.00b	10.00ms	-1.00ms 🚀
dist/modern/index.html	709.00b	+0.00b	4.00ms	-1.00ms 🚀

packages/benchmarks/react-hn ✅

Timings

Description	Time	Difference
Cold	9.37s	-526.00ms 🚀
Cached	3.50s	+272.00ms ⚠️

Cold Bundles

Bundle	Size	Difference	Time	Difference
dist/main/index.js	66.50kb	+0.00b	1.84s	-118.00ms 🚀
dist/module/index.js	37.46kb	+0.00b	1.84s	-117.00ms 🚀

Cached Bundles

Bundle	Size	Difference	Time	Difference
dist/main/index.js	66.50kb	+0.00b	10.00ms	+3.00ms ⚠️

packages/benchmarks/ak-editor 🚨

Timings

Description	Time	Difference
Cold	FAILED	-0.00ms
Cached	FAILED	-0.00ms

Cold Bundles

No bundles found, this is probably a failed build...

Cached Bundles

No bundles found, this is probably a failed build...

Click here to view a detailed benchmark overview.

DeMoorJasper · 2020-02-23T16:31:00Z

packages/core/core/src/public/Asset.js

@@ -87,6 +88,10 @@ class BaseAsset {
 return this.#asset.value.filePath;
 }

+ get query(): QueryParameters {


Should transformers be able to add additional data to the query?

Only example I can think of is html-transformer that would add width and height from srcset to the image asset, but that's probably something with addDependency anyway

DeMoorJasper · 2020-02-23T16:33:06Z

packages/utils/node-resolver-core/src/NodeResolver.js

@@ -32,6 +35,26 @@ type Module = {|
 filePath?: FilePath,
 |};

+const parseFilePath = (


Not entirely sure if this is the correct place for this.

I do believe we should pass queryparams to the resolver, in case it should resolve to some remote asset like deno does for example... But maybe we should make the resolverrunner handle this and pass it as an argument to each resolver so they can opt in to caring about it or not?

packages/utils/node-resolver-core/src/NodeResolver.js

packages/examples/kitchen-sink/src/index.js

packages/transformers/image/src/ImageResizeTransformer.js

packages/core/core/src/BundleGraph.js

DeMoorJasper · 2020-02-28T18:20:11Z

packages/core/integration-tests/test/image.js

+ let dirContent = await outputFS.readdir(distDir);
+ console.log(dirContent);
+
+ assert.equal(dirContent.length, 8);


This should output an image for each format, it just outputs one.
I tried updating the key but it does not seem to work. Not entirely sure how I should fix this. I thought it might be a bundling thing but the assets should be isolated?

mischnic · 2020-03-11T17:06:56Z

I'm not entirely sure if this is already the case, but I think query params should generally only be allowed when explicitly specifying a pipeline (for the same reason that we went with a protocol-like syntax for pipelines instead of query params).

DeMoorJasper · 2020-03-11T17:46:10Z

@mischnic Maybe I misunderstood but I don't think it should be explicitly specified as a pipeline (in parcelrc). That would result in a lot of pipeline config (I think)?

height · 2020-03-14T16:24:01Z

This pull request has been linked to and will mark 1 task as "Done" when merged:

~~T-6 Support query params to pass options to transformers~~ (unlink task)

💡Tip: You can link multiple Height tasks to a pull request.

packages/transformers/image/src/ImageResizeTransformer.js

DeMoorJasper · 2020-07-12T11:31:35Z

Gonna rework this... Too much conflicts at this point

DeMoorJasper added 5 commits February 23, 2020 17:19

resize transformer

ce87ade

image resize transformer

f6a2cf6

add webp

f712288

undo some changes

17ff4f4

minor cleanup

17de94a

cleanup

e11790b

DeMoorJasper commented Feb 23, 2020

View reviewed changes

DeMoorJasper requested a review from devongovett February 23, 2020 16:33

DeMoorJasper commented Feb 23, 2020

View reviewed changes

packages/utils/node-resolver-core/src/NodeResolver.js Outdated Show resolved Hide resolved

DeMoorJasper mentioned this pull request Feb 27, 2020

WebP Transformer #4210

Closed

3 tasks

add as query param

d03a880

DeMoorJasper changed the title ~~Image resize transformer~~ Image transformer Feb 27, 2020

DeMoorJasper commented Feb 27, 2020

View reviewed changes

packages/examples/kitchen-sink/src/index.js Show resolved Hide resolved

Merge branch 'v2' into sharp

90f8b55

DeMoorJasper marked this pull request as ready for review February 27, 2020 18:43

devongovett reviewed Feb 27, 2020

View reviewed changes

packages/transformers/image/src/ImageResizeTransformer.js Show resolved Hide resolved

DeMoorJasper added 8 commits February 28, 2020 16:20

fix regex

ad0b976

use streams

87524c8

Merge branch 'v2' into sharp

7c36d8e

pls tests pass

8f23a01

use valid images in integration tests

f07cf7a

streams

b87a74e

some tests

73051db

attempt at fixing output with multiple of the same image

d48d396

DeMoorJasper commented Feb 28, 2020

View reviewed changes

packages/core/core/src/BundleGraph.js Show resolved Hide resolved

DeMoorJasper commented Feb 28, 2020

View reviewed changes

mischnic added ✨ Parcel 2 and removed ✨ Parcel 2 labels Mar 6, 2020

mischnic added the 🔌 Plugins label Mar 8, 2020

Merge branch 'v2' into sharp

05d169e

Merge branch 'v2' into sharp

fc9b566

brettinternet reviewed Mar 15, 2020

View reviewed changes

packages/transformers/image/src/ImageResizeTransformer.js Outdated Show resolved Hide resolved

DeMoorJasper added 3 commits March 15, 2020 09:50

Merge branch 'v2' into sharp

1076baf

add quality prop

60971c3

Merge branch 'v2' into sharp

eff9e8a

DeMoorJasper mentioned this pull request Mar 28, 2020

Feature/v2 jsonld transformer #4397

Merged

10 tasks

DeMoorJasper mentioned this pull request May 18, 2020

Parcel v2 / Transformer version DeMoorJasper/parcel-plugin-imagemin#61

Closed

DeMoorJasper closed this Jul 12, 2020

DeMoorJasper deleted the sharp branch November 12, 2020 13:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Image transformer #4209

Image transformer #4209

DeMoorJasper commented Feb 23, 2020 •

edited

Loading

parcel-benchmark commented Feb 23, 2020 •

edited

Loading

Timings

Cold Bundles

Cached Bundles

Timings

Cold Bundles

Cached Bundles

Timings

Cold Bundles

Cached Bundles

Timings

Cold Bundles

Cached Bundles

DeMoorJasper Feb 23, 2020

DeMoorJasper Feb 23, 2020

DeMoorJasper Feb 28, 2020

mischnic commented Mar 11, 2020

DeMoorJasper commented Mar 11, 2020

height bot commented Mar 14, 2020 •

edited

Loading

DeMoorJasper commented Jul 12, 2020

Image transformer #4209

Image transformer #4209

Conversation

DeMoorJasper commented Feb 23, 2020 • edited Loading

↪️ Pull Request

💻 Examples

🚨 Test instructions

✔️ PR Todo

parcel-benchmark commented Feb 23, 2020 • edited Loading

Benchmark Results

Timings

Cold Bundles

Cached Bundles

Timings

Cold Bundles

Cached Bundles

Timings

Cold Bundles

Cached Bundles

Timings

Cold Bundles

Cached Bundles

DeMoorJasper Feb 23, 2020

Choose a reason for hiding this comment

DeMoorJasper Feb 23, 2020

Choose a reason for hiding this comment

DeMoorJasper Feb 28, 2020

Choose a reason for hiding this comment

mischnic commented Mar 11, 2020

DeMoorJasper commented Mar 11, 2020

height bot commented Mar 14, 2020 • edited Loading

DeMoorJasper commented Jul 12, 2020

DeMoorJasper commented Feb 23, 2020 •

edited

Loading

parcel-benchmark commented Feb 23, 2020 •

edited

Loading

height bot commented Mar 14, 2020 •

edited

Loading