@progressive-development/pd-spa-helper 0.3.102 → 0.3.103

package/dist/src/store/spa-app-reducer.js

@@ -1,48 +1,57 @@
-import { on, reducer } from 'ts-action';
-import { initIndexDBSucess, addLoadingState, loginSucess, routeAction, updateInternetOffline, removeLoadingState, changeSubTask } from './spa-app-actions.js';
+import { reducer, on } from "ts-action";
+import { updateInternetOffline, addLoadingState, changeSubTask, removeLoadingState, routeAction, initIndexDBSucess, loginSucess } from "./spa-app-actions.js";
 const initialState = {
-    loadingState: [],
+  loadingState: []
 };
-export const spaAppReducer = reducer(initialState, on(updateInternetOffline, (state, { payload }) => ({
+const spaAppReducer = reducer(
+  initialState,
+  on(updateInternetOffline, (state, { payload }) => ({
     ...state,
     offline: payload
-})), on(addLoadingState, (state, { payload }) => ({
+  })),
+  on(addLoadingState, (state, { payload }) => ({
     ...state,
     loadingState: [
-        ...(state.loadingState),
-        payload
+      ...state.loadingState,
+      payload
     ]
-})), on(changeSubTask, (state, { payload }) => ({
+  })),
+  on(changeSubTask, (state, { payload }) => ({
     ...state,
-    loadingState: state.loadingState.map(ls => {
-        var _a;
-        if (ls.actionKey === payload.loadingActionId) {
-            // change new sub task in sub task list
-            return {
-                ...ls,
-                subTask: (_a = ls.subTask) === null || _a === void 0 ? void 0 : _a.map(subLs => subLs.actionKey
-                    === payload.newTaskState.actionKey ? payload.newTaskState : subLs),
-            };
-        }
-        return ls;
+    loadingState: state.loadingState.map((ls) => {
+      var _a;
+      if (ls.actionKey === payload.loadingActionId) {
+        return {
+          ...ls,
+          subTask: (_a = ls.subTask) == null ? void 0 : _a.map((subLs) => subLs.actionKey === payload.newTaskState.actionKey ? payload.newTaskState : subLs)
+        };
+      }
+      return ls;
     })
-})), on(removeLoadingState, (state, { payload }) => {
+  })),
+  on(removeLoadingState, (state, { payload }) => {
     var _a;
-    return ({
-        ...state,
-        loadingState: (_a = state.loadingState) === null || _a === void 0 ? void 0 : _a.filter(a => a.actionKey !== payload)
-    });
-}), on(routeAction, (state, { payload }) => ({
+    return {
+      ...state,
+      loadingState: (_a = state.loadingState) == null ? void 0 : _a.filter((a) => a.actionKey !== payload)
+    };
+  }),
+  on(routeAction, (state, { payload }) => ({
     ...state,
     lastRoutes: [
-        ...(state.lastRoutes || []),
-        payload
+      ...state.lastRoutes || [],
+      payload
     ]
-})), on(initIndexDBSucess, (state) => ({
+  })),
+  on(initIndexDBSucess, (state) => ({
     ...state,
-    initIndexDB: true,
-})), on(loginSucess, (state) => ({
+    initIndexDB: true
+  })),
+  on(loginSucess, (state) => ({
     ...state,
-    userLogin: true,
-})));
-//# sourceMappingURL=spa-app-reducer.js.map
+    userLogin: true
+  }))
+);
+export {
+  spaAppReducer
+};

package/dist/src/store/spa-app-selector.js

@@ -1,23 +1,39 @@
-import { createFeatureStateSelector, createSelector } from "mini-rx-store";
-const getSpaAppFeatureState = createFeatureStateSelector('spaApp');
-export const getLoadingSelector = createSelector(getSpaAppFeatureState, state => {
-    // filter add only the oldest for each typ (avoid overlapping loading boxes with different size)
-    const orderByCreation = [...state.loadingState].sort((a, b) => { var _a, _b; return (((_a = a.creation) === null || _a === void 0 ? void 0 : _a.getMilliseconds()) || 0) - (((_b = b.creation) === null || _b === void 0 ? void 0 : _b.getMilliseconds()) || 0); });
-    // filter modal
+import { createFeatureStateSelector, createSelector } from "../../node_modules/mini-rx-store/index.esm.js";
+const getSpaAppFeatureState = createFeatureStateSelector("spaApp");
+const getLoadingSelector = createSelector(
+  getSpaAppFeatureState,
+  (state) => {
+    const orderByCreation = [...state.loadingState].sort(
+      (a, b) => {
+        var _a, _b;
+        return (((_a = a.creation) == null ? void 0 : _a.getMilliseconds()) || 0) - (((_b = b.creation) == null ? void 0 : _b.getMilliseconds()) || 0);
+      }
+    );
     const loadings = [];
-    const mainLoading = orderByCreation.filter(a => !a.smallBackground);
+    const mainLoading = orderByCreation.filter((a) => !a.smallBackground);
     if (mainLoading.length > 0) {
-        loadings.push(mainLoading[0]);
+      loadings.push(mainLoading[0]);
     }
-    const smallLoading = orderByCreation.filter(a => a.smallBackground);
+    const smallLoading = orderByCreation.filter((a) => a.smallBackground);
     if (smallLoading.length > 0) {
-        loadings.push(smallLoading[0]);
+      loadings.push(smallLoading[0]);
     }
     return loadings;
-});
-export const getOfflineSelector = createSelector(getSpaAppFeatureState, state => state.offline === true);
-export const getInitStatusSelector = createSelector(getSpaAppFeatureState, state => ({
+  }
+);
+const getOfflineSelector = createSelector(
+  getSpaAppFeatureState,
+  (state) => state.offline === true
+);
+const getInitStatusSelector = createSelector(
+  getSpaAppFeatureState,
+  (state) => ({
     login: state.userLogin,
     indexedDB: state.initIndexDB
-}));
-//# sourceMappingURL=spa-app-selector.js.map
+  })
+);
+export {
+  getInitStatusSelector,
+  getLoadingSelector,
+  getOfflineSelector
+};

package/dist/src/tmpown/pd-loading-state.js

@@ -1,53 +1,62 @@
-import { __decorate } from "tslib";
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { localized, msg } from '@lit/localize';
-import { classMap } from 'lit/directives/class-map.js';
-import '@progressive-development/pd-icon/pd-icon.js';
-let PdLoadingState = class PdLoadingState extends LitElement {
-    render() {
-        if (!this.loadingState) {
-            return '';
-        }
-        return this.loadingState.modal ? html `
+import { css, LitElement, html } from "lit";
+import { customElement as e } from "../../node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as n } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import "../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import { localized, msg } from "@lit/localize";
+import { classMap as o } from "../../node_modules/lit/node_modules/lit-html/directives/class-map.js";
+import "../../node_modules/@progressive-development/pd-icon/pd-icon.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let PdLoadingState = class extends LitElement {
+  render() {
+    if (!this.loadingState) {
+      return "";
+    }
+    return this.loadingState.modal ? html`
         <div id="modalId" class="modal">
           ${this._renderContent()}
         </div>
       ` : this._renderContent();
+  }
+  _renderContent() {
+    if (!this.loadingState) {
+      return "";
     }
-    _renderContent() {
-        if (!this.loadingState) {
-            return '';
-        }
-        return html `
-      <div class="${classMap({
-            content: !this.loadingState.smallBackground,
-            "no-modal-content": this.loadingState.modal !== true && this.loadingState.smallBackground !== true,
-            "background-content": this.loadingState.smallBackground === true,
-        })}">
+    return html`
+      <div class="${o({
+      content: !this.loadingState.smallBackground,
+      "no-modal-content": this.loadingState.modal !== true && this.loadingState.smallBackground !== true,
+      "background-content": this.loadingState.smallBackground === true
+    })}">
         <div class="${this.loadingState.smallBackground ? "background-loader" : "loader"}"></div>
-        <p>${this.loadingState.loadingTxt || (this.loadingState.smallBackground ?
-            msg("Daten werden synchronisiert", { id: "spaH.loadingstate.syncState" }) : msg("Bitte warten, Daten werden geladen", { id: "spaH.loadingstate.pleaseWait" }))}
+        <p>${this.loadingState.loadingTxt || (this.loadingState.smallBackground ? msg("Daten werden synchronisiert", { id: "spaH.loadingstate.syncState" }) : msg("Bitte warten, Daten werden geladen", { id: "spaH.loadingstate.pleaseWait" }))}
         </p>
-        ${this.loadingState.subTask && this.loadingState.subTask.length > 0 ? html `
+        ${this.loadingState.subTask && this.loadingState.subTask.length > 0 ? html`
         <ul class="sub-ul">
-            ${this.loadingState.subTask.map(task => html `
+            ${this.loadingState.subTask.map((task) => html`
             <li>
               <div class="sub-row">
                 ${task.loadingTxt}
-                ${task.completed ? html `<pd-icon class="sub-icon completed" icon="checkBox" activeIcon></pd-icon>`
-            : html `<pd-icon class="sub-icon loading" icon="syncIcon" activeIcon></pd-icon>`}
+                ${task.completed ? html`<pd-icon class="sub-icon completed" icon="checkBox" activeIcon></pd-icon>` : html`<pd-icon class="sub-icon loading" icon="syncIcon" activeIcon></pd-icon>`}
               </div>
             </li>
             `)}
         </ul>
-        ` : ''}
+        ` : ""}
       </div>
     `;
-    }
+  }
 };
 PdLoadingState.styles = [
-    css `
+  css`
       :host {
         display: block;
       }
@@ -162,12 +171,13 @@ PdLoadingState.styles = [
 
     `
 ];
