[ci] yarn format
This commit is contained in:
natemoo-re
GitHub Actions
parent
8f4562afbe
commit
7aa8d4719f
4 changed files with 28 additions and 29 deletions
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
};
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
Loading…
Reference in a new issue