⬆️ chore: upgrade stencil to v4 (latest)

package.json

@@ -8,9 +8,9 @@
     "test:ci": "echo \"Root doesn't have any tests defined.\""
   },
   "devDependencies": {
-    "@porscheofficial/prettier-config-porschedigital": "2.3.0",
-    "@types/node": "18.11.18",
-    "typescript": "4.9.4"
+    "@porscheofficial/prettier-config-porschedigital": "4.0.0",
+    "@types/node": "20.6.0",
+    "typescript": "5.2.2"
   },
   "packageManager": "[email protected]"
 }

packages/cookie-consent-banner-react/package.json

@@ -43,15 +43,15 @@
     "@porscheofficial/cookie-consent-banner": "3.1.5"
   },
   "devDependencies": {
-    "@porscheofficial/eslint-config-porschedigital-react": "2.3.0",
-    "@types/react": "18.0.27",
-    "@types/react-dom": "18.0.10",
-    "eslint": "8.32.0",
-    "prettier": "2.8.3",
+    "@porscheofficial/eslint-config-porschedigital-react": "4.0.0",
+    "@types/react": "18.2.21",
+    "@types/react-dom": "18.2.7",
+    "eslint": "8.49.0",
+    "prettier": "3.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "rimraf": "4.1.1",
+    "rimraf": "5.0.1",
     "standard-version": "9.5.0",
-    "typescript": "4.9.4"
+    "typescript": "5.2.2"
   }
 }

packages/cookie-consent-banner-react/src/index.ts

@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 export * from "./stencilproxy/components";
 
 const isCustomEvent = (
-  event: Event
+  event: Event,
 ): event is CustomEvent<{
   acceptedCategories: string[];
 }> => {
@@ -26,21 +26,21 @@ export const useCookieConsent = (): string[] => {
   useEffect(() => {
     window.addEventListener(
       "cookie_consent_preferences_restored",
-      acceptedCategoriesListener
+      acceptedCategoriesListener,
     );
     window.addEventListener(
       "cookie_consent_preferences_updated",
-      acceptedCategoriesListener
+      acceptedCategoriesListener,
     );
 
     return (): void => {
       window.removeEventListener(
         "cookie_consent_preferences_restored",
-        acceptedCategoriesListener
+        acceptedCategoriesListener,
       );
       window.removeEventListener(
         "cookie_consent_preferences_updated",
-        acceptedCategoriesListener
+        acceptedCategoriesListener,
       );
     };
   }, []);

packages/cookie-consent-banner/package.json

@@ -44,20 +44,19 @@
     }
   },
   "dependencies": {
-    "@stencil/core": "2.22.1"
+    "@stencil/core": "4.2.1"
   },
   "devDependencies": {
-    "@porscheofficial/eslint-config-porschedigital-react": "2.3.0",
-    "@stencil/react-output-target": "0.4.0",
-    "@types/jest": "27.5.2",
-    "@types/puppeteer": "5.4.7",
-    "eslint": "8.32.0",
+    "@porscheofficial/eslint-config-porschedigital-react": "4.0.0",
+    "@stencil/react-output-target": "0.5.3",
+    "@types/jest": "27.0.3",
+    "eslint": "8.49.0",
     "eslint-plugin-html": "7.1.0",
-    "jest": "27.5.1",
-    "jest-cli": "27.5.1",
-    "prettier": "2.8.3",
-    "puppeteer": "15.5.0",
+    "jest": "27.0.3",
+    "jest-cli": "27.4.5",
+    "prettier": "3.0.3",
+    "puppeteer": "21.2.1",
     "standard-version": "9.5.0",
-    "typescript": "4.9.4"
+    "typescript": "5.2.2"
   }
 }

packages/cookie-consent-banner/src/components/cookie-consent-banner/cookie-consent-banner.test.ts