-__decorate([
-    property({ type: Object })
-], PdLoadingState.prototype, "loadingState", void 0);
-PdLoadingState = __decorate([
-    localized(),
-    customElement('pd-loading-state')
+__decorateClass([
+  n({ type: Object })
+], PdLoadingState.prototype, "loadingState", 2);
+PdLoadingState = __decorateClass([
+  localized(),
+  e("pd-loading-state")
 ], PdLoadingState);
-export { PdLoadingState };
-//# sourceMappingURL=pd-loading-state.js.map
+export {
+  PdLoadingState
+};

package/dist/src/tmpown/pd-login.js

@@ -1,18 +1,28 @@
-import { __decorate } from "tslib";
-import { LitElement, css, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import '@progressive-development/pd-forms/pd-form-container.js';
-import '@progressive-development/pd-forms/pd-form-row.js';
-import '@progressive-development/pd-forms/pd-input.js';
-import '@progressive-development/pd-forms/pd-button.js';
-import { loginImpl } from '../service-provider/service-provider-impl.js';
-let PdLogin = class PdLogin extends LitElement {
-    /**
-     * @event login-success fired when login was successfully
-     */
-    static get styles() {
-        return [
-            css `
+import { LitElement, css, html } from "lit";
+import { customElement as e } from "../../node_modules/@lit/reactive-element/decorators/custom-element.js";
+import "../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import "../../node_modules/@progressive-development/pd-forms/pd-form-container.js";
+import "../../node_modules/@progressive-development/pd-forms/pd-form-row.js";
+import "../../node_modules/@progressive-development/pd-forms/pd-input.js";
+import "../../node_modules/@progressive-development/pd-forms/pd-button.js";
+import { loginImpl } from "../service-provider/service-provider-impl.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let PdLogin = class extends LitElement {
+  /**
+   * @event login-success fired when login was successfully
+   */
+  static get styles() {
+    return [
+      css`
         :host {
             display: flex;
             justify-content: center;
@@ -27,11 +37,11 @@ let PdLogin = class PdLogin extends LitElement {
             --pd-form-row-allign: center;            
         }
         
-      `,
-        ];
-    }
-    render() {
-        return html `
+      `
+    ];
+  }
+  render() {
+    return html`
     <div class="login-form">
         <pd-form-container id="loginFormId">
           
@@ -69,54 +79,53 @@ let PdLogin = class PdLogin extends LitElement {
     </div>
 
     `;
-    }
-    _accessLogin() {
-        var _a, _b, _c, _d;
-        // validate form
-        const detail = {
-            errorMap: new Map()
-        };
-        (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById("loginFormId")) === null || _b === void 0 ? void 0 : _b.dispatchEvent(new CustomEvent("validate-form", { detail }));
-        if (detail.errorMap.size === 0) {
-            // get form elements as input elements (for value access)
-            const elMail = (_c = this.shadowRoot) === null || _c === void 0 ? void 0 : _c.getElementById('eMail');
-            const elSec = (_d = this.shadowRoot) === null || _d === void 0 ? void 0 : _d.getElementById('pWord');
-            loginImpl(elMail === null || elMail === void 0 ? void 0 : elMail.value, elSec === null || elSec === void 0 ? void 0 : elSec.value)
-                .then((user) => {
-                this.dispatchEvent(new CustomEvent("login-success", {
-                    detail: user,
-                    bubbles: true,
-                    composed: true
-                }));
-            }).catch(error => {
-                switch (error.code) {
-                    case 'auth/invalid-email':
-                        // returnError.eType = 'user';
-                        // returnError.logMsg = 'Invalid mail format';
-                        this._dispatchToastEvent("E-Mail Format für Benutzer ist ungültig.");
-                        break;
-                    case 'auth/wrong-password':
-                    case 'auth/user-not-found':
-                        this._dispatchToastEvent("Anmeldung fehlgeschlagen, ungültige Benutzerdaten.");
-                        break;
-                    default:
-                        this._dispatchToastEvent("Technisches Problem aufgetreten, die Anmeldung kann leider aktuell nicht durchgeführt werden.");
-                }
-            });
-        }
-    }
-    _dispatchToastEvent(txt) {
-        this.dispatchEvent(new CustomEvent("toast-event", {
-            detail: {
-                txt, isError: true,
-            },
-            bubbles: true,
-            composed: true
+  }
+  _accessLogin() {
+    var _a, _b, _c, _d;
+    const detail = {
+      errorMap: /* @__PURE__ */ new Map()
+    };
+    (_b = (_a = this.shadowRoot) == null ? void 0 : _a.getElementById("loginFormId")) == null ? void 0 : _b.dispatchEvent(
+      new CustomEvent("validate-form", { detail })
+    );
+    if (detail.errorMap.size === 0) {
+      const elMail = (_c = this.shadowRoot) == null ? void 0 : _c.getElementById("eMail");
+      const elSec = (_d = this.shadowRoot) == null ? void 0 : _d.getElementById("pWord");
+      loginImpl(elMail == null ? void 0 : elMail.value, elSec == null ? void 0 : elSec.value).then((user) => {
+        this.dispatchEvent(new CustomEvent("login-success", {
+          detail: user,
+          bubbles: true,
+          composed: true
         }));
+      }).catch((error) => {
+        switch (error.code) {
+          case "auth/invalid-email":
+            this._dispatchToastEvent("E-Mail Format für Benutzer ist ungültig.");
+            break;
+          case "auth/wrong-password":
+          case "auth/user-not-found":
+            this._dispatchToastEvent("Anmeldung fehlgeschlagen, ungültige Benutzerdaten.");
+            break;
+          default:
+            this._dispatchToastEvent("Technisches Problem aufgetreten, die Anmeldung kann leider aktuell nicht durchgeführt werden.");
+        }
+      });
     }
+  }
+  _dispatchToastEvent(txt) {
+    this.dispatchEvent(new CustomEvent("toast-event", {
+      detail: {
+        txt,
+        isError: true
+      },
+      bubbles: true,
+      composed: true
+    }));
+  }
 };
-PdLogin = __decorate([
-    customElement("pd-login")
+PdLogin = __decorateClass([
+  e("pd-login")
 ], PdLogin);
-export { PdLogin };
-//# sourceMappingURL=pd-login.js.map
+export {
+  PdLogin
+};

package/dist/src/tmpown/pd-toast.js

@@ -1,61 +1,69 @@
-import { __decorate } from "tslib";
-/* eslint-disable wc/no-self-class */
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-let PdToast = class PdToast extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.isError = false;
-        this.isSuccess = false;
-        this.duration = -100;
-    }
-    render() {
-        return html `
+import { css, LitElement, html } from "lit";
+import { customElement as e } from "../../node_modules/@lit/reactive-element/decorators/custom-element.js";
+import { property as n } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import "../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let PdToast = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.isError = false;
+    this.isSuccess = false;
+    this.duration = -100;
+  }
+  render() {
+    return html`
       <slot></slot>
       <pd-icon @click="${this._close}" icon="closeLink" class="close-link"></pd-icon>
     `;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("aria-live", "polite");
+  }
+  updated(changedProps) {
+    if (changedProps.has("duration")) {
+      if (this.duration === -100) {
+        this._close();
+      } else {
+        this._show();
+      }
     }
-    connectedCallback() {
-        // eslint-disable-next-line wc/guard-super-call
-        super.connectedCallback();
-        this.setAttribute('aria-live', 'polite');
-    }
-    updated(changedProps) {
-        if (changedProps.has('duration')) {
-            if (this.duration === -100) {
-                this._close();
-            }
-            else {
-                this._show();
-            }
+  }
+  _show() {
+    return new Promise((resolve) => {
+      if (this.className === "show") ;
+      else {
+        if (this.duration >= 1e3) {
+          this.style.animation = `fadein 0.5s, fadeout 0.5s ${this.duration - 500}ms`;
         }
-    }
-    _show() {
-        return new Promise((resolve) => {
-            if (this.className === 'show') {
-                // Do nothing, prevent spamming
-            }
-            else {
-                // 1000ms to not overlap fadein and fadeout animations
-                if (this.duration >= 1000) {
-                    this.style.animation = `fadein 0.5s, fadeout 0.5s ${this.duration - 500}ms`;
-                }
-                this.className = 'show';
-                if (this.duration > 0) {
-                    setTimeout(() => {
-                        this._close();
-                        resolve("Ok");
-                    }, this.duration >= 1000 ? this.duration : 3000);
-                }
-            }
-        });
-    }
-    _close() {
-        this.style.animation = '';
-        this.className = this.className.replace('show', '');
-    }
+        this.className = "show";
+        if (this.duration > 0) {
+          setTimeout(
+            () => {
+              this._close();
+              resolve("Ok");
+            },
+            this.duration >= 1e3 ? this.duration : 3e3
+          );
+        }
+      }
+    });
+  }
+  _close() {
+    this.style.animation = "";
+    this.className = this.className.replace("show", "");
+  }
 };
-PdToast.styles = css `
+PdToast.styles = css`
     :host {
         --pd-icon-size: 1rem;        
 
@@ -102,17 +110,18 @@ PdToast.styles = css `
     }
     
     `;
-__decorate([
-    property({ type: Boolean, reflect: true })
-], PdToast.prototype, "isError", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], PdToast.prototype, "isSuccess", void 0);
-__decorate([
-    property({ type: Number })
-], PdToast.prototype, "duration", void 0);
-PdToast = __decorate([
-    customElement("pd-toast")
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], PdToast.prototype, "isError", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], PdToast.prototype, "isSuccess", 2);
+__decorateClass([
+  n({ type: Number })
+], PdToast.prototype, "duration", 2);
+PdToast = __decorateClass([
+  e("pd-toast")
 ], PdToast);
-export { PdToast };
-//# sourceMappingURL=pd-toast.js.map
+export {
+  PdToast
+};

package/package.json

@@ -3,24 +3,29 @@
   "description": "Webcomponent pd-spa-helper following open-wc recommendations",
   "license": "MIT",
   "author": "pd-spa-helper",
-  "version": "0.3.102",
+  "version": "0.3.103",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
     ".": "./dist/src/index.js",
-    "./pd-spa-helper.js": "./dist/src/pd-spa-helper.js",
     "./pd-panel-viewer": "./dist/src/tmpown/pd-panel-viewer.js",
     "./pd-panel": "./dist/src/tmpown/pd-panel.js"
   },
+  "files": [
+    "dist/",
+    "package.json",
+    "README.md",
+    "LICENSE"
+  ],
   "scripts": {
     "analyze": "cem analyze --litelement",
-    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
-    "build": "tsc && npm run analyze -- --exclude dist",
-    "prepublish": "tsc && npm run analyze -- --exclude dist",
+    "start": "vite",
+    "build": "vite build && npm run analyze -- --exclude dist",
+    "prepublish": "vite build && npm run analyze -- --exclude dist",
     "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
     "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
-    "test": "tsc && wtr --coverage",
-    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\"",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
     "localizeExtract": "lit-localize extract",
     "localizeBuild": "lit-localize build",
     "storybook": "storybook dev -p 6006",
@@ -32,7 +37,7 @@
     "@progressive-development/pd-dialog": "^0.1.84",
     "@progressive-development/pd-forms": "^0.2.16",
     "@progressive-development/pd-icon": "^0.1.23",
-    "@progressive-development/pd-order": "^0.1.124",
+    "@progressive-development/pd-order": "^0.1.130",
     "@progressive-development/pd-page": "^0.1.128",
     "@progressive-development/pd-wizard": "^0.1.83",
     "@types/hammerjs": "^2.0.45",
@@ -48,8 +53,6 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
     "@lit/localize-tools": "^0.7.2",
-    "@open-wc/eslint-config": "^4.3.0",
-    "@open-wc/testing": "^3.2.2",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
     "@storybook/blocks": "^7.5.3",
@@ -57,8 +60,6 @@
     "@storybook/web-components-vite": "^7.6.20",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
-    "@web/dev-server": "^0.1.38",
-    "@web/test-runner": "^0.13.31",
     "concurrently": "^5.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.10.0",
@@ -68,7 +69,9 @@
     "prettier": "^2.8.8",
     "storybook": "^7.6.20",
     "tslib": "^2.6.3",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "vite": "^5.4.11",
+    "vitest": "^2.1.8"
   },
   "customElements": "custom-elements.json",
   "eslintConfig": {