From 5baad8dc0ded6aa369624f982a4c8cae399f3804 Mon Sep 17 00:00:00 2001 From: Stefan Popov Date: Mon, 14 Sep 2026 13:35:33 +0200 Subject: [PATCH 1/7] feat(core): Add keycdn provider support --- README.md | 12 +- demo/src/lib/Gallery.svelte | 1 - demo/src/lib/SiteFooter.svelte | 3 +- demo/src/lib/home/BenefitsSection.svelte | 6 +- demo/src/lib/home/CtaSection.svelte | 3 +- demo/src/lib/home/HeroSection.svelte | 3 +- demo/src/lib/home/ProvidersSection.svelte | 6 +- demo/src/lib/providers.ts | 3 + demo/src/lib/server/provider-docs.ts | 33 ++++ demo/src/routes/+page.svelte | 3 +- demo/static/providers/keycdn.png | Bin 0 -> 3121 bytes packages/angular/CHANGELOG.md | 2 +- packages/angular/README.md | 2 +- packages/angular/package.json | 2 +- packages/core/CHANGELOG.md | 2 +- packages/core/README.md | 4 +- packages/core/package.json | 2 +- packages/core/src/providers/index.ts | 2 + packages/core/src/providers/keycdn.ts | 46 ++++++ packages/core/src/providers/registry.ts | 3 + .../core/test/unit/providers/keycdn.test.ts | 147 ++++++++++++++++++ packages/react/CHANGELOG.md | 2 +- packages/react/README.md | 4 +- packages/react/package.json | 2 +- packages/svelte/CHANGELOG.md | 2 +- packages/svelte/README.md | 2 +- packages/svelte/package.json | 2 +- 27 files changed, 270 insertions(+), 29 deletions(-) create mode 100644 demo/static/providers/keycdn.png create mode 100644 packages/core/src/providers/keycdn.ts create mode 100644 packages/core/test/unit/providers/keycdn.test.ts diff --git a/README.md b/README.md index 89d9330..a439382 100644 --- a/README.md +++ b/README.md @@ -41,10 +41,10 @@ Framework defaults solve images inside one framework. DeSource Image handles ima - **Built for fast product iterations.** Change image quality, format, crop, or responsive sizes in code. Source files and filenames stay unchanged. - **One source instead of exported variants.** Start with one suitable image and generate the widths and formats each screen needs. - **Deployment-aware provider selection.** Leave `provider` on `auto`. DeSource Image detects Vercel, Netlify, or AWS Amplify and uses IPX for local or other environments. -- **Simplest way to deal with image providers.** CMS URLs need aliases, validation, and provider-specific modifiers. DeSource Image handles provider selection, modifier translation, and URL generation for 46 built-in providers. +- **Simplest way to deal with image providers.** CMS URLs need aliases, validation, and provider-specific modifiers. DeSource Image handles provider selection, modifier translation, and URL generation for built-in providers. - **Native framework APIs.** Use Angular components and directives, React components and hooks, or Svelte components, actions, and attachments. Output remains native `` and `` markup. - **Built-in local optimizer.** React/Vite, Next.js, Angular SSR, and SvelteKit adapters can serve IPX transformations without a separate image service. -- **46 provider modules.** Use Cloudinary, Imgix, ImageKit, Sanity, Contentful, Shopify, Vercel, Netlify, or another built-in provider. Provider subpath imports remain **tree-shakable**. +- **Dozens of built-in provider modules.** Use Cloudinary, Imgix, ImageKit, Sanity, Contentful, Shopify, Vercel, Netlify, or another built-in provider. Provider subpath imports remain **tree-shakable**. - **Responsive images and modern formats.** Generate width or density candidates, breakpoint-aware `sizes`, ordered AVIF/WebP sources, and a fallback image from one input. - **Placeholders and LCP controls.** Generate low-resolution placeholders, preload links, loading hints, and fetch priority without hand-maintained head tags. - **SSR-friendly.** The same inputs generate the same URLs and attributes on the server and client, so hydration does not rewrite image markup. @@ -66,7 +66,7 @@ After adopting the package for your framework, image components need no host-spe | [`@sveltejs/enhanced-img`](https://svelte.dev/docs/kit/images) | Static local assets transformed during the Vite build | Images are processed at build time. The deployment target does not switch them to its runtime image service. | You want local images transformed on demand to save your time. Your images arrive from a CMS, database, API, object store, or CDN, or the same source should use IPX locally and the deployment platform’s optimizer in production. | | [Unpic](https://unpic.pics/) | Cross-framework responsive images already hosted on recognizable CDN or CMS URLs | Detects the provider from each `src` URL. Local or unknown sources need a fallback or explicit provider; the deployment itself is not the selection signal. | Vercel, Netlify, or AWS Amplify should choose the optimizer for every source, including relative paths, and you also need presets, aliases, source rules, ``, or server adapters. | -DeSource Image combines deployment-aware selection and 46 provider modules under one configuration for React/Next.js, Angular, and Svelte/SvelteKit. Nuxt applications should continue to use [`@nuxt/image`](https://image.nuxt.com/). +DeSource Image combines deployment-aware selection and built-in provider modules under one configuration for React/Next.js, Angular, and Svelte/SvelteKit. Nuxt applications should continue to use [`@nuxt/image`](https://image.nuxt.com/). ## Packages @@ -252,7 +252,7 @@ const picture = image.getPicture({ - Picture output: ordered AVIF/WebP/etc. `` elements plus a fallback ``. - Placeholders: generated low-resolution provider URLs, custom URLs, custom `[width, height, quality, blur]` tuples, decode-before-swap behavior, and temporary classes. - Head preloads: responsive `` generation with reference counting in framework packages. -- Providers: 46 built-in modules, a small default registry, tree-shakable subpath imports, and typed custom providers. +- Providers: built-in modules, a small default registry, tree-shakable subpath imports, and typed custom providers. - Presets and aliases: reusable image defaults and clean source aliases for CMS or asset hosts. - Source controls: `domains`, `localPatterns`, `remotePatterns`, and invalid-source policies. - Server adapters: IPX middleware for Angular SSR, React/Vite, Next.js App Router, SvelteKit, Fetch API servers, and Connect/Express-style Node servers. @@ -347,7 +347,7 @@ The default registry is intentionally small: - `netlifyLargeMedia` - `none` -Import all 46 provider modules only when needed: +Import all built-in provider modules only when needed: ```ts import { BUILT_IN_PROVIDER_NAMES, createBuiltInProviders } from '@desource/image/providers'; @@ -363,7 +363,7 @@ import { sanityProvider } from '@desource/image/providers/sanity'; Supported provider modules: -`aliyun`, `awsAmplify`, `builderio`, `bunny`, `caisy`, `cloudflare`, `cloudflareimages`, `cloudimage`, `cloudinary`, `contentful`, `directus`, `edgeonePages`, `fastly`, `filerobot`, `flyimg`, `github`, `glide`, `gumlet`, `hygraph`, `imageengine`, `imagekit`, `imgix`, `imgproxy`, `ipx`, `ipxStatic`, `netlify`, `netlifyImageCdn`, `netlifyLargeMedia`, `none`, `picsum`, `prepr`, `prismic`, `sanity`, `shopify`, `sirv`, `storyblok`, `strapi`, `strapi5`, `supabase`, `twicpics`, `umbraco`, `unsplash`, `uploadcare`, `vercel`, `wagtail`, and `weserv`. +`aliyun`, `awsAmplify`, `builderio`, `bunny`, `caisy`, `cloudflare`, `cloudflareimages`, `cloudimage`, `cloudinary`, `contentful`, `directus`, `edgeonePages`, `fastly`, `filerobot`, `flyimg`, `github`, `glide`, `gumlet`, `hygraph`, `imageengine`, `imagekit`, `imgix`, `imgproxy`, `ipx`, `ipxStatic`, `keycdn`, `netlify`, `netlifyImageCdn`, `netlifyLargeMedia`, `none`, `picsum`, `prepr`, `prismic`, `sanity`, `shopify`, `sirv`, `storyblok`, `strapi`, `strapi5`, `supabase`, `twicpics`, `umbraco`, `unsplash`, `uploadcare`, `vercel`, `wagtail`, and `weserv`. ## Local optimization diff --git a/demo/src/lib/Gallery.svelte b/demo/src/lib/Gallery.svelte index 4ea6071..0ecdd36 100644 --- a/demo/src/lib/Gallery.svelte +++ b/demo/src/lib/Gallery.svelte @@ -327,7 +327,6 @@ alt={item.alt} draggable={false} loading="lazy" - fetchpriority="low" format="webp" width={60} height={60} diff --git a/demo/src/lib/SiteFooter.svelte b/demo/src/lib/SiteFooter.svelte index aff1c43..1155627 100644 --- a/demo/src/lib/SiteFooter.svelte +++ b/demo/src/lib/SiteFooter.svelte @@ -1,6 +1,7 @@ @@ -18,7 +19,7 @@ Open image tooling -

One image API for React, Angular, and Svelte, backed by 46 provider modules.

+

One image API for React, Angular, and Svelte, backed by {providerCount} provider modules.

MIT licensed diff --git a/demo/src/lib/home/BenefitsSection.svelte b/demo/src/lib/home/BenefitsSection.svelte index 0d34efd..6776053 100644 --- a/demo/src/lib/home/BenefitsSection.svelte +++ b/demo/src/lib/home/BenefitsSection.svelte @@ -1,3 +1,7 @@ + +
Angular 19-22 @@ -26,7 +30,7 @@

Leave provider on auto. DeSource Image detects Vercel, Netlify, or AWS Amplify and uses IPX elsewhere.

-

46 provider modules

+

{providerCount} provider modules

Use Cloudinary, Imgix, ImageKit, Sanity, Contentful, Shopify, or another built-in provider.

diff --git a/demo/src/lib/home/CtaSection.svelte b/demo/src/lib/home/CtaSection.svelte index c8d6631..64ceb1d 100644 --- a/demo/src/lib/home/CtaSection.svelte +++ b/demo/src/lib/home/CtaSection.svelte @@ -1,4 +1,5 @@ @@ -46,7 +47,7 @@
deliveryCDN
- 46 providers + {providerCount} providers 3 frameworks
diff --git a/demo/src/lib/home/HeroSection.svelte b/demo/src/lib/home/HeroSection.svelte index 77d1bc2..db8050c 100644 --- a/demo/src/lib/home/HeroSection.svelte +++ b/demo/src/lib/home/HeroSection.svelte @@ -1,6 +1,7 @@ diff --git a/demo/src/lib/home/BenefitsSection.svelte b/demo/src/lib/home/BenefitsSection.svelte index 6776053..66c1e33 100644 --- a/demo/src/lib/home/BenefitsSection.svelte +++ b/demo/src/lib/home/BenefitsSection.svelte @@ -1,5 +1,5 @@
diff --git a/demo/src/lib/home/CtaSection.svelte b/demo/src/lib/home/CtaSection.svelte index 64ceb1d..08b2e64 100644 --- a/demo/src/lib/home/CtaSection.svelte +++ b/demo/src/lib/home/CtaSection.svelte @@ -1,5 +1,5 @@ diff --git a/demo/src/lib/home/HeroSection.svelte b/demo/src/lib/home/HeroSection.svelte index db8050c..f0b7519 100644 --- a/demo/src/lib/home/HeroSection.svelte +++ b/demo/src/lib/home/HeroSection.svelte @@ -1,7 +1,7 @@