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

Docs: READMEs for component framework integrations (#2880)

Browse source 
* docs: add base integration readme temp for Vue

* docs: copy integration temp across renderers

* feat: add get started with components section

* feat: adapt comp integration docs for lit

* nit: THERES TWO WAYS SPECIFICALLY

* nit: there's more edits wait "there are" dangit
This commit is contained in:
Ben Holmes 2022-03-25 12:15:38 -04:00 committed by GitHub
parent 4edccae534
commit 7c39389a3f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 444 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

119
packages/integrations/lit/README.md Normal file
View file

@ -0,0 +1,119 @@
# @astrojs/lit 🔥
This **[Astro integration][astro-integration]** enables server-side rendering and client-side hydration for your [Lit](https://lit.dev/) custom elements.
## Installation
There are two ways to add integrations to your project. Let's try the most convenient option first!
### (experimental) `astro add` command
Astro includes a CLI tool for adding first party integrations: `astro add`. This command will:
1. (Optionally) Install all necessary dependencies and peer dependencies
2. (Also optionally) Update your `astro.config.*` file to apply this integration
To install `@astrojs/lit`, run the following from your project directory and follow the prompts:
```sh
# Using NPM
npx astro add lit
# Using Yarn
yarn astro add lit
# Using PNPM
pnpx astro add lit
```
If you run into any hiccups, [feel free to log an issue on our GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
### Install dependencies manually
First, install the `@astrojs/lit` integration like so:
```
npm install @astrojs/lit
```
Most package managers will install associated peer dependencies as well. Still, if you see a "Cannot find package 'lit'" (or similar) warning when you start up Astro, you'll need to install `lit` and `@webcomponents/template-shadowroot`:
```sh
npm install lit @webcomponents/template-shadowroot
```
Now, apply this integration to your `astro.config.*` file using the `integrations` property:
__astro.config.mjs__
```js
import lit from '@astrojs/lit';
export default {
// ...
integrations: [lit()],
}
```
## Getting started
To use your first Lit component in Astro, head to our [UI framework documentation][astro-ui-frameworks]. This explains:
- 📦 how framework components are loaded,
- 💧 client-side hydration options, and
- 🪆 opportunities to mix and nest frameworks together
However, there's a key difference with Lit _custom elements_ over conventional _components_: you can use the element tag name directly.
Astro needs to know which tag is associated with which component script. We expose this through exporting a `tagName` variable from the component script. It looks like this:
__src/components/my-element.js__
```js
import { LitElement, html } from 'lit';
export const tagName = 'my-element';
class MyElement extends LitElement {
render() {
return html` <p>Hello world! From my-element</p> `;
}
}
customElements.define(tagName, MyElement);
```
> Note that exporting the `tagName` is __required__ if you want to use the tag name in your templates. Otherwise you can export and use the constructor, like with non custom element frameworks.
In your Astro template import this component as a side-effect and use the element.
__src/pages/index.astro__
```astro
---
import '../components/my-element.js';
---
<my-element></my-element>
```
> Note that Lit requires browser globals such as `HTMLElement` and `customElements` to be present. For this reason the Lit renderer shims the server with these globals so Lit can run. You *might* run into libraries that work incorrectly because of this.
### Polyfills & Hydration
The renderer automatically handles adding appropriate polyfills for support in browsers that don't have Declarative Shadow DOM. The polyfill is about *1.5kB*. If the browser does support Declarative Shadow DOM then less than 250 bytes are loaded (to feature detect support).
Hydration is also handled automatically. You can use the same hydration directives such as `client:load`, `client:idle` and `client:visible` as you can with other libraries that Astro supports.
```astro
---
import '../components/my-element.js';
---
<my-element client:visible />
```
The above will only load the element's JavaScript when the user has scrolled it into view. Since it is server rendered they will not see any jank; it will load and hydrate transparently.
### More documentation
Check our [Astro Integration Documentation][astro-integration] for more on integrations.
[astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
[astro-ui-frameworks]: https://docs.astro.build/en/core-concepts/framework-components/#using-framework-components

65
packages/integrations/preact/README.md Normal file
View file

@ -0,0 +1,65 @@
# @astrojs/preact ⚛️
This **[Astro integration][astro-integration]** enables server-side rendering and client-side hydration for your [Preact](https://preactjs.com/) components.
## Installation
There are two ways to add integrations to your project. Let's try the most convenient option first!
### (experimental) `astro add` command
Astro includes a CLI tool for adding first party integrations: `astro add`. This command will:
1. (Optionally) Install all necessary dependencies and peer dependencies
2. (Also optionally) Update your `astro.config.*` file to apply this integration
To install `@astrojs/preact`, run the following from your project directory and follow the prompts:
```sh
# Using NPM
npx astro add preact
# Using Yarn
yarn astro add preact
# Using PNPM
pnpx astro add preact
```
If you run into any hiccups, [feel free to log an issue on our GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
### Install dependencies manually
First, install the `@astrojs/preact` integration like so:
```
npm install @astrojs/preact
```
Most package managers will install associated peer dependencies as well. Still, if you see a "Cannot find package 'preact'" (or similar) warning when you start up Astro, you'll need to install Preact:
```sh
npm install preact
```
Now, apply this integration to your `astro.config.*` file using the `integrations` property:
__astro.config.mjs__
```js
import preact from '@astrojs/preact';
export default {
// ...
integrations: [preact()],
}
```
## Getting started
To use your first Preact component in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:
- 📦 how framework components are loaded,
- 💧 client-side hydration options, and
- 🪆 opportunities to mix and nest frameworks together
Also check our [Astro Integration Documentation][astro-integration] for more on integrations.
[astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
[astro-ui-frameworks]: https://docs.astro.build/en/core-concepts/framework-components/#using-framework-components

65
packages/integrations/react/README.md Normal file
View file

@ -0,0 +1,65 @@
# @astrojs/react ⚛️
This **[Astro integration][astro-integration]** enables server-side rendering and client-side hydration for your [React](https://reactjs.org/) components.
## Installation
There are two ways to add integrations to your project. Let's try the most convenient option first!
### (experimental) `astro add` command
Astro includes a CLI tool for adding first party integrations: `astro add`. This command will:
1. (Optionally) Install all necessary dependencies and peer dependencies
2. (Also optionally) Update your `astro.config.*` file to apply this integration
To install `@astrojs/react`, run the following from your project directory and follow the prompts:
```sh
# Using NPM
npx astro add react
# Using Yarn
yarn astro add react
# Using PNPM
pnpx astro add react
```
If you run into any hiccups, [feel free to log an issue on our GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
### Install dependencies manually
First, install the `@astrojs/react` integration like so:
```
npm install @astrojs/react
```
Most package managers will install associated peer dependencies as well. Still, if you see a "Cannot find package 'react'" (or similar) warning when you start up Astro, you'll need to install `react` and `react-dom`:
```sh
npm install react react-dom
```
Now, apply this integration to your `astro.config.*` file using the `integrations` property:
__astro.config.mjs__
```js
import react from '@astrojs/react';
export default {
// ...
integrations: [react()],
}
```
## Getting started
To use your first React component in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:
- 📦 how framework components are loaded,
- 💧 client-side hydration options, and
- 🪆 opportunities to mix and nest frameworks together
Also check our [Astro Integration Documentation][astro-integration] for more on integrations.
[astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
[astro-ui-frameworks]: https://docs.astro.build/en/core-concepts/framework-components/#using-framework-components

65
packages/integrations/solid/README.md Normal file
View file

@ -0,0 +1,65 @@
# @astrojs/solid 💙
This **[Astro integration][astro-integration]** enables server-side rendering and client-side hydration for your [SolidJS](https://www.solidjs.com/) components.
## Installation
There are two ways to add integrations to your project. Let's try the most convenient option first!
### (experimental) `astro add` command
Astro includes a CLI tool for adding first party integrations: `astro add`. This command will:
1. (Optionally) Install all necessary dependencies and peer dependencies
2. (Also optionally) Update your `astro.config.*` file to apply this integration
To install `@astrojs/solid`, run the following from your project directory and follow the prompts:
```sh
# Using NPM
npx astro add solid
# Using Yarn
yarn astro add solid
# Using PNPM
pnpx astro add solid
```
If you run into any hiccups, [feel free to log an issue on our GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
### Install dependencies manually
First, install the `@astrojs/solid` integration like so:
```
npm install @astrojs/solid
```
Most package managers will install associated peer dependencies as well. Still, if you see a "Cannot find package 'solid-js'" (or similar) warning when you start up Astro, you'll need to install SolidJS:
```sh
npm install solid-js
```
Now, apply this integration to your `astro.config.*` file using the `integrations` property:
__astro.config.mjs__
```js
import solid from '@astrojs/solid';
export default {
// ...
integrations: [solid()],
}
```
## Getting started
To use your first SolidJS component in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:
- 📦 how framework components are loaded,
- 💧 client-side hydration options, and
- 🪆 opportunities to mix and nest frameworks together
Also check our [Astro Integration Documentation][astro-integration] for more on integrations.
[astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
[astro-ui-frameworks]: https://docs.astro.build/en/core-concepts/framework-components/#using-framework-components

65
packages/integrations/svelte/README.md Normal file
View file

@ -0,0 +1,65 @@
# @astrojs/svelte 🧡
This **[Astro integration][astro-integration]** enables server-side rendering and client-side hydration for your [Svelte](https://svelte.dev/) components.
## Installation
There are two ways to add integrations to your project. Let's try the most convenient option first!
### (experimental) `astro add` command
Astro includes a CLI tool for adding first party integrations: `astro add`. This command will:
1. (Optionally) Install all necessary dependencies and peer dependencies
2. (Also optionally) Update your `astro.config.*` file to apply this integration
To install `@astrojs/svelte`, run the following from your project directory and follow the prompts:
```sh
# Using NPM
npx astro add svelte
# Using Yarn
yarn astro add svelte
# Using PNPM
pnpx astro add svelte
```
If you run into any hiccups, [feel free to log an issue on our GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
### Install dependencies manually
First, install the `@astrojs/svelte` integration like so:
```
npm install @astrojs/svelte
```
Most package managers will install associated peer dependencies as well. Still, if you see a "Cannot find package 'svelte'" (or similar) warning when you start up Astro, you'll need to install Svelte:
```sh
npm install svelte
```
Now, apply this integration to your `astro.config.*` file using the `integrations` property:
__astro.config.mjs__
```js
import svelte from '@astrojs/svelte';
export default {
// ...
integrations: [svelte()],
}
```
## Getting started
To use your first Svelte component in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:
- 📦 how framework components are loaded,
- 💧 client-side hydration options, and
- 🪆 opportunities to mix and nest frameworks together
Also check our [Astro Integration Documentation][astro-integration] for more on integrations.
[astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
[astro-ui-frameworks]: https://docs.astro.build/en/core-concepts/framework-components/#using-framework-components

65
packages/integrations/vue/README.md Normal file
View file

@ -0,0 +1,65 @@
# @astrojs/vue 💚
This **[Astro integration][astro-integration]** enables server-side rendering and client-side hydration for your [Vue 3](https://vuejs.org/) components.
## Installation
There are two ways to add integrations to your project. Let's try the most convenient option first!
### (experimental) `astro add` command
Astro includes a CLI tool for adding first party integrations: `astro add`. This command will:
1. (Optionally) Install all necessary dependencies and peer dependencies
2. (Also optionally) Update your `astro.config.*` file to apply this integration
To install `@astrojs/vue`, run the following from your project directory and follow the prompts:
```sh
# Using NPM
npx astro add vue
# Using Yarn
yarn astro add vue
# Using PNPM
pnpx astro add vue
```
If you run into any hiccups, [feel free to log an issue on our GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
### Install dependencies manually
First, install the `@astrojs/vue` integration like so:
```
npm install @astrojs/vue
```
Most package managers will install associated peer dependencies as well. Still, if you see a "Cannot find package 'vue'" (or similar) warning when you start up Astro, you'll need to install Vue:
```sh
npm install vue
```
Now, apply this integration to your `astro.config.*` file using the `integrations` property:
__astro.config.mjs__
```js
import vue from '@astrojs/vue';
export default {
// ...
integrations: [vue()],
}
```
## Getting started
To use your first Vue component in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:
- 📦 how framework components are loaded,
- 💧 client-side hydration options, and
- 🪆 opportunities to mix and nest frameworks together
Also check our [Astro Integration Documentation][astro-integration] for more on integrations.
[astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
[astro-ui-frameworks]: https://docs.astro.build/en/core-concepts/framework-components/#using-framework-components