chore(script/jsx): get widgets to be interpreted

This commit is contained in:
Elian Doran
2025-12-20 19:36:02 +02:00
parent eee7c49f6e
commit fe8f033409
2 changed files with 20 additions and 6 deletions

View File

@@ -70,11 +70,12 @@ export class WidgetsByParent {
} }
add(widget: Widget) { add(widget: Widget) {
if ("parent" in widget) { if ("type" in widget && widget.type === "react-widget") {
// React-based script. // React-based script.
this.byParent[widget.parent] = this.byParent[widget.parent] || []; const reactWidget = widget as WidgetDefinition;
this.byParent[widget.parent].push(widget); this.byParent[reactWidget.parent] = this.byParent[reactWidget.parent] || [];
} else if (widget.parentWidget) { this.byParent[reactWidget.parent].push(widget);
} else if ("parentWidget" in widget && widget.parentWidget) {
this.byParent[widget.parentWidget] = this.byParent[widget.parentWidget] || []; this.byParent[widget.parentWidget] = this.byParent[widget.parentWidget] || [];
this.byParent[widget.parentWidget].push(widget); this.byParent[widget.parentWidget].push(widget);
} else { } else {
@@ -92,7 +93,13 @@ export class WidgetsByParent {
// previously, custom widgets were provided as a single instance, but that has the disadvantage // previously, custom widgets were provided as a single instance, but that has the disadvantage
// for splits where we actually need multiple instaces and thus having a class to instantiate is better // for splits where we actually need multiple instaces and thus having a class to instantiate is better
// https://github.com/zadam/trilium/issues/4274 // https://github.com/zadam/trilium/issues/4274
.map((w: any) => (w.prototype ? new w() : w)) .map((w: any) => {
if ("type" in w && w.type === "react-widget") {
return w.render();
}
return (w.prototype ? new w() : w);
})
); );
} }
} }

View File

@@ -480,6 +480,10 @@ export interface WidgetDefinition {
render: () => VNode render: () => VNode
} }
export interface WidgetDefinitionWithType extends WidgetDefinition {
type: "react-widget"
}
/** /**
* <p>This is the main frontend API interface for scripts. All the properties and methods are published in the "api" object * <p>This is the main frontend API interface for scripts. All the properties and methods are published in the "api" object
* available in the JS frontend notes. You can use e.g. <code>api.showMessage(api.startNote.title);</code></p> * available in the JS frontend notes. You can use e.g. <code>api.showMessage(api.startNote.title);</code></p>
@@ -736,7 +740,10 @@ function FrontendScriptApi(this: Api, startNote: FNote, currentNote: FNote, orig
this.logSpacedUpdates[noteId].scheduleUpdate(); this.logSpacedUpdates[noteId].scheduleUpdate();
}; };
this.defineWidget = (definition) => { this.defineWidget = (definition) => {
return definition; return {
type: "react-widget",
...definition
};
}; };
} }