diff options
| -rw-r--r-- | docs/core-concepts/astro-components.md | 37 | ||||
| -rw-r--r-- | packages/astro/src/internal/__astro_component.ts | 12 | ||||
| -rw-r--r-- | packages/astro/src/internal/__astro_slot.ts | 6 | ||||
| -rw-r--r-- | packages/astro/test/astro-slots.test.js | 2 |
4 files changed, 28 insertions, 29 deletions
diff --git a/docs/core-concepts/astro-components.md b/docs/core-concepts/astro-components.md index 1be0d631e..e8722468a 100644 --- a/docs/core-concepts/astro-components.md +++ b/docs/core-concepts/astro-components.md @@ -136,7 +136,7 @@ const { greeting = 'Hello', name } = Astro.props; </MyComponent> ``` -Slots are especially powerful when using **named slots**. Rather than a single `<slot>` element which renders _all_ children, named slots allow you to specify where certain children should be placed. +Slots are especially powerful when using **named slots**. Rather than a single `<slot>` element which renders _all_ children, named slots allow you to specify where certain children should be placed. > **Note** The `slot` attribute is not restricted to plain HTML, components can use `slot` as well! @@ -205,25 +205,26 @@ 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}` +| Feature | Astro | JSX | +| ----------------------- | --------------- | ---------------- | +| File extension | `.astro` | `.jsx` or `.tsx` | +| User-Defined Components | `<Capitalized>` | `<Capitalized>` | +| Expression Syntax | `{}` | `{}` | +| Spread Attributes | `{...props}` | `{...props}` | + | -| Children | `<slot>` (with named slot support) | `children` +| Children | `<slot>` (with named slot support) | `children` | -| 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` | +| 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` | ### URL resolution diff --git a/packages/astro/src/internal/__astro_component.ts b/packages/astro/src/internal/__astro_component.ts index ff1d2ff54..6738600e3 100644 --- a/packages/astro/src/internal/__astro_component.ts +++ b/packages/astro/src/internal/__astro_component.ts @@ -113,9 +113,9 @@ const getComponentName = (Component: any, componentProps: any) => { } }; -const prepareSlottedChildren = (children: string|Record<any, any>[]) => { +const prepareSlottedChildren = (children: string | Record<any, any>[]) => { const $slots: Record<string, string> = { - default: '' + default: '', }; for (const child of children) { if (typeof child === 'string') { @@ -127,9 +127,9 @@ const prepareSlottedChildren = (children: string|Record<any, any>[]) => { } return { $slots }; -} +}; -const removeSlottedChildren = (_children: string|Record<any, any>[]) => { +const removeSlottedChildren = (_children: string | Record<any, any>[]) => { let children = ''; for (const child of _children) { if (typeof child === 'string') { @@ -140,7 +140,7 @@ const removeSlottedChildren = (_children: string|Record<any, any>[]) => { } return children; -} +}; /** The main wrapper for any components in Astro files */ export function __astro_component(Component: any, metadata: AstroComponentMetadata = {} as any) { @@ -190,4 +190,4 @@ export function __astro_component(Component: any, metadata: AstroComponentMetada const astroRoot = `<astro-root uid="${astroId}">${html}</astro-root>`; return [astroRoot, script].join('\n'); }; -}; +} diff --git a/packages/astro/src/internal/__astro_slot.ts b/packages/astro/src/internal/__astro_slot.ts index c049e82bc..a719fa297 100644 --- a/packages/astro/src/internal/__astro_slot.ts +++ b/packages/astro/src/internal/__astro_slot.ts @@ -1,9 +1,9 @@ /** */ -export function __astro_slot_content({ name }: { name: string}, ...children: any[]) { - return { '$slot': name, children }; +export function __astro_slot_content({ name }: { name: string }, ...children: any[]) { + return { $slot: name, children }; } -export const __astro_slot = ({ name = 'default' }: { name: string}, _children: any, ...fallback: string[]) => { +export const __astro_slot = ({ name = 'default' }: { name: string }, _children: any, ...fallback: string[]) => { if (name === 'default' && typeof _children === 'string') { return _children ? _children : fallback; } diff --git a/packages/astro/test/astro-slots.test.js b/packages/astro/test/astro-slots.test.js index 343244910..69944a437 100644 --- a/packages/astro/test/astro-slots.test.js +++ b/packages/astro/test/astro-slots.test.js @@ -63,7 +63,6 @@ Slots('Slots work with multiple elements', async ({ runtime }) => { assert.equal($('#a').text(), 'ABC'); }); - Slots('Slots work on Components', async ({ runtime }) => { const result = await runtime.load('/component'); if (result.error) throw new Error(result.error); @@ -75,5 +74,4 @@ Slots('Slots work on Components', async ({ runtime }) => { assert.equal($('#default').children('astro-component').length, 1, 'Slotted component into default slot'); }); - Slots.run(); |