fix tests

Author: al3xnag

packages/jsrepl/src/app/repl/[[...slug]]/components/code-editor.tsx

@@ -69,7 +69,6 @@ export default function CodeEditor() {
     tabSize: 2,
     renderLineHighlight: userState.editor.renderLineHighlight,
     lineNumbers: userState.editor.lineNumbers,
-    scrollBeyondLastLine: false,
   })
 
   useEffect(() => {

packages/jsrepl/src/app/repl/[[...slug]]/components/errors-notification.tsx

@@ -40,7 +40,7 @@ export function ErrorsNotification() {
         </Button>
 
         {expanded && (
-          <span className="flex max-w-prose flex-1 select-text items-center gap-2 whitespace-normal p-2 font-normal">
+          <span className="flex max-w-prose flex-1 select-text items-center gap-2 whitespace-normal p-2 pr-3 font-normal">
             {primaryError.location?.file && (
               <span className="text-muted-foreground">
                 {primaryError.location.file}:{primaryError.location.line}:

packages/jsrepl/src/components/providers/repl-save-provider.tsx

@@ -13,13 +13,8 @@ import { useSupabaseClient } from '@/hooks/useSupabaseClient'
 import { useUser } from '@/hooks/useUser'
 import { useUserStoredState } from '@/hooks/useUserStoredState'
 import { useWritableModels } from '@/hooks/useWritableModels'
-import {
-  checkDirty,
-  checkEffectivelyDirty,
-  fork,
-  getPageUrl,
-  save,
-} from '@/lib/repl-stored-state/adapter-supabase'
+import { fork, getPageUrl, save } from '@/lib/repl-stored-state/adapter-supabase'
+import { checkDirty, checkEffectivelyDirty } from '@/lib/repl-stored-state/adapter-supabase/utils'
 import { ResponseError, isAbortError } from '@/lib/response-error'
 import type { ReplStoredState } from '@/types/repl.types'
 

packages/jsrepl/src/hooks/useMonacopilot.ts

@@ -16,7 +16,7 @@ import { useReplStoredState } from './useReplStoredState'
 type RequestHandler = Exclude<RegisterCompletionOptions['requestHandler'], undefined>
 
 export default function useMonacopilot() {
-  const { editorRef } = useMonacoEditor()
+  const { editor } = useMonacoEditor()
   const { models } = useReplModels()
   const [replState] = useReplStoredState()
   const recentModelsRef = useRef<CodeEditorModel[]>([])
@@ -107,15 +107,11 @@ export default function useMonacopilot() {
   }, [models, replState.activeModel, enableRelatedFiles])
 
   useEffect(() => {
-    if (!editorRef.current) {
+    if (!editor || !isEnabled) {
       return
     }
 
-    if (!isEnabled) {
-      return
-    }
-
-    const completion = registerCompletion(monaco, editorRef.current, {
+    const completion = registerCompletion(monaco, editor, {
       endpoint: '',
       language: [
         { language: 'typescript', exclusive: true },
@@ -144,7 +140,7 @@ export default function useMonacopilot() {
     return () => {
       completion.deregister()
     }
-  }, [editorRef, isEnabled, requestHandler, enableCaching, maxContextLines, enableRelatedFiles])
+  }, [editor, isEnabled, requestHandler, enableCaching, maxContextLines, enableRelatedFiles])
 }
 
 function customPrompt(metadata: CompletionMetadata) {

packages/jsrepl/src/hooks/useReplDecorations.ts

@@ -14,7 +14,7 @@ export default function useReplDecorations() {
   const [replState] = useReplStoredState()
   const [rewindMode] = useReplRewindMode()
   const { payloads } = useReplPayloads()
-  const { editorRef } = useMonacoEditor()
+  const { editor, editorRef } = useMonacoEditor()
   const { setDecorationsOutdated } = useReplOutdatedDecorations()
 
   const decorationsDisposable = useRef<() => void>(undefined)
@@ -136,11 +136,11 @@ export default function useReplDecorations() {
   }, [])
 
   useEffect(() => {
-    if (!editorRef.current) {
+    if (!editor) {
       return
     }
 
-    const disposable = editorRef.current.addAction({
+    const disposable = editor.addAction({
       id: 'jsrepl.copyContentsWithDecors',
       label: 'Copy With REPL Decorations',
       async run(editor) {
@@ -154,5 +154,5 @@ export default function useReplDecorations() {
     return () => {
       disposable.dispose()
     }
-  }, [editorRef])
+  }, [editor])
 }

packages/jsrepl/src/hooks/useReplOutdatedDecorations.ts

@@ -4,7 +4,7 @@ import { useMonacoEditor } from './useMonacoEditor'
 import { useReplModels } from './useReplModels'
 
 export default function useReplDecorationsOutdated() {
-  const { editorRef } = useMonacoEditor()
+  const { editor, editorRef } = useMonacoEditor()
   const { models } = useReplModels()
 
   const decorationsOutdatedRef = useRef(false)
@@ -35,7 +35,6 @@ export default function useReplDecorationsOutdated() {
   )
 
   useEffect(() => {
-    const editor = editorRef.current
     if (!editor) {
       return
     }
@@ -54,7 +53,7 @@ export default function useReplDecorationsOutdated() {
     return () => {
       disposable.dispose()
     }
-  }, [models, editorRef, setDecorationsOutdated])
+  }, [models, editor, setDecorationsOutdated])
 
   return { setDecorationsOutdated }
 }

packages/jsrepl/src/lib/repl-stored-state/adapter-supabase/api.ts

@@ -1,5 +1,6 @@
 import { SupabaseClient } from '@supabase/supabase-js'
 import { Database, ReplStoredState } from '@/types'
+import { toCreatePayload, toUpdatePayload } from './utils'
 
 /**
  * Get a repl by id
@@ -80,14 +81,7 @@ export async function createRepl(
   repl: ReplStoredState,
   { supabase, signal }: { supabase: SupabaseClient<Database>; signal?: AbortSignal }
 ) {
-  const payload = {
-    title: repl.title,
-    description: repl.description,
-    fs: repl.fs,
-    opened_models: repl.openedModels,
-    active_model: repl.activeModel,
-    show_preview: repl.showPreview,
-  }
+  const payload = toCreatePayload(repl)
 
   return await supabase
     .from('repls')
@@ -118,15 +112,7 @@ export async function updateRepl(
     throw new Error('Repl ID is required')
   }
 
-  const payload = {
-    id: repl.id,
-    title: repl.title,
-    description: repl.description,
-    fs: repl.fs,
-    opened_models: repl.openedModels,
-    active_model: repl.activeModel,
-    show_preview: repl.showPreview,
-  }
+  const payload = toUpdatePayload(repl)
 
   return await supabase
     .from('repls')

packages/jsrepl/src/lib/repl-stored-state/adapter-supabase/index.ts

@@ -1,8 +1,7 @@
 import { SupabaseClient } from '@supabase/supabase-js'
-import { deepEqual } from '@/lib/equal'
 import * as ReplFS from '@/lib/repl-fs'
 import { ResponseError } from '@/lib/response-error'
-import type { Database, ReplRecordPayload, ReplStoredState, ReplUpdatePayload } from '@/types'
+import type { Database, ReplStoredState } from '@/types'
 import {
   createRepl,
   deleteRepl,
@@ -13,6 +12,7 @@ import {
   getUserRepls,
   updateRepl,
 } from './api'
+import { fromPayload } from './utils'
 
 type ExtraUrlProps = {
   openedModels?: string[]
@@ -236,60 +236,6 @@ export function getPageUrl(state: ReplStoredState, extraUrlProps?: ExtraUrlProps
   return url
 }
 
-export function checkDirty(state: ReplStoredState, savedState: ReplStoredState) {
-  const a = toPayload(state)
-  const b = toPayload(savedState)
-  return !deepEqual(a, b)
-}
-
-export function checkEffectivelyDirty(state: ReplStoredState, savedState: ReplStoredState) {
-  const a = toPayload(state)
-  const b = toPayload(savedState)
-
-  delete a.opened_models
-  delete a.active_model
-  delete a.show_preview
-
-  delete b.opened_models
-  delete b.active_model
-  delete b.show_preview
-
-  return !deepEqual(a, b)
-}
-
-function fromPayload(payload: ReplRecordPayload): ReplStoredState {
-  return {
-    id: payload.id,
-    user_id: payload.user_id,
-    user: payload.user
-      ? {
-          avatar_url: payload.user.avatar_url,
-          user_name: payload.user.user_name,
-        }
-      : null,
-    created_at: payload.created_at,
-    updated_at: payload.updated_at,
-    title: payload.title,
-    description: payload.description,
-    fs: payload.fs,
-    openedModels: payload.opened_models,
-    activeModel: payload.active_model,
-    showPreview: payload.show_preview,
-  }
-}
-
-function toPayload(state: ReplStoredState): ReplUpdatePayload {
-  return {
-    id: state.id,
-    title: state.title,
-    description: state.description,
-    fs: state.fs,
-    opened_models: state.openedModels,
-    active_model: state.activeModel,
-    show_preview: state.showPreview,
-  }
-}
-
 function searchParamsToExtraUrlProps(searchParams: URLSearchParams): ExtraUrlProps {
   let openedModels: string[] | undefined
   let activeModel: string | undefined

packages/jsrepl/src/lib/repl-stored-state/adapter-supabase/utils.ts

@@ -0,0 +1,72 @@
+import { deepEqual } from '@/lib/equal'
+import {
+  ReplCreatePayload,
+  ReplRecordPayloadWithUser,
+  ReplStoredState,
+  ReplUpdatePayload,
+} from '@/types'
+
+export function fromPayload(payload: ReplRecordPayloadWithUser): ReplStoredState {
+  return {
+    id: payload.id,
+    user_id: payload.user_id,
+    user: payload.user
+      ? {
+          avatar_url: payload.user.avatar_url,
+          user_name: payload.user.user_name,
+        }
+      : null,
+    created_at: payload.created_at,
+    updated_at: payload.updated_at,
+    title: payload.title,
+    description: payload.description,
+    fs: payload.fs,
+    openedModels: payload.opened_models,
+    activeModel: payload.active_model,
+    showPreview: payload.show_preview,
+  }
+}
+
+export function toUpdatePayload(state: ReplStoredState): ReplUpdatePayload {
+  return {
+    id: state.id,
+    title: state.title,
+    description: state.description,
+    fs: state.fs,
+    opened_models: state.openedModels,
+    active_model: state.activeModel,
+    show_preview: state.showPreview,
+  }
+}
+
+export function toCreatePayload(state: ReplStoredState): ReplCreatePayload {
+  return {
+    title: state.title,
+    description: state.description,
+    fs: state.fs,
+    opened_models: state.openedModels,
+    active_model: state.activeModel,
+    show_preview: state.showPreview,
+  }
+}
+
+export function checkDirty(state: ReplStoredState, savedState: ReplStoredState) {
+  const a = toUpdatePayload(state)
+  const b = toUpdatePayload(savedState)
+  return !deepEqual(a, b)
+}
+
+export function checkEffectivelyDirty(state: ReplStoredState, savedState: ReplStoredState) {
+  const a = toUpdatePayload(state)
+  const b = toUpdatePayload(savedState)
+
+  delete a.opened_models
+  delete a.active_model
+  delete a.show_preview
+
+  delete b.opened_models
+  delete b.active_model
+  delete b.show_preview
+
+  return !deepEqual(a, b)
+}

packages/jsrepl/src/types/repl.types.ts

@@ -28,12 +28,16 @@ export type ReplStoredState = {
   showPreview: boolean
 }
 
-export type ReplRecordPayload = Database['public']['Tables']['repls']['Row'] & {
+export type ReplRecordPayload = Database['public']['Tables']['repls']['Row']
+
+export type ReplRecordPayloadWithUser = Database['public']['Tables']['repls']['Row'] & {
   user: Database['public']['Tables']['public_profiles']['Row'] | null
 }
 
 export type ReplUpdatePayload = Database['public']['Tables']['repls']['Update']
 
+export type ReplCreatePayload = Omit<Database['public']['Tables']['repls']['Insert'], 'id'>
+
 export type UserStoredState = {
   /**
    * Last used App version. It is used to show New Version toast.