Skip to content

Commit

Permalink
[docs] minimal integration READMEs (#9479)
Browse files Browse the repository at this point in the history 
Co-authored-by: Emanuele Stoppa <602478+ematipico@users.noreply.github.com>
Co-authored-by: Elian <15145918+ElianCodes@users.noreply.github.com>
Co-authored-by: Alexander Niebuhr <45965090+alexanderniebuhr@users.noreply.github.com>
  • Loading branch information
@sarah11918 @ematipico
@ElianCodes @alexanderniebuhr
4 people committed Dec 21, 2023
1 parent f9c4bbf commit 1baf0b0
Show file tree
Hide file tree
Showing 15 changed files with 324 additions and 2,944 deletions.
18 changes: 18 additions & 0 deletions .changeset/soft-sheep-glow.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
---
'@astrojs/alpinejs': patch
'@astrojs/lit': patch
'@astrojs/markdoc': patch
'@astrojs/mdx': patch
'@astrojs/node': patch
'@astrojs/partytown': patch
'@astrojs/preact': patch
'@astrojs/react': patch
'@astrojs/sitemap': patch
'@astrojs/solid-js': patch
'@astrojs/svelte': patch
'@astrojs/tailwind': patch
'@astrojs/vercel': patch
'@astrojs/vue': patch
---

Updates README
116 changes: 22 additions & 94 deletions packages/integrations/alpinejs/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,109 +2,37 @@

This **[Astro integration][astro-integration]** adds [Alpine.js](https://alpinejs.dev/) to your project so that you can use Alpine.js anywhere on your page.

- <strong>[Installation](#installation)</strong>
- <strong>[Usage](#usage)</strong>
- <strong>[Configuration](#configuration)</strong>
- <strong>[Examples](#examples)</strong>
- <strong>[Troubleshooting](#troubleshooting)</strong>
- <strong>[Contributing](#contributing)</strong>
- <strong>[Changelog](#changelog)</strong>
## Documentation

## Installation
Read the [`@astrojs/alpinejs` docs][docs]

### Quick Install
## Support

The `astro add` command-line tool automates the installation for you. Run one of the following commands in a new terminal window. (If you aren't sure which package manager you're using, run the first command.) Then, follow the prompts, and type "y" in the terminal (meaning "yes") for each one.
- Get help in the [Astro Discord][discord]. Post questions in our `#support` forum, or visit our dedicated `#dev` channel to discuss current development and more!

```sh
# Using NPM
npx astro add alpinejs
# Using Yarn
yarn astro add alpinejs
# Using PNPM
pnpm astro add alpinejs
```
- Check our [Astro Integration Documentation][astro-integration] for more on integrations.

If you run into any issues, [feel free to report them to us on GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
- Submit bug reports and feature requests as [GitHub issues][issues].

### Manual Install

First, install the `@astrojs/alpinejs` package using your package manager. If you're using npm or aren't sure, run this in the terminal:

```sh
npm install @astrojs/alpinejs
```

Most package managers will install associated peer dependencies as well. However, if you see a "Cannot find package 'alpinejs'" (or similar) warning when you start up Astro, you'll need to manually install Alpine.js yourself:

```sh
npm install alpinejs @types/alpinejs
```

Then, apply this integration to your `astro.config.*` file using the `integrations` property:

```diff lang="js" "alpine()"
// astro.config.mjs
import { defineConfig } from 'astro/config';
+ import alpine from '@astrojs/alpinejs';

export default defineConfig({
// ...
integrations: [alpine()],
// ^^^^^^^^
});
```

## Usage

Once the integration is installed, you can use [Alpine.js](https://alpinejs.dev/) directives and syntax inside any Astro component. The Alpine.js script is automatically added and enabled on every page of your website.

Check our [Astro Integration Documentation][astro-integration] for more on integrations.

## Limitations

The Alpine.js integration does not give you control over how the script is loaded or initialized. If you require this control, consider [installing and using Alpine.js manually](https://alpinejs.dev/essentials/installation). Astro supports all officially documented Alpine.js manual setup instructions, using `<script>` tags inside of an Astro component.

**It is not currently possible to [extend Alpine.js](https://alpinejs.dev/advanced/extending) when using this component.** If you need this feature, consider following [the manual Alpine.js setup](https://alpinejs.dev/essentials/installation) instead using an Astro script tag:

```astro
---
// src/pages/index.astro
---
<!-- Example: Load AlpineJS on a single page. -->
<script>
import Alpine from 'alpinejs';
// Optional: Extend Alpine.js
// Alpine.directive('foo', ...)
window.Alpine = Alpine;
Alpine.start();
</script>
```

## Configuration

The Alpine.js integration does not support any custom configuration at this time.

## Examples

- The [Astro Alpine.js example](https://github.com/withastro/astro/tree/latest/examples/framework-alpine) shows how to use Alpine.js in an Astro project.

## Troubleshooting

For help, check out the `#support` channel on [Discord](https://astro.build/chat). Our friendly Support Squad members are here to help!
## Contributing

You can also check our [Astro Integration Documentation][astro-integration] for more on integrations.
This package is maintained by Astro's Core team. You're welcome to submit an issue or PR! These links will help you get started:

## Contributing
- [Contributor Manual][contributing]
- [Code of Conduct][coc]
- [Community Guide][community]

This package is maintained by Astro's Core team. You're welcome to submit an issue or PR!
## License

## Changelog
MIT

See [CHANGELOG.md](CHANGELOG.md) for a history of changes to this integration.
Copyright (c) 2023–present [Astro][astro]

[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
[astro]: https://astro.build/
[docs]: https://docs.astro.build/en/guides/integrations-guide/alpinejs/
[contributing]: https://github.com/withastro/astro/blob/main/CONTRIBUTING.md
[coc]: https://github.com/withastro/.github/blob/main/CODE_OF_CONDUCT.md
[community]: https://github.com/withastro/.github/blob/main/COMMUNITY_GUIDE.md
[discord]: https://astro.build/chat/
[issues]: https://github.com/withastro/astro/issues
[astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
163 changes: 22 additions & 141 deletions packages/integrations/lit/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,156 +2,37 @@

This **[Astro integration][astro-integration]** enables server-side rendering and client-side hydration for your [Lit](https://lit.dev/) custom elements.

## Installation
## Documentation

There are two ways to add integrations to your project. Let's try the most convenient option first!
Read the [`@astrojs/lit` docs][docs]

### `astro add` command
## Support

Astro includes a CLI tool for adding first party integrations: `astro add`. This command will:
- Get help in the [Astro Discord][discord]. Post questions in our `#support` forum, or visit our dedicated `#dev` channel to discuss current development and more!

1. (Optionally) Install all necessary dependencies and peer dependencies
2. (Also optionally) Update your `astro.config.*` file to apply this integration
- Check our [Astro Integration Documentation][astro-integration] for more on integrations.

To install `@astrojs/lit`, run the following from your project directory and follow the prompts:
- Submit bug reports and feature requests as [GitHub issues][issues].

```sh
# Using NPM
npx astro add lit
# Using Yarn
yarn astro add lit
# Using PNPM
pnpm astro add lit
```

If you run into any issues, [feel free to report them to us on 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:

```sh
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:

```diff lang="js" "lit()"
// astro.config.mjs
import { defineConfig } from 'astro/config';
+ import lit from '@astrojs/lit';

export default defineConfig({
// ...
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

Writing and importing a Lit component in Astro looks like this:

```js
// src/components/my-element.js
import { LitElement, html } from 'lit';

export class MyElement extends LitElement {
render() {
return html` <p>Hello world! From my-element</p> `;
}
}

customElements.define('my-element', MyElement);
```

Now, the component is ready to be imported via the Astro frontmatter:

```astro
---
// src/pages/index.astro
import { MyElement } from '../components/my-element.js';
---
<MyElement />
```

> 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 { MyElement } from '../components/my-element.js';
---
<MyElement 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.

## Troubleshooting

For help, check out the `#support` channel on [Discord](https://astro.build/chat). Our friendly Support Squad members are here to help!

You can also check our [Astro Integration Documentation][astro-integration] for more on integrations.

Common issues are listed below:

### Browser globals

The Lit integration's SSR works by adding a few browser global properties to the global environment. Some of the properties it adds includes `window`, `document`, and `location`.

These globals _can_ interfere with other libraries that might use the existence of these variables to detect that they are running in the browser, when they are actually running in the server. This can cause bugs with these libraries.

Because of this, the Lit integration might not be compatible with these types of libraries. One thing that can help is changing the order of integrations when Lit is interfering with other integrations:

```diff lang="js"
// astro.config.mjs
import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';
import lit from '@astrojs/lit';

export default defineConfig({
- integrations: [vue(), lit()]
+ integrations: [lit(), vue()]
});
```

The correct order might be different depending on the underlying cause of the problem. This is not guaranteed to fix every issue however, and some libraries cannot be used if you are using the Lit integration because of this.

### Strict package managers

When using a [strict package manager](https://pnpm.io/pnpm-vs-npm#npms-flat-tree) like `pnpm`, you may get an error such as `ReferenceError: module is not defined` when running your site. To fix this, hoist Lit dependencies with an `.npmrc` file:
## Contributing

```ini
# .npmrc
public-hoist-pattern[]=*lit*
```
This package is maintained by Astro's Core team. You're welcome to submit an issue or PR! These links will help you get started:

### Limitations
- [Contributor Manual][contributing]
- [Code of Conduct][coc]
- [Community Guide][community]

The Lit integration is powered by `@lit-labs/ssr` which has some limitations. See their [limitations documentation](https://www.npmjs.com/package/@lit-labs/ssr#user-content-notes-and-limitations) to learn more.
## License

## Contributing
MIT

This package is maintained by Astro's Core team. You're welcome to submit an issue or PR!
Copyright (c) 2023–present [Astro][astro]

[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
[astro]: https://astro.build/
[docs]: https://docs.astro.build/en/guides/integrations-guide/lit/
[contributing]: https://github.com/withastro/astro/blob/main/CONTRIBUTING.md
[coc]: https://github.com/withastro/.github/blob/main/CODE_OF_CONDUCT.md
[community]: https://github.com/withastro/.github/blob/main/COMMUNITY_GUIDE.md
[discord]: https://astro.build/chat/
[issues]: https://github.com/withastro/astro/issues
[astro-integration]: https://docs.astro.build/en/guides/integrations-guide/

0 comments on commit 1baf0b0

Please sign in to comment.