first push

Author: realign

.eslintrc.js

@@ -0,0 +1,39 @@
+module.exports = {
+    "env": {
+        // "browser": true,
+        "es6": true,
+        "node": true,
+    },
+    "globals": {
+        "module": true,
+    },
+    "extends": "eslint:recommended",
+    parser: "babel-eslint",
+    "parserOptions": {
+        "sourceType": "module",
+        parser: "babel-eslint",
+    },
+    "rules": {
+        "indent": [
+            "error",
+            4
+        ],
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "error",
+            "single"
+        ],
+        "semi": [
+            "error",
+            "always"
+        ],
+        // "comma-dangle": [
+        //     "error",
+        //     "always"
+        // ],
+        "no-console": "off",
+    }
+};

.gitignore

@@ -1,61 +1,3 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+node_modules
 
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-
-# next.js build output
-.next
+package-lock.json

README.md

@@ -1 +1,37 @@
-# vue-sfc-descriptor-stringify
+# vue-sfc-descriptor-stringify
+
+> Translate Vue SFC descriptor to String.
+> 将 vue-sfc 描述 转为 字符串。
+
+## Scene
+
+需要操作 `vue` 文件，进行 `属性` 或者 `内容` 的更改，类似 `babel`。
+
+## Usage
+
+### Install
+
+```bash
+# install
+$ npm i vue-sfc-descriptor-stringify -D
+```
+
+### Call
+
+```js
+const Stringify = require('vue-sfc-descriptor-stringify');
+
+/**
+ * @name    Stringify
+ * @param
+ *  sfcDescriptor       需要转换成 string 的 sfc
+ *  originSfcDescriptor 原始 sfc，如果没有对 sfcDescriptor 处理的话，跟 sfcDescriptor 是一样的
+ *  options             配置
+ *      indents         缩进
+ *          template:   2 // 默认
+ *          script:     0 // 默认
+ *          style:      0 // 默认
+ * @returns String      转换之后的 vue-sfc 内容
+ */
+const str = Stringify(sfcDescriptor, originSfcDescriptor, options);
+```

__test__/index.js

@@ -0,0 +1,22 @@
+const fs = require('fs');
+const _ = require('./../src/lib/util');
+const compiler = require('vue-template-compiler');
+const Stringify = require('../src/index');
+
+const source = fs.readFileSync('./tpl/multiple-styles.vue', 'utf8');
+const descriptor = compiler.parseComponent(source) || {};
+const oriDescriptor = _.cloneDeep(descriptor);
+
+descriptor.styles.forEach((item) => {
+    if(!item.attrs) {
+        item.attrs = {};
+    }
+
+    item.attrs.lang = 'less';
+});
+
+const result = Stringify(descriptor, oriDescriptor);
+
+fs.writeFile('./tpl/multiple-styles_new.vue', result, (err) => {
+    console.log(err);
+});

__test__/tpl/multiple-styles.vue

@@ -0,0 +1,93 @@
+
+<template>
+    <div id="app">
+        <el-menu
+            router
+            mode="horizontal"
+            :default-active="activeIndex"
+            :class="defaultClass">
+            <el-menu-item index="/">
+            物料堆页面
+            <el-tooltip
+                effect="light"
+                placement="right-end">
+                <div slot="content">
+                    <p class="m-custom-tips">
+                        1. 选择需要的区块，点击按钮添加到预览区<br>
+                        2. 拖拽预览区的区块，进行排序<br>
+                        3. 需要的区块添加完成，点击右上角进行其他信息编辑<br>
+                        4. 完善路由、文件路径等信息<br>
+                        5. 点击“开始创建”，完成后点击在编辑器中打开
+                    </p>
+                </div>
+                <i class="el-icon-question"></i>
+            </el-tooltip>
+            </el-menu-item>
+        </el-menu>
+        <div class="g-body">
+            <router-view></router-view>
+        </div>
+    </div>
+</template>
+
+
+
+<script>
+    export default {
+        name: 'app',
+        data() {
+            return {
+                defaultClass: 'g-el-menu-fix-top',
+                activeIndex: '/',
+            };
+        },
+    }
+</script>
+
+<style lang="scss" type="text/less">
+html,
+body,
+#app {
+    position: relative;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+}
+#app {
+    font-family: sans-serif, Helvetica, Arial;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
+    color: #2c3e50;
+    margin-top: 0;
+}
+.el-menu.g-el-menu-fix-top {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+}
+.g-body {
+    position: relative;
+    height: calc(100% - 65px);
+}
+.m-custom-tips {
+    margin: 0 4px;
+    line-height: 20px;
+}
+
+$scrollbar-w: 8px;
+$scrollbar-h: 8px;
+$scrollbar-color: #aaa;
+* {
+    ::-webkit-scrollbar {
+        width: $scrollbar-w;
+        height: $scrollbar-h;
+        background: #efefef;
+    }
+    ::-webkit-scrollbar-thumb {
+        background: $scrollbar-color;
+        border-radius: $scrollbar-w / 2;
+    }
+}
+</style>

