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

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,47 @@ 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;
 
+/**
+ * 导出的对象
+ */
 const obj = {
     /**
      * 设置页面图标
      * @param {String} iconPath 
      * @returns 
+     * @throws {YeteError}
+     * @example
+     * setIcon("icon.png");
      */
     setIcon: function (iconPath) {
         const fileType = getFileType(iconPath);
@@ -63,6 +99,9 @@ const obj = {
     /**
      * 设置页面标题
      * @param {String} title 
+     * @throws {YeteError}
+     * @example
+     * setTitle("Yete");
      */
     setTitle: function (title) {
         document.title = title;
@@ -70,6 +109,8 @@ const obj = {
     /**
      * 配置路由
      * @param {Array<Object>} options
+     * @property {String} path 路径
+     * @property {HTMLElement} page 页面
      * @example 
      * options: [
      *   { path: '/', page: () => loadPage(HomePage) },
@@ -80,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);
@@ -96,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) => {
@@ -119,6 +190,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,16 +208,26 @@ 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.");
@@ -154,6 +238,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 +261,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 +271,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 +284,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 +296,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 +317,110 @@ 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.");
+        }
+    },
 };
 
 /**
  * 添加事件监听器
  * @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>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 

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

@@ -8,5 +8,8 @@
             "style": null,
             "attr": ["id", "class"]
         }
-    }
+    },
+    "files": [
+        "Text.js"
+    ]
 }

package/package.json

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