From b5beedd3707167aad9302737d1012f35a3f19776 Mon Sep 17 00:00:00 2001 From: JonasKruckenberg Date: Fri, 7 May 2021 16:55:37 +0200 Subject: [PATCH] feat: Allow # symbols in src urls Replace # symbols with the escaped version before parsing. This allows directives to use the full hex color string --- packages/core/src/index.ts | 2 +- packages/core/src/lib/parse-url.ts | 7 ++++++- packages/rollup/src/index.ts | 12 ++++++------ packages/vite/src/index.ts | 16 ++++++++-------- 4 files changed, 21 insertions(+), 16 deletions(-) diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 9395fcd8..3a22e802 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -22,7 +22,7 @@ export * from './types' export * from './builtins' export * from './output-formats' export * from './util' -export { parseURL } from './lib/parse-url' +export { parseURL, extractEntries } from './lib/parse-url' export { resolveConfigs } from './lib/resolve-configs' export { generateTransforms } from './lib/generate-transforms' export { applyTransforms } from './lib/apply-transforms' diff --git a/packages/core/src/lib/parse-url.ts b/packages/core/src/lib/parse-url.ts index 21f9f3be..f12f8a1b 100644 --- a/packages/core/src/lib/parse-url.ts +++ b/packages/core/src/lib/parse-url.ts @@ -1,4 +1,9 @@ -export function parseURL(url: URL) { +export function parseURL(rawURL: string) { + return new URL(rawURL.replaceAll('#', '%23'), 'file://') +} + +export function extractEntries(url: URL) { + const entries: Array<[string, string[]]> = [] for (const [key, value] of url.searchParams) { diff --git a/packages/rollup/src/index.ts b/packages/rollup/src/index.ts index 35a620df..886f3d01 100644 --- a/packages/rollup/src/index.ts +++ b/packages/rollup/src/index.ts @@ -1,5 +1,5 @@ import { Plugin } from 'rollup' -import { applyTransforms, builtins, generateTransforms, loadImage, parseURL, resolveConfigs, builtinOutputFormats, urlFormat, OutputFormat } from 'imagetools-core' +import { applyTransforms, builtins, generateTransforms, loadImage, parseURL, resolveConfigs, builtinOutputFormats, urlFormat, OutputFormat, extractEntries } from 'imagetools-core' import { createFilter, dataToEsm } from '@rollup/pluginutils' import { PluginOptions } from './types' import MagicString from 'magic-string' @@ -36,11 +36,11 @@ export function imagetools(userOptions: Partial = {}): Plugin { async load(id) { if (!filter(id)) return null - const src = new URL(id, 'file://') - const parameters = parseURL(src) + const srcURL = parseURL(id) + const parameters = extractEntries(srcURL) const imageConfigs = resolveConfigs(parameters) - const img = loadImage(decodeURIComponent(src.pathname)) + const img = loadImage(decodeURIComponent(srcURL.pathname)) const outputMetadatas = [] @@ -54,7 +54,7 @@ export function imagetools(userOptions: Partial = {}): Plugin { const { image, metadata } = await applyTransforms(transforms, img, pluginOptions.removeMetadata) - const fileName = basename(src.pathname, extname(src.pathname)) + `.${metadata.format}` + const fileName = basename(srcURL.pathname, extname(srcURL.pathname)) + `.${metadata.format}` const fileHandle = this.emitFile({ name: fileName, @@ -70,7 +70,7 @@ export function imagetools(userOptions: Partial = {}): Plugin { let outputFormat: OutputFormat = urlFormat for (const [key, format] of Object.entries(outputFormats)) { - if (src.searchParams.has(key)) { + if (srcURL.searchParams.has(key)) { outputFormat = format break } diff --git a/packages/vite/src/index.ts b/packages/vite/src/index.ts index d8906360..bd8c047d 100644 --- a/packages/vite/src/index.ts +++ b/packages/vite/src/index.ts @@ -1,5 +1,5 @@ import { Plugin, ResolvedConfig } from "vite"; -import { parseURL, loadImage, builtins, resolveConfigs, applyTransforms, generateTransforms, getMetadata, generateImageID, builtinOutputFormats, urlFormat } from 'imagetools-core' +import { parseURL, loadImage, builtins, resolveConfigs, applyTransforms, generateTransforms, getMetadata, generateImageID, builtinOutputFormats, urlFormat, extractEntries } from 'imagetools-core' import { basename, extname, join } from 'path' import { createFilter, dataToEsm } from '@rollup/pluginutils'; import MagicString from 'magic-string' @@ -38,16 +38,16 @@ export function imagetools(userOptions: Partial = {}): Plugin { async load(id) { if (!filter(id)) return null - const src = new URL(id, 'file://') - const parameters = parseURL(src) + const srcURL = parseURL(id) + const parameters = extractEntries(srcURL) const imageConfigs = resolveConfigs(parameters) - const img = loadImage(decodeURIComponent(src.pathname)) + const img = loadImage(decodeURIComponent(srcURL.pathname)) const outputMetadatas = [] for (let config of imageConfigs) { - const id = generateImageID(src, config) + const id = generateImageID(srcURL, config) const defaultConfig = typeof pluginOptions.defaultDirectives === 'function' ? pluginOptions.defaultDirectives(id) @@ -59,7 +59,7 @@ export function imagetools(userOptions: Partial = {}): Plugin { generatedImages.set(id, image) if (!this.meta.watchMode) { - const fileName = basename(src.pathname, extname(src.pathname)) + `.${metadata.format}` + const fileName = basename(srcURL.pathname, extname(srcURL.pathname)) + `.${metadata.format}` const fileHandle = this.emitFile({ name: fileName, @@ -78,7 +78,7 @@ export function imagetools(userOptions: Partial = {}): Plugin { let outputFormat: OutputFormat = urlFormat for (const [key, format] of Object.entries(outputFormats)) { - if (src.searchParams.has(key)) { + if (srcURL.searchParams.has(key)) { outputFormat = format break } @@ -98,7 +98,7 @@ export function imagetools(userOptions: Partial = {}): Plugin { const image = generatedImages.get(id) - if(!image) throw new Error(`vite-imagetools cannot find image with id "${id}" this is likely an internal error`) + if (!image) throw new Error(`vite-imagetools cannot find image with id "${id}" this is likely an internal error`) if (pluginOptions.removeMetadata === false) { image.withMetadata()