package.json

@@ -0,0 +1,37 @@
+{
+  "name": "vue-sfc-descriptor-stringify",
+  "version": "0.0.1",
+  "description": "Translate vue sfc to string.",
+  "main": "src/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "devDependencies": {
+    "babel-eslint": "^10.0.1",
+    "body-parser": "^1.19.0",
+    "eslint": "^5.16.0",
+    "jest": "^22.3.0",
+    "lodash": "^4.17.15",
+    "n-s-logs": "0.2.0",
+    "vue-template-compiler": "^2.5.13"
+  },
+  "dependencies": {
+    "indent-string": "^3.2.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ReAlign/vue-sfc-descriptor-stringify.git"
+  },
+  "keywords": [
+    "vue",
+    "sfc",
+    "toString",
+    "stringify"
+  ],
+  "author": "ReAlign",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ReAlign/vue-sfc-descriptor-stringify/issues"
+  },
+  "homepage": "https://github.com/ReAlign/vue-sfc-descriptor-stringify#readme"
+}

src/index.js

@@ -0,0 +1,207 @@
+/**
+ * @name    vue-sfc-descriptor-stringify
+ * @author  ReAlign
+ * @date    2019-08-07
+ */
+const _ = require('./lib/util');
+const indentString = require('indent-string');
+
+const Stringify = {};
+
+/**
+ * @name    获取起始标签
+ * @param   block   模块
+ */
+Stringify._getOpenTag = (block = {}) => {
+    const {
+        type = '',
+        attrs = {},
+    } = block;
+
+    // 属性字符串
+    let _attrsKVStr = Object.keys(attrs)
+        // template -> script -> style
+        .sort()
+        // 填充：k=v
+        .map(name => {
+            const value = attrs[name];
+
+            return value === true ? name : `${name}="${value}"`;
+        })
+        // join by ' '
+        .join(' ');
+    _attrsKVStr = _attrsKVStr.length ? ` ${_attrsKVStr}` : _attrsKVStr;
+
+    return `<${type}${_attrsKVStr}>`;
+};
+
+/**
+ * @name    获取结束标签
+ * @param   block   模块
+ */
+Stringify._getCloseTag = (block = {}) => {
+    const {
+        type = '',
+    } = block;
+
+    return `</${type}>\n`;
+};
+
+/**
+ * @name    根据类型查找配置
+ * @param
+ *  type            类型
+ *  sfcWithConfig   数据源
+ *  opts            配置数据
+ *      index       ${type} 的索引
+ */
+Stringify._$findConfigByType = (type = '', sfcWithConfig = {}, opts = {}) => {
+    const {
+        index = 0,
+    } = opts;
+    const typesIndex = {};
+    let _conf = null;
+
+    sfcWithConfig.some(item => {
+        if(typesIndex[item.type] === undefined) {
+            typesIndex[item.type] = -1;
+        }
+        typesIndex[item.type]++;
+        //            同类型              && 同下标
+        const _flag = item.type === type && index === typesIndex[item.type];
+        if(_flag) {
+            _conf = item.__data__;
+        }
+
+        return _flag;
+    });
+    // console.log(type, _conf);
+
+    return _conf;
+};
+
+/**
+ * @name    获取缩进配置
+ * @param   options     全局配置
+ */
+Stringify._$getIndents = (options = {}) => {
+    const {
+        indents = {},
+    } = options;
+
+    return Object.assign({
+        template: 2,
+        script: 0,
+        style: 0
+    }, indents);
+};
+
+
+/**
+ * @name    SFC 基础解析
+ * @param   sfc     sfc对象
+ * @returns blockList
+ */
+Stringify._$baseParse = (sfc = {} /*, options = {} */) => {
+    const {
+        template,
+        script,
+        styles,
+        customBlocks,
+    } = sfc;
+
+    const blocks = [
+        template,
+        script,
+        ...styles,
+        ...customBlocks,
+    ];
+
+    return blocks
+        // 过滤掉不存在的部分
+        .filter(block => block !== null)
+        // 根据原文件的位置排序
+        .sort((a, b) => a.start - b.start)
+        // 算出准确的源位置的块
+        .map((block = {}) => {
+            const openTag = Stringify._getOpenTag(block);
+            const closeTag = Stringify._getCloseTag(block);
+
+            return Object.assign({}, block, {
+                openTag,
+                closeTag,
+
+                startOfOpenTag: Math.max(block.start - openTag.length, 0),
+                endOfOpenTag: block.start,
+
+                startOfCloseTag: block.end,
+                endOfCloseTag: block.end + closeTag.length
+            });
+        });
+};
+
+/**
+ * @name    sfc转字符串
+ * @param   sfcDescriptor   sfc 对象
+ * @param   options         全局配置
+ * @param   sfcWithConfig   sfc 带有处理之后的配置项
+ */
+Stringify._$toStr = (sfcDescriptor = {}, options = {}, sfcWithConfig = {}) => {
+    const newIndents = Stringify._$getIndents(options);
+    const _sfcBlocks = Stringify._$baseParse(sfcDescriptor, options);
+
+    // 生成 sfc
+    return _sfcBlocks.reduce((sfcCode, block) => {
+        const cusData = Stringify._$findConfigByType(block.type, sfcWithConfig);
+        const emptyLines = _.get(cusData, 'emptyLinesBefore', 0);
+        const indent = _.get(newIndents, `${block.type}`, 0);
+
+        return [
+            sfcCode,
+            '\n'.repeat(emptyLines),
+            block.openTag,
+            indentString(block.content, indent),
+            block.closeTag
+        ].join('');
+    }, '');
+};
+
+/**
+ * @name    给原始sfc添加属性
+ */
+Stringify._$appendConfigOriginSFC = (originSfcDescriptor = {}, options = {}) => {
+    const ori = Stringify._$baseParse(originSfcDescriptor, options);
+
+    ori.forEach((block, index, array) => {
+        block.__data__ = {};
+
+        // 获取模块之前的空行
+        const _getEmptyLinesBeforeBlock = (block, index, array) => {
+            return index === 0
+                ? block.startOfOpenTag
+                : block.startOfOpenTag - array[index - 1].endOfCloseTag;
+        };
+        block.__data__.emptyLinesBefore = _getEmptyLinesBeforeBlock(block, index, array);
+    });
+
+    return ori;
+};
+
+/**
+ * @name    VueSFC to String
+ * @param
+ *  sfcDescriptor       需要转换成string 的 sfc
+ *  originSfcDescriptor 原始 sfc，如果没有对 sfc 处理的话，跟 sfcDescriptor 是一样的
+ *  options             配置
+ *      indents         缩进
+ *          template:   2,
+ *          script:     0,
+ *          style:      0,
+ */
+Stringify.toString = (sfcDescriptor = {}, originSfcDescriptor = {}, options = {}) => {
+    const sfcWithConfig = Stringify._$appendConfigOriginSFC(originSfcDescriptor, options);
+    // console.log(sfcWithConfig);
+    return Stringify._$toStr(sfcDescriptor, options, sfcWithConfig);
+};
+
+module.exports = Stringify.toString;

