clarify the difference between attributes and properties

blog/2024-07-10-release-notes.md

@@ -0,0 +1,33 @@
+---
+title: Luigi v2.14  
+seoMetaDescription: Release notes for Luigi v2.14
+author:
+  - Mahati Shankar
+layout: blog
+---
+
+You can read about the new features in Luigi v2.14 in the release notes below.
+
+<!-- Excerpt -->
+
+
+#### E2E Tests With Nightwatch, WebdriverIO and Puppeteer
+
+The testing-utilities library now additionally supports Nightwatch, WebdriverIO and Puppeteer. You can now use these testing frameworks for your e2e tests.
+
+#### getCurrentRoute Has Been Added
+
+[getCurrentRoute](https://docs.luigi-project.io/docs/luigi-core-api?section=getcurrentroute) has been added to the Luigi core API which as the name suggests returns the current Luigi route.
+
+#### getCurrentTheme in WC Client
+
+The method [getCurrentTheme](https://docs.luigi-project.io/docs/luigi-core-api?section=getcurrenttheme) is now part of the core API so you can now use it in the WebComponent client too.
+
+
+#### Fix Top Nav Children Not Rendered
+
+Fixed issue where nodes weren't rendered in the top navigation under certain conditions.
+
+#### Bugfixes
+
+For a full list of bugfixes in this release, see our [changelog](https://github.com/SAP/luigi/blob/main/CHANGELOG.md).

docs/luigi-compound-container-api.md

@@ -16,7 +16,7 @@ meta -->
 
 # Luigi Compound Container API
 
-This document outlines the parameters provided by the Luigi Compound Container. Luigi Compound Container provides the possibility to insert multiple webcomponent-based microfrontends in one container
+This document outlines the parameters provided by the Luigi Compound Container. Luigi Compound Container provides the possibility to insert multiple webcomponent-based microfrontends in one container. The properties can be set as HTML attributes or through the Container object's property in JS.
 
 ## API Reference
 
@@ -28,6 +28,14 @@ The URL used for the renderer.
 
 Type: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)
 
+```js
+myContainer.viewUrl = "/index.html"
+```
+
+```HTML
+<luigi-container viewUrl="/index.html"></luigi-container>
+```
+
 ### compoundConfig
 
 The configuration for the compound microfrontend
@@ -38,6 +46,83 @@ Type: [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Globa
 **Meta**
 
 *   **since**: 1.0.0
+TODO: better example
+```js
+myContainer.compoundConfig = lcc.compoundConfig = {
+        renderer: {
+          use: 'grid',
+          config: {
+            columns: '1fr 1fr 1fr 2fr',
+            /*rows: '150px',*/
+            /*gap: '30px',*/
+            layouts: [
+              {
+                minWidth: 0,
+                maxWidth: 600,
+                columns: '1fr',
+                gap: 0
+              },
+              {
+                minWidth: 600,
+                maxWidth: 1024,
+                columns: '1fr 1fr',
+                gap: '30px'
+              }
+            ]
+          }
+        },
+        children: [
+          {
+            viewUrl: 'http://www.examples.com/header.js',
+            context: {
+              title: 'My Awesome Grid 000',
+              description: 'Really awesome'
+            },
+            layoutConfig: {
+              row: '1',
+              column: '1 / -1'
+            },
+            eventListeners: [
+              {
+                source: 'input1',
+                name: 'sendInput',
+                action: 'update',
+                dataConverter: data => {
+                  return 'new text: ' + data;
+                }
+              }
+            ]
+          },
+          {
+            id: 'input1',
+            viewUrl: '/helloWorldWC.js',
+            context: {
+              title: 'Some input',
+              instant: true
+            }
+          },
+          {
+            viewUrl: 'http://www.examples.com/main.js',
+            context: {
+              label: 'Another web component'
+            }
+          },
+          {
+            viewUrl: '/panelFooter.js',
+            context: {
+              footer: 'This is the end of awesomeness'
+            },
+            layoutConfig: {
+              column: '1 / -1'
+            }
+          }
+        ]
+      };
+```
+
+```HTML
+<luigi-container viewUrl="/index.html" compoundConfig='{foo: bar}'></luigi-container>
+```
 
 ### deferInit
 
@@ -49,6 +134,14 @@ Type: [boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Glob
 
 *   **since**: 1.0.0
 
+```js
+myContainer.deferInit = true
+```
+TODO: is it preferred to assign true or declare it to indicate it's set
+```HTML
+<luigi-container viewUrl="/index.html" deferInit="true"></luigi-container>
+```
+
 ### nodeParams
 
 The parameters to be passed to the compound micro frontend. Will not be passed to the compound children.
@@ -59,6 +152,14 @@ Type: [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Globa
 
 *   **since**: 1.0.0
 
+```js
+myContainer.nodeParams = {foo: bar}
+```
+
+```HTML
+<luigi-container viewUrl="/index.html" nodeParams='{"node":"param"}'></luigi-container>
+```
+
 ### noShadow
 
 If set to true, the Luigi compound container webcomponent will not use the shadow DOM for rendering.
@@ -69,6 +170,14 @@ Type: [boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Glob
 
 *   **since**: 1.2.0
 
+```js
+myContainer.noShadow = true
+```
+
+```HTML
+<luigi-container viewUrl="/index.html" noShadow='true'></luigi-container>
+```
+
 ### searchParams
 
 The search parameters to be passed to the compound micro frontend.
@@ -79,6 +188,14 @@ Type: [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Globa
 
 *   **since**: 1.0.0
 
+```js
+myContainer.searchParams = {foo: bar}
+```
+
+```HTML
+<luigi-container viewUrl="/index.html" searchParams='{"search":"param"}'></luigi-container>
+```
+
 ### pathParams
 
 The path parameters to be passed to the compound micro frontend.
@@ -89,6 +206,14 @@ Type: [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Globa
 
 *   **since**: 1.0.0
 
+```js
+myContainer.pathParams = {foo: bar}
+```
+
+```HTML
+<luigi-container viewUrl="/index.html" pathParams='{"path":"param"}'></luigi-container>
+```
+
 ### context
 
 The stringified context to be passed to the compound microfrontend
@@ -98,6 +223,14 @@ Type: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Globa
 **Meta**
 
 *   **since**: 1.0.0
+TODO: is it better to use JSON.stringify({foo: bar}) for the value
+```js
+myContainer.context = {label: "Dashboard"}
+```
+
+```HTML
+<luigi-container viewUrl="/index.html" context='{"label": "Dashboard"}'></luigi-container>
+```
 
 ### clientPermissions
 
@@ -109,6 +242,14 @@ Type: [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Globa
 
 *   **since**: 1.0.0
 
+```js
+myContainer.clientPermissions = {permission: "adminGroup"}
+```
+
+```HTML
+<luigi-container viewUrl="/index.html" clientPermissions='{"permission": "adminGroup"}'></luigi-container>
+```
+
 ### userSettings
 
 The user settings to be passed to the compound micro frontend
@@ -119,6 +260,14 @@ Type: [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Globa
 
 *   **since**: 1.0.0
 
+```js
+myContainer.userSettings = {language: 'de', theme: 'sap_horizon'}
+```
+
+```HTML
+<luigi-container viewUrl="/index.html" userSettings='{"language": "de", "theme":"sap_horizon"}'></luigi-container>
+```
+
 ### anchor
 
 The anchor value to be passed to the compound micro frontend.
@@ -129,6 +278,14 @@ Type: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Globa
 
 *   **since**: 1.0.0
 
+```js
+myContainer.anchor = '#foo'
+```
+
+```HTML
+<luigi-container viewUrl="/index.html" anchor='#foo'></luigi-container>
+```
+
 ### documentTitle
 
 The document title value to be passed to the compound micro frontend.
@@ -139,6 +296,14 @@ Type: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Globa
 
 *   **since**: 1.2.0
 
+```js
+myContainer.documentTitle = 'Luigi App'
+```
+
+```HTML
+<luigi-container viewUrl="/index.html" documentTitle='Luigi App'></luigi-container>
+```
+
 ### hasBack
 
 The hasBack value to be passed to the compound micro frontend.
@@ -150,6 +315,14 @@ Type: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Globa
 
 *   **since**: 1.2.0
 
+```js
+myContainer.hasBack = '/detailsPage'
+```
+
+```HTML
+<luigi-container viewUrl="/index.html" hasBack='/detailsPage'></luigi-container>
+```
+
 ### dirtyStatus
 
 The dirty status value to be passed to the compound micro frontend.
@@ -161,6 +334,14 @@ Type: [boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Glob
 
 *   **since**: 1.2.0
 
+```js
+myContainer.dirtyStatus = true
+```
+
+```HTML
+<luigi-container viewUrl="/index.html" dirtyStatus='true'></luigi-container>
+```
+
 ### webcomponent
 
 The following properties can be set for the web component object. By default, the web component is set to true.
@@ -180,6 +361,14 @@ Type: ([boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Glo
 
 *   **since**: 1.0.0
 
+```js
+myContainer.webcomponent = { webComponentSettings: {type: 'module', selfRegistered: true, tagName: 'my-webcomponent'}}
+```
+#TODO: this is probably wrong/not the best way, maybe there is a custom element?
+```HTML
+<luigi-container webcomponent="{ webComponentSettings: {type: 'module', selfRegistered: true, tagName: 'my-webcomponent'}}"></luigi-container>
+```
+
 ### activeFeatureToggleList
 
 The list of active feature toggles to be passed to the compound microfrontend.
@@ -190,6 +379,14 @@ Type: [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global
 
 *   **since**: NEXT_RELEASE_CONTAINER
 
+```js
+myContainer.activeFeatureToggleList = ["enable-foo", "allow-bar"]
+```
+
+```HTML
+<luigi-container viewUrl="/index.html" activeFeatureToggleList='["enable-foo", "allow-bar"]'></luigi-container>
+```
+
 ### theme
 
 The theme to be passed to the compound microfrontend.
@@ -200,6 +397,14 @@ Type: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Globa
 
 *   **since**: NEXT_RELEASE_CONTAINER
 
+```js
+myContainer.theme = 'sap_horizon'
+```
+
+```HTML
+<luigi-container viewUrl="/index.html" theme='sap_horizon'></luigi-container>
+```
+
 ### updateContext
 
 Function that updates the context of the compound microfrontend.
@@ -229,3 +434,15 @@ Returns **void**
 **Meta**
 
 *   **since**: 1.0.0
+#TODO: made up example
+```js
+ ...
+  myContainer.deferInit = true
+}
+#or HTML: <luigi-container deferInit="true"></luigi-container> js: the handler
+
+eventHandlerFn{
+  ...
+  myContainer.init()
+}
+```