@astrojs/ solid-js
このAstroインテグレーションは、SolidJSコンポーネントのレンダリングとクライアントサイドハイドレーションを有効にします。
インストール
Section titled “インストール”Astroには、公式インテグレーションのセットアップを自動化するためのastro add
コマンドが含まれています。もしよろしければ、手動でインテグレーションをインストールすることもできます。
@astrojs/solid-js
をインストールするには、プロジェクトディレクトリから次のコマンドを実行し、プロンプトに従ってください。
npx astro add solid
pnpm astro add solid
yarn astro add solid
問題が発生した場合は、GitHubで報告してください。そして、以下の手動インストール手順を試してください。
手動インストール
Section titled “手動インストール”まず、@astrojs/solid-js
パッケージをインストールします。
npm install @astrojs/solid-js
pnpm add @astrojs/solid-js
yarn add @astrojs/solid-js
ほとんどのパッケージマネージャーは、関連するピア依存関係もインストールします。Astroの起動時にCannot find package 'solid-js'
(または同様の)警告が表示される場合は、SolidJSをインストールする必要があります。
npm install solid-js
pnpm add solid-js
yarn add solid-js
次に、integrations
プロパティを使用して、インテグレーションをastro.config.*
ファイルに適用します。
import { defineConfig } from 'astro/config';import solidJs from '@astrojs/solid-js';
export default defineConfig({ // ... integrations: [solidJs()],});
そして、次のコードをtsconfig.json
ファイルに追加します。
{ "extends": "astro/tsconfigs/strict", "include": [".astro/types.d.ts", "**/*"], "exclude": ["dist"], "compilerOptions": { "jsx": "preserve", "jsxImportSource": "solid-js" }}
Astroで最初のSolidJSコンポーネントを使用するには、UIフレームワークのドキュメントにアクセスしてください。以下について探求します。
- 📦 フレームワークコンポーネントがどのように読み込まれるか
- 💧 クライアントサイドハイドレーションのオプション
- 🤝 フレームワークを混在させてネストする機会
devtools
Section titled “devtools”
追加:
@astrojs/solid-js@4.2.0
solid()
インテグレーション設定にdevtools: true
を持つオブジェクトを渡し、プロジェクトの依存関係にsolid-devtools
を追加することで、開発中にSolid DevToolsを有効にできます。
npm install solid-devtools
pnpm add solid-devtools
yarn add solid-devtools
import { defineConfig } from 'astro/config';import solid from '@astrojs/solid-js';
export default defineConfig({ // ... integrations: [solid({ devtools: true })],});
複数のJSXフレームワークの組み合わせ
Section titled “複数のJSXフレームワークの組み合わせ”同じプロジェクトで複数のJSXフレームワーク(React、Preact、Solid)を使用している場合、Astroは各コンポーネントにどのJSXフレームワーク固有の変換を使用するかを決定する必要があります。プロジェクトにJSXフレームワークインテグレーションを1つしか追加していない場合は、追加の設定は必要ありません。
include
(必須)およびexclude
(オプション)設定オプションを使用して、どのファイルがどのフレームワークに属するかを指定します。使用している各フレームワークのinclude
にファイルおよび/またはフォルダーの配列を指定します。ワイルドカードを使用して、複数のファイルパスを含めることができます。
インクルードの指定を容易にするために、共通のフレームワークコンポーネントを同じフォルダー(例:/components/react/
および/components/solid/
)に配置することをお勧めしますが、これは必須ではありません。
import { defineConfig } from 'astro/config';import preact from '@astrojs/preact';import react from '@astrojs/react';import svelte from '@astrojs/svelte';import vue from '@astrojs/vue';import solid from '@astrojs/solid-js';
export default defineConfig({ // あらゆる種類のコンポーネントをサポートするために多くのフレームワークを有効にします。 // 単一のJSXフレームワークのみを使用している場合は、`include`は必要ありません! integrations: [ preact({ include: ['**/preact/*'], }), react({ include: ['**/react/*'], }), solid({ include: ['**/solid/*', '**/node_modules/@suid/material/**'], }), ],});
SolidJSコンポーネントは、他のUIフレームワークコンポーネントと同じように使用します。
Suspense Boundaries
Section titled “Suspense Boundaries”過剰な設定なしでSolidのResourceとLazy Componentsをサポートするために、サーバーのみのコンポーネントとハイドレーティングコンポーネントは、自動的にトップレベルのSuspense boundaryでラップされ、renderToStringAsync
関数を使用してサーバーでレンダリングされます。したがって、非同期コンポーネントの周りにトップレベルのSuspense boundaryを追加する必要はありません。
たとえば、SolidのcreateResource
を使用して、サーバーで非同期のリモートデータをフェッチできます。リモートデータは、Astroからの最初のサーバーでレンダリングされたHTMLに含まれます。
function CharacterName() { const [name] = createResource(() => fetch('https://swapi.dev/api/people/1') .then((result) => result.json()) .then((data) => data.name) );
return ( <> <h2>Name:</h2> {/* Luke Skywalker */} <div>{name()}</div> </> );}
同様に、SolidのLazy Componentsも解決され、そのHTMLは最初のサーバーでレンダリングされたページに含まれます。
ハイドレートしないclient:only
コンポーネントは、自動的にSuspense boundaryでラップされません。
好みに応じて、Suspense boundaryを自由に追加してください。