Light dom container (#3697)

SAP · Jun 28, 2024 · de44656 · de44656
1 parent 3654927
commit de44656
Show file tree

Hide file tree

Showing 14 changed files with 237 additions and 130 deletions.
diff --git a/code_quality.js b/code_quality.js
@@ -108,7 +108,7 @@ const groupFilesByExtension = files => {
 const prettifyFile = (file, config) => {
   try {
     const text = fs.readFileSync(file).toString();
-    if (prettier.check(text, config)) {
+    if (prettier.check(text, config) || config?.excludedFiles?.includes(file)) {
       return;
     }
 

diff --git a/container/cypress/e2e/test-app/compound/create-dynamic-compound-container.cy.js b/container/cypress/e2e/test-app/compound/create-dynamic-compound-container.cy.js
@@ -173,12 +173,84 @@ describe('create luigi-compound-container dynamically', () => {
 
     cy.get('luigi-compound-container')
       .shadow()
-      .then($container => {
-        cy.wrap($container)
-          .find(
-            'luigi-wc-68747470733a2f2f6c75696769776562636f6d706f6e656e74732e6769746c61622e696f2f6e6573746564322e6a73'
-          )
-          .should('not.exist');
-      });
+      .should('not.exist');
+  });
+  it('luigi compound container with no shadow dom', () => {
+    const scriptCode = `
+        <script>
+            const content = document.querySelector('.content');
+            const wc = document.createElement('luigi-compound-container');
+            wc.context = { title: 'Nested' }
+            wc.viewurl = 'https://luigiwebcomponents.gitlab.io/nested2.js';
+            wc.noShadow = true;
+            wc.compoundConfig = {
+                eventListeners: [
+                    {
+                        source: "*",
+                        name: 'buttonPressed',
+                        action: 'changeColor',
+                        dataConverter: (data) => {
+                            var rd = () => {
+                                return Math.round(Math.random() * 255);
+                            };
+
+                            return {
+                                color1: "251,244,199",
+                                color2: "255,149,219"
+                            }
+                        }
+                    }
+                ],
+                children: [{
+                    viewUrl: 'https://luigiwebcomponents.gitlab.io/layouts/panelHeader.js',
+                    context: {
+                        title: 'My Awesome Grid',
+                        description: 'Really awesome'
+                    },
+                    layoutConfig: {
+                        slot: "header"
+                    },
+                    eventListeners: [{
+                        source: 'input1',
+                        name: 'sendInput',
+                        action: 'update',
+                        dataConverter: (data) => {
+                            return 'new text: ' + data;
+                        }
+                    }]
+                }, {
+                    viewUrl: 'https://luigiwebcomponents.gitlab.io/layouts/panelFooter.js',
+                    context: {
+                        footer: 'This is the end of awesomeness'
+                    },
+                    layoutConfig: {
+                        slot: "footer"
+                    }
+                }, {
+                    viewUrl: 'https://luigiwebcomponents.gitlab.io/luigiwebcomponentmf/main.js',
+                    layoutConfig: {
+                        slot: "content"
+                    },
+                    context: {
+                        label: 'I am nested!'
+                    }
+                }, {
+                    viewUrl: 'https://luigiwebcomponents.gitlab.io/luigi-wc-mfe/main.js',
+                    context: {
+                        label: 'Update Joke',
+                        showAlert: false
+                    }
+                }]
+            };
+            content.appendChild(wc);
+            </script>
+       `;
+    const stub = cy.stub();
+    cy.on('window:alert', stub);
+    cy.visit(tetsPage);
+    cy.get('.content').invoke('append', scriptCode);
+    cy.get('luigi-compound-container')
+      .shadow()
+      .should('not.exist');
   });
 });
diff --git a/container/cypress/e2e/test-app/wc/create-dynamic-wc-container.cy.js b/container/cypress/e2e/test-app/wc/create-dynamic-wc-container.cy.js
@@ -73,9 +73,27 @@ describe('Create luigi-container dynamically', () => {
     cy.get('.content').invoke('append', htmlCode);
     cy.get('[data-test-id="luigi-container"]')
       .shadow()
-      .find(
-        'luigi-wc-687474703a2f2f6c6f63616c686f73743a383038302f68656c6c6f576f726c64574353656c66526567697374657265642e6a73'
-      )
+      .should('not.exist');
+  });
+
+  it('no shadow dom for LuigiContainer', () => {
+    cy.once('uncaught:exception', () => false);
+    const scriptCode = `
+      const lc = document.querySelector('#lc');
+      lc.viewurl = "./wc/helloWorldWC.js";
+      lc.webcomponent = true;
+      lc.noShadow = true;
+    `;
+    const htmlCode = `
+      <luigi-container data-test-id="luigi-container" id="lc"></luigi-container>
+      <script>${scriptCode}</script>
+    `;
+    const stub = cy.stub();
+    cy.on('window:alert', stub);
+    cy.visit(tetsPage);
+    cy.get('.content').invoke('append', htmlCode);
+    cy.get('[data-test-id="luigi-container"]')
+      .shadow()
       .should('not.exist');
   });
 });
diff --git a/container/public/package.json b/container/public/package.json
@@ -19,5 +19,5 @@
         "micro-frontends",
         "microfrontends"
     ],
