@iftc/yete 0.0.1-alpha.1 → 0.0.1-alpha.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) IFTC 2020-2026
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,41 @@
+# 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
+
+## 快速开始
+
+1. 下载 Yete CLI：
+   - [Windows x64](https://dbmp-xbgmorqeur6oh81z.database.nocode.cn/storage/v1/object/public/files/yete.exe "yete.exe")
+   - [Linux arm64](https://dbmp-xbgmorqeur6oh81z.database.nocode.cn/storage/v1/object/public/files/yete "yete")
+   - [CLI源文件(其他操作系统请自行编译或直接使用 Txiki.js 运行)](https://dbmp-xbgmorqeur6oh81z.database.nocode.cn/storage/v1/object/public/files/yete.zip "yete.zip")
+
+2. 创建并构建项目：
+
+```bash
+yete init <project-name>
+cd <project-name>
+npm i
+yete build && yete serve
+```
+
+3. 访问项目：
+   浏览器访问 http://localhost:12345
+
+## 贡献
+
+欢迎任何形式的贡献，如提交 PR、提交 Issue、提交文档、提交翻译、提交代码片段。
+
+## 许可证
+
+[MIT](https://github.com/IFTC-XLKJ/Yete?tab=MIT-1-ov-file)
+
+## 联系作者
+
+- 邮箱：iftcceo@139.com 或 iftcceo@gmail.com
+- 社区：https://discord.gg/dWWaUjVWv6
+- 官网：https://iftc.koyeb.app/
+- 仓库：https://github.com/IFTC-XLKJ/yete
+- 官方文档：https://iftc.koyeb.app/docs/yete

package/index.js

@@ -1,27 +1,83 @@
+/**
+ * 自定义错误类
+ */
 class YeteError extends Error {
+    /**
+     * 构造函数
+     * @param {String} message 错误信息
+     * @example new YeteError("Something went wrong.");
+     */
     constructor(message) {
         super(message);
         this.name = 'YeteError';
     }
 }
-
+/**
+ * 页面基类
+ * @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;
     }
+    /**
+     * 渲染页面
+     * @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;
+
+/**
+ * 导出的对象
+ */
 const obj = {
     /**
      * 设置页面图标
      * @param {String} iconPath 
      * @returns 
+     * @throws {YeteError}
+     * @example
+     * setIcon("icon.png");
      */
     setIcon: function (iconPath) {
         const fileType = getFileType(iconPath);
@@ -43,6 +99,9 @@ const obj = {
     /**
      * 设置页面标题
      * @param {String} title 
+     * @throws {YeteError}
+     * @example
+     * setTitle("Yete");
      */
     setTitle: function (title) {
         document.title = title;
@@ -50,6 +109,8 @@ const obj = {
     /**
      * 配置路由
      * @param {Array<Object>} options
+     * @property {String} path 路径
+     * @property {HTMLElement} page 页面
      * @example 
      * options: [
      *   { path: '/', page: () => loadPage(HomePage) },
@@ -60,10 +121,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);
@@ -76,14 +153,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) => {
@@ -96,31 +187,245 @@ const obj = {
             document.head.appendChild(link);
         });
     },
+    /**
+     * 加载 JS 文件
+     * @param {String} scriptPath 
+     * @returns {Promise<void>}
+     * @example
+     * await loadScript("index.js");
+     */
+    loadScript: async function (scriptPath) {
+        return new Promise(async (resolve, reject) => {
+            const script = document.createElement('script');
+            script.type = 'text/javascript';
+            const scriptFile = await YeteDB.files.get({ name: scriptPath });
+            script.src = URL.createObjectURL(scriptFile.blob);
+            script.onload = resolve;
+            script.onerror = reject;
+            document.body.appendChild(script);
+        });
+    },
     /**
      * 跳转到指定页面
      * @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, 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.");
         }
-    }
+    },
+    /**
+     * 创建 UI 元素
+     * @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]) {
+            throw new YeteError(`The element ${tag} not found.`);
+        }
+        const element = document.createElement(UIElements[tag].html);
+        const style = UIElements[tag].style;
+        if (style) {
+            for (const key in style) {
+                element.style[key] = style[key];
+            }
+        }
+        for (const key in options) {
+            element[key] = options[key];
+        }
+        return element;
+    },
+    /**
+     * 添加事件监听器
+     * @param {String} type 
+     * @param {Function} listener 
+     * @example
+     * addEventListener('click', () => console.log('Clicked'));
+     */
+    addEventListener: function (type, listener) {
+        events.push({ type, listener });
+    },
+    /**
+     * 移除事件监听器
+     * @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);
+        if (index !== -1) {
+            events.splice(index, 1);
+        }
+    },
+    /**
+     * 派发事件
+     * @param {String} type 
+     * @param {Object} event 
+     * @example
+     * dispatchEvent('click', new YeteEvent("click", { bubbles: true, cancelable: true }));
+     */
+    dispatchEvent: function (type, event) {
+        events.forEach(e => {
+            if (e.type === type) {
+                e.listener(event);
+            }
+        });
+    },
+    /**
+     * 创建事件
+     * @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 });
+            for (const key in options) {
+                this[key] = options[key];
+            }
+        }
+    },
+    /**
+     * 获取绑定的元素
+     * @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.");
+        }
+    },
 };
 
-// 监听 hashchange 事件，实现页面跳转
+/**
+ * 添加事件监听器
+ * @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;
+
+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>Powsered 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) || '/';
     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 
+ * @returns {String}
+ */
 function getFileType(filePath) {
     const ext = path.extname(filePath).toLowerCase();
     switch (ext) {

package/libs/yete-ui/Text.js

@@ -0,0 +1,4 @@
+class Text extends HTMLElement {
+}
+
+customElements.define('yete-text', Text);

package/libs/yete-ui/yete.json

@@ -0,0 +1,15 @@
+{
+    "name": "yete-ui",
+    "type": "ui",
+    "version": "0.0.1-alpha.1",
+    "ui": {
+        "Text": {
+            "html": "yete-text",
+            "style": null,
+            "attr": ["id", "class"]
+        }
+    },
+    "files": [
+        "Text.js"
+    ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iftc/yete",
-  "version": "0.0.1-alpha.1",
+  "version": "0.0.1-alpha.3",
   "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();