@sharpps/ui

Usage

Events

Types

• sharpps:env
• sharpps:register:processor
• sharpps:patch:processor

Arguments

| Property | Type | Description | |----------|------|-------------| | detail | any | Contains event-specific data passed when the event is dispatched. This can be any object relevant to the event, for example, pipeline registration functions, environment parameters, or notifications. | | context | IContext | Reference to the Sharpps runtime context. Provides access to global services like logging, HTTP, pipelines, environment variables, and notifications. Useful for processors or event handlers to interact with the framework. |

Context Properties

| Property | Type | Description | |----------|------|-------------| | LogLevel | typeof LogLevel | Reference to the log level enum, used to control logging verbosity. | | communication | typeof communication | Global communication API (e.g., broadcast channel), for inter-module messaging. | | createArg | typeof createArg | Helper to create StandardPipelineArgs objects for pipeline execution. | | env | typeof env | Function to access runtime environment variables or configuration parameters. | | http | typeof http | HTTP helper functions including buildHttpClient and sendRequest. | | logger | typeof logger | Default logger instance (EventLogger) for logging messages. | | map | typeof map | Global map for storing shared data across processors or modules. | | pipeline | typeof pipeline | Instance of StandardPipeline for executing registered processors. | | notification | typeof notification | Access to notification types and utilities for user notifications and alerts. |

📌 Included Scripts

https://unpkg.com/@sharpps/[email protected]/dist/sharpps.js

<script defer src="https://unpkg.com/@sharpps/[email protected]/dist/sharpps.js"></script>

📌 Import as Module

// Typescript / ESM
import { start, context } from '@sharpps/ui/dist/esm/start';
// CJS
const { start, context } = require('@sharpps/ui/dist/cjs/start.js');

await start();

Register Environment / Global Variable

window.addEventListener("sharpps:env", function (e) {
    e.detail.myParameter = 'Use this for page parameter';
    e.detail.logLevel    = e.context.LogLevel.Debug;
});

Pipeline

Registration Processor

window.addEventListener("sharpps:register:processor", function (e) {
    e.detail.register('pipelineName', { 
        name: "form:populate:payload", // processorName
        alwaysRun : false, 
        process: function(arg) {
             arg.input.payload = e.context.extensions.formDataToObject(new FormData(arg.input.form)); 
            // Manual create
            // {
            //      Name : arg.input.form.querySelector("input[name='Name']").value,
            //      Age : arg.input.form.querySelector("input[name='Age']").value,
            // };
        }
    });
});

Pacth Processor

Processors Collection

Properties

| Property | Type | Description | | -------- | ----- | ------------------------------------------------ | | source | T[] | The underlying array storing the items in order. |

Methods

| Method | Signature | Description | | -------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | moveTo | moveTo(index: number, selector: Predicate<T>): boolean | Moves the first item matching selector to the given index. Returns true if moved, false if no match. Throws if index is out of bounds. | | moveBefore | moveBefore(predicate: Predicate<T>, selector: Predicate<T>): boolean | Moves all items matching selector before the first item matching predicate. Returns true if any moved, false otherwise. | | moveAfter | moveAfter(predicate: Predicate<T>, selector: Predicate<T>): boolean | Moves all items matching selector after the first item matching predicate. Returns true if any moved, false otherwise. | | replaceWith | replaceWith(predicate: Predicate<T>, selector: Predicate<T>): boolean | Replaces the first item matching predicate with each item matching selector. Removes matched items first. Returns true if replacements occurred, false otherwise. | | remove | remove(selector: Predicate<T>): boolean | Removes all items matching selector. Returns true if any removed, false otherwise. | | insertBefore | insertBefore(predicate: Predicate<T>, model: T): boolean | Inserts model before the first item matching predicate. Returns true if inserted, false if no match. | | insertAfter | insertAfter(predicate: Predicate<T>, model: T): boolean | Inserts model after the first item matching predicate. Returns true if inserted, false if no match. | | replace | replace(predicate: Predicate<T>, model: T): boolean | Replaces the first item matching predicate with model. Returns true if replaced, false if no match. |

