From d2b6caae9dc824f51a0dd8236ea7cfe15bfc1285 Mon Sep 17 00:00:00 2001
From: Kelly Joseph Price <kellyjosephprice@gmail.com>
Date: Tue, 10 Sep 2024 14:39:49 -0700
Subject: [PATCH 1/5] fix: image migration issues

---
 __tests__/compilers/compatability.test.tsx | 28 +++++++++++++++-
 __tests__/compilers/images.test.ts         |  2 +-
 __tests__/helpers.ts                       |  3 +-
 __tests__/index.test.js                    |  1 +
 __tests__/lib/plain.test.ts                |  2 +-
 __tests__/transformers/images.test.ts      | 38 +++++++++-------------
 processor/transform/images.ts              | 25 +++++++-------
 processor/transform/readme-components.ts   | 24 ++++++++++----
 processor/transform/readme-to-mdx.ts       |  2 +-
 processor/utils.ts                         |  4 +--
 types.d.ts                                 | 27 ++++++++-------
 11 files changed, 95 insertions(+), 61 deletions(-)

diff --git a/__tests__/compilers/compatability.test.tsx b/__tests__/compilers/compatability.test.tsx
index 7ce595f3b..c5f6cdd8d 100644
--- a/__tests__/compilers/compatability.test.tsx
+++ b/__tests__/compilers/compatability.test.tsx
@@ -205,7 +205,7 @@ This is an image: <img src="http://example.com/#\\>" >
   });
 
   describe('<HTMLBlock> wrapping', () => {
-  // configure({ defaultIgnore: undefined });
+    // configure({ defaultIgnore: undefined });
 
     const rawStyle = `<style data-testid="style-tag">
     p {
@@ -267,4 +267,30 @@ This is an image: <img src="http://example.com/#\\>" >
       expect(spy).toHaveBeenCalledTimes(0);
     });
   });
+
+  it('can parse and transform magic image block AST to MDX', () => {
+    const md = `
+[block:image]
+{
+  "images": [
+    {
+      "image": [
+        "https://files.readme.io/4a1c7a0-Iphone.jpeg",
+        null,
+        ""
+      ],
+      "align": "center",
+      "sizing": "250px"
+    }
+  ]
+}
+[/block]
+`;
+
+    const rmdx = mdx(rdmd.mdast(md));
+
+    expect(rmdx).toMatch(
+      '<Image align="center" className="" width="250px" src="https://files.readme.io/4a1c7a0-Iphone.jpeg" />',
+    );
+  });
 });
diff --git a/__tests__/compilers/images.test.ts b/__tests__/compilers/images.test.ts
index 99aac1620..552c7b77c 100644
--- a/__tests__/compilers/images.test.ts
+++ b/__tests__/compilers/images.test.ts
@@ -22,7 +22,7 @@ describe('image compiler', () => {
   it('correctly serializes an Image component with expression attributes back to MDX', () => {
     const doc = '<Image src="/path/to/image.png" border={false} />';
 
-    expect(mdx(mdast(doc))).toMatch(doc);
+    expect(mdx(mdast(doc))).toMatch('![](/path/to/image.png)');
   });
 
   it('correctly serializes an Image component with an undefined expression attributes back to MDX', () => {
diff --git a/__tests__/helpers.ts b/__tests__/helpers.ts
index 02a330e50..e47788abe 100644
--- a/__tests__/helpers.ts
+++ b/__tests__/helpers.ts
@@ -16,6 +16,7 @@ export const silenceConsole =
   };
 
 export const execute = async (doc: string, compileOpts = {}, runOpts = {}) => {
-  const module = await run(compile(doc, compileOpts), runOpts);
+  const code = compile(doc, compileOpts);
+  const module = await run(code, runOpts);
   return module.default;
 };
diff --git a/__tests__/index.test.js b/__tests__/index.test.js
index 5a5efd653..695401174 100644
--- a/__tests__/index.test.js
+++ b/__tests__/index.test.js
@@ -39,6 +39,7 @@ test('image', async () => {
   const md = '![Image](http://example.com/image.png)';
   const component = await execute(md);
   const { container } = render(React.createElement(component));
+
   expect(container.innerHTML).toMatchSnapshot();
 });
 
diff --git a/__tests__/lib/plain.test.ts b/__tests__/lib/plain.test.ts
index 6821fc775..98141346e 100644
--- a/__tests__/lib/plain.test.ts
+++ b/__tests__/lib/plain.test.ts
@@ -45,7 +45,7 @@ Is it _me_ you're looking for?
     expect(plain(hast(txt))).toBe('Header 1 Header 2 Cell 1 Cell 2');
   });
 
-  it('compiles images to their title', () => {
+  it.only('compiles images to their title', () => {
     const txt = `
 ![image **label**](http://placekitten.com/600/600 "entitled kittens")
     `;
diff --git a/__tests__/transformers/images.test.ts b/__tests__/transformers/images.test.ts
index 72d7bca04..f3cdc66cd 100644
--- a/__tests__/transformers/images.test.ts
+++ b/__tests__/transformers/images.test.ts
@@ -10,7 +10,7 @@ describe('images transformer', () => {
     const tree = mdast(md);
 
     expect(tree.children[0].type).toBe('image-block');
-    expect(tree.children[0].data.hProperties.src).toBe('https://example.com/image.jpg');
+    expect(tree.children[0].src).toBe('https://example.com/image.jpg');
   });
 
   it('can parse the caption markdown to children', () => {
@@ -23,29 +23,21 @@ describe('images transformer', () => {
     expect(tree.children[0].children[0].children[2].type).toBe('emphasis');
   });
 
-  it('can parse and transform magic image block AST to MDX', () => {
-    const rdmd = `
-[block:image]
-{
-  "images": [
-    {
-      "image": [
-        "https://files.readme.io/4a1c7a0-Iphone.jpeg",
-        null,
-        ""
-      ],
-      "align": "center",
-      "sizing": "250px"
-    }
-  ]
-}
-[/block]
+  it('can parse attributes', () => {
+    const md = `
+<Image
+  align="left"
+  alt="Some helpful text"
+  src="https://example.com/image.jpg"
+  title="Testing"
+  width="100px"
+/>
 `;
+    const tree = mdast(md);
 
-    const rmdx = mdx(mdastLegacy(rdmd));
-
-    expect(rmdx).toMatch(
-      '<Image align="center" className="" width="250px" src="https://files.readme.io/4a1c7a0-Iphone.jpeg" />',
-    );
+    expect(tree.children[0].align).toBe('left');
+    expect(tree.children[0].alt).toBe('Some helpful text');
+    expect(tree.children[0].title).toBe('Testing');
+    expect(tree.children[0].width).toBe('100px');
   });
 });
diff --git a/processor/transform/images.ts b/processor/transform/images.ts
index ddee4f143..8302e24b7 100644
--- a/processor/transform/images.ts
+++ b/processor/transform/images.ts
@@ -14,22 +14,26 @@ const imageTransformer = () => (tree: Node) => {
 
     const [{ alt, url, title }] = node.children as any;
 
-    const newNode = {
-      type: NodeTypes.imageBlock,
+    const attrs = {
       alt,
       title,
-      url,
       children: [],
+      src: url,
+    };
+
+    const newNode: ImageBlock = {
+      type: NodeTypes.imageBlock,
+      ...attrs,
+      /*
+       * @note: Using data.hName here means that we don't have to transform
+       * this to an MdxJsxFlowElement, and rehype will transform it correctly
+       */
       data: {
         hName: 'img',
-        hProperties: {
-          ...(alt && { alt }),
-          src: url,
-          ...(title && { title }),
-        },
+        hProperties: attrs,
       },
       position: node.position,
-    } as ImageBlock;
+    };
 
     parent.children.splice(i, 1, newNode);
   });
