Merge pull request #116 from ClayPulse/dev

Add Pulse App backend support

Author: Shellishack

mobile/android/app/build.gradle

@@ -7,7 +7,7 @@ android {
         applicationId "com.pulse_editor.app"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 2
+        versionCode 4
         versionName "v0.1.1-beta"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {

web/app/(extension-layout)/extension/page.tsx

@@ -43,6 +43,7 @@ export default function ExtensionPage({}) {
       setIsRegistered(true);
     }
 
+    // Load the remote module
     mfHost
       .loadRemote(`${moduleId}/main`)
       .then((module) => {
@@ -58,6 +59,46 @@ export default function ExtensionPage({}) {
       .catch((error) => {
         console.error("Error loading remote module:", error);
       });
+
+    // Patch fetch for Pulse App backend calling
+    const originalFetch = window.fetch;
+
+    const patchedFetch = async (
+      ...args: Parameters<typeof fetch>
+    ): Promise<Response> => {
+      const [resource, config] = args;
+      const url =
+        resource instanceof Request ? resource.url : resource.toString();
+
+      // Only patch relative URLs (not absolute http/https)
+      if (/^https?:\/\//i.test(url)) {
+        return originalFetch(resource, config);
+      }
+
+      const newUrl = remoteOrigin.startsWith(
+        process.env.NEXT_PUBLIC_CDN_URL ?? "https://cdn.pulse-editor.com",
+      )
+        ? `${process.env.NEXT_PUBLIC_SERVER_FUNCTION_RUNNER_URL}/${moduleId}/${moduleVersion}/${url.replace("/server-function/", "")}`
+        : remoteOrigin + url;
+
+      console.log(`[FETCH INTERCEPTED]: ${url} → ${newUrl}`);
+      console.log(`[App Info] ID: ${moduleId}, Version: ${moduleVersion}`);
+
+      const response = await originalFetch(newUrl, config);
+
+      if (!response.ok) {
+        console.warn(`Fetch Error (${response.status}) for ${url}`);
+      }
+
+      return response;
+    };
+
+    window.fetch = patchedFetch;
+
+    // // Cleanup on unmount or dependency change
+    // return () => {
+    //   window.fetch = originalFetch;
+    // };
   }, [remoteOrigin, moduleId, moduleVersion, isMounted]);
 
   if (!isMounted) {

web/components/app-loaders/base-app-loader.tsx

@@ -32,6 +32,9 @@ export default function BaseAppLoader({
       className="h-full w-full"
       src={src}
       sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
+      role="application"
+      title={moduleId}
+      aria-label={moduleId}
     />
   );
 }

web/components/marketplace/app/app-preview-card.tsx

@@ -13,7 +13,6 @@ import { ContextMenuState, ExtensionApp } from "@/lib/types";
 import { DraggableAttributes } from "@dnd-kit/core";
 import { SyntheticListenerMap } from "@dnd-kit/core/dist/hooks/utilities";
 import {
-  addToast,
   Button,
   Chip,
   Skeleton,
@@ -91,7 +90,7 @@ export default function AppPreviewCard({
     undefined,
   );
 
-  const [showMFVersionInfo, setShowMFVersionInfo] = useState(false);
+  const [isHover, setIsHover] = useState(false);
 
   useEffect(() => {
     async function fetchVersions() {
@@ -170,13 +169,13 @@ export default function AppPreviewCard({
         className="relative h-full min-h-32 w-full"
         onMouseEnter={() => {
           if (getPlatform() !== PlatformEnum.Capacitor) {
-            setIsShowInfo(true);
+            setIsHover(true);
           }
         }}
         // Hide show info when user taps outside of the modal
         onMouseLeave={() => {
           if (getPlatform() !== PlatformEnum.Capacitor) {
-            setIsShowInfo(false);
+            setIsHover(false);
           }
         }}
       >
@@ -275,9 +274,6 @@ export default function AppPreviewCard({
               return;
             }
 
-            addToast({
-              title: "App Preview Clicked",
-            });
             if (onPress) {
               onPress(extension);
             } else {
@@ -323,7 +319,7 @@ export default function AppPreviewCard({
             <Skeleton className="h-full w-full" isLoaded={false}></Skeleton>
           )}
         </Button>
-        {isShowInfo && (
+        {(isShowInfo || isHover) && (
           <div className="absolute bottom-0.5 left-1/2 flex w-fit -translate-x-1/2 justify-center gap-x-0.5">
             {isShowUseButton && (
               <Button

web/components/marketplace/workflow/workflow-preview-card.tsx

@@ -29,6 +29,8 @@ export default function WorkflowPreviewCard({
 
   const [isShowInfo, setIsShowInfo] = useState(false);
 
+  const [isHover, setIsHover] = useState(false);
+
   useEffect(() => {
     setIsLoaded(true);
   }, [workflow]);
@@ -54,18 +56,18 @@ export default function WorkflowPreviewCard({
   }
 
   return (
-    <div className="w-full h-full grid grid-rows-[auto_max-content_max-content] grid-cols-1">
+    <div className="grid h-full w-full grid-cols-1 grid-rows-[auto_max-content_max-content]">
       <div
-        className="relative h-full w-full min-h-32"
+        className="relative h-full min-h-32 w-full"
         onMouseEnter={() => {
           if (getPlatform() !== PlatformEnum.Capacitor) {
-            setIsShowInfo(true);
+            setIsHover(true);
           }
         }}
         // Hide show info when user taps outside of the modal
         onMouseLeave={() => {
           if (getPlatform() !== PlatformEnum.Capacitor) {
-            setIsShowInfo(false);
+            setIsHover(false);
           }
         }}
       >
@@ -102,7 +104,7 @@ export default function WorkflowPreviewCard({
             <Skeleton className="h-full w-full" isLoaded={false}></Skeleton>
           )}
         </Button>
-        {isShowInfo && (
+        {(isShowInfo || isHover) && (
           <div className="absolute bottom-0.5 left-1/2 flex w-full -translate-x-1/2 justify-center gap-x-0.5">
             <Button
               color="primary"

web/components/views/canvas/nodes/app-node/node-handle.tsx

@@ -14,10 +14,11 @@ export default function NodeHandle({
 }) {
   return (
     <div
-      className="relative h-fit w-fit bg-content2 text-content2-foreground z-40 pointer-events-none px-2 py-1 flex flex-col justify-center shadow-md data-[direction=left]:rounded-l-lg data-[direction=right]:rounded-r-lg"
+      className="bg-content2 text-content2-foreground pointer-events-none relative z-40 flex h-fit w-fit flex-col justify-center px-2 py-1 shadow-md data-[direction=left]:rounded-l-lg data-[direction=right]:rounded-r-lg"
       data-direction={position}
+      aria-label="Click on node handle to open node menu"
     >
-      <div className="text-center text-sm ">
+      <div className="text-center text-sm">
         <p>{id}</p>
         <p>({param?.type.toString()})</p>
       </div>