위젯 집합에 두 번째 위젯 추가

한 저장소에서 코드와 자산을 공유하는 위젯을 함께 게시할 수 있습니다. 위젯 집합 하나의 최대 위젯 수는 50개입니다. React, Vite와 @osdk/widget.vite-plugin을 사용하는 생성 템플릿을 기준으로 설명합니다.

관련 파일 배치는 다음과 같습니다.

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

메타데이터와 진입점

src/second.config.ts에 고유 ID와 메타데이터를 정의합니다.

import { defineConfig } from "@osdk/widget.client";

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

src/second.tsx는 FoundryWidget으로 감싸 매개변수와 이벤트 문맥을 제공합니다. 다음은 두 번째 위젯을 식별하는 내용을 렌더링하는 예입니다.

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

createRoot(document.getElementById("root")!).render(
  <FoundryWidget config={Second}>
    <section>
      <h1>Second Widget</h1>
      <p>This widget is published from the shared widget set.</p>
    </section>
  </FoundryWidget>,
);

HTML과 빌드 입력

프로젝트 루트의 second.html에 렌더링할 root와 진입점 스크립트를 넣습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Second Widget</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/second.tsx"></script>
  </body>
</html>

Vite의 빌드 입력에 두 HTML을 포함합니다. 기존 프로젝트의 다른 plugin과 설정은 유지합니다.

import foundryWidgetPlugin from "@osdk/widget.vite-plugin";
import { defineConfig } from "vite";

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

npm run build로 만든 출력의 .palantir/widgets.config.json에 추가 위젯이 포함됩니다.

미리보기와 게시

게시 전에는 개발 모드로 playground와 VS Code에서 미리 볼 수 있습니다. Workshop에서 새 위젯을 선택하려면 집합의 새 버전을 게시해야 합니다. 이 위젯의 첫 게시 뒤에는 Workshop에서도 미게시 변경을 개발 모드로 볼 수 있습니다.