Style i zasoby

Każdy plik potrzebny pluginowi powinien znaleźć się w gotowym package/. Lomi nie uruchamia serwera deweloperskiego, nie pobiera zależności npm i nie korzysta z folderu źródłowego autora.

Dołącz stylesheet

W plugin.json zadeklaruj "stylesheets": ["view.css"]. W konfiguracji dodaj ten sam plik do zasobów:

import { defineConfig } from '@lomi-dev/plugin-cli';

export default defineConfig({
  assets: ['view.css', 'images', 'LICENSE'],
});

Utwórz katalog images przed buildem albo usuń go z listy. Brak zadeklarowanego zasobu powoduje błąd. Arkusze są ładowane przed activate() i usuwane przy dezaktywacji. Nie są automatycznie ograniczane do komponentu ani osadzane w Shadow DOM.

Dopasuj panel do motywu Lomi

Użyj własnej klasy głównej i semantycznych tokenów aplikacji:

.lomi-workspace-info {
  box-sizing: border-box;
  padding: 16px;
  color: var(--color-surface-text);
  background: var(--color-surface);
  overflow-wrap: anywhere;
}

.lomi-workspace-info button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid var(--color-outline);
  border-radius: 6px;
  padding: 8px 12px;
}

.lomi-workspace-info button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

Unikaj globalnych selektorów body, button, * i zmian tokenów na :root. Wspólny dokument oznacza, że taki CSS wpłynie również na Lomi i pozostałe pluginy. Zachowaj widoczny fokus, etykiety pól i nazwy przycisków. Przetestuj jasny i ciemny motyw oraz wąski panel.

Obrazy i lokalne pliki

W activate() uzyskaj URL przez context.assetUrl('images/icon.svg') i przekaż go komponentowi. Metoda sprawdza składnię ścieżki i buduje adres zainstalowanej rewizji; samo wywołanie nie potwierdza, że plik istnieje. Dodaj go do assets.

Ścieżka jest względna wobec korzenia pakietu, bez początkowego /. Nie zapisuj uzyskanego URL w stanie sesji: zawiera rewizję, która może zmienić się przy aktualizacji. Po aktywacji wylicz go ponownie. Nie buduj ręcznie adresów plugin: ani plugin.localhost.

W CSS używaj lokalnych ścieżek względem arkusza, np. url('./images/icon.svg') dla view.css w korzeniu. Walidator sprawdza lokalne url() i @import. Odrzuca zewnętrzne adresy, brakujące pliki, kodowanie %, query i fragmenty w takich odwołaniach; dopuszcza data:. Ścieżek tworzonych dynamicznie w JavaScript nie da się sprawdzić statycznie.

Zależności i importy dynamiczne

Dodatkowe biblioteki muszą działać w przeglądarce. Build dołącza je do ESM. Nie importuj node:fs, innych modułów Node, prywatnych plików Lomi ani plików spoza projektu autora.

Stosuj literalne importy dynamiczne:

const details = await import('./details');

Plik src/details.ts musi istnieć. Bundler może utworzyć osobny chunk; udostępnij cały package/, a nie tylko dist/index.js. Import konstruowany z nazwy w zmiennej nie jest obsługiwanym sposobem ładowania modułów. new URL(..., import.meta.url) nie zastępuje jawnego dołączenia zasobów.

React, React DOM, react-dom/client, moduły JSX i główny eksport SDK są połączone ze wspólnym runtime hosta. Nie dołączaj osobnej kopii React. Podścieżki react-dom/server i narzędziowe podścieżki SDK nie są wejściami runtime pluginu; używaj ich tylko we własnych skryptach Node.

Dołącz motyw do pluginu

Dodaj do contributes:

{
  "themes": [
    { "id": "example.workspace-info.theme", "path": "theme" }
  ]
}

path wskazuje folder, więc utwórz theme/theme.jsonc i dopisz theme do assets. Szablon theme zawiera kompletny punkt startowy. Format opisuje Tworzenie motywu.

Motyw jest dostępny po imporcie pakietu bez uruchamiania JavaScriptu. Motywy należące do pakietu są tylko do odczytu; użytkownik może je zduplikować. Samo wyłączenie kodu nie usuwa motywu. Przed odinstalowaniem pakietu należy wybrać inne dostarczane przez niego aktywne motywy kolorów lub ikon.

Własne tokeny pluginu

Motyw może definiować tokeny właściciela. Dla example.workspace-info i tokenu surface użyj wartości zastępczej:

.lomi-workspace-info {
  background: var(--plugin-example-dworkspace-hinfo-surface, var(--color-surface));
}

Kodowanie ID zamienia - na -h, a następnie . na -d. Tokeny pluginu nie istnieją w każdym motywie, dlatego fallback jest potrzebny. Strukturę deklaracji opisują Zasoby i CSS motywu.