gen-js-block
v1.4.1
Published
a library to generate js code using js code (instead of using strings)
Downloads
21
Maintainers
Readme
gen-js-block
a js-library to generate js code with js code
if you like this package please star it in github
Usage
all variables that start with $ are called template variables
if you use a template variable in an if statement it becomes a template if-statement
and the code inside will not be in the output if the condition is false
import { Block } from "gen-js-block";
const block = new Block(($condition) => {
if ($condition) {
console.log("$condition is true");
} else {
console.log("$condition is false");
}
});
console.log(block.build({ $condition: true })); // => {console.log("$condition is true");}
console.log(block.build({ $condition: false })); // => {console.log("$condition is false");}
similarly for-of and for-in loops with template variables in them are called template loops (c-style loops can't be template maybe in the future)
import { Block } from "gen-js-block";
const block = new Block(($array) => {
for (const $item of $array) {
console.log($item);
}
});
console.log(block.build({ $array: [0, 1, 2] }));
// => {const $item = 0;console.log($item);};{const $item = 1;console.log($item);};{const $item = 2;console.log($item)};
and also the value of template variables will be included in the code, so you can use them in the result code
import { Block } from "gen-js-block";
const block = new Block(($message) => {
console.log($message);
});
console.log(block.build({ $message: "hello world!" }));
// => {const $message = "hello world!";console.log($message);}
also if you call a function that starts with $ and it's an argument of the function passed to the block class then the string returned from that call will be added to the result code as is
example: let's say you want to make code that returns a function that returns a random number
import { Block } from "gen-js-block";
const block = new Block(($fn) => {
function result() {
return $fn();
}
result;
});
const code = block.build({ $fn: Math.random });
// => {const $fn = undefined;function result() { return 0.5542537758332537 }; result;}
console.log(eval(code)());
// => 0.5542537758332537
console.log(eval(code)());
// => 0.5542537758332537
example 2: let's say you want to print numbers from 3 to 0 but using recursion instead of loops...
function recur(n: number) {
const block = new Block(($fn: any, $n: any) => {
if ($n < 1) {
console.log(0);
} else {
console.log($n);
// these brackets are needed in these case
// and most cases
{
$fn($n - 1);
}
}
});
return block.build({ $n: n, $fn: recur });
}
const code = recur(3);
console.log(code);
// => const $fn = undefined;const $n = 3;{console.log($n);{const $fn = undefined;const $n = 2;{console.log($n);{const $fn = undefined;const $n = 1;{console.log($n);{const $fn = undefined;const $n = 0;{console.log(0);};}};}};}}
eval(code);
// => 3
// => 2
// => 1
// => 0
inline options
you might have noticed that instead of replacing template variables in the result code gen-js-block defines them on top, if you want it to replace it instead use this
import { Block } from "gen-js-block";
const block = new Block(
($message) => {
console.log($message);
},
{ inlineVariables: true }
);
console.log(block.build({ $message: "hello world!" }));
// => console.log("hello world");
if you want to inline specific variables to this
import { Block } from "gen-js-block";
const block = new Block(
($message, $message2) => {
console.log($message, $message2);
},
{ inlineVariables: ["$message"] }
);
console.log(
block.build({ $message: "hello world!", $message2: "hello, again" })
);
// => const $message2 = "hello again";console.log("hello world", $message2);
replace option
this will not consider if statements and for-loops that contain specified template vars as template if-statements and for loops instead it will replace it with given code
import { Block, insertCode } from "gen-js-block";
const block = new Block(($some) => {
if ($some === "one") $some = 1;
else if ($some === "two") $some = 2;
else $some = null;
}, { replace: ["$some"] });
// you must use insertCode function
console.log(block.build({ $some: insertCode("hello.world") }));
// ==> if (hello.world === "one") { hello.world = 1 } else if (hello.world === 2) { hello.world = 1 } else { hello.world = null; }
eval method
if you want to build the code then run it you can use the eval method
import { Block } from "gen-js-block";
const block = new Block(($message) => {
console.log($message);
});
block.eval({ $message: "hello world!" });
// prints "hello world!"
usage in typescript
all template variables must be typed like so
import { Block } from "gen-js-block";
const block = new Block<{ $message: string; $array: number[] }>(
($message: string, $array: number[]) => {
console.log($message, $array);
}
);
and if there is a non-template variables that will be defined else where you pass it as an argument
const block = new Block<{}>((definedElseWhere: string) => {
// no errors!
console.log(definedElseWhere);
});
important notes
all template variables must be start with $
new variables defined in template loop must start with $ (since they're template vars). example:
// will throw an error const block = new Block(($array) => { // should be $item... for (const item of $array) { console.log(item); } }); block.build({ $array: [0, 1, 2] });
result code inside template loops or ifs will be warped in a block. example:
// this wont error const block = new Block(($condition) => { const some = 0; if ($condition) { const some = 1; console.log(some); } console.log(some); }); block.build({ $condition: true }); // => {const some = 0;{const some = 1;console.log(some);}console.log(some);}
c-style loops can't be template loops (at least for now), example:
// won't work (will be in result code) const block = new Block(($array) => { for (let $i = 0; $i < $array.length; $i++) { console.log($array[$i]); } }); block.build({ $array: [0, 1, 2] }); // => {for (let $i = 0; $i < $array.length; $i++) {console.log($array[$i]);}} // not the output you want!
no template switch statements (at least for now)
// won't work! const block = new Block(($number) => { switch ($number) { case 0: console.log("zero"); case 1: console.log("one"); } });
can't non-identifier parameters to the function passed to block (since it doesn't make sense)
// all of these will error const block = new Block((...$args) => /* ... */); const block = new Block(([$item1, $item2]) => /* ... */); const block = new Block(({ $key }) => /* ... */);