Giter Site home page Giter Site logo

san-anode-utils's Introduction

San ANode Utils

Util Functions for San ANode. 和 San ANode 相关的功能函数集。

NPM version License CircleCI

版本说明

由于 San 在不同的 minor 版本号之间,ANode 会有细微差别。所以,san-anode-utils 的版本号与 San 版本号二位兼容。也就是说,san-anode-utils 3.9.x 版本支持 San 3.9.x

安装

$ npm i --save san-anode-utils

Properties

ExprType

表达式类型枚举常量。包含表达式见下方示例。

Object

ExprType = {
    STRING,
    NUMBER,
    BOOL,
    ACCESSOR,
    INTERP,
    CALL,
    TEXT,
    BINARY,
    UNARY,
    TERTIARY,
    OBJECT,
    ARRAY,
    NULL
};

Functions

parseTemplate

parseTemplate({string}template): {ANode}

将模板字符串解析成 ANode 对象。

const aNodeUtils = require('san-anode-utils');

let aNode = aNodeUtils.parseTemplate('<p>Hello {{name}}</p>');
/* aNode
{
    "directives": {},
    "props": [],
    "events": [],
    "children": [
        {
            "directives": {},
            "props": [],
            "events": [],
            "children": [
                {
                    "textExpr": {
                        "type": 7,
                        "segs": [
                            {
                                "type": 1,
                                "value": "Hello "
                            },
                            {
                                "type": 5,
                                "expr": {
                                    "type": 4,
                                    "paths": [
                                        {
                                            "type": 1,
                                            "value": "name"
                                        }
                                    ]
                                },
                                "filters": []
                            }
                        ]
                    }
                }
            ],
            "tagName": "p"
        }
    ]
}
*/

parseComponentTemplate

将组件的模板解析成 ANode 对象。与直接调用 parseTemplate 不同,parseComponentTemplate 会自动抽取第一个子元素作为组件根元素,为其附加 id/style/class 的逻辑,其行为与运行时组件编译完全相同。

parseComponentTemplate({Function}ComponentClass): {ANode}

const aNodeUtils = require('san-anode-utils');
const san = require('san');

const MyComponent = san.defineComponent({
    template: '<p>Hello {{name}}</p>'
});
let aNode = aNodeUtils.parseComponentTemplate(MyComponent);
/* aNode
{
    "directives": {},
    "props": [
        {
            "name": "class",
            "expr": {
                "type": 5,
                "expr": {
                    "type": 4,
                    "paths": [
                        {
                            "type": 1,
                            "value": "class"
                        }
                    ]
                },
                "filters": [
                    {
                        "type": 6,
                        "args": [],
                        "name": {
                            "type": 4,
                            "paths": [
                                {
                                    "type": 1,
                                    "value": "_class"
                                }
                            ]
                        }
                    }
                ]
            }
        },
        {
            "name": "style",
            "expr": {
                "type": 5,
                "expr": {
                    "type": 4,
                    "paths": [
                        {
                            "type": 1,
                            "value": "style"
                        }
                    ]
                },
                "filters": [
                    {
                        "type": 6,
                        "args": [],
                        "name": {
                            "type": 4,
                            "paths": [
                                {
                                    "type": 1,
                                    "value": "_style"
                                }
                            ]
                        }
                    }
                ]
            }
        },
        {
            "name": "id",
            "expr": {
                "type": 4,
                "paths": [
                    {
                        "type": 1,
                        "value": "id"
                    }
                ]
            }
        }
    ],
    "events": [],
    "children": [
        {
            "textExpr": {
                "type": 7,
                "segs": [
                    {
                        "type": 1,
                        "value": "Hello "
                    },
                    {
                        "type": 5,
                        "expr": {
                            "type": 4,
                            "paths": [
                                {
                                    "type": 1,
                                    "value": "name"
                                }
                            ]
                        },
                        "filters": []
                    }
                ]
            }
        }
    ],
    "tagName": "p"
}
*/

parseExpr

将表达式源码解析成 ANode 对象。

parseExpr({string}source): {ANode}

const aNodeUtils = require('san-anode-utils');

let aNode = aNodeUtils.parseExpr('num + 1');
/* aNode
{
    "type": 8,
    "operator": 43,
    "segs": [
        {
            "type": 4,
            "paths": [
                {
                    "type": 1,
                    "value": "num"
                }
            ]
        },
        {
            "type": 2,
            "value": 1
        }
    ]
}
*/

pack

ANode 压缩成 APack

pack({ANode}source): {Array}

const aNodeUtils = require('san-anode-utils');

let aNode = aNodeUtils.parseTemplate('<p>Hello {{name}}</p>');
let aPack = aNodeUtils.pack(aNode.children[0]);
/* aPack
[
    1,
    "p",
    1,
    undefined,
    9,
    undefined,
    2,
    3,
    "Hello ",
    7,
    undefined,
    6,
    1,
    3,
    "name",
    undefined
]
*/

pack.stringify

APack 转换成字符串。

pack.stringify({ANode}source): {Array}

const aNodeUtils = require('san-anode-utils');

let aNode = aNodeUtils.parseTemplate('<p>Hello {{name}}</p>');
let aPack = aNodeUtils.pack(aNode.children[0]);
let aPackString = aNodeUtils.pack.stringify(aPack);
/* aPackString
[1,"p",1,,9,,2,3,"Hello ",7,,6,1,3,"name",]
*/

unpack

APack 解压缩成 ANode

unpack({Array}aPack): {ANode}

const aNodeUtils = require('san-anode-utils');

let aNode = aNodeUtils.unpack([1,"p",1,,9,,2,3,"Hello ",7,,6,1,3,"name",]);
/* aNode
{
    "directives": {},
    "props": [],
    "events": [],
    "children": [
        {
            "textExpr": {
                "type": 7,
                "segs": [
                    {
                        "type": 1,
                        "value": "Hello "
                    },
                    {
                        "type": 5,
                        "expr": {
                            "type": 4,
                            "paths": [
                                {
                                    "type": 1,
                                    "value": "name"
                                }
                            ]
                        },
                        "filters": []
                    }
                ]
            }
        }
    ],
    "tagName": "p"
}
*/

License

san-anode-utils is MIT licensed.

san-anode-utils's People

Contributors

dependabot[bot] avatar errorrik avatar ksky521 avatar wangshuonpu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.