Ibyar Expression
Your Mirror Dimension in the javascript world.
Ibyar expression, is a JavaScript expression parsing and evaluation. and template expression evaluation, with stack and scope.
- this package has no dependance, can work on both (Node.js) and any Web Browsers, that support modules and class syntax
- An 100% spec compliant ES2022 JavaScript toolchain
Install
npm i --save @ibyar/expressionsyarn add @ibyar/expressionsTry the parser
- Ibyar Expression parser: https://ibyar.github.io/astexplorer/
Example
import { JavaScriptParser, Scope, Stack } from '@ibyar/expressions';
const source = `
let { x, y } = {x: 5, y: 55};
const z = x / y;
console.log({x, y, z});
const alex = { firstName: 'alex', lastName: 'jon', age: 30 };
alex.fullName = function(){ return this.firstName + ' ' + this.lastName;};
console.log(alex.fullName());
console.log(alex.fullName.toString());
setTimeout(() => console.log('setTimeout', alex), 500);
const sara = { firstName: 'sara', lastName: 'jon', age: 28, [Symbol.toStringTag]: 'SARA'};
console.log(sara['age']);
console.log('toStringTag', Object.prototype.toString.call(sara));
console.log('compare', sara.age <=> alex.age);
console.log('older', sara.age >? alex.age);
console.log('younger', sara.age <? alex.age);
console.log('typeof', typeof alex);
console.log('typeof', typeof alex.age);
console.log('regex 1', /regex/g.test('reg'));
console.log('regex 2', /regex/g.test('regex'));
`
+
'let stringLiteralExample = `${alex.firstName} and ${sara.firstName} are friends`; console.log({stringLiteralExample});'
+
`
function latex(str) {
return { "cooked": str[0], "raw": str.raw[0] }
}
`
+
'let taggedStringLiteral = latex`Hi\n${2+3}!`; console.log({taggedStringLiteral});'
;
const pipeSource = `
const add = (arg1, arg2) => arg1 + arg2;
a
|> function(s) {return s;}
|> (c => b = c + 1)
|> add(?, 2)
|> add(3, ?)
|> console.log:4:5;`;
const ast = JavaScriptParser.parse(source + pipeSource);
const esTree = ast.toJSON();
const esTreeString = JSON.stringify(ast, void 0, 2);
console.log({ esTree, esTreeString });
const context = {
Promise,
setTimeout,
console,
Symbol,
Object
};
const stack = Stack.for(context);
const globalScope = Scope.functionScopeFor({
a: 7,
b: undefined
});
stack.pushScope(globalScope);
ast.get(stack);
console.log(
'from global context values: x: %s, y: %s',
globalScope.getContext().x,
globalScope.getContext().y
);
console.log(
globalScope.getContext()
);follow ast of ESTree
Feature
- V8 JavaScript engine to parse js source code.
- for now this parser does not provide any info about
SourceLocation - class expression
- Import/Export module
- Custom Factory Builder to convert the code to ESTree directly or to executable expression node
Operators
| Operator type | Individual operators |
|---|---|
| member | . [] |
| call / create instance | () new |
| negation/increment | ! ~ - + ++ -- typeof void delete |
| multiply/divide | * / % ** %% |
| addition/subtraction | + - |
| bitwise shift | << >> >>> |
| relational | < <= > >= >? <? <=> in instanceof |
| equality | == != === !== |
| bitwise-and | & |
| bitwise-xor | ^ |
| bitwise-or | | |
| logical-and | && |
| logical-or | || |
| conditional | ?: |
| pipeline | |> |
| assignment | = += -= *= **= /= %= <<= >>= >>>= &= ^= |= &&= ||= ??= >?= <?= %%= |
| comma | , |
non-ecma operator are %% >? <? <=> >?= <?= %%=
Pipeline Operator |> Support
- support angular-like syntax and partial operator for a call syntax:
x |> methodName1:arg2:arg3
|> methodName2(arg1, ?, ...arg3);
function add(x, y, z) { return x + y + z };
const a = 88;
const b = 99;
const c = 11;
const z = a |> add:b:c; // === add(a, b, c)function map(num){
return { number: num };
}
function plus(num1){
return function(num2){
return num1 + num2;
};
}
function add(x, y) { return x + y };
const a = 88, b = 11;
b |> function(x) { console.log(x); return x; }
|> x => { console.log(x); return x; }
|> (x => x + 10)
|> plus(a)
|> add(99, ?)
|> add : 88 : ?
|> add : ? : 77
|> mapHow to use stack and scope:
1- create stack:
import { Scope, Stack } from '@ibyar/expressions';
const stack1 = new Stack();
// OR
const scope1 = new Scope<{x: number, y: number}>( {x: 8, y: 6});
const scope2 = Scope.for({z: 9});
const stack2 = new Stack([scope1, scope2]);2- any of the previous stacks, does not provide and public api like Math, String, ....
you need to provide these values to the stack, the stack work as a sandbox, isolated from the js-VM.
import { ReadOnlyScope } from '@ibyar/expressions';
stack1.pushScope(ReadOnlyScope.for({
Math: {
E: Math.E,
LN10: Math.LN10,
LN2: Math.LN2,
LOG10E: Math.LOG10E,
LOG2E: Math.LOG2E,
PI: Math.PI,
SQRT1_2: Math.SQRT1_2,
SQRT2: Math.SQRT2,
abs: Math.abs,
acos: Math.acos,
asin: Math.asin,
atan: Math.atan,
atan2: Math.atan2,
ceil: Math.ceil,
....
},
// or
Math,
// another object
Array: {
// in js a statement like `let x = new Array()` will throw exception.
isArray: Array.isArray,
},
Array, // `let x = new Array()` no Error.
parseFloat,
parseInt,
String,
console,
}));so now you can write js code the use these as identifier
3- the stack is ready to use with expression
4- try to parse an expression like let x = 'data'; console.log(x);.
import { JavaScriptParser } from '@ibyar/expressions';
const ast = JavaScriptParser.parse(`let x = 'data'; console.log(x);`);
// use get method to execute an expression and return a value if available.
ast.get(stack1);
// it should print 'data' on the console5- you can visit the ast
import { expressionVisitor, VariableDeclaration } from '@ibyar/expressions';
expressionVisitor.visit(ast, (expression, type, control) => {
if (type === 'VariableDeclaration') {
const kind = (expression as VariableDeclaration).getKind();
....
}
});How to use Reactive Scope:
reactive scope is used to
import { JavaScriptParser, ReactiveScope, Stack } from '@ibyar/expressions';
// parse JS code
const ast = JavaScriptParser.parse(`
const x = 'Hello';
const y = "World";
let z = x + ' ' + y + '!';
z = 123 + 456;
z = (x + ' ' + y).toUpperCase();
z = 'Reactive Scope is Awesome!!';
`);
// create reactive scope, can listen to changes of variables
const reactiveScope = ReactiveScope.blockScope();
// listen for changes of 'z' variable
const zSubscription = reactiveScope.subscribe('z', (nz, oz) => {
console.log('new value of Z = ' + nz, 'old value of Z = ' + oz);
});
// listen for changes of 'z' const
const xSubscription = reactiveScope.subscribe('x', (nx, ox) => {
console.log('new value of X = ' + nx, 'old value of X = ' + ox);
});
// create stack
const stack = new Stack(reactiveScope);
// execute js code
ast.get(stack);
// unsubscribe from all created ScopeSubscription
zSubscription.unsubscribe();
xSubscription.unsubscribe();