diff options
| -rw-r--r-- | .changeset/sour-squids-trade.md | 5 | ||||
| -rw-r--r-- | packages/astro/src/internal/h.ts | 5 | ||||
| -rw-r--r-- | packages/astro/test/astro-attrs.test.js | 13 | ||||
| -rw-r--r-- | packages/astro/test/astro-basic.test.js | 8 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/astro-attrs/src/components/Span.jsx | 5 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/astro-attrs/src/pages/component.astro | 6 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/astro-basic/src/pages/index.astro | 3 |
7 files changed, 41 insertions, 4 deletions
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> |