feat(script/jsx): support import syntax for preact

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 <RightPanelWidget />;
+                }
+            });
+        `;
+        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);
+    });
 });

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;
 }