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

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

@ -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 | `&nbsp;` | `{'\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 | `&nbsp;` | `{'\xa0'}` or `{String.fromCharCode(160)}` |
| Attributes | `dash-case` | `camelCase` |
### 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> = {
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');
};
};
}

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

@ -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;
}

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');
});
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();