oipage 0.3.0 → 1.0.0-alpha.1

package/CHANGELOG

@@ -40,17 +40,19 @@ v0.2.0:
             （包括：input输入框、select列表选择）
           * server hander方法补充api
             （包括：getFileInfo()、filePath）
-v0.3.0:
-    date:2025-01-23
+v1.0.0:
+    date:
     changes:
-      - 修复bug
-        1、nodejs
-          * 修复目标位置可能不存在导致的报错
-            （包括：copySync、moveSync）
-      - 优化改造
-        1、nodejs
-          * 优化服务器启动日志，添加访问地址提示
-      - 新增功能
-        1、nodejs
-           * “file 文件相关操作”新增若干方法
-            （包括：listFolderSync）
+      - 原v0.x的功能将独立一个分支继续维护：https://github.com/oi-contrib/OIPage/blob/v0.x/CHANGELOG
+        (v0.x保持对零碎方法这种形式的支持和维护，此版本开始将作为一个框架或一个系统的工具箱以提供更高效的使用方式，这是一次彻底的非兼容改造)
+      - 初始化版本（v1.x）
+        1、API模块
+          * animation 动画
+          * deeplog 进度打印
+          * getStyle 获取节点样式
+          * linglog 单行打印
+          * onReady 等待DOM加载完毕执行
+          * setStyle 设置节点样式
+          * throttle 节流函数
+        2、命令
+          * serve 开发服务器

package/README.md

@@ -1,5 +1,5 @@
 # [OIPage](https://github.com/oi-contrib/OIPage)
-OI页面快速开发辅助库，包括核心包、Nodejs、浏览器、样式文件等
+前端网页或应用快速开发助手，包括开发服务器、辅助命令、实用API等
 
 <p>
     <a href="https://zxl20070701.github.io/toolbox/#/npm-download?packages=oipage&interval=7">
@@ -15,107 +15,6 @@ OI页面快速开发辅助库，包括核心包、Nodejs、浏览器、样式文
 
 <img src="https://nodei.co/npm/oipage.png?downloads=true&amp;downloadRank=true&amp;stars=true" alt="NPM">
 
-## 使用方式
-
-你可以作为一个命令行使用，那么你需要全局安装：
-
-```shell
-npm install -g oipage
-```
-
-也可以作为项目开发中的一个功能加强，在 package.json 中配置命令或nodejs文件中引入需要的模块使用，那么就在项目中执行安装命令：
-
-```shell
-npm install oipage --save
-```
-
-全局安装后，就可以直接作为命令行使用了。你可以打印帮助查看：
-
-```shell
-oipage-cli -h
-```
-
-比如会出现下列内容：
-
-```
-Usage: oipage-cli <command>
-
-    where <command> is one of:
-        --help, -h, --server, -s, --version, -v, --config, -c, --delete, --copy, --pick, --move, --network, --get, --post, --cat, --run
-    
-    oipage-cli --help|-h <term>       search for help on <term>
-    oipage-cli --help|-h              involved overview
-```
-
-比如--server或-s命令如何查看具体使用说明？只需要：
-
-```shell
-oipage-cli -h s
-```
-
-然后看见打印提示：
-
-```
-oipage-cli --server|-s [port|20000]         [2]render source server.
-```
-
-根据提示我们知道，这是一个快速启动一个本地资源服务器的命令，使用的时候可以设置服务器端口号，端口号缺省是20000。
-
-比如我们启动端口为8080的服务器：
-
-```shell
-oipage-cli -s 8080
-```
-
-对于更复杂的业务，我们推荐使用配置文件的方式。比如我们准备了配置文件 oipage.config.js ，那么就可以：
-
-```shell
-oipage-cli -c ./oipage.config.js
-```
-
-配置文件的内容如下：
-
-```js
-module.exports = {
-    devServer: {
-        // 可配置参数和“服务器”一致
-    }
-};
-```
-
-如果你需要在项目中更灵活的使用，我们也提供了一些有用的API，具体如下：
-
-### 核心包
-
-- [animation 动画](./docs/corejs/animation.md)
-- [throttle 节流函数](./docs/corejs/throttle.md)
-
-### Nodejs
-
-- [服务器](./docs/nodejs/server.md)
-- [命令行参数解析](./docs/nodejs/options.md)
-- [文件相关操作](./docs/nodejs/file.md)
-- [控制台打印](./docs/nodejs/console.md)
-- [网络请求（ajax）](./docs/nodejs/ajax.md)
-- [网络信息等](./docs/nodejs/network.md)
-- [资源数据](./docs/nodejs/data.md)
-- [图片相关操作](./docs/nodejs/image.md)
-- [文件解析](./docs/nodejs/loader.md)
-- [文件读取](./docs/nodejs/reader.md)
-- [表单录入](./docs/nodejs/form.md)
-
-### 浏览器
-
-- [getStyle 获取节点样式](./docs/browserjs/getStyle.md)
-- [onReady 解析完执行](./docs/browserjs/onReady.md)
-
-### 样式文件
-
-> 统一浏览器样式 `normalize.css` 直接： `import 'oipage/stylecss/normalize.css'` 即可！
-
-- [rasterize 十二栅格化](./docs/stylecss/rasterize.md)
-- [skeleton 骨架屏动画](./docs/stylecss/skeleton.md)
-
 ## 版权
 
 MIT License

