로컬 개발과 번들링

로컬 개발 루프

설정 → 플러그인 → 개발자에서 패키징하거나 설치하지 않고 플러그인을 고쳐 나갈 수 있습니다.

개발자 모드. 릴리스 빌드는 이 구역에서 개발자 모드를 켜기 전까지 폴더를 불러오지 않고, 켤 때 Baram이 경고를 먼저 보여 줍니다. 켜져 있는 동안에는 다음이 적용됩니다.

• 폴더에서는 trust: "sandboxed" 플러그인만 불러옵니다 — trusted 매니페스트는 “릴리스 빌드에서는 sandboxed 플러그인만 폴더에서 로드할 수 있습니다”로 거부됩니다.
• 플러그인 저장소(~/.baram/plugin-data/<id>)가 id로 묶이므로, 폴더는 다른 쪽의 id를 쓸 수 없습니다 — baram-으로 시작하는 id(Baram 공식 플러그인 전용입니다 — 이 저장소의 예제는 community-template을 빼면 전부 baram- id이므로 다른 예제를 복사했다면 id를 바꾸십시오), 설치한 플러그인의 id, 다른 플러그인이 남긴 저장소가 있는 id(제거해도 plugin-data/<id>는 남습니다)가 그렇습니다. Baram은 불러온 폴더의 id를 기록하므로 자기 플러그인의 저장소가 다음 실행을 막지는 않습니다. 폴더가 쥔 id는 마켓플레이스에서 설치할 수 없습니다.
• 폴더마다 코드가 돌기 전에 권한을 묻고 — 설치할 때와 같은 대화상자입니다 — Baram이 그 답을 기록합니다. 나중 빌드가 권한을 더 요구하면 다시 불러오기를 누를 때 다시 묻습니다.
• 회수 목록이 폴더의 플러그인에 id로 적용됩니다.

끄면 폴더의 플러그인이 내려가고, 목록은 다음을 위해 남습니다. 개발자 모드를 끄거나 폴더를 제거해도 폴더의 플러그인이 ~/.baram/plugin-data/<id>에 저장한 것은 지워지지 않습니다 — 나중에 같은 id의 플러그인을 설치하면 그 데이터를 이어받으므로, 원하지 않으면 먼저 그 디렉터리를 지우십시오. 개발 빌드(npm run tauri dev)에는 스위치가 없습니다 — 거기서는 개발자 모드가 늘 켜져 있고, trusted 폴더도 불리며, 같은 id의 설치본을 폴더가 대신할 수 있고(발행한 플러그인의 다음 버전을 개발하는 방법입니다), 위의 id 규칙은 적용되지 않으며, 아무것도 묻지 않습니다.

• 개발 플러그인 폴더 불러오기 — 네이티브 폴더 선택기를 엽니다. baram-plugin.json과 빌드된 main 번들이 있는 디렉터리를 고르면 목록에 더해지고 바로 불려옵니다. 개발 빌드가 예전 목록을 한 번 옮겨 오는 것 말고는, 목록에 드는 길은 이 선택뿐입니다 — Baram은 목록을 앱 설정(config.json)과 떨어진 자기 파일 plugin-dev.json에 둡니다.
• 다시 불러오기 — 디스크에서 매니페스트를 다시 읽고 플러그인 모듈을 다시 불러옵니다(옛 인스턴스를 내리고 번들을 다시 import()하고 activate를 다시 돌립니다). 번들을 다시 빌드한 뒤 (npm run build) 앱을 재시작하지 않고 코드 변경을 반영할 때 쓰십시오. 바뀐 tiptapExtensions 기여도 같은 방식으로 반영됩니다 — 내리기가 옛 기여의 ProseMirror 플러그인을 에디터에서 제거하고, 새로 도는 activate가 새 기여를 설치합니다(위 참조). 재시작이 필요 없고, 스키마 쪽에서 따로 기다릴 것도 없습니다.
• 목록에서 제거 — 플러그인을 내리고 그 개발 폴더를 잊습니다(디스크의 어떤 것도 지우지 않습니다).

개발 모드로 불러온 플러그인은 체크섬 검증을 건너뜁니다(로컬 폴더에는 내려받기 URL도 체크섬도 없습니다) — 실수로 빠뜨린 보안 검사가 아니라 의도한 로컬 신뢰 단축입니다. 신뢰 모델과 보안을 보십시오.

번들링

esbuild로 ESM 번들 하나를 만드십시오. 전부 번들하십시오. 어느 티어에서도 external을 남기지 마십시오:

npx esbuild src/index.ts --bundle --format=esm --outfile=dist/index.mjs

@tiptap/pm/state 같은 맨 specifier는 import map이 있어야 해석되는데 앱은 그것을 선언하지 않습니다 — 그래서 external로 둔 것은 아무도 만족시킬 수 없는 import로 산출물에 남고, 플러그인은 아예 불러와지지 않습니다. 샌드박스 플러그인은 여기에 더해 blob: URL에서 import되는데 blob 모듈에는 base URL이 없으므로 상대 경로 import조차 해석되지 않습니다.

ProseMirror는 어디서 얻나. 에디터에 기여하는 플러그인은 그것을 import하지 않습니다 — ctx.pm이 앱 자신의 Decoration·DecorationSet·Plugin·PluginKey를 담고 있습니다. 편의의 문제가 아닙니다. prosemirror-view의 두 번째 사본은 앱의 것과 상호운용되지 않고, 그 크래시는 다른 무언가가 함께 그리기 전까지 조용합니다. ctx.pm으로 만드십시오 를 보십시오. 샌드박스 티어는 애초에 에디터에 기여할 수 없으므로 이 질문이 생기지 않습니다.

이렇게 빌드한 플러그인에는 @tiptap 의존성이 필요하지 않습니다 — examples/plugins/bullet-threading은 ProseMirror가 한 글자도 없는 번들을 내고, 테스트가 그것을 단언합니다.

package.json 스크립트 — 어느 티어든 같습니다.

{
  "scripts": {
    "build": "esbuild src/index.ts --bundle --format=esm --outfile=dist/index.mjs"
  }
}