Skip to content

Commit

Permalink
Fix broken FastBoot rendering of imgix provider
Browse files Browse the repository at this point in the history
Caused by actually broken FastBoot, messing up with the `URL` global: ember-fastboot/ember-cli-fastboot#816
  • Loading branch information
simonihmig committed Aug 18, 2021
1 parent d9b1a76 commit d4bbcd7
Show file tree
Hide file tree
Showing 6 changed files with 48 additions and 1 deletion.
9 changes: 8 additions & 1 deletion addon/helpers/responsive-image-imgix-provider.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,14 @@ export const provider = (
return {
imageTypes: options.formats ?? ['png', 'jpeg', 'webp'],
imageUrlFor(width: number, type: ImageType = 'jpeg'): string {
const url = new URL(`https://${domain}/${normalizeSrc(image)}`);
// In the FastBoot sandbox, the URL global is shadowed by the `url` module. :-(
// See https://github.com/ember-fastboot/ember-cli-fastboot/issues/816
const URLConstructor: typeof URL =
typeof URL === 'function' ? URL : (URL as { URL: typeof URL }).URL;

const url = new URLConstructor(
`https://${domain}/${normalizeSrc(image)}`
);
const params = url.searchParams;

params.set('fm', formatMap[type] ?? type);
Expand Down
2 changes: 2 additions & 0 deletions tests/dummy/app/router.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,6 @@ export default class Router extends EmberRouter {

Router.map(function () {
this.route('image');
this.route('cloudinary');
this.route('imgix');
});
1 change: 1 addition & 0 deletions tests/dummy/app/templates/cloudinary.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<ResponsiveImage @src={{responsive-image-cloudinary-provider "samples/animals/three-dogs"}} data-test-image/>
1 change: 1 addition & 0 deletions tests/dummy/app/templates/imgix.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<ResponsiveImage @src={{responsive-image-imgix-provider "pages/approach/agile_2000x1200.jpg"}} data-test-image/>
18 changes: 18 additions & 0 deletions tests/fastboot/cloudinary-test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { module, test } from 'qunit';
import {
setup,
visit /* mockServer */,
} from 'ember-cli-fastboot-testing/test-support';

module('FastBoot | Cloudinary', function (hooks) {
setup(hooks);

test('it renders an image', async function (assert) {
await visit('/cloudinary');

assert.dom('img[data-test-image]').exists();
assert
.dom('img[data-test-image]')
.hasAttribute('src', new RegExp('https://res.cloudinary.com/kaliber5/'));
});
});
18 changes: 18 additions & 0 deletions tests/fastboot/imgix-test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { module, test } from 'qunit';
import {
setup,
visit /* mockServer */,
} from 'ember-cli-fastboot-testing/test-support';

module('FastBoot | Imgix', function (hooks) {
setup(hooks);

test('it renders an image', async function (assert) {
await visit('/imgix');

assert.dom('img[data-test-image]').exists();
assert
.dom('img[data-test-image]')
.hasAttribute('src', new RegExp('https://kaliber5.imgix.net/'));
});
});

0 comments on commit d4bbcd7

Please sign in to comment.