diff options
| author |  natemoo-re <natemoo-re@users.noreply.github.com>
| 2021-06-15 16:34:46 +0000 |
|---|---|---|
| committer |  GitHub Actions <actions@github.com>
| 2021-06-15 16:34:46 +0000 |
| commit | 266e447e0157b423933219a88ffd06c79134842c (patch) | |
| tree | b558fab5edddefb419a04301b0a1dda7340f4130 | |
| parent | 490f2bebbcd354b7b9d85020b9ce3abe5f376f13 (diff) | |
| download | astro-266e447e0157b423933219a88ffd06c79134842c.tar.gz astro-266e447e0157b423933219a88ffd06c79134842c.tar.zst astro-266e447e0157b423933219a88ffd06c79134842c.zip | |
[ci] yarn format
| -rw-r--r-- | docs/syntax.md | 47 | ||||
| -rw-r--r-- | packages/astro/test/astro-expr.test.js | 2 |
2 files changed, 24 insertions, 25 deletions
diff --git a/docs/syntax.md b/docs/syntax.md index 358644f17..6bc2032d5 100644 --- a/docs/syntax.md +++ b/docs/syntax.md @@ -128,13 +128,13 @@ Inside of an expression, you must wrap multiple elements in a Fragment. Fragment ```jsx <div> -{[0, 1, 2].map(id => ( - <> - <div id={`a-${id}`} /> - <div id={`b-${id}`} /> - <div id={`c-${id}`} /> - </> -))} + {[0, 1, 2].map((id) => ( + <> + <div id={`a-${id}`} /> + <div id={`b-${id}`} /> + <div id={`c-${id}`} /> + </> + ))} </div> ``` @@ -142,23 +142,22 @@ Inside of an expression, you must wrap multiple elements in a Fragment. Fragment `.astro` files can end up looking very similar to `.jsx` files, but there are a few key differences. Here's a comparison between the two formats. -| Feature | Astro | JSX | -| ---------------------------- | -------------------------------------------- | -------------------------------------------------- | -| File extension | `.astro` | `.jsx` or `.tsx` | -| User-Defined Components | `<Capitalized>` | `<Capitalized>` | -| Expression Syntax | `{}` | `{}` | -| Spread Attributes | `{...props}` | `{...props}` | -| Boolean Attributes | `autocomplete` === `autocomplete={true}` | `autocomplete` === `autocomplete={true}` | -| Inline Functions | `{items.map(item => <li>{item}</li>)}` | `{items.map(item => <li>{item}</li>)}` | -| IDE Support | WIP - [VS Code][code-ext] | Phenomenal | -| Requires JS import | No | Yes, `jsxPragma` (`React` or `h`) must be in scope | -| Fragments | Automatic top-level, `<>` inside functions | Wrap with `<Fragment>` or `<>` | -| Multiple frameworks per-file | Yes | No | -| Modifying `<head>` | Just use `<head>` | Per-framework (`<Head>`, `<svelte:head>`, etc) | -| Comment Style | `<!-- HTML -->` | `{/* JavaScript */}` | -| Special Characters | ` ` | `{'\xa0'}` or `{String.fromCharCode(160)}` | -| Attributes | `dash-case` | `camelCase` | - +| Feature | Astro | JSX | +| ---------------------------- | ------------------------------------------ | -------------------------------------------------- | +| File extension | `.astro` | `.jsx` or `.tsx` | +| User-Defined Components | `<Capitalized>` | `<Capitalized>` | +| Expression Syntax | `{}` | `{}` | +| Spread Attributes | `{...props}` | `{...props}` | +| Boolean Attributes | `autocomplete` === `autocomplete={true}` | `autocomplete` === `autocomplete={true}` | +| Inline Functions | `{items.map(item => <li>{item}</li>)}` | `{items.map(item => <li>{item}</li>)}` | +| IDE Support | WIP - [VS Code][code-ext] | Phenomenal | +| Requires JS import | No | Yes, `jsxPragma` (`React` or `h`) must be in scope | +| Fragments | Automatic top-level, `<>` inside functions | Wrap with `<Fragment>` or `<>` | +| Multiple frameworks per-file | Yes | No | +| Modifying `<head>` | Just use `<head>` | Per-framework (`<Head>`, `<svelte:head>`, etc) | +| Comment Style | `<!-- HTML -->` | `{/* JavaScript */}` | +| Special Characters | ` ` | `{'\xa0'}` or `{String.fromCharCode(160)}` | +| Attributes | `dash-case` | `camelCase` | ### TODO: Composition (Slots) diff --git a/packages/astro/test/astro-expr.test.js b/packages/astro/test/astro-expr.test.js index 727abd1c8..505bf2845 100644 --- a/packages/astro/test/astro-expr.test.js +++ b/packages/astro/test/astro-expr.test.js @@ -67,7 +67,7 @@ Expressions('Allows <> Fragments in expressions', async ({ runtime }) => { assert.equal($('#fragment').children('#a').length, 1); assert.equal($('#fragment').children('#b').length, 1); assert.equal($('#fragment').children('#c').length, 1); -}) +}); Expressions('Does not render falsy values using &&', async ({ runtime }) => { const result = await runtime.load('/falsy'); |