Console Proxy Dom Library

An extension library for @link-intersystems/console-proxy that contains utilities to redirect console logs to dom elements, e.g. a textarea.

Install

 npm i "@link-intersystems/console-proxy-dom"

Use

import {
    createConsoleProxy,
    createConsoleTemplate,
} from "@link-intersystems/console-proxy";
import {
    valueLogConfig,
    defaultLogConfig
} from "@link-intersystems/console-proxy-dom";

const consoleProxy = createConsoleProxy();

const domConsoleLogInterceptor = createDOMConsoleLogInterceptor();
domConsoleLogInterceptor.setLogTargetSelector("#console"); // the default

// The defaultLogConfig redirects logs by appending them to the target's innerHtml.
domConsoleLogInterceptor.setLogConfig(defaultLogConfig); // the default

// The valueLogConfig redirects logs by appending them to the target's value property.
// E.g. can be used for textareas.
// domConsoleLogInterceptor.setLogConfig(valueLogConfig);

consoleProxy.setInterceptor(domConsoleLogInterceptor);

// will be redirected to the dom element selected by the target css selector.
consoleProxy.info("INFO", "Hello", "World");
consoleProxy.debug("DEBUG", "Hellow", "World");     

E.g. a div target

<div class="container">
    <div class="mb-3">
        <label for="console" class="form-label">Console div</label>
        <div data-testid="consoleOutput" class="form-control" id="console" style="height:8em; overflow: scroll;"></div>
    </div>
</div>

Live Demo at codepen.io

See @link-intersystems/console-proxy-dom