Fix bundle parts

src-web/components/GraphQLEditor.tsx

@@ -1,13 +1,16 @@
 import type { Extension } from '@codemirror/state';
-import { graphql } from 'cm6-graphql';
-import { formatSdl } from 'format-graphql';
-import { buildClientSchema, getIntrospectionQuery } from 'graphql/utilities';
 import { useEffect, useMemo, useState } from 'react';
 import { useUniqueKey } from '../hooks/useUniqueKey';
 import type { HttpRequest } from '../lib/models';
 import { sendEphemeralRequest } from '../lib/sendEphemeralRequest';
 import type { EditorProps } from './core/Editor';
-import { Editor } from './core/Editor';
+import {
+  buildClientSchema,
+  Editor,
+  formatGraphQL,
+  getIntrospectionQuery,
+  graphql,
+} from './core/Editor';
 import { Separator } from './core/Separator';
 
 type Props = Pick<EditorProps, 'heightMode' | 'onChange' | 'defaultValue' | 'className'> & {
@@ -83,7 +86,7 @@ export function GraphQLEditor({ defaultValue, onChange, baseRequest, ...extraEdi
         onChange={handleChangeQuery}
         contentType="application/graphql"
         placeholder="..."
-        format={formatSdl}
+        format={formatGraphQL}
         {...extraEditorProps}
       />
       <Separator variant="primary" />

src-web/components/RequestPane.tsx

@@ -1,10 +1,10 @@
-import { appWindow } from '@tauri-apps/api/window';
 import classnames from 'classnames';
 import type { CSSProperties } from 'react';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { useActiveRequest } from '../hooks/useActiveRequest';
 import { useKeyValue } from '../hooks/useKeyValue';
 import { useUpdateRequest } from '../hooks/useUpdateRequest';
+import { useWindowFocus } from '../hooks/useWindowFocus';
 import { tryFormatJson } from '../lib/formatters';
 import type { HttpHeader, HttpRequest } from '../lib/models';
 import {
@@ -125,12 +125,13 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
     [],
   );
 
-  const forceUpdateKey = useMemo(() => {
+  const visible = useWindowFocus();
-    if (activeRequest == null) return undefined;
+  const multiWindowKey = useMemo(() => {
-    if (activeRequest.updatedBy === appWindow.label) return appWindow.label;
+    // If the window has focus, don't ever force an update
-    return `${appWindow.label}::${activeRequest?.updatedAt}`;
+    if (visible) return undefined;
-  }, [activeRequest]);
+    // If the window is not focused, force an update if the request has been updated
-  console.log('FORCE UPDATE KEY', forceUpdateKey);
+    return activeRequest?.updatedAt;
+  }, [visible, activeRequest?.updatedAt]);
 
   return (
     <div
@@ -140,7 +141,7 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
       {activeRequest && (
         <>
           <UrlBar
-            key={forceUpdateKey}
+            key={multiWindowKey}
             id={activeRequest.id}
             url={activeRequest.url}
             method={activeRequest.method}
@@ -155,13 +156,13 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
             <TabContent value="auth">
               {activeRequest.authenticationType === AUTH_TYPE_BASIC ? (
                 <BasicAuth
-                  key={forceUpdateKey}
+                  key={multiWindowKey}
                   requestId={activeRequest.id}
                   authentication={activeRequest.authentication}
                 />
               ) : activeRequest.authenticationType === AUTH_TYPE_BEARER ? (
                 <BearerAuth
-                  key={forceUpdateKey}
+                  key={multiWindowKey}
                   requestId={activeRequest.id}
                   authentication={activeRequest.authentication}
                 />
@@ -173,18 +174,18 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
             </TabContent>
             <TabContent value="headers">
               <HeaderEditor
-                key={`${forceUpdateHeaderEditorKey}::${forceUpdateKey}`}
+                key={`${forceUpdateHeaderEditorKey}::${multiWindowKey}`}
                 headers={activeRequest.headers}
                 onChange={handleHeadersChange}
               />
             </TabContent>
             <TabContent value="params">
-              <ParametersEditor key={forceUpdateKey} parameters={[]} onChange={() => null} />
+              <ParametersEditor key={multiWindowKey} parameters={[]} onChange={() => null} />
             </TabContent>
             <TabContent value="body" className="pl-3 mt-1">
               {activeRequest.bodyType === BODY_TYPE_JSON ? (
                 <Editor
-                  key={forceUpdateKey}
+                  key={multiWindowKey}
                   useTemplating
                   placeholder="..."
                   className="!bg-gray-50"
@@ -196,7 +197,7 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
                 />
               ) : activeRequest.bodyType === BODY_TYPE_XML ? (
                 <Editor
-                  key={forceUpdateKey}
+                  key={multiWindowKey}
                   useTemplating
                   placeholder="..."
                   className="!bg-gray-50"
@@ -207,7 +208,7 @@ export const RequestPane = memo(function RequestPane({ style, fullHeight, classN
                 />
               ) : activeRequest.bodyType === BODY_TYPE_GRAPHQL ? (
                 <GraphQLEditor
-                  key={forceUpdateKey}
+                  key={multiWindowKey}
                   baseRequest={activeRequest}
                   className="!bg-gray-50"
                   defaultValue={activeRequest?.body ?? ''}

src-web/components/core/Editor/Editor.tsx

@@ -12,7 +12,12 @@ import { baseExtensions, getLanguageExtension, multiLineExtensions } from './ext
 import type { GenericCompletionConfig } from './genericCompletion';
 import { singleLineExt } from './singleLine';
 
-export interface _EditorProps {
+// Export some things so all the code-split parts are in this file
+export { buildClientSchema, getIntrospectionQuery } from 'graphql/utilities';
+export { graphql } from 'cm6-graphql';
+export { formatSdl } from 'format-graphql';
+
+export interface EditorProps {
   id?: string;
   readOnly?: boolean;
   type?: 'text' | 'password';
@@ -32,7 +37,7 @@ export interface _EditorProps {
   autocomplete?: GenericCompletionConfig;
 }
 
-export function _Editor({
+export function Editor({
   readOnly,
   type = 'text',
   heightMode,
@@ -48,18 +53,18 @@ export function _Editor({
   singleLine,
   format,
   autocomplete,
-}: _EditorProps) {
+}: EditorProps) {
   const cm = useRef<{ view: EditorView; languageCompartment: Compartment } | null>(null);
   const wrapperRef = useRef<HTMLDivElement | null>(null);
 
   // Use ref so we can update the onChange handler without re-initializing the editor
-  const handleChange = useRef<_EditorProps['onChange']>(onChange);
+  const handleChange = useRef<EditorProps['onChange']>(onChange);
   useEffect(() => {
     handleChange.current = onChange;
   }, [onChange]);
 
   // Use ref so we can update the onChange handler without re-initializing the editor
-  const handleFocus = useRef<_EditorProps['onFocus']>(onFocus);
+  const handleFocus = useRef<EditorProps['onFocus']>(onFocus);
   useEffect(() => {
     handleFocus.current = onFocus;
   }, [onFocus]);
@@ -167,10 +172,10 @@ function getExtensions({
   singleLine,
   onChange,
   onFocus,
-}: Pick<_EditorProps, 'singleLine' | 'readOnly'> & {
+}: Pick<EditorProps, 'singleLine' | 'readOnly'> & {
   container: HTMLDivElement | null;
-  onChange: MutableRefObject<_EditorProps['onChange']>;
+  onChange: MutableRefObject<EditorProps['onChange']>;
-  onFocus: MutableRefObject<_EditorProps['onFocus']>;
+  onFocus: MutableRefObject<EditorProps['onFocus']>;
 }) {
   // TODO: Ensure tooltips render inside the dialog if we are in one.
   const parent =

src-web/components/core/Editor/index.tsx

@@ -1,6 +1,10 @@
 import { memo } from 'react';
-import { _Editor } from './Editor';
-import type { _EditorProps } from './Editor';
 
-export type EditorProps = _EditorProps;
+export type { EditorProps } from './Editor';
-export const Editor = memo(_Editor);
+const editor = await import('./Editor');
+
+export const Editor = memo(editor.Editor);
+export const graphql = editor.graphql;
+export const getIntrospectionQuery = editor.getIntrospectionQuery;
+export const buildClientSchema = editor.buildClientSchema;
+export const formatGraphQL = editor.formatSdl;

src-web/hooks/useWindowFocus.ts

@@ -0,0 +1,20 @@
+import { appWindow } from '@tauri-apps/api/window';
+import { useEffect, useState } from 'react';
+
+export function useWindowFocus() {
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    let unsub: undefined | (() => void) = undefined;
+    appWindow
+      .onFocusChanged((e) => {
+        setVisible(e.payload);
+      })
+      .then((fn) => {
+        unsub = fn;
+      });
+    return () => unsub?.();
+  }, []);
+
+  return visible;
+}