@@ -37,7 +41,7 @@ const imageTransformer = () => (tree: Node) => {
   const isImage = (node: MdxJsxFlowElement) => node.name === 'Image';
 
   visit(tree, isImage, (node: MdxJsxFlowElement) => {
-    const attrs = getAttrs<ImageBlock['data']['hProperties']>(node);
+    const attrs = getAttrs<ImageBlock>(node);
 
     if (attrs.caption) {
       node.children = mdast(attrs.caption).children;
@@ -48,4 +52,3 @@ const imageTransformer = () => (tree: Node) => {
 };
 
 export default imageTransformer;
-
diff --git a/processor/transform/readme-components.ts b/processor/transform/readme-components.ts
index 9ef063803..afdd08c0a 100644
--- a/processor/transform/readme-components.ts
+++ b/processor/transform/readme-components.ts
@@ -69,16 +69,28 @@ const coerceJsxToMd =
       parent.children[index] = mdNode;
     } else if (node.name === 'Image') {
       const { position } = node;
-      const { alt = '', url, title = null } = getAttrs<Pick<ImageBlock, 'alt' | 'title' | 'url'>>(node);
-      const attrs = getAttrs<ImageBlock['data']['hProperties']>(node);
+      const {
+        alt = '',
+        align,
+        caption,
+        title = null,
+        width,
+        src,
+      } = getAttrs<Pick<ImageBlock, 'alt' | 'align' | 'title' | 'width' | 'src' | 'caption'>>(node);
+
+      const attrs = {
+        ...(align && { align }),
+        ...(src && { src }),
+        ...(width && { width }),
+        alt,
+        children: caption ? mdast(caption).children : (node.children as any),
+        title,
+      };
 
       const mdNode: ImageBlock = {
-        alt,
+        ...attrs,
         position,
-        children: attrs.caption ? mdast(attrs.caption).children : (node.children as any),
-        title,
         type: NodeTypes.imageBlock,
-        url: url || attrs.src,
         data: {
           hName: 'img',
           hProperties: attrs,
diff --git a/processor/transform/readme-to-mdx.ts b/processor/transform/readme-to-mdx.ts
index 31c098227..21bd3c524 100644
--- a/processor/transform/readme-to-mdx.ts
+++ b/processor/transform/readme-to-mdx.ts
@@ -69,7 +69,7 @@ const readmeToMdx = (): Transform => tree => {
       parent.children.splice(index, 1, {
         type: 'image',
         children: [],
-        url: image.url,
+        url: image.src,
         title: image.title,
         alt: image.alt,
       } as Image);
diff --git a/processor/utils.ts b/processor/utils.ts
index 57470d993..d96a8fe21 100644
--- a/processor/utils.ts
+++ b/processor/utils.ts
@@ -155,13 +155,13 @@ export const reformatHTML = (html: string, indent: number = 2): string => {
 export const toAttributes = (object: Record<string, any>, keys: string[] = []): MdxJsxAttribute[] => {
   let attributes: MdxJsxAttribute[] = [];
   Object.entries(object).forEach(([name, v]) => {
-    if ((keys.length > 0 && !keys.includes(name)) || typeof v === 'undefined') return;
+    if (keys.length > 0 && !keys.includes(name)) return;
 
     let value: MdxJsxAttributeValueExpression | string;
 
     if (typeof v === 'string') {
       value = v;
-    } else if (typeof v === 'undefined') {
+    } else if (typeof v === 'undefined' || null === v) {
       return;
     } else {
       /* values can be null, undefined, string, or a expression, eg:
diff --git a/types.d.ts b/types.d.ts
index b94343cff..9149fa017 100644
--- a/types.d.ts
+++ b/types.d.ts
@@ -72,24 +72,23 @@ interface HTMLBlock extends Node {
   };
 }
 
-interface ImageBlock extends Parent {
-  type: NodeTypes.imageBlock;
-  url: string;
+interface ImageBlockAttrs {
+  align?: string;
   alt: string;
+  border?: string;
+  caption?: string;
+  className?: string;
+  lazy?: boolean;
+  src: string;
   title: string;
+  width?: string;
+}
+
+interface ImageBlock extends ImageBlockAttrs, Parent {
+  type: NodeTypes.imageBlock;
   data: Data & {
     hName: 'img';
-    hProperties: {
-      align?: string;
-      alt?: string;
-      caption?: string;
-      border?: string;
-      src: string;
-      title?: string;
-      width?: string;
-      lazy?: boolean;
-      className?: string;
-    };
+    hProperties: ImageBlockAttrs;
   };
 }
 

From d68ccbe013f6dcb3cc7830b4b6e2b5a85567857e Mon Sep 17 00:00:00 2001
From: Kelly Joseph Price <kellyjosephprice@gmail.com>
Date: Tue, 10 Sep 2024 14:43:12 -0700
Subject: [PATCH 2/5] lint

---
 __tests__/lib/plain.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/__tests__/lib/plain.test.ts b/__tests__/lib/plain.test.ts
index 98141346e..6821fc775 100644
--- a/__tests__/lib/plain.test.ts
+++ b/__tests__/lib/plain.test.ts
@@ -45,7 +45,7 @@ Is it _me_ you're looking for?
     expect(plain(hast(txt))).toBe('Header 1 Header 2 Cell 1 Cell 2');
   });
 
-  it.only('compiles images to their title', () => {
+  it('compiles images to their title', () => {
     const txt = `
 ![image **label**](http://placekitten.com/600/600 "entitled kittens")
     `;

From 2d7278823c29337c49b59a3d366b3e4a996e37ca Mon Sep 17 00:00:00 2001
From: Kelly Joseph Price <kellyjosephprice@gmail.com>
Date: Tue, 10 Sep 2024 15:56:01 -0700
Subject: [PATCH 3/5] fix: toAttributes null check

---
 __tests__/compilers/compatability.test.tsx  |  6 ++----
 __tests__/compilers/images.test.ts          | 10 ++++++++++
 __tests__/fixtures/image-block-no-attrs.mdx |  2 +-
 processor/transform/readme-components.ts    |  4 +++-
 processor/transform/readme-to-mdx.ts        |  6 +++---
 processor/utils.ts                          |  8 ++++----
 6 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/__tests__/compilers/compatability.test.tsx b/__tests__/compilers/compatability.test.tsx
index c5f6cdd8d..a7b3fc899 100644
--- a/__tests__/compilers/compatability.test.tsx
+++ b/__tests__/compilers/compatability.test.tsx
@@ -75,7 +75,7 @@ describe('compatability with RDMD', () => {
     };
 
     expect(mdx(ast).trim()).toMatchInlineSnapshot(`
-      "<Image align="center" width="300px" src="https://drastik.ch/wp-content/uploads/2023/06/blackcat.gif" alt="" title="">
+      "<Image align="center" width="300px" src="https://drastik.ch/wp-content/uploads/2023/06/blackcat.gif">
         hello **cat**
       </Image>"
     `);
@@ -289,8 +289,6 @@ This is an image: <img src="http://example.com/#\\>" >
 
     const rmdx = mdx(rdmd.mdast(md));
 
-    expect(rmdx).toMatch(
-      '<Image align="center" className="" width="250px" src="https://files.readme.io/4a1c7a0-Iphone.jpeg" />',
-    );
+    expect(rmdx).toMatch('<Image align="center" width="250px" src="https://files.readme.io/4a1c7a0-Iphone.jpeg" />');
   });
 });
diff --git a/__tests__/compilers/images.test.ts b/__tests__/compilers/images.test.ts
index 552c7b77c..82362b657 100644
--- a/__tests__/compilers/images.test.ts
+++ b/__tests__/compilers/images.test.ts
@@ -19,10 +19,20 @@ describe('image compiler', () => {
     expect(mdx(mdast(doc))).toMatch(doc);
   });
 
+  it.only('ignores empty (undefined, null, or "") attributes', () => {
+    const doc = '<Image src="/path/to/image.png" border={true} alt="" title={null} align={undefined} />';
+
+    expect(mdx(mdast(doc))).toMatch('<Image border={true} src="/path/to/image.png" />');
+  });
+
   it('correctly serializes an Image component with expression attributes back to MDX', () => {
     const doc = '<Image src="/path/to/image.png" border={false} />';
 
     expect(mdx(mdast(doc))).toMatch('![](/path/to/image.png)');
+
+    const doc2 = '<Image src="/path/to/image.png" border={true} />';
+
+    expect(mdx(mdast(doc2))).toMatch('<Image border={true} src="/path/to/image.png" />');
   });
 
   it('correctly serializes an Image component with an undefined expression attributes back to MDX', () => {
diff --git a/__tests__/fixtures/image-block-no-attrs.mdx b/__tests__/fixtures/image-block-no-attrs.mdx
index e15041eac..6e74126bb 100644
--- a/__tests__/fixtures/image-block-no-attrs.mdx
+++ b/__tests__/fixtures/image-block-no-attrs.mdx
@@ -1,6 +1,6 @@
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus magni delectus dolorum velit sit laboriosam a quos? Animi ut quam impedit inventore ratione. Delectus quaerat similique natus optio, magnam quam deleniti, iste fugiat ipsam sapiente modi hic cupiditate sint. Quod dolor, inventore facere laudantium facilis molestias reprehenderit. Consectetur, inventore doloremque.
 
-<Image align="left" className="" width="50% " src="https://files.readme.io/327e65d-image.png" />
+<Image align="left" width="50% " src="https://files.readme.io/327e65d-image.png" />
 
 # Hello world
 
diff --git a/processor/transform/readme-components.ts b/processor/transform/readme-components.ts
index afdd08c0a..c3063cfc2 100644
--- a/processor/transform/readme-components.ts
+++ b/processor/transform/readme-components.ts
@@ -72,14 +72,16 @@ const coerceJsxToMd =
       const {
         alt = '',
         align,
+        border,
         caption,
         title = null,
         width,
         src,
-      } = getAttrs<Pick<ImageBlock, 'alt' | 'align' | 'title' | 'width' | 'src' | 'caption'>>(node);
+      } = getAttrs<Pick<ImageBlock, 'alt' | 'align' | 'border' | 'title' | 'width' | 'src' | 'caption'>>(node);
 
       const attrs = {
         ...(align && { align }),
+        ...(border && { border }),
         ...(src && { src }),
         ...(width && { width }),
         alt,
diff --git a/processor/transform/readme-to-mdx.ts b/processor/transform/readme-to-mdx.ts
index 21bd3c524..7b7ca2d7a 100644
--- a/processor/transform/readme-to-mdx.ts
+++ b/processor/transform/readme-to-mdx.ts
@@ -69,9 +69,9 @@ const readmeToMdx = (): Transform => tree => {
       parent.children.splice(index, 1, {
         type: 'image',
         children: [],
-        url: image.src,
-        title: image.title,
-        alt: image.alt,
+        ...(image.src && { url: image.src }),
+        ...(image.title && { title: image.title }),
+        ...(image.alt && { alt: image.alt }),
       } as Image);
     }
   });
diff --git a/processor/utils.ts b/processor/utils.ts
index d96a8fe21..512e3c27c 100644
--- a/processor/utils.ts
+++ b/processor/utils.ts
@@ -66,7 +66,7 @@ export const getHPropKeys = <T>(node: Node): any => {
 export const getAttrs = <T>(jsx: MdxJsxFlowElement | MdxJsxTextElement): any =>
   jsx.attributes.reduce((memo, attr) => {
     if ('name' in attr) {
-      if (typeof attr.value === 'string') {
+      if (typeof attr.value === 'string' || attr.value === null) {
         memo[attr.name] = attr.value;
       } else if (attr.value.value !== 'undefined') {
         memo[attr.name] = JSON.parse(attr.value.value);
@@ -159,10 +159,10 @@ export const toAttributes = (object: Record<string, any>, keys: string[] = []):
 
     let value: MdxJsxAttributeValueExpression | string;
 
-    if (typeof v === 'string') {
-      value = v;
-    } else if (typeof v === 'undefined' || null === v) {
+    if (typeof v === 'undefined' || v === null || v === '') {
       return;
+    } else if (typeof v === 'string') {
+      value = v;
     } else {
       /* values can be null, undefined, string, or a expression, eg:
        *

From 301dc4f33cfad36c34ae43d31c4a3bd452891313 Mon Sep 17 00:00:00 2001
From: Kelly Joseph Price <kellyjosephprice@gmail.com>
Date: Tue, 10 Sep 2024 15:56:31 -0700
Subject: [PATCH 4/5] oopsonly

---
 __tests__/compilers/images.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/__tests__/compilers/images.test.ts b/__tests__/compilers/images.test.ts
index 82362b657..3cf7d8172 100644
--- a/__tests__/compilers/images.test.ts
+++ b/__tests__/compilers/images.test.ts
@@ -19,7 +19,7 @@ describe('image compiler', () => {
     expect(mdx(mdast(doc))).toMatch(doc);
   });
 
-  it.only('ignores empty (undefined, null, or "") attributes', () => {
+  it('ignores empty (undefined, null, or "") attributes', () => {
     const doc = '<Image src="/path/to/image.png" border={true} alt="" title={null} align={undefined} />';
 
     expect(mdx(mdast(doc))).toMatch('<Image border={true} src="/path/to/image.png" />');

From 5b6943cf7ed5293e494a915fa075b68336fb4980 Mon Sep 17 00:00:00 2001
From: Kelly Joseph Price <kellyjosephprice@gmail.com>
Date: Wed, 11 Sep 2024 10:48:27 -0700
Subject: [PATCH 5/5] set null to true

---
 __tests__/lib/mdast/null-attributes/in.mdx   |  1 +
 __tests__/lib/mdast/null-attributes/out.json | 23 ++++++++++++++++++++
 processor/utils.ts                           |  4 +++-
 3 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 __tests__/lib/mdast/null-attributes/in.mdx
 create mode 100644 __tests__/lib/mdast/null-attributes/out.json

diff --git a/__tests__/lib/mdast/null-attributes/in.mdx b/__tests__/lib/mdast/null-attributes/in.mdx
new file mode 100644
index 000000000..fb73dc7f3
--- /dev/null
+++ b/__tests__/lib/mdast/null-attributes/in.mdx
@@ -0,0 +1 @@
+<Image src="..." border />
diff --git a/__tests__/lib/mdast/null-attributes/out.json b/__tests__/lib/mdast/null-attributes/out.json
new file mode 100644
index 000000000..bc956b161
--- /dev/null
+++ b/__tests__/lib/mdast/null-attributes/out.json
@@ -0,0 +1,23 @@
+{
+  "type": "root",
+  "children": [
+    {
+      "type": "image-block",
+      "src": "...",
+      "border": true,
+      "alt": "",
+      "children": [],
+      "title": null,
+      "data": {
+        "hName": "img",
+        "hProperties": {
+          "alt": "",
+          "border": true,
+          "children": [],
+          "src": "...",
+          "title": null
+        }
+      }
+    }
+  ]
+}
diff --git a/processor/utils.ts b/processor/utils.ts
index 512e3c27c..54c9e3e99 100644
--- a/processor/utils.ts
+++ b/processor/utils.ts
@@ -66,8 +66,10 @@ export const getHPropKeys = <T>(node: Node): any => {
 export const getAttrs = <T>(jsx: MdxJsxFlowElement | MdxJsxTextElement): any =>
   jsx.attributes.reduce((memo, attr) => {
     if ('name' in attr) {
-      if (typeof attr.value === 'string' || attr.value === null) {
+      if (typeof attr.value === 'string') {
         memo[attr.name] = attr.value;
+      } else if (attr.value === null) {
+        memo[attr.name] = true;
       } else if (attr.value.value !== 'undefined') {
         memo[attr.name] = JSON.parse(attr.value.value);
       }