@astrojs/ solid-js

这个 Astro 集成 可以为你的 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

添加于： @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 框架集成，则不需要额外配置。

使用 include（必需）和 exclude（可选）配置选项来指定哪些文件属于哪个框架。为每个你正在使用的框架提供一个包含文件和/或文件夹的数组。可以使用通配符来包含多个文件路径。

我们建议将通用框架组件放在同一个文件夹中（例如 /components/react/ 和 /components/solid/），以便更容易地指定你的 include，但这不是必需的：

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({
  // Enable many frameworks to support all different kinds of components.
  // No `include` is needed if you are only using a single JSX framework!
  integrations: [
    preact({
      include: ['**/preact/*'],
    }),
    react({
      include: ['**/react/*'],
    }),
    solid({
      include: ['**/solid/*', '**/node_modules/@suid/material/**'],
    }),
  ],
});

用法

像使用任何UI 框架组件一样使用 SolidJS 组件。

Suspense 边界

为了支持 Solid Resources 和 Lazy Components 而无需过多配置，仅服务器和注入的组件会自动被包裹在顶层的 Suspense 边界内，并使用 renderToStringAsync 函数在服务器上渲染。因此，你不需要在异步组件周围添加顶层的 Suspense 边界。

例如，你可以使用 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>
    </>
  );
}