@kronos-integration/svelte-components 3.0.1 → 4.0.0

package/LICENSE

@@ -1,23 +1,12 @@
-Copyright (c) 2019-2024 by Kronos-Integration
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without
-modification, are permitted provided that the following conditions are met:
-
-* Redistributions of source code must retain the above copyright notice, this
-  list of conditions and the following disclaimer.
-
-* Redistributions in binary form must reproduce the above copyright notice,
-  this list of conditions and the following disclaimer in the documentation
-  and/or other materials provided with the distribution.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
-AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
-IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
-DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
-FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
-DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
-SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
-CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
-OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+Copyright (C) 2019-2025 by arlac77
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -1,6 +1,6 @@
 [![Svelte v5](https://img.shields.io/badge/svelte-v5-orange.svg)](https://svelte.dev)
 [![npm](https://img.shields.io/npm/v/@kronos-integration/svelte-components.svg)](https://www.npmjs.com/package/@kronos-integration/svelte-components)
-[![License](https://img.shields.io/badge/License-BSD%203--Clause-blue.svg)](https://opensource.org/licenses/BSD-3-Clause)
+[![License](https://img.shields.io/badge/License-0BSD-blue.svg)](https://spdx.org/licenses/0BSD.html)
 [![bundlejs](https://deno.bundlejs.com/?q=@kronos-integration/svelte-components\&badge=detailed)](https://bundlejs.com/?q=@kronos-integration/svelte-components)
 [![downloads](http://img.shields.io/npm/dm/@kronos-integration/svelte-components.svg?style=flat-square)](https://npmjs.org/package/@kronos-integration/svelte-components)
 [![GitHub Issues](https://img.shields.io/github/issues/Kronos-Integration/svelte-components.svg?style=flat-square)](https://github.com/Kronos-Integration/svelte-components/issues)
@@ -8,8 +8,7 @@
 [![Styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
 [![Known Vulnerabilities](https://snyk.io/test/github/Kronos-Integration/svelte-components/badge.svg)](https://snyk.io/test/github/Kronos-Integration/svelte-components)
-[![Coverage Status](https://coveralls.io/repos/Kronos-Integration/svelte-components/badge.svg)](https://coveralls.io/github/Kronos-Integration/svelte-components)
-[![Tested with TestCafe](https://img.shields.io/badge/tested%20with-TestCafe-2fa4cf.svg)](https://github.com/DevExpress/testcafe)
+[![Tested with playwright](https://img.shields.io/badge/tested%20with-playwright-2fa4cf.svg)](https://playwright.dev)
 
 # API
 

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@kronos-integration/svelte-components",
-  "version": "3.0.1",
+  "version": "4.0.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
   },
+  "packageManager": "npm@11.6.4+sha512.1118cab46a05a50aee6bff5b1b4fa1df18afff89d57465620a3518035026955db87c5bdf9d207b07b7487d99f2490d450cb774655ad63ec2cba7bf1d0ad25d45",
   "exports": {
     ".": {
       "svelte": "./src/index.svelte"
@@ -25,42 +26,44 @@
       "email": "markus.felten@gmx.de"
     }
   ],
-  "license": "BSD-2-Clause",
+  "license": "0BSD",
   "scripts": {
-    "prepare": "npm run prepare:vite",
+    "prepare": "node --run prepare:vite",
     "prepare:vite": "vite build",
     "start": "vite",
-    "test": "npm run test:cafe",
-    "test:cafe": "testcafe $BROWSER:headless tests/cafe/*-cafe.mjs --esm -s build/test --page-request-timeout 5000 --app-init-delay 8000 --app vite",
-    "docs": "documentation readme --section=API ./src/**/*.mjs",
-    "lint": "npm run lint:docs",
-    "lint:docs": "documentation lint ./src/**/*.mjs",
+    "test": "node --run test:playwright",
+    "test:playwright": "npx playwright test",
+    "docs": "documentation readme --section=API ./src**/*.mjs",
+    "lint": "node --run lint:docs",
+    "lint:docs": "documentation lint ./src**/*.mjs",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@kronos-integration/endpoint": "^9.5.4",
-    "@kronos-integration/service": "^11.0.0",
-    "svelte-guard-history-router": "^6.1.0"
+    "@kronos-integration/endpoint": "^11.0.5",
+    "@kronos-integration/service": "^15.1.1",
+    "pacc": "^5.2.0",
+    "svelte-guard-history-router": "^6.1.2"
   },
   "devDependencies": {
-    "@semantic-release/commit-analyzer": "^12.0.0",
-    "@semantic-release/exec": "^6.0.3",
-    "@semantic-release/github": "^10.0.5",
-    "@semantic-release/release-notes-generator": "^13.0.0",
-    "@sveltejs/vite-plugin-svelte": "^3.1.0",
+    "@playwright/test": "^1.57.0",
+    "@semantic-release/commit-analyzer": "^13.0.1",
+    "@semantic-release/exec": "^7.1.0",
+    "@semantic-release/github": "^12.0.2",
+    "@semantic-release/release-notes-generator": "^14.1.0",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "documentation": "^14.0.3",
-    "npm-pkgbuild": "^15.3.19",
-    "semantic-release": "^23.1.1",
-    "svelte": "^5.0.0-next.142",
-    "testcafe": "^3.6.0",
-    "vite": "^5.2.11",
-    "vite-plugin-compression2": "^1.1.1"
+    "npm-pkgbuild": "^19.1.0",
+    "playwright": "^1.57.0",
+    "semantic-release": "^25.0.2",
+    "svelte": "^5.45.8",
+    "vite": "^7.2.7",
+    "vite-plugin-compression2": "^2.4.0"
   },
   "peerDependencies": {
-    "svelte": "^5.0.0-next.0"
+    "svelte": "^5.45.2"
   },
   "optionalDependencies": {
-    "mf-hosting-frontend": "^3.2.0"
+    "mf-hosting-frontend": "^3.9.11"
   },
   "repository": {
     "type": "git",
@@ -130,6 +133,7 @@
     "inheritFrom": [
       "arlac77/template-arlac77-github",
       "arlac77/template-npm-pkgbuild",
+      "arlac77/template-playwright",
       "arlac77/template-svelte-component"
     ]
   }

package/src/ServicesPage.svelte

@@ -1,5 +1,5 @@
 <script>
-  export let router;
+  let { router } = $props();
 
   const route = router.route;
   const services = $route.value;

package/src/components/Connection.svelte

@@ -1,7 +1,6 @@
 <script>
   import { connectionPath } from "../util.mjs";
-  export let from;
-  export let to;
+  let { to, from } = $props();
 </script>
 
 <path

package/src/components/Endpoint.svelte

@@ -1,19 +1,11 @@
 <script>
-  import { setContext, createEventDispatcher } from "svelte";
+  import { setContext } from "svelte";
   import { ENDPOINT } from "../util.mjs";
   import Interceptor from "./Interceptor.svelte";
 
-  export let endpoint;
+  let { endpoint, endpintAction, interceptorAction } = $props();
 
   setContext(ENDPOINT, endpoint);
-
-  const dispatch = createEventDispatcher();
-
-  function click() {
-    dispatch("endpointAction", {
-      endpoint
-    });
-  }
 </script>
 
 <g
@@ -21,14 +13,14 @@
   class="endpoint"
   tabindex="0"
   role="button"
-  onclick={click}
-  onkeydown={click}
+  onclick={endpintAction}
+  onkeydown={endpintAction}
   transform="translate({endpoint.x},{endpoint.y})"
 >
   <text x="-6px" y="1px">{endpoint.name}</text>
   <circle r="3" />
 
   {#each endpoint.interceptors as interceptor, i}
-    <Interceptor on:interceptorAction {interceptor} x={10 + 10 * i} y={0} />
+    <Interceptor {interceptorAction} {interceptor} x={10 + 10 * i} y={0} />
   {/each}
 </g>

package/src/components/Interceptor.svelte

@@ -1,19 +1,10 @@
 <script>
-  import { setContext, createEventDispatcher } from "svelte";
+  import { setContext } from "svelte";
   import { INTERCEPTOR } from "../util.mjs";
 
-  export let interceptor;
-  export let x;
-  export let y;
-  setContext(INTERCEPTOR, interceptor);
-
-  const dispatch = createEventDispatcher();
+  let { interceptor, x, y, interceptorAction } = $props();
 
-  function click(event) {
-    dispatch("interceptorAction", {
-      interceptor
-    });
-  }
+  setContext(INTERCEPTOR, interceptor);
 
   const knownInterceptorTypes = new Set([
     "live-probe",
@@ -31,8 +22,8 @@
   {href}
   {x}
   {y}
-  onclick={click}
-  onkeydown={click}
+  onclick={interceptorAction}
+  onkeydown={interceptorAction}
   tabindex="0"
   role="button"
 />

package/src/components/Request.svelte

@@ -1,5 +1,5 @@
 <script>
-  export let request;
+  let { request } = $props();
 
   const owner = request.endpoint.owner;
   const x = owner.x + request.endpoint.x + 20;

package/src/components/Service.svelte

@@ -1,25 +1,16 @@
 <script>
   import {
     setContext,
-    createEventDispatcher,
     onMount
   } from "svelte";
   import { SERVICE, connectionPath } from "../util.mjs";
   import { makeDraggable } from "../dragging.mjs";
   import Endpoint from "./Endpoint.svelte";
 
-  export let service;
+  let { service, serviceAction, endpointAction, interceptorAction } = $props();
 
   setContext(SERVICE, service);
 
-  const dispatch = createEventDispatcher();
-
-  function click(event) {
-    dispatch("serviceAction", {
-      service
-    });
-  }
-
   let element;
 
   onMount(() => {
@@ -52,12 +43,12 @@
   transform="translate({service.x},{service.y})"
   role="button"
   tabindex="0"
-  onclick={click}
-  onkeydown={click}
+  onclick={serviceAction}
+  onkeydown={serviceAction}
 >
   <rect width={service.w} height={service.h} rx="4" />
   <text x="8" y="14">{service.name}</text>
   {#each Object.values(service.endpoints) as endpoint}
-    <Endpoint on:endpointAction on:interceptorAction {endpoint} />
+    <Endpoint {endpoint} {endpointAction} {interceptorAction} />
   {/each}
 </g>

package/src/components/ServiceCanvas.svelte

@@ -4,23 +4,21 @@
   import Service from "./Service.svelte";
   import Connection from "./Connection.svelte";
   import Request from "./Request.svelte";
-  import { getAttributes } from "model-attributes";
+  import { getAttributes } from "pacc";
 
-  export let services;
+  let { services } = $props();
 
   setContext(SERVICES, services);
 
-  let s;
-
-  $: {
-    s = $services;
-  }
-
   function serviceAction(event) {
-    services.serviceStore.set({
-      service: event.detail.service.name,
-      action: "start"
-    });
+    const service = event.detail?.service?.name;
+
+    if (service) {
+      services.serviceStore.set({
+        service,
+        action: "start"
+      });
+    }
   }
 
   function endpointAction(event) {
@@ -47,7 +45,7 @@
   }
 </script>
 
-<svg viewbox="0 0 {s.width} {s.height}">
+<svg viewbox="0 0 {services.width} {services.height}">
   <defs>
     <symbol id="interceptor" y="-3">
       <path d="M0 -3L6 6L0 6L6 -3z" />
@@ -101,24 +99,19 @@
   </defs>
 
   <g class="services">
-    {#each Object.values(s.services) as service}
-      <Service
-        {service}
-        on:endpointAction={endpointAction}
-        on:interceptorAction={interceptorAction}
-        on:serviceAction={serviceAction}
-      />
+    {#each Object.values(services.services) as service}
+      <Service {service} {endpointAction} {interceptorAction} {serviceAction} />
     {/each}
   </g>
 
   <g class="connections">
-    {#each s.connections as [from, to]}
+    {#each services.connections as [from, to]}
       <Connection {from} {to} />
     {/each}
   </g>
 
   <g class="requests">
-    {#each s.requests as request}
+    {#each services.requests as request}
       <Request {request} />
     {/each}
   </g>

package/src/index.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
   import ServiceCanvas from "./components/ServiceCanvas.svelte";
   import { ServiceProvider } from "./service-provider.mjs";
   export { ServiceCanvas, ServiceProvider };

package/src/service-provider.mjs

@@ -5,8 +5,6 @@ import {
 import { MockService } from "./mock-service.mjs";
 import { MockLogger } from "./mock-logger.mjs";
 
-globalThis.process = { env: {} };
-
 class NoneWaitingInitializationContext extends InitializationContext {
   async getServiceFactory(type) {
     const f = await super.getServiceFactory(type);
@@ -56,8 +54,7 @@ export class ServiceProvider extends ServiceProviderMixin(
     this.subscriptions.forEach(s => s(this));
   }
 
-  layout()
-  {
+  layout() {
     let cx = 0;
     let y = 0;