fix: configure jsx import (QwikDev#4741)

samyung0 · Jul 6, 2023 · b6a51fb · b6a51fb
1 parent 89c2ccc
commit b6a51fb
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 29 deletions.
diff --git a/packages/create-qwik/create-interactive.ts b/packages/create-qwik/create-interactive.ts
@@ -129,7 +129,7 @@ export async function runCreateInteractiveCli() {
       });
       if (!isCancel(joke) && joke) {
         const [setup, punchline] = getRandomJoke();
-        note(magenta(`${setup!.trim()}\n${punchline!.trim()}`), '🤡');
+        note(magenta(`${setup!.trim()}\n${punchline!.trim()}`), '🙈');
       }
     } catch (e) {
       // Never crash on jokes

diff --git a/packages/qwik-city/buildtime/vite/image-jsx.ts b/packages/qwik-city/buildtime/vite/image-jsx.ts
@@ -9,9 +9,7 @@ import type { QwikCityVitePluginOptions } from './types';
  * @public
  */
 export function imagePlugin(userOpts?: QwikCityVitePluginOptions): PluginOption[] {
-  const supportedExtensions = ['jpg', 'jpeg', 'png', 'webp', 'gif', 'avif', 'tiff'].map(
-    (ext) => `.${ext}?jsx`
-  );
+  const supportedExtensions = ['.jpg', '.jpeg', '.png', '.webp', '.gif', '.avif', '.tiff'];
   return [
     import('vite-imagetools').then(({ imagetools }) =>
       imagetools({
@@ -62,8 +60,10 @@ export function imagePlugin(userOpts?: QwikCityVitePluginOptions): PluginOption[
       load: {
         order: 'pre',
         handler: async (id) => {
-          if (id.endsWith('.svg?jsx')) {
-            const code = await fs.promises.readFile(parseId(id).pathId, 'utf-8');
+          id = id.toLowerCase();
+          const { params, pathId } = parseId(id);
+          if (pathId.endsWith('.svg') && params.has('jsx')) {
+            const code = await fs.promises.readFile(pathId, 'utf-8');
             return {
               code,
               moduleSideEffects: false,
@@ -73,8 +73,9 @@ export function imagePlugin(userOpts?: QwikCityVitePluginOptions): PluginOption[
       },
       transform(code, id) {
         id = id.toLowerCase();
-        if (id.endsWith('?jsx')) {
-          if (supportedExtensions.some((ext) => id.endsWith(ext))) {
+        const { params, pathId } = parseId(id);
+        if (params.has('jsx')) {
+          if (supportedExtensions.some((ext) => pathId.endsWith(ext))) {
             if (!code.includes('srcSet')) {
               this.error(`Image '${id}' could not be optimized to JSX`);
             }
@@ -88,7 +89,7 @@ export function imagePlugin(userOpts?: QwikCityVitePluginOptions): PluginOption[
     return _jsxQ('img', props, PROPS, undefined, 3, key, dev);
   }`
             );
-          } else if (id.endsWith('.svg?jsx')) {
+          } else if (pathId.endsWith('.svg')) {
             const svgAttributes: Record<string, string> = {};
             const data = optimize(code, {
               plugins: [

diff --git a/packages/qwik/src/cli/joke/run-joke-command.ts b/packages/qwik/src/cli/joke/run-joke-command.ts
@@ -4,5 +4,5 @@ import { magenta } from 'kleur/colors';
 
 export async function runJokeCommand() {
   const [setup, punchline] = getRandomJoke();
-  note(magenta(`${setup!.trim()}\n${punchline!.trim()}`), '🤡');
+  note(magenta(`${setup!.trim()}\n${punchline!.trim()}`), '🙈');
 }
diff --git a/packages/qwik/src/optimizer/src/plugins/rollup.ts b/packages/qwik/src/optimizer/src/plugins/rollup.ts
@@ -173,24 +173,17 @@ export function normalizeRollupOutputOptions(
   if (rollupOutputOpts && !Array.isArray(rollupOutputOpts)) {
     Object.assign(outputOpts, rollupOutputOpts);
   }
-  if (opts.target === 'ssr') {
-    // ssr output
-    if (opts.buildMode === 'production') {
-      if (!outputOpts.assetFileNames) {
-        outputOpts.assetFileNames = 'build/q-[hash].[ext]';
-      }
-    }
-  } else if (opts.target === 'client') {
+  if (!outputOpts.assetFileNames) {
+    outputOpts.assetFileNames = 'build/q-[hash].[ext]';
+  }
+  if (opts.target === 'client') {
     // client output
 
     if (opts.buildMode === 'production') {
       // client production output
       if (!outputOpts.entryFileNames) {
         outputOpts.entryFileNames = 'build/q-[hash].js';
       }
-      if (!outputOpts.assetFileNames) {
-        outputOpts.assetFileNames = 'build/q-[hash].[ext]';
-      }
       if (!outputOpts.chunkFileNames) {
         outputOpts.chunkFileNames = 'build/q-[hash].js';
       }
@@ -199,9 +192,6 @@ export function normalizeRollupOutputOptions(
       if (!outputOpts.entryFileNames) {
         outputOpts.entryFileNames = 'build/[name].js';
       }
-      if (!outputOpts.assetFileNames) {
-        outputOpts.assetFileNames = 'build/[name].[ext]';
-      }
       if (!outputOpts.chunkFileNames) {
         outputOpts.chunkFileNames = 'build/[name].js';
       }

diff --git a/packages/qwik/src/optimizer/src/plugins/vite.unit.ts b/packages/qwik/src/optimizer/src/plugins/vite.unit.ts
@@ -58,7 +58,7 @@ vite('command: serve, mode: development', async () => {
 
   equal(build.outDir, normalizePath(resolve(cwd, 'dist')));
   equal(rollupOptions.input, normalizePath(resolve(cwd, 'src', 'entry.dev.tsx')));
-  equal(outputOptions.assetFileNames, 'build/[name].[ext]');
+  equal(outputOptions.assetFileNames, 'build/q-[hash].[ext]');
   equal(outputOptions.chunkFileNames, 'build/[name].js');
   equal(outputOptions.entryFileNames, 'build/[name].js');
   equal(outputOptions.format, 'es');
@@ -128,7 +128,7 @@ vite('command: build, mode: development', async () => {
   equal(build.outDir, normalizePath(resolve(cwd, 'dist')));
   equal(build.emptyOutDir, undefined);
   equal(rollupOptions.input, [normalizePath(resolve(cwd, 'src', 'root.tsx'))]);
-  equal(outputOptions.assetFileNames, 'build/[name].[ext]');
+  equal(outputOptions.assetFileNames, 'build/q-[hash].[ext]');
   equal(outputOptions.chunkFileNames, 'build/[name].js');
   equal(outputOptions.entryFileNames, 'build/[name].js');
   equal(build.dynamicImportVarsOptions?.exclude, [/./]);
@@ -229,7 +229,7 @@ vite('command: build, --ssr entry.server.tsx', async () => {
   equal(build.outDir, normalizePath(resolve(cwd, 'server')));
   equal(build.emptyOutDir, undefined);
   equal(rollupOptions.input, [normalizePath(resolve(cwd, 'src', 'entry.server.tsx'))]);
-  equal(outputOptions.assetFileNames, undefined);
+  equal(outputOptions.assetFileNames, 'build/q-[hash].[ext]');
   equal(outputOptions.chunkFileNames, undefined);
   equal(outputOptions.entryFileNames, undefined);
   equal(build.outDir, normalizePath(resolve(cwd, 'server')));

diff --git a/scripts/api.ts b/scripts/api.ts
@@ -263,6 +263,15 @@ declare module '*?jsx' {
   export const height: number;
   export const srcSet: string;
 }
+
+// Image &jsx
+declare module '*&jsx' {
+  const Cmp: import('./core').FunctionComponent<Omit<import('./core').QwikIntrinsicElements['img'], 'src' | 'width' | 'height' | 'srcSet'>>
+  export default Cmp;
+  export const width: number;
+  export const height: number;
+  export const srcSet: string;
+}
 `;
 
   const destServerModulesPath = join(config.distQwikPkgDir, 'server-modules.d.ts');

diff --git a/starters/apps/qwikcity-test/src/routes/(common)/index.tsx b/starters/apps/qwikcity-test/src/routes/(common)/index.tsx
@@ -4,14 +4,17 @@ import type { DocumentHead } from "@builder.io/qwik-city";
 import ImageJpeg from "../../media/test.jpeg?jsx";
 // @ts-ignore
 import ImageSvg from "../../media/qwik-logo.svg?jsx";
+// @ts-ignore
+import ImageJpegResized from "../../media/test.jpeg?jsx&w=100&h=100&format=avif";
 
 export default component$(() => {
   return (
     <div>
       <h1 onClick$={() => console.warn("hola")}>Welcome to Qwik City</h1>
       <p>The meta-framework for Qwik.</p>
-      <ImageJpeg />
-      <ImageSvg />
+      <ImageJpeg id="image-jpeg" />
+      <ImageSvg id="image-svg" />
+      <ImageJpegResized id="image-avif" />
     </div>
   );
 });

diff --git a/starters/e2e/qwikcity/nav.spec.ts b/starters/e2e/qwikcity/nav.spec.ts
@@ -333,6 +333,30 @@ test.describe("actions", () => {
       await expect(page.locator("#route")).toHaveText("should render");
       expect(await res?.headerValue("X-Qwikcity-Test")).toEqual("issue4531");
     });
+
+    test("media in home page", async ({ page }) => {
+      await page.goto("/qwikcity-test/");
+
+      await expect(page.locator("#image-jpeg")).toHaveJSProperty(
+        "naturalWidth",
+        520
+      );
+      await expect(page.locator("#image-jpeg")).toHaveJSProperty(
+        "naturalHeight",
+        520
+      );
+
+      await expect(page.locator("#image-avif")).toHaveJSProperty("width", 100);
+      await expect(page.locator("#image-avif")).toHaveJSProperty("height", 100);
+      await expect(page.locator("#image-avif")).toHaveJSProperty(
+        "naturalWidth",
+        520
+      );
+      await expect(page.locator("#image-avif")).toHaveJSProperty(
+        "naturalHeight",
+        520
+      );
+    });
   }
 });