Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(common): simplify URL construction in image loaders (#47082)

Browse source 
This commit simplifies the URL construction logic by capturing
the base path and loader config argumnets in one function.

PR Close #47082
This commit is contained in:
Pawel Kozlowski 2022-06-17 12:13:52 +02:00 committed by Pawel Kozlowski
parent 91555e9f99
commit 59ea528f8e
5 changed files with 37 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
packages/common/src/directives/ng_optimized_image/image_loaders/cloudflare_loader.ts
View file

@ -19,15 +19,13 @@ import {createImageLoader, ImageLoaderConfig} from './image_loader';
* @returns Provider that provides an ImageLoader function
*/
export const provideCloudflareLoader = createImageLoader(
cloudflareLoaderFactory,
createCloudflareURL,
ngDevMode ? ['https://<ZONE>/cdn-cgi/image/<OPTIONS>/<SOURCE-IMAGE>'] : undefined);
function cloudflareLoaderFactory(path: string) {
return (config: ImageLoaderConfig) => {
let params = `format=auto`;
if (config.width) {
params += `,width=${config.width}`;
}
return `${path}/cdn-cgi/image/${params}/${config.src}`;
};
function createCloudflareURL(path: string, config: ImageLoaderConfig) {
let params = `format=auto`;
if (config.width) {
params += `,width=${config.width}`;
}
return `${path}/cdn-cgi/image/${params}/${config.src}`;
}

20
packages/common/src/directives/ng_optimized_image/image_loaders/cloudinary_loader.ts
View file

@ -24,7 +24,7 @@ import {createImageLoader, ImageLoaderConfig} from './image_loader';
* @returns Set of providers to configure the Cloudinary loader.
*/
export const provideCloudinaryLoader = createImageLoader(
cloudinaryLoaderFactory,
createCloudinaryURL,
ngDevMode ?
[
'https://res.cloudinary.com/mysite', 'https://mysite.cloudinary.com',
@ -32,14 +32,12 @@ export const provideCloudinaryLoader = createImageLoader(
] :
undefined);
function cloudinaryLoaderFactory(path: string) {
return (config: ImageLoaderConfig) => {
// Example of a Cloudinary image URL:
// https://res.cloudinary.com/mysite/image/upload/c_scale,f_auto,q_auto,w_600/marketing/tile-topics-m.png
let params = `f_auto,q_auto`; // sets image format and quality to "auto"
if (config.width) {
params += `,w_${config.width}`;
}
return `${path}/image/upload/${params}/${config.src}`;
};
function createCloudinaryURL(path: string, config: ImageLoaderConfig) {
// Example of a Cloudinary image URL:
// https://res.cloudinary.com/mysite/image/upload/c_scale,f_auto,q_auto,w_600/marketing/tile-topics-m.png
let params = `f_auto,q_auto`; // sets image format and quality to "auto"
if (config.width) {
params += `,w_${config.width}`;
}
return `${path}/image/upload/${params}/${config.src}`;
}

8
packages/common/src/directives/ng_optimized_image/image_loaders/image_loader.ts
View file

@ -42,23 +42,21 @@ export const IMAGE_LOADER = new InjectionToken<ImageLoader>('ImageLoader', {
factory: () => noopImageLoader,
});
export function createImageLoader(urlFn: (path: string) => ImageLoader, exampleUrls?: string[]) {
export function createImageLoader(
buildUrlFn: (path: string, config: ImageLoaderConfig) => string, exampleUrls?: string[]) {
return function provideImageLoader(
path: string, options: {ensurePreconnect?: boolean} = {ensurePreconnect: true}) {
if (ngDevMode && !isValidPath(path)) {
throwInvalidPathError(path, exampleUrls || []);
}
path = normalizePath(path);
const createURLFn = urlFn(path);
const loaderFn = (config: ImageLoaderConfig) => {
if (ngDevMode && isAbsoluteURL(config.src)) {
throwUnexpectedAbsoluteUrlError(path, config.src);
}
config.src = normalizeSrc(config.src);
return createURLFn(config);
return buildUrlFn(path, {...config, src: normalizeSrc(config.src)});
};
const providers: Provider[] = [{provide: IMAGE_LOADER, useValue: loaderFn}];

20
packages/common/src/directives/ng_optimized_image/image_loaders/imagekit_loader.ts
View file

@ -23,17 +23,15 @@ import {createImageLoader, ImageLoaderConfig} from './image_loader';
* @returns Set of providers to configure the ImageKit loader.
*/
export const provideImageKitLoader = createImageLoader(
imagekitLoaderFactory,
createImagekitURL,
ngDevMode ? ['https://ik.imagekit.io/mysite', 'https://subdomain.mysite.com'] : undefined);
export function imagekitLoaderFactory(path: string) {
return (config: ImageLoaderConfig) => {
// Example of an ImageKit image URL:
// https://ik.imagekit.io/demo/tr:w-300,h-300/medium_cafe_B1iTdD0C.jpg
let params = `tr:q-auto`; // applies the "auto quality" transformation
if (config.width) {
params += `,w-${config.width}`;
}
return `${path}/${params}/${config.src}`;
};
export function createImagekitURL(path: string, config: ImageLoaderConfig) {
// Example of an ImageKit image URL:
// https://ik.imagekit.io/demo/tr:w-300,h-300/medium_cafe_B1iTdD0C.jpg
let params = `tr:q-auto`; // applies the "auto quality" transformation
if (config.width) {
params += `,w-${config.width}`;
}
return `${path}/${params}/${config.src}`;
}

20
packages/common/src/directives/ng_optimized_image/image_loaders/imgix_loader.ts
View file

@ -21,16 +21,14 @@ import {createImageLoader, ImageLoaderConfig} from './image_loader';
* @returns Set of providers to configure the Imgix loader.
*/
export const provideImgixLoader =
createImageLoader(imgixLoaderFactory, ngDevMode ? ['https://somepath.imgix.net/'] : undefined);
createImageLoader(createImgixURL, ngDevMode ? ['https://somepath.imgix.net/'] : undefined);
function imgixLoaderFactory(path: string) {
return (config: ImageLoaderConfig) => {
const url = new URL(`${path}/${config.src}`);
// This setting ensures the smallest allowable format is set.
url.searchParams.set('auto', 'format');
if (config.width) {
url.searchParams.set('w', config.width.toString());
}
return url.href;
};
function createImgixURL(path: string, config: ImageLoaderConfig) {
const url = new URL(`${path}/${config.src}`);
// This setting ensures the smallest allowable format is set.
url.searchParams.set('auto', 'format');
if (config.width) {
url.searchParams.set('w', config.width.toString());
}
return url.href;
}