oipage 1.4.0-alpha.0 → 1.4.0

package/bin/website-htmls/pages/App/index.html

@@ -0,0 +1,4 @@
+<router></router>
+<div id="dialog-root">
+    <div class="mask" z-on:click="closeDialog"></div>
+</div>

package/bin/website-htmls/pages/App/index.js

@@ -0,0 +1,23 @@
+import { defineElement } from "zipaper"
+import template from "./index.html"
+import style from "./index.scss"
+
+export default defineElement({
+    template,
+    data() {
+        return {
+
+        }
+    },
+    methods: {
+
+        // 点击遮罩关闭弹框
+        closeDialog() {
+            this.$closeDialog()
+        }
+
+    },
+    style: {
+        content: style
+    }
+})

package/bin/website-htmls/pages/App/index.scss

@@ -0,0 +1,43 @@
+#dialog-root {
+    width: 0;
+    height: 0;
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 101;
+
+    .mask {
+        width: 100vw;
+        height: 100vh;
+        background-color: #0000004f;
+
+        &:last-child {
+            display: none;
+        }
+    }
+
+    .content {
+        display: none;
+        position: absolute;
+        left: 50vw;
+        top: 50vh;
+        transform: translateX(-50%) translateY(-50%);
+
+        &:last-child {
+            display: block;
+        }
+    }
+}
+
+.fork {
+    line-height: 30px;
+    position: fixed;
+    background-color: #9E9E9E;
+    text-align: center;
+    color: white;
+    outline: 2px dashed #9E9E9E;
+    width: 200px;
+    transform: rotate(-45deg);
+    right: -40px;
+    bottom: 44px;
+}

package/bin/website-htmls/pages/appStore/index.html

@@ -0,0 +1,6 @@
+<header>
+    应用市场
+    <a class="fork" href="https://github.com/oi-contrib/OIPage" target="_blank">
+        Fork me on Github
+    </a>
+</header>

package/bin/website-htmls/pages/appStore/index.js

@@ -0,0 +1,18 @@
+import { defineElement, ref } from "zipaper"
+import template from "./index.html"
+import style from "./index.scss"
+
+export default defineElement({
+    template,
+    data() {
+        return {
+
+        }
+    },
+    methods: {
+
+    },
+    style: {
+        content: style
+    }
+})

package/bin/website-htmls/pages/appStore/index.scss

@@ -0,0 +1,27 @@
+header {
+    height: 50px;
+    line-height: 50px;
+    background-color: white;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px;
+    background-image: url("./logo.png");
+    background-size: auto 90%;
+    background-repeat: no-repeat;
+    background-position-x: 5px;
+    padding-left: 50px;
+    font-size: 20px;
+    font-weight: 800;
+
+    .fork {
+        line-height: 30px;
+        position: fixed;
+        background-color: #9E9E9E;
+        text-align: center;
+        color: white;
+        outline: 2px dashed #9E9E9E;
+        width: 200px;
+        transform: rotate(-45deg);
+        right: -40px;
+        bottom: 44px;
+        font-weight: 400;
+    }
+}

package/bin/website-htmls/router.config.js

@@ -0,0 +1,11 @@
+import { defineRouter } from "zipaper"
+
+export default defineRouter({
+    routers: [{
+        path: "/",
+        redirect: "/appStore"
+    }, {
+        path: "/appStore",
+        component: () => import("./pages/appStore/index.js"),
+    }]
+})

package/bin/website-htmls/styles/common.css

@@ -0,0 +1,3 @@
+body {
+    font-family: cursive;
+}

package/bin/website-htmls/styles/normalize.css

@@ -0,0 +1,95 @@
+/* 统一不同浏览器的基础样式 */
+
+html {
+    /* 防止iPhone在坚屏转向横屏时放大文字 */
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+    /* 统一行高 */
+    line-height: 1.15;
+}
+
+button,
+input,
+select {
+    /* 兼容部分手机下border不显示问题 */
+    border: 1px solid #b2b2bd;
+}
+
+article,
+footer,
+header,
+nav,
+section {
+    /* 修正旧浏览器未定义的块级元素 */
+    display: block;
+}
+
+canvas,
+svg {
+    /* 修正旧浏览器未定义的行内块元素 */
+    display: inline-block;
+}
+
+* {
+    /* 统一不同浏览器盒子尺寸计算方法 */
+    box-sizing: border-box;
+}
+
+::-ms-clear,
+::-ms-reveal {
+    /* 去掉IE浏览器输入框叉叉和眼睛 */
+    display: none;
+}
+
+img {
+    /* 针对火狐浏览器在img标签没有src时候的差异修复 */
+    display: inline-block;
+}
+
+html {
+    /* 设置默认字体为统一的安全字体 */
+    font-family: sans-serif;
+}
+
+a {
+    /* 默认去掉下划线 */
+    text-decoration: none;
+}
+
+li {
+    /* 去掉前置索引 */
+    list-style-type: none;
+}
+
+ul,
+ol,
+li,
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    /* 去掉不喜欢的间距 */
+    -webkit-margin-before: 0;
+    -webkit-margin-after: 0;
+    -webkit-padding-start: 0;
+    /* 去掉不喜欢的间距，针对火狐浏览器等 */
+    margin-block-end: 0;
+    margin-block-start: 0;
+    padding-inline-start: 0;
+    /* 修改IE和其它浏览器不一致问题 */
+    padding: 0;
+    margin: 0;
+}
+
+body {
+    /* 去掉默认的8px */
+    margin: 0;
+}
+
+table {
+    /* 设置默认表格边框合并为一个单一的边框 */
+    border-collapse: collapse;
+}

