Breaking! Rename credit field in output manifest to meta, and deprecate types.

packages/cli/README.md

@@ -28,7 +28,7 @@ Modern responsive web image generation and tooling.
 - Keep images in `static/` instead of `src/`.
 - Low-quality image placeholders (LQIP).
 - Cache-busting.
-- Image credit and license metadata (optional).
+- Image metadata (optional) for non-visual descriptions, credits, licenses, etc.
 - Web framework support:
   - Should work with most anything.
   - Author is using alongside SvelteKit and Vite.
@@ -65,8 +65,7 @@ Imagine a web app with the following directory structure:
 In `static/images` we have subdirectories for different groups of images
 (`countries`, `fruits`). Under those subdirs we have original high-resolution
 source images named for each country or fruit (`italy.jpg`, `pear.jpg`).
-Alongside each original image, we have optional credit and license information
-in a `json` file.
+Alongside each original image, we have optional extra metadata in a `json` file.
 
 ### Run
 
@@ -131,14 +130,6 @@ Outputs:
 
 ```js
 {
-  credit: {
-    author: 'PhotographerPerson',
-    authorLink: 'https://pixabay.com/users/PhotographerPerson/',
-    link: 'https://pixabay.com/photos/fruit-pear-pear/',
-    title: 'Pear Basket',
-    license: 'Pixabay',
-    licenseLink: 'https://pixabay.com/service/license/'
-  },
   default: '/images/fruits/_gen/pear-800.jpg?v=54321',
   formats: {
     avif: {
@@ -154,6 +145,15 @@ Outputs:
       800: '/images/fruits/_gen/pear-800.jpg?v=54321'
     }
   },
+  meta: {
+    author: 'PhotographerPerson',
+    authorLink: 'https://pixabay.com/users/PhotographerPerson/',
+    description: 'Sliced apples and other fruits.',
+    link: 'https://pixabay.com/photos/fruit-pear-pear/',
+    title: 'Pear Basket',
+    license: 'Pixabay',
+    licenseLink: 'https://pixabay.com/service/license/'
+  },
   placeholder: 'data:image/webp;base64,UklGASDFRngA...LowrlqAAA=',
   sizes: {
     400: {

packages/cli/bin/web-image-gen.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import '../dist/cli.js'

packages/cli/package.json

@@ -1,18 +1,18 @@
 {
   "name": "web-image-gen",
-  "version": "1.1.6",
+  "version": "2.0.0",
   "description": "Modern responsive web image generation and tooling",
   "homepage": "https://github.com/brev/web-image-gen/tree/main/packages/cli#readme",
   "license": "MIT",
   "main": "./dist/index.js",
   "type": "module",
-  "types": "./dist/index.d.ts",
+  "types": "./types/index.d.ts",
   "author": {
     "name": "Brev Patterson",
     "url": "https://github.com/brev"
   },
   "bin": {
-    "web-image-gen": "web-image-gen.js"
+    "web-image-gen": "bin/web-image-gen.js"
   },
   "bugs": {
     "url": "https://github.com/brev/web-image-gen/issues"
@@ -22,32 +22,32 @@
     "deepmerge-ts": "^5.1.0",
     "prettier": "^3.0.3",
     "recursive-readdir-files": "^2.3.0",
-    "sharp": "^0.32.5",
-    "ts-command-line-args": "^2.5.1",
-    "web-image-gen-common": "workspace:^"
+    "sharp": "^0.32.6",
+    "ts-command-line-args": "^2.5.1"
   },
   "devDependencies": {
-    "@types/command-line-usage": "^5.0.2",
-    "@types/node": "^20.6.0",
-    "@typescript-eslint/eslint-plugin": "^6.7.0",
-    "@typescript-eslint/parser": "^6.7.0",
+    "@types/command-line-usage": "^5.0.3",
+    "@types/node": "^20.8.10",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/parser": "^6.9.1",
     "await-spawn": "^4.0.2",
     "c8": "^8.0.1",
-    "eslint": "^8.49.0",
+    "eslint": "^8.53.0",
     "eslint-config-prettier": "^9.0.0",
-    "esm-loader-import-relative-extension": "^1.0.10",
-    "esm-loader-json": "^1.0.5",
-    "esm-loader-typescript": "^1.0.5",
-    "node-esm-loader": "^0.2.3",
+    "esm-loader-import-relative-extension": "^1.0.11",
+    "esm-loader-json": "^1.0.6",
+    "esm-loader-typescript": "^1.0.6",
+    "node-esm-loader": "^0.2.5",
     "npm-run-all": "^4.1.5",
-    "rimraf": "^5.0.1",
+    "rimraf": "^5.0.5",
     "strip-ansi": "^7.1.0",
     "typescript": "^5.2.2",
     "uvu": "^0.5.6"
   },
   "files": [
+    "bin/*",
     "dist/*",
-    "web-image-gen.js"
+    "types/*"
   ],
   "keywords": [
     "web",
@@ -75,7 +75,7 @@
     "bin:tsc": "tsc",
     "bin:tsc:check": "run-s 'bin:tsc --noEmit'",
     "bin:tsc:checktest": "run-s 'bin:tsc --noEmit --project test/tsconfig.json'",
-    "bin:uvu": "NODE_OPTIONS='--loader node-esm-loader' uvu test/ .test.ts",
+    "bin:uvu": "NODE_OPTIONS='--import node-esm-loader/register' uvu test/ .test.ts",
     "build": "run-s bin:tsc",
     "build:watch": "run-s 'bin:tsc --watch'",
     "clean": "rimraf coverage/ dist/",

packages/cli/src/arguments.ts

@@ -6,7 +6,7 @@ import type {
   OriginalsArguments,
   CleanArguments,
   Options,
-} from 'web-image-gen-common'
+} from '../types'
 import type { Section } from 'command-line-usage'
 
 import { parse } from 'ts-command-line-args'
@@ -16,9 +16,9 @@ type CommandArgumentsPlus = CommandArguments & {
   _unknown: Array<string>
 }
 
-// meta
+// context
 
-const meta = {
+const context = {
   name: 'web-image-gen',
   global: {
     commands: 'Available Commands',
@@ -67,9 +67,9 @@ const meta = {
     options: 'Clean Options',
   },
 }
-const metaUsage = (command = '<command>') => ({
+const contextUsage = (command = '<command>') => ({
   one: `{bold Usage:}`,
-  two: `\`${meta.name.toLowerCase()} {bold ${command}} [options ...]\``,
+  two: `\`${context.name.toLowerCase()} {bold ${command}} [options ...]\``,
 })
 
 // config - aliases=cfhoprv
