Add wc client api docu (#3825)

* Poc: Add Label to docs * Apply prettier * Apply prettier * Update docs * Apply documentation for the code * Update website/docs/src/markdown-conversion/unified-plugins/rehype-label.js Co-authored-by: Ndricim <[email protected]> * Update website/docs/src/markdown-conversion/unified-plugins/rehype-label.js Co-authored-by: Ndricim <[email protected]> * Add labels to jdocs * missing example in jsdoc --------- Co-authored-by: Anna Milewska <[email protected]> Co-authored-by: Johannes Doberer <[email protected]> Co-authored-by: Ndricim <[email protected]>
SAP · Jul 30, 2024 · 25a48a1 · 25a48a1
1 parent ee9239f
commit 25a48a1
Show file tree

Hide file tree

Showing 7 changed files with 248 additions and 3 deletions.
diff --git a/client/src/lifecycleManager.js b/client/src/lifecycleManager.js
@@ -351,6 +351,7 @@ class LifecycleManager extends LuigiClientBase {
    * @param {string} id the id that was returned by the `addInitListener` function
    * @memberof Lifecycle
    * @since 0.6.2
+   * @example
    * LuigiClient.removeCustomMessageListener(customMsgId)
    */
   removeCustomMessageListener(id) {
@@ -390,6 +391,7 @@ class LifecycleManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Returns a list of active feature toggles
    * @returns {Array} a list of feature toggle names
    * @memberof Lifecycle
@@ -402,6 +404,7 @@ class LifecycleManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Sets node parameters in Luigi Core. The parameters will be added to the URL.
    * @param {Object} params
    * @param {boolean} keepBrowserHistory
@@ -420,6 +423,7 @@ class LifecycleManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Returns the node parameters of the active URL.
    * Node parameters are defined like URL query parameters but with a specific prefix allowing Luigi to pass them to the micro frontend view. The default prefix is **~** and you can use it in the following way: `https://my.luigi.app/home/products?~sort=asc&~page=3`.
    * <!-- add-attribute:class:warning -->
@@ -438,6 +442,7 @@ class LifecycleManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Returns the dynamic path parameters of the active URL.
    * Path parameters are defined by navigation nodes with a dynamic **pathSegment** value starting with **:**, such as **productId**.
    * All path parameters in the current navigation path (as defined by the active URL) are returned.
@@ -464,6 +469,7 @@ class LifecycleManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Sends search query parameters to Luigi Core. The search parameters will be added to the URL if they are first allowed on a node level using {@link navigation-parameters-reference.md#clientpermissionsurlparameters clientPermissions.urlParameters}.
 
    * @param {Object} searchParams
@@ -483,6 +489,7 @@ class LifecycleManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Returns the current client permissions as specified in the navigation node or an empty object. For details, see [Node parameters](navigation-parameters-reference.md).
    * @returns {Object} client permissions as specified in the navigation node
    * @memberof Lifecycle
@@ -522,6 +529,7 @@ class LifecycleManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Returns the current user settings based on the selected node.
    * @returns {Object} current user settings
    * @since 1.7.1
@@ -534,6 +542,7 @@ class LifecycleManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Returns the current anchor based on active URL.
    * @memberof Lifecycle
    * @since 1.21.0
@@ -546,6 +555,7 @@ class LifecycleManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Sends anchor to Luigi Core. The anchor will be added to the URL.
    * @param {string} anchor
    * @since 1.21.0
@@ -561,6 +571,7 @@ class LifecycleManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * This function allows you to change node labels within the same {@link navigation-advanced.md#view-groups view group}, e.g. in your node config: `label: 'my Node {viewGroupData.vg1}'`.
    * @since 2.2.0
    * @param {Object} data a data object containing the view group name and desired label

diff --git a/client/src/linkManager.js b/client/src/linkManager.js
@@ -36,6 +36,7 @@ export class linkManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Navigates to the given path in the application hosted by Luigi. It contains either a full absolute path or a relative path without a leading slash that uses the active route as a base. This is the standard navigation.
    * @memberof linkManager
    * @param {string} path path to be navigated to
@@ -96,6 +97,7 @@ export class linkManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Updates path of the modalPathParam when internal navigation occurs.
    * @memberof linkManager
    * @param {string} path
@@ -123,6 +125,7 @@ export class linkManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Offers an alternative way of navigating with intents. This involves specifying a semanticSlug and an object containing
    * parameters.
    * This method internally generates a URL of the form `#?intent=<semantic object>-<action>?<param_name>=<param_value>` through the given
@@ -155,6 +158,7 @@ export class linkManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Opens a view in a modal. You can specify the modal's title and size. If you don't specify the title, it is the node label. If there is no node label, the title remains empty.  The default size of the modal is `l`, which means 80%. You can also use `m` (60%) and `s` (40%) to set the modal size. Optionally, use it in combination with any of the navigation functions.
    * @memberof linkManager
    * @param {string} path navigation path
@@ -191,7 +195,8 @@ export class linkManager extends LuigiClientBase {
     return modalPromise.promise;
   }
 
-  /**
+ /**
+   * <!-- label-success: Web Component API  -->
    * Updates the current title and size of a modal. If `routing.showModalPathInUrl` is set to `true`, the URL will be updated with the modal settings data.
    * In addition, you can specify if a new history entry will be created with the updated URL.
    * @memberof linkManager
@@ -214,6 +219,7 @@ export class linkManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Opens a view in a split view. You can specify the split view's title and size. If you don't specify the title, it is the node label. If there is no node label, the title remains empty. The default size of the split view is `40`, which means 40% height of the split view.
    * @memberof linkManager
    * @param {string} path navigation path
@@ -233,6 +239,7 @@ export class linkManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Opens a view in a drawer. You can specify the size of the drawer, whether the drawer has a header, and whether a backdrop is active in the background. By default, the header is shown. The backdrop is not visible and has to be activated. The size of the drawer is set to `s` by default, which means 25% of the micro frontend size. You can also use `l`(75%), `m`(50%) or `xs`(15.5%). Optionally, use it in combination with any of the navigation functions.
    * @memberof linkManager
    * @param {string} path navigation path
@@ -251,6 +258,7 @@ export class linkManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Sets the current navigation context to that of a specific parent node which has the {@link navigation-configuration.md navigationContext} field declared in the navigation configuration. This navigation context is then used by the `navigate` function.
    * @memberof linkManager
    * @param {string} navigationContext
@@ -290,6 +298,7 @@ export class linkManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Sets the current navigation base to the parent node that is defined as virtualTree. This method works only when the currently active micro frontend is inside a virtualTree.
    * @memberof linkManager
    * @returns {linkManager} link manager instance
@@ -305,6 +314,7 @@ export class linkManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Enables navigating to sibling nodes without knowing the absolute path.
    * @memberof linkManager
    * @returns {linkManager} link manager instance
@@ -318,6 +328,7 @@ export class linkManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Sends node parameters to the route. The parameters are used by the `navigate` function. Use it optionally in combination with any of the navigation functions and receive it as part of the context object in Luigi Client.
    * @memberof linkManager
    * @param {Object} nodeParams
@@ -336,6 +347,7 @@ export class linkManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Sets options to customise route changing behaviour. The parameters are used by the `navigate` function. Use it optionally in combination with any of the navigation functions and receive it as part of the context object in Luigi Client.
    * @memberof linkManager
    * @param {Object} options navigation options
@@ -364,6 +376,7 @@ export class linkManager extends LuigiClientBase {
 
   /** @lends linkManager */
   /**
+   * <!-- label-success: Web Component API  -->
    * Checks if the path you can navigate to exists in the main application. For example, you can use this helper method conditionally to display a DOM element like a button.
    * @memberof linkManager
    * @param {string} path path which existence you want to check
@@ -419,6 +432,7 @@ export class linkManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Checks if there is one or more preserved views. You can use it to show a **back** button.
    * @memberof linkManager
    * @returns {boolean} indicating if there is a preserved view you can return to
@@ -428,6 +442,7 @@ export class linkManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Discards the active view and navigates back to the last visited view. Works with preserved views, and also acts as the substitute of the browser **back** button. **goBackContext** is only available when using preserved views.
    * @memberof linkManager
    * @param {any} goBackValue data that is passed in the **goBackContext** field to the last visited view when using preserved views
@@ -443,6 +458,7 @@ export class linkManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Disables the navigation handling for a single navigation request.
    * It prevents Luigi Core from handling the URL change after `navigate()`.
    * Used for auto-navigation.
@@ -468,6 +484,7 @@ export class linkManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Keeps the URL's query parameters for a navigation request.
    * @param {boolean} preserve By default, it is set to `false`. If it is set to `true`, the URL's query parameters will be kept after navigation.
    * @since 1.19.0
@@ -481,6 +498,7 @@ export class linkManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Gets the luigi route associated with the current micro frontend.
    * @returns {promise} a promise which resolves to a String value specifying the current luigi route
    * @since 1.23.0

diff --git a/client/src/uxManager.js b/client/src/uxManager.js
@@ -19,6 +19,7 @@ class UxManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Adds a backdrop with a loading indicator for the micro frontend frame. This overrides the {@link navigation-parameters-reference.md#node-parameters loadingIndicator.enabled} setting.
    * @memberof uxManager
    */
@@ -27,6 +28,7 @@ class UxManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Removes the loading indicator. Use it after calling {@link #showLoadingIndicator showLoadingIndicator()} or to hide the indicator when you use the {@link navigation-parameters-reference.md#node-parameters loadingIndicator.hideAutomatically: false} node configuration.
    * @memberof uxManager
    */
@@ -35,6 +37,7 @@ class UxManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Closes the currently opened micro frontend modal.
    * @memberof uxManager
    */
@@ -43,20 +46,25 @@ class UxManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Adds a backdrop to block the top and side navigation. It is based on the Fundamental UI Modal, which you can use in your micro frontend to achieve the same behavior.
    * @memberof uxManager
    */
   addBackdrop() {
     helpers.sendPostMessageToLuigiCore({ msg: 'luigi.add-backdrop' });
   }
+
   /**
+   * <!-- label-success: Web Component API  -->
    * Removes the backdrop.
    * @memberof uxManager
    */
   removeBackdrop() {
     helpers.sendPostMessageToLuigiCore({ msg: 'luigi.remove-backdrop' });
   }
+
   /**
+   * <!-- label-success: Web Component API  -->
    * This method informs the main application that there are unsaved changes in the current view in the iframe. It can be used to prevent navigation away from the current view, for example with form fields which were edited but not submitted. However, this functionality is not restricted to forms. If you use `withoutSync()` together with `setDirtyStatus()`, this is a special case in which the dirty state logic needs to be handled by the micro frontend. For example, if the user navigates with an Angular router, which would trigger `withoutSync()`, Angular needs to take care about dirty state, prevent the navigation and ask for permission to navigate away, through `uxManager().showConfirmationModal(settings)`.
    * @param {boolean} isDirty indicates if there are any unsaved changes on the current page or in the component
    * @memberof uxManager
@@ -67,7 +75,9 @@ class UxManager extends LuigiClientBase {
       dirty: isDirty
     });
   }
+
   /**
+   * <!-- label-success: Web Component API  -->
    * Shows a confirmation modal.
    * @memberof uxManager
    * @param {Object} settings the settings of the confirmation modal. If you don't provide any value for any of the fields, a default value is used
@@ -126,6 +136,7 @@ class UxManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Shows an alert.
    * @memberof uxManager
    * @param {Object} settings the settings for the alert
@@ -186,6 +197,7 @@ class UxManager extends LuigiClientBase {
     this.setPromise('alerts', alertPromises);
     return alertPromises[settings.id].promise;
   }
+
   /**
    * @private
    * @memberof uxManager
@@ -203,6 +215,7 @@ class UxManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Gets the current locale.
    * @returns {string} current locale
    * @memberof uxManager
@@ -212,6 +225,7 @@ class UxManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Sets current locale to the specified one.
    *
    * **NOTE:** this must be explicitly allowed on the navigation node level by setting `clientPermissions.changeCurrentLocale` to `true`. (See {@link navigation-parameters-reference.md Node parameters}.)
@@ -231,6 +245,7 @@ class UxManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Checks if the current micro frontend is displayed inside a split view
    * @returns {boolean} indicating if it is loaded inside a split view
    * @memberof uxManager
@@ -251,6 +266,7 @@ class UxManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Checks if the current micro frontend is displayed inside a drawer
    * @returns {boolean} indicating if it is loaded inside a drawer
    * @memberof uxManager
@@ -261,6 +277,7 @@ class UxManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Gets the current theme.
    * @returns {*} current themeObj
    * @memberof uxManager
@@ -270,6 +287,7 @@ class UxManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Gets the CSS variables from Luigi Core with their key and value.
    * @returns {Object} CSS variables with their key and value.
    * @memberof uxManager
@@ -281,6 +299,7 @@ class UxManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Adds the CSS variables from Luigi Core in a <style> tag to the document <head> section.
    * @memberof uxManager
    * @since 2.3.0