Merge branch 'editor-sidebar'

deep-foundation · Nov 16, 2023 · dbe289f · dbe289f
2 parents 0d6b92a + 8f5e468
commit dbe289f
Show file tree

Hide file tree

Showing 11 changed files with 507 additions and 179 deletions.
diff --git a/imports/auto-guest.tsx b/imports/auto-guest.tsx
@@ -8,7 +8,7 @@ import { useLocalStore } from "@deep-foundation/store/local";
 
 const debug = Debug('deepcase:auto-guest');
 
-export function AutoGuest({
+export const AutoGuest = React.memo(function AutoGuest({
   children,
 }: {
   children: any;
@@ -46,4 +46,4 @@ export function AutoGuest({
   return <>
     {isAuth ? children : null}
   </>
-}
+});
diff --git a/imports/client-handler.tsx b/imports/client-handler.tsx
@@ -3,7 +3,7 @@ import * as icons from '@chakra-ui/icons';
 import dynamic from 'next/dynamic';
 import { DeepClient, useDeep, useDeepSubscription } from "@deep-foundation/deeplinks/imports/client";
 import { evalClientHandler as deepclientEvalClientHandler } from '@deep-foundation/deeplinks/imports/client-handler';
-import { useMinilinksFilter } from "@deep-foundation/deeplinks/imports/minilinks";
+import { useMinilinksFilter, useMinilinksSubscription } from "@deep-foundation/deeplinks/imports/minilinks";
 import axios from 'axios';
 import * as axiosHooks from 'axios-hooks';
 import * as classnames from 'classnames';
@@ -57,6 +57,97 @@ import * as LanguageDetector from 'i18next-browser-languagedetector';
 import * as reacti18next from "react-i18next";
 const MonacoEditor = dynamic(() => import('@monaco-editor/react').then(m => m.default), { ssr: false });
 
+export const ClientHandler = React.memo(function ClientHandler(_props: ClientHandlerProps) {
+  const {
+    linkId,
+    handlerId,
+    context = [],
+    ml,
+    onClose,
+    fillSize,
+    error: outerError,
+    ...props
+  } = _props;
+  const deep = useDeep();
+  const _ml = ml || deep?.minilinks;
+  const hid = useFindClientHandler(_props);
+  const { data: files } = useDeepSubscription({
+    id: hid?.dist_id || 0,
+  });
+  const file = files?.[0];
+
+  const [{ Component, errored } = {} as any, setState] = React.useState<any>({ Component: undefined, errored: undefined });
+
+  // console.log('ClientHandler root', { linkId, handlerId, context, file, hid, files, Component });
+  const lastEvalRef = useRef(0);
+  useEffect(() => {
+    if (!hid) return;
+    const value = file?.value?.value;
+    console.log('ClientHandler evalClientHandler', { linkId, handlerId, context, file, value, hid, files });
+    if (!value) {
+      return;
+    }
+    const evalId = ++lastEvalRef.current;
+    evalClientHandler({ value, deep }).then(({ data, error }) => {
+      if (evalId === lastEvalRef.current) {
+        console.log('ClientHandler evalClientHandler setState', { file, data, error });
+        if (!error) {
+          setState(() => ({ Component: data }));
+          erroredResetRef?.current && (erroredResetRef?.current(), erroredResetRef.current = undefined);
+        }
+        else {
+          setErrorRef.current && setErrorRef.current(error);
+          setState({ Component: undefined, errored: error });
+        }
+      } else {
+        console.log('ClientHandler evalClientHandler outdated', { file, data, error, evalId, 'lastEvalRef.current': lastEvalRef.current });
+      }
+    });
+  }, [file?.value?.value, hid]);
+
+  const erroredResetRef = useRef<any>();
+  const setErrorRef = useRef<any>();
+
+  return (<>
+    <CatchErrors
+      error={errored || outerError}
+      errorRenderer={(error, reset) => {
+        erroredResetRef.current = reset;
+        return <div
+          style={{
+            ...(fillSize ? { width: '100%', height: '100%' } : {
+              width: 500, maxHeight: 500
+            }),
+            overflow: 'scroll',
+          }}
+        ><chakra.Alert
+          style={{
+            width: 'max-content',
+          }}
+          status='error'
+          variant='subtle'
+          flexDirection='column'
+          alignItems='left'
+          justifyContent='left'
+          textAlign='left'
+        >
+          <chakra.Button disabled={!Component} width="100%" onClick={reset}>reset</chakra.Button>
+          <chakra.AlertIcon />
+          <chakra.AlertTitle>{error?.message || (error || '')?.toString()}</chakra.AlertTitle>
+          {!!error?.stack && <chakra.AlertDescription>
+            <pre>{error?.stack}</pre>
+          </chakra.AlertDescription>}
+        </chakra.Alert></div>
+      }}
+      onMounted={(setError) => setErrorRef.current = setError}
+      >
+      {(typeof (Component) === 'function') ? <>
+        {[<ClientHandlerRenderer key={Component.toString()} Component={Component} {...props} fillSize={fillSize} link={_ml.byId[linkId]} ml={_ml} onClose={onClose} />]}
+      </> : <></>}
+    </CatchErrors>
+  </>);
+});
+
 DeepClient.resolveDependency = async (path: string) : Promise<any> => {
   if (path == 'peerjs') {
     return await import('peerjs');
@@ -204,7 +295,7 @@ export interface ClientHandlerRendererProps {
   [key: string]: any;
 };
 
-export function ClientHandlerRenderer({
+export const ClientHandlerRenderer = React.memo(function ClientHandlerRenderer({
   Component,
   fillSize = false,
   onClose,
@@ -219,7 +310,7 @@ export function ClientHandlerRenderer({
       ...props?.style,
     }}
   />}</>;
-}
+});
 
 export interface ClientHandlerProps extends Partial<ClientHandlerRendererProps> {
   linkId: number;
@@ -266,94 +357,3 @@ export function useFindClientHandler({
   })(); }, [context, handlerId, hid]);
   return hid;
 }
-
-export function ClientHandler(_props: ClientHandlerProps) {
-  const {
-    linkId,
-    handlerId,
-    context = [],
-    ml,
-    onClose,
-    fillSize,
-    error: outerError,
-    ...props
-  } = _props;
-  const deep = useDeep();
-  const _ml = ml || deep?.minilinks;
-  const hid = useFindClientHandler(_props);
-  const { data: files } = useDeepSubscription({
-    id: hid?.dist_id || 0,
-  });
-  const file = files?.[0];
-
-  const [{ Component, errored } = {} as any, setState] = React.useState<any>({ Component: undefined, errored: undefined });
-
-  // console.log('ClientHandler root', { linkId, handlerId, context, file, hid, files, Component });
-  const lastEvalRef = useRef(0);
-  useEffect(() => {
-    if (!hid) return;
-    const value = file?.value?.value;
-    console.log('ClientHandler evalClientHandler', { linkId, handlerId, context, file, value, hid, files });
-    if (!value) {
-      return;
-    }
-    const evalId = ++lastEvalRef.current;
-    evalClientHandler({ value, deep }).then(({ data, error }) => {
-      if (evalId === lastEvalRef.current) {
-        console.log('ClientHandler evalClientHandler setState', { file, data, error });
-        if (!error) {
-          setState(() => ({ Component: data }));
-          erroredResetRef?.current && (erroredResetRef?.current(), erroredResetRef.current = undefined);
-        }
-        else {
-          setErrorRef.current && setErrorRef.current(error);
-          setState({ Component: undefined, errored: error });
-        }
-      } else {
-        console.log('ClientHandler evalClientHandler outdated', { file, data, error, evalId, 'lastEvalRef.current': lastEvalRef.current });
-      }
-    });
-  }, [file?.value?.value, hid]);
-
-  const erroredResetRef = useRef<any>();
-  const setErrorRef = useRef<any>();
-
-  return (<>
-    <CatchErrors
-      error={errored || outerError}
-      errorRenderer={(error, reset) => {
-        erroredResetRef.current = reset;
-        return <div
-          style={{
-            ...(fillSize ? { width: '100%', height: '100%' } : {
-              width: 500, maxHeight: 500
-            }),
-            overflow: 'scroll',
-          }}
-        ><chakra.Alert
-          style={{
-            width: 'max-content',
-          }}
-          status='error'
-          variant='subtle'
-          flexDirection='column'
-          alignItems='left'
-          justifyContent='left'
-          textAlign='left'
-        >
-          <chakra.Button disabled={!Component} width="100%" onClick={reset}>reset</chakra.Button>
-          <chakra.AlertIcon />
-          <chakra.AlertTitle>{error?.message || (error || '')?.toString()}</chakra.AlertTitle>
-          {!!error?.stack && <chakra.AlertDescription>
-            <pre>{error?.stack}</pre>
-          </chakra.AlertDescription>}
-        </chakra.Alert></div>
-      }}
-      onMounted={(setError) => setErrorRef.current = setError}
-      >
-      {(typeof (Component) === 'function') ? <>
-        {[<ClientHandlerRenderer key={Component.toString()} Component={Component} {...props} fillSize={fillSize} link={_ml.byId[linkId]} ml={_ml} onClose={onClose} />]}
-      </> : <></>}
-    </CatchErrors>
-  </>);
-}
diff --git a/imports/cyto-handler.tsx b/imports/cyto-handler.tsx
@@ -74,7 +74,7 @@ export function useCytoHandlersApply(cyh, elements, stylesheets, iterator) {
   }
 }
 
-export function CytoHandlers({
+export const CytoHandlers = React.memo(function CytoHandlers({
   onChange,
   handled,
   elementsById,
@@ -99,7 +99,7 @@ export function CytoHandlers({
   return <>
     {HandleCyto ? arr : []}
   </>;
-}
+});
 
 export const CytoHandler = React.memo(function CytoHandler({
   linkId,

diff --git a/imports/cyto/drop-zone.tsx b/imports/cyto/drop-zone.tsx
@@ -7,7 +7,7 @@ import axios from 'axios';
 
 let counter = 0;
 
-export function CytoDropZone({
+export const CytoDropZone = React.memo(function CytoDropZone({
   cy,
   children,
   gqlPath,
@@ -113,4 +113,4 @@ export function CytoDropZone({
     children,
     deep,
   });
-}
+});