@lcap/nasl 0.3.9-beta

package/src/types/utils/logger.ts

@@ -0,0 +1,8 @@
+import config from '../config';
+
+export const logger = {
+    debug(...args: Array<any>) {
+        if (config.debug)
+            console.debug('[ASL Debug]', ...args);
+    }
+}

package/src/types/utils/string.ts

@@ -0,0 +1,56 @@
+/**
+ * 中划线格式 -转-> 驼峰格式
+ * @param name 原名称
+ * @return 转换后的名称
+ */
+export const kebab2Camel = (name: string) => name.replace(/(?:^|-)([a-zA-Z0-9])/g, (m, $1) => $1.toUpperCase());
+
+/**
+ * 驼峰格式 -转-> 中划线格式
+ * @param name 原名称
+ * @return 转换后的名称
+ */
+export const Camel2kebab = (name: string) => name.replace(/([A-Z]|[0-9]+)/g, (m, $1, offset) => (offset ? '-' : '') + $1.toLowerCase());
+/**
+ * 首字母大写
+ * @param value 字符串
+ */
+export const firstUpperCase = (value: string) => value.replace(/^\S/, (letter) => letter.toUpperCase());
+export const firstLowerCase = (value: string) => value.replace(/^\S/, (letter) => letter.toLowerCase());
+
+/**
+ * @param key 键
+ * @param set 数据集合，Array | Map | Set
+ * @param start 数字起始
+ */
+export function unique(key: string, set: Set<string> | Map<string, any> | Array<string> | { [name: string]: string }, start: number = 1) {
+    const has = (_key: string) => {
+        if (set instanceof Set || set instanceof Map)
+            return set.has(_key);
+        else if (Array.isArray(set))
+            return set.includes(_key);
+        else
+            return set[_key];
+    };
+
+    while (has(key))
+        key = key.replace(/\d*$/, (m) => String(m === '' ? start : +m + 1));
+    return key;
+}
+
+export const getLastOfPath = (path: string) => {
+    const arr = path.split('/');
+    return arr[arr.length - 1];
+};
+
+/**
+ * 切出标签内的内容
+ * @param source 原始内容
+ * @param tag 标签
+ * @param attrs 属性匹配
+ */
+export const sliceTagContent = (source: string, tag: string, attrs: string = '') => {
+    const reg = new RegExp(`<${tag}${attrs ? ' ' + attrs : ''}.*?>([\\s\\S]+)<\\/${tag}>`);
+    const m = source.match(reg);
+    return m ? m[1].replace(/^\n+/, '') : '';
+};

package/src/types/utils/traverse.ts

