Editor

The Blueprints editor will be activated whenever a file with the extension ".blueprint.ts" has been created or opened by the Editor, yet the .meta file must be present in the same directory as the file, otherwise it will be opened by a normal code editor as a Typescript file, so to create editable Blueprints I recommend that the process be done through the Editor and not directly in the project directory or through Terminal.

The first view of the Blueprints editor displays the list of Blueprints separated by groups that can be pre-defined through Metadata and can be used by dragging to the editing area on the right, easily identifiable by the checkered background.

Visual

The visual construction of the Blueprint in the editor occurs automatically according to the Metadata information defined in the original code that will be previously extracted by the Workspace:

export class DateBlueprint extends Blueprint {
    //Metadata
    private __namespace = "Date";
    private __group = "Common";
    private __headerIcon = "fa-solid fa-calendar-days";
    private __type = ["", "UTCString", "ISOString", "JSON", "LocaleString", "LocaleDateString", "LocaleTimeString"];
    private __typeHelp = "https://www.w3schools.com/jsref/jsref_obj_date.asp";

    private _input: string = "";
    public _type: string = "";

    constructor(metadata?: any){
        super();
        this.setup(metadata);
        this.input("input", Type.String, null, (v) => this._input = v);
        this.output("output", Type.Any, null);
    }

    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);
        }
    }
}

Connections

To create a connection between two or more blueprints, just press the left button on an output and drag it to any input, notice that all input and output data has a color corresponding to the type that needs to be compatible with each other, if a component exports a data type when trying to link on an entry that does not have compatibility the connection will not be created.

Every input can be connected to several outputs since internally both are reactive properties, in practice the connection creates an inscription between the data where every time the result first. changes, every chair updates itself to the last node in the flow. In the example below, a multiple connection between an output and several inputs of other components is expensive:

The result of this simple multi-connection example creates the following source code:

// Auto-generated by Blueprint 

import { Subject } from 'rxjs';
import { Blueprint, Flow } from "@ucsjs/blueprint";
import { HTTPParamBlueprint } from "src/blueprints/Network/httpParam.blueprint";
import { HTTPOutBlueprint } from "src/blueprints/Network/httpOut.blueprint";
import { HTTPInBlueprint } from "src/blueprints/Network/httpIn.blueprint";

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

		const flow = new Flow({
			httpparamblueprint0: new HTTPParamBlueprint({"stateId":1663960113093,"itemKey":"0","name":"id","toJSON":true}),
			httpoutblueprint1: new HTTPOutBlueprint(),
			httpinblueprint2: new HTTPInBlueprint({"stateId":1663960113093,"itemKey":"2","controller":"/helloworld","routes":[{"url":":id","key":"c782a1bf7f74c0a22eb8d764d6b7c9ba20300670-2-0"}]}),
		}, subject, args);

		flow.subscribe("httpinblueprint2", "c782a1bf7f74c0a22eb8d764d6b7c9ba20300670-2-0", "httpparamblueprint0", "request")
		flow.subscribe("httpparamblueprint0", "result", "httpoutblueprint1", "contents")
		flow.subscribe("httpinblueprint2", "c782a1bf7f74c0a22eb8d764d6b7c9ba20300670-2-0", "httpoutblueprint1", "request")
		flow.start();

		return { flow, subject };
	}
}

import { Controller, Req, Res, Get, Post, Put, Delete, Patch } from "@nestjs/common";
import { Request, Response } from "express";

@Controller("/helloworld")
export class HelloworldBlueprintController {

    constructor(){}

    @Get(":id")
    async helloworldblueprintgetid(@Req() req: Request, @Res() res: Response){
        const { flow } = new HelloworldBlueprint().exec({});

		flow.get("httpoutblueprint1").subscribe("output", (data) => { 
            if(data){
                flow.get("httpoutblueprint1")?.unsubscribe("output");
                res.status(200).send(data); 
            }
        });

		flow.get("httpinblueprint2").next("c782a1bf7f74c0a22eb8d764d6b7c9ba20300670-2-0", req);
    }
}
import { Module } from "@nestjs/common";

@Module({
    imports: [
		
	],
    exports: [
		
	],
    controllers: [
		HelloworldBlueprintController
	],
    providers: [
		
	]
})
export class LazyModule {}

Accessing the address http://localhost:5001/helloworld/1 through the browser, the result will be the following: