Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions src/content/docs/en/guides/upgrade-to/v6.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,33 @@ const result = await emitImageMetadata(imageId);

<ReadMore>Read more about [`emitImageMetadata()`](/en/reference/image-service-reference/#emitimagemetadata).</ReadMore>

### Removed: `Astro.glob()`

<SourcePR number="14421" title="feat!: remove Astro.glob"/>

In Astro 5.0, `Astro.glob()` was deprecated in favor of using `getCollection()` to query your collections, and `import.meta.glob()` to query other source files in your project.

Astro 6.0 removes `Astro.glob()` entirely. Update to `import.meta.glob()` to keep your current behavior.

#### What should I do?

Replace all use of `Astro.glob()` with `import.meta.glob()`. Note that `import.meta.glob()` no longer returns a `Promise`, so you may have to update your code accordingly. You should not require any updates to your [glob patterns](/en/guides/imports/#glob-patterns).

```astro title="src/pages/blog.astro" del={2} ins={3}
---
const posts = await Astro.glob('./posts/*.md');
const posts = Object.values(import.meta.glob('./posts/*.md', { eager: true }));
---

{posts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
```

Where appropriate, consider using [content collections](/en/guides/content-collections/) to organize your content, which has its own newer, more performant querying functions.

You may also wish to consider using glob packages from NPM, such as [`fast-glob`](https://www.npmjs.com/package/fast-glob).

<ReadMore>Learn more about [importing files with `import.meta.glob`](/en/guides/imports/#importmetaglob).</ReadMore>

## Changed Defaults

Some default behavior has changed in Astro v5.0 and your project code may need updating to account for these changes.
Expand Down
115 changes: 0 additions & 115 deletions src/content/docs/en/reference/api-reference.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -1048,118 +1048,3 @@ Loads a session by ID. In normal use, a session is loaded automatically from the
</TabItem>

</Tabs>


### Deprecated object properties

#### `Astro.glob()`

:::caution[Deprecated in v5.0]
Use [Vite's `import.meta.glob`](https://vite.dev/guide/features.html#glob-import) to query project files.

`Astro.glob('../pages/post/*.md')` can be replaced with:

`Object.values(import.meta.glob('../pages/post/*.md', { eager: true }));`

See the [imports guide](/en/guides/imports/#importmetaglob) for more information and usage.
:::

`Astro.glob()` is a way to load many local files into your static site setup.

```astro
---
// src/components/my-component.astro
const posts = await Astro.glob('../pages/post/*.md'); // returns an array of posts that live at ./src/pages/post/*.md
---

<div>
{posts.slice(0, 3).map((post) => (
<article>
<h2>{post.frontmatter.title}</h2>
<p>{post.frontmatter.description}</p>
<a href={post.url}>Read more</a>
</article>
))}
</div>
```

`.glob()` only takes one parameter: a relative URL glob of which local files you'd like to import. It’s asynchronous and returns an array of the exports from matching files.

`.glob()` can't take variables or strings that interpolate them, as they aren't statically analyzable. (See [the imports guide](/en/guides/imports/#supported-values) for a workaround.) This is because `Astro.glob()` is a wrapper of Vite's [`import.meta.glob()`](https://vite.dev/guide/features.html#glob-import).

:::note
You can also use `import.meta.glob()` itself in your Astro project. You may want to do this when:
- You need this feature in a file that isn't `.astro`, like an API route. `Astro.glob()` is only available in `.astro` files, while `import.meta.glob()` is available anywhere in the project.
- You don't want to load each file immediately. `import.meta.glob()` can return functions that import the file content, rather than returning the content itself. Note that this import includes all styles and scripts for any imported files. These will be bundled and added to the page whether or not a file is actually used, as this is decided by static analysis, not at runtime.
- You want access to each file's path. `import.meta.glob()` returns a map of a file's path to its content, while `Astro.glob()` returns a list of content.
- You want to pass multiple patterns; for example, you want to add a "negative pattern" that filters out certain files. `import.meta.glob()` can optionally take an array of glob strings, rather than a single string.

Read more in the [Vite documentation](https://vite.dev/guide/features.html#glob-import).
:::

##### Markdown Files

Markdown files loaded with `Astro.glob()` return the following `MarkdownInstance` interface:

```ts
export interface MarkdownInstance<T extends Record<string, any>> {
/* Any data specified in this file's YAML/TOML frontmatter */
frontmatter: T;
/* The absolute file path of this file */
file: string;
/* The rendered path of this file */
url: string | undefined;
/* Astro Component that renders the contents of this file */
Content: AstroComponentFactory;
/** (Markdown only) Raw Markdown file content, excluding layout HTML and YAML/TOML frontmatter */
rawContent(): string;
/** (Markdown only) Markdown file compiled to HTML, excluding layout HTML */
compiledContent(): string;
/* Function that returns an array of the h1...h6 elements in this file */
getHeadings(): Promise<{ depth: number; slug: string; text: string }[]>;
default: AstroComponentFactory;
}
```

You can optionally provide a type for the `frontmatter` variable using a TypeScript generic.

```astro
---
interface Frontmatter {
title: string;
description?: string;
}
const posts = await Astro.glob<Frontmatter>('../pages/post/*.md');
---

<ul>
{posts.map(post => <li>{post.frontmatter.title}</li>)}
</ul>
```

##### Astro Files

Astro files have the following interface:

```ts
export interface AstroInstance {
/* The file path of this file */
file: string;
/* The URL for this file (if it is in the pages directory) */
url: string | undefined;
default: AstroComponentFactory;
}
```

##### Other Files

Other files may have various different interfaces, but `Astro.glob()` accepts a TypeScript generic if you know exactly what an unrecognized file type contains.

```ts
---
interface CustomDataFile {
default: Record<string, any>;
}
const data = await Astro.glob<CustomDataFile>('../data/**/*.js');
---
```
5 changes: 0 additions & 5 deletions src/content/docs/en/reference/errors/astro-glob-no-match.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,3 @@ import DontEditWarning from '~/components/DontEditWarning.astro'

## What went wrong?
`Astro.glob()` did not return any matching files. There might be a typo in the glob pattern.

**See Also:**
- [Astro.glob](/en/reference/api-reference/#astroglob)


Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,3 @@ import DontEditWarning from '~/components/DontEditWarning.astro'

## What went wrong?
`Astro.glob()` can only be used in `.astro` files. You can use [`import.meta.glob()`](https://vite.dev/guide/features.html#glob-import) instead to achieve the same result.

**See Also:**
- [Astro.glob](/en/reference/api-reference/#astroglob)


2 changes: 1 addition & 1 deletion src/content/docs/it/guides/upgrade-to/v2.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -358,7 +358,7 @@ Astro v2.0 rimuove questa opzione completamente. L'utilizzo di `Astro.fetchConte

#### Cosa devo fare?

Usa [`Astro.glob()`](/it/reference/api-reference/#astroglob) per recuperare i file di Markdown, oppure passa alla funzionalità [Collezione di Contenuti](/it/guides/content-collections/).
Usa `Astro.glob()` per recuperare i file di Markdown, oppure passa alla funzionalità [Collezione di Contenuti](/it/guides/content-collections/).

```astro
---
Expand Down
59 changes: 0 additions & 59 deletions src/content/docs/ja/guides/imports.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -197,65 +197,6 @@ import logoUrl from '@assets/logo.png?url';

これらのエイリアスは、[VS Code](https://code.visualstudio.com/docs/languages/jsconfig)や他のエディタにも自動的に統合されます。

## `Astro.glob()`

[`Astro.glob()`](/ja/reference/api-reference/#astroglob)は、多数のファイルを一度にインポートするための方法です。

`Astro.glob()`は、インポートしたいローカルファイルと一致する相対[globパターン](/ja/guides/imports/#globパターン)を1つのパラメータとして受け取るだけです。これは非同期で、マッチした各ファイルのエクスポートを配列で返します。

```astro title="src/components/my-component.astro"
---
// `./src/pages/post/`の`.md`で終わるすべてのファイルをインポート
const posts = await Astro.glob('../pages/post/*.md');
---
<!-- ブログ投稿の最初の5つの<article>をレンダリング -->
<div>
{posts.slice(0, 4).map((post) => (
<article>
<h2>{post.frontmatter.title}</h2>
<p>{post.frontmatter.description}</p>
<a href={post.url}>もっと読む</a>
</article>
))}
</div>
```

`Astro.glob`を使用してインポートされたAstroコンポーネントは、[`AstroInstance`](/ja/reference/api-reference/#astro-files)型です。各コンポーネントのインスタンスは、その`default`プロパティを使用してレンダリングできます。

```astro title="src/pages/component-library.astro" {8}
---
// `./src/components/`の`.astro`で終わるすべてのファイルをインポート
const components = await Astro.glob('../components/*.astro');
---
<!-- すべてのコンポーネントを表示 -->
{components.map((component) => (
<div>
<component.default size={24} />
</div>
))}
```

### globパターン

globパターンは、特殊なワイルドカード文字をサポートするファイルパスです。プロジェクト内の複数のファイルを一度に参照する場合に使用します。

たとえば、globパターン`./pages/**/*.{md,mdx}`は、`pages`サブディレクトリで始まり、そのサブディレクトリをすべて調べ(`/**`)、 ファイル名(`/*`)が`.md`または`.mdx`で終わる(`.{md,mdx}`)ファイルにマッチします。

#### Astroのglobパターン

`Astro.glob()`で使用する場合、globパターンは文字列リテラルである必要があり、変数を含むことはできません。回避策については、[トラブルシューティングガイド](/ja/guides/troubleshooting/#astroglob---no-matches-found一致するものはありません)を参照してください。

また、グロブパターンは、以下のいずれかで始まる必要があります。
- `./`(カレントディレクトリで起動する)
- `../`(親ディレクトリから開始する場合)
- `/`(プロジェクトのルートから開始する場合)

[globパターンの構文について、詳しくはこちらをご覧ください](https://github.com/mrmlnc/fast-glob#pattern-syntax)。

#### `Astro.glob()`と`getCollection()`

[コンテンツコレクション](/ja/guides/content-collections/)は、`Astro.glob()`の代わりに複数のファイルを読み込むための[`getCollection()` API](/ja/reference/modules/astro-content/#getcollection)を提供します。コンテンツファイル(Markdown、MDX、Markdocなど)が`src/content/`ディレクトリ内のコレクションに配置されている場合、`getCollection()`を使用して[コレクションのクエリ](/ja/guides/content-collections/#コレクションのクエリ)を行い、コンテンツのエントリーを返します。

## WASM

```js
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/ja/guides/integrations-guide/netlify.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -307,7 +307,7 @@ export default defineConfig({

#### globパターンの使用

`includeFiles`と`excludeFiles`の両方で、複数のファイルを照合するための[globパターン](/ja/guides/imports/#globパターン)がサポートされています
`includeFiles`と`excludeFiles`の両方で、複数のファイルを照合するためのglobパターンがサポートされています

```js title="astro.config.mjs" ins={7, 10-11}
import { defineConfig } from 'astro/config';
Expand Down
4 changes: 2 additions & 2 deletions src/content/docs/ja/guides/markdown-content.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ const props = Astro.props;

MarkdownファイルやMDXファイルをAstroファイルに直接インポートできます。これにより、そのMarkdownコンテンツや、AstroのJSXライクな式で使用できるフロントマターの値などのプロパティにアクセスできます。

`import`文で特定の1ページを、[`Astro.glob()`](/ja/guides/imports/#astroglob)で複数のページをインポートできます。
`import`文で特定の1ページを、`Astro.glob()`で複数のページをインポートできます。

```astro title="src/pages/index.astro"
---
Expand Down Expand Up @@ -352,7 +352,7 @@ MDXファイルでは、`export`文を使用してデータをエクスポート
export const title = 'はじめてのMDXの投稿'
```

この`title`は`import`や[`Astro.glob()`](/ja/reference/api-reference/#astroglob)文からアクセスできます。
この`title`は`import`や`Astro.glob()`文からアクセスできます。

```astro
---
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -259,7 +259,7 @@ export default Component;
3. import文を含む必要なJavaScriptはすべて[`コードフェンス`(`---`)](/ja/basics/astro-components/#コンポーネントスクリプト)内へ移動します。※[条件付きレンダリング](/ja/reference/astro-syntax/#動的html)に使うJavaScriptはテンプレート内に直接記述できます。
4. 追加プロパティは[Astro.props](/ja/reference/api-reference/#props)で取得します。
5. インポートしているコンポーネントを`.astro`へ変換するか検討します。現在のままReactコンポーネントとして残すこともできますが、インタラクティブ性が不要な場合は将来的に`.astro`へ書き換えると軽量化できます。
6. `useEffect()`で行っていたデータ取得は、import文や[`import.meta.glob()`](/ja/guides/imports/#globパターン)でローカルファイルを読み込むか、`fetch()`で外部データを取得する方法へ置き換えます。
6. `useEffect()`で行っていたデータ取得は、import文や`import.meta.glob()`でローカルファイルを読み込むか、`fetch()`で外部データを取得する方法へ置き換えます。

### テストの移行

Expand Down Expand Up @@ -328,7 +328,7 @@ const randomUser = data.results[0];
---
```

- `import.meta.glob()`によるローカルファイル取得: [/ja/guides/imports/#globパターン](/ja/guides/imports/#globパターン)
- `import.meta.glob()`によるローカルファイル取得
- Collections APIのクエリ: [/ja/guides/content-collections/#コレクションのクエリ](/ja/guides/content-collections/#コレクションのクエリ)
- リモートデータのフェッチ: [/ja/guides/data-fetching/](/ja/guides/data-fetching/)

Expand Down
4 changes: 2 additions & 2 deletions src/content/docs/ja/guides/migrate-to-astro/from-gridsome.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ GridsomeサイトをAstroで再構築する際には、次のような違いに

- GridsomeはVueベースのシングルページアプリ(SPA)ですが、Astroは[`.astro`コンポーネント](/ja/basics/astro-components/)を使ったマルチページアプリ(MPA)です。AstroではVueの他、React、Svelte、Solidなども併用可能です。
- GridsomeはSPAとして`vue-router`と`vue-meta`を使ってルーティングや`<head>`の管理を行いますが、Astroでは個別HTMLページと[レイアウトコンポーネント](/ja/basics/layouts/)内で`<head>`を直接管理します。
- [ローカルファイルのデータ取得](/ja/guides/imports/): GridsomeはGraphQLでファイルをクエリしますが、AstroではESMインポートと[`import.meta.glob()`](/ja/guides/imports/#globパターン)を使用します。GraphQLを使いたい場合は手動で追加できますが、標準では含まれません。
- [ローカルファイルのデータ取得](/ja/guides/imports/): GridsomeはGraphQLでファイルをクエリしますが、AstroではESMインポートと`import.meta.glob()`を使用します。GraphQLを使いたい場合は手動で追加できますが、標準では含まれません。

## GridsomeサイトをAstroに変換する

Expand Down Expand Up @@ -59,7 +59,7 @@ GridsomeブログをAstroへ移行するには、公式ブログテーマスタ

Gridsomeのプロジェクト構成はAstroに似ているため、いくつかのファイルは新しいAstroプロジェクトにそのままコピーできるかもしれません。ただし完全には一致しないため、[Astroのプロジェクト構成](/ja/basics/project-structure/)を事前に確認するのがおすすめです。

また、Gridsomeとは異なり、Astroではファイルの読み込みに[`import.meta.glob()`](/ja/guides/imports/#globパターン)を使用するため、ローカルファイルの操作方法も併せて確認してください。
また、Gridsomeとは異なり、Astroではファイルの読み込みに`import.meta.glob()`を使用するため、ローカルファイルの操作方法も併せて確認してください。

ポートフォリオサイトやドキュメントサイトなど別タイプのサイトに移行したい場合は、[astro.new](https://astro.new)で他の公式スターターテンプレートを確認してください。GitHubリポジトリへのリンクや、IDX・StackBlitz・CodeSandbox・Gitpodで開くためのワンクリックリンクが用意されています。

Expand Down
4 changes: 2 additions & 2 deletions src/content/docs/ja/guides/upgrade-to/v2.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -356,8 +356,8 @@ Astro v2.0では、このオプションは完全に削除されています。

#### どうすればいいの?

{/* TODO: Set anchor link from #その他のアセット to #astroglob */}
[`Astro.glob()`](/ja/guides/imports/#その他のアセット)を使ってローカルのMarkdownファイルを取得したり、[コンテンツコレクション](/ja/guides/content-collections/)に変換したりできます。

`Astro.glob()`を使ってローカルのMarkdownファイルを取得したり、[コンテンツコレクション](/ja/guides/content-collections/)に変換したりできます。

```astro
// src/pages/index.astro
Expand Down
4 changes: 2 additions & 2 deletions src/content/docs/ja/recipes/rss.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export function GET(context) {

`items`フィールドは、RSSフィードのオブジェクトのリストを受け入れます。各オブジェクトには、`link`、`title`、`pubDate`の3つの必須フィールドがあります。`description`(短い抜粋)、`content`(記事の全文)、ブログ記事の他のフロントマタープロパティなど追加のデータのための`customData`フィールド、という3つの値も任意で含められます。

コンテンツコレクションのスキーマからや、`src/pages/`内のブログ記事に対して[globインポート](/ja/guides/imports/#astroglob)を利用することで、この配列を生成できます。
コンテンツコレクションのスキーマからや、`src/pages/`内のブログ記事に対してglobインポートを利用することで、この配列を生成できます。


### コンテンツコレクションの使用
Expand Down Expand Up @@ -119,7 +119,7 @@ export const collections = { blog };

<Since v="2.1.0" pkg="@astrojs/rss" />

`src/pages/`内のドキュメントからRSSフィードを作成するには、`pagesGlobToRssItems()`ヘルパーを利用します。これは[`import.meta.glob`](https://vite.dev/guide/features.html#glob-import)の結果を入力とし、有効なRSSフィードアイテムの配列を出力します(含めるページを指定するためには、[globパターンの書き方について](/ja/guides/imports/#globパターン)を確認してください)。
`src/pages/`内のドキュメントからRSSフィードを作成するには、`pagesGlobToRssItems()`ヘルパーを利用します。これは[`import.meta.glob`](https://vite.dev/guide/features.html#glob-import)の結果を入力とし、有効なRSSフィードアイテムの配列を出力します(含めるページを指定するためには、globパターンの書き方についてを確認してください)。

:::caution
この関数は、必要なフィードプロパティが各ドキュメントのフロントマターに存在することを前提としていますが、その検証はおこないません。エラーが発生した場合は、各ページのフロントマターを手動で確認してください。
Expand Down
Loading
Loading