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-07-12 18:08:45 +00:00 • committed by GitHub Actions
parent 8f4562afbe
commit 7aa8d4719f
4 changed files with 28 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
docs/core-concepts/astro-components.md
View file

@ -136,7 +136,7 @@ const { greeting = 'Hello', name } = Astro.props;
</MyComponent> </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! > **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. `.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}` |
| |
| Children | `<slot>` (with named slot support) | `children` | Children | `<slot>` (with named slot support) | `children`
| |
| 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` |
### URL resolution ### URL resolution

12
packages/astro/src/internal/__astro_component.ts
View file

@ -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> = { const $slots: Record<string, string> = {
default: '' default: '',
}; };
for (const child of children) { for (const child of children) {
if (typeof child === 'string') { if (typeof child === 'string') {
@ -127,9 +127,9 @@ const prepareSlottedChildren = (children: string|Record<any, any>[]) => {
} }
return { $slots }; return { $slots };
} };
const removeSlottedChildren = (_children: string|Record<any, any>[]) => { const removeSlottedChildren = (_children: string | Record<any, any>[]) => {
let children = ''; let children = '';
for (const child of _children) { for (const child of _children) {
if (typeof child === 'string') { if (typeof child === 'string') {
@ -140,7 +140,7 @@ const removeSlottedChildren = (_children: string|Record<any, any>[]) => {
} }
return children; return children;
} };
/** The main wrapper for any components in Astro files */ /** The main wrapper for any components in Astro files */
export function __astro_component(Component: any, metadata: AstroComponentMetadata = {} as any) { 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>`; const astroRoot = `<astro-root uid="${astroId}">${html}</astro-root>`;
return [astroRoot, script].join('\n'); return [astroRoot, script].join('\n');
}; };
}; }

6
packages/astro/src/internal/__astro_slot.ts
View file

@ -1,9 +1,9 @@
/** */ /** */
export function __astro_slot_content({ name }: { name: string}, ...children: any[]) { export function __astro_slot_content({ name }: { name: string }, ...children: any[]) {
return { '$slot': name, children }; 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') { if (name === 'default' && typeof _children === 'string') {
return _children ? _children : fallback; return _children ? _children : fallback;
} }

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

@ -63,7 +63,6 @@ Slots('Slots work with multiple elements', async ({ runtime }) => {
assert.equal($('#a').text(), 'ABC'); assert.equal($('#a').text(), 'ABC');
}); });
Slots('Slots work on Components', async ({ runtime }) => { Slots('Slots work on Components', async ({ runtime }) => {
const result = await runtime.load('/component'); const result = await runtime.load('/component');
if (result.error) throw new Error(result.error); 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'); assert.equal($('#default').children('astro-component').length, 1, 'Slotted component into default slot');
}); });
Slots.run(); Slots.run();