-
Notifications
You must be signed in to change notification settings - Fork 172
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
clarify the difference between attributes and properties #3856
base: main
Are you sure you want to change the base?
Changes from all commits
c30fc3a
3396085
3035b6e
be656db
354d840
d52774c
e3e0825
8c63eec
d93fcaa
294a844
42e6ce0
5ecdce6
ab442f4
3928988
8566a38
d210c83
96f5740
e7d4321
1fc5e1a
30b0f4f
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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). |
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -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 = { | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
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> | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Not sure if we should provide an example for compould attribute in html There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
``` | ||||||
|
||||||
### 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 | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. totally fine to set it to true |
||||||
```HTML | ||||||
<luigi-container viewUrl="/index.html" deferInit="true"></luigi-container> | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
``` | ||||||
|
||||||
### 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> | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
``` | ||||||
|
||||||
### 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> | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
``` | ||||||
|
||||||
### 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> | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
``` | ||||||
|
||||||
### 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> | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
``` | ||||||
|
||||||
### 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> | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
``` | ||||||
|
||||||
### 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> | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
``` | ||||||
|
||||||
### 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> | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
``` | ||||||
|
||||||
### 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> | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
``` | ||||||
|
||||||
### 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> | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
``` | ||||||
|
||||||
### 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> | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
``` | ||||||
|
||||||
### 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() | ||||||
} | ||||||
``` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.