Add an additional widget to a widget set（向微件集添加额外微件）

Widget sets allow you to publish multiple widgets from a single code repository for code sharing and performance optimizations. This page explains how to add an additional widget to a widget set and assumes a project structure starting from our provided templates using React, Vite, and @osdk/widget.vite-plugin ↗.

A widget set can contain a maximum of 50 widgets.

The following example project structure is for a widget set containing two widgets:

repo/
├── src/
│   ├── first.tsx
│   ├── first.config.ts
│   ├── second.tsx
│   ├── second.config.ts
│   └── ...
│── first.html
│── second.html
│── vite.config.ts
└─ ...

Define an additional widget

Create a new TypeScript file to define the widget's metadata with defineConfig for type safety:

```TypeScript tab="second.config.ts" import { defineConfig } from "@osdk/widget.client";

export default defineConfig({ id: "secondWidgetId", name: "Second Widget", description: "A second widget", type: "workshop", parameters: { ... }, events: { ... }, });

Create a new TypeScript file as the entrypoint to render your widget, and provide the context for parameters and events:

```TypeScript tab="second.tsx"
import { FoundryWidget } from "@osdk/widget.client-react";
import { createRoot } from "react-dom/client";
import Second from "./second.config.js";

const root = document.getElementById("root")!;

createRoot(root).render(
  <FoundryWidget config={Second}>
    {/* Render something for the widget! */}
  </FoundryWidget>,
);

Include the additional widget in the widgets manifest

Create a new HTML file to load the entrypoint script:

```html tab="second.html"

Configure Vite to include the new HTML file during builds:

```TypeScript tab="vite.config.ts"
import foundryWidgetPlugin from "@osdk/widget.vite-plugin";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [foundryWidgetPlugin()],
  build: {
    rollupOptions: {
      input: ["./first.html", "./second.html"],
    },
  },
});

The .palantir/widgets.config.json manifest file created in the production build of the widget set should now contain information about your additional widget.

Publish an additional widget

Follow the instructions in our documentation to publish a new version of the widget set. Your additional widget will be available for use after publication. Note that you must have a first release of the additional widget before you can continue developing it.

---

中文翻译

向微件集添加额外微件

微件集(Widget set)允许您从单个代码仓库发布多个微件，以实现代码共享和性能优化。本页说明如何向微件集添加额外微件，并假设项目结构基于我们提供的模板，使用 React、Vite 和 @osdk/widget.vite-plugin ↗。

一个微件集最多可包含 50 个微件。

以下示例项目结构展示了一个包含两个微件的微件集：

repo/
├── src/
│   ├── first.tsx
│   ├── first.config.ts
│   ├── second.tsx
│   ├── second.config.ts
│   └── ...
│── first.html
│── second.html
│── vite.config.ts
└─ ...

定义额外微件

创建一个新的 TypeScript 文件，使用 defineConfig 定义微件的元数据，以获得类型安全：

```TypeScript tab="second.config.ts" import { defineConfig } from "@osdk/widget.client";

export default defineConfig({ id: "secondWidgetId", name: "Second Widget", description: "A second widget", type: "workshop", parameters: { ... }, events: { ... }, });

创建一个新的 TypeScript 文件作为渲染微件的入口点，并提供参数和事件的上下文：

```TypeScript tab="second.tsx"
import { FoundryWidget } from "@osdk/widget.client-react";
import { createRoot } from "react-dom/client";
import Second from "./second.config.js";

const root = document.getElementById("root")!;

createRoot(root).render(
  <FoundryWidget config={Second}>
    {/* 为微件渲染内容！ */}
  </FoundryWidget>,
);

在微件清单中包含额外微件

创建一个新的 HTML 文件来加载入口点脚本：

```html tab="second.html"

配置 Vite 以在构建时包含新的 HTML 文件：

```TypeScript tab="vite.config.ts"
import foundryWidgetPlugin from "@osdk/widget.vite-plugin";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [foundryWidgetPlugin()],
  build: {
    rollupOptions: {
      input: ["./first.html", "./second.html"],
    },
  },
});

在微件集的生产构建中创建的 .palantir/widgets.config.json 清单文件现在应包含有关您额外微件的信息。

发布额外微件

按照我们的文档中的说明发布微件集的新版本。发布后，您的额外微件即可使用。请注意，您必须先发布额外微件的首个版本，然后才能继续对其进行开发。