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
-{[0, 1, 2].map(id => ( - <> -
-
-
- -))} + {[0, 1, 2].map((id) => ( + <> +
+
+
+ + ))}
``` @@ -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 | `` | `` | -| Expression Syntax | `{}` | `{}` | -| Spread Attributes | `{...props}` | `{...props}` | -| Boolean Attributes | `autocomplete` === `autocomplete={true}` | `autocomplete` === `autocomplete={true}` | -| Inline Functions | `{items.map(item =>
  • {item}
    • )}` | `{items.map(item =>
  • {item}
    • )}` | -| 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 `` or `<>` | -| Multiple frameworks per-file | Yes | No | -| Modifying `` | Just use `` | Per-framework (``, ``, etc) | -| Comment Style | `` | `{/* JavaScript */}` | -| Special Characters | ` ` | `{'\xa0'}` or `{String.fromCharCode(160)}` | -| Attributes | `dash-case` | `camelCase` | - +| Feature | Astro | JSX | +| ---------------------------- | ------------------------------------------ | -------------------------------------------------- | +| File extension | `.astro` | `.jsx` or `.tsx` | +| User-Defined Components | `` | `` | +| Expression Syntax | `{}` | `{}` | +| Spread Attributes | `{...props}` | `{...props}` | +| Boolean Attributes | `autocomplete` === `autocomplete={true}` | `autocomplete` === `autocomplete={true}` | +| Inline Functions | `{items.map(item =>
  • {item}
    • )}` | `{items.map(item =>
  • {item}
    • )}` | +| 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 `` or `<>` | +| Multiple frameworks per-file | Yes | No | +| Modifying `` | Just use `` | Per-framework (``, ``, etc) | +| Comment Style | `` | `{/* 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');