npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@aiot-toolkit/card-expression

v1.0.11

Published

快应用卡片表达式解析库

Downloads

384

Readme

快应用卡片表达式解析

用于

  1. JS表达式 转换为 快应用卡片表达式
  2. 模板表达式 转换为 快应用卡片表达式

快应用卡片表达式是一种类似 lisp的语法树表达式

示例

| js 表达式 | 转换后 | | ---------------- | --------------------------------------------------- | | a+123 | ["+", ["$", "a"], 123] | | !a | ["!", ["$", "a"]] | | a[1].x.y | [".",[".", ["[]", ["$", "a"], 1], "x", "y" | | fun(a, b, 124) | ["()", ["$", "fun"], ["$", "a"], ["$", "b"], 124] |

| 模板表达式 | 转换后 | | ------------ | --------------------------------------- | | a+b{{a+b}} | ["+","a+b",["+",["$","a"],["$","b"]]] |

快速上手

模板代码转换为 Card 代码

import { templateValueToCardCode } from '@aiot-toolkit/card-expression';

const result = templateValueToCardCode('a+b{{a+b}}');
console.log(result); // ["+","a+b",["+",["$","a"],["$","b"]]]

js 代码转为 Card 代码

import jsToCardCode from '@aiot-toolkit/card-expression';

const result = jsToCardCode('a+b');
console.log(result); // '["+", ["$", "a"], ["$", "b"]]'

表达式

模板表达式

模板表达式是快应用使用的字符串和 js 混合的表达式,双大括号中的内容为 js,其 它为字符串

示例:aaaa{{x+y}}bbbb 等于 js 代码 "aaaa" + (x + y) + "bbbb"

支持的 js 表达式

快应用卡片支持的js 表达式如下。需要注意的是,各表达式之间可递归使用,例 如 data[a+b] data.x + (a?1:2)

| 表达式 | 源码 | 产物 | 示例 | | --------------------------------------------------- | -------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------- | | 字面量 literal | value | value | 123 --> 123 | | 标识符 Identifier | value | ["$", "value"] | a-->["$", "a"] | | 数组表达式 ArrayExpression | [value1, value2, value3] | ["~", "value1", "value2", "value3"] | [a, 1, 2]-->["~", ["$", "a"], 1, 2] | | 一元表达式 UnaryExpression | operator value | ["operator", value] | !a-->["!", ["$", "a"]] | | 二元表达式 BinaryExpression | value1 operator value1 | ["operator", value1, value2] | a+1 --> ["+", ["$", "a"], 1] | | 属性表达式 MemberExpression | 1. value1[value2] 2. value1.value2 | [".", value1, value2] | a[1] --> [".", ["$", "a"], 1] | | 逻辑表达式 LogicalExpression | value1 operator value1 | ["operator", value1, value2] | a \|\| 1 --> ["\|\|", ["$", "a"], 1] | | 条件表达式 ConditionalExpression | condition? value1 : value2 | [":?", "$condition" value1, value2] | a?x:1 --> [":?", ["$", "a"], ["$", "x"], 1] | | 调用表达式 CallExpression | fun(arg1, args2, ...) | ["()", ["$", "fun"], arg1, arg2, ...] | fun(a, 123) --> ["()", ["$", "fun"], ["$", "a"], 123] | | 无前缀调用表达式 (可自定义,默认["$t", "$tc"]) | noPrefixFun(arg1) | ["()", "noPrefixFun", arg1, arg2, ...] | $t("abc") --> ["()", "$t", "abc"] | | 模板字符串 | str-${js} | 相当于加法二元表达式 "str" + js | | 对象表达式 ObjectExpression | {key1: value1, key2: value2} | ["{}", {key1: value1, key2: value2} | {x:1, y:"2", z:a+b}-->['{}',{x: 1, y: '2', z: ['+', ['$', 'a'], ['$', 'b']]}] |

特殊情况

函数调用去掉前缀

如果希望“函数调用的生成结果中,函数名去掉'$' 前缀”, 可使用 noPrefixFunctionList 参数.

import { templateValueToCardCode } from '@aiot-toolkit/card-expression';

// 默认有 '$' 前缀
const result = templateValueToCardCode(`{{myfun("hello", a)}}`);
console.log(result); // '['()', ['$', 'myfun'], 'hello', ['$', 'a']]'

// 去掉 'myfun' 的前缀
const result = templateValueToCardCode(`{{myfun("hello", a)}}`, {
  noPrefixFunctionList: ['myfun'],
});
console.log(result); // '['()', 'myfun', 'hello', ['$', 'a']]'

默认值:['$t', '$tc']

属性表达式合并到函数的第 1 个参数

如果期望“属性表达式的属性名合并到函数的第 1 个参数”,可使用 functionsForMemberNameToParam参数

const code = `myfun("hello", a)[1]`;
// 普通函数 + 属性表达式
const result = templateValueToCardCode(code);
console.log(result); // "["[]",["()","myfun","hello",["$","a"]],1]"

// 属性名合并到函数的第 1 个参数
const result = jsToCardCode(item.source, {
  functionsForMemberNameToParam: ['myfun'],
});
console.log(result); // "["()","myfun","hello.1",["$","a"]]"

默认值:['$t', '$tc']

转换参数

jsToCardCode(code, { noPrefixFunctionList: [] });
templateValueToCardCode(code, { noPrefixFunctionList: [] });

| 参数名 | 类型 | 默认值 | 说明 | | ----------------------------- | ---------- | --------------- | --------------------------------------------- | | noPrefixFunctionList | string[] | ['$t', '$tc'] | 不需要添加 $ 前缀的函数名列表 | | functionsForMemberNameToParam | string[] | ['$t', '$tc'] | 属性表达式合并到函数的第 1 个参数的函数名列表 |