feat: add path rules

Author: pengzhanbo

src/constants.ts

@@ -1,12 +1,3 @@
-import type { ImagePlaceholderParams } from './types'
-
-export const DEFAULT_PREFIX = 'image/placeholder'
-
-export const DEFAULT_PARAMS: ImagePlaceholderParams = {
-  width: 300,
-  type: 'png',
-}
-
 export const imageMimeType = {
   jpg: 'image/jpg',
   jpeg: 'image/jpeg',

src/pathRules.ts

@@ -2,14 +2,34 @@ import { pathToRegexp } from 'path-to-regexp'
 
 export type FindPathRule = (pathname: string) => string | undefined
 
+const pattern =
+  /([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8}|(?:rgba?)?\(?\d{1,3},\s*\d{1,3},\s*\d{1,3}(?:,\s*(?:\d?\.?\d))?\)?)/
+    .source
+
+const background = `/(bg|background)/:background${pattern}`
+const text = '/(text|t)/:text'
+const textColor = `/(textColor|color|c)/:textColor${pattern}`
+const last = '/:width(\\d+)?/:height(\\d+)?{.:type}?'
+
 export function generatePathRules(prefix: string) {
   return [
-    '/bg/:background/text/:text/:width?/:height?{.:type}?',
-    '/text/:text/bg/:background/:width?/:height?{.:type}?',
-    '/text/:text/:width?/:height?{.:type}?',
-    '/bg/:background/:width?/:height?{.:type}?',
-    '/:width?/:height?{.:type}?',
-  ].map((_) => `${prefix}${_}`)
+    `${background}${text}${textColor}`,
+    `${background}${textColor}${text}`,
+    `${text}${background}${textColor}`,
+    `${text}${textColor}${background}`,
+    `${textColor}${background}${text}`,
+    `${textColor}${text}${background}`,
+    `${background}${text}`,
+    `${text}${background}`,
+    `${background}${textColor}`,
+    `${textColor}${background}`,
+    `${text}${textColor}`,
+    `${textColor}${text}`,
+    background,
+    text,
+    textColor,
+    '',
+  ].map((_) => `${prefix}${_}${last}`)
 }
 
 export function createPathRuleMatch(prefix: string): FindPathRule {

src/pathToImage.ts

@@ -3,7 +3,6 @@ import { match } from 'path-to-regexp'
 import type { Create, CreateText } from 'sharp'
 import sharp from 'sharp'
 import { bufferCache } from './cache'
-import { DEFAULT_PARAMS } from './constants'
 import type { FindPathRule } from './pathRules'
 import type {
   ImageCacheItem,
@@ -41,7 +40,7 @@ export async function pathToImage(
 
   const params = urlMatch.params as ImagePlaceholderParams
   const query = urlQuery as ImagePlaceholderQuery
-  const imgType = params.type || DEFAULT_PARAMS.type!
+  const imgType = params.type || options.type
   const width = Number(params.width) || 300
   const height = Number(params.height) || Math.ceil(width * options.ratio)
 
@@ -74,7 +73,7 @@ export async function pathToImage(
       text: textOptions,
       quality: options.quality,
       compressionLevel: options.compressionLevel,
-      textColor: formatColor(query.textColor, true) || options.textColor,
+      textColor: formatColor(params.textColor, true) || options.textColor,
     })
     const result: ImageCacheItem = {
       type: imgType,

src/plugin.ts

@@ -2,7 +2,6 @@ import MagicString from 'magic-string'
 import type { Plugin, ResolvedConfig } from 'vite'
 import { isCSSRequest } from 'vite'
 import { contentCache } from './cache'
-import { DEFAULT_PREFIX } from './constants'
 import type { FindPathRule } from './pathRules'
 import { createPathRuleMatch } from './pathRules'
 import { pathToImage } from './pathToImage'
@@ -15,7 +14,7 @@ export const parseOptions = (
 ): Required<ImagePlaceholderOptions> => {
   options = Object.assign(
     {
-      prefix: DEFAULT_PREFIX,
+      prefix: 'image/placeholder',
       background: '#ccc',
       textColor: '#333',
       width: 300,
@@ -78,6 +77,7 @@ function placeholderServerPlugin(
 
         res.setHeader('Accept-Ranges', 'bytes')
         res.setHeader('Content-Type', getMimeType(image.type))
+        res.setHeader('Cache-Control', 'max-age=300')
         res.end(image.buffer)
       })
     },

src/types.ts

@@ -117,6 +117,7 @@ export interface ImagePlaceholderParams {
   width?: number
   height?: number
   text?: string
+  textColor?: string
   background?: string
   type?: ImageType
 }
@@ -125,7 +126,6 @@ export interface ImagePlaceholderQuery {
   noise?: 0 | 1
   noiseMean?: number
   noiseSigma?: number
-  textColor?: string
 }
 
 export interface ImageCacheItem {