Wtyczki

Wtyczka to samodzielny fragment kodu, który dodaje funkcje do Blockly. Może to być na przykład dodanie pola niestandardowego, zdefiniowanie nowego motywu lub udostępnienie niestandardowego modułu renderującego. Wtyczki są zwykle pakowane i rozpowszechniane za pomocą npm.

Uwaga: obiekt BlocklyOptions ma właściwość plugins, która służy do wstrzykiwania klas, które dostosowują działanie Blockly. Te klasy mogą być implementowane jako wtyczki, ale nie jest to wymagane i nie mają one ze sobą nic wspólnego.

Krótkie omówienie wtyczek znajdziesz w prezentacji Wtyczki – omówienie (2021 r.).

Jeśli chcesz utworzyć własny wtyczkę, zapoznaj się z artykułem Dodawanie wtyczki.

Wtyczki własne i dostarczone przez inną firmę

Własne wtyczki są obsługiwane przez zespół Blockly i publikowane w ramach zakresu @blockly w npm. Są one przeznaczone do użytku w szerokim zakresie aplikacji w Blockly.

Wtyczki innych firm są utrzymywane i publikowane niezależnie. Mogą być bardziej złożone, bardziej eksperymentalne lub przeznaczone do wąskiego zakresu aplikacji Blockly.

Znajdowanie wtyczki

• Otwórz stronę Wtyczki i demonstracje Blockly, na której znajdziesz demonstracje wtyczek własnych.

• Wyszukaj keyword:blockly-plugin w npm. Wtyczki z zakresem @blockly są publikowane przez zespół Blockly. Aby uzyskać szersze wyniki, wyszukaj keyword:blockly lub blockly.

• Zapoznaj się z katalogiem blockly-samples/plugins na GitHubie, który jest repozytorium wtyczek własnych. Każdy wtyczka ma plik README, który opisuje jej działanie i przeznaczenie.

Instalowanie wtyczki

Zalecamy instalowanie wtyczek za pomocą menedżera pakietów, takiego jak npm lub yarn. Dzięki temu możesz łatwo otrzymywać aktualizacje.

• Instalowanie wtyczki za pomocą menedżera pakietów

  npm

  npm install @blockly/field-angle
  

  włóczka

  yarn add @blockly/field-angle
  

• Instalowanie wtyczki bez menedżera pakietów

  unpkg

  <script src="https://unpkg.com/@blockly/field-angle"></script>
  

  Możesz też skopiować repozytorium GitHub, które zawiera wtyczkę. W przypadku wtyczek własnych jest to blockly-samples.

Sprawdź w pliku README wtyczki, czy zawiera on dodatkowe instrukcje instalacji.

Używanie wtyczki

Każda wtyczka jest inna, dlatego informacje o jej używaniu znajdziesz w pliku README. Z tego przykładu dowiesz się, jak używać plugina @blockly/field-angle:

1. Zaimportuj kod z wtyczki. Sposób wykonania tych czynności zależy od tego, jak zainstalowano wtyczkę.

   npm lub yarn

   import Blockly from 'blockly';
   import {registerFieldAngle} from '@blockly/field-angle';
   

   unpkg

   Nie musisz używać instrukcji import.

   Sklonowane repozytorium

   import {registerFieldAngle} from 'path/to/plugin';
   

2. W razie potrzeby inicjuj wtyczkę. Wtyczki, które udostępniają pola niestandardowe, często wymagają rejestracji pola:

   registerFieldAngle();
   

3. Użyj wtyczki.

   Blockly.common.defineBlocksWithJsonArray([
     {
       type: "my_angle_block",
       message0: "%1 degrees",
       args0: [
         {
           // Use @blockly/field-angle.
           type: "field_angle",
           name: "FIELDNAME",
           value: 45,
         },
       ],
       output: null,
       style: 'math_blocks'
     },
   ]);
   

   

Wersje wtyczek

Wtyczki w blockly-samples korzystają z semantycznej obsługi wersji, która wymaga wprowadzenia zmian powodujących przerwanie działania w nowej wersji głównej. Każda nowa wtyczka, która modyfikuje jądro monkey, będzie miała wersję główną 0, aby oznaczać początkowy etap rozwoju.

Większość wtyczek zawiera pakiet blockly jako peerDependency, a nie dependency. Zakładamy, że masz już zainstalowaną aplikację Blockly. (nie ma sensu używać wtyczki bez korzystania z Blockly). Dzięki temu możesz samodzielnie zarządzać wersją Blockly, ale musisz też sprawdzić package.json wtyczki, aby określić minimalną wersję Blockly, której wymaga. Jeśli w ramach aktualizacji wtyczki wymagana jest nowsza wersja Blockly, jest to uważane za zmianę powodującą niezgodność i jej duża wersja zostanie zwiększona.

Gdy dodasz wtyczkę do package.json aplikacji, domyślnie przed wersją zostanie dodana strzałka w górę:

"dependencies": {
  "@blockly/field-angle": "^5.0.12"
}

Dzięki temu npm będzie mógł zainstalować dowolną wersję podrzędną równą lub nowszą niż podana w wykazie, więc wersja 5.0.20 lub 5.1.0 będzie działać, ale nowa wersja główna, np. 6.0.1, nie. Po zaktualizowaniu Blockly do nowej wersji warto sprawdzić, czy któryś z Twoich wtyczek można zaktualizować do nowej głównej wersji.