smol.js 0.1.0

package/dist/smol.js

@@ -0,0 +1,432 @@
+function html(strings, ...values) {
+  return {
+    strings,
+    values,
+    _isTemplateResult: true
+  };
+}
+function isTemplateResult(value) {
+  return value && value._isTemplateResult === true;
+}
+function renderToString(template) {
+  let result = "";
+  for (let i = 0; i < template.strings.length; i++) {
+    result += template.strings[i];
+    if (i < template.values.length) {
+      const value = template.values[i];
+      result += stringifyValue(value);
+    }
+  }
+  return result;
+}
+function stringifyValue(value) {
+  if (value == null) {
+    return "";
+  }
+  if (isTemplateResult(value)) {
+    return renderToString(value);
+  }
+  if (Array.isArray(value)) {
+    return value.map(stringifyValue).join("");
+  }
+  if (typeof value === "boolean") {
+    return value ? "" : "";
+  }
+  if (typeof value === "function") {
+    return "";
+  }
+  return escapeHtml(String(value));
+}
+function escapeHtml(unsafe) {
+  return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+function render(template, container) {
+  const existingStyles = Array.from(container.querySelectorAll("style"));
+  let html2 = "";
+  const markers = [];
+  let markerIndex = 0;
+  for (let i = 0; i < template.strings.length; i++) {
+    const str = template.strings[i];
+    html2 += str;
+    if (i < template.values.length) {
+      const value = template.values[i];
+      const lastPart = str.trim();
+      if (lastPart.endsWith("@click=") || lastPart.endsWith("@change=") || lastPart.includes("@")) {
+        markers.push({ index: markerIndex, value, type: "event" });
+        html2 += `"__smol_event_${markerIndex}__"`;
+        markerIndex++;
+      } else if (lastPart.endsWith("?disabled=") || lastPart.endsWith("?checked=") || lastPart.includes("?")) {
+        markers.push({ index: markerIndex, value, type: "boolean" });
+        html2 += `"__smol_bool_${markerIndex}__"`;
+        markerIndex++;
+      } else {
+        html2 += stringifyValue(value);
+      }
+    }
+  }
+  container.innerHTML = html2;
+  existingStyles.forEach((style) => {
+    container.insertBefore(style, container.firstChild);
+  });
+  markers.forEach((marker) => {
+    if (marker.type === "event") {
+      const markerAttr = `__smol_event_${marker.index}__`;
+      const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT);
+      let node;
+      while (node = walker.nextNode()) {
+        const element = node;
+        for (const attr of Array.from(element.attributes)) {
+          if (attr.value === markerAttr) {
+            const eventName = attr.name.replace("@", "");
+            element.removeAttribute(attr.name);
+            if (typeof marker.value === "function") {
+              element.addEventListener(eventName, marker.value);
+            }
+          }
+        }
+      }
+    } else if (marker.type === "boolean") {
+      const markerAttr = `__smol_bool_${marker.index}__`;
+      const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT);
+      let node;
+      while (node = walker.nextNode()) {
+        const element = node;
+        for (const attr of Array.from(element.attributes)) {
+          if (attr.value === markerAttr) {
+            const attrName = attr.name.replace("?", "");
+            element.removeAttribute(attr.name);
+            if (marker.value) {
+              element.setAttribute(attrName, "");
+            }
+          }
+        }
+      }
+    }
+  });
+}
+function smolComponent(config) {
+  const {
+    tag,
+    mode = "open",
+    observedAttributes = [],
+    styles = "",
+    template,
+    connected,
+    disconnected,
+    attributeChanged
+  } = config;
+  if (!tag.includes("-")) {
+    throw new Error(`Custom element tag names must contain a hyphen: "${tag}"`);
+  }
+  class SmolCustomElement extends HTMLElement {
+    static get observedAttributes() {
+      return observedAttributes;
+    }
+    constructor() {
+      super();
+      if (!this.shadowRoot) {
+        this.attachShadow({ mode });
+      }
+      if (styles && this.shadowRoot) {
+        const styleElement = document.createElement("style");
+        styleElement.textContent = styles;
+        this.shadowRoot.appendChild(styleElement);
+      }
+    }
+    connectedCallback() {
+      if (connected) {
+        connected.call(this);
+      }
+      this.render();
+    }
+    disconnectedCallback() {
+      if (disconnected) {
+        disconnected.call(this);
+      }
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+      if (this.isConnected) {
+        this.render();
+      }
+      if (attributeChanged) {
+        attributeChanged.call(this, name, oldValue, newValue);
+      }
+    }
+    /**
+     * Render the component template
+     */
+    render() {
+      if (!template || !this.shadowRoot) {
+        return;
+      }
+      const ctx = {
+        emit: this.emit.bind(this),
+        render: this.render.bind(this),
+        // Add element as context (for accessing attributes, etc.)
+        element: this
+      };
+      const result = template.call(this, ctx);
+      if (!result) {
+        return;
+      }
+      if (typeof result === "string") {
+        this.shadowRoot.innerHTML = result;
+      } else if (isTemplateResult(result)) {
+        render(result, this.shadowRoot);
+      }
+    }
+    /**
+     * Emit a custom event
+     */
+    emit(name, detail) {
+      this.dispatchEvent(new CustomEvent(name, {
+        detail,
+        bubbles: true,
+        composed: true
+      }));
+    }
+  }
+  SmolCustomElement._smolConfig = config;
+  SmolCustomElement._smolTag = tag;
+  if (!customElements.get(tag)) {
+    customElements.define(tag, SmolCustomElement);
+  }
+  return SmolCustomElement;
+}
+const serviceRegistry = /* @__PURE__ */ new Map();
+function smolService(config) {
+  const { name, factory, singleton = true } = config;
+  if (singleton) {
+    if (serviceRegistry.has(name)) {
+      return serviceRegistry.get(name);
+    }
+    const instance = factory();
+    serviceRegistry.set(name, instance);
+    return instance;
+  }
+  return factory();
+}
+function inject(name) {
+  if (!serviceRegistry.has(name)) {
+    throw new Error(`Service "${name}" not found. Did you forget to create it with smolService()?`);
+  }
+  return serviceRegistry.get(name);
+}
+function clearServices() {
+  serviceRegistry.clear();
+}
+function smolSignal(initialValue) {
+  let _value = initialValue;
+  const _subscribers = /* @__PURE__ */ new Set();
+  const signal = {
+    get value() {
+      return _value;
+    },
+    set value(newValue) {
+      if (_value !== newValue) {
+        _value = newValue;
+        _subscribers.forEach((fn) => fn(_value));
+      }
+    },
+    subscribe(fn) {
+      _subscribers.add(fn);
+      return () => {
+        _subscribers.delete(fn);
+      };
+    },
+    _subscribers
+  };
+  return signal;
+}
+function computed(fn) {
+  const signal = smolSignal(fn());
+  return signal;
+}
+function effect(fn) {
+  fn();
+  return () => {
+  };
+}
+function smolState(initialValue) {
+  const _subscribers = /* @__PURE__ */ new Set();
+  const notify = () => {
+    _subscribers.forEach((fn) => fn());
+  };
+  const data = new Proxy(initialValue, {
+    set(target, property, value) {
+      const oldValue = target[property];
+      if (oldValue !== value) {
+        target[property] = value;
+        notify();
+      }
+      return true;
+    },
+    deleteProperty(target, property) {
+      if (property in target) {
+        delete target[property];
+        notify();
+      }
+      return true;
+    }
+  });
+  const state = {
+    data,
+    subscribe(fn) {
+      _subscribers.add(fn);
+      return () => {
+        _subscribers.delete(fn);
+      };
+    },
+    _subscribers
+  };
+  return state;
+}
+function css(strings, ...values) {
+  let result = "";
+  for (let i = 0; i < strings.length; i++) {
+    result += strings[i];
+    if (i < values.length) {
+      result += String(values[i]);
+    }
+  }
+  return result.trim();
+}
+function renderComponentToString(ComponentClass, attributes = {}) {
+  const instance = new ComponentClass();
+  Object.entries(attributes).forEach(([key, value]) => {
+    instance.setAttribute(key, value);
+  });
+  const tagName = ComponentClass._smolTag || "unknown-element";
+  const config = ComponentClass._smolConfig;
+  const styles = (config == null ? void 0 : config.styles) || "";
+  if (config == null ? void 0 : config.connected) {
+    config.connected.call(instance);
+  }
+  let templateHTML = "";
+  if (config == null ? void 0 : config.template) {
+    const ctx = {
+      emit: instance.emit.bind(instance),
+      render: () => {
+      },
+      element: instance
+    };
+    const result = config.template.call(instance, ctx);
+    if (typeof result === "string") {
+      templateHTML = result;
+    } else if (result && result._isTemplateResult) {
+      templateHTML = renderToString(result);
+    }
+  }
+  if (globalThis.document && templateHTML) {
+    const template = document.createElement("template");
+    template.innerHTML = templateHTML;
+    expandNestedComponents(template.content);
+    templateHTML = template.innerHTML;
+  }
+  const shadowContent = `
+    ${styles ? `<style>${styles}</style>` : ""}
+    ${templateHTML}
+  `.trim();
+  const attrString = Object.entries(attributes).map(([key, value]) => `${key}="${escapeAttr(value)}"`).join(" ");
+  return `
+<${tagName}${attrString ? " " + attrString : ""}>
+  <template shadowrootmode="open">
+    ${shadowContent}
+  </template>
+</${tagName}>
+  `.trim();
+}
+function escapeAttr(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function ssr(components) {
+  return components.map(({ component, attributes }) => renderComponentToString(component, attributes)).join("\n");
+}
+function expandNestedComponents(node) {
+  const children = Array.from(node.childNodes);
+  children.forEach((child) => {
+    if (child.nodeType === 1) {
+      const element = child;
+      const tagName = element.tagName.toLowerCase();
+      if (globalThis.customElements && tagName.includes("-")) {
+        const ComponentClass = customElements.get(tagName);
+        if (ComponentClass) {
+          const attributes = {};
+          Array.from(element.attributes).forEach((attr) => {
+            attributes[attr.name] = attr.value;
+          });
+          const rendered = renderComponentToString(ComponentClass, attributes);
+          const temp = document.createElement("div");
+          temp.innerHTML = rendered;
+          const newChild = temp.firstElementChild;
+          if (newChild) {
+            element.replaceWith(newChild);
+            return;
+          }
+        }
+      }
+      expandNestedComponents(element);
+    }
+  });
+}
+function hydrateComponent(element) {
+  if (!element.shadowRoot) {
+    return;
+  }
+  element._hydrated = true;
+  attachEventListeners(element);
+}
+function attachEventListeners(element) {
+  if (!element.shadowRoot) return;
+  const walker = document.createTreeWalker(
+    element.shadowRoot,
+    NodeFilter.SHOW_ELEMENT
+  );
+  const elementsWithEvents = [];
+  let node;
+  while (node = walker.nextNode()) {
+    const el = node;
+    const events = /* @__PURE__ */ new Map();
+    for (const attr of Array.from(el.attributes)) {
+      if (attr.name.startsWith("data-smol-event-")) {
+        const eventName = attr.name.replace("data-smol-event-", "");
+        events.set(eventName, attr.value);
+      }
+    }
+    if (events.size > 0) {
+      elementsWithEvents.push({ element: el, events });
+    }
+  }
+  elementsWithEvents.forEach(({ element: el, events }) => {
+    events.forEach((handlerId, eventName) => {
+      console.warn(`Hydration: Found event listener ${eventName} but handler lookup not implemented`);
+    });
+  });
+}
+function hydrateAll() {
+  const allElements = document.querySelectorAll("*");
+  allElements.forEach((element) => {
+    if (element.tagName.includes("-") && element.shadowRoot) {
+      hydrateComponent(element);
+    }
+  });
+}
+export {
+  clearServices,
+  computed,
+  css,
+  effect,
+  html,
+  hydrateAll,
+  hydrateComponent,
+  inject,
+  isTemplateResult,
+  render,
+  renderComponentToString,
+  renderToString,
+  smolComponent,
+  smolService,
+  smolSignal,
+  smolState,
+  ssr
+};

package/dist/smol.umd.js

@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Smol={})}(this,function(t){"use strict";function e(t){return t&&!0===t.t}function n(t){let e="";for(let n=0;n<t.strings.length;n++)e+=t.strings[n],n<t.values.length&&(e+=o(t.values[n]));return e}function o(t){return null==t?"":e(t)?n(t):Array.isArray(t)?t.map(o).join(""):"boolean"==typeof t||"function"==typeof t?"":String(t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;")}function s(t,e){const n=Array.from(e.querySelectorAll("style"));let s="";const i=[];let r=0;for(let c=0;c<t.strings.length;c++){const e=t.strings[c];if(s+=e,c<t.values.length){const n=t.values[c],u=e.trim();u.endsWith("@click=")||u.endsWith("@change=")||u.includes("@")?(i.push({index:r,value:n,type:"event"}),s+=`"__smol_event_${r}__"`,r++):u.endsWith("?disabled=")||u.endsWith("?checked=")||u.includes("?")?(i.push({index:r,value:n,type:"boolean"}),s+=`"__smol_bool_${r}__"`,r++):s+=o(n)}}e.innerHTML=s,n.forEach(t=>{e.insertBefore(t,e.firstChild)}),i.forEach(t=>{if("event"===t.type){const n=`__smol_event_${t.index}__`,o=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT);let s;for(;s=o.nextNode();){const e=s;for(const o of Array.from(e.attributes))if(o.value===n){const n=o.name.replace("@","");e.removeAttribute(o.name),"function"==typeof t.value&&e.addEventListener(n,t.value)}}}else if("boolean"===t.type){const n=`__smol_bool_${t.index}__`,o=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT);let s;for(;s=o.nextNode();){const e=s;for(const o of Array.from(e.attributes))if(o.value===n){const n=o.name.replace("?","");e.removeAttribute(o.name),t.value&&e.setAttribute(n,"")}}}})}const i=new Map;function r(t){let e=t;const n=new Set;return{get value(){return e},set value(t){e!==t&&(e=t,n.forEach(t=>t(e)))},subscribe:t=>(n.add(t),()=>{n.delete(t)}),o:n}}function c(t,e={}){const o=new t;Object.entries(e).forEach(([t,e])=>{o.setAttribute(t,e)});const s=t.i||"unknown-element",i=t.u,r=(null==i?void 0:i.styles)||"";(null==i?void 0:i.connected)&&i.connected.call(o);let c="";if(null==i?void 0:i.template){const t={emit:o.emit.bind(o),render:()=>{},element:o},e=i.template.call(o,t);"string"==typeof e?c=e:e&&e.t&&(c=n(e))}if(globalThis.document&&c){const t=document.createElement("template");t.innerHTML=c,u(t.content),c=t.innerHTML}const l=`\n    ${r?`<style>${r}</style>`:""}\n    ${c}\n  `.trim(),f=Object.entries(e).map(([t,e])=>`${t}="${function(t){return t.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}(e)}"`).join(" ");return`\n<${s}${f?" "+f:""}>\n  <template shadowrootmode="open">\n    ${l}\n  </template>\n</${s}>\n  `.trim()}function u(t){Array.from(t.childNodes).forEach(t=>{if(1===t.nodeType){const e=t,n=e.tagName.toLowerCase();if(globalThis.customElements&&n.includes("-")){const t=customElements.get(n);if(t){const n={};Array.from(e.attributes).forEach(t=>{n[t.name]=t.value});const o=c(t,n),s=document.createElement("div");s.innerHTML=o;const i=s.firstElementChild;if(i)return void e.replaceWith(i)}}u(e)}})}function l(t){t.shadowRoot&&(t.l=!0,function(t){if(!t.shadowRoot)return;const e=document.createTreeWalker(t.shadowRoot,NodeFilter.SHOW_ELEMENT),n=[];let o;for(;o=e.nextNode();){const t=o,e=new Map;for(const n of Array.from(t.attributes))if(n.name.startsWith("data-smol-event-")){const t=n.name.replace("data-smol-event-","");e.set(t,n.value)}e.size>0&&n.push({element:t,events:e})}n.forEach(({element:t,events:e})=>{e.forEach((t,e)=>{})})}(t))}t.clearServices=function(){i.clear()},t.computed=function(t){return r(t())},t.css=function(t,...e){let n="";for(let o=0;o<t.length;o++)n+=t[o],o<e.length&&(n+=String(e[o]));return n.trim()},t.effect=function(t){return t(),()=>{}},t.html=function(t,...e){return{strings:t,values:e,t:!0}},t.hydrateAll=function(){document.querySelectorAll("*").forEach(t=>{t.tagName.includes("-")&&t.shadowRoot&&l(t)})},t.hydrateComponent=l,t.inject=function(t){if(!i.has(t))throw new Error(`Service "${t}" not found. Did you forget to create it with smolService()?`);return i.get(t)},t.isTemplateResult=e,t.render=s,t.renderComponentToString=c,t.renderToString=n,t.smolComponent=function(t){const{tag:n,mode:o="open",observedAttributes:i=[],styles:r="",template:c,connected:u,disconnected:l,attributeChanged:f}=t;if(!n.includes("-"))throw new Error(`Custom element tag names must contain a hyphen: "${n}"`);class a extends HTMLElement{static get observedAttributes(){return i}constructor(){if(super(),this.shadowRoot||this.attachShadow({mode:o}),r&&this.shadowRoot){const t=document.createElement("style");t.textContent=r,this.shadowRoot.appendChild(t)}}connectedCallback(){u&&u.call(this),this.render()}disconnectedCallback(){l&&l.call(this)}attributeChangedCallback(t,e,n){this.isConnected&&this.render(),f&&f.call(this,t,e,n)}render(){if(!c||!this.shadowRoot)return;const t={emit:this.emit.bind(this),render:this.render.bind(this),element:this},n=c.call(this,t);n&&("string"==typeof n?this.shadowRoot.innerHTML=n:e(n)&&s(n,this.shadowRoot))}emit(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}}return a.u=t,a.i=n,customElements.get(n)||customElements.define(n,a),a},t.smolService=function(t){const{name:e,factory:n,singleton:o=!0}=t;if(o){if(i.has(e))return i.get(e);const t=n();return i.set(e,t),t}return n()},t.smolSignal=r,t.smolState=function(t){const e=new Set,n=()=>{e.forEach(t=>t())};return{data:new Proxy(t,{set:(t,e,o)=>(t[e]!==o&&(t[e]=o,n()),!0),deleteProperty:(t,e)=>(e in t&&(delete t[e],n()),!0)}),subscribe:t=>(e.add(t),()=>{e.delete(t)}),o:e}},t.ssr=function(t){return t.map(({component:t,attributes:e})=>c(t,e)).join("\n")},Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});

package/dist/vite-plugin-smol-templates.d.ts

@@ -0,0 +1,20 @@
+import type { Plugin } from 'vite';
+/**
+ * Vite plugin for importing HTML templates as smol.js template functions
+ *
+ * This plugin allows you to write your component templates in separate .html files
+ * and import them into your components.
+ *
+ * @example
+ * ```typescript
+ * import template from './my-component.html?smol';
+ *
+ * smolComponent({
+ *   tag: 'my-component',
+ *   template(ctx) {
+ *     return template(html);
+ *   }
+ * });
+ * ```
+ */
+export declare function smolTemplatePlugin(): Plugin;

package/dist/vite-plugin-smol-templates.js

@@ -0,0 +1,73 @@
+import { readFileSync } from 'node:fs';
+/**
+ * Vite plugin for importing HTML templates as smol.js template functions
+ *
+ * This plugin allows you to write your component templates in separate .html files
+ * and import them into your components.
+ *
+ * @example
+ * ```typescript
+ * import template from './my-component.html?smol';
+ *
+ * smolComponent({
+ *   tag: 'my-component',
+ *   template(ctx) {
+ *     return template(html);
+ *   }
+ * });
+ * ```
+ */
+export function smolTemplatePlugin() {
+    return {
+        name: 'vite-plugin-smol-templates',
+        enforce: 'pre',
+        async resolveId(id, importer) {
+            // Only handle .html files with ?smol query
+            if (id.includes('.html?smol')) {
+                const cleanId = id.replace('?smol', '');
+                const resolved = await this.resolve(cleanId, importer);
+                if (resolved) {
+                    return resolved.id + '?smol';
+                }
+            }
+            return null;
+        },
+        load(id) {
+            // Check if this is an HTML template with ?smol query
+            if (!id.includes('.html?smol')) {
+                return null;
+            }
+            // Remove query parameter to get the actual file path
+            const filePath = id.replace(/\?smol$/, '');
+            try {
+                // Read the HTML file content
+                const htmlContent = readFileSync(filePath, 'utf-8');
+                // Transform the HTML into a JavaScript module
+                // The template will be a function that takes the html tagged template function
+                // and returns a TemplateResult
+                // We need to preserve ${} interpolations as actual template literal placeholders
+                // while escaping backticks in the HTML content
+                const escapedContent = htmlContent
+                    .replace(/\\/g, '\\\\') // Escape backslashes
+                    .replace(/`/g, '\\`'); // Escape backticks
+                // Create a function that uses 'with' to execute the template literal
+                // We use new Function to avoid strict mode limitations on 'with'
+                // and to allow dynamic variable resolution from the context
+                const templateBody = `with(context) { return html\`${escapedContent}\`; }`;
+                const code = `
+                    export default function(html, context = {}) {
+                        return new Function('html', 'context', ${JSON.stringify(templateBody)})(html, context);
+                    }
+                `;
+                return {
+                    code,
+                    map: null
+                };
+            }
+            catch (error) {
+                this.error(`Failed to load HTML template: ${filePath}\n${error}`);
+                return null;
+            }
+        }
+    };
+}

package/dist/vite.d.ts

@@ -0,0 +1 @@
+export { smolTemplatePlugin } from './vite-plugin-smol-templates.js';

package/dist/vite.js

@@ -0,0 +1,4 @@
+// Export the Vite plugin for external HTML templates
+// This is in a separate entry point to avoid bundling Node.js dependencies
+// into the browser-facing library
+export { smolTemplatePlugin } from './vite-plugin-smol-templates.js';

package/package.json

@@ -0,0 +1,48 @@
+{
+    "name": "smol.js",
+    "version": "0.1.0",
+    "description": "Minimal Web Component library with zero dependencies",
+    "type": "module",
+    "main": "./dist/smol.umd.js",
+    "module": "./dist/smol.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/smol.js",
+            "require": "./dist/smol.umd.js",
+            "types": "./dist/index.d.ts"
+        },
+        "./vite": {
+            "import": "./dist/vite.js",
+            "types": "./dist/vite.d.ts"
+        }
+    },
+    "files": [
+        "dist",
+        "src"
+    ],
+    "scripts": {
+        "build": "vite build && npm run build:types && npm run build:vite",
+        "build:types": "tsc --emitDeclarationOnly",
+        "build:vite": "tsc src/vite.ts src/vite-plugin-smol-templates.ts --outDir dist --module ESNext --target ES2020 --moduleResolution bundler --declaration",
+        "test": "vitest",
+        "dev": "vite build --watch"
+    },
+    "keywords": [
+        "web-components",
+        "custom-elements",
+        "shadow-dom",
+        "ssr",
+        "lightweight"
+    ],
+    "author": "",
+    "license": "MIT",
+    "devDependencies": {
+        "@types/node": "^20.0.0",
+        "terser": "^5.44.1",
+        "typescript": "^5.0.0",
+        "vite": "^5.0.0",
+        "vite-plugin-dts": "^3.0.0",
+        "vitest": "^1.0.0"
+    }
+}