@@ -0,0 +1,160 @@
+/**
+ * 用于遍历的节点接口
+ */
+ export interface INode {
+    children?: Array<INode>,
+    [prop: string]: any,
+}
+/**
+ * 用于遍历的节点信息
+ */
+export interface INodeInfo<T extends INode> {
+    node: T,
+    parent?: T,
+    stack?: Array<T>,
+    nodePath?: string,
+    jsonPath?: string,
+    index?: number,
+    key?: string | number,
+}
+
+export interface TraverseOptions {
+    mode?: 'onlyChildren' | 'onlyArray' | 'anyObject',
+    depthFirst?: boolean,
+    excludedKeySet?: Set<string>,
+}
+
+function handleNext<T extends INode>(
+    func: (next: INodeInfo<T>) => any,
+    current: INodeInfo<T>,
+    options?: TraverseOptions,
+) {
+    if (options.mode === 'onlyChildren') {
+        const list = current.node && current.node.children;
+        if (!list)
+            return;
+
+        for (let index = 0; index < list.length; index++) {
+            const child = list[index];
+            if (!child)
+                continue;
+
+            const nodeInfo: INodeInfo<T> = {
+                node: child as T,
+                parent: current.node,
+                stack: current.stack.concat([current.node]),
+                nodePath: `${current.nodePath}/${index}`,
+                jsonPath: `${current.jsonPath}.children[${index}]`.replace(/^\./, ''),
+                index,
+                key: index,
+            };
+            const result = func(nodeInfo);
+            // if (result !== undefined)
+            //     return result;
+        }
+    } else if (options.mode === 'onlyArray') {
+        for (const key in current.node) {
+            if (!current.node.hasOwnProperty(key) || options.excludedKeySet.has(key))
+                continue;
+            const value = current.node[key];
+            if (!Array.isArray(value))
+                continue;
+
+            const list = value;
+            for (let index = 0; index < list.length; index++) {
+                const child = list[index];
+                if (!child)
+                    continue;
+
+                const nodeInfo: INodeInfo<T> = {
+                    node: child as T,
+                    parent: current.node,
+                    stack: current.stack.concat([current.node]),
+                    nodePath: `${current.nodePath}/${index}`,
+                    jsonPath: `${current.jsonPath}.${key}[${index}]`.replace(/^\./, ''),
+                    index,
+                    key: index,
+                };
+                const result = func(nodeInfo);
+                // if (result !== undefined)
+                //     return result;
+            }
+        }
+    } else if (options.mode === 'anyObject') {
+        for (const key in current.node) {
+            if (!current.node.hasOwnProperty(key) || options.excludedKeySet.has(key))
+                continue;
+            const value = current.node[key];
+            if (Array.isArray(value)) {
+                const list = value;
+                for (let index = 0; index < list.length; index++) {
+                    const child = list[index];
+                    if (!child)
+                        continue;
+
+                    const nodeInfo: INodeInfo<T> = {
+                        node: child as T,
+                        parent: current.node,
+                        stack: current.stack.concat([current.node]),
+                        nodePath: `${current.nodePath}/${index}`,
+                        jsonPath: `${current.jsonPath}.${key}[${index}]`.replace(/^\./, ''),
+                        index,
+                        key: index,
+                    };
+                    const result = func(nodeInfo);
+                    // if (result !== undefined)
+                    //     return result;
+                }
+            } else if (typeof value === 'object' && value !== null) {
+                const nodeInfo: INodeInfo<T> = {
+                    node: value as T,
+                    parent: current.node,
+                    stack: current.stack.concat([current.node]),
+                    nodePath: `${current.nodePath}/${key}`,
+                    jsonPath: `${current.jsonPath}['${key}']`,
+                    index: undefined,
+                    key,
+                };
+                const result = func(nodeInfo);
+                // if (result !== undefined)
+                //     return result;
+            }
+        }
+    }
+}
+
+/**
+ * 遍历树
+ * @param func
+ * @param init 初始点信息
+ * @param options.mode 'onlyChildren' 表示只向下遍历 children 的元素（默认）；'onlyArray' 表示只向下遍历 Array 的元素；'anyObject' 表示只要属性为 Object 类型都会遍历
+ * @param options.depthFirst 默认广度优先搜索，是否深度优先搜索
+ * @example traverse((current) => console.log(current.node.name), { init: rootNode });
+ * @example traverse((current) => console.log(current.jsonPath), { init: ast }, { mode: 'anyObject' });
+ */
+export function traverse<T extends INode>(
+    func: (current: INodeInfo<T>) => any,
+    init: INodeInfo<T>,
+    options?: TraverseOptions,
+) {
+    init = Object.assign({ parent: undefined, stack: [], nodePath: '', jsonPath: '', index: undefined }, init);
+    options = Object.assign({ mode: 'onlyChildren', depthFirst: false, excludedKeySet: new Set() }, options);
+
+    if (options.depthFirst) {
+        func(init);
+        handleNext<T>((next) => traverse(func, next, options), init, options);
+    } else {
+        let queue: Array<INodeInfo<T>> = [];
+        queue = queue.concat(init);
+        let current: INodeInfo<T>;
+        while ((current = queue.shift())) {
+            const result = func(current);
+            if (result !== undefined)
+                return result;
+
+            handleNext<T>((next) => queue.push(next), current, options);
+        }
+    }
+}
+
+export default traverse;

package/src/views/components/lcap-json-view/README.md

