@iftc/yete 0.0.1-alpha.2 → 0.0.1-alpha.4

package/README.md

@@ -1,7 +1,9 @@
 # Yete
 
-Yete 是一个轻量级、可扩展的 Web 框架。使用 Dexie 库操作 IndexedDB，将资源文件缓存到浏览器中，并支持离线访问。
-开发文档：https://iftc.koyeb.app/docs/yete
+&nbsp;&nbsp;&nbsp;&nbsp;Yete 是一个轻量级、可扩展的 Web 框架。使用 Dexie 库操作 IndexedDB，将资源文件缓存到浏览器中，能够减少加载时间和带宽消耗。<br>
+&nbsp;&nbsp;&nbsp;&nbsp;每次构建后，会重新下载一次资源文件，并缓存到浏览器中。<br>
+&nbsp;&nbsp;&nbsp;&nbsp;`libs` 目录下的文件不会视为资源文件，如需使用，请使用 `yete add <libdirpath>` 命令添加。<br>
+&nbsp;&nbsp;&nbsp;&nbsp;开发文档：https://iftc.koyeb.app/docs/yete
 
 ## 快速开始
 
@@ -28,7 +30,7 @@ yete build && yete serve
 
 ## 许可证
 
-[MIT](https://github.com/IFTC-XLKJ/Yete/blob/main/LICENSE)
+[MIT](https://github.com/IFTC-XLKJ/Yete?tab=MIT-1-ov-file)
 
 ## 联系作者
 

package/index.js

@@ -1,5 +1,3 @@
-const { add } = require("dexie");
-
 /**
  * 自定义错误类
  */
@@ -7,6 +5,7 @@ class YeteError extends Error {
     /**
      * 构造函数
      * @param {String} message 错误信息
+     * @example new YeteError("Something went wrong.");
      */
     constructor(message) {
         super(message);
@@ -15,11 +14,22 @@ class YeteError extends Error {
 }
 /**
  * 页面基类
+ * @example
+ * class MyPage extends Page {
+ *   constructor() {
+ *     super("my-page");
+ *   }
+ *   render() {
+ *     return document.createElement('div', { className: 'page' });
+ *   }
+ * }
  */
 class Page {
     /**
      * 构造函数
      * @param {String} name 
+     * @example
+     * new Page("my-page");
      */
     constructor(name) {
         this.name = name;
@@ -27,21 +37,49 @@ class Page {
     /**
      * 渲染页面
      * @returns {HTMLElement}
+     * @example
+     * return document.createElement('div', { className: 'page' });
      */
     render() {
-        return document.createElement('div', { className: 'page' }, this.name);
+        return document.createElement('div', { className: 'page' });
     }
 }
 
+/**
+ * 页面数组
+ * @property {Page} page 页面对象
+ */
 const pages = [];
+/**
+ * 路由数组
+ * @property {String} path 路径
+ * @property {HTMLElement} page 页面
+ */
 const routes = [];
+/**
+ * 事件数组
+ * @property {String} name 事件名称
+ * @property {Function} callback 回调函数
+ */
 const events = [];
+let isStarted = false;
+
+let custom404Page = null;
+let custom502Page = null;
 
+let searchParams = new URLSearchParams("");
+
+/**
+ * 导出的对象
+ */
 const obj = {
     /**
      * 设置页面图标
      * @param {String} iconPath 
      * @returns 
+     * @throws {YeteError}
+     * @example
+     * setIcon("icon.png");
      */
     setIcon: function (iconPath) {
         const fileType = getFileType(iconPath);
@@ -63,6 +101,9 @@ const obj = {
     /**
      * 设置页面标题
      * @param {String} title 
+     * @throws {YeteError}
+     * @example
+     * setTitle("Yete");
      */
     setTitle: function (title) {
         document.title = title;
@@ -70,6 +111,8 @@ const obj = {
     /**
      * 配置路由
      * @param {Array<Object>} options
+     * @property {String} path 路径
+     * @property {HTMLElement} page 页面
      * @example 
      * options: [
      *   { path: '/', page: () => loadPage(HomePage) },
@@ -80,10 +123,26 @@ const obj = {
         console.log(options);
         routes.push(...options);
     },
+    /**
+     * 页面基类
+     * @example
+     * class MyPage extends Page {
+     *   constructor() {
+     *     super("my-page");
+     *   }
+     *   render() {
+     *     return document.createElement('div', { className: 'page' });
+     *   }
+     * }
+     */
     Page: Page,
     /**
      * 加载组件
      * @param {Page} page 
+     * @returns {HTMLElement}
+     * @throws {YeteError}
+     * @example
+     * loadPage(MyPage);
      */
     loadPage: function (page) {
         console.log(page);
@@ -96,14 +155,28 @@ const obj = {
     },
     /**
      * 启动程序
+     * @description 该方法只能调用一次
+     * @throws {YeteError}
+     * @example
+     * start();
      */
     start: function () {
+        if (isStarted) {
+            throw new YeteError("The program has already started.");
+        }
+        if (!routes.some(r => r.path === '/')) {
+            throw new YeteError("The route must contain a path '/'.");
+        }
+        isStarted = true;
         const path = location.hash.slice(1) || '/';
         obj.toPage(path);
     },
     /**
      * 加载 CSS 文件
      * @param {String} cssPath 
+     * @returns {Promise<void>}
+     * @example
+     * await loadCSS("index.css");
      */
     loadCSS: async function (cssPath) {
         return new Promise(async (resolve, reject) => {
@@ -119,6 +192,9 @@ const obj = {
     /**
      * 加载 JS 文件
      * @param {String} scriptPath 
+     * @returns {Promise<void>}
+     * @example
+     * await loadScript("index.js");
      */
     loadScript: async function (scriptPath) {
         return new Promise(async (resolve, reject) => {
@@ -134,19 +210,29 @@ const obj = {
     /**
      * 跳转到指定页面
      * @param {String} path 
+     * @param {String} message
+     * @throws {YeteError}
+     * @example
+     * toPage('/about');
      */
-    toPage: function (path) {
+    toPage: function (path, message = null) {
         location.hash = path;
         const page = routes.find(r => r.path === path);
         console.log(pages, page);
         if (page) {
             document.body.innerHTML = "";
             document.body.appendChild(page.page);
-            obj.emit('page-change', new obj.YeteEvent("page-change", { path, isNotFound: false }));
+            obj.emit('page-change', new obj.YeteEvent("page-change", { path, isNotFound: false, message }));
         } else {
+            if (custom404Page) {
+                document.body.innerHTML = "";
+                document.body.appendChild(custom404Page);
+                obj.emit('page-change', new obj.YeteEvent("page-change", { path, isNotFound: true }));
+                return;
+            }
             document.body.innerHTML = "<center><h1>404 Not Found</h1><p>Power By Yete</p></center>";
             obj.emit('page-change', new obj.YeteEvent("page-change", { path, isNotFound: true }));
-            throw new YeteError("The page not found.");
+            console.error(new YeteError("The page not found."));
         }
     },
     /**
@@ -154,6 +240,8 @@ const obj = {
      * @param {String} tag 
      * @param {Object} options 
      * @returns {HTMLElement}
+     * @example
+     * const button = newElement('Text', { className: 'btn', textContent: 'Click Me' });
      */
     newElement: function (tag, options = {}) {
         if (!UIElements[tag]) {
@@ -175,6 +263,8 @@ const obj = {
      * 添加事件监听器
      * @param {String} type 
      * @param {Function} listener 
+     * @example
+     * addEventListener('click', () => console.log('Clicked'));
      */
     addEventListener: function (type, listener) {
         events.push({ type, listener });
@@ -183,6 +273,8 @@ const obj = {
      * 移除事件监听器
      * @param {String} type 
      * @param {Function} listener 
+     * @example
+     * removeEventListener('click', () => console.log('Clicked'));
      */
     removeEventListener: function (type, listener) {
         const index = events.findIndex(e => e.type === type && e.listener === listener);
@@ -194,6 +286,8 @@ const obj = {
      * 派发事件
      * @param {String} type 
      * @param {Object} event 
+     * @example
+     * dispatchEvent('click', new YeteEvent("click", { bubbles: true, cancelable: true }));
      */
     dispatchEvent: function (type, event) {
         events.forEach(e => {
@@ -204,12 +298,19 @@ const obj = {
     },
     /**
      * 创建事件
+     * @param {String} type 
+     * @param {Object} options
+     * @returns {YeteEvent}
+     * @example
+     * const event = new YeteEvent("click", { bubbles: true, cancelable: true });
      */
     YeteEvent: class extends Event {
         /**
          * 构造函数
          * @param {String} type 
          * @param {Object} options 
+         * @example
+         * const event = new YeteEvent("click", { bubbles: true, cancelable: true });
          */
         constructor(type, options) {
             super(type, { bubbles: true, cancelable: true });
@@ -218,33 +319,404 @@ const obj = {
             }
         }
     },
+    /**
+     * 获取绑定的元素
+     * @returns {NodeList}
+     * @example
+     * const elements = getBinding();
+     */
+    getBinding: function () {
+        const elementsWithId = document.querySelectorAll('[yete-id]');
+        return elementsWithId;
+    },
+    /**
+     * 自定义 404 页面
+     * @description 当页面不存在时，会显示此页面
+     * @param {Page} page
+     * @example
+     * custom404(Custom404Page);
+     */
+    custom404: function (page = null) {
+        if (!page) {
+            custom404Page = null;
+            return;
+        }
+        const p = new page();
+        if (p instanceof Page) {
+            custom404Page = p.page;
+        } else {
+            throw new YeteError("The page not found.");
+        }
+    },
+    /**
+     * 自定义 502 错误页面
+     * @description 当页面有未捕获的错误被抛出时，会显示此页面
+     * @param {Page} page
+     * @example
+     * custom502(Custom502Page);
+     */
+    custom502: function (page = null) {
+        if (!page) {
+            custom502Page = null;
+            return;
+        }
+        const p = new page();
+        if (p instanceof Page) {
+            custom502Page = p.page;
+        } else {
+            throw new YeteError("The page not found.");
+        }
+    },
+    /**
+     * HTTP 请求
+     * @description HTTP 请求封装，提供更便捷的方式进行 HTTP 请求
+     * @example 
+     * const res = await HTTP.GET("https://example.com");
+     * const data = await res.json();
+     */
+    HTTP: class {
+        constructor() { }
+        /**
+         * GET 请求
+         * @param {String} url 
+         * @param {Object} headers 
+         * @returns {Promise<Response>}
+         * @example
+         * const res = await HTTP.GET("https://example.com");
+         * const data = await res.json();
+         */
+        static async GET(url, headers = {}) {
+            return await fetch(url, { headers });
+        }
+        /**
+         * POST 请求
+         * @param {String} url 
+         * @param {Object} body 
+         * @param {Object} headers 
+         * @returns {Promise<Response>}
+         * @example
+         * const res = await HTTP.POST("https://example.com", { name: "Yete" });
+         * const data = await res.json();
+         */
+        static async POST(url, body, headers = {}) {
+            return await fetch(url, { method: "POST", body, headers });
+        }
+        /**
+         * PUT 请求
+         * @param {String} url 
+         * @param {Object} body 
+         * @param {Object} headers 
+         * @returns {Promise<Response>}
+         * @example
+         * const res = await HTTP.PUT("https://example.com", { name: "Yete" });
+         * const data = await res.json();
+         */
+        static async PUT(url, body, headers = {}) {
+            return await fetch(url, { method: "PUT", body, headers });
+        }
+        /**
+         * DELETE 请求
+         * @param {String} url 
+         * @param {Object} headers 
+         * @returns {Promise<Response>}
+         * @example
+         * const res = await HTTP.DELETE("https://example.com");
+         * const data = await res.json();
+         */
+        static async DELETE(url, headers = {}) {
+            return await fetch(url, { method: "DELETE", headers });
+        }
+        /**
+         * PATCH 请求
+         * @param {String} url 
+         * @param {Object} body 
+         * @param {Object} headers 
+         * @returns {Promise<Response>}
+         * @example
+         * const res = await HTTP.PATCH("https://example.com", { name: "Yete" });
+         * const data = await res.json();
+         */
+        static async PATCH(url, body, headers = {}) {
+            return await fetch(url, { method: "PATCH", body, headers });
+        }
+        /**
+         * HEAD 请求
+         * @param {String} url 
+         * @param {Object} headers 
+         * @returns {Promise<Response>}
+         * @example
+         * const res = await HTTP.HEAD("https://example.com");
+         * const data = await res.json();
+         */
+        static async HEAD(url, headers = {}) {
+            return await fetch(url, { method: "HEAD", headers });
+        }
+        /**
+         * OPTIONS 请求
+         * @param {String} url 
+         * @param {Object} headers 
+         * @returns {Promise<Response>}
+         * @example
+         * const res = await HTTP.OPTIONS("https://example.com");
+         * const data = await res.json();
+         */
+        static async OPTIONS(url, headers = {}) {
+            return await fetch(url, { method: "OPTIONS", headers });
+        }
+        /**
+         * TRACE 请求
+         * @param {String} url 
+         * @param {Object} headers 
+         * @returns {Promise<Response>}
+         * @example
+         * const res = await HTTP.TRACE("https://example.com");
+         * const data = await res.json();
+         */
+        static async TRACE(url, headers = {}) {
+            return await fetch(url, { method: "TRACE", headers });
+        }
+        /**
+         * CONNECT 请求
+         * @param {String} url 
+         * @param {Object} headers 
+         * @returns {Promise<Response>}
+         * @example
+         * const res = await HTTP.CONNECT("https://example.com");
+         * const data = await res.json();
+         */
+        static async CONNECT(url, headers = {}) {
+            return await fetch(url, { method: "CONNECT", headers });
+        }
+        /**
+         * 读取流
+         * @param {Response} response 
+         * @param {Function} callback 
+         * @returns {Promise<void>}
+         * @example
+         * await HTTP.readStream(res, ({ chunk, done }) => { console.log(done, chunk); });
+         */
+        static async readStream(response, callback = ({ chunk, done }) => { console.log(done, chunk); }) {
+            if (!response.ok) {
+                throw new YeteError("Response is not ok.");
+            }
+            if (!response.body) {
+                throw new YeteError("Response body is not available.");
+            }
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder('utf-8');
+            try {
+                while (true) {
+                    const { done, value } = await reader.read();
+                    if (done) {
+                        const finalChunk = decoder.decode();
+                        callback({ chunk: finalChunk || null, done: true });
+                        break;
+                    }
+                    const chunk = decoder.decode(value, { stream: true });
+                    callback({ chunk, done: false });
+                }
+            } catch (error) {
+                throw new YeteError(`Stream reading failed: ${error.message}`);
+            } finally {
+                reader.releaseLock();
+            }
+        }
+        /**
+         * 读取响应体
+         * @param {Response} response 
+         * @param {String} type 
+         * @returns {Promise<any>}
+         * @example
+         * const data = await HTTP.readBody(res);
+         */
+        static async readBody(response, type = "text") {
+            if (!response.ok) {
+                throw new YeteError("Response is not ok.");
+            }
+            if (!response.body) {
+                throw new YeteError("Response body is not available.");
+            }
+            switch (type) {
+                case "text":
+                    return await response.text();
+                case "json":
+                    return await response.json();
+                case "blob":
+                    return await response.blob();
+                case "arrayBuffer":
+                    return await response.arrayBuffer();
+                case "formData":
+                    return await response.formData();
+                default:
+                    throw new YeteError("Invalid type.");
+            }
+        }
+        /**
+         * 读取响应头
+         * @param {Response} response 
+         * @returns {Promise<Headers>}
+         * @example
+         * const headers = await HTTP.readHeaders(res);
+         */
+        static async readHeaders(response) {
+            return response.headers;
+        }
+    },
+    /**
+     * 获取 URL 参数
+     * @example
+     * const params = searchParams;
+     */
+    searchParams: function () {
+        return searchParams;
+    },
+    /**
+     * 加载 UI
+     * @description 可通过 URL 或 XML 字符串加载 UI
+     * @param {String} str 
+     * @returns {Promise<HTMLElement>}
+     * @example
+     * await loadUI("https://example.com/ui.xml");
+     * await loadUI(`<Yete><Text>Hello World</Text></Yete>`);
+     */
+    loadUI: async function (str) {
+        let isURL = false;
+        try {
+            new URL(str);
+            isURL = true;
+        } catch { }
+        if (isURL) {
+            const res = await fetch(str);
+            const text = await res.text();
+            return loadUI(text);
+        } else {
+            return loadUI(str);
+        }
+    }
 };
 
+/**
+ * 加载 UI
+ * @param {String} xmlstring 
+ * @returns {HTMLElement}
+ */
+function loadUI(xmlstring) {
+    const parser = new DOMParser();
+    try {
+        const xmlDoc = parser.parseFromString(xmlstring, "text/xml");
+        const root = xmlDoc.documentElement;
+        if (root.tagName === "Yete") {
+            let html = "<div yete-root>";
+            const rootNodes = root.childNodes;
+            for (let i = 0; i < rootNodes.length; i++) {
+                const node = rootNodes[i];
+                html += parseNode(node);
+            }
+            html += "</div>";
+            return new DOMParser().parseFromString(html, "text/html").body.firstElementChild;
+        } else {
+            throw new YeteError("Invalid XML string.");
+        }
+    } catch (error) {
+        throw new YeteError(`Failed to LoadUI : ${error.message}`);
+    }
+    function parseNode(node) {
+        const tagName = node.tagName;
+        if (node.nodeName === "#text") {
+            return node.textContent;
+        }
+        if (node instanceof NodeList) {
+            let html = "";
+            for (let i = 0; i < node.length; i++) {
+                html += parseNode(node[i]);
+            }
+            return html;
+        }
+        if (UIElements[tagName]) {
+            const htmlTagName = UIElements[tagName].html;
+            let attrs = "";
+            for (const i in UIElements[tagName].attr) {
+                const attr = UIElements[tagName].attr[i];
+                console.log(node.hasAttribute(attr), attr);
+                if (node.hasAttribute(attr)) {
+                    const value = node.getAttribute(attr);
+                    console.log(attr, value);
+                    if (value == "true") {
+                        attrs += ` ${attr == "id" ? `${"yete-id"}` : attr}`;
+                    } else {
+                        attrs += ` ${attr == "id" ? `${"yete-id"}` : attr}="${value}"`;
+                    }
+                }
+            }
+            return `<${htmlTagName} ${attrs} style="${UIElements[tagName].style || ""}">${parseNode(node.childNodes)}</${htmlTagName}>`;
+        } else {
+            throw new YeteError(`Invalid tag name: ${tagName}`);
+        }
+    }
+}
+
 /**
  * 添加事件监听器
  * @param {String} type 
  * @param {Function} listener 
+ * @example
+ * on('click', () => console.log('Clicked'));
  */
 obj.on = obj.addEventListener;
 /**
  * 移除事件监听器
  * @param {String} type 
  * @param {Function} listener 
+ * @example
+ * off('click', () => console.log('Clicked'));
  */
 obj.off = obj.removeEventListener;
 /**
  * 派发事件
  * @param {String} type 
  * @param {Object} event 
+ * @example
+ * emit('click', new YeteEvent("click", { bubbles: true, cancelable: true }));
  */
 obj.emit = obj.dispatchEvent;
 
-// 监听 hashchange 事件，实现页面跳转
+
+window.addEventListener("error", function (event) {
+    const { message, filename, lineno, colno, error } = event;
+    if (custom502Page) {
+        document.body.innerHTML = "";
+        document.body.appendChild(custom502Page);
+        const errorMsgEl = document.getElementById("error-message");
+        const errorFilenameEl = document.getElementById("error-filename");
+        const errorLinenoEl = document.getElementById("error-lineno");
+        const errorColnoEl = document.getElementById("error-colno");
+        const errorErrorEl = document.getElementById("error-error");
+        if (errorMsgEl) errorMsgEl.innerText = message;
+        if (errorFilenameEl) errorFilenameEl.innerText = filename;
+        if (errorLinenoEl) errorLinenoEl.innerText = lineno;
+        if (errorColnoEl) errorColnoEl.innerText = colno;
+        if (errorErrorEl) errorErrorEl.innerText = error;
+        obj.emit('page-change', new obj.YeteEvent("page-change", { path, isError: true }));
+    } else {
+        document.body.innerHTML = `<center><h1>Have an error: "${message}" in "${filename}" at ${lineno}:${colno}</h1><p>Power by Yete.</p></center>`;
+        obj.emit('page-change', new obj.YeteEvent("page-change", { path, isError: true }));
+    }
+});
+
 window.addEventListener('hashchange', () => {
-    const path = location.hash.slice(1) || '/';
+    const fullpath = location.hash.slice(1) || '/';
+    console.log("[Yete]", "Full path", fullpath);
+    const SearchParams = fullpath.split("?").slice(1).join("?") || '';
+    const path = fullpath.split("?")[0];
+    const query = new URLSearchParams(SearchParams);
+    searchParams = query;
+    console.log("[Yete]", "Query", query);
+    console.log("[Yete]", "Navigate to", path);
     obj.toPage(path);
 });
 
+console.log("%cYete v" + YeteVersion, "border-radius: 16px; font-size: 64px; color: #fff; background-color: #007bff; padding: 5px;margin: 5px;");
+
 /**
  * 获取文件类型
  * @param {String} filePath 

package/libs/yete-ui/Button.js

@@ -0,0 +1,156 @@
+class Button extends HTMLElement {
+    static get observedAttributes() {
+        return ['variant', 'size', 'disabled', 'loading', 'icon', 'icon-position'];
+    }
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+        this._rippleElement = null;
+    }
+
+    connectedCallback() {
+        this._render();
+        this._addEventListeners();
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+            this._render();
+        }
+    }
+
+    _render() {
+        const variant = this.getAttribute('variant') || 'contained';
+        const size = this.getAttribute('size') || 'medium';
+        const disabled = this.hasAttribute('disabled');
+        const loading = this.hasAttribute('loading');
+        const icon = this.getAttribute('icon');
+        const iconPosition = this.getAttribute('icon-position') || 'start';
+
+        this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: inline-block;
+          user-select: none;
+        }
+        .button {
+          font-family: Roboto, sans-serif;
+          font-size: 14px;
+          font-weight: 500;
+          letter-spacing: 0.089em;
+          border-radius: 20px; /* Android风格圆角 */
+          border: none;
+          cursor: pointer;
+          position: relative;
+          overflow: hidden;
+          transition: all 0.2s ease;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+          box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); /* Android阴影 */
+          min-height: 36px;
+          padding: 8px 16px;
+        }
+        .button:hover {
+          box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+        }
+        .button:active {
+          box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+          transform: translateY(1px);
+        }
+        }
+        .button:disabled {
+          cursor: not-allowed;
+          opacity: 0.6;
+        }
+        /* 变体样式 */
+        .button.contained {
+          background: #1976d2; /* Android蓝色 */
+          color: white;
+        }
+        .button.contained:hover {
+          background: #1565c0;
+        }
+        .button.contained:active {
+          background: #0d47a1;
+        }
+        .button.outlined {
+          background: transparent;
+          color: #1976d2;
+          border: 1px solid #1976d2;
+        }
+        .button.outlined:hover {
+          background: rgba(25, 118, 210, 0.04);
+        }
+        .button.text {
+          background: transparent;
+          color: #1976d2;
+          box-shadow: none;
+        }
+        .button.text:hover {
+          background: rgba(25, 118, 210, 0.04);
+        }
+        /* 尺寸样式 */
+        .button.small { padding: 6px 12px; min-height: 32px; font-size: 12px; }
+        .button.medium { padding: 8px 16px; min-height: 36px; font-size: 14px; }
+        .button.large { padding: 10px 20px; min-height: 44px; font-size: 16px; }
+        /* 波纹效果 */
+        .ripple {
+          position: absolute;
+          border-radius: 50%;
+          background: rgba(255, 255, 255, 0.5);
+          transform: scale(0);
+          animation: ripple-animation 0.6s linear;
+          pointer-events: none;
+        }
+        @keyframes ripple-animation {
+          to { transform: scale(4); opacity: 0; }
+        }
+        /* 加载状态 */
+        .spinner {
+          width: 18px;
+          height: 18px;
+          border: 2px solid currentColor;
+          border-top-color: transparent;
+          border-radius: 50%;
+          animation: spin 0.8s linear infinite;
+        }
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+      </style>
+      <button class="button ${variant} ${size}" ?disabled="${disabled}">
+        ${loading ? '<span class="spinner"></span>' : ''}
+        ${!loading && icon && iconPosition === 'start' ? `<span class="icon">${icon}</span>` : ''}
+        <slot></slot>
+        ${!loading && icon && iconPosition === 'end' ? `<span class="icon">${icon}</span>` : ''}
+      </button>
+    `;
+    }
+
+    _addEventListeners() {
+        const button = this.shadowRoot.querySelector('.button');
+        button?.addEventListener('click', (e) => this._handleRipple(e));
+    }
+
+    _handleRipple(event) {
+        if (this.hasAttribute('disabled')) return;
+
+        const button = event.currentTarget;
+        const rect = button.getBoundingClientRect();
+        const size = Math.max(rect.width, rect.height);
+
+        this._rippleElement = document.createElement('span');
+        this._rippleElement.classList.add('ripple');
+        this._rippleElement.style.width = this._rippleElement.style.height = `${size}px`;
+        this._rippleElement.style.left = `${event.clientX - rect.left - size / 2}px`;
+        this._rippleElement.style.top = `${event.clientY - rect.top - size / 2}px`;
+
+        button.appendChild(this._rippleElement);
+        setTimeout(() => this._rippleElement?.remove(), 600);
+    }
+}
+
+customElements.define("yete-button", Button);

package/libs/yete-ui/Text.js

@@ -0,0 +1,21 @@
+class Text extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    connectedCallback() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    color: var(--text-color, #757575);
+                    user-select: none;
+                }
+            </style>
+            <slot></slot>
+        `;
+    }
+}
+
+customElements.define('yete-text', Text);

package/libs/yete-ui/yete.json

@@ -7,6 +7,15 @@
             "html": "yete-text",
             "style": null,
             "attr": ["id", "class"]
+        },
+        "Button": {
+            "html": "yete-button",
+            "style": null,
+            "attr": ["id", "class"]
         }
-    }
+    },
+    "files": [
+        "Text.js",
+        "Button.js"
+    ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iftc/yete",
-  "version": "0.0.1-alpha.2",
+  "version": "0.0.1-alpha.4",
   "description": "",
   "keywords": [
     "IFTC",

package/src/loader.js

@@ -24,7 +24,10 @@ async function loadIndex() {
         script.src = url;
         document.body.appendChild(script);
     } else {
+        document.body.innerHTML = `<center><h1>index.js not found in the database. Reseting...</h1><p>Powered By Yete</p></center>`;
         console.error("Error: index.js not found in the database.");
+        localStorage.clear();
+        location.reload();
     }
 }
 
@@ -38,12 +41,42 @@ async function updateFiles() {
             path: file,
             size: blob.size,
             type: blob.type,
-            lastModified: blob.lastModified,
+            lastModified: new Date(),
             blob: blob
         });
     }
 }
 
+async function loadLibs() {
+    const files = yete.files;
+    const libFiles = files.filter(f => f.startsWith("libs/"));
+    console.log(libFiles);
+    for (const file of libFiles) {
+        const f = await db.files.get({ path: file });
+        console.log(file, f)
+        const url = URL.createObjectURL(f.blob);
+        if (file.endsWith(".js")) {
+            const script = document.createElement('script');
+            script.src = url;
+            document.body.appendChild(script);
+        } else if (file.endsWith(".css")) {
+            const style = document.createElement('style');
+            style.src = url;
+            document.head.appendChild(style);
+        } else if (file.endsWith(".ttf") || file.endsWith(".otf") || file.endsWith(".woff") || file.endsWith(".woff2")) {
+            const font = document.createElement("style");
+            style.textContent = `@font-face {
+    font-family: '${file.split("/").pop().split(".").slice(0, -1).join(".")}';
+    src: url('${url}') format('${file.split(".").pop()}'),
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}`;
+            document.head.appendChild(font);
+        }
+    }
+}
+
 async function main() {
     const version = yete.version;
     if (localStorage.getItem('yete-version') != version) {
@@ -53,6 +86,7 @@ async function main() {
     } else {
         await loadFiles();
     }
+    await loadLibs();
 }
 
 main();