feat(cli): add command line tool (#2)

Author: dangreen

packages/cli/README.md

@@ -0,0 +1,74 @@
+# @srcset/cli
+
+[![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%2Fcli.svg
+[npm-url]: https://npmjs.com/package/@srcset/cli
+
+[node]: https://img.shields.io/node/v/%40srcset%2Fcli.svg
+[node-url]: https://nodejs.org
+
+[deps]: https://img.shields.io/librariesio/release/npm/%40srcset%2Fcli
+[deps-url]: https://libraries.io/npm/%40srcset%2Fcli
+
+[size]: https://packagephobia.com/badge?p=%40srcset%2Fcli
+[size-url]: https://packagephobia.com/result?p=%40srcset%2Fcli
+
+[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
+
+Command line tool to generate responsive images.
+
+- 🌠 Resize images for different screen sizes and densities
+- 📸 Convert images to [modern formats](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#use_modern_image_formats_boldly) such as [WebP](https://developers.google.com/speed/webp) and [Avif](https://jakearchibald.com/2020/avif-has-landed/)
+- ⚡️ Powered by [sharp](https://sharp.pixelplumbing.com/)
+- 🎯 Glob sources, match rules and `srcset.config.js` configuration
+
+## Install
+
+```bash
+# pnpm
+pnpm add -D @srcset/cli
+# yarn
+yarn add -D @srcset/cli
+# npm
+npm i -D @srcset/cli
+```
+
+## Usage
+
+```bash
+npx srcset "src/images/*.jpg" --width 1920,1280,860,320 --format avif,webp,jpg -d static/images
+```
+
+Or with the `srcset.config.js` configuration file - an ES module, so set `"type": "module"` in your `package.json` or pass an `.mjs` file via `--config`:
+
+```js
+export default {
+  src: 'src/images/**/*.jpg',
+  dest: 'static/images',
+  rules: [
+    {
+      match: '(min-width: 1920px)',
+      width: [1920, 1280, 860, 320],
+      format: ['avif', 'webp', 'jpg']
+    }
+  ]
+}
+```
+
+## Documentation
+
+For more details, guides and API references, check out the [documentation website](https://srcset.js.org/integrations/cli/).

packages/cli/oxlint.config.ts

@@ -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: true,
+    browser: false
+  }
+})

packages/cli/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@srcset/cli",
+  "type": "module",
+  "version": "1.0.0",
+  "description": "Command line tool to generate responsive images.",
+  "author": {
+    "name": "Dan Onoshko",
+    "email": "danon0404@gmail.com",
+    "url": "https://github.com/dangreen"
+  },
+  "license": "MIT",
+  "homepage": "https://srcset.js.org/integrations/cli/",
+  "funding": "https://ko-fi.com/dangreen",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TrigenSoftware/srcset.git",
+    "directory": "packages/cli"
+  },
+  "bugs": {
+    "url": "https://github.com/TrigenSoftware/srcset/issues"
+  },
+  "keywords": [
+    "srcset",
+    "image",
+    "responsive",
+    "cli"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "bin": {
+    "srcset": "./dist/cli.js"
+  },
+  "publishConfig": {
+    "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:types": "tsc --noEmit",
+    "test": "run -p lint test:unit test:types"
+  },
+  "dependencies": {
+    "@srcset/core": "workspace:^",
+    "argue-cli": "^3.1.0",
+    "tinyglobby": "^0.2.10"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "sharp": "^0.35.3"
+  }
+}

packages/cli/src/args.spec.ts

@@ -0,0 +1,69 @@
+import {
+  describe,
+  it,
+  expect
+} from 'vitest'
+import { setArgs } from 'argue-cli'
+import { parseCliArgs } from './args.ts'
+
+describe('cli', () => {
+  describe('args', () => {
+    describe('parseCliArgs', () => {
+      it('should parse sources and options', () => {
+        setArgs(
+          'images/**/*.jpg',
+          '--dest',
+          'dist',
+          '--verbose',
+          '--skip-optimization',
+          '--concurrency',
+          '2'
+        )
+
+        const args = parseCliArgs()
+
+        expect(args.sources).toEqual(['images/**/*.jpg'])
+        expect(args.dest).toBe('dist')
+        expect(args.verbose).toBe(true)
+        expect(args.skipOptimization).toBe(true)
+        expect(args.concurrency).toBe(2)
+        expect(args.help).toBe(false)
+        expect(args.rule).toBeNull()
+      })
+
+      it('should build rule from match, width and format', () => {
+        setArgs(
+          '-m',
+          '**/*.jpg',
+          '-w',
+          '1,0.5',
+          '-f',
+          'webp',
+          '-f',
+          'jpg'
+        )
+
+        expect(parseCliArgs().rule).toEqual({
+          match: ['**/*.jpg'],
+          width: [1, 0.5],
+          format: ['webp', 'jpg']
+        })
+      })
+
+      it('should support camelCase twins and negation', () => {
+        setArgs('--skipOptimization', '--no-scalingUp')
+
+        const args = parseCliArgs()
+
+        expect(args.skipOptimization).toBe(true)
+        expect(args.scalingUp).toBe(false)
+      })
+
+      it('should parse help flag', () => {
+        setArgs('-h')
+
+        expect(parseCliArgs().help).toBe(true)
+      })
+    })
+  })
+})

packages/cli/src/args.ts

@@ -0,0 +1,90 @@
+import type { ImageFormat } from '@srcset/core'
+import {
+  rest,
+  alias,
+  autocase,
+  flag,
+  option,
+  readOptions
+} from 'argue-cli'
+import type { SrcSetCliRule } from './types.ts'
+
+export const usage = `srcset [...sources] [...options]
+
+  sources               Source image(s) glob patterns.
+  --help, -h            Print this message.
+  --verbose, -v         Print processed images.
+  --match, -m           Glob pattern(s) or media query(ies) to match images by name or size. Multiple values must all match.
+  --width, -w           Output image(s) widths to resize, value less than or equal to 1 is treated as a multiplier.
+  --format, -f          Output image(s) formats to convert.
+  --skip-optimization   Do not optimize output images.
+  --no-scaling-up       Do not generate images larger than the source.
+  --dest, -d            Destination directory.
+  --config, -c          Config file path. Defaults to the \`srcset.config.js\` lookup.
+  --concurrency         Concurrency limit.
+`
+
+export interface CliArgs {
+  help: boolean
+  verbose: boolean | undefined
+  sources: string[]
+  rule: SrcSetCliRule | null
+  skipOptimization: boolean | undefined
+  scalingUp: boolean | undefined
+  dest: string | undefined
+  config: string | undefined
+  concurrency: number | undefined
+}
+
+/**
+ * Parse command line arguments.
+ * @returns Parsed options.
+ */
+export function parseCliArgs(): CliArgs {
+  const {
+    help,
+    verbose,
+    match,
+    width,
+    format,
+    skipOptimization,
+    scalingUp,
+    dest,
+    config,
+    concurrency
+  } = readOptions(
+    flag(alias('help', 'h')),
+    flag(alias('verbose', 'v')),
+    option(alias('match', 'm'), Array),
+    option(alias('width', 'w'), Array),
+    option(alias('format', 'f'), Array),
+    flag(autocase('skipOptimization')),
+    flag(autocase('scalingUp')),
+    option(alias('dest', 'd'), String),
+    option(alias('config', 'c'), String),
+    option('concurrency', Number)
+  )
+  const rule: SrcSetCliRule = {
+    ...match && {
+      match
+    },
+    ...width && {
+      width: width.map(Number)
+    },
+    ...format && {
+      format: format as ImageFormat[]
+    }
+  }
+
+  return {
+    help: Boolean(help),
+    verbose,
+    sources: rest(),
+    rule: Object.keys(rule).length ? rule : null,
+    skipOptimization,
+    scalingUp,
+    dest,
+    config,
+    concurrency
+  }
+}

packages/cli/src/cli.ts

@@ -0,0 +1,50 @@
+import process from 'node:process'
+import type { SrcSetCliOptions } from './types.ts'
+import {
+  usage,
+  parseCliArgs
+} from './args.ts'
+import { loadConfig } from './config.ts'
+import { run } from './run.ts'
+
+const args = parseCliArgs()
+
+if (args.help) {
+  console.info(usage)
+  process.exit(0)
+}
+
+try {
+  const config = await loadConfig(args.config)
+  const options: SrcSetCliOptions = {
+    ...config,
+    src: args.sources.length ? args.sources : config.src ?? [],
+    dest: args.dest ?? config.dest ?? '',
+    rules: args.rule ? [args.rule] : config.rules,
+    ...args.verbose !== undefined && {
+      verbose: args.verbose
+    },
+    ...args.skipOptimization !== undefined && {
+      skipOptimization: args.skipOptimization
+    },
+    ...args.scalingUp !== undefined && {
+      scalingUp: args.scalingUp
+    },
+    ...args.concurrency !== undefined && {
+      concurrency: args.concurrency
+    }
+  }
+
+  if (!options.src.length) {
+    throw new Error('No source images: pass glob patterns or set `src` in the config.')
+  }
+
+  if (!options.dest) {
+    throw new Error('No destination directory: pass `--dest` or set `dest` in the config.')
+  }
+
+  await run(options)
+} catch (error) {
+  console.error(error instanceof Error ? error.message : error)
+  process.exit(1)
+}