This isn’t 100% true. Basic js can be built into widgets directly. The f7 components (and probably by extension their oh derivatives) all accept the appropriate basic event definitions. For example, I have a widget where I want dynamic text scaling (which requires knowing the width of the parent element) and use:
- component: f7-block
config:
onclick: ="document.getElementById('base-block-" + props.item + "').style.setProperty('--nest-width',document.getElementById('base-therm-" + props.item + "').offsetHeight + 'px');"
This successfully sets the css variable when the element is clicked, and, as you can see is even preprocessed by the expression parser.
Here’s a more complete example that combines the js with the tag property in the f7-row component turning it into a canvas for js drawing:
uid: demo:js
tags: []
props:
parameters: []
parameterGroups: []
component: f7-card
config:
title: OnClick JS example
slots:
default:
- component: f7-row
config:
onclick: >
var c = document.getElementById("canvas1");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
tag: button
type: button
slots:
default:
- component: Label
config:
text: Click me to draw.
- component: f7-row
config:
id: canvas1
tag: canvas
Using the above pattern it is even possible to: 1) run some js on widget load because a f7-row can have a script tag set and script elements accept onload events, and 2) run js from an outside library file in the \static folder because you can set the src property for that script element.
I don’t know if any of this helps with the original question about how to deploy the OPs widget.