@@ -85,19 +85,19 @@ const commandConfig: ArgumentConfig<CommandArguments> = {
 const globalConfig: ArgumentConfig<GlobalArguments> = {
   config: {
     alias: 'c',
-    description: meta.global.config,
+    description: context.global.config,
     optional: true,
     type: String,
   },
   help: {
     alias: 'h',
-    description: meta.global.help,
+    description: context.global.help,
     optional: true,
     type: Boolean,
   },
   verbose: {
     alias: 'v',
-    description: meta.global.verbose,
+    description: context.global.verbose,
     optional: true,
     type: Boolean,
   },
@@ -106,13 +106,13 @@ const globalConfig: ArgumentConfig<GlobalArguments> = {
 const generateConfig: ArgumentConfig<GenerateArguments> = {
   force: {
     alias: 'f',
-    description: meta.generate.force,
+    description: context.generate.force,
     optional: true,
     type: Boolean,
   },
   only: {
     alias: 'o',
-    description: meta.generate.only,
+    description: context.generate.only,
     optional: true,
     type: String,
   },
@@ -121,19 +121,19 @@ const generateConfig: ArgumentConfig<GenerateArguments> = {
 const originalsConfig: ArgumentConfig<OriginalsArguments> = {
   optimize: {
     alias: 'p',
-    description: meta.originals.optimize,
+    description: context.originals.optimize,
     optional: true,
     type: Boolean,
   },
   remove: {
     alias: 'r',
-    description: meta.originals.remove,
+    description: context.originals.remove,
     optional: true,
     type: Boolean,
   },
   force: {
     alias: 'f',
-    description: meta.originals.force,
+    description: context.originals.force,
     optional: true,
     type: Boolean,
   },
@@ -142,7 +142,7 @@ const originalsConfig: ArgumentConfig<OriginalsArguments> = {
 const cleanConfig: ArgumentConfig<CleanArguments> = {
   only: {
     alias: 'o',
-    description: meta.clean.only,
+    description: context.clean.only,
     optional: true,
     type: String,
   },
@@ -155,26 +155,26 @@ const optionsConfig = { ...globalConfig } as ArgumentConfig<Options>
 const guides: Record<string, Record<string, Section>> = {
   global: {
     header: {
-      header: meta.name,
-      content: [meta.global.description, '', meta.global.url],
+      header: context.name,
+      content: [context.global.description, '', context.global.url],
     },
     usage: {
-      content: [metaUsage()],
+      content: [contextUsage()],
     },
     commands: {
-      header: meta.global.commands,
+      header: context.global.commands,
       content: [
         {
           one: `{bold generate}`,
-          two: meta.generate.description,
+          two: context.generate.description,
         },
         {
           one: `{bold originals}`,
-          two: meta.originals.description,
+          two: context.originals.description,
         },
         {
           one: `{bold clean}`,
-          two: meta.clean.description,
+          two: context.clean.description,
         },
         {
           one: `{bold help}`,
@@ -194,17 +194,17 @@ const guides: Record<string, Record<string, Section>> = {
     header: {
       header: 'Generate',
       content: [
-        meta.generate.description,
-        meta.generate.details,
+        context.generate.description,
+        context.generate.details,
         '',
-        meta.global.url,
+        context.global.url,
       ],
     },
     usage: {
-      content: [metaUsage('generate')],
+      content: [contextUsage('generate')],
     },
     options: {
-      header: meta.generate.options,
+      header: context.generate.options,
       optionList: Object.keys(generateConfig).map((name) => ({
         name,
         ...generateConfig[name as keyof ArgumentConfig<GenerateArguments>],
@@ -214,13 +214,13 @@ const guides: Record<string, Record<string, Section>> = {
   originals: {
     header: {
       header: 'Originals',
-      content: [meta.originals.description, '', meta.global.url],
+      content: [context.originals.description, '', context.global.url],
     },
     usage: {
-      content: [metaUsage('originals')],
+      content: [contextUsage('originals')],
     },
     options: {
-      header: meta.originals.options,
+      header: context.originals.options,
       optionList: Object.keys(originalsConfig).map((name) => ({
         name,
         ...originalsConfig[name as keyof ArgumentConfig<OriginalsArguments>],
@@ -230,13 +230,13 @@ const guides: Record<string, Record<string, Section>> = {
   clean: {
     header: {
       header: 'Clean',
-      content: [meta.clean.description, '', meta.global.url],
+      content: [context.clean.description, '', context.global.url],
     },
     usage: {
-      content: [metaUsage('clean')],
+      content: [contextUsage('clean')],
     },
     options: {
-      header: meta.clean.options,
+      header: context.clean.options,
       optionList: Object.keys(cleanConfig).map((name) => ({
         name,
         ...cleanConfig[name as keyof ArgumentConfig<CleanArguments>],

packages/cli/src/clean.ts

@@ -1,4 +1,4 @@
-import type { Config, Options } from 'web-image-gen-common'
+import type { Config, Options } from '../types'
 
 import { getFlags, shortPath } from './common.js'
 import { readdir, rm } from 'node:fs/promises'

packages/cli/src/cli.ts

@@ -1,4 +1,4 @@
-import type { Config, Options } from 'web-image-gen-common'
+import type { Config, Options } from '../types'
 
 import clean from './clean.js'
 import { createInterface } from 'node:readline/promises'

packages/cli/src/common.ts

@@ -1,8 +1,30 @@
-import type { Config, Options } from 'web-image-gen-common'
+import type { Config, Options } from '../types'
 
 import { cwd } from 'node:process'
 import { deepmergeCustom } from 'deepmerge-ts'
 
+// const
+
+export const imageInputFormats: Array<string> = [
+  'avif',
+  'gif',
+  'jpg',
+  'jpeg',
+  'png',
+  'svg',
+  'tif',
+  'tiff',
+  'webp',
+]
+
+export const imageOutputFormats: Array<string> = imageInputFormats.filter(
+  (format) => !['svg', 'tif', 'tiff'].includes(format)
+)
+
+export const manifestOutputFormats: Array<string> = ['json', 'js', 'ts']
+
+// functions
+
 export const deepMerge = deepmergeCustom({ mergeArrays: false })
 
 export const getFlags = (options: Options) => ({

packages/cli/src/config.ts

@@ -1,13 +1,13 @@
-import type { Config, Options } from 'web-image-gen-common'
+import type { Config, Options } from '../types'
 
 import { access, readFile } from 'node:fs/promises'
 import { cwd } from 'node:process'
-import { deepMerge } from './common.js'
-import { extname, resolve } from 'node:path'
 import {
+  deepMerge,
   imageOutputFormats,
   manifestOutputFormats,
-} from 'web-image-gen-common/const'
+} from './common.js'
+import { extname, resolve } from 'node:path'
 
 /**
  * Default Config