뮤블 플러그인

뮤블 플러그인 시스템은 수많은 기능을 독립적으로 분리하여 재사용성, 안정성, 개발 편의성을 높이기 위해 설계되었습니다. 주로 클라이언트의 기능을 플러그인으로 분리하여 사용하며, 백엔드의 기능도 이론상 플러그인으로 분리하여 사용할 수 있습니다. 이 기능은 사용자가 직접 플러그인을 개발하여 뮤블의 기능을 확장하는 용도로도 사용됩니다.

플러그인 생성하기

클라이언트에서 플러그인 사용

플러그인 API 사용

React 환경 내에서 플러그인의 API를 사용하는 경우에는 @muvel/core에서 제공하는 usePluginApi hook을 사용합니다.

import { examplePluginId } from "@muvel-plugins/example"
import { usePluginApi } from "@muvel/core"
 
const MyComponent = () => {
  const exampleApi = usePluginApi(examplePluginId)
  const exampleValue = exampleApi.useExampleHook()
 
  return null
}

• usePluginApi(pluginId)는 해당 플러그인이 노출한 api 객체를 가져올 수 있습니다.
• 플러그인 API는 플러그인별로 제공 함수가 다르므로, 각 플러그인의 plugin.ts의 api 정의를 먼저 확인하세요.
• 만약 플랫폼 분기가 된 플러그인이라 특정 환경에서 존재하지 않을 가능성이 있다면, useOptionalPluginApi를 사용합니다.

코어 플러그인

코어 플러그인은 다른 플러그인을 구현하기 위해 필요한 기능을 제공하는 기초 플러그인입니다. 플러그인의 peerDependencies에 코어 플러그인을 추가하여 사용할 수 있습니다.¹

기본으로 제공하는 기능을 잘 숙지하여 크로스플랫폼의 작동 문제나 중복 코드 발생 문제가 발생하지 않도록 주의해주세요.

플러그인이 다른 플러그인을 의존할 경우 항상 plugin.ts의 dependencies에 플러그인의 ID를 추가해주세요.²

• 설정

  • @muvel-plugins/settings: 플러그인이 설정을 구현하기 위해 필요합니다. 설정 UI는 이 플러그인을 통해 추가합니다.
  • @muvel-plugins/settings-schema: 플러그인이 설정 스키마를 구현하기 위해 필요합니다.
  • @muvel-plugins/settings-store: 플러그인이 설정 스토어를 구현하기 위해 필요합니다.

• 기본 유틸

  • @muvel-plugins/download: 크로스플랫폼에서 파일 다운로드 기능을 지원합니다.³
  • @muvel-plugins/open-folder.tauri: Tauri 환경에서 폴더를 여는 기능을 지원합니다.

• UI 기본

  • @muvel-plugins/slots: 플러그인이 다른 플러그인 또는 메인 앱의 지정된 위치(슬롯)에 컴포넌트를 삽입 할 수 있도록 하는 핵심 기능입니다.
  • @muvel-plugins/drawer: 플러그인이 드로어(사이드에서 나오는 메뉴)를 구현하기 위해 필요합니다.
  • @muvel-plugins/modal: 플러그인이 모달(다이얼로그)을 구현하기 위해 필요합니다.
  • @muvel-plugins/context-menu: 플러그인이 여러 곳에서 사용되는 컨텍스트메뉴를 구현하기 위해 필요합니다.

• 특정 리소스 · 도메인 관련

  • @muvel-plugins/episode: 에피소드 생성, 로드, 수정, 동기화 등을 위한 API hook을 제공하는 플러그인입니다.
  • @muvel-plugins/wiki: 위키 생성, 로드, 수정, 동기화 등을 위한 API hook을 제공하는 플러그인입니다.
  • @muvel-plugins/novel: 소설 생성, 로드, 수정, 동기화 등을 위한 API hook을 제공하는 플러그인입니다.
  • @muvel-plugins/memo: 메모 생성, 로드, 수정, 동기화 등을 위한 API hook을 제공하는 플러그인입니다.

• 에디터 관련

  • @muvel-plugins/plot-canvas: 플롯 캔버스 에디터의 기능을 확장하기 위해 필요합니다.
  • @muvel-plugins/workspace: 워크스페이스의 기능을 확장하거나, 탭이 워크스페이스에 환경에 따른 동적 UI를 보여주기 위해 필요합니다.
  • @muvel-plugins/prosemirror: ProseMirror 기반 에디터를 구현하기 위해 필요합니다.
  • @muvel-plugins/episode-editor: 에피소드 에디터의 기능을 확장하기 위해 필요합니다.
  • @muvel-plugins/wiki-editor: 위키 에디터의 기능을 확장하기 위해 필요합니다.