diff --git a/apps/server/src/services/script.spec.ts b/apps/server/src/services/script.spec.ts index f7d69688b..608ce94a2 100644 --- a/apps/server/src/services/script.spec.ts +++ b/apps/server/src/services/script.spec.ts @@ -145,4 +145,25 @@ describe("JSX building", () => { `; expect(buildJsx(script).code).toStrictEqual(expected); }); + + it("rewrite React API imports", () => { + const script = trimIndentation`\ + import { defineWidget, RightPanelWidget} from "trilium:preact"; + defineWidget({ + render() { + return ; + } + }); + `; + const expected = trimIndentation`\ + "use strict";const _jsxFileName = "";const _triliumpreact = api.preact; + _triliumpreact.defineWidget.call(void 0, { + render() { + return api.preact.h(_triliumpreact.RightPanelWidget, {__self: this, __source: {fileName: _jsxFileName, lineNumber: 4}} ); + } + }); + `; + console.log(buildJsx(script).code); + expect(buildJsx(script).code).toStrictEqual(expected); + }); }); diff --git a/apps/server/src/services/script.ts b/apps/server/src/services/script.ts index bf65c448f..4b742c0e7 100644 --- a/apps/server/src/services/script.ts +++ b/apps/server/src/services/script.ts @@ -226,10 +226,21 @@ export function buildJsx(contentRaw: string | Buffer) { jsxFragmentPragma: "api.preact.Fragment", }); - output.code = output.code.replaceAll( + let code = output.code; + + // Rewrite ESM-like exports to `module.exports =`. + code = output.code.replaceAll( /\bexports\s*\.\s*default\s*=\s*/g, 'module.exports = ' ); + + // Rewrite ESM-like imports to Preact, to `const { foo } = api.preact` + code = code.replaceAll( + /var\s+(\w+)\s*=\s*require\(['"]trilium:preact['"]\);?/g, + 'const $1 = api.preact;' + ); + + output.code = code; return output; }