michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[ci] yarn format

Browse source
This commit is contained in:
natemoo-re 2021-06-15 16:34:46 +00:00 committed by GitHub Actions
parent 490f2bebbc
commit 266e447e01
2 changed files with 24 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
docs/syntax.md
View file

@ -128,13 +128,13 @@ Inside of an expression, you must wrap multiple elements in a Fragment. Fragment
```jsx ```jsx
<div> <div>
{[0, 1, 2].map(id => ( {[0, 1, 2].map((id) => (
<> <>
<div id={`a-${id}`} /> <div id={`a-${id}`} />
<div id={`b-${id}`} /> <div id={`b-${id}`} />
<div id={`c-${id}`} /> <div id={`c-${id}`} />
</> </>
))} ))}
</div> </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. `.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 | | Feature | Astro | JSX |
| ---------------------------- | -------------------------------------------- | -------------------------------------------------- | | ---------------------------- | ------------------------------------------ | -------------------------------------------------- |
| File extension | `.astro` | `.jsx` or `.tsx` | | File extension | `.astro` | `.jsx` or `.tsx` |
| User-Defined Components | `<Capitalized>` | `<Capitalized>` | | User-Defined Components | `<Capitalized>` | `<Capitalized>` |
| Expression Syntax | `{}` | `{}` | | Expression Syntax | `{}` | `{}` |
| Spread Attributes | `{...props}` | `{...props}` | | Spread Attributes | `{...props}` | `{...props}` |
| Boolean Attributes | `autocomplete` === `autocomplete={true}` | `autocomplete` === `autocomplete={true}` | | Boolean Attributes | `autocomplete` === `autocomplete={true}` | `autocomplete` === `autocomplete={true}` |
| Inline Functions | `{items.map(item => <li>{item}</li>)}` | `{items.map(item => <li>{item}</li>)}` | | Inline Functions | `{items.map(item => <li>{item}</li>)}` | `{items.map(item => <li>{item}</li>)}` |
| IDE Support | WIP - [VS Code][code-ext] | Phenomenal | | IDE Support | WIP - [VS Code][code-ext] | Phenomenal |
| Requires JS import | No | Yes, `jsxPragma` (`React` or `h`) must be in scope | | Requires JS import | No | Yes, `jsxPragma` (`React` or `h`) must be in scope |
| Fragments | Automatic top-level, `<>` inside functions | Wrap with `<Fragment>` or `<>` | | Fragments | Automatic top-level, `<>` inside functions | Wrap with `<Fragment>` or `<>` |
| Multiple frameworks per-file | Yes | No | | Multiple frameworks per-file | Yes | No |
| Modifying `<head>` | Just use `<head>` | Per-framework (`<Head>`, `<svelte:head>`, etc) | | Modifying `<head>` | Just use `<head>` | Per-framework (`<Head>`, `<svelte:head>`, etc) |
| Comment Style | `<!-- HTML -->` | `{/* JavaScript */}` | | Comment Style | `<!-- HTML -->` | `{/* JavaScript */}` |
| Special Characters | `&nbsp;` | `{'\xa0'}` or `{String.fromCharCode(160)}` | | Special Characters | `&nbsp;` | `{'\xa0'}` or `{String.fromCharCode(160)}` |
| Attributes | `dash-case` | `camelCase` | | Attributes | `dash-case` | `camelCase` |
### TODO: Composition (Slots) ### TODO: Composition (Slots)

2
packages/astro/test/astro-expr.test.js
View file

@ -67,7 +67,7 @@ Expressions('Allows <> Fragments in expressions', async ({ runtime }) => {
assert.equal($('#fragment').children('#a').length, 1); assert.equal($('#fragment').children('#a').length, 1);
assert.equal($('#fragment').children('#b').length, 1); assert.equal($('#fragment').children('#b').length, 1);
assert.equal($('#fragment').children('#c').length, 1); assert.equal($('#fragment').children('#c').length, 1);
}) });
Expressions('Does not render falsy values using &&', async ({ runtime }) => { Expressions('Does not render falsy values using &&', async ({ runtime }) => {
const result = await runtime.load('/falsy'); const result = await runtime.load('/falsy');