@@ -46,7 +46,7 @@ describe("Cookie Consent Banner", () => {
   it("should be displayed if no cookies are set", async () => {
     await page.setContent(cookieBannerFullyConfigured);
     const cookieBannerInnerDiv = await page.find(
-      "cookie-consent-banner >>> .cc"
+      "cookie-consent-banner >>> .cc",
     );
 
     expect(cookieBannerInnerDiv).toBeDefined();
@@ -60,7 +60,7 @@ describe("Cookie Consent Banner", () => {
       domain: "localhost",
     });
     const cookieBannerInnerDiv = await page.find(
-      "cookie-consent-banner >>> .cc"
+      "cookie-consent-banner >>> .cc",
     );
 
     expect(cookieBannerInnerDiv).toBeDefined();
@@ -75,7 +75,7 @@ describe("Cookie Consent Banner", () => {
     });
     await page.setContent(cookieBannerFullyConfigured);
     const cookieBannerInnerDiv = await page.find(
-      "cookie-consent-banner >>> .cc"
+      "cookie-consent-banner >>> .cc",
     );
 
     expect(cookieBannerInnerDiv).toBeNull();
@@ -96,7 +96,7 @@ describe("Cookie Consent Banner", () => {
     });
     await page.setContent(cookieBannerFullyConfigured);
     const cookieBannerInnerDiv = await page.find(
-      "cookie-consent-banner >>> .cc"
+      "cookie-consent-banner >>> .cc",
     );
 
     expect(cookieBannerInnerDiv).toBeNull();

packages/cookie-consent-banner/src/components/cookie-consent-banner/cookie-consent-banner.tsx

@@ -157,8 +157,8 @@ export class CookieConsentBanner {
     // Need to reset cookies?
     const consentWithdrawn = Boolean(
       this.acceptedCategoriesPersisted.filter(
-        (x) => !this.acceptedCategoriesNext.includes(x)
-      ).length
+        (x) => !this.acceptedCategoriesNext.includes(x),
+      ).length,
     );
     // Reset cookies
     if (!this.disableResetSiteCookiesOnConsentWithdrawn && consentWithdrawn) {
@@ -186,17 +186,17 @@ export class CookieConsentBanner {
 
   private handleAcceptAll(): void {
     this.acceptedCategoriesNext = this.availableCategories.map(
-      (category) => category.key
+      (category) => category.key,
     );
     this.persistSelection();
   }
 
   private handleEssentialsOnly(): void {
     const mandatoryCategories = this.availableCategories.filter(
-      (category) => category.isMandatory
+      (category) => category.isMandatory,
     );
     this.acceptedCategoriesNext = mandatoryCategories.map(
-      (category) => category.key
+      (category) => category.key,
     );
     this.persistSelection();
   }
@@ -239,7 +239,7 @@ export class CookieConsentBanner {
                         type="checkbox"
                         disabled={category.isMandatory ?? false}
                         checked={this.acceptedCategoriesNext.includes(
-                          category.key
+                          category.key,
                         )}
                         onChange={(event): void => {
                           const isChecked = (
@@ -253,7 +253,7 @@ export class CookieConsentBanner {
                           } else {
                             this.acceptedCategoriesNext =
                               this.acceptedCategoriesNext.filter(
-                                (item) => item !== category.key
+                                (item) => item !== category.key,
                               );
                           }
                         }}

packages/cookie-consent-banner/src/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html dir="ltr" lang="en">
   <head>
     <meta charset="utf-8" />
@@ -68,7 +68,7 @@
 
     <script>
       const cookieConsentBannerElement = document.querySelector(
-        "cookie-consent-banner"
+        "cookie-consent-banner",
       );
       // // EXAMPLE Remove Marketing
       cookieConsentBannerElement.availableCategories = [
@@ -98,7 +98,7 @@
     function loadAnalyticsScript() {
       // Add Script only once
       const scriptElementExists = document.querySelector(
-        "[data-scriptid='ga']"
+        "[data-scriptid='ga']",
       );
       if (scriptElementExists || window?.ga) return;
 
@@ -109,13 +109,13 @@
       scriptElement.setAttribute("async", "true");
       scriptElement.setAttribute(
         "src",
-        "https://www.googletagmanager.com/gtag/js?id=ENTERID"
+        "https://www.googletagmanager.com/gtag/js?id=ENTERID",
       );
       scriptElement.setAttribute("data-scriptid", "ga");
 
       firstScriptElement.parentNode.insertBefore(
         scriptElement,
-        firstScriptElement
+        firstScriptElement,
       );
     }
     // =========================================================================