feat: Contentstack <-> ImageVault integration

remix/app/hooks/useApp.ts

@@ -0,0 +1,46 @@
+import UiLocation from "@contentstack/app-sdk/dist/src/uiLocation";
+import { useEffect, useState } from "react";
+
+export class SDKLoadingError extends Error {}
+
+export default function useApp() {
+  const [, setError] = useState();
+  const [sdk, setSdk] = useState<UiLocation>();
+  const [config, setConfig] = useState<Record<string, string>>();
+
+  useEffect(() => {
+    async function init() {
+      try {
+        const ContentstackAppSDK = (await import("@contentstack/app-sdk"))
+          .default;
+        const initSdk = await ContentstackAppSDK.init();
+        setSdk(initSdk);
+
+        const config = await initSdk.getConfig();
+        setConfig(config);
+
+        const iframeWrapperRef = document.getElementById("field");
+        window.iframeRef = iframeWrapperRef;
+        window.postRobot = initSdk.postRobot;
+      } catch (e) {
+        let err: Error;
+        if (e instanceof Error) {
+          err = new SDKLoadingError(e.message);
+        }
+
+        // Error boundaries do not support async functions. Workaround:
+        // https://github.com/vercel/next.js/discussions/50564#discussioncomment-6063866
+        setError(() => {
+          throw err;
+        });
+      }
+    }
+
+    init();
+  }, [setSdk, setConfig]);
+
+  return {
+    sdk,
+    config,
+  };
+}