diff --git a/apps/client/src/services/bundle.ts b/apps/client/src/services/bundle.ts index 5dcdfad05..be7219599 100644 --- a/apps/client/src/services/bundle.ts +++ b/apps/client/src/services/bundle.ts @@ -1,7 +1,8 @@ import BasicWidget from "../widgets/basic_widget.js"; import RightPanelWidget from "../widgets/right_panel_widget.js"; import froca from "./froca.js"; -import type { Entity, WidgetDefinition } from "./frontend_script_api.js"; +import type { Entity } from "./frontend_script_api.js"; +import { WidgetDefinitionWithType } from "./frontend_script_api_preact.js"; import { t } from "./i18n.js"; import ScriptContext from "./script_context.js"; import server from "./server.js"; @@ -19,7 +20,7 @@ export interface Bundle { type LegacyWidget = (BasicWidget | RightPanelWidget) & { parentWidget?: string; }; -export type Widget = (LegacyWidget | WidgetDefinition) & { +export type Widget = (LegacyWidget | WidgetDefinitionWithType) & { _noteId: string; }; @@ -66,7 +67,7 @@ async function executeStartupBundles() { export class WidgetsByParent { private legacyWidgets: Record; - private preactWidgets: Record; + private preactWidgets: Record; constructor() { this.legacyWidgets = {}; @@ -76,7 +77,7 @@ export class WidgetsByParent { add(widget: Widget) { if ("type" in widget && widget.type === "react-widget") { // React-based script. - const reactWidget = widget as WidgetDefinition; + const reactWidget = widget as WidgetDefinitionWithType; this.preactWidgets[reactWidget.parent] = this.preactWidgets[reactWidget.parent] || []; this.preactWidgets[reactWidget.parent].push(reactWidget); } else if ("parentWidget" in widget && widget.parentWidget) { diff --git a/apps/client/src/services/frontend_script_api.ts b/apps/client/src/services/frontend_script_api.ts index e7e2cb84e..12d34832d 100644 --- a/apps/client/src/services/frontend_script_api.ts +++ b/apps/client/src/services/frontend_script_api.ts @@ -1,5 +1,4 @@ import { dayjs, formatLogMessage } from "@triliumnext/commons"; -import { VNode } from "preact"; import appContext from "../components/app_context.js"; import type Component from "../components/component.js"; @@ -467,27 +466,9 @@ export interface Api { */ log(message: string | object): void; - - // Preact support - /** - * Method that must be run for widget scripts that run on Preact, using JSX. The method just returns the same definition, reserved for future typechecking and perhaps validation purposes. - * - * @param definition the widget definition. - */ - defineWidget(definition: WidgetDefinition): void; - preact: typeof preactAPI; } -export interface WidgetDefinition { - parent: "right-pane", - render: () => VNode -} - -export interface WidgetDefinitionWithType extends WidgetDefinition { - type: "react-widget" -} - /** *

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. api.showMessage(api.startNote.title);

@@ -744,13 +725,6 @@ function FrontendScriptApi(this: Api, startNote: FNote, currentNote: FNote, orig this.logSpacedUpdates[noteId].scheduleUpdate(); }; - // React support. - this.defineWidget = (definition) => { - return { - type: "react-widget", - ...definition - }; - }; this.preact = preactAPI; } diff --git a/apps/client/src/services/frontend_script_api_preact.ts b/apps/client/src/services/frontend_script_api_preact.ts index f7ae923ea..f02a1073b 100644 --- a/apps/client/src/services/frontend_script_api_preact.ts +++ b/apps/client/src/services/frontend_script_api_preact.ts @@ -1,13 +1,34 @@ -import { Fragment, h } from "preact"; +import { Fragment, h, VNode } from "preact"; import * as hooks from "preact/hooks"; import RightPanelWidget from "../widgets/sidebar/RightPanelWidget"; +export interface WidgetDefinition { + parent: "right-pane", + render: () => VNode +} + +export interface WidgetDefinitionWithType extends WidgetDefinition { + type: "react-widget" +} + export const preactAPI = Object.freeze({ // Core h, Fragment, + /** + * Method that must be run for widget scripts that run on Preact, using JSX. The method just returns the same definition, reserved for future typechecking and perhaps validation purposes. + * + * @param definition the widget definition. + */ + defineWidget(definition: WidgetDefinition) { + return { + type: "react-widget", + ...definition + }; + }, + RightPanelWidget, ...hooks