src/lib/util.js

@@ -0,0 +1,63 @@
+const _ = {
+    typeOf(o) {
+        return o == null ? String(o) : ({}).toString.call(o).slice(8, -1).toLowerCase();
+    },
+    get(obj = {}, path = '', {
+        defaVal
+    } = {
+        defaVal: ''
+    }) {
+        let _res = (Array.isArray(path) ?
+            path :
+            path.replace(/\[/g, '.').replace(/'|"|\]/g, '').split('.'))
+            .reduce((total, curVal) => (total || {})[curVal], obj);
+
+        return _.typeOf(_res) === 'undefined' ? defaVal : _res;
+    },
+    cloneDeep(obj) {
+        var cloneObj = function (obj) {
+            var result = {},
+                item, type;
+            for (var i in obj) {
+                item = obj[i];
+                type = _.typeOf(item);
+                if (type === 'object') {
+                    result[i] = cloneObj(item);
+                } else if (type === 'array') {
+                    result[i] = cloneArray(item);
+                } else {
+                    result[i] = item;
+                }
+            }
+            return result;
+        };
+        var cloneArray = function (obj) {
+            var result = [],
+                item, type;
+            for (var i = 0; i < obj.length; i++) {
+                item = obj[i];
+                type = _.typeOf(item);
+                if (type === 'object') {
+                    result[i] = cloneObj(item);
+                } else if (type === 'array') {
+                    result[i] = cloneArray(item);
+                } else if (typeof item !== 'object') {
+                    result[i] = item;
+                }
+            }
+            return result;
+        };
+        var type = _.typeOf(obj);
+        switch (type) {
+
+        case 'object':
+            return cloneObj(obj);
+        case 'array':
+            return cloneArray(obj);
+        default:
+            return obj;
+        }
+    }
+};
+
+module.exports = _;