Skip to main content

Crear un plugin

La manera més ràpida de començar un plugin d'Harmonix és el creador de plugins. Genera un projecte amb React, Lit o Angular que ja funciona: un plugin que registra una vista i un element de menú, i que s'executa dins d'un shell petit, el shell de demostració d'Harmonix, perquè el puguis veure des del primer minut.

Prova-ho sense instal·lar res

El Sandbox executa el mateix projecte al navegador, amb React, Lit o Angular.

Requisits​

  • Node.js 20.19 o posterior, amb npm.

1. Crea el projecte​

npm create @uxland/harmonix-plugin@latest my-plugin -- --template react

Crea la carpeta my-plugin. El nom de la carpeta és també l'id del plugin (pluginId) i el nom del paquet, així que tria'l amb cura: lletres minúscules, números i guions.

Sense arguments, npm create @uxland/harmonix-plugin@latest et demana la carpeta i el framework.

Fes servir sempre @latest

Sense aquest sufix, npm pot reutilitzar una versió anterior del creador que ja tingui a la memòria cau, amb plantilles antigues.

2. Engega'l​

cd my-plugin
npm install
npm run dev

Obre l'adreça que apareix al terminal: http://localhost:5173 per a React i Lit, http://localhost:4200 per a Angular.

El plugin creat amb React, executant-se al shell de demostració

Què hi veus:

  • El shell de demostració: una capçalera, un menú lateral i l'àrea de contingut. Cadascun d'aquests elements és una regió on els plugins injecten les seves vistes. El shell no té vistes pròpies.
  • El teu plugin, que ha registrat dues vistes: l'element My plugin al menú lateral i la pàgina de l'àrea de contingut, que és l'activa.
  • El broker en acció: el botó publica un esdeveniment i la mateixa vista, que hi està subscrita, el compta. Qualsevol altre plugin podria publicar o escoltar aquest esdeveniment.

Edita la vista i desa: la pàgina es recarrega amb els canvis.

3. Construeix-lo​

npm run build

El resultat és un únic fitxer, dist/index.js, amb el teu plugin i res més: el framework i el shell queden fora del bundle, perquè els proporciona l'aplicació que carrega el plugin. Aquest és el fitxer que puges al Plugin Store. Consulta Construir i publicar.

Següents passos​