-    "version": "1.1.0"
+    "version": "1.2.0-rc3"
 }
diff --git a/container/src/LuigiCompoundContainer.svelte b/container/src/LuigiCompoundContainer.svelte
@@ -1,10 +1,12 @@
 <svelte:options
   customElement={{
     tag: null,
+    shadow: 'none',
     props: {
       viewurl: { type: 'String', reflect: false, attribute: 'viewurl' },
       deferInit: { type: 'Boolean', attribute: 'defer-init' },
       context: { type: 'String', reflect: false, attribute: 'context' },
+      noShadow: { type: 'Boolean', attribute: 'no-shadow', reflect: false },
       compoundConfig: {
         type: 'Object',
         reflect: false,
@@ -46,7 +48,10 @@
           if (this.containerInitialized && name === 'context') {
             this.updateContext(JSON.parse(newValue));
           }
-        }
+        };
+        getNoShadow(){
+          return this.hasAttribute('no-shadow') || this.noShadow;
+        };
       };
     },
   }}
@@ -63,6 +68,7 @@
   export let webcomponent: any;
   export let context: string;
   export let deferInit: boolean;
+  export let noShadow: boolean;
   export let compoundConfig: any;
   export let nodeParams: any;
   export let searchParams: any;
@@ -89,10 +95,11 @@
       pathParams &&
       clientPermissions &&
       userSettings &&
-      anchor && 
+      anchor &&
       dirtyStatus &&
       hasBack &&
-      documentTitle
+      documentTitle && 
+      noShadow
     );
   };
 
@@ -101,40 +108,42 @@
       return;
     }
     thisComponent.updateContext = (contextObj: any, internal?: any) => {
-      mainComponent._luigi_mfe_webcomponent.context = contextObj;
+      (thisComponent.getNoShadow() ? thisComponent : mainComponent)._luigi_mfe_webcomponent.context = contextObj;
     };
     const ctx = GenericHelperFunctions.resolveContext(context);
     deferInit = false;
 
     const node = {
       compound: compoundConfig,
       viewUrl: viewurl,
-      webcomponent:
-        GenericHelperFunctions.checkWebcomponentValue(webcomponent) || true,
+      webcomponent: GenericHelperFunctions.checkWebcomponentValue(webcomponent) || true
     }; // TODO: fill with sth
-    webcomponentService
-      .renderWebComponentCompound(node, mainComponent, ctx)
-      .then((compCnt) => {
-        eventBusElement = compCnt as HTMLElement;
-        if (thisComponent.hasAttribute('skip-init-check') || !node.viewUrl) {
-          thisComponent.initialized = true;
-          setTimeout(() => {
-            webcomponentService.dispatchLuigiEvent(Events.INITIALIZED, {});
-          });
-        } else if (
-          (eventBusElement as any).LuigiClient &&
-          !(eventBusElement as any).deferLuigiClientWCInit
-        ) {
-          thisComponent.initialized = true;
+    if(!thisComponent.getNoShadow()){
+      mainComponent.innerHTML=''
+      const shadow = thisComponent.attachShadow({ mode: "open"});
+      shadow.append(mainComponent);
+    }else{
+      //removing mainComponent
+      thisComponent.innerHTML = '';
+    }
+    webcomponentService.renderWebComponentCompound(node, thisComponent.getNoShadow() ? thisComponent : mainComponent, ctx).then(compCnt => {
+      eventBusElement = compCnt as HTMLElement;
+      if (thisComponent.hasAttribute('skip-init-check') || !node.viewUrl) {
+        thisComponent.initialized = true;
+        setTimeout(() => {
           webcomponentService.dispatchLuigiEvent(Events.INITIALIZED, {});
-        }
-      });
+        });
+      } else if ((eventBusElement as any).LuigiClient && !(eventBusElement as any).deferLuigiClientWCInit) {
+        thisComponent.initialized = true;
+        webcomponentService.dispatchLuigiEvent(Events.INITIALIZED, {});
+      }
+    });
     containerInitialized = true;
     thisComponent.containerInitialized = true;
   };
 
   onMount(async () => {
-    const thisComponent: any = (mainComponent.getRootNode() as ShadowRoot).host;
+    const thisComponent: any = mainComponent.getRootNode() === document ? mainComponent.parentNode : (mainComponent.getRootNode() as ShadowRoot).host;
 
     thisComponent.init = () => {
       initialize(thisComponent);
@@ -156,4 +165,4 @@
     height: 100%;
     border: none;
   }
-</style>
+</style>