package/bin/mineTypes.json

@@ -0,0 +1,105 @@
+{
+    "html": "text/html",
+    "htm": "text/html",
+    "shtml": "text/html",
+    "css": "text/css",
+    "xml": "text/xml",
+    "gif": "image/gif",
+    "jpeg": "image/jpeg",
+    "jpg": "image/jpeg",
+    "js": "application/javascript",
+    "atom": "application/atom+xml",
+    "rss": "application/rss+xml",
+    "mml": "text/mathml",
+    "txt": "text/plain",
+    "jad": "text/vnd.sun.j2me.app-descriptor",
+    "wml": "text/vnd.wap.wml",
+    "htc": "text/x-component",
+    "png": "image/png",
+    "tif": "image/tiff",
+    "tiff": "image/tiff",
+    "wbmp": "image/vnd.wap.wbmp",
+    "ico": "image/x-icon",
+    "jng": "image/x-jng",
+    "bmp": "image/x-ms-bmp",
+    "svg": "image/svg+xml",
+    "svgz": "image/svg+xml",
+    "webp": "image/webp",
+    "woff": "application/font-woff",
+    "jar": "application/java-archive",
+    "war": "application/java-archive",
+    "ear": "application/java-archive",
+    "json": "application/json",
+    "hqx": "application/mac-binhex40",
+    "doc": "application/msword",
+    "pdf": "application/pdf",
+    "ps": "application/postscript",
+    "eps": "application/postscript",
+    "ai": "application/postscript",
+    "rtf": "application/rtf",
+    "m3u8": "application/vnd.apple.mpegurl",
+    "xls": "application/vnd.ms-excel",
+    "eot": "application/vnd.ms-fontobject",
+    "ppt": "application/vnd.ms-powerpoint",
+    "wmlc": "application/vnd.wap.wmlc",
+    "kml": "application/vnd.google-earth.kml+xml",
+    "kmz": "application/vnd.google-earth.kmz",
+    "7z": "application/x-7z-compressed",
+    "cco": "application/x-cocoa",
+    "jardiff": "application/x-java-archive-diff",
+    "jnlp": "application/x-java-jnlp-file",
+    "run": "application/x-makeself",
+    "pl": "application/x-perl",
+    "pm": "application/x-perl",
+    "prc": "application/x-pilot",
+    "pdb": "application/x-pilot",
+    "rar": "application/x-rar-compressed",
+    "rpm": "application/x-redhat-package-manager",
+    "sea": "application/x-sea",
+    "swf": "application/x-shockwave-flash",
+    "sit": "application/x-stuffit",
+    "tcl": "application/x-tcl",
+    "tk": "application/x-tcl",
+    "der": "application/x-x509-ca-cert",
+    "pem": "application/x-x509-ca-cert",
+    "crt": "application/x-x509-ca-cert",
+    "xpi": "application/x-xpinstall",
+    "xhtml": "application/xhtml+xml",
+    "xspf": "application/xspf+xml",
+    "zip": "application/zip",
+    "bin": "application/octet-stream",
+    "exe": "application/octet-stream",
+    "dll": "application/octet-stream",
+    "deb": "application/octet-stream",
+    "dmg": "application/octet-stream",
+    "iso": "application/octet-stream",
+    "img": "application/octet-stream",
+    "msi": "application/octet-stream",
+    "msp": "application/octet-stream",
+    "msm": "application/octet-stream",
+    "docx": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    "xlsx": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    "pptx": "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+    "mid": "audio/midi",
+    "midi": "audio/midi",
+    "kar": "audio/midi",
+    "mp3": "audio/mpeg",
+    "ogg": "audio/ogg",
+    "m4a": "audio/x-m4a",
+    "ra": "audio/x-realaudio",
+    "3gpp": "video/3gpp",
+    "3gp": "video/3gpp",
+    "ts": "video/mp2t",
+    "mp4": "video/mp4",
+    "mpeg": "video/mpeg",
+    "mpg": "video/mpeg",
+    "mov": "video/quicktime",
+    "webm": "video/webm",
+    "flv": "video/x-flv",
+    "m4v": "video/x-m4v",
+    "mng": "video/x-mng",
+    "asx": "video/x-ms-asf",
+    "asf": "video/x-ms-asf",
+    "wmv": "video/x-ms-wmv",
+    "avi": "video/x-msvideo"
+}

