From 2d854092a4785235489d80d87e70219c520612d1 Mon Sep 17 00:00:00 2001
From: Matthew Phillips <matthew@matthewphillips.info>
Date: Mon, 14 Jun 2021 12:29:34 -0400
Subject: [PATCH] Serialize boolean attributes without a value (#422)

* Serialize boolean attributes without a value

Fixes #307

* Update the attrs test

* Adds a changeset

* Adds test that components receive booleans
---
 .changeset/sour-squids-trade.md                     |  5 +++++
 packages/astro/src/internal/h.ts                    |  5 +++--
 packages/astro/test/astro-attrs.test.js             | 13 ++++++++++++-
 packages/astro/test/astro-basic.test.js             |  8 ++++++++
 .../fixtures/astro-attrs/src/components/Span.jsx    |  5 +++++
 .../fixtures/astro-attrs/src/pages/component.astro  |  6 ++++++
 .../test/fixtures/astro-basic/src/pages/index.astro |  3 ++-
 7 files changed, 41 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/sour-squids-trade.md
 create mode 100644 packages/astro/test/fixtures/astro-attrs/src/components/Span.jsx
 create mode 100644 packages/astro/test/fixtures/astro-attrs/src/pages/component.astro

diff --git a/.changeset/sour-squids-trade.md b/.changeset/sour-squids-trade.md
new file mode 100644
index 000000000..ceacfe25a
--- /dev/null
+++ b/.changeset/sour-squids-trade.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes serialization of boolean attributes
diff --git a/packages/astro/src/internal/h.ts b/packages/astro/src/internal/h.ts
index 07420a353..470597999 100644
--- a/packages/astro/src/internal/h.ts
+++ b/packages/astro/src/internal/h.ts
@@ -1,4 +1,4 @@
-export type HProps = Record<string, string> | null | undefined;
+export type HProps = Record<string, string | boolean> | null | undefined;
 export type HChild = string | undefined | (() => string);
 export type AstroComponent = (props: HProps, ...children: Array<HChild>) => string;
 export type HTag = string | AstroComponent;
@@ -20,7 +20,8 @@ function* _h(tag: string, attrs: HProps, children: Array<HChild>) {
   if (attrs) {
     for (let [key, value] of Object.entries(attrs)) {
       if (value === '') yield ` ${key}=""`;
-      else if (value == null) yield '';
+      else if (value == null || value === false) yield '';
+      else if (value === true) yield ` ${key}`;
       else yield ` ${key}="${value}"`;
     }
   }
diff --git a/packages/astro/test/astro-attrs.test.js b/packages/astro/test/astro-attrs.test.js
index fd58769a9..3bc296ab9 100644
--- a/packages/astro/test/astro-attrs.test.js
+++ b/packages/astro/test/astro-attrs.test.js
@@ -14,7 +14,7 @@ Attributes('Passes attributes to elements as expected', async ({ runtime }) => {
   const $ = doc(result.contents);
 
   const ids = ['false-str', 'true-str', 'false', 'true', 'empty', 'null', 'undefined'];
-  const specs = ['false', 'true', 'false', 'true', '', undefined, undefined];
+  const specs = ['false', 'true', undefined, '', '', undefined, undefined];
 
   let i = 0;
   for (const id of ids) {
@@ -25,4 +25,15 @@ Attributes('Passes attributes to elements as expected', async ({ runtime }) => {
   }
 });
 
+Attributes('Passes boolean attributes to components as expected', async ({ runtime }) => {
+  const result = await runtime.load('/component');
+  if (result.error) throw new Error(result.error);
+
+  const $ = doc(result.contents);
+  assert.equal($('#true').attr('attr'), 'attr-true');
+  assert.equal($('#true').attr('type'), 'boolean');
+  assert.equal($('#false').attr('attr'), 'attr-false');
+  assert.equal($('#false').attr('type'), 'boolean');
+});
+
 Attributes.run();
diff --git a/packages/astro/test/astro-basic.test.js b/packages/astro/test/astro-basic.test.js
index 88877627b..29346f043 100644
--- a/packages/astro/test/astro-basic.test.js
+++ b/packages/astro/test/astro-basic.test.js
@@ -32,4 +32,12 @@ Basics('Does not set the HMR port when no dynamic component used', async ({ runt
   assert.ok(!/HMR_WEBSOCKET_URL/.test(html), 'Does not set the websocket port');
 });
 
+Basics('Correctly serializes boolean attributes', async ({ runtime }) => {
+  const result = await runtime.load('/');
+  const html = result.contents;
+  const $ = doc(html);
+  assert.equal($('h1').attr('data-something'), '');
+  assert.equal($('h2').attr('not-data-ok'), '');
+});
+
 Basics.run();
diff --git a/packages/astro/test/fixtures/astro-attrs/src/components/Span.jsx b/packages/astro/test/fixtures/astro-attrs/src/components/Span.jsx
new file mode 100644
index 000000000..3ff52c313
--- /dev/null
+++ b/packages/astro/test/fixtures/astro-attrs/src/components/Span.jsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function({ id, attr }) {
+  return <span id={id} attr={`attr-${attr}`} type={typeof attr}></span>
+}
\ No newline at end of file
diff --git a/packages/astro/test/fixtures/astro-attrs/src/pages/component.astro b/packages/astro/test/fixtures/astro-attrs/src/pages/component.astro
new file mode 100644
index 000000000..b0fa6490f
--- /dev/null
+++ b/packages/astro/test/fixtures/astro-attrs/src/pages/component.astro
@@ -0,0 +1,6 @@
+---
+import Span from '../components/Span.jsx';
+---
+
+<Span id="true" attr={true} />
+<Span id="false" attr={false} />
\ No newline at end of file
diff --git a/packages/astro/test/fixtures/astro-basic/src/pages/index.astro b/packages/astro/test/fixtures/astro-basic/src/pages/index.astro
index 5ae5380c5..689648335 100644
--- a/packages/astro/test/fixtures/astro-basic/src/pages/index.astro
+++ b/packages/astro/test/fixtures/astro-basic/src/pages/index.astro
@@ -7,6 +7,7 @@ let title = 'My App'
     <!-- Head Stuff -->
   </head>
   <body>
-    <h1>Hello world!</h1>
+    <h1 data-something>Hello world!</h1>
+    <h2 not-data-ok>Subtitle here</h2>
   </body>
 </html>