diff --git a/apps/client/src/services/frontend_script_api.ts b/apps/client/src/services/frontend_script_api.ts index ac11d43e0..46c59c4cd 100644 --- a/apps/client/src/services/frontend_script_api.ts +++ b/apps/client/src/services/frontend_script_api.ts @@ -1,6 +1,5 @@ -import { dayjs } from "@triliumnext/commons"; -import { formatLogMessage } from "@triliumnext/commons"; -import { VNode } from "preact"; +import { dayjs, formatLogMessage } from "@triliumnext/commons"; +import { Fragment, h, VNode } from "preact"; import appContext from "../components/app_context.js"; import type Component from "../components/component.js"; @@ -467,12 +466,17 @@ 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; + + h: typeof h; + Fragment: typeof Fragment; } export interface WidgetDefinition { @@ -739,12 +743,16 @@ function FrontendScriptApi(this: Api, startNote: FNote, currentNote: FNote, orig this.logMessages[noteId].push(message); this.logSpacedUpdates[noteId].scheduleUpdate(); }; + + // React support. this.defineWidget = (definition) => { return { type: "react-widget", ...definition }; }; + this.h = h; + this.Fragment = Fragment; } export default FrontendScriptApi as any as { diff --git a/apps/server/src/services/script.ts b/apps/server/src/services/script.ts index 8893fd26b..98fbb3e43 100644 --- a/apps/server/src/services/script.ts +++ b/apps/server/src/services/script.ts @@ -224,8 +224,8 @@ function buildJsx(jsxNote: BNote) { const content = Buffer.isBuffer(contentRaw) ? contentRaw.toString("utf-8") : contentRaw; return transform(content, { transforms: ["jsx"], - jsxPragma: "h", // for Preact - jsxFragmentPragma: "Fragment", + jsxPragma: "api.h", + jsxFragmentPragma: "api.Fragment", }); }