From b3f014c3713e0e04336cc948ac238cf77a8e4b9b Mon Sep 17 00:00:00 2001 From: Manu MA Date: Thu, 6 Jul 2023 21:08:13 +0200 Subject: [PATCH] fix: case for images (#4744) --- .../buildtime/runtime-generation/utils.ts | 5 +++-- packages/qwik-city/buildtime/vite/image-jsx.ts | 11 +++++++---- packages/qwik-city/buildtime/vite/plugin.ts | 5 +++-- packages/qwik/src/optimizer/src/platform.ts | 2 +- .../optimizer/src/plugins/image-size-server.ts | 2 +- .../qwik/src/optimizer/src/plugins/plugin.ts | 16 +++++++++------- .../src/media/{test.jpeg => MyTest.jpeg} | Bin .../src/media/{qwik-logo.svg => qwikLogo.svg} | 0 .../qwikcity-test/src/routes/(common)/index.tsx | 6 +++--- 9 files changed, 27 insertions(+), 20 deletions(-) rename starters/apps/qwikcity-test/src/media/{test.jpeg => MyTest.jpeg} (100%) rename starters/apps/qwikcity-test/src/media/{qwik-logo.svg => qwikLogo.svg} (100%) diff --git a/packages/qwik-city/buildtime/runtime-generation/utils.ts b/packages/qwik-city/buildtime/runtime-generation/utils.ts index cd6aa84767e..ebdd2fe71e8 100644 --- a/packages/qwik-city/buildtime/runtime-generation/utils.ts +++ b/packages/qwik-city/buildtime/runtime-generation/utils.ts @@ -1,8 +1,9 @@ export function getImportPath(importPath: string) { - if (importPath.endsWith('.tsx') || importPath.endsWith('.jsx')) { + const lowerCasePath = importPath.toLowerCase(); + if (lowerCasePath.endsWith('.tsx') || lowerCasePath.endsWith('.jsx')) { return importPath.slice(0, importPath.length - 4); } - if (importPath.endsWith('.ts')) { + if (lowerCasePath.endsWith('.ts')) { return importPath.slice(0, importPath.length - 3); } return importPath; diff --git a/packages/qwik-city/buildtime/vite/image-jsx.ts b/packages/qwik-city/buildtime/vite/image-jsx.ts index 696ffb898be..c52e2b85c31 100644 --- a/packages/qwik-city/buildtime/vite/image-jsx.ts +++ b/packages/qwik-city/buildtime/vite/image-jsx.ts @@ -2,6 +2,7 @@ import type { OutputFormat } from 'vite-imagetools'; import type { PluginOption } from 'vite'; import { optimize } from 'svgo'; import fs from 'node:fs'; +import path from 'node:path'; import { parseId } from 'packages/qwik/src/optimizer/src/plugins/plugin'; import type { QwikCityVitePluginOptions } from './types'; @@ -60,9 +61,9 @@ export function imagePlugin(userOpts?: QwikCityVitePluginOptions): PluginOption[ load: { order: 'pre', handler: async (id) => { - id = id.toLowerCase(); const { params, pathId } = parseId(id); - if (pathId.endsWith('.svg') && params.has('jsx')) { + const extension = path.extname(pathId).toLowerCase(); + if (extension === '.svg' && params.has('jsx')) { const code = await fs.promises.readFile(pathId, 'utf-8'); return { code, @@ -75,7 +76,9 @@ export function imagePlugin(userOpts?: QwikCityVitePluginOptions): PluginOption[ id = id.toLowerCase(); const { params, pathId } = parseId(id); if (params.has('jsx')) { - if (supportedExtensions.some((ext) => pathId.endsWith(ext))) { + const extension = path.extname(pathId).toLowerCase(); + + if (supportedExtensions.includes(extension)) { if (!code.includes('srcSet')) { this.error(`Image '${id}' could not be optimized to JSX`); } @@ -89,7 +92,7 @@ export function imagePlugin(userOpts?: QwikCityVitePluginOptions): PluginOption[ return _jsxQ('img', props, PROPS, undefined, 3, key, dev); }` ); - } else if (pathId.endsWith('.svg')) { + } else if (extension === '.svg') { const svgAttributes: Record = {}; const data = optimize(code, { plugins: [ diff --git a/packages/qwik-city/buildtime/vite/plugin.ts b/packages/qwik-city/buildtime/vite/plugin.ts index 54e9a8c02ae..32dab0d9dea 100644 --- a/packages/qwik-city/buildtime/vite/plugin.ts +++ b/packages/qwik-city/buildtime/vite/plugin.ts @@ -1,5 +1,5 @@ import { createMdxTransformer, type MdxTransform } from '../markdown/mdx'; -import { basename, join, resolve } from 'node:path'; +import { basename, join, resolve, extname } from 'node:path'; import type { Plugin, PluginOption, UserConfig, Rollup } from 'vite'; import { loadEnv } from 'vite'; import { generateQwikCityPlan } from '../runtime-generation/generate-qwik-city-plan'; @@ -190,7 +190,8 @@ function qwikCityPlugin(userOpts?: QwikCityVitePluginOptions): any { if (id.startsWith('\0')) { return; } - const isMD = id.endsWith('.md') || id.endsWith('.mdx'); + const ext = extname(id).toLowerCase(); + const isMD = ext === '.md' || ext === '.mdx'; if (ctx && isMD) { const fileName = basename(id); if (isMenuFileName(fileName)) { diff --git a/packages/qwik/src/optimizer/src/platform.ts b/packages/qwik/src/optimizer/src/platform.ts index 4e721517fbd..ee1dd80a89d 100644 --- a/packages/qwik/src/optimizer/src/platform.ts +++ b/packages/qwik/src/optimizer/src/platform.ts @@ -99,7 +99,7 @@ export const getPlatformInputFiles = async (sys: OptimizerSystem) => { } else { flatted.push(dir); } - return flatted.filter((a) => extensions[sys.path.extname(a)]); + return flatted.filter((a) => sys.path.extname(a).toLowerCase() in extensions); }; const filePaths = await getChildFilePaths(rootDir); diff --git a/packages/qwik/src/optimizer/src/plugins/image-size-server.ts b/packages/qwik/src/optimizer/src/plugins/image-size-server.ts index 7d83a06bd5d..40309d2ab0c 100644 --- a/packages/qwik/src/optimizer/src/plugins/image-size-server.ts +++ b/packages/qwik/src/optimizer/src/plugins/image-size-server.ts @@ -144,7 +144,7 @@ export const getImageSizeServer = ( const column = parseInt(locParts[locParts.length - 1], 10) - 1; let line = parseInt(locParts[locParts.length - 2], 10) - 1; const filePath = path.resolve(srcDir, locParts.slice(0, locParts.length - 2).join(':')); - const extension = path.extname(filePath); + const extension = path.extname(filePath).toLowerCase(); const buffer = fs.readFileSync(filePath); let text = buffer.toString('utf-8'); diff --git a/packages/qwik/src/optimizer/src/plugins/plugin.ts b/packages/qwik/src/optimizer/src/plugins/plugin.ts index b4ce67f84a7..e1e00bb4db9 100644 --- a/packages/qwik/src/optimizer/src/plugins/plugin.ts +++ b/packages/qwik/src/optimizer/src/plugins/plugin.ts @@ -434,8 +434,8 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) { } const parsedId = parseId(id); let importeePathId = normalizePath(parsedId.pathId); - const ext = path.extname(importeePathId); - if (RESOLVE_EXTS[ext]) { + const ext = path.extname(importeePathId).toLowerCase(); + if (ext in RESOLVE_EXTS) { importer = normalizePath(importer); log(`resolveId("${importeePathId}", "${importer}")`); const parsedImporterId = parseId(importer); @@ -459,8 +459,8 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) { } else if (path.isAbsolute(id)) { const parsedId = parseId(id); const importeePathId = normalizePath(parsedId.pathId); - const ext = path.extname(importeePathId); - if (RESOLVE_EXTS[ext]) { + const ext = path.extname(importeePathId).toLowerCase(); + if (ext in RESOLVE_EXTS) { log(`resolveId("${importeePathId}", "${importer}")`); const transformedOutput = isSSR ? ssrTransformedOutputs.get(importeePathId) @@ -545,10 +545,12 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) { const path = getPath(); const { pathId } = parseId(id); - const { ext, dir, base } = path.parse(pathId); - + const parsedPathId = path.parse(pathId); + const dir = parsedPathId.dir; + const base = parsedPathId.base; + const ext = parsedPathId.ext.toLowerCase(); if ( - TRANSFORM_EXTS[ext] || + ext in TRANSFORM_EXTS || TRANSFORM_REGEX.test(pathId) || insideRoots(ext, dir, opts.srcDir, opts.vendorRoots) ) { diff --git a/starters/apps/qwikcity-test/src/media/test.jpeg b/starters/apps/qwikcity-test/src/media/MyTest.jpeg similarity index 100% rename from starters/apps/qwikcity-test/src/media/test.jpeg rename to starters/apps/qwikcity-test/src/media/MyTest.jpeg diff --git a/starters/apps/qwikcity-test/src/media/qwik-logo.svg b/starters/apps/qwikcity-test/src/media/qwikLogo.svg similarity index 100% rename from starters/apps/qwikcity-test/src/media/qwik-logo.svg rename to starters/apps/qwikcity-test/src/media/qwikLogo.svg diff --git a/starters/apps/qwikcity-test/src/routes/(common)/index.tsx b/starters/apps/qwikcity-test/src/routes/(common)/index.tsx index 753fd9e7831..5242b264939 100644 --- a/starters/apps/qwikcity-test/src/routes/(common)/index.tsx +++ b/starters/apps/qwikcity-test/src/routes/(common)/index.tsx @@ -1,11 +1,11 @@ import { component$ } from "@builder.io/qwik"; import type { DocumentHead } from "@builder.io/qwik-city"; // @ts-ignore -import ImageJpeg from "../../media/test.jpeg?jsx"; +import ImageJpeg from "../../media/MyTest.jpeg?jsx"; // @ts-ignore -import ImageSvg from "../../media/qwik-logo.svg?jsx"; +import ImageSvg from "../../media/qwikLogo.svg?jsx"; // @ts-ignore -import ImageJpegResized from "../../media/test.jpeg?jsx&w=100&h=100&format=avif"; +import ImageJpegResized from "../../media/MyTest.jpeg?jsx&w=100&h=100&format=avif"; export default component$(() => { return (