Blueprint

A Blueprint in UCS.js is an inherited class of type Blueprint whose full condition is available at https://github.com/ucsjs/workspace/blob/main/packages/blueprint/src/services/blueprint.service.ts the composition of the class is relatively simple, receiving inputs, and forwarding the output reactively using the RXJS library (https://rxjs.dev/), the extended classes still have full access to inputs and outputs through functions like subscribe, unsubscribe, and next that the type used in the creation of the properties is BehaviorSubject, the choice of this component was referring to the possibility of direct interaction with the value by other components that can set values on demand

Therefore, because it is a component that has reactive inputs and outputs, there is no predefined workflow, as the flow depends on the interaction between these components through others. Through the Editor it is possible to create connections between Blueprints which in practice results in entries between preconfigured inputs and outputs, as I see in the example below:

In the example above, through the Editor, the Blueprint Counter was linked to the Blueprint Console, when saving the file by the editor, the following source code was automatically generated:

// Auto-generated by Blueprint 

import { Subject } from 'rxjs';
import { Blueprint, Flow } from "@ucsjs/blueprint";
import { CounterBlueprint } from "src/blueprints/Common/counter.blueprint";
import { ConsoleBlueprint } from "src/blueprints/Debug/console.blueprint";

export class TodoBlueprint extends Blueprint {
	exec(args?: any){
		const subject = new Subject<any>();

		const flow = new Flow({
			counterblueprint0: new CounterBlueprint(),
			consoleblueprint1: new ConsoleBlueprint(),
		}, subject, args);

		flow.subscribe("counterblueprint0", "counter", "consoleblueprint1", "message")
		flow.start();

		return { flow, subject };
	}
}

It is possible to debug the operation of this Blueprint through the command below:

./node_modules/.bin/ts-node ./src/run.ts --blueprint=./src/workspace/blueprints/<BLUEPRINT NAME>.ts

Metadata

Blueprints can contain complementary data to be used to customize the display in the Editor and or configure the class construction, this data can be added to the class itself in case of Blueprint creation via code or it can be automatically generated by the Editor in a file with ".meta" extension that will be sent for graphical reconstruction. The Workspace performs an analysis of the Class's source code and identifies every private variable prefixed with "__" as a meta, see the example below:

export class CounterBlueprint extends Blueprint {
    //Metadata
    private __namespace = "Counter";
    private __group = "Common";

The Workspace API that sends the Blueprints data to the Editor returns this data eliminating the prefix see:

Public Variables

It is also possible to configure public variables that will be editable through the Editor or even via code by sending data in the class constructor these variables can be used internally to define output types or any other need for the Blueprint operation. these variables will need to receive this data through the class constructor and use the "setup" function so that the values changed by the Editor overwrite the default values. Every public variable must be defined as "public" and contain the prefix "_", followed by the type and the default value.

public _start: number = 0;
public _max: number = 100;
public _increment: number = 1;
public _timeout: number = 1000;

Another important aspect in the construction of Blueprint is to understand that the original class has a default constructor that must be called through the "super()" function as specified in the Typescript documentation https://www.typescriptlang.org/docs/handbook/classes.html.

import { BehaviorSubject } from 'rxjs';
import { Blueprint, Type } from "@ucsjs/blueprint";

export class CounterBlueprint extends Blueprint {
    //Metadata
    ...

    //Public Vars 
    public _start: number = 0;
    public _max: number = 100;
    public _increment: number = 1;
    public _timeout: number = 1000;

    constructor(metadata?: any){
        super();
        this.setup(metadata);
        ...
    }

The use of prefix is necessary to differentiate between exposed variables and public variables that cannot be edited by the Editor.

Events

Blueprints can contain events that will be triggered automatically by both the debug script and the Flow class used to run the flow between Blueprints, currently the predicted events are "start", "reset" and "stop". Below is an example of using the star event where Blueprint processes and sends data output at the beginning of the flow:

export class DateBlueprint extends Blueprint {
    ...

    start(){
        const date = new Date(this._input);

        switch(this._type){
            case "UTCString": this.next("output", date.toUTCString());
            case "ISOString": this.next("output", date.toISOString());
            case "JSON": this.next("output", date.toJSON());
            case "LocaleString": this.next("output", date.toLocaleString());
            case "LocaleDateString": this.next("output", date.toLocaleDateString());
            case "LocaleTimeString": this.next("output", date.toLocaleTimeString());
            default: this.next("output", date);
        }
    }