A web component called tiny-ps

Now let's make something useful. What if you could add PostScript code just into your HTML code and forget about all the JavasScript? What if you could configure it just with the properties of the tag, having your PostScript graphics at the size as you want and at the format you want? Like an canvas tag, but without JavaScript. Like an SVG tag, but programmable.

In this article, we will configure a HTML tag that can do exactly that. The HTML standard allows us to define custom tags, called web components, that are freely programmable. The only condition is that the tag has a hyphen in it, to separate it from the native tags. The web component API allows you to maintain a shadow DOM where you can render the node as you wish.

We add the configuration code to our codebase. The tinyPStag class extends HTML-element and the attributeChangedCallback method reacts to all changes of the attributes and the innerHTML which will be the PostScript code.
We put all device elements in the attributes

width
height
format (canvas, canvasurl, pdf, pdfurl, raw, rawurl, svg, svgurl)
oversampling (1, 2 only used by raw)
transparent
interval (msec, for multiple pages)

Javascript Editor

class tinyPStag extends HTMLElement {
  static observedAttributes = ["innerHTML", "width", "height", "format", "oversampling", "transparent", "interval"];

constructor() {
    super();
    this.shadow = this.attachShadow({mode: "open"});
    this.ready = false;
    const elementToObserve = this;
    this.observer = new MutationObserver(function(mutationsList, observer) {
 const target = mutationsList[0].target;
    target.attributeChangedCallback("innerText","",target.innerHTML);
 });

this.observer.observe(elementToObserve, {characterData: false, childList: true, attributes: false});
  }

connectedCallback() {
 console.log("Connected."); 
 this.ready = true;
 this.innerHTML += " ";   
  }

disconnectedCallback() {
    console.log("Custom element removed from page.");
  }

adoptedCallback() {
    console.log("Custom element moved to new page.");
  }

attributeChangedCallback(name, oldValue, newValue) {
    if (!this.ready) return;
    
    console.log(`Attribute ${name} has changed to ` + newValue);
    
    var context = new rpnContext; 
    context.width = this.getAttribute("width");
    context.height = this.getAttribute("height"); 
    context.device.oversampling = this.getAttribute("oversampling"); 
    context.device.transparent = this.getAttribute("transparent");
    context.device.interval = this.getAttribute("interval"); 
   
    var divnode = document.createElement("DIV");
    var node;
    var othernode;
    
    switch(this.getAttribute("format")) {
     case "raw": 
         console.log("adding rawnode"); 
      node = document.createElement("CANVAS");
            node.id = "raw" + this.id;
            node.className = "jscanvas";
            node.style.display = "block";
            node.width = context.width;
            node.height = context.height; 
            context.nodes.push(new rpnRawDevice(node, null));
            context.device.raw = 1;
            break;
     case "rawurl": 
         console.log("adding rawnode"); 
      othernode = document.createElement("CANVAS");
            othernode.id = "raw" + this.id;
            othernode.className = "jscanvas";
            othernode.style.display = "none";
            othernode.width = context.width;
            othernode.height = context.height; 
            node = document.createElement("A");
            node.id = "raw" + this.id;
            node.innerHTML = "PNG";
            node.style.display = "block"; 
            context.nodes.push(new rpnRawDevice(othernode, node));
            context.device.rawurl = 1;
            break;
        case "canvas":
            console.log("adding canvasnode"); 
      node = document.createElement("CANVAS");
            node.id = "canvas" + this.id;
            node.className = "jscanvas";
            node.style.display = "block";
            node.width = context.width;
            node.height = context.height;

context.nodes.push(new rpnCanvasDevice(node, null));
            context.device.canvas = 1;
            break;
         case "canvasurl":
            console.log("adding canvasurlnode"); 
      othernode = document.createElement("CANVAS");
            othernode.id = "canvas" + this.id;
            othernode.className = "jscanvas";
            othernode.style.display = "none";
            othernode.width = context.width;
            othernode.height = context.height;
            node = document.createElement("A");
            node.id = "canvasurl" + this.id;
            node.innerHTML = "PNG";
            node.style.display = "block"; 
            context.nodes.push(new rpnCanvasDevice(othernode, node));
            context.device.canvasurl = 1;
            break;
       case "svg":
            console.log("adding svgnode"); 
      node = document.createElement("SVG");
            node.id = "svg" + this.id;
            node.className = "jssvg";
            node.style.display = "block";
            node.width = context.width;
            node.height = context.height;
            context.nodes.push(new rpnSVGDevice(node, null));
            context.device.svg = 1;
            break; 
        case "svgurl":
            console.log("adding svgurlnode"); 
      othernode = document.createElement("SVG");
            othernode.id = "svg" + this.id;
            othernode.className = "jssvg";
            othernode.style.display = "none";
            othernode.width = context.width;
            othernode.height = context.height;
            node = document.createElement("A");
            node.id = "svgurl" + this.id;
            node.innerHTML = "SVG";
            node.style.display = "block"; 
            context.nodes.push(new rpnSVGDevice(othernode, node));
            context.device.svgurl = 0;   
            context.device.svgurl = 1;           
            break; 
       case "pdf":
            console.log("adding pdfnode"); 
      node = document.createElement("IMG");
            node.id = "pdf" + this.id;
            node.style.display = "block";
            node.width = context.width;
            node.height = context.height;
            context.nodes.push(new rpnPDFDevice(node, null));
            context.device.pdf = 1;
            break; 
       case "pdfurl":
            console.log("adding pdfurlnode"); 
      node = document.createElement("IMG");
            node.id = "pdf" + this.id;
            node.style.display = "none";
            node.width = context.width;
            node.height = context.height;
   node = document.createElement("A");
   node.id = "pdfurl" + this.id;
   node.innerHTML = "PDF";
   node.style.display = "block";
            context.nodes.push(new rpnPDFDevice(othernode, node));
            context.device.pdfurl = 1;
            break; 
        default: ; 
    }
    // divnode.appendChild(node);
    //  this.shadow.innerHTML = divnode.outerHTML;
    this.shadow.innerHTML = "";
    this.shadow.appendChild(node);
    context.nodes[0].clear(context.width, context.height, context.device.oversampling, context.device.transparent);
    context.shadow = this.shadow; 
 context = rpn(this.innerHTML, context, true); 
    if (context.lasterror) { 
     console.error("!" + context.lasterror); 
     console.log(context.stack.reduce((acc,v) => acc + v.dump + " " , " "));
     console.log(context.currentcode);
 }  
    
  }
}
customElements.define("tiny-ps", tinyPStag);

A minimal installation is on

https://www.belle-nuit.com/site/files/minimal11.html

You can see what happens with the inspector. Try to change the PostScript code and the attributes, the node browser rerenders the element.

minimal.mov

An installation with sample code

https://www.belle-nuit.com/site/files/minimal12.html

The next step is to publish the web component on Github.

ps20250211.js (4049 lines, 147 KB)

And properly named
tinyps100.js

https://www.belle-nuit.com/site/files/minimal13.html
https://www.belle-nuit.com/site/files/minimal14.html

Ready to go GitHub
https://github.com/bellenuit/tiny-ps

My Journey to PostScript