@astrojs/ solid-js

このAstroインテグレーション (EN)は、SolidJSコンポーネントのレンダリングとクライアントサイドハイドレーションを有効にします。

インストール

Astroには、公式インテグレーションのセットアップを自動化するためのastro addコマンドが含まれています。もしよろしければ、手動でインテグレーションをインストールすることもできます。

@astrojs/solid-jsをインストールするには、プロジェクトディレクトリから次のコマンドを実行し、プロンプトに従ってください。

npx astro add solid

pnpm astro add solid

yarn astro add solid

問題が発生した場合は、GitHubで報告してください。そして、以下の手動インストール手順を試してください。

手動インストール

まず、@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`

Type: boolean

追加： @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フレームワークの組み合わせ

同じプロジェクトで複数の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

過剰な設定なしでSolidのResourceとLazy Componentsをサポートするために、サーバーのみのコンポーネントとハイドレーティングコンポーネントは、自動的にトップレベルのSuspense boundaryでラップされ、renderToStringAsync関数を使用してサーバーでレンダリングされます。したがって、非同期コンポーネントの周りにトップレベルのSuspense boundaryを追加する必要はありません。

たとえば、SolidのcreateResourceを使用して、サーバーで非同期のリモートデータをフェッチできます。リモートデータは、Astroからの最初のサーバーでレンダリングされたHTMLに含まれます。

// CharacterName.tsx
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>
    </>
  );
}