package/bin/website-plugins/intercept/head.js

@@ -0,0 +1,9 @@
+const pkg = require("../../../package.json");
+
+module.exports = function () {
+    return {
+        'Access-Control-Allow-Origin': '*',
+        'Server': 'Powered by OIPage:website@' + pkg.version,
+        'Content-type': 'text/plain;charset=utf-8'
+    };
+};

package/bin/website-plugins/intercept/index.js

@@ -0,0 +1,5 @@
+const OIPageZipaperIntercept = require("./oipage-zipaper-intercept.js");
+
+module.exports = [
+    OIPageZipaperIntercept
+];

package/bin/website-plugins/intercept/oipage-zipaper-intercept.js

@@ -0,0 +1,40 @@
+const { readFileSync } = require("fs");
+const { join } = require("path");
+const headFactory = require("./head.js");
+
+const head = headFactory();
+
+// Zipaper框架
+module.exports = {
+    test: /^zipaper$/,
+    handler(request, response) {
+        head["Content-type"] = "application/javascript;charset=utf-8";
+        head["ETag"] = "Zipaper@v" + require("zipaper/package.json").version;
+
+        if (request.headers["if-none-match"] === head["ETag"]) {
+            response.writeHead('304', head);
+            response.end();
+            console.log("<i> \x1b[1m\x1b[32m[OIPage-dev-server] Cache File: Zipaper\x1b[0m " + new Date().toLocaleString() + "\x1b[33m\x1b[1m 304\x1b[0m");;
+            return;
+        }
+
+        response.writeHead(200, head);
+
+        let source = readFileSync(join(__dirname, "../../../node_modules/zipaper/dist/Zipaper.min.js"), {
+            encoding: "utf8"
+        });
+
+        response.write(`let module = { exports: {}};
+let exports = module.exports;
+${source}
+export let createApp = exports.createApp;
+export let defineDirective = exports.defineDirective;
+export let defineElement = exports.defineElement;
+export let defineRouter = exports.defineRouter;
+export let ref = exports.ref;
+export let reactive = exports.reactive;
+export let watcher = exports.watcher;
+`);
+        response.end();
+    }
+};

package/bin/website-plugins/loader/index.js

@@ -0,0 +1,12 @@
+const OIPageScssLoader = require("./oipage-scss-loader.js");
+const OIPageHtmlLoader = require("./oipage-html-loader.js");
+
+module.exports = {
+    rules: [{
+        test: /\.scss$/,
+        use: OIPageScssLoader
+    }, {
+        test: /\.html$/,
+        use: OIPageHtmlLoader
+    }]
+};

package/bin/website-plugins/loader/oipage-html-loader.js

@@ -0,0 +1,8 @@
+const { parseTemplate } = require("xhtml-to-json");
+
+module.exports = function (source) {
+    if (this.entry) return source;
+
+    this.setFileType("application/javascript");
+    return `export default ${JSON.stringify(parseTemplate(source).toJson())}`;
+};

package/bin/website-plugins/loader/oipage-scss-loader.js

@@ -0,0 +1,150 @@
+// 参考：https://github.com/zxl20070701/zxl20070701.github.io/blob/master/bin/loader/scss.js
+let toSelector = function (preSelectorArray, deep) {
+    let selectors = preSelectorArray[0], i, j, k;
+    for (i = 1; i < deep; i++) {
+        let temp = [];
+        for (j = 0; j < selectors.length; j++) {
+            for (k = 0; k < preSelectorArray[i].length; k++) {
+                temp.push(selectors[j] + preSelectorArray[i][k]);
+            }
+        }
+        selectors = temp;
+    }
+    return "\n" + (selectors.join(',')) + "{\n";
+};
+let analyseBlock = function (source) {
+    let i = -1, currentChar = null;
+    let next = function () {
+        currentChar = i++ < source.length - 1 ? source[i] : null;
+        return currentChar;
+    }
+    let nextNValue = function (n) {
+        return source.substring(i, n + i > source.length ? source.length : n + i);
+    }
+    let blocks = [];
+    let currentBlock = "";
+    next();
+    while (true) {
+        while (new RegExp("[\\x20\\t\\r\\n\\f]").test(currentChar)) {
+            next();
+        }
+        if (currentChar == null) break;
+        if (nextNValue(2) == '/*') {
+
+            next();
+            next();
+            currentBlock = "/*";
+
+            while (nextNValue(2) != '*/' && currentChar != null) {
+                currentBlock += currentChar;
+                next();
+            }
+            if (currentChar == null) {
+                throw new Error('The comment is not closed.');
+            }
+            currentBlock += "*/";
+            next();
+            next();
+            blocks.push({
+                value: currentBlock,
+                type: "comment-double"
+            });
+        }
+        else if (nextNValue(2) == '//') {
+            currentBlock = '';
+
+            while (currentChar != '\n' && currentChar != null) {
+                currentBlock += currentChar;
+                next();
+            }
+
+            blocks.push({
+                value: currentBlock,
+                type: "comment-single"
+            });
+
+        }
+        else if (currentChar == '}') {
+
+            blocks.push({
+                value: "}",
+                type: "end"
+            });
+
+            next();
+
+        }
+        else {
+
+            currentBlock = '';
+            while (currentChar != '{' && currentChar != ';' && currentChar != null) {
+                currentBlock += currentChar;
+                next();
+            }
+            if (currentChar == null) {
+                throw new Error('Statement or code block missing closure.');
+            }
+            blocks.push({
+                value: currentBlock + currentChar,
+                type: {
+                    '{': "begin",
+                    ';': 'statement'
+                }[currentChar]
+            });
+            next();
+        }
+    }
+    return blocks;
+};
+module.exports = function (source) {
+    this.setFileType("application/javascript");
+    let blocks = analyseBlock(source + "");
+    let i, j, cssCode = "", preSelectorArray = [], deep = 0;
+    for (i = 0; i < blocks.length; i++) {
+        if (blocks[i].type == 'comment-double') {
+            cssCode += blocks[i].value;
+        }
+        else if (blocks[i].type == 'comment-single') {
+            cssCode += "\n/* " + blocks[i].value + " */\n";
+        }
+        else if (blocks[i].type == 'begin') {
+            let preSplit = blocks[i].value.split(',');
+            let preSelect = [];
+            for (j = 0; j < preSplit.length; j++) {
+                preSelect[j] = preSplit[j].replace(/\{$/, '').trim();
+                if (/^&/.test(preSelect[j])) {
+                    preSelect[j] = preSelect[j].replace(/^&/, '');
+                } else {
+                    preSelect[j] = " " + preSelect[j];
+                }
+            }
+            preSelectorArray[deep] = preSelect;
+            deep += 1;
+        }
+        else if (blocks[i].type == 'end') {
+            deep -= 1;
+        }
+        else if (blocks[i].type == 'statement') {
+            j = 1;
+            let preType = blocks[i - j].type;
+            while (['comment-double', 'comment-single'].indexOf(preType) > -1) {
+                j += 1;
+                preType = blocks[i - j].type;
+            }
+            if (['end', 'begin'].indexOf(preType) > -1) {
+                cssCode += toSelector(preSelectorArray, deep);
+            }
+            cssCode += "\n" + blocks[i].value + "\n";
+            j = 1;
+            let nextType = blocks[i + j].type;
+            while (['comment-double', 'comment-single'].indexOf(nextType) > -1) {
+                j += 1;
+                nextType = blocks[i + j].type;
+            }
+            if (['end', 'begin'].indexOf(nextType) > -1) {
+                cssCode += "\n}\n";
+            }
+        }
+    }
+    return `export default ${JSON.stringify(cssCode)}`;
+};

package/nodejs/animation/index.d.ts

@@ -1,20 +1,20 @@
-interface animationResult {
-
-    /**
-     * 一个函数，调用该函数，可以提前结束动画
-     */
-    stop(): void
-}
-
-interface animationFun {
-    (deep: number): void
-}
-
-/**
- * 轮询动画
- */
-export interface animationType {
-    (doback: animationFun, duration?: number, callback?: animationFun): animationResult
-}
-
+interface animationResult {
+
+    /**
+     * 一个函数，调用该函数，可以提前结束动画
+     */
+    stop(): void
+}
+
+interface animationFun {
+    (deep: number): void
+}
+
+/**
+ * 轮询动画
+ */
+export interface animationType {
+    (doback: animationFun, duration?: number, callback?: animationFun): animationResult
+}
+
 export let animation: animationType