Merge pull request #48 from ma4nn/dependabot/npm_and_yarn/alpine-8a52b6a08d

ma4nn · web-flow · commit a12e2f524e59 · 2025-09-11T11:35:44.000+02:00
Bump the alpine group with 2 updates
diff --git a/bundlesize.config.json b/bundlesize.config.json
@@ -3,7 +3,7 @@
     {
       "path": "./dist/SankeyChart.lua",
       "compression": "none",
-      "maxSize": "950 kB"
+      "maxSize": "1 MB"
     }
   ]
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,8 +3,8 @@
   "description": "An extension for the great MoneyMoney app to export an interactive HTML Sankey Chart based on the transaction categories",
   "private": true,
   "dependencies": {
-    "@alpinejs/csp": "^3.14.9",
-    "@alpinejs/persist": "^3.14.9",
+    "@alpinejs/csp": "^3.15.0",
+    "@alpinejs/persist": "^3.15.0",
     "bootstrap": "^5.3.8",
     "highcharts": "^12.4.0",
     "lz-string": "^1.5.0"
diff --git a/playwright.config.ts b/playwright.config.ts
@@ -21,6 +21,7 @@ export default defineConfig({
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: 'html',
+  timeout: 10_000,
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     baseURL: 'http://127.0.0.1:8080',
diff --git a/src/app.ts b/src/app.ts
@@ -72,21 +72,21 @@ export function initApp(transactions: Array<Transaction>, currency: string = 'EU
         Alpine.store('error').setMessage('Konfiguration kann nicht geladen werden.');
     }
 
-    Alpine.data('alert-component', alertComponent);
-    Alpine.data('sankey-chart-component', () => sankeyChartComponent(categories.tree));
-    Alpine.data('transaction-meta', () => {
+    Alpine.data('alert', alertComponent);
+    Alpine.data('sankeychart', () => sankeyChartComponent(categories.tree));
+    Alpine.data('transactionmeta', () => {
         return {
             accounts: data.accounts.join(', '),
             start_date: data.startDate.toLocaleDateString(),
             end_date: data.endDate.toLocaleDateString(),
             transaction_count: data.transactions.length,
         }
     });
-    Alpine.data('scaler-component', () => scalerComponent(data.calculateNumberOfMonths()));
-    Alpine.data('threshold-slider-component', () => thresholdSliderComponent(categories.getOutgoingWeights()));
-    Alpine.data('categories-table-component', categoriesTableComponent);
-    Alpine.data('more-actions-component', moreActionsComponent);
-    Alpine.data('sorter-component', sorterComponent);
+    Alpine.data('scaler', () => scalerComponent(data.calculateNumberOfMonths()));
+    Alpine.data('thresholdslider', () => thresholdSliderComponent(categories.getOutgoingWeights()));
+    Alpine.data('categoriestable', categoriesTableComponent);
+    Alpine.data('moreactions', moreActionsComponent);
+    Alpine.data('sorter', sorterComponent);
 
     window.Alpine = Alpine;
     Alpine.start();
diff --git a/src/template.html b/src/template.html
@@ -24,7 +24,7 @@
     <header class="container-fluid text-center" aria-label="primary">
         <h1 class="my-4">Cashflows</h1>
 
-        <p class="lead" x-data="transaction-meta"><span x-text="accounts"></span> &dash; <span x-text="start_date"></span> bis <span x-text="end_date"></span></p>
+        <p class="lead" x-data="transactionmeta"><span x-text="accounts"></span> &dash; <span x-text="start_date"></span> bis <span x-text="end_date"></span></p>
     </header>
 
     <nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top">
@@ -38,11 +38,11 @@ <h1 class="my-4">Cashflows</h1>
                         </svg>
                         Kategorien anpassen
                     </button>
-                    <div class="form-check form-switch form-check-inline" x-data="scaler-component">
+                    <div class="form-check form-switch form-check-inline" x-data="scaler">
                         <input class="form-check-input" type="checkbox" role="switch" id="is-show-monthly" :checked="isScaled" @change="toggle" :disabled="isDisabled" :title="tooltip">
                         <label class="form-check-label" for="is-show-monthly" :title="tooltip">pro Monat</label>
                     </div>
-                    <div class="nav-item dropdown me-3" x-data="sorter-component">
+                    <div class="nav-item dropdown me-3" x-data="sorter">
                         <button class="nav-link dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                             Sortieren nach: <span x-text="label"></span>
                         </button>
@@ -55,10 +55,10 @@ <h1 class="my-4">Cashflows</h1>
                 </div>
                 <div class="d-flex align-items-center ms-md-auto mt-2 mt-md-0">
                     <label for="threshold" class="me-2">Detailgrad:</label>
-                    <input x-data="threshold-slider-component" type="range" class="form-range me-5" id="threshold" :min="minValue" :max="maxValue" :value="currentValue" @change="zoom" title="Detailgrad">
+                    <input x-data="thresholdslider" type="range" class="form-range me-5" id="threshold" :min="minValue" :max="maxValue" :value="currentValue" @change="zoom" title="Detailgrad">
                     <div class="nav-item dropdown me-3">
                         <button class="nav-link dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Aktionen</button>
-                        <ul class="dropdown-menu dropdown-menu-end" x-data="more-actions-component">
+                        <ul class="dropdown-menu dropdown-menu-end" x-data="moreactions">
                             <li><a class="dropdown-item icon-link" href="#" :href="sankeymaticUrl" target="_blank" rel="external noopener" title="Öffnet das aktuelle Sankey-Diagram in SankeyMATIC.com. Die Daten werden dabei in das entsprechende Format konvertiert und an den externen Anbieter übertragen.">in SankeyMATIC öffnen<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-up-right"></use></svg></a></li>
                             <li><hr class="dropdown-divider"></li>
                             <li><button class="dropdown-item" type="button" @click="reset">Chart zurücksetzen</button></li>
@@ -70,7 +70,7 @@ <h1 class="my-4">Cashflows</h1>
     </nav>
 
     <main class="container-fluid my-3">
-        <div x-data="alert-component">
+        <div x-data="alert">
             <div x-show="message" class="alert alert-danger" role="alert" x-transition x-cloak>
                 <h4 class="alert-heading">Schwerer Fehler</h4>
                 <span x-text="message"></span>
@@ -81,7 +81,7 @@ <h4 class="alert-heading">Schwerer Fehler</h4>
 
         <section id="sankey" class="row">
             <h2 class="visually-hidden">Sankey Chart</h2>
-            <div id="chart-container" x-data="sankey-chart-component"></div>
+            <div id="chart-container" x-data="sankeychart"></div>
         </section>
     </main>
 
@@ -105,14 +105,14 @@ <h5 class="offcanvas-title" id="offcanvasConfigLabel">Kategorien konfigurieren</
         </div>
         <div class="offcanvas-body pt-0">
             <p>
-                <small x-data="transaction-meta">
+                <small x-data="transactionmeta">
                     Das <a class="icon-link" href="https://de.wikipedia.org/wiki/Sankey-Diagramm" target="_blank" rel="external noopener">Sankey Chart<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-up-right"></use></svg></a>
                     zeigt die aus <a class="icon-link" href="https://moneymoney-app.com/" target="_blank" rel="external noopener">MoneyMoney<svg class="bi" aria-hidden="true"><use xlink:href="#arrow-up-right"></use></svg></a> exportierten Cashflows der
                     Konten <strong x-text="accounts"></strong> für den Zeitraum <strong><span x-text="start_date"></span> bis <span x-text="end_date"></span></strong>.
                     Es wurde aus insgesamt <strong id="transaction-count"><span x-text="transaction_count"></span> Transaktionen</strong> generiert.
                 </small>
             </p>
-            <form x-data="categories-table-component">
+            <form x-data="categoriestable">
                 <div class="row sticky-top bg-white">
                     <div class="col-12 pb-4">
                         <button id="apply-settings-btn" type="submit" class="btn btn-primary" data-bs-dismiss="offcanvas">Anwenden</button>
diff --git a/tests/chart.spec.ts b/tests/chart.spec.ts
@@ -58,6 +58,18 @@ test.beforeEach(async ({ page }) => {
     await page.goto('/');
 });
 
+test('no console errors during page load', async ({ page }) => {
+  const errors = [];
+
+  page.on('pageerror', error => {
+    errors.push(error.message);
+  });
+
+  await page.goto('/');
+
+  expect(errors).toEqual([]);
+});
+
 test('take screenshot', async ({ page }) => {
     await page.evaluate(() => document.querySelectorAll('header').forEach(header => header.remove()));
     await page.locator('#chart-container').screenshot({ path: 'tmp/sample.png' }); // take a screenshot for README file

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	`{`
`4`	`4`	`"path": "./dist/SankeyChart.lua",`
`5`	`5`	`"compression": "none",`
`6`		`- "maxSize": "950 kB"`
	`6`	`+ "maxSize": "1 MB"`
`7`	`7`	`}`
`8`	`8`	`]`
`9`	`9`	`}`