feat(core): prevent define icons by library (#1609)

Co-authored-by: Lukas Maurer <[email protected]>
siemens · Dec 17, 2024 · 89801b1 · 89801b1
1 parent c466ed6
commit 89801b1
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 21 deletions.
diff --git a/.changeset/khaki-moles-cry.md b/.changeset/khaki-moles-cry.md
@@ -0,0 +1,11 @@
+---
+'@siemens/ix': minor
+---
+
+Add `meta`-tag feature to disable default load of `@siemens/ix-icons`
+
+```html
+<meta name="ix:legacy-icons" content="false" />
+```
+
+In addition the warning is removed if no icon component is provided.
diff --git a/packages/core/playwright-ct.config.ts b/packages/core/playwright-ct.config.ts
@@ -18,7 +18,7 @@ import defaultConfig from './playwright.config';
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config: PlaywrightTestConfig = {
   ...defaultConfig,
-  testMatch: path.join(__dirname, 'src', 'components', '**', '*.ct.ts'),
+  testMatch: path.join(__dirname, 'src', '**', '*.ct.ts'),
   reporter: 'list',
   projects: [
     {

diff --git a/packages/core/src/index.html b/packages/core/src/index.html
@@ -12,6 +12,7 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
     />
+    <meta name="ix:legacy-icons" content="false" />
     <title>Stencil Component Starter</title>
 
     <script type="module" src="/build/siemens-ix.esm.js"></script>

diff --git a/packages/core/src/setup.ct.ts b/packages/core/src/setup.ct.ts
@@ -0,0 +1,21 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { expect } from '@playwright/test';
+import { test } from '@utils/test';
+
+test('should not define icons if meta tag is set to false', async ({
+  page,
+  mount,
+}) => {
+  await mount(`<ix-icon name="star"></ix-icon>`, {
+    headTags: ['<meta name="ix:legacy-icons" content="false" />'],
+  });
+  await page.waitForTimeout(1000);
+  await expect(page.locator('ix-icon')).not.toBeVisible();
+});
diff --git a/packages/core/src/setup.ts b/packages/core/src/setup.ts
@@ -9,20 +9,32 @@
 
 import { setPlatformHelpers } from '@stencil/core';
 
+export function shouldDefineIcons(): boolean {
+  const content = document.head
+    ?.querySelector('meta[name="ix:legacy-icons"]')
+    ?.getAttribute('content');
+
+  if (!content) {
+    return true;
+  }
+
+  return content.toLowerCase() === 'true';
+}
+
 async function setupIcons() {
   if (typeof window === 'undefined') {
     return;
   }
 
+  if (shouldDefineIcons() === false) {
+    return;
+  }
+
   const iconComponent = window.customElements.get('ix-icon');
   if (iconComponent) {
     return;
   }
 
-  console.warn(
-    'ix-icon web component not loaded. Using local fallback version'
-  );
-
   const ixIcons = await import('@siemens/ix-icons/loader');
   await ixIcons.defineCustomElements();
 }

diff --git a/packages/core/src/tests/utils/ct/index.html b/packages/core/src/tests/utils/ct/index.html
@@ -21,7 +21,5 @@
   </head>
   <body>
     <div id="mount"></div>
-
-    <script src="/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
 </html>
diff --git a/packages/core/src/tests/utils/test/page.ts b/packages/core/src/tests/utils/test/page.ts
@@ -54,21 +54,49 @@ export const test = testBase.extend({
     await page.goto(
       `http://127.0.0.1:8080/src/tests/utils/ct/index.html?theme=${theme}`
     );
-    use((selector: string) => {
-      return page.evaluateHandle(
-        async ({ componentSelector }) => {
-          await window.customElements.whenDefined('ix-button');
-          const mount = document.querySelector('#mount');
+    use(
+      (
+        selector: string,
+        config?: {
+          headTags?: string[];
+        }
+      ) => {
+        return page.evaluateHandle(
+          async ({ componentSelector, config }) => {
+            if (config?.headTags) {
+              config.headTags.forEach((tag) => {
+                const head = document.querySelector('head');
+                if (!head) {
+                  throw new Error('No head tag found in the document.');
+                }
 
-          if (!mount) {
-            throw new Error('No mount point found in the document.');
-          }
+                head.innerHTML += tag;
+              });
+            }
 
-          mount.innerHTML = componentSelector;
-          return mount.children.item(0) as HTMLElement;
-        },
-        { componentSelector: selector }
-      );
-    });
+            const loadScript = document.createElement('script');
+            loadScript.src = '/scripts/e2e/load-e2e-runtime.js';
+            document.body.appendChild(loadScript);
+
+            await new Promise<void>((resolve) => {
+              loadScript.onload = async () => {
+                resolve();
+              };
+            });
+
+            await window.customElements.whenDefined('ix-button');
+            const mount = document.querySelector('#mount');
+
+            if (!mount) {
+              throw new Error('No mount point found in the document.');
+            }
+
+            mount.innerHTML = componentSelector;
+            return mount.children.item(0) as HTMLElement;
+          },
+          { componentSelector: selector, config }
+        );
+      }
+    );
   },
 });
diff --git a/packages/documentation/docs/installation/javascript.md b/packages/documentation/docs/installation/javascript.md
@@ -67,6 +67,16 @@ import { defineCustomElements as defineIxIconCustomElement } from '@siemens/ix-i
 })();
 ```
 
+## Prevent `@siemens/ix-icons` to be defined during library load
+
+> This can be useful if you have configured CSP nonce, because of the lazy bootstrap behavior of the components.
+
+To prevent the definition of the `ix-icon` component during library setup, add the following ```<meta>``` HTML element to your application:
+
+```html
+<meta name="ix:legacy-icons" content="false" />
+```
+
 ## Example
 
 <Playground
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,7 +21,5 @@ @@
       </head>
       <body>
         <div id="mount"></div>
-        <script src="/scripts/e2e/load-e2e-runtime.js"></script>
       </body>
     </html>