From a64414944b4883057e792007790dccca7e16bd78 Mon Sep 17 00:00:00 2001 From: Oliver Speir Date: Mon, 1 Jan 2024 17:21:51 -0700 Subject: [PATCH 01/15] pass hProperties to getImage for optimized imgs --- .changeset/calm-socks-shake.md | 6 ++++ .../astro/src/vite-plugin-markdown/images.ts | 30 +++++++++++-------- packages/markdown/remark/src/rehype-images.ts | 7 +++-- 3 files changed, 29 insertions(+), 14 deletions(-) create mode 100644 .changeset/calm-socks-shake.md diff --git a/.changeset/calm-socks-shake.md b/.changeset/calm-socks-shake.md new file mode 100644 index 000000000000..cabbca8ad1ec --- /dev/null +++ b/.changeset/calm-socks-shake.md @@ -0,0 +1,6 @@ +--- +"@astrojs/markdown-remark": minor +"astro": minor +--- + +Allow remark plugins to add hProperties to imgs that will be included in the getImage call if they are optimized. diff --git a/packages/astro/src/vite-plugin-markdown/images.ts b/packages/astro/src/vite-plugin-markdown/images.ts index 959d34ec97cd..8afb0c32ba6b 100644 --- a/packages/astro/src/vite-plugin-markdown/images.ts +++ b/packages/astro/src/vite-plugin-markdown/images.ts @@ -7,25 +7,31 @@ export function getMarkdownCodeForImages(imagePaths: MarkdownImagePath[], html: .map((entry) => `import Astro__${entry.safeName} from ${JSON.stringify(entry.raw)};`) .join('\n')} - const images = async function() { + const images = async function(html) { + const imageRegex = JSON.parse(html.match(/__ASTRO_IMAGE_="([^"]+)"/)[1].replace(/"/g, '"')); + const { src, ...Props } = imageRegex; return { ${imagePaths - .map((entry) => `"${entry.raw}": await getImage({src: Astro__${entry.safeName}})`) + .map( + (entry) => `"${entry.raw}": await getImage({src: Astro__${entry.safeName}, ...Props})` + ) .join(',\n')} } } - async function updateImageReferences(html) { - return images().then((images) => { - return html.replaceAll(/__ASTRO_IMAGE_="([^"]+)"/gm, (full, imagePath) => - spreadAttributes({ - src: images[imagePath].src, - ...images[imagePath].attributes, - }) - ); - }); - } + async function updateImageReferences(html) { + return images(html).then((images) => { + return html.replaceAll(/__ASTRO_IMAGE_="([^"]+)"/gm, (full, imagePath) => { + const decodedImagePath = JSON.parse(imagePath.replace(/"/g, '"')); + return spreadAttributes({ + src: images[decodedImagePath.src].src, + ...images[decodedImagePath.src].attributes, + }); + }); + }); + } + // NOTE: This causes a top-level await to appear in the user's code, which can break very easily due to a Rollup // bug and certain adapters not supporting it correctly. See: https://github.com/rollup/rollup/issues/4708 // Tread carefully! diff --git a/packages/markdown/remark/src/rehype-images.ts b/packages/markdown/remark/src/rehype-images.ts index fd1e8f70f1cc..d15f80fa568a 100644 --- a/packages/markdown/remark/src/rehype-images.ts +++ b/packages/markdown/remark/src/rehype-images.ts @@ -10,8 +10,11 @@ export function rehypeImages() { if (node.properties?.src) { if (file.data.imagePaths?.has(node.properties.src)) { - node.properties['__ASTRO_IMAGE_'] = node.properties.src; - delete node.properties.src; + const { alt, ...otherProps } = node.properties; + node.properties['__ASTRO_IMAGE_'] = JSON.stringify({ ...otherProps }); + Object.keys(otherProps).forEach((prop) => { + delete node.properties[prop]; + }); } } }); From 149424091d11a9388ddaa58fe118630bf328dff8 Mon Sep 17 00:00:00 2001 From: Oliver Speir Date: Mon, 1 Jan 2024 21:41:03 -0700 Subject: [PATCH 02/15] fix to allow multiple images to have hProps added --- .../astro/src/vite-plugin-markdown/images.ts | 71 ++++++++++--------- 1 file changed, 37 insertions(+), 34 deletions(-) diff --git a/packages/astro/src/vite-plugin-markdown/images.ts b/packages/astro/src/vite-plugin-markdown/images.ts index 8afb0c32ba6b..d0dfdc829533 100644 --- a/packages/astro/src/vite-plugin-markdown/images.ts +++ b/packages/astro/src/vite-plugin-markdown/images.ts @@ -1,40 +1,43 @@ export type MarkdownImagePath = { raw: string; resolved: string; safeName: string }; export function getMarkdownCodeForImages(imagePaths: MarkdownImagePath[], html: string) { - return ` - import { getImage } from "astro:assets"; - ${imagePaths - .map((entry) => `import Astro__${entry.safeName} from ${JSON.stringify(entry.raw)};`) - .join('\n')} + return ` + import { getImage } from "astro:assets"; + ${imagePaths + .map((entry) => `import Astro__${entry.safeName} from ${JSON.stringify(entry.raw)};`) + .join('\n')} - const images = async function(html) { - const imageRegex = JSON.parse(html.match(/__ASTRO_IMAGE_="([^"]+)"/)[1].replace(/"/g, '"')); - const { src, ...Props } = imageRegex; - return { - ${imagePaths - .map( - (entry) => `"${entry.raw}": await getImage({src: Astro__${entry.safeName}, ...Props})` - ) - .join(',\n')} - } - } + const images = async function(html) { + const imageSources = {}; + ${imagePaths + .map((entry) => { + return `{ + const regex = new RegExp('__ASTRO_IMAGE_="([^"]*' + ${JSON.stringify(entry.raw)} + '[^"]*)"', 'g'); + const match = regex.exec(html); + if (match) { + const imageProps = JSON.parse(match[1].replace(/"/g, '"')); + const { src, ...props } = imageProps; + imageSources[${JSON.stringify(entry.raw)}] = await getImage({src: Astro__${entry.safeName}, ...props}); + } + }`; + }) + .join('\n')} + return imageSources; + } - async function updateImageReferences(html) { - return images(html).then((images) => { - return html.replaceAll(/__ASTRO_IMAGE_="([^"]+)"/gm, (full, imagePath) => { - const decodedImagePath = JSON.parse(imagePath.replace(/"/g, '"')); - - return spreadAttributes({ - src: images[decodedImagePath.src].src, - ...images[decodedImagePath.src].attributes, - }); - }); - }); - } - - // NOTE: This causes a top-level await to appear in the user's code, which can break very easily due to a Rollup - // bug and certain adapters not supporting it correctly. See: https://github.com/rollup/rollup/issues/4708 - // Tread carefully! - const html = await updateImageReferences(${JSON.stringify(html)}); - `; + async function updateImageReferences(html) { + return images(html).then((imageSources) => { + return html.replaceAll(/__ASTRO_IMAGE_="([^"]+)"/gm, (full, imagePath) => { + const decodedImagePath = JSON.parse(imagePath.replace(/"/g, '"')); + return spreadAttributes({ + src: imageSources[decodedImagePath.src].src, + ...imageSources[decodedImagePath.src].attributes, + }); + }); + }); + } + + const html = await updateImageReferences(${JSON.stringify(html)}); + `; } + From 89bfd8404aafcd56886c08aa78fba4a78d2b9aa3 Mon Sep 17 00:00:00 2001 From: Oliver Speir Date: Tue, 2 Jan 2024 20:42:20 -0700 Subject: [PATCH 03/15] update test to reflect new expected result --- .../remark/test/remark-collect-images.test.js | 46 +++++++++---------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/packages/markdown/remark/test/remark-collect-images.test.js b/packages/markdown/remark/test/remark-collect-images.test.js index a5533695365f..ab5599c5fb8e 100644 --- a/packages/markdown/remark/test/remark-collect-images.test.js +++ b/packages/markdown/remark/test/remark-collect-images.test.js @@ -2,32 +2,32 @@ import { createMarkdownProcessor } from '../dist/index.js'; import chai from 'chai'; describe('collect images', async () => { - const processor = await createMarkdownProcessor(); + const processor = await createMarkdownProcessor(); - it('should collect inline image paths', async () => { - const { - code, - metadata: { imagePaths }, - } = await processor.render(`Hello ![inline image url](./img.png)`, { - fileURL: 'file.md', - }); + it('should collect inline image paths', async () => { + const { + code, + metadata: { imagePaths }, + } = await processor.render(`Hello ![inline image url](./img.png)`, { + fileURL: 'file.md', + }); - chai - .expect(code) - .to.equal('

Hello inline image url

'); + chai + .expect(code) + .to.equal('

Hello inline image url

'); - chai.expect(Array.from(imagePaths)).to.deep.equal(['./img.png']); - }); + chai.expect(Array.from(imagePaths)).to.deep.equal(['./img.png']); + }); - it('should add image paths from definition', async () => { - const { - code, - metadata: { imagePaths }, - } = await processor.render(`Hello ![image ref][img-ref]\n\n[img-ref]: ./img.webp`, { - fileURL: 'file.md', - }); + it('should add image paths from definition', async () => { + const { + code, + metadata: { imagePaths }, + } = await processor.render(`Hello ![image ref][img-ref]\n\n[img-ref]: ./img.webp`, { + fileURL: 'file.md', + }); - chai.expect(code).to.equal('

Hello image ref

'); - chai.expect(Array.from(imagePaths)).to.deep.equal(['./img.webp']); - }); + chai.expect(code).to.equal('

Hello image ref

'); + chai.expect(Array.from(imagePaths)).to.deep.equal(['./img.webp']); + }); }); From f03fca578bfbb744e59509582243753b5d43fd5a Mon Sep 17 00:00:00 2001 From: Oliver Speir <115520730+OliverSpeir@users.noreply.github.com> Date: Fri, 5 Jan 2024 11:22:51 -0700 Subject: [PATCH 04/15] add comment back in Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com> --- packages/astro/src/vite-plugin-markdown/images.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/astro/src/vite-plugin-markdown/images.ts b/packages/astro/src/vite-plugin-markdown/images.ts index d0dfdc829533..f6270f782b8d 100644 --- a/packages/astro/src/vite-plugin-markdown/images.ts +++ b/packages/astro/src/vite-plugin-markdown/images.ts @@ -37,6 +37,9 @@ export function getMarkdownCodeForImages(imagePaths: MarkdownImagePath[], html: }); } + // NOTE: This causes a top-level await to appear in the user's code, which can break very easily due to a Rollup + // bug and certain adapters not supporting it correctly. See: https://github.com/rollup/rollup/issues/4708 + // Tread carefully! const html = await updateImageReferences(${JSON.stringify(html)}); `; } From 58ab1b28e4a162de8dfb034bdd20aa786304f5c0 Mon Sep 17 00:00:00 2001 From: Oliver Speir Date: Sat, 6 Jan 2024 22:05:12 -0700 Subject: [PATCH 05/15] add srcset --- .../astro/src/vite-plugin-markdown/images.ts | 27 ++++++++++++------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/packages/astro/src/vite-plugin-markdown/images.ts b/packages/astro/src/vite-plugin-markdown/images.ts index f6270f782b8d..b124732a43cc 100644 --- a/packages/astro/src/vite-plugin-markdown/images.ts +++ b/packages/astro/src/vite-plugin-markdown/images.ts @@ -1,27 +1,32 @@ export type MarkdownImagePath = { raw: string; resolved: string; safeName: string }; export function getMarkdownCodeForImages(imagePaths: MarkdownImagePath[], html: string) { - return ` + return ` import { getImage } from "astro:assets"; ${imagePaths - .map((entry) => `import Astro__${entry.safeName} from ${JSON.stringify(entry.raw)};`) - .join('\n')} + .map((entry) => `import Astro__${entry.safeName} from ${JSON.stringify(entry.raw)};`) + .join('\n')} const images = async function(html) { const imageSources = {}; ${imagePaths - .map((entry) => { - return `{ - const regex = new RegExp('__ASTRO_IMAGE_="([^"]*' + ${JSON.stringify(entry.raw)} + '[^"]*)"', 'g'); + .map((entry) => { + return `{ + const regex = new RegExp('__ASTRO_IMAGE_="([^"]*' + ${JSON.stringify( + entry.raw + )} + '[^"]*)"', 'g'); const match = regex.exec(html); if (match) { const imageProps = JSON.parse(match[1].replace(/"/g, '"')); const { src, ...props } = imageProps; - imageSources[${JSON.stringify(entry.raw)}] = await getImage({src: Astro__${entry.safeName}, ...props}); + console.log(props) + imageSources[${JSON.stringify(entry.raw)}] = await getImage({src: Astro__${ + entry.safeName + }, ...props}); } }`; - }) - .join('\n')} + }) + .join('\n')} return imageSources; } @@ -29,6 +34,9 @@ export function getMarkdownCodeForImages(imagePaths: MarkdownImagePath[], html: return images(html).then((imageSources) => { return html.replaceAll(/__ASTRO_IMAGE_="([^"]+)"/gm, (full, imagePath) => { const decodedImagePath = JSON.parse(imagePath.replace(/"/g, '"')); + if (imageSources[decodedImagePath.src].srcSet.values.length > 0) { + imageSources[decodedImagePath.src].attributes.srcset = imageSources[decodedImagePath.src].srcSet.attribute; + } return spreadAttributes({ src: imageSources[decodedImagePath.src].src, ...imageSources[decodedImagePath.src].attributes, @@ -43,4 +51,3 @@ export function getMarkdownCodeForImages(imagePaths: MarkdownImagePath[], html: const html = await updateImageReferences(${JSON.stringify(html)}); `; } - From 1d414c929580defa85db281191ce7881b115590e Mon Sep 17 00:00:00 2001 From: Oliver Speir Date: Sun, 7 Jan 2024 17:58:39 -0700 Subject: [PATCH 06/15] works on multiple images --- .../astro/src/vite-plugin-markdown/images.ts | 102 ++++++++++-------- packages/markdown/remark/src/rehype-images.ts | 40 ++++--- 2 files changed, 80 insertions(+), 62 deletions(-) diff --git a/packages/astro/src/vite-plugin-markdown/images.ts b/packages/astro/src/vite-plugin-markdown/images.ts index b124732a43cc..7082c40e26a5 100644 --- a/packages/astro/src/vite-plugin-markdown/images.ts +++ b/packages/astro/src/vite-plugin-markdown/images.ts @@ -1,53 +1,61 @@ -export type MarkdownImagePath = { raw: string; resolved: string; safeName: string }; +export type MarkdownImagePath = { raw: string; resolved: string; safeName: string; count: string }; export function getMarkdownCodeForImages(imagePaths: MarkdownImagePath[], html: string) { return ` - import { getImage } from "astro:assets"; - ${imagePaths - .map((entry) => `import Astro__${entry.safeName} from ${JSON.stringify(entry.raw)};`) - .join('\n')} - - const images = async function(html) { - const imageSources = {}; - ${imagePaths - .map((entry) => { - return `{ - const regex = new RegExp('__ASTRO_IMAGE_="([^"]*' + ${JSON.stringify( - entry.raw - )} + '[^"]*)"', 'g'); - const match = regex.exec(html); - if (match) { - const imageProps = JSON.parse(match[1].replace(/"/g, '"')); - const { src, ...props } = imageProps; - console.log(props) - imageSources[${JSON.stringify(entry.raw)}] = await getImage({src: Astro__${ - entry.safeName - }, ...props}); - } - }`; - }) + import { getImage } from "astro:assets"; + ${imagePaths + .map((entry) => `import Astro__${entry.safeName} from ${JSON.stringify(entry.raw)};`) .join('\n')} - return imageSources; - } - async function updateImageReferences(html) { - return images(html).then((imageSources) => { - return html.replaceAll(/__ASTRO_IMAGE_="([^"]+)"/gm, (full, imagePath) => { - const decodedImagePath = JSON.parse(imagePath.replace(/"/g, '"')); - if (imageSources[decodedImagePath.src].srcSet.values.length > 0) { - imageSources[decodedImagePath.src].attributes.srcset = imageSources[decodedImagePath.src].srcSet.attribute; - } - return spreadAttributes({ - src: imageSources[decodedImagePath.src].src, - ...imageSources[decodedImagePath.src].attributes, - }); - }); - }); - } - - // NOTE: This causes a top-level await to appear in the user's code, which can break very easily due to a Rollup - // bug and certain adapters not supporting it correctly. See: https://github.com/rollup/rollup/issues/4708 - // Tread carefully! - const html = await updateImageReferences(${JSON.stringify(html)}); - `; + const images = async function(html) { + const imageSources = {}; + ${imagePaths + .map((entry) => { + const rawUrl = JSON.stringify(entry.raw); + return `{ + const regex = new RegExp('__ASTRO_IMAGE_="([^"]*' + ${rawUrl} + '[^"]*)"', 'g'); + let match; + let occurrenceCounter = 0; + while ((match = regex.exec(html)) !== null) { + const matchKey = ${rawUrl} + '_' + occurrenceCounter; + const imageProps = JSON.parse(match[1].replace(/"/g, '"')); + const { src, ...props } = imageProps; + + imageSources[matchKey] = await getImage({src: Astro__${entry.safeName}, ...props}); + occurrenceCounter++; + } + }`; + }) + .join('\n')} + return imageSources; + }; + + async function updateImageReferences(html) { + return images(html).then((imageSources) => { + return html.replaceAll(/__ASTRO_IMAGE_="([^"]+)"/gm, (full, imagePath) => { + const decodedImagePath = JSON.parse(imagePath.replace(/"/g, '"')); + + // Use the 'index' property for each image occurrence + const srcKey = decodedImagePath.src + '_' + decodedImagePath.index.index; + + if (imageSources[srcKey].srcSet && imageSources[srcKey].srcSet.values.length > 0) { + console.log("srcset found", imageSources[srcKey].srcSet.attribute); + imageSources[srcKey].attributes.srcset = imageSources[srcKey].srcSet.attribute; + console.log("attributes", imageSources[srcKey].attributes); + } + + const { index, ...attributesWithoutIndex } = imageSources[srcKey].attributes; + + return spreadAttributes({ + src: imageSources[srcKey].src, + ...attributesWithoutIndex, + }); + }); + }); + } + + + // Top-level await warning + const html = await updateImageReferences(${JSON.stringify(html)}); + `; } diff --git a/packages/markdown/remark/src/rehype-images.ts b/packages/markdown/remark/src/rehype-images.ts index d15f80fa568a..339fcd02a9ed 100644 --- a/packages/markdown/remark/src/rehype-images.ts +++ b/packages/markdown/remark/src/rehype-images.ts @@ -3,20 +3,30 @@ import type { MarkdownVFile } from './types.js'; export function rehypeImages() { return () => - function (tree: any, file: MarkdownVFile) { - visit(tree, (node) => { - if (node.type !== 'element') return; - if (node.tagName !== 'img') return; + function (tree: any, file: MarkdownVFile) { + const imageOccurrenceMap = new Map(); - if (node.properties?.src) { - if (file.data.imagePaths?.has(node.properties.src)) { - const { alt, ...otherProps } = node.properties; - node.properties['__ASTRO_IMAGE_'] = JSON.stringify({ ...otherProps }); - Object.keys(otherProps).forEach((prop) => { - delete node.properties[prop]; - }); - } - } - }); - }; + visit(tree, (node) => { + if (node.type !== 'element') return; + if (node.tagName !== 'img') return; + + if (node.properties?.src) { + if (file.data.imagePaths?.has(node.properties.src)) { + const { alt, ...otherProps } = node.properties; + + // Initialize or increment occurrence count for this image + const currentCount = imageOccurrenceMap.get(node.properties.src) || 0; + imageOccurrenceMap.set(node.properties.src, currentCount + 1); + + const index = { index: currentCount }; + console.log("creating __ASTRO_IMAGE__ img ", "with props:", otherProps, "at index:", index) + node.properties['__ASTRO_IMAGE_'] = JSON.stringify({ ...otherProps, index }); + + Object.keys(otherProps).forEach((prop) => { + delete node.properties[prop]; + }); + } + } + }); + }; } From fd6e43fef96c5d6d215196f4626c9039291c86d5 Mon Sep 17 00:00:00 2001 From: Oliver Speir Date: Sun, 7 Jan 2024 19:20:31 -0700 Subject: [PATCH 07/15] fix tests, fix images.ts type and remove console logs --- packages/astro/src/vite-plugin-markdown/images.ts | 6 ++---- packages/markdown/remark/src/rehype-images.ts | 6 ++---- packages/markdown/remark/test/remark-collect-images.test.js | 4 ++-- 3 files changed, 6 insertions(+), 10 deletions(-) diff --git a/packages/astro/src/vite-plugin-markdown/images.ts b/packages/astro/src/vite-plugin-markdown/images.ts index 7082c40e26a5..7e7fd1dc3155 100644 --- a/packages/astro/src/vite-plugin-markdown/images.ts +++ b/packages/astro/src/vite-plugin-markdown/images.ts @@ -1,4 +1,4 @@ -export type MarkdownImagePath = { raw: string; resolved: string; safeName: string; count: string }; +export type MarkdownImagePath = { raw: string; resolved: string; safeName: string }; export function getMarkdownCodeForImages(imagePaths: MarkdownImagePath[], html: string) { return ` @@ -36,12 +36,10 @@ export function getMarkdownCodeForImages(imagePaths: MarkdownImagePath[], html: const decodedImagePath = JSON.parse(imagePath.replace(/"/g, '"')); // Use the 'index' property for each image occurrence - const srcKey = decodedImagePath.src + '_' + decodedImagePath.index.index; + const srcKey = decodedImagePath.src + '_' + decodedImagePath.index; if (imageSources[srcKey].srcSet && imageSources[srcKey].srcSet.values.length > 0) { - console.log("srcset found", imageSources[srcKey].srcSet.attribute); imageSources[srcKey].attributes.srcset = imageSources[srcKey].srcSet.attribute; - console.log("attributes", imageSources[srcKey].attributes); } const { index, ...attributesWithoutIndex } = imageSources[srcKey].attributes; diff --git a/packages/markdown/remark/src/rehype-images.ts b/packages/markdown/remark/src/rehype-images.ts index 339fcd02a9ed..734d99c93bc6 100644 --- a/packages/markdown/remark/src/rehype-images.ts +++ b/packages/markdown/remark/src/rehype-images.ts @@ -15,11 +15,9 @@ export function rehypeImages() { const { alt, ...otherProps } = node.properties; // Initialize or increment occurrence count for this image - const currentCount = imageOccurrenceMap.get(node.properties.src) || 0; - imageOccurrenceMap.set(node.properties.src, currentCount + 1); + const index = imageOccurrenceMap.get(node.properties.src) || 0; + imageOccurrenceMap.set(node.properties.src, index + 1); - const index = { index: currentCount }; - console.log("creating __ASTRO_IMAGE__ img ", "with props:", otherProps, "at index:", index) node.properties['__ASTRO_IMAGE_'] = JSON.stringify({ ...otherProps, index }); Object.keys(otherProps).forEach((prop) => { diff --git a/packages/markdown/remark/test/remark-collect-images.test.js b/packages/markdown/remark/test/remark-collect-images.test.js index ab5599c5fb8e..815613e24f92 100644 --- a/packages/markdown/remark/test/remark-collect-images.test.js +++ b/packages/markdown/remark/test/remark-collect-images.test.js @@ -14,7 +14,7 @@ describe('collect images', async () => { chai .expect(code) - .to.equal('

Hello inline image url

'); + .to.equal('

Hello inline image url

'); chai.expect(Array.from(imagePaths)).to.deep.equal(['./img.png']); }); @@ -27,7 +27,7 @@ describe('collect images', async () => { fileURL: 'file.md', }); - chai.expect(code).to.equal('

Hello image ref

'); + chai.expect(code).to.equal('

Hello image ref

'); chai.expect(Array.from(imagePaths)).to.deep.equal(['./img.webp']); }); }); From 9233d51fe4d3af00b0156fce3b889882d80ecd30 Mon Sep 17 00:00:00 2001 From: Oliver Speir Date: Sun, 7 Jan 2024 19:25:54 -0700 Subject: [PATCH 08/15] add warning back to images.ts again lol --- packages/astro/src/vite-plugin-markdown/images.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/astro/src/vite-plugin-markdown/images.ts b/packages/astro/src/vite-plugin-markdown/images.ts index 7e7fd1dc3155..1123c28784aa 100644 --- a/packages/astro/src/vite-plugin-markdown/images.ts +++ b/packages/astro/src/vite-plugin-markdown/images.ts @@ -53,7 +53,9 @@ export function getMarkdownCodeForImages(imagePaths: MarkdownImagePath[], html: } - // Top-level await warning + // NOTE: This causes a top-level await to appear in the user's code, which can break very easily due to a Rollup + // bug and certain adapters not supporting it correctly. See: https://github.com/rollup/rollup/issues/4708 + // Tread carefully! const html = await updateImageReferences(${JSON.stringify(html)}); `; } From 08f4984de16eb2f4f2cec778504f0e6d9f4f346a Mon Sep 17 00:00:00 2001 From: Oliver Speir Date: Mon, 8 Jan 2024 14:56:05 -0700 Subject: [PATCH 09/15] update changeset to be user oriented --- .changeset/calm-socks-shake.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/calm-socks-shake.md b/.changeset/calm-socks-shake.md index cabbca8ad1ec..b3d42b5f98eb 100644 --- a/.changeset/calm-socks-shake.md +++ b/.changeset/calm-socks-shake.md @@ -3,4 +3,4 @@ "astro": minor --- -Allow remark plugins to add hProperties to imgs that will be included in the getImage call if they are optimized. +Users can now create remark plugins that will be able to pass options for how images in `.md` files will be optimized From 45f8ce8fcfbf72861db4a022e452f485ff6a030c Mon Sep 17 00:00:00 2001 From: Oliver Speir <115520730+OliverSpeir@users.noreply.github.com> Date: Fri, 12 Jan 2024 06:17:16 -0700 Subject: [PATCH 10/15] Update calm-socks-shake.md Co-authored-by: Sarah Rainsberger --- .changeset/calm-socks-shake.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/calm-socks-shake.md b/.changeset/calm-socks-shake.md index b3d42b5f98eb..79f462d2902b 100644 --- a/.changeset/calm-socks-shake.md +++ b/.changeset/calm-socks-shake.md @@ -3,4 +3,4 @@ "astro": minor --- -Users can now create remark plugins that will be able to pass options for how images in `.md` files will be optimized +Allows remark plugins to pass options specifying how images in `.md` files will be optimized From 61515c5384830ab7f4791676d3748c30313b834d Mon Sep 17 00:00:00 2001 From: Oliver Speir Date: Sat, 13 Jan 2024 18:24:46 -0700 Subject: [PATCH 11/15] pass alt through getImage --- packages/markdown/remark/src/rehype-images.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/markdown/remark/src/rehype-images.ts b/packages/markdown/remark/src/rehype-images.ts index 734d99c93bc6..9f9b9ee46d2e 100644 --- a/packages/markdown/remark/src/rehype-images.ts +++ b/packages/markdown/remark/src/rehype-images.ts @@ -12,15 +12,15 @@ export function rehypeImages() { if (node.properties?.src) { if (file.data.imagePaths?.has(node.properties.src)) { - const { alt, ...otherProps } = node.properties; + const { ...props } = node.properties; // Initialize or increment occurrence count for this image const index = imageOccurrenceMap.get(node.properties.src) || 0; imageOccurrenceMap.set(node.properties.src, index + 1); - node.properties['__ASTRO_IMAGE_'] = JSON.stringify({ ...otherProps, index }); + node.properties['__ASTRO_IMAGE_'] = JSON.stringify({ ...props, index }); - Object.keys(otherProps).forEach((prop) => { + Object.keys(props).forEach((prop) => { delete node.properties[prop]; }); } From 71322348af772865303f33095df985e6a30303e6 Mon Sep 17 00:00:00 2001 From: Oliver Speir Date: Sun, 14 Jan 2024 15:24:02 -0700 Subject: [PATCH 12/15] added fixture and test --- .../test/core-image-remark-imgattr.test.js | 60 ++++++++++++++++++ .../astro.config.mjs | 9 +++ .../core-image-remark-imgattr/package.json | 11 ++++ .../core-image-remark-imgattr/remarkPlugin.js | 20 ++++++ .../src/assets/penguin2.jpg | Bin 0 -> 11677 bytes .../src/pages/index.md | 1 + .../core-image-remark-imgattr/tsconfig.json | 6 ++ 7 files changed, 107 insertions(+) create mode 100644 packages/astro/test/core-image-remark-imgattr.test.js create mode 100644 packages/astro/test/fixtures/core-image-remark-imgattr/astro.config.mjs create mode 100644 packages/astro/test/fixtures/core-image-remark-imgattr/package.json create mode 100644 packages/astro/test/fixtures/core-image-remark-imgattr/remarkPlugin.js create mode 100644 packages/astro/test/fixtures/core-image-remark-imgattr/src/assets/penguin2.jpg create mode 100644 packages/astro/test/fixtures/core-image-remark-imgattr/src/pages/index.md create mode 100644 packages/astro/test/fixtures/core-image-remark-imgattr/tsconfig.json diff --git a/packages/astro/test/core-image-remark-imgattr.test.js b/packages/astro/test/core-image-remark-imgattr.test.js new file mode 100644 index 000000000000..8d29d9c81836 --- /dev/null +++ b/packages/astro/test/core-image-remark-imgattr.test.js @@ -0,0 +1,60 @@ +import { expect } from 'chai'; +import * as cheerio from 'cheerio'; +import { Writable } from 'node:stream'; + +import { Logger } from '../dist/core/logger/core.js'; +import { loadFixture } from './test-utils.js'; + +describe('astro:image', () => { + /** @type {import('./test-utils').Fixture} */ + let fixture; + + describe('dev', () => { + /** @type {import('./test-utils').DevServer} */ + let devServer; + /** @type {Array<{ type: any, level: 'error', message: string; }>} */ + let logs = []; + + before(async () => { + fixture = await loadFixture({ + root: './fixtures/core-image-remark-imgattr/', + }); + + devServer = await fixture.startDevServer({ + logger: new Logger({ + level: 'error', + dest: new Writable({ + objectMode: true, + write(event, _, callback) { + logs.push(event); + callback(); + }, + }), + }), + }); + }); + + after(async () => { + await devServer.stop(); + }); + + describe('Test image attributes can be added by remark plugins', () => { + let $; + before(async () => { + let res = await fixture.fetch('/'); + let html = await res.text(); + $ = cheerio.load(html); + }); + + it('Image has eager loading meaning getImage passed props it doesnt use through it', async () => { + let $img = $('img'); + expect($img.attr('loading')).to.equal('eager'); + }); + + it('Image src contains w=50 meaning getImage correctly used props added through the remark plugin', async () => { + let $img = $('img'); + expect(new URL($img.attr('src'), 'http://example.com').searchParams.get('w')).to.equal('50'); + }); + }); + }); +}); diff --git a/packages/astro/test/fixtures/core-image-remark-imgattr/astro.config.mjs b/packages/astro/test/fixtures/core-image-remark-imgattr/astro.config.mjs new file mode 100644 index 000000000000..1ccf7caf00e5 --- /dev/null +++ b/packages/astro/test/fixtures/core-image-remark-imgattr/astro.config.mjs @@ -0,0 +1,9 @@ +import { defineConfig } from 'astro/config'; +import plugin from "./remarkPlugin" + +// https://astro.build/config +export default defineConfig({ + markdown: { + remarkPlugins:[plugin] + } +}); diff --git a/packages/astro/test/fixtures/core-image-remark-imgattr/package.json b/packages/astro/test/fixtures/core-image-remark-imgattr/package.json new file mode 100644 index 000000000000..3732356a4e9a --- /dev/null +++ b/packages/astro/test/fixtures/core-image-remark-imgattr/package.json @@ -0,0 +1,11 @@ +{ + "name": "@test/core-image-remark-imgattr", + "version": "0.0.0", + "private": true, + "dependencies": { + "astro": "workspace:*" + }, + "scripts": { + "dev": "astro dev" + } +} diff --git a/packages/astro/test/fixtures/core-image-remark-imgattr/remarkPlugin.js b/packages/astro/test/fixtures/core-image-remark-imgattr/remarkPlugin.js new file mode 100644 index 000000000000..4bad8fb77c82 --- /dev/null +++ b/packages/astro/test/fixtures/core-image-remark-imgattr/remarkPlugin.js @@ -0,0 +1,20 @@ +export default function plugin() { + return transformer; + + function transformer(tree) { + function traverse(node) { + if (node.type === "image") { + node.data = node.data || {}; + node.data.hProperties = node.data.hProperties || {}; + node.data.hProperties.loading = "eager"; + node.data.hProperties.width = "50"; + } + + if (node.children) { + node.children.forEach(traverse); + } + } + + traverse(tree); + } +} diff --git a/packages/astro/test/fixtures/core-image-remark-imgattr/src/assets/penguin2.jpg b/packages/astro/test/fixtures/core-image-remark-imgattr/src/assets/penguin2.jpg new file mode 100644 index 0000000000000000000000000000000000000000..e859ac3c992f38d8e588390f34a36102e6547dbc GIT binary patch literal 11677 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 bLZz}}%%aX~#2Qf?U@JJ3E+P>6XX*a{3I Date: Sun, 14 Jan 2024 15:30:59 -0700 Subject: [PATCH 13/15] update lockfile --- pnpm-lock.yaml | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 260a33c040e3..f709812b26ae 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -142,6 +142,12 @@ importers: astro: specifier: ^4.1.0 version: link:../../packages/astro + remark-imgattr: + specifier: ^1.0.1 + version: 1.0.1 + sharp: + specifier: ^0.33.1 + version: 0.33.1 examples/component: devDependencies: @@ -2514,6 +2520,12 @@ importers: specifier: workspace:* version: link:../../.. + packages/astro/test/fixtures/core-image-remark-imgattr: + dependencies: + astro: + specifier: workspace:* + version: link:../../.. + packages/astro/test/fixtures/core-image-ssg: dependencies: astro: @@ -14004,6 +14016,10 @@ packages: - supports-color dev: false + /remark-imgattr@1.0.1: + resolution: {integrity: sha512-n4qIjecsjkYeStH+mHExv5M8H/hxaCPDVohl/HjcUQXOkgi6yEAtdGc92u+7Tk25XE4DU55Hj5beGaokFIbOTQ==} + dev: false + /remark-math@6.0.0: resolution: {integrity: sha512-MMqgnP74Igy+S3WwnhQ7kqGlEerTETXMvJhrUzDikVZ2/uogJCb+WHUg97hK9/jcfc0dkD73s3LN8zU49cTEtA==} dependencies: @@ -14413,7 +14429,6 @@ packages: '@img/sharp-win32-ia32': 0.33.1 '@img/sharp-win32-x64': 0.33.1 dev: false - optional: true /shebang-command@1.2.0: resolution: {integrity: sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==} From 2cb65cfe2f0b070f424668b7b01547045ba021d7 Mon Sep 17 00:00:00 2001 From: Oliver Speir Date: Sun, 14 Jan 2024 18:14:10 -0700 Subject: [PATCH 14/15] fix lockfile again (had installed an extra package during testing and had sharp33 installed) --- pnpm-lock.yaml | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ce530a48bb3c..8fefee926bef 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -142,12 +142,6 @@ importers: astro: specifier: ^4.1.2 version: link:../../packages/astro - remark-imgattr: - specifier: ^1.0.1 - version: 1.0.1 - sharp: - specifier: ^0.33.1 - version: 0.33.1 examples/component: devDependencies: @@ -13866,10 +13860,6 @@ packages: - supports-color dev: false - /remark-imgattr@1.0.1: - resolution: {integrity: sha512-n4qIjecsjkYeStH+mHExv5M8H/hxaCPDVohl/HjcUQXOkgi6yEAtdGc92u+7Tk25XE4DU55Hj5beGaokFIbOTQ==} - dev: false - /remark-math@6.0.0: resolution: {integrity: sha512-MMqgnP74Igy+S3WwnhQ7kqGlEerTETXMvJhrUzDikVZ2/uogJCb+WHUg97hK9/jcfc0dkD73s3LN8zU49cTEtA==} dependencies: @@ -14249,7 +14239,7 @@ packages: tar-fs: 3.0.4 tunnel-agent: 0.6.0 dev: false - + /shebang-command@1.2.0: resolution: {integrity: sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==} engines: {node: '>=0.10.0'} From 8a4d14af32cbdaf3e03812beab62a09cacd0f28b Mon Sep 17 00:00:00 2001 From: Oliver Speir Date: Sun, 14 Jan 2024 18:22:52 -0700 Subject: [PATCH 15/15] update test to reflect passing alt through getImage --- packages/markdown/remark/test/remark-collect-images.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/markdown/remark/test/remark-collect-images.test.js b/packages/markdown/remark/test/remark-collect-images.test.js index 815613e24f92..5aed711b028a 100644 --- a/packages/markdown/remark/test/remark-collect-images.test.js +++ b/packages/markdown/remark/test/remark-collect-images.test.js @@ -14,7 +14,7 @@ describe('collect images', async () => { chai .expect(code) - .to.equal('

Hello inline image url

'); + .to.equal('

Hello

'); chai.expect(Array.from(imagePaths)).to.deep.equal(['./img.png']); }); @@ -27,7 +27,7 @@ describe('collect images', async () => { fileURL: 'file.md', }); - chai.expect(code).to.equal('

Hello image ref

'); + chai.expect(code).to.equal('

Hello

'); chai.expect(Array.from(imagePaths)).to.deep.equal(['./img.webp']); }); });