houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FRONT COMPONENTS] Build front components from twenty apps for remote dom (#17566)

Browse Source 
Modify the front components build to match the expected format for
remote dom execution in a worker.
This commit is contained in:
Raphaël Bosi
2026-01-30 15:09:08 +01:00
committed by GitHub
parent ffdbb57eaa
commit d624652e36
24 changed files with 842 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/front-components/utils/mockFrontComponent.ts
+3 -48
View File
@@ -1,54 +1,9 @@
// Mock component code that runs inside the remote worker
import { isDefined } from 'twenty-shared/utils';
// Uses globalThis.React and globalThis.RemoteComponents which are exposed by the worker
// eslint-disable-next-line
const mockFrontComponentCode = `
const React = globalThis.React;
const { useEffect, useState } = React;
const { HtmlButton, HtmlDiv, HtmlH3, HtmlP } = globalThis.RemoteComponents;
const FrontComponent = () => {
const [clickCount, setClickCount] = useState(0);
const [currentTime, setCurrentTime] = useState(
new Date().toLocaleTimeString(),
);
useEffect(() => {
const interval = setInterval(() => {
setCurrentTime(new Date().toLocaleTimeString());
}, 1000);
return () => clearInterval(interval);
}, []);
return React.createElement(
HtmlDiv,
null,
React.createElement(HtmlH3, null, 'Remote DOM front component'),
React.createElement(
HtmlP,
null,
'Rendered in a web worker and mirrored on the host.',
),
React.createElement(
HtmlButton,
{ onClick: () => setClickCount(clickCount + 1) },
'Click me',
),
React.createElement(
HtmlP,
null,
'Clicked ',
clickCount,
' time',
clickCount === 1 ? '' : 's',
),
React.createElement(HtmlP, null, 'Current time: ', currentTime),
);
};
export default React.createElement(FrontComponent);
var r=globalThis.React.useState,s=globalThis.React.useEffect;var n=globalThis.jsx,o=globalThis.jsxs,g=globalThis.React.Fragment;var e=globalThis.RemoteComponents,x=()=>{let[a,l]=r(0),[m,p]=r(0);return s(()=>{let t=setInterval(()=>{p(i=>i+1)},1e3);return()=>clearInterval(t)},[]),o(e.HtmlDiv,{style:{padding:"20px",fontFamily:"Arial, sans-serif",maxWidth:"400px",margin:"0 auto",display:"flex",flexDirection:"column",alignItems:"center"},children:[n(e.HtmlH1,{style:{color:"#333",marginBottom:"20px",fontSize:"24px"},children:"Test Component"}),o(e.HtmlP,{style:{fontSize:"18px",marginBottom:"10px",color:"#666"},children:["Count: ",a]}),o(e.HtmlP,{style:{fontSize:"18px",marginBottom:"20px",color:"#666"},children:["Timer: ",m,"s"]}),n(e.HtmlButton,{onClick:()=>l(a+1),style:{padding:"10px 20px",fontSize:"16px",backgroundColor:"#007bff",color:"white",border:"none",borderRadius:"5px",cursor:"pointer",transition:"all 0.3s ease",boxShadow:"0 2px 4px rgba(0, 0, 0, 0.2)"},onMouseEnter:t=>{t.currentTarget.style.backgroundColor="#0056b3",t.currentTarget.style.transform="translateY(-2px)",t.currentTarget.style.boxShadow="0 4px 8px rgba(0, 0, 0, 0.3)"},onMouseLeave:t=>{t.currentTarget.style.backgroundColor="#007bff",t.currentTarget.style.transform="translateY(0)",t.currentTarget.style.boxShadow="0 2px 4px rgba(0, 0, 0, 0.2)"},children:"Increment"})]})},b=globalThis.jsx(x,{});export{b as default};
//# sourceMappingURL=test-component.front-component.mjs.map
`;
let cachedMockBlobUrl: string | null = null;