Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions packages/cloudflare/.size-limit.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
[
{
"name": "All publics",
"path": "dist/index.js",
"import": "*",
"limit": "1.5 kB"
}
]
82 changes: 82 additions & 0 deletions packages/cloudflare/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
# @srcset/cloudflare

[![ESM-only package][package]][package-url]
[![NPM version][npm]][npm-url]
[![Node version][node]][node-url]
[![Dependencies status][deps]][deps-url]
[![Install size][size]][size-url]
[![Build status][build]][build-url]
[![Coverage status][coverage]][coverage-url]

[package]: https://img.shields.io/badge/package-ESM--only-ffe536.svg
[package-url]: https://nodejs.org/api/esm.html

[npm]: https://img.shields.io/npm/v/%40srcset%2Fcloudflare.svg
[npm-url]: https://npmjs.com/package/@srcset/cloudflare

[node]: https://img.shields.io/node/v/%40srcset%2Fcloudflare.svg
[node-url]: https://nodejs.org

[deps]: https://img.shields.io/librariesio/release/npm/%40srcset%2Fcloudflare
[deps-url]: https://libraries.io/npm/%40srcset%2Fcloudflare

[size]: https://deno.bundlejs.com/badge?q=%40srcset%2Fcloudflare
[size-url]: https://bundlejs.com/?q=%40srcset%2Fcloudflare

[build]: https://img.shields.io/github/actions/workflow/status/TrigenSoftware/srcset/tests.yml?branch=main
[build-url]: https://github.com/TrigenSoftware/srcset/actions

[coverage]: https://img.shields.io/codecov/c/github/TrigenSoftware/srcset.svg
[coverage-url]: https://app.codecov.io/gh/TrigenSoftware/srcset

Adapter for [Cloudflare image transformations](https://developers.cloudflare.com/images/transform-images/): srcset variant urls for content images, e.g. from an API or a CMS.

- 馃寪 Runtime builder of loader-shaped srcset objects, isomorphic: browser and server
- 馃殌 Zero configuration on a Cloudflare zone: relative urls from `/cdn-cgi/image`, no signing
- 馃敡 Custom transformations via the `processing` hook, e.g. `format=auto` negotiation
- 馃洜 Passthrough mode for local development outside of a Cloudflare zone

## Install

```bash
# pnpm
pnpm add @srcset/cloudflare @srcset/runtime
# yarn
yarn add @srcset/cloudflare @srcset/runtime
# npm
npm i @srcset/cloudflare @srcset/runtime
```

## Usage

Srcset objects for CMS images, on a Cloudflare zone:

```ts
import { Cloudflare } from '@srcset/cloudflare'

const cloudflare = new Cloudflare()
const { src, srcSet, srcMap } = cloudflare.image(photo.url, {
width: [600, 1200],
format: ['webp', 'jpg']
})
```

Format negotiation by the `Accept` header, instead of format variants:

```ts
const cloudflare = new Cloudflare({
processing: ({ width }) => `width=${width},format=auto`
})
```

Passthrough mode - untouched source urls, e.g. for local development outside of a Cloudflare zone:

```ts
const cloudflare = new Cloudflare({
passthrough: import.meta.env.DEV
})
```

## Documentation

For more details, guides and API references, check out the [documentation website](https://srcset.js.org/proxies/cloudflare/).
16 changes: 16 additions & 0 deletions packages/cloudflare/oxlint.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { defineConfig } from '@trigen/oxlint'
import testConfig from '@trigen/oxlint-config/test'
import tsTypeCheckedConfig from '@trigen/oxlint-config/typescript-type-checked'
import rootConfig from '../../oxlint.config.ts'

export default defineConfig({
extends: [
rootConfig,
tsTypeCheckedConfig,
testConfig
],
env: {
node: false,
browser: true
}
})
76 changes: 76 additions & 0 deletions packages/cloudflare/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
{
"name": "@srcset/cloudflare",
"type": "module",
"version": "1.0.0",
"description": "Adapter for Cloudflare image transformations: srcset variant urls for content images, e.g. from an API or a CMS.",
"author": {
"name": "Dan Onoshko",
"email": "danon0404@gmail.com",
"url": "https://github.com/dangreen"
},
"license": "MIT",
"homepage": "https://srcset.js.org/proxies/cloudflare/",
"funding": "https://ko-fi.com/dangreen",
"repository": {
"type": "git",
"url": "https://github.com/TrigenSoftware/srcset.git",
"directory": "packages/cloudflare"
},
"bugs": {
"url": "https://github.com/TrigenSoftware/srcset/issues"
},
"keywords": [
"srcset",
"image",
"responsive",
"cloudflare"
],
"engines": {
"node": ">=22"
},
"sideEffects": false,
"exports": {
"./package.json": "./package.json",
".": "./src/index.ts"
},
"publishConfig": {
"exports": {
"./package.json": "./package.json",
".": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
}
},
"directory": "package",
"linkDirectory": false
},
"files": [
"dist"
],
"scripts": {
"clear:package": "del ./package",
"clear:dist": "del ./dist",
"clear": "del ./package ./dist ./coverage",
"prepublishOnly": "run build clear:package clean-publish",
"postpublish": "pnpm clear:package",
"emitDeclarations": "tsc -p ./tsconfig.build.json --emitDeclarationOnly",
"build:dist": "run -p emitDeclarations [ vite build ]",
"build": "run clear:dist build:dist",
"lint": "oxlint",
"format": "oxlint --fix",
"test:unit": "vitest run --coverage",
"test:unit:watch": "vitest watch",
"test:size": "size-limit",
"test:types": "tsc --noEmit",
"test": "run -p lint test:unit test:types"
},
"peerDependencies": {
"@srcset/runtime": "workspace:^"
},
"devDependencies": {
"@size-limit/preset-small-lib": "^12.0.0",
"@srcset/runtime": "workspace:^",
"@types/node": "^22.0.0",
"size-limit": "^12.0.0"
}
}
Loading