gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-22 15:24:24 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

feat(script/jsx): add support for React hooks

Browse Source
This commit is contained in:
Elian Doran 2025-12-20 20:29:03 +02:00
parent 4d7e5bc8f6
commit 44ca9f457c
No known key found for this signature in database
4 changed files with 35 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/src/layouts/desktop_layout.tsx
View File

@ -184,7 +184,7 @@ export default class DesktopLayout {
.child(new HighlightsListWidget())
.child(...this.customWidgets.get("right-pane"))
)
.optChild(isNewLayout, <RightPanelContainer customWidgets={this.customWidgets.get("right-pane")} />)
.optChild(isNewLayout, <RightPanelContainer widgetsByParent={this.customWidgets} />)
)
.optChild(!launcherPaneIsHorizontal && isNewLayout, <StatusBar />)
)

35
apps/client/src/services/bundle.ts
View File

@ -5,7 +5,6 @@ import type { Entity, WidgetDefinition } from "./frontend_script_api.js";
import { t } from "./i18n.js";
import ScriptContext from "./script_context.js";
import server from "./server.js";
import toast from "./toast.js";
import toastService from "./toast.js";
import utils, { getErrorMessage } from "./utils.js";
@ -66,50 +65,44 @@ async function executeStartupBundles() {
}
export class WidgetsByParent {
private byParent: Record<string, Widget[]>;
private legacyWidgets: Record<string, LegacyWidget[]>;
private preactWidgets: Record<string, WidgetDefinition[]>;
constructor() {
this.byParent = {};
this.legacyWidgets = {};
this.preactWidgets = {};
}
add(widget: Widget) {
if ("type" in widget && widget.type === "react-widget") {
// React-based script.
const reactWidget = widget as WidgetDefinition;
this.byParent[reactWidget.parent] = this.byParent[reactWidget.parent] || [];
this.byParent[reactWidget.parent].push(widget);
this.preactWidgets[reactWidget.parent] = this.preactWidgets[reactWidget.parent] || [];
this.preactWidgets[reactWidget.parent].push(reactWidget);
} else if ("parentWidget" in widget && widget.parentWidget) {
this.byParent[widget.parentWidget] = this.byParent[widget.parentWidget] || [];
this.byParent[widget.parentWidget].push(widget);
this.legacyWidgets[widget.parentWidget] = this.legacyWidgets[widget.parentWidget] || [];
this.legacyWidgets[widget.parentWidget].push(widget);
} else {
console.log(`Custom widget does not have mandatory 'parentWidget' property defined`);
}
}
get(parentName: string) {
if (!this.byParent[parentName]) {
if (!this.legacyWidgets[parentName]) {
return [];
}
return (
this.byParent[parentName]
this.legacyWidgets[parentName]
// 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
// https://github.com/zadam/trilium/issues/4274
.map((w: any) => {
if ("type" in w && w.type === "react-widget") {
try {
return w.render();
} catch (e: unknown) {
toast.showErrorTitleAndMessage(t("toast.widget-render-error.title"), getErrorMessage(e));
return null;
}
.map((w: any) => (w.prototype ? new w() : w))
);
}
return (w.prototype ? new w() : w);
})
.filter(Boolean)
);
getPreactWidgets(parentName: string) {
return this.preactWidgets[parentName] ?? [];
}
}

5
apps/client/src/services/frontend_script_api_preact.ts
View File

@ -1,7 +1,10 @@
import { Fragment, h } from "preact";
import * as hooks from "preact/hooks";
export const preactAPI = Object.freeze({
// Core
h,
Fragment
Fragment,
...hooks
});

23
apps/client/src/widgets/sidebar/RightPanelContainer.tsx
View File

@ -6,7 +6,7 @@ import { isValidElement, VNode } from "preact";
import { useEffect, useRef } from "preact/hooks";
import appContext from "../../components/app_context";
import { Widget } from "../../services/bundle";
import { WidgetsByParent } from "../../services/bundle";
import { t } from "../../services/i18n";
import options from "../../services/options";
import { DEFAULT_GUTTER_SIZE } from "../../services/resizer";
@ -27,9 +27,9 @@ interface RightPanelWidgetDefinition {
position: number;
}
export default function RightPanelContainer({ customWidgets }: { customWidgets: BasicWidget[] }) {
export default function RightPanelContainer({ widgetsByParent }: { widgetsByParent: WidgetsByParent }) {
const [ rightPaneVisible, setRightPaneVisible ] = useTriliumOptionBool("rightPaneVisible");
const items = useItems(rightPaneVisible, customWidgets);
const items = useItems(rightPaneVisible, widgetsByParent);
useSplit(rightPaneVisible);
return (
@ -52,7 +52,7 @@ export default function RightPanelContainer({ customWidgets }: { customWidgets:
);
}
function useItems(rightPaneVisible: boolean, customWidgets: Widget[]) {
function useItems(rightPaneVisible: boolean, widgetsByParent: WidgetsByParent) {
const { note } = useActiveNoteContext();
const noteType = useNoteProperty(note, "type");
const [ highlightsList ] = useTriliumOptionJson<string[]>("highlightsList");
@ -69,11 +69,18 @@ function useItems(rightPaneVisible: boolean, customWidgets: Widget[]) {
enabled: noteType === "text" && highlightsList.length > 0,
position: 20,
},
...customWidgets.map((w, i) => ({
el: isValidElement(w) ? w : <CustomLegacyWidget key={w._noteId} originalWidget={w as LegacyRightPanelWidget} />,
...widgetsByParent.get("right-pane").map((widget, i) => ({
el: <CustomLegacyWidget key={widget._noteId} originalWidget={widget as LegacyRightPanelWidget} />,
enabled: true,
position: w.position ?? 30 + i * 10
}))
position: widget.position ?? 30 + i * 10
})),
...widgetsByParent.getPreactWidgets("right-pane").map((widget) => {
const El = widget.render;
return {
el: <El />,
enabled: true
};
})
];
return definitions