package/{nodejs/core → bin}/network.js

@@ -1,3 +1,6 @@
+const { networkInterfaces } = require("os");
+
+// 网络信息
 module.exports = function () {
 
     let infomation = {
@@ -5,9 +8,9 @@ module.exports = function () {
         IPv6: []
     };
 
-    let networks = require('os').networkInterfaces()
+    let networks = networkInterfaces();
 
-    let IPv4Had = {}, IPv6Had = {}
+    let IPv4Had = {}, IPv6Had = {};
 
     for (let typeName in networks) {
         let network = networks[typeName]
@@ -20,7 +23,7 @@ module.exports = function () {
                             mac: network[index].mac
                         });
 
-                        IPv4Had[network[index].mac] = true
+                        IPv4Had[network[index].mac] = true;
                     }
                 } else if (network[index].family == 'IPv6' && network[index].address != '::1') {
                     if (!IPv6Had[network[index].mac]) {
@@ -29,7 +32,7 @@ module.exports = function () {
                             mac: network[index].mac
                         });
 
-                        IPv6Had[network[index].mac] = true
+                        IPv6Had[network[index].mac] = true;
                     }
                 }
             }

package/bin/resolve404.js

@@ -0,0 +1,78 @@
+const { readdirSync, lstatSync, readFileSync } = require("fs");
+const { join } = require("path");
+
+const img_folder = "data:image/png;base64," + readFileSync(join(__dirname, "../images/folder.png")).toString('base64');
+const img_file = "data:image/png;base64," + readFileSync(join(__dirname, "../images/file.png")).toString('base64');
+const img_goback = "data:image/png;base64," + readFileSync(join(__dirname, "../images/goback.png")).toString('base64');
+
+module.exports = function (filePath) {
+
+    let subItems = [];
+
+    try {
+        subItems = readdirSync(filePath);
+    } catch (e) {
+        try {
+            filePath = join(filePath, "../");
+            subItems = readdirSync(filePath);
+        } catch (e) { }
+    }
+
+    let template = "<a class='goback' href='../'>返回</a>";
+    for (let i in subItems) {
+        let isDirectory = lstatSync(join(filePath, subItems[i])).isDirectory();
+        template += "<a class='" + (isDirectory ? "folder" : "file") + "' href='./" + subItems[i] + (isDirectory ? "/" : "") + "'>" + subItems[i] + "</a>";
+    }
+
+    return `<!DOCTYPE html>
+    <html lang="zh-cn">
+    
+    <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>404 Not Found</title>
+    <style>
+      body{
+          margin: 0px;
+          background-color:#fcfcfc;
+          display: flex;
+          flex-wrap:wrap;
+          padding:100px;
+      }
+      body>a{
+          text-decoration: none;
+          padding:10px;
+          color:#000000;
+          text-align:center;
+          width:100px;
+          background-repeat: no-repeat;
+          background-position: center 0px;
+          padding-top: 65px;
+          margin-top: 50px;
+          font-size:12px;
+          background-size: 55% auto;
+      }
+      body>a:hover{
+          outline:1px solid #55b9e6;
+      }
+      body>a.folder{
+          background-image:url('${img_folder}');
+      }
+      body>a.file{
+          background-image:url('${img_file}');
+      }
+      body>a.goback{
+          background-image:url('${img_goback}');
+      }
+    </style>
+    </head>
+    
+    <body>
+    
+    ${template}
+    
+    </body>
+    
+    </html>`;
+};