@@ -0,0 +1,80 @@
+# DataView（数据视图）
+
+## 示例
+### 最简形式
+
+``` html
+<u-data-view-node :value="{
+    test1: null,
+    test2: undefined,
+    test5: 'string',
+    test6: [1, 2, 'abc'],
+    number: {
+        test4: 123,
+        test3: Infinity,
+        test4: NaN,
+    }
+}" :expanded="true"></u-data-view-node>
+```
+
+### 基本形式
+
+``` html
+<u-data-view>
+    <u-data-view-node :value="{
+        test1: null,
+        test2: undefined,
+        test5: 'string',
+        test6: [1, 2, 'abc'],
+        number: {
+            test4: 123,
+            test3: Infinity,
+            test4: NaN,
+        }
+    }" :expanded="true"></u-data-view-node>
+    <u-data-view-node :value="{}" :expanded="true"></u-data-view-node>
+    <u-data-view-node :value="[1, 2, 3]" :expanded="true"></u-data-view-node>
+    <u-data-view-node :value="[]" :expanded="true"></u-data-view-node>
+</u-data-view>
+```
+
+``` html
+<u-data-view :value="{
+    test1: null,
+    test2: undefined,
+    test5: 'string',
+    test6: [1, 2, 'abc'],
+    number: {
+        test4: 123,
+        test3: Infinity,
+        test4: NaN,
+    }
+}"></u-data-view>
+```
+
+### 只读和禁用
+
+``` html
+<u-data-view readonly :value="{
+    test1: null,
+    test2: undefined,
+    test5: 'string',
+    test6: [1, 2, 'abc'],
+    number: {
+        test4: 123,
+        test3: Infinity,
+        test4: NaN,
+    }
+}"></u-data-view>
+<u-data-view disabled :value="{
+    test1: null,
+    test2: undefined,
+    test5: 'string',
+    test6: [1, 2, 'abc'],
+    number: {
+        test4: 123,
+        test3: Infinity,
+        test4: NaN,
+    }
+}"></u-data-view>
+```

package/src/views/components/lcap-json-view/index.js

@@ -0,0 +1,9 @@
+import LcapJsonView from './index.vue';
+import LcapJsonViewNode from './node.vue';
+
+export {
+    LcapJsonView,
+    LcapJsonViewNode,
+};
+
+export default LcapJsonView;

package/src/views/components/lcap-json-view/index.vue

@@ -0,0 +1,61 @@
+<template>
+    <div :class="$style.root">
+        <template v-if="keys">
+            <lcap-json-view-node
+                v-for="subKey in keys"
+                :key="subKey"
+                :property="subKey"
+                v-model="value[subKey]"
+                :readonly="readonly"
+                :disabled="disabled"
+            ></lcap-json-view-node>
+        </template>
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+import LcapJsonViewNode from './node.vue';
+
+export default {
+    name: 'lcap-json-view',
+    childName: 'lcap-json-view-node',
+    components: {
+        LcapJsonViewNode,
+    },
+    mixins: [LcapJsonViewNode],
+    props: {
+        expandDepth: { type: Number, default: 0 },
+    },
+
+    created() {
+        this.rootVM = this;
+        this.$on('add-node-vm', (nodeVM) => {
+            nodeVM.rootVM = this;
+            this.nodeVMs.push(nodeVM);
+        });
+        this.$on('remove-node-vm', (nodeVM) => {
+            nodeVM.rootVM = undefined;
+            this.nodeVMs.splice(this.nodeVMs.indexOf(nodeVM), 1);
+        });
+    },
+    methods: {
+        change($event) {
+            this.$emit('change', $event);
+        },
+    },
+};
+</script>
+
+<style module>
+.root {
+    background: white;
+    border: 1px solid var(--border-color-base);
+    overflow-x: auto;
+}
+
+.root[theme="one-monakai"] {
+    background: var(--background-color-default);
+    color: #abb2bf;
+}
+</style>

package/src/views/components/lcap-json-view/node.vue

