refactor: Replace Plugin class with PluginBaseClass in JavaScript gui…

…des (#1569)

* refactor: Replace Plugin class with PluginBaseClass in JavaScript guides

* fix: correct typo in quality guidelines for plugins

.wordlist.txt

@@ -1742,3 +1742,5 @@ youtube
 zlib
 zsh
 zstd
+zipignore
+XMLHttpRequest

guides/plugins/plugins/framework/store-api/add-store-api-route.md

@@ -379,18 +379,28 @@ When you want to request your custom route you can use the existing `http-client
 
 ```javascript
 // <plugin root>/src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js
-import Plugin from 'src/plugin-system/plugin.class';
-import HttpClient from 'src/service/http-client.service';
-
-export default class ExamplePlugin extends Plugin {
-    init() {
-        this._client = new HttpClient();
-    }
-
-    requestCustomRoute() {
-        this._client.post('/example', { limit: 10, offset: 0}, (response) => {
-            alert(response);
+const { PluginBaseClass } = window;
+
+export default class ExamplePlugin extends PluginBaseClass {
+    async requestCustomRoute() {
+        const response = await fetch('/example', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                limit: 10,
+                offset: 0,
+            }),
         });
+
+        if (!response.ok) {
+            throw new Error('Request failed');
+        }
+
+        const data = await response.json();
+
+        console.log(data);
     }
 }
 ```

guides/plugins/plugins/plugin-fundamentals/using-npm-dependencies.md

@@ -57,7 +57,7 @@ Once we have installed all the dependencies and registered the package in the bu
 
 ```javascript
 // <plugin root>/src/Resources/app/storefront/src/example.plugin.js
-import Plugin from 'src/plugin-system/plugin.class';
+const { PluginBaseClass } = window;
 
 // Import logger
 import { log } from 'missionlog';
@@ -68,7 +68,7 @@ log.init({ initializer: 'INFO' }, (level, tag, msg, params) => {
 });
 
 // The plugin skeleton
-export default class ExamplePlugin extends Plugin {
+export default class ExamplePlugin extends PluginBaseClass {
     init() {
         console.log('init');
 

guides/plugins/plugins/storefront/add-custom-javascript.md

@@ -29,9 +29,9 @@ Inside this file create and export an ExamplePlugin class that extends the base
 
 ```javascript
 // <plugin root>/src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js
-import Plugin from 'src/plugin-system/plugin.class';
+const { PluginBaseClass } = window;
 
-export default class ExamplePlugin extends Plugin {
+export default class ExamplePlugin extends PluginBaseClass {
 }
 ```
 
@@ -41,9 +41,9 @@ Each plugin has to implement the `init()` method. This method will be called whe
 
 ```javascript
 // <plugin root>/src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js
-import Plugin from 'src/plugin-system/plugin.class';
+const { PluginBaseClass } = window;
 
-export default class ExamplePlugin extends Plugin {
+export default class ExamplePlugin extends PluginBaseClass {
     init() {
         window.addEventListener('scroll', this.onScroll.bind(this));
     }
@@ -146,9 +146,9 @@ You can configure your plugins from inside the templates via data-options. First
 
 ```javascript
 // <plugin root>/src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js
-import Plugin from 'src/plugin-system/plugin.class';
+const { PluginBaseClass } = window;
 
-export default class ExamplePlugin extends Plugin {
+export default class ExamplePlugin extends PluginBaseClass {
     static options = {
         /**
          * Specifies the text that is prompted to the user

guides/plugins/plugins/storefront/add-dynamic-content-via-ajax-calls.md

@@ -87,19 +87,13 @@ Again this is built upon the [adding custom Javascript](add-custom-javascript) a
 
 ```javascript
 // <plugin root>/src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js
-import HttpClient from 'src/service/http-client.service';
-import Plugin from 'src/plugin-system/plugin.class';
+const { PluginBaseClass } = window;
 
-export default class AjaxPlugin extends Plugin {
+export default class AjaxLoadPlugin extends PluginBaseClass {
     init() {
-        // initialize the HttpClient
-        this._client = new HttpClient();
-
-        // get references to the dom elements
         this.button = this.el.children['ajax-button'];
         this.textdiv = this.el.children['ajax-display'];
 
-        // register the events
         this._registerEvents();
     }
 
@@ -108,18 +102,22 @@ export default class AjaxPlugin extends Plugin {
         this.button.onclick = this._fetch.bind(this);
     }
 
-    _fetch() {
-        // make the network request and call the `_setContent` function as a callback
-        this._client.get('/example', this._setContent.bind(this), 'application/json', true)
-    }
-
-    _setContent(data) {
-        // parse the response and set the `textdiv.innerHTML` to the timestamp
-        this.textdiv.innerHTML = JSON.parse(data).timestamp;
+    async _fetch() {
+        const response = await fetch('/example');
+        const data = await response.json();
+        this.textdiv.innerHTML = data.timestamp;
     }
 }
 ```
 
+and register it in the `main.js`
+
+```javascript
+import AjaxLoadPlugin from './example-plugin/example-plugin.plugin';
+
+window.PluginManager.register('AjaxLoadPlugin', AjaxLoadPlugin, '[data-ajax-helper]');
+```
+
 ## Adding the Template
 
 The only thing that is now left, is to provide a template for the Storefront plugin to hook into:

guides/plugins/plugins/storefront/fetching-data-with-javascript.md

@@ -19,46 +19,26 @@ While this is not mandatory, having read the guide about [adding custom javascri
 
 ## Fetching data
 
-At first, we need to import the `HttpClient` to use it in our JavaScript plugin. We also create a new instance of the `HttpClient` and assigned it to a variable in our `ExamplePlugin`.
+We will use the standard [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to gather additional data. The fetch API is a modern replacement for the old `XMLHttpRequest` object. It is a promise-based API that allows you to make network requests similar to XMLHttpRequest (XHR).
 
 ```javascript
 // <plugin root>/src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js
-import Plugin from 'src/plugin-system/plugin.class';
-import HttpClient from 'src/service/http-client.service';
+const { PluginBaseClass } = window;
 
-export default class ExamplePlugin extends Plugin {
+export default class ExamplePlugin extends PluginBaseClass {
     init() {
-        this._client = new HttpClient();
-    }
-}
-```
-
-To fetch data from the API, we now can use the `get` method of the `HttpClient` to invoke a get request.
-
-```javascript
-// <plugin root>/src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js
-import Plugin from 'src/plugin-system/plugin.class';
-import HttpClient from 'src/service/http-client.service';
-
-export default class ExamplePlugin extends Plugin {
-    init() {
-        this._client = new HttpClient();
-
         this.fetchData();
     }
 
     // ...
 
-    fetchData() {
-        this._client.get('/widgets/checkout/info', this.handleData);
-    }
+    async fetchData() {
+        const response = await fetch('/widgets/checkout/info');
+        const data = await response.text();
 
-    handleData(response) {
-        console.log(response);
+        console.log(data);
     }
 }
 ```
 
-The `get` method takes three arguments. The first one is the `url` which we want to call. In the example we are going to fetch a widget which contains some HTML. The second parameter is a `callback` function. It will be invoked when the API call was done. In the example below we pass in the `handleData` method of our plugin. The callback function then receives the `response` of the API call. We can now use this in our plugin to display the widget in the DOM, for example.
-
-The third parameter of the `get` method is the `contentType` which will be sent in the request header of the API call. It is optional and by default set to be `application/json`.
+In this example, we fetch the data from the `/widgets/checkout/info` endpoint. The `fetch` method returns a promise that resolves to the `Response` object representing the response to the request. We then use the `text` method of the `Response` object to get the response body as text.

guides/plugins/plugins/storefront/reacting-to-javascript-events.md

@@ -21,9 +21,9 @@ As already mentioned, this guide will not explain how to create a JavaScript plu
 
 ```javascript
 // <plugin root>/src/Resources/app/storefront/src/events-plugin/events-plugin.plugin.js
-import Plugin from 'src/plugin-system/plugin.class';
+const { PluginBaseClass } = window;
 
-export default class EventsPlugin extends Plugin {
+export default class EventsPlugin extends PluginBaseClass {
     init() {
     }
 }
@@ -43,9 +43,9 @@ Now that you possibly found your event, it's time to register to it and execute
 
 ```javascript
 // <plugin root>/src/Resources/app/storefront/src/events-plugin/events-plugin.plugin.js
-import Plugin from 'src/plugin-system/plugin.class';
+const { PluginBaseClass } = window;
 
-export default class EventsPlugin extends Plugin {
+export default class EventsPlugin extends PluginBaseClass {
     init() {
         const plugin = window.PluginManager.getPluginInstanceFromElement(document.querySelector('[data-cookie-permission]'), 'CookiePermission');
         plugin.$emitter.subscribe('hideCookieBar', this.onHideCookieBar);

guides/plugins/plugins/storefront/using-a-modal-window.md

@@ -118,10 +118,10 @@ Now let's get started with the modal window. First we have to import the `Pseudo
 
 ```javascript
 // <plugin root>/src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js
-import Plugin from 'src/plugin-system/plugin.class';
+const { PluginBaseClass } = window;
 import PseudoModalUtil from 'src/utility/modal-extension/pseudo-modal.util';
 
-export default class ExamplePlugin extends Plugin {
+export default class ExamplePlugin extends PluginBaseClass {
     init() {
         // ...
     }
@@ -133,10 +133,10 @@ We also call the method `open()` to make it visible.
 
 ```javascript
 // <plugin root>/src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js
-import Plugin from 'src/plugin-system/plugin.class';
+const { PluginBaseClass } = window;
 import PseudoModalUtil from 'src/utility/modal-extension/pseudo-modal.util';
 
-export default class ExamplePlugin extends Plugin {
+export default class ExamplePlugin extends PluginBaseClass {
     init() {
         this.openModal();
     }
@@ -177,10 +177,10 @@ Of course, the content can also be generated via an API and inserted via AJAX re
 
 ```javascript
 // <plugin root>/src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js
-import Plugin from 'src/plugin-system/plugin.class';
+const { PluginBaseClass } = window;
 import PseudoModalUtil from 'src/utility/modal-extension/pseudo-modal.util';
 
-export default class ExamplePlugin extends Plugin {
+export default class ExamplePlugin extends PluginBaseClass {
     init() {
         // declaring some basic content
         const content = `
@@ -213,10 +213,10 @@ The `open()` method of the `PseudoModalUtil` class supports a callback function
 
 ```javascript
 // <plugin root>/src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js
-import Plugin from 'src/plugin-system/plugin.class';
+const { PluginBaseClass } = window;
 import PseudoModalUtil from 'src/utility/modal-extension/pseudo-modal.util';
 
-export default class ExamplePlugin extends Plugin {
+export default class ExamplePlugin extends PluginBaseClass {
     init() {
         // declaring some basic content
         const content = `
@@ -250,10 +250,10 @@ Here is an example how to use it:
 
 ```javascript
 // <plugin root>/src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js
-import Plugin from 'src/plugin-system/plugin.class';
+const { PluginBaseClass } = window;
 import PseudoModalUtil from 'src/utility/modal-extension/pseudo-modal.util';
 
-export default class ExamplePlugin extends Plugin {
+export default class ExamplePlugin extends PluginBaseClass {
     init() {
         // declaring some basic content
         const content = `
@@ -302,10 +302,10 @@ The constructor method of `PseudoModalUtil` provides optional configuration. If
 
 ```javascript
 // <plugin root>/src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js
-import Plugin from 'src/plugin-system/plugin.class';
+const { PluginBaseClass } = window;
 import PseudoModalUtil from 'src/utility/modal-extension/pseudo-modal.util';
 
-export default class ExamplePlugin extends Plugin {
+export default class ExamplePlugin extends PluginBaseClass {
     init() {
         // declaring some basic content
         const content = `
@@ -342,7 +342,7 @@ Here is an example which shows how to override the CSS class names.
 ```javascript
 // <plugin root>/src/Resources/app/storefront/src/example-plugin/example-plugin.plugin.js
 // ...
-export default class ExamplePlugin extends Plugin {
+export default class ExamplePlugin extends PluginBaseClass {
     init() {
         // ...
     }

resources/guidelines/testing/store/quality-guidelines-plugins/index.md

@@ -520,7 +520,7 @@ Here are some examples of not allowed folders and files:
 * .tar
 * .tar.gz
 * .zip
-* .zipognore
+* .zipignore
 * composer.lock
 * package.json
 * package-lock.json