package/bin/run

@@ -4,206 +4,14 @@
 
 process.title = 'OIPage';
 
-const server = require('../nodejs/core/server');
-const { options, help } = require('./options');
-const { log, error } = require('../nodejs/core/log');
-const { deleteSync, copySync, moveSync, listFileSync, fullPathSync } = require("../nodejs/core/file");
-const network = require("../nodejs/core/network");
-const { get, post } = require("../nodejs/core/remote");
-const fs = require("fs");
-const path = require("path");
-const { exec } = require('child_process');
-
-const jsonfile = require("../package.json");
-
-// 组装好缩写和全写的映射
-let shortHands = {};
-for (let key in options) {
-    if (options[key].short) shortHands["-" + options[key].short] = "--" + key;
+// 开发服务器
+if (process.argv[2] == "serve") {
+    require("./serve")({
+        
+    });
 }
 
-// 命令行传递的参数
-const parsed = require("../nodejs/core/options")(shortHands, process.argv);
-
-(() => {
-
-    // 打印版本
-    if (Array.isArray(parsed.version)) {
-        log("\nOIPage@v" + jsonfile.version + "\n");
-    }
-
-    // 基于配置文件运行
-    else if (Array.isArray(parsed.config)) {
-        if (parsed.config.length < 1) parsed.config[0] = './oipage.config.js';
-
-        // 读取配置
-        let configFile = require(path.join(process.cwd(), parsed.config[0]));
-
-        // 如果配置了服务器
-        if ("devServer" in configFile) {
-            server(configFile.devServer);
-        }
-    }
-
-    // 删除
-    else if (Array.isArray(parsed.delete)) {
-
-        // 获取绝对路径
-        let targetPath = fullPathSync(parsed.delete[0]);
-
-        deleteSync(targetPath);
-        log(`> delete ${targetPath.replace(process.cwd(), '.')}`);
-    }
-
-    // 复制
-    else if (Array.isArray(parsed.copy)) {
-
-        // 获取绝对路径
-        let sourcePath = fullPathSync(parsed.copy[0]);
-        let targetPath = fullPathSync(parsed.copy[1]);
-
-        // 如果存在
-        copySync(sourcePath, targetPath);
-        log(`> copy ${sourcePath.replace(process.cwd(), '.')} ➔ ${targetPath.replace(process.cwd(), '.')}`);
-    }
-
-    // 复制文件（一级展开）
-    else if (Array.isArray(parsed.pick)) {
-
-        // 如果目标文件夹不存在，创建
-        if (!fs.existsSync(parsed.pick[1])) {
-            fs.mkdirSync(parsed.pick[1], { recursive: true });
-        }
-
-        listFileSync(parsed.pick[0], fileInfo => {
-
-            // 获取路径
-            let sourcePath = fullPathSync(fileInfo.path);
-            let targetPath = fullPathSync(path.join(parsed.pick[1], fileInfo.name));
-
-            let index = 1;
-            while (fs.existsSync(targetPath)) {
-                targetPath = fullPathSync(path.join(parsed.pick[1], "【" + index + "】" + fileInfo.name));
-                index += 1;
-            }
-
-            log(`> copy ${sourcePath.replace(process.cwd(), '.')} ➔ ${targetPath.replace(process.cwd(), '.')}`);
-            copySync(sourcePath, targetPath);
-        });
-    }
-
-    // 移动
-    else if (Array.isArray(parsed.move)) {
-
-        // 获取绝对路径
-        let sourcePath = fullPathSync(parsed.move[0]);
-        let targetPath = fullPathSync(parsed.move[1]);
-
-        // 如果存在
-        moveSync(sourcePath, targetPath);
-        log(`> move ${sourcePath.replace(process.cwd(), '.')} ➔ ${targetPath.replace(process.cwd(), '.')}`);
-    }
-
-    // 网络信息
-    else if (Array.isArray(parsed.network)) {
-        log(JSON.stringify(network(), null, 4));
-    }
-
-    // GET请求
-    else if (Array.isArray(parsed.get)) {
-        get(parsed.get[0]).then(data => {
-            log(data);
-        }).catch(e => {
-            error(e);
-        });
-    }
-
-    // PSOT请求
-    else if (Array.isArray(parsed.post)) {
-        post(parsed.post[0]).then(data => {
-            log(data);
-        }).catch(e => {
-            error(e);
-        });
-    }
-
-    // 查看文件
-    else if (Array.isArray(parsed.cat)) {
-        try {
-            let filepath = fullPathSync(parsed.cat[0])
-
-            log(fs.readFileSync(filepath, {
-                encoding: "utf8"
-            }));
-        } catch (e) {
-            error(e);
-        }
-    }
-
-    // 运行多命令
-    else if (Array.isArray(parsed.run)) {
-        for (let index = 0; index < parsed.run.length; index++) {
-            const child = exec(parsed.run[index]);
-
-            // 监听子线程的stdout
-            child.stdout.on('data', (data) => {
-                console.log(`[${index + 1}] log:${data}`);
-            });
-
-            // 监听子线程的stderr
-            child.stderr.on('data', (data) => {
-                console.error(`[${index + 1}] error:${data}`);
-            });
-
-            // 子线程结束处理
-            child.on('close', (code) => {
-                console.log(`[${index + 1}] 子线程结束，退出码 ${code}`);
-            });
-
-            // 子线程出错处理
-            child.on('error', (error) => {
-                console.error(`[${index + 1}] 子线程错误: ${error.message}`);
-            });
-        }
-    }
-
-    // 服务器
-    else if (Array.isArray(parsed.server)) {
-        server({
-            port: parsed.server[0],
-            basePath: parsed.server[1]
-        });
-    }
-
-    // 否则就是帮助
-    else {
-        let helpParsed = Array.isArray(parsed.help) ? parsed.help : parsed.__terminal__;
-
-        // 打印具体的配置提示
-        if (helpParsed && helpParsed.length > 0) {
-            let help0 = helpParsed[0];
-
-            // 缩写转全拼
-            if (help0.length == 1) {
-                help0 = shortHands["-" + help0];
-            }
-
-            if (help0) {
-                help0 = help0.replace(/^--/, "");
-
-                // 根据需要帮助的命令获取对应的信息
-                const help0Option = options[help0];
-                if (help0Option) {
-                    log(`
-  ` + help0Option.demo + `         ` + help0Option.info + `
-                      `);
-
-                    return;
-                }
-
-            }
-        }
+// 默认，帮助
+else {
 
-        log(help);
-    }
-})();
+}

package/bin/serve.js

@@ -0,0 +1,64 @@
+const { join } = require("path");
+const { existsSync, lstatSync, readFileSync } = require("fs");
+const { createServer } = require('http');
+const packageValue = require("../package.json");
+const network = require("./network");
+const mineTypes = require("./mineTypes.json");
+const resolve404 = require("./resolve404.js");
+
+// 开发服务器
+module.exports = function (config) {
+    let startTime = new Date().valueOf();
+
+    const port = config.port || 8080; // 端口号
+    const basePath = join(process.cwd(), "./"); // 服务器根路径
+
+    let Server = createServer(function (request, response) {
+
+        let url = decodeURIComponent(request.url);
+        url = url.split("?")[0];
+
+        // 请求的文件路径
+        let filePath = join(basePath, url == "/" ? "index.html" : url.replace(/^\//, ""));
+
+        // 如果存在且是文件
+        if (existsSync(filePath) && !lstatSync(filePath).isDirectory()) {
+
+            let dotName = /\./.test(filePath) ? filePath.match(/\.([^.]+)$/)[1] : "";
+            let fileType = mineTypes[dotName]; // 文件类型
+
+            response.writeHead('200', {
+                'Content-type': (fileType || "text/plain") + ";charset=utf-8",
+                'Access-Control-Allow-Origin': '*',
+                'Server': 'Powered by OIPage-dev-server@' + packageValue.version
+            });
+            response.write(readFileSync(filePath));
+            response.end();
+        }
+
+        // 否则就是404
+        else {
+            response.writeHead(404, {
+                'Content-type': "text/html;charset=utf-8",
+                'Access-Control-Allow-Origin': '*',
+                'Server': 'Powered by OIPage-dev-server@' + packageValue.version
+            });
+            response.write(resolve404(filePath));
+            response.end();
+        }
+
+    });
+
+    Server.listen(port);
+
+    // 获取网络信息
+    let networkValue = network();
+
+    // 打印成功提示
+    console.log('<i> \x1b[1m\x1b[32m[OIPage-dev-server] Project is running at:\x1b[0m');
+    console.log('<i> \x1b[1m\x1b[32m[OIPage-dev-server] Loopback: \x1b[36mhttp://localhost:/' + port + '\x1b[0m');
+    for (let ipv4Item of networkValue.IPv4) console.log('<i> \x1b[1m\x1b[32m[OIPage-dev-server] On Your Network (IPv4):\x1b[36m http://' + ipv4Item.address + ':' + port + '/\x1b[0m');
+    for (let ipv6Item of networkValue.IPv6) console.log('<i> \x1b[1m\x1b[32m[OIPage-dev-server] On Your Network (IPv6): \x1b[36mhttp://[' + ipv6Item.address + ']:' + port + '/\x1b[0m');
+    console.log('<i> \x1b[1m\x1b[32m[OIPage-dev-server] Content not from OIPage is served from \x1b[36m"' + basePath + '" \x1b[0mdirectory');
+    console.log('\nOIPage ' + packageValue.version + ' compiled \x1b[1m\x1b[32msuccessfully\x1b[0m in ' + (new Date().valueOf() - startTime) + ' ms')
+};

package/{corejs → nodejs}/animation/index.js

@@ -1,3 +1,8 @@
+/*!
+* animation of OIPage v1.0.0-alpha.0
+* git+https://github.com/oi-contrib/OIPage.git
+*/
+
 //当前正在运动的动画的tick函数堆栈
 var $timers = [];
 //唯一定时器的定时间隔
@@ -13,7 +18,7 @@ var $timerId;
  *
  * @returns {function} 返回一个函数，调用该函数，可以提前结束动画
  */
-export function animation(doback, duration, callback) {
+function animation(doback, duration, callback) {
     if (arguments.length < 2) duration = 400;
     if (arguments.length < 3) callback = function () { };
 
@@ -99,4 +104,5 @@ export function animation(doback, duration, callback) {
         }
     };
 
-};
+};
+exports.animation = animation;