@@ -0,0 +1,328 @@
+<template>
+    <div :class="$style.root">
+        <div :class="$style.item" :disabled="disabled">
+            <div :class="$style.expander" v-if="keys"
+                :expanded="currentExpanded" @click="toggle()"></div>
+            <span :class="$style.property" v-if="property" @click="toggle()">{{ property }}</span>
+            <span :class="$style.colon" v-if="property" @click="toggle()">: </span>
+            <span :class="$style.value">
+                <span :class="$style.text" :type="valueType" :editing="editing" @dblclick="edit()">{{ formattedValue }}</span>
+                <textarea ref="textarea" :class="$style.textarea" v-if="editing" v-model="editingValue" :style="textareaStyle"
+                    autofocus @click.stop
+                    @input="resizeTextarea($event.target)"
+                    @blur="change()"
+                    @keydown.enter="change()"
+                ></textarea>
+            </span>
+        </div>
+        <div :class="$style.list" v-if="currentExpanded && keys && keys.length < 1000">
+            <lcap-json-view-node
+                v-for="subKey in keys"
+                :key="subKey"
+                :property="subKey"
+                v-model="currentValue[subKey]"
+                :readonly="readonly"
+                :disabled="disabled"
+            ></lcap-json-view-node>
+        </div>
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+import { MEmitter } from 'cloud-ui.vusion';
+import saferEval from 'safer-eval';
+
+const rawTypeRE = /^\[object (\w+)]$/;
+const specialTypeRE = /^\[native \w+ (.*)\]$/;
+
+import isPlainObject from 'lodash/isPlainObject';
+
+export default {
+    name: 'lcap-json-view-node',
+    rootName: 'lcap-json-view',
+    mixins: [MEmitter],
+    props: {
+        property: String,
+        value: null,
+        expanded: { type: Boolean, default: false },
+        readonly: { type: Boolean, default: false },
+        disabled: { type: Boolean, default: false },
+    },
+
+    data() {
+        return {
+            depth: 0,
+            currentExpanded: this.expanded,
+            editing: false,
+            currentValue: this.value,
+            editingValue: '',
+            nodeVMs: [],
+            parentVM: undefined,
+            rootVM: undefined,
+            textareaStyle: {},
+        };
+    },
+    computed: {
+        valueType() {
+            const type = typeof this.currentValue;
+
+            if (this.currentValue === null || this.currentValue === undefined)
+                return 'null';
+            else if (type === 'boolean' || type === 'number' || this.currentValue === Infinity)
+                return 'literal';
+            else if (specialTypeRE.test(this.currentValue))
+                return 'native';
+            else if (type === 'string' && !rawTypeRE.test(this.currentValue))
+                return 'string';
+
+            return 'null';
+        },
+        formattedValue() {
+            const type = typeof this.currentValue;
+
+            if (this.currentValue === null)
+                return 'null';
+            else if (this.currentValue === undefined)
+                return 'undefined';
+            else if (type === 'number' && isNaN(this.currentValue))
+                return 'NaN';
+            else if (this.currentValue === Infinity)
+                return 'Infinity';
+            else if (Array.isArray(this.currentValue))
+                return 'Array[' + this.currentValue.length + ']';
+            else if (isPlainObject(this.currentValue))
+                return ('Object' + (Object.keys(this.currentValue).length ? '' : ' (empty)'));
+            else if (type === 'object' && !isPlainObject(this.currentValue))
+                return (this.currentValue.constructor.name + (Object.keys(this.currentValue).length ? '' : ' (empty)'));
+            else if (this.currentValueType === 'native')
+                return specialTypeRE.exec(this.currentValue)[1];
+            else if (type === 'string') {
+                const typeMatch = this.currentValue.match(rawTypeRE);
+                if (typeMatch)
+                    return typeMatch[1];
+                else
+                    return JSON.stringify(this.currentValue);
+            } else if (type === 'function')
+                return 'Function';
+            else
+                return this.currentValue;
+        },
+        keys() {
+            if (typeof this.currentValue === 'object' && this.currentValue !== null)
+                return Object.keys(this.currentValue);
+            else
+                return null;
+        },
+    },
+    watch: {
+        expanded(expanded) {
+            this.currentExpanded = expanded;
+        },
+        value(value) {
+            this.currentValue = value;
+        },
+    },
+
+    created() {
+        this.$dispatch(this.$options.name, 'add-node-vm', this);
+        !this.parentVM
+            && this.$dispatch(this.$options.rootName, 'add-node-vm', this);
+
+        this.$on('add-node-vm', (nodeVM) => {
+            nodeVM.rootVM = this.rootVM;
+            nodeVM.parentVM = this;
+            nodeVM.depth = this.depth + 1;
+            if (nodeVM.depth <= nodeVM.rootVM.expandDepth)
+                nodeVM.currentExpanded = true;
+            this.nodeVMs.push(nodeVM);
+        });
+        this.$on('remove-node-vm', (nodeVM) => {
+            nodeVM.rootVM = undefined;
+            nodeVM.parentVM = undefined;
+            this.nodeVMs.splice(this.nodeVMs.indexOf(nodeVM), 1);
+        });
+    },
+    destroyed() {
+        this.$dispatch(this.$options.rootName, 'remove-node-vm', this);
+        this.$dispatch(this.$options.name, 'remove-node-vm', this);
+    },
+    methods: {
+        toggle(expanded) {
+            const oldExpanded = this.currentExpanded;
+
+            if (expanded === undefined)
+                expanded = !this.currentExpanded;
+
+            if (expanded === oldExpanded)
+                return;
+
+            let cancel = false;
+            this.$emit('before-toggle', {
+                expanded,
+                nodeVM: this,
+                preventDefault: () => (cancel = true),
+            });
+
+            if (cancel)
+                return;
+
+            this.currentExpanded = expanded;
+
+            this.$emit('update:expanded', expanded);
+            this.$emit('toggle', {
+                expanded,
+                nodeVM: this,
+            });
+        },
+        edit() {
+            if (this.readonly || this.disabled)
+                return;
+
+            this.editing = true;
+
+            this.editingValue = JSON.stringify(this.currentValue, (key, value) => {
+                if (value === undefined)
+                    return '__vusion__undefined__';
+                else if (typeof value === 'number' && isNaN(value))
+                    return '__vusion__NaN__';
+                else if (value === Infinity)
+                    return '__vusion__Infinity__';
+                return value;
+            }).replace(/"__vusion__undefined__"/g, 'undefined')
+                .replace(/"__vusion__NaN__"/g, 'NaN')
+                .replace(/"__vusion__Infinity__"/g, 'Infinity');
+
+            this.$nextTick(() => {
+                this.resizeTextarea(this.$refs.textarea);
+                this.$refs.textarea.select();
+            });
+        },
+        change() {
+            this.editing = false;
+            try {
+                const newValue = saferEval(this.editingValue);
+                this.$emit('input', newValue);
+
+                const $event = {
+                    property: this.property,
+                    oldValue: this.currentValue,
+                    newValue,
+                    nodeVM: this,
+                };
+
+                this.$emit('change', $event);
+                this.rootVM.change($event);
+            } catch (e) {}
+        },
+        resizeTextarea(textareaEl) {
+            textareaEl.style.width = '3px';
+            textareaEl.style.height = '3px';
+            textareaEl.style.width = textareaEl.scrollWidth - 3 + 'px';
+            textareaEl.style.height = textareaEl.scrollHeight + 'px';
+        },
+    },
+};
+</script>
+
+<style module>
+.root {
+    font-family: Menlo, Consolas, monospace;
+    margin-left: 20px;
+    cursor: default;
+}
+
+.item {
+    position: relative;
+    white-space: nowrap;
+}
+
+.item[disabled] {
+    opacity: 0.6;
+}
+
+.property {
+    color: #2c75e4;
+}
+
+.value {
+    display: inline-block;
+    position: relative;
+}
+
+.text[type="null"] {
+    color: #93989f;
+}
+
+.text[type="string"] {
+    color: #55a808;
+}
+
+.text[type="literal"] {
+    color: #e0276e;
+}
+
+.text[editing] {
+    visibility: hidden;
+}
+
+.textarea {
+    position: absolute;
+    top: -1px;
+    left: -4px;
+    z-index: 1;
+    outline: none;
+    border: 1px solid #bbb;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+    font-family: Menlo, Consolas, monospace;
+    line-height: inherit;
+    box-sizing: content-box;
+    resize: none;
+    padding: 0 3px;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.textarea[role="back"] {
+    line-height: 1;
+}
+
+.expander {
+    position: absolute;
+    z-index: 1;
+    width: 19px;
+    height: 19px;
+    text-align: center;
+    margin-left: -19px;
+    color: #6e6e6e;
+}
+
+.expander::before {
+    display: inline-block;
+    font-size: var(--font-size-large);
+    line-height: 18px;
+    transition: transform var(--transition-duration-base);
+    transform: rotate(90deg);
+    icon-font: url('vscode-codicons/src/icons/debug-breakpoint-function.svg');
+}
+
+.expander[expanded]::before {
+    transform: rotate(180deg);
+}
+
+[class^="index__"][theme="one-monakai"] .property {
+    color: #e06c75;
+}
+
+[class^="index__"][theme="one-monakai"] .text[type="null"] {
+    color: #7f848e;
+}
+
+[class^="index__"][theme="one-monakai"] .text[type="string"] {
+    color: #98c379;
+}
+
+[class^="index__"][theme="one-monakai"] .text[type="literal"] {
+    color: #d19a66;
+}
+</style>