- variables
- comments
- array
- array concat single line statement
- array concat multi line statement
- array concat mixed line statement
- array forEach statement with default thisArg
- array forEach statement with explicit thisArg
- array filter statement with default thisArg
- array filter statement with explicit thisArg
- array find statement with default thisArg
- array find statement with explicit thisArg
- array reduce statement
- objects
- function
- call
- conditionals
- loops
- class
- logger
- debug
- react
Variable declaration
1 module 2 kind es6 3 var i 4 var i = 0 5 var 6 decl a 7 decl b 8 decl c = 99 9 let i 10 let i = 0 11 let 12 decl a 13 decl b 14 decl c = 99 15 const i 16 const i = 0 17 const 18 decl a 19 decl b 20 decl c = 99
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
var i;
var i = 0;
var a,
b,
c = 99;
let i;
let i = 0;
let a,
b,
c = 99;
const i;
const i = 0;
const a,
b,
c = 99;
String literal
1 module 2 kind es6 3 $ 4 var fullName = "Baby" 5 # Here fullName is a reference to a JsWizzi variable inside a Ittf Macro 6 const author = "${fullName}" 7 + 8 # Here fullName is a javascript variable 9 var fullName = "George" 10 + 11 # The backtick [`] (alt+96) can embed Ittf Macros as normal text 12 const author = `${fullName}` 13 + 14 # You can write also: 15 let sentence 16 `lit 17 + Hello, my name is 18 @ fullName
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
// Here fullName is a reference to a JsWizzi variable inside a Ittf Macro
const author = "Baby";
// Here fullName is a javascript variable
var fullName = "George";
// The backtick [`] (alt+96) can embed Ittf Macros as normal text
const author = `${fullName}`;
// You can write also:
let sentence = `Hello, my name is${fullName}`;
String literal 2
1 let sentence 2 set "Hello, my name is " + fullName + ".\n\n" + "I'll be " + (age + 1) + " years old next month."
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
let sentence = "Hello, my name is " + fullName + ".\n\n" + "I'll be " + (age + 1) + " years old next month.";
Array 1
1 let list 2 [ 3 @ 1 4 @ 2 5 @ 3
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
let list = [
1,
2,
3
];
Line and multiline comments
1 module 2 kind es6 3 + 4 # this is a line comment 5 + 6 # 7 # this is a multiline comment 8 + 9 ## this is a multiline comment 10 + 11 ## 12 # this is a 13 # multiline comment 14 +
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
// this is a line comment
/**
this is a multiline comment
*/
/**
this is a multiline comment
*/
/**
this is a
multiline comment
*/
Commenting functions
1 module 2 kind es6 3 # 4 # function alpha 5 function alpha 6 # var i 7 var i 8 # var j 9 var j
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
/**
function alpha
*/
function alpha() {
// var i
var i;
// var j
var j;
}
Commenting classes
1 module 2 kind es6 3 # 4 # function alpha 5 function alpha 6 # var i 7 var i 8 # var j 9 var j
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
/**
function alpha
*/
function alpha() {
// var i
var i;
// var j
var j;
}
array concat single line statement
1 const myArrayNew 2 concat myArray 0, 1, 2, [3, 4]
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
const myArrayNew = myArray.concat(0, 1, 2, [3, 4]);
;
array concat multi line statement
1 const myArrayNew 2 concat myarray 3 @ 0 4 @ 1 5 @ 2 6 [ 7 @ 3 8 @ 4
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
const myArrayNew = myarray.concat(0, 1, 2, [
3,
4
]);
;
array concat mixed line statement
1 const myArrayNew 2 concat myarray 0, 1 3 @ 2 4 [ 5 @ 3 6 @ 4
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
const myArrayNew = myarray.concat(0, 1, 2, [
3,
4
]);
;
array forEach statement with default thisArg
1 each item in myarray 2 set item.a = item.b / 2
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
myarray.forEach(function(item, item_index, array) {
item.a = item.b / 2;
}, this);
array forEach statement with explicit thisArg
1 each item in myarray myinstance 2 set item.a = item.b / 2
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
myarray.forEach(function(item, item_index, array) {
item.a = item.b / 2;
}, myinstance);
array filter statement with default thisArg
1 filter item in myarray 2 return item.a == 10
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
myarray.filter(function(item, item_index, array) {
return item.a == 10;
}, this);
array filter statement with explicit thisArg
1 filter item in myarray myinstance 2 return item.a == this.maxAge
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
myarray.filter(function(item, item_index, array) {
return item.a == this.maxAge;
}, myinstance);
array find statement with default thisArg
1 find item in myarray 2 return item.a == 10
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
myarray.find(function(item, item_index, array) {
return item.a == 10;
}, this);
array find statement with explicit thisArg
1 find item in myarray myinstance 2 return item.a == this.maxAge
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
myarray.find(function(item, item_index, array) {
return item.a == this.maxAge;
}, myinstance);
array reduce statement
1 reduce item in myarray 0 2 return acc + item.a
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
myarray.reduce( (acc, item, item_index, array) => {
return acc + item.a;
}, 0);
object definition
1 const myObj 2 { 3 @ name "duby" 4 [ jobs 5 @ "Programmer" 6 @ "Auditor" 7 @ "Consultant" 8 { adress 9 @ street "Via Nazionale, 10" 10 @ city "Reggio Emilia" 11 @ country "Italy"
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
const myObj = {
name: "duby",
jobs: [
"Programmer",
"Auditor",
"Consultant"
],
adress: {
street: "Via Nazionale, 10",
city: "Reggio Emilia",
country: "Italy"
}
};
Function with no params
1 function sayHello 2 log 'Hello'
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
function sayHello() {
console.log('Hello', __filename);
}
Function with unchecked params
1 function sayHello 2 param name 3 log 'Hello ' + name
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
function sayHello(name) {
console.log('Hello ' + name, __filename);
}
Function with checked params
1 function sayHello 2 string name 3 log 'Hello ' + name
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
var verify = require('@wizzi/utils').verify;
function sayHello(name) {
if (verify.isNotEmpty(name) === false) {
return error(
'InvalidArgument', 'sayHello', { parameter: 'name', message: 'The name parameter must be a string. Received: ' + name }
);
}
console.log('Hello ' + name, __filename);
}
/**
params
string code
# the error name or number
string method
string message
# optional
{ innerError
# optional
*/
function error(code, method, message, innerError) {
var parameter = null;
if (verify.isObject(message)) {
parameter = message.parameter;
message = message.message;
}
return verify.error(innerError, {
name: ( verify.isNumber(code) ? 'Err-' + code : code ),
method: '.' + method,
parameter: parameter,
sourcePath: __filename
}, message || 'Error message unavailable');
}
Function with checked params and callback
1 function sayHello 2 string name 3 callback 4 log 'Hello ' + name
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
var verify = require('@wizzi/utils').verify;
function sayHello(name, callback) {
if (typeof(callback) !== 'function') {
throw new Error(
error('InvalidArgument', 'sayHello', 'The callback parameter must be a function. Received: ' + callback)
);
};
if (verify.isNotEmpty(name) === false) {
return callback(error(
'InvalidArgument', 'sayHello', { parameter: 'name', message: 'The name parameter must be a string. Received: ' + name }
));
}
console.log('Hello ' + name, __filename);
}
/**
params
string code
# the error name or number
string method
string message
# optional
{ innerError
# optional
*/
function error(code, method, message, innerError) {
var parameter = null;
if (verify.isObject(message)) {
parameter = message.parameter;
message = message.message;
}
return verify.error(innerError, {
name: ( verify.isNumber(code) ? 'Err-' + code : code ),
method: '.' + method,
parameter: parameter,
sourcePath: __filename
}, message || 'Error message unavailable');
}
Function with checked params and callback
1 function sayHello 2 string name 3 any greetings 4 callback 5 log 'Hello ' + name
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
var verify = require('@wizzi/utils').verify;
function sayHello(name, greetings, callback) {
if (typeof(callback) !== 'function') {
throw new Error(
error('InvalidArgument', 'sayHello', 'The callback parameter must be a function. Received: ' + callback)
);
};
if (verify.isNotEmpty(name) === false) {
return callback(error(
'InvalidArgument', 'sayHello', { parameter: 'name', message: 'The name parameter must be a string. Received: ' + name }
));
}
console.log('Hello ' + name, __filename);
}
/**
params
string code
# the error name or number
string method
string message
# optional
{ innerError
# optional
*/
function error(code, method, message, innerError) {
var parameter = null;
if (verify.isObject(message)) {
parameter = message.parameter;
message = message.message;
}
return verify.error(innerError, {
name: ( verify.isNumber(code) ? 'Err-' + code : code ),
method: '.' + method,
parameter: parameter,
sourcePath: __filename
}, message || 'Error message unavailable');
}
Arrow function
1 module 2 kind es6 3 var handler 4 => 5 param event 6 set value = event.target.value
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
var handler = event =>
value = event.target.value
;
Async arrow function
1 module 2 kind es6 3 var handler 4 async=> 5 param event 6 const obj 7 await 8 _ getObject 9 @ event.target.value
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
var handler;
async (event) => {
const obj = await getObject(event.target.value);
}
Generator function
1 module 2 kind es6 3 # reference https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Operators/yield 4 function* foo 5 var index = 0 6 while index <= 2 7 yield index++
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
// reference https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Operators/yield
function* foo() {
var index = 0;
while (index <= 2) {
yield index++;
}
}
Async function, await statement
1 module 2 kind es6 3 async-function foo 4 var index 5 await 6 _ myPromiseFunc
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
async function foo() {
var index;
await myPromiseFunc();
}
IIFE function
1 module 2 kind es6 3 iife 4 unary-prefix ; 5 param x 6 param y 7 return alpha = x + ': ' + y 8 () 9 @ key 10 @ id
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
;(function(x, y) {
return alpha = x + ': ' + y;
})(key, id)
;
Call with no parameters
1 _ execute
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
execute();
Call with string and number parameters
1 _ display 2 @ 'name' 3 @ 3
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
display('name', 3)
Call with string and call parameters
1 _ showUserName 2 @ userId 3 _ getName 4 @ userId
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
showUserName(userId, getName(userId))
Call with string and object parameters
1 _ showUserProfile 2 @ userId 3 { 4 @ showEmail 5 _ isEmailVisible 6 @ userId 7 [ sections 8 @ 'about-me' 9 @ 'projects'
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
showUserProfile(userId, {
showEmail: isEmailVisible(userId),
sections: [
'about-me',
'projects'
]
})
If, else if, else ...
1 module 2 kind es6 3 if a == 1 4 _ a 5 elif a == 2 6 _ b 7 else 8 _ c
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
if (a == 1) {
a();
}
else if (a == 2) {
b();
}
else {
c();
}
Switch, case, default ...
1 module 2 kind es6 3 + 4 switch a 5 case 1 6 _ a 7 case 2 8 _ b 9 default 10 _ c 11 + 12 switch 13 _ getA 14 case 1 15 _ a 16 case 2 17 _ b 18 default 19 _ c
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
switch (a) {
case 1: {
a();
}
case 2: {
b();
}
default: {
c();
}
}
switch (getA()) {
case 1: {
a();
}
case 2: {
b();
}
default: {
c();
}
}
foreach loop
1 foreach item in myarray 2 set item.a = item.b / 2
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
var i, i_items=myarray, i_len=myarray.length, item;
for (i=0; i<i_len; i++) {
item = myarray[i];
item.a = item.b / 2;
}
for loop
1 for var k in myObj 2 log myObj[k]
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
for (var k in myObj) {
console.log(myObj[k], __filename);
}
while loop
1 while item.parent 2 set item = item.parent
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
while (item.parent) {
item = item.parent;
}
do while loop
1 do item.parent 2 set item = item.parent
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
do {
item = item.parent;
} while (item.parent)
Simple class
1 module 2 kind es6 3 class Greeter 4 p greeting 5 ctor 6 param message 7 set this.greeting = message 8 m greet 9 return "Hello, " + this.greeting 10 let greeter = new Greeter("world")
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
class Greeter {
constructor(message) {
this.greeting = message;
}
greeting;
greet() {
return "Hello, " + this.greeting;
}
}
let greeter = new Greeter("world");
Class extension
1 module 2 kind es6 3 class Animal 4 m move 5 param distanceInMeters 6 _ console.log 7 `lit 8 + Animal moved ${} 9 @ distanceInMeters 10 + m. 11 class Dog 12 super Animal 13 m bark 14 _ console.log('Woof! Woof!')
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
class Animal {
move(distanceInMeters) {
console.log(`Animal moved ${distanceInMeters}m.`)
}
}
class Dog extends Animal {
bark() {
console.log('Woof! Woof!');
}
}
Complex class example
1 module 2 kind es6 3 class Animal 4 p name 5 ctor 6 param theName 7 set this.name = theName 8 m move 9 param distanceInMeters 10 _ console.log 11 `lit 12 + 13 @ this.name 14 + ${} moved ${} 15 @ distanceInMeters 16 + m. 17 class Snake 18 super Animal 19 ctor 20 param name 21 _ super(name) 22 m move 23 param distanceInMeters = 5 24 _ console.log("Slithering...") 25 _ super.move(distanceInMeters) 26 class Horse 27 super Animal 28 ctor 29 param name 30 _ super(name) 31 m move 32 param distanceInMeters = 45 33 _ console.log("Galloping...") 34 _ super.move(distanceInMeters)
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
class Animal {
constructor(theName) {
this.name = theName;
}
name;
move(distanceInMeters) {
console.log(`${this.name} moved ${distanceInMeters}m.`)
}
}
class Snake extends Animal {
constructor(name) {
super();
super(name);
}
move(distanceInMeters = 5) {
console.log("Slithering...");
super.move(distanceInMeters);
}
}
class Horse extends Animal {
constructor(name) {
super();
super(name);
}
move(distanceInMeters = 45) {
console.log("Galloping...");
super.move(distanceInMeters);
}
}
Class accessors
1 module 2 kind es6 3 class Animal 4 p name 5 ctor 6 param theName 7 set this.name = theName 8 class Rhino 9 super Animal 10 ctor 11 _ super("Rhino") 12 class Employee 13 p name 14 ctor 15 param theName 16 set this.name = theName 17 let animal = new Animal("Goat") 18 let rhino = new Rhino() 19 let employee = new Employee("Bob") 20 set animal = rhino 21 set animal = employee
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
class Animal {
constructor(theName) {
this.name = theName;
}
name;
}
class Rhino extends Animal {
constructor() {
super();
super("Rhino");
}
}
class Employee {
constructor(theName) {
this.name = theName;
}
name;
}
let animal = new Animal("Goat");
let rhino = new Rhino();
let employee = new Employee("Bob");
animal = rhino;
animal = employee;
Class accessors
1 module 2 kind es6 3 class Person 4 p name 5 ctor 6 param name 7 set this.name = name 8 class Employee 9 super Person 10 p department 11 ctor 12 param name 13 param department 14 _ super(name) 15 set this.department = department 16 m getElevatorPitch 17 return 18 `lit 19 + Hello, my name is ${} 20 @ this.name 21 + ${} and I work in ${} 22 @ this.department 23 + .
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
class Person {
constructor(name) {
this.name = name;
}
name;
}
class Employee extends Person {
constructor(name, department) {
super();
super(name);
this.department = department;
}
department;
getElevatorPitch() {
return `Hello, my name is ${this.name} and I work in ${this.department}.`;
}
}
Static members
1 class Grid 2 p origin 3 static 4 @ x 0 5 @ y 0 6 ctor 7 param scale 8 m calculateDistanceFromOrigin 9 param point 10 let xDist = (point.x - Grid.origin.x) 11 let yDist = (point.y - Grid.origin.y) 12 return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
class Grid {
constructor(scale) {
}
static origin = {
x: 0,
y: 0
}
calculateDistanceFromOrigin(point) {
let xDist = (point.x - Grid.origin.x);
let yDist = (point.y - Grid.origin.y);
return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;
}
}
Static members
1 + 2 class Greeter 3 p standardGreeting = "Hello, there" 4 static 5 p greeting 6 m greet 7 if this.greeting 8 return "Hello, " + this.greeting 9 else 10 return Greeter.standardGreeting
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
class Greeter {
static standardGreeting = "Hello, there";
greeting;
greet() {
if (this.greeting) {
return "Hello, " + this.greeting;
}
else {
return Greeter.standardGreeting;
}
}
}
Console log
1 module 2 kind es6 3 log 'Hello', 33 4 info 'Hello', 33 5 success 'Hello', 33 6 warn 'Hello', 33 7 error 'Hello', 33
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
console.log('Hello', 33, __filename);
console.log('Hello', 33);
console.log("[32m%s[0m", 'Hello', 33);
console.log("[33m%s[0m", 'Hello', 33);
console.log("[31m%s[0m", 'Hello', 33);
...
1 meta 2 schema js 3 language javascript 4 element variables 5 tag var|const|let 6 ast 7 category 8 item 9 title Variable declaration 10 ittf 11 module 12 kind es6 13 var i 14 var i = 0 15 var 16 decl a 17 decl b 18 decl c = 99 19 let i 20 let i = 0 21 let 22 decl a 23 decl b 24 decl c = 99 25 const i 26 const i = 0 27 const 28 decl a 29 decl b 30 decl c = 99 31 item 32 title String literal 33 ittf 34 module 35 kind es6 36 $ 37 var fullName = "Baby" 38 # Here fullName is a reference to a JsWizzi variable inside a Ittf Macro 39 const author = "${fullName}" 40 + 41 # Here fullName is a javascript variable 42 var fullName = "George" 43 + 44 # The backtick [`] (alt+96) can embed Ittf Macros as normal text 45 const author = `${fullName}` 46 + 47 # You can write also: 48 let sentence 49 `lit 50 + Hello, my name is 51 @ fullName 52 item 53 title String literal 2 54 ittf 55 let sentence 56 set "Hello, my name is " + fullName + ".\n\n" + "I'll be " + (age + 1) + " years old next month." 57 item 58 title Array 1 59 ittf 60 let list 61 [ 62 @ 1 63 @ 2 64 @ 3 65 element comments 66 tag #|## 67 ast 68 category 69 item 70 title Line and multiline comments 71 ittf 72 module 73 kind es6 74 + 75 # this is a line comment 76 + 77 # 78 # this is a multiline comment 79 + 80 ## this is a multiline comment 81 + 82 ## 83 # this is a 84 # multiline comment 85 + 86 item 87 title Commenting functions 88 ittf 89 module 90 kind es6 91 # 92 # function alpha 93 function alpha 94 # var i 95 var i 96 # var j 97 var j 98 item 99 title Commenting classes 100 ittf 101 module 102 kind es6 103 # 104 # function alpha 105 function alpha 106 # var i 107 var i 108 # var j 109 var j 110 element array 111 tag _ 112 ast 113 category arrays 114 item 115 title array concat single line statement 116 ittf 117 const myArrayNew 118 concat myArray 0, 1, 2, [3, 4] 119 item 120 title array concat multi line statement 121 ittf 122 const myArrayNew 123 concat myarray 124 @ 0 125 @ 1 126 @ 2 127 [ 128 @ 3 129 @ 4 130 item 131 title array concat mixed line statement 132 ittf 133 const myArrayNew 134 concat myarray 0, 1 135 @ 2 136 [ 137 @ 3 138 @ 4 139 item 140 title array forEach statement with default thisArg 141 ittf 142 each item in myarray 143 set item.a = item.b / 2 144 item 145 title array forEach statement with explicit thisArg 146 ittf 147 each item in myarray myinstance 148 set item.a = item.b / 2 149 item 150 title array filter statement with default thisArg 151 ittf 152 filter item in myarray 153 return item.a == 10 154 item 155 title array filter statement with explicit thisArg 156 ittf 157 filter item in myarray myinstance 158 return item.a == this.maxAge 159 item 160 title array find statement with default thisArg 161 ittf 162 find item in myarray 163 return item.a == 10 164 item 165 title array find statement with explicit thisArg 166 ittf 167 find item in myarray myinstance 168 return item.a == this.maxAge 169 item 170 title array reduce statement 171 ittf 172 reduce item in myarray 0 173 return acc + item.a 174 element objects 175 tag { 176 ast 177 category objects 178 item 179 title object definition 180 ittf 181 const myObj 182 { 183 @ name "duby" 184 [ jobs 185 @ "Programmer" 186 @ "Auditor" 187 @ "Consultant" 188 { adress 189 @ street "Via Nazionale, 10" 190 @ city "Reggio Emilia" 191 @ country "Italy" 192 element function 193 tag function, =>, m 194 ast FunctionDeclaration, FunctionExpression 195 category function-statements 196 item 197 title Function with no params 198 ittf 199 function sayHello 200 log 'Hello' 201 item 202 title Function with unchecked params 203 ittf 204 function sayHello 205 param name 206 log 'Hello ' + name 207 item 208 title Function with checked params 209 ittf 210 function sayHello 211 string name 212 log 'Hello ' + name 213 item 214 title Function with checked params and callback 215 ittf 216 function sayHello 217 string name 218 callback 219 log 'Hello ' + name 220 item 221 title Function with checked params and callback 222 ittf 223 function sayHello 224 string name 225 any greetings 226 callback 227 log 'Hello ' + name 228 item 229 title Arrow function 230 ittf 231 module 232 kind es6 233 var handler 234 => 235 param event 236 set value = event.target.value 237 item 238 title Async arrow function 239 ittf 240 module 241 kind es6 242 var handler 243 async=> 244 param event 245 const obj 246 await 247 _ getObject 248 @ event.target.value 249 item 250 title Generator function 251 ittf 252 module 253 kind es6 254 # reference https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Operators/yield 255 function* foo 256 var index = 0 257 while index <= 2 258 yield index++ 259 item 260 title Async function, await statement 261 ittf 262 module 263 kind es6 264 async-function foo 265 var index 266 await 267 _ myPromiseFunc 268 item 269 title IIFE function 270 ittf 271 module 272 kind es6 273 iife 274 unary-prefix ; 275 param x 276 param y 277 return alpha = x + ': ' + y 278 () 279 @ key 280 @ id 281 element call 282 tag _ 283 ast CallExpression 284 category call-statements 285 item 286 title Call with no parameters 287 ittf 288 _ execute 289 item 290 title Call with string and number parameters 291 ittf 292 _ display 293 @ 'name' 294 @ 3 295 item 296 title Call with string and call parameters 297 ittf 298 _ showUserName 299 @ userId 300 _ getName 301 @ userId 302 item 303 title Call with string and object parameters 304 ittf 305 _ showUserProfile 306 @ userId 307 { 308 @ showEmail 309 _ isEmailVisible 310 @ userId 311 [ sections 312 @ 'about-me' 313 @ 'projects' 314 element conditionals 315 tag if|elif|else|switch|case|default 316 ast 317 category 318 item 319 title If, else if, else ... 320 ittf 321 module 322 kind es6 323 if a == 1 324 _ a 325 elif a == 2 326 _ b 327 else 328 _ c 329 item 330 title Switch, case, default ... 331 ittf 332 module 333 kind es6 334 + 335 switch a 336 case 1 337 _ a 338 case 2 339 _ b 340 default 341 _ c 342 + 343 switch 344 _ getA 345 case 1 346 _ a 347 case 2 348 _ b 349 default 350 _ c 351 element loops 352 tag _ 353 ast 354 category arrays 355 item 356 title foreach loop 357 ittf 358 foreach item in myarray 359 set item.a = item.b / 2 360 item 361 title for loop 362 ittf 363 for var k in myObj 364 log myObj[k] 365 item 366 title while loop 367 ittf 368 while item.parent 369 set item = item.parent 370 item 371 title do while loop 372 ittf 373 do item.parent 374 set item = item.parent 375 element class 376 tag class 377 ast 378 category 379 item 380 title Simple class 381 ittf 382 module 383 kind es6 384 class Greeter 385 p greeting 386 ctor 387 param message 388 set this.greeting = message 389 m greet 390 return "Hello, " + this.greeting 391 let greeter = new Greeter("world") 392 item 393 title Class extension 394 ittf 395 module 396 kind es6 397 class Animal 398 m move 399 param distanceInMeters 400 _ console.log 401 `lit 402 + Animal moved ${} 403 @ distanceInMeters 404 + m. 405 class Dog 406 super Animal 407 m bark 408 _ console.log('Woof! Woof!') 409 item 410 title Complex class example 411 ittf 412 module 413 kind es6 414 class Animal 415 p name 416 ctor 417 param theName 418 set this.name = theName 419 m move 420 param distanceInMeters 421 _ console.log 422 `lit 423 + 424 @ this.name 425 + ${} moved ${} 426 @ distanceInMeters 427 + m. 428 class Snake 429 super Animal 430 ctor 431 param name 432 _ super(name) 433 m move 434 param distanceInMeters = 5 435 _ console.log("Slithering...") 436 _ super.move(distanceInMeters) 437 class Horse 438 super Animal 439 ctor 440 param name 441 _ super(name) 442 m move 443 param distanceInMeters = 45 444 _ console.log("Galloping...") 445 _ super.move(distanceInMeters) 446 item 447 title Class accessors 448 ittf 449 module 450 kind es6 451 class Animal 452 p name 453 ctor 454 param theName 455 set this.name = theName 456 class Rhino 457 super Animal 458 ctor 459 _ super("Rhino") 460 class Employee 461 p name 462 ctor 463 param theName 464 set this.name = theName 465 let animal = new Animal("Goat") 466 let rhino = new Rhino() 467 let employee = new Employee("Bob") 468 set animal = rhino 469 set animal = employee 470 item 471 title Class accessors 472 ittf 473 module 474 kind es6 475 class Person 476 p name 477 ctor 478 param name 479 set this.name = name 480 class Employee 481 super Person 482 p department 483 ctor 484 param name 485 param department 486 _ super(name) 487 set this.department = department 488 m getElevatorPitch 489 return 490 `lit 491 + Hello, my name is ${} 492 @ this.name 493 + ${} and I work in ${} 494 @ this.department 495 + . 496 item 497 title Static members 498 ittf 499 class Grid 500 p origin 501 static 502 @ x 0 503 @ y 0 504 ctor 505 param scale 506 m calculateDistanceFromOrigin 507 param point 508 let xDist = (point.x - Grid.origin.x) 509 let yDist = (point.y - Grid.origin.y) 510 return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale 511 item 512 title Static members 513 ittf 514 + 515 class Greeter 516 p standardGreeting = "Hello, there" 517 static 518 p greeting 519 m greet 520 if this.greeting 521 return "Hello, " + this.greeting 522 else 523 return Greeter.standardGreeting 524 element logger 525 tag log|info|success|error|warn 526 ast 527 category logger 528 item 529 title Console log 530 ittf 531 module 532 kind es6 533 log 'Hello', 33 534 info 'Hello', 33 535 success 'Hello', 33 536 warn 'Hello', 33 537 error 'Hello', 33 538 element debug 539 tag 540 ast 541 category debug 542 item 543 title ... 544 ittf 545 element react 546 tag _ 547 ast 548 category react 549 item 550 title class 551 ittf 552 react MyComponent 553 render 554 return 555 h1 Hello world 556 item 557 title var 558 ittf 559 var Hello 560 div 561 p sicut amet nequi abisse 562 item 563 title var svg 564 ittf 565 var Hello 566 div 567 svg 568 rect 569 stroke-dashoffset 10
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
class
1 react MyComponent 2 render 3 return 4 h1 Hello world
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
class MyComponent extends React.Component {
render() {
return (
<h1>Hello world</h1>
)
;
}
}
var
1 var Hello 2 div 3 p sicut amet nequi abisse
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
var Hello = (
<div>
<p>sicut amet nequi abisse</p>
</div>
)
;
var svg
1 var Hello 2 div 3 svg 4 rect 5 stroke-dashoffset 10
/*
artifact generator: /app/node_modules/@wizzi/plugin.js/lib/artifacts/js/module/gen/main.js
package: @wizzi/[email protected]
primary source IttfDocument: json:/index.js.ittf
utc time: Tue, 06 May 2025 03:58:34 GMT
*/
var Hello = (
<div>
<svg>
<rect strokeDashoffset="10">
</rect>
</svg>
</div>
)
;