Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-06 21:36:05 +01:00
Code Issues Packages Projects Releases Activity

feat(react): render raw react components

Browse Source
This commit is contained in:
Elian Doran
2025-08-20 21:50:06 +03:00
parent 8abd3ed3f1
commit afe3904ea3
13 changed files with 92 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
apps/client/src/widgets/react/ReactBasicWidget.tsx
View File

@@ -1,9 +1,6 @@
import { createContext, JSX, render } from "preact";
import { JSX } from "preact";
import BasicWidget from "../basic_widget.js";
import Component from "../../components/component.js";
export const ParentComponent = createContext<Component | null>(null);
import { renderReactWidget } from "./react_utils.jsx";
export default abstract class ReactBasicWidget extends BasicWidget {
abstract get component(): JSX.Element;
@@ -13,27 +10,3 @@ export default abstract class ReactBasicWidget extends BasicWidget {
}
}
/**
* Renders a React component and returns the corresponding DOM element wrapped in JQuery.
*
* @param parentComponent the parent Trilium component for the component to be able to handle events.
* @param el the JSX element to render.
* @returns the rendered wrapped DOM element.
*/
export function renderReactWidget(parentComponent: Component, el: JSX.Element) {
return renderReactWidgetAtElement(parentComponent, el, new DocumentFragment()).children();
}
export function renderReactWidgetAtElement(parentComponent: Component, el: JSX.Element, container: Element | DocumentFragment) {
render((
<ParentComponent.Provider value={parentComponent}>
{el}
</ParentComponent.Provider>
), container);
return $(container) as JQuery<HTMLElement>;
}
export function disposeReactWidget(container: Element) {
render(null, container);
}