window.addEventListener("sharpps:register:processor", function (e) {
    e.detail.register('pipelineName', { 
        name: "form:validate", // processorName
        alwaysRun : false, 
        process: async function(arg) {
            if(!arg.input.form.reportValidity())
                arg.isAborted = true;
            if(arg.isAborted)    
                arg.input.event.preventDefault();
        }
    });
});

window.addEventListener("sharpps:patch:processor", function (e) {
    const processors = e.detail.get("pipelineName"); // Processors Collection
    processors.moveAfter(x => x.name === "form:populate:payload", x => x.name === "form:validate")
});

Initialize

 window.addEventListener("sharpps:register:processor", function (e) {
    e.detail.register('initialize', { 
        alwaysRun : false, 
        process: function(arg) {
            arg.logger.info('Write code here for initialize page');
            arg.logger.debug(e.context);

            document.getElementById('btn-env')
                    .addEventListener('click', async function(){
                        //alert(e.context.env('myParameter'));
                        const args = e.context.createArg({
                            interaction : {
                                title : e.context.env('myParameter'),
                                type : e.context.notification.InteractionType.Info
                            }
                        }, "sharpps:api:notification:loggername");
                        //run pipeline
                        await e.context.pipeline.run(args, "sharpps:api:notification");
                    });
        }
    });
});

Http Client

Create Http Client Processor

| Property | Type | Required | Description | | ---------- | -------------------------- | -------- | --------------------------------------------------- | | name | string | No | Optional name for the pipeline instance | | context | any | No | Optional shared context passed through the pipeline | | handlers | DelegatingHandler[] | Yes | Collection of handlers that process the pipeline | | client | HttpHandler | No | Final HTTP handler used to execute the request, default using fecth |

window.addEventListener("sharpps:register:processor", function (e) {
    e.detail.register('sharpps:http:build', { 
        alwaysRun : false, 
        process: function(arg) {
            arg.input.handlers.push(function(request, next) {
                    request.headers = request.headers || {};
                    request.headers['X-Request-ID'] = '12345';
                    return next(request);
            });
            //set arg.input.client for other ajax handler
        }
    });
});

Handle Response Processor

window.addEventListener("sharpps:register:processor", function (e) {
    e.detail.register('sharpps:http:response', { 
        alwaysRun : false, 
        process: function(arg) {
            var prettyJson = JSON.stringify(arg.input, null, 2);
            document.getElementById("ajax-response").innerHTML = `<pre>${prettyJson}</pre>`;
        }
    });
});

Send Http Request

Request

| Property | Type | Required | Description | | --------- | ------------------------ | -------- | ------------------------------------------------- | | url | string | Yes | The request URL | | method | string | Yes | The HTTP method (e.g., GET, POST) | | headers | Record<string, string> | No | Optional key-value pairs for HTTP request headers | | body | any | No | Optional request payload |

window.addEventListener("sharpps:register:processor", function (e) {
    e.detail.register('saveform', { 
        name: "form:send:ajax",
        alwaysRun : false, 
        process: async function(arg) {
            
            arg.result = await e.context.http.sendRequest({
                url : "https://httpbin.org/post",
                method : "post",
                headers: {
                    "Content-Type": "application/json"
                },
                body : arg.input.payload
            }, "saveform", arg.input.form );

            // skip for response if handled by pipeline
            if(arg.result.handled)
                return;

            // Process response
        }
    });
});

Response

| Property | Type | Required | Description | | --------- | ------------------------ | -------- | ---------------------------------------------------------------------- | | status | number | Yes | HTTP status code returned by the request | | content | T (default: any) | Yes | Response payload, strongly typed if provided | | headers | Record<string, string> | Yes | Key-value pairs of HTTP response headers | | handled | boolean | No | Indicates whether the response has been processed/handled by a handler | | context | any | No | Optional contextual information passed along with the response |

Sample

https://unpkg.com/@sharpps/[email protected]/dist/samples/index.html