mist-tiny-cli - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

out/generateTemplates.js

@@ -54,3 +54,3 @@ "use strict";
     return __awaiter(this, void 0, void 0, function () {
-        var pages, ret, templates_1;
+        var pages, ret, templates_1, appCssPath, appCss;
         return __generator(this, function (_a) {
@@ -61,2 +61,7 @@ pages = appConfig.pages;
                 templates_1 = {};
+                appCssPath = path.join(src, 'app.acss');
+                if (fs.existsSync(appCssPath)) {
+                    appCss = util_1.readFileSync(appCssPath);
+                    ret.styles = loadCss(appCss);
+                }
                 pages.forEach(function (p) {
@@ -84,3 +89,4 @@ var xmlPath = path.join(src, p + ".axml");
     'flex-direction': 'direction',
-    'border-radius': 'corner-radius'
+    'border-radius': 'corner-radius',
+    'text-align': 'alignment'
 };
@@ -105,11 +111,48 @@ var VALUE_MAP = {
         'contain': 'scale-aspect-fit'
+    },
+    'text-align': {
+        'auto': 'natural'
     }
 };
+var ATTR_MAP = {
+    common: {},
+    'input': {
+        'value': 'text',
+        'type': 'keyboard-type',
+        'password': 'password-mode',
+        'placeholder': 'placeholder',
+        'placeholder-style': 'placeholder-color',
+        'disabled': 'editable',
+        'maxlength': 'max-length',
+        'focus': 'auto-focus'
+    },
+    'image': {
+        'src': 'image-url'
+    }
+};
+var ATTR_VALUE_MAP = {
+    common: {},
+    'input': {
+        'type': {
+            'text': 'default',
+            'number': 'number',
+            'idcard': 'ascii-capable',
+            'digit': 'decimal'
+        }
+    }
+};
 var TYPE_MAP = {
     'view': 'stack',
-    'page': 'stack'
+    'page': 'stack',
+    'input': 'text-field'
 };
+var EVENT_MAP = {
+    'onTap': 'on-tap',
+    'onBlur': 'on-blur',
+    'onFocus': 'on-focus',
+    'onInput': 'on-change'
+};
 var LENGTH_KEYS = ['width', 'height', 'padding', 'padding-top', 'padding-left', 'padding-bottom', 'padding-right', 'margin', 'margin-top', 'margin-left', 'margin-bottom', 'margin-right', 'font-size', 'border-width'];
 function generateTemplate(xml, css) {
-    xml = "\n    <page>\n    " + xml + "\n    </page>\n    ";
+    xml = "\n    <page style=\"flex-direction:column\">\n    " + xml + "\n    </page>\n    ";
     var tpl = {};
@@ -121,2 +164,3 @@ tpl.styles = loadCss(css);
 function loadCss(css) {
+    css = css.replace(/\/\*.*?\*\//mg, '');
     var result = {};
@@ -129,9 +173,3 @@ var styleRe = /(.*?)\s*\{((?:.|\n)*?)\}/g;
         var selectors = selectorText.split(',').map(function (s) { return s.trim(); }).filter(function (s) { return s; });
-        var styles = {};
-        styleText.split(';').forEach(function (s) {
-            var _a = s.trim().split(':'), key = _a[0], value = _a[1];
-            if (key && value) {
-                styles[key.trim()] = value.trim();
-            }
-        });
+        var styles = parseStyle(styleText);
         selectors.forEach(function (s) {
@@ -144,4 +182,24 @@ result[s] = __assign({}, result[s], styles);
     }
-    return transformStylesMap(result);
+    return transformSelectorNames(result);
 }
+function parseStyle(styleText) {
+    var styles = {};
+    styleText.split(';').forEach(function (s) {
+        var _a = s.trim().split(':'), key = _a[0], value = _a[1];
+        if (key && value) {
+            styles[key.trim()] = value.trim();
+        }
+    });
+    return transformStyle(styles);
+}
+function assignStylesMap(target, source) {
+    for (var selector in source) {
+        if (selector in target) {
+            Object.assign(target[selector], source[selector]);
+        }
+        else {
+            target[selector] = source[selector];
+        }
+    }
+}
 function loadXml(xml) {
@@ -159,5 +217,5 @@ var root = xmljs.xml2js(xml, {
         if (node.elements && node.elements.length === 1 && node.elements[0].type === 'text') {
-            var text = node.elements[0].text;
+            var text = node.elements[0].text || '';
             node.elements = undefined;
-            return text;
+            return text.toString().trim();
         }
@@ -179,15 +237,63 @@ return undefined;
             mistNode['tag-name'] = tag;
-            if (node.name === 'image') {
-                style['image-url'] = attributes.src;
-            }
-            else if (node.name === 'text') {
+            if (tag === 'text') {
                 style.text = getText(node);
             }
-            else if (node.name === 'button') {
+            else if (tag === 'button') {
                 style.title = getText(node);
             }
-            if (attributes['a:for']) {
-                mistNode.repeat = attributes['a:for'];
-                mistNode.vars = { item: '${_item_}' };
+            var dataset = {};
+            var attrMap = __assign({}, ATTR_MAP.common, ATTR_MAP[tag]);
+            var attrValueMap = __assign({}, ATTR_VALUE_MAP.common, ATTR_VALUE_MAP[tag]);
+            for (var attr in attributes) {
+                var value = attributes[attr];
+                switch (attr) {
+                    case 'class':
+                        mistNode["class"] = value;
+                        break;
+                    case 'id':
+                        mistNode.id = value;
+                        break;
+                    case 'style':
+                        {
+                            if (typeof (value) === 'string' && !value.match(/\{\{.*?\}\}/)) {
+                                var styles = parseStyle(value);
+                                Object.assign(style, styles);
+                            }
+                            else {
+                                mistNode['inline-style'] = value;
+                            }
+                            break;
+                        }
+                    case 'a:for':
+                        {
+                            mistNode.repeat = attributes['a:for'];
+                            mistNode.vars = { item: '${_item_}', index: '${_index_}' };
+                            break;
+                        }
+                    default:
+                        {
+                            if (attr.startsWith('data-')) {
+                                var newKey = attr.substr(5).replace(/(?<=-)\w/g, function (s) { return s.toUpperCase(); });
+                                dataset[newKey] = value;
+                            }
+                            else if (attr in EVENT_MAP) {
+                                mistNode[EVENT_MAP[attr]] = {
+                                    type: 'call-js',
+                                    params: {
+                                        name: value,
+                                        event: '${_event_}'
+                                    }
+                                };
+                            }
+                            else {
+                                var newKey = attr in attrMap ? attrMap[attr] : attr;
+                                var newValue = attr in attrValueMap && typeof (value) === 'string' && value in attrValueMap[attr] ? attrValueMap[attr][value] : value;
+                                style[newKey] = newValue;
+                            }
+                        }
+                }
             }
+            if (Object.keys(dataset).length > 0) {
+                mistNode.dataset = dataset;
+            }
             if (node.elements) {
@@ -225,10 +331,3 @@ mistNode.children = node.elements.map(convertNode);
 }
-function transformStylesMap(stylesMap) {
-    stylesMap = transformSelectorNames(stylesMap);
-    for (var selector in stylesMap) {
-        stylesMap[selector] = transformStyles(stylesMap[selector]);
-    }
-    return stylesMap;
-}
-function transformStyles(styles) {
+function transformStyle(styles) {
     var newStyles = {};
@@ -235,0 +334,0 @@ for (var key in styles) {

out/mist-tiny-cli-start.js

@@ -101,3 +101,3 @@ #!/usr/bin/env node
         var _this = this;
-        var html, httpServer, defaultPort, maxRetryCount, ip, listen, port, url, localUrl, scheme, _a;
+        var html, httpServer, defaultPort, maxRetryCount, ip, listen, port, url, scheme, _a;
         return __generator(this, function (_b) {
@@ -167,3 +167,2 @@ switch (_b.label) {
                     url = "http://" + ip + ":" + port;
-                    localUrl = "http://localhost:" + port;
                     scheme = "koubei://platformapi/startapp?appId=30000238&canRemoteDebug=true&url=" + url;
@@ -177,5 +176,5 @@ if (enginePath) {
                     html = _a + (_b.sent()) + "\"></img>\n      \u4F7F\u7528\u53E3\u7891App\u626B\u7801\n    </div>\n  ";
-                    console.log("scheme: " + scheme + "\nor open this link to scan qrcode: " + localUrl);
+                    console.log("scheme: " + scheme + "\nor open this link to scan qrcode: " + url);
                     if (!noqr) {
-                        opn(localUrl);
+                        opn(url);
                     }
@@ -182,0 +181,0 @@ return [2 /*return*/];

package.json

 {
   "name": "mist-tiny-cli",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A CLI tool for Mist Tiny Apps",
@@ -5,0 +5,0 @@ "bin": {

README.md

@@ -13,3 +13,3 @@ ## Build
 cd path/to/project
-mist-tiny-cli.js start
+mist-tiny-cli start
 ```

No alert changes

Improved metrics

Total package byte prevSize

38949

10.1%

Lines of code

885

12.45%

No dependency changes