updates

packages/repl/src/components/runner/Runner.tsx

@@ -2,11 +2,12 @@ import type { DropdownMenuTriggerProps } from '@kobalte/core/dropdown-menu'
 import type { CustomTypeScriptWorker } from '../editor/utils/custom-worker.ts'
 import { timers } from '@fuman/utils'
 import { persistentAtom } from '@nanostores/persistent'
-import { LucideCheck, LucidePlay, LucidePlug, LucideRefreshCw, LucideSkull, LucideUnplug } from 'lucide-solid'
+import { LucideCheck, LucideCheckSquare, LucidePlay, LucidePlug, LucideRefreshCw, LucideSkull, LucideSquare, LucideUnplug } from 'lucide-solid'
 import { languages, Uri } from 'monaco-editor/esm/vs/editor/editor.api.js'
 import { type mtcute, workerInvoke } from 'mtcute-repl-worker/client'
 import { nanoid } from 'nanoid'
 import { createEffect, createSignal, on, onCleanup, onMount } from 'solid-js'
+import { Dynamic } from 'solid-js/web'
 import { Button } from '../../lib/components/ui/button.tsx'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '../../lib/components/ui/dropdown-menu.tsx'
 import { cn } from '../../lib/utils.ts'
@@ -19,6 +20,10 @@ const $disconnectAfterSecs = persistentAtom('repl:disconnectAfterSecs', 60, {
   encode: String,
   decode: Number,
 })
+const $enableUpdates = persistentAtom('repl:enableUpdates', true, {
+  encode: String,
+  decode: value => value === 'true',
+})
 
 export function Runner() {
   const [devtoolsIframe, setDevtoolsIframe] = createSignal<HTMLIFrameElement | undefined>()
@@ -29,6 +34,7 @@ export function Runner() {
   const [connectionState, setConnectionState] = createSignal<mtcute.ConnectionState>('offline')
   const currentAccountId = useStore($activeAccountId)
   const disconnectAfterSecs = useStore($disconnectAfterSecs)
+  const enableUpdates = useStore($enableUpdates)
 
   let currentScriptId: string | undefined
   let deadTimer: timers.Timer | undefined
@@ -67,6 +73,7 @@ export function Runner() {
       iframe.contentWindow!.postMessage({
         event: 'INIT',
         accountId: currentAccountId(),
+        logUpdates: enableUpdates(),
       }, '*')
       setRunnerLoaded(true)
       deadTimer = timers.setTimeout(() => {
@@ -180,11 +187,20 @@ export function Runner() {
   }
 
   function handleDisconnect() {
-    runnerIframe()?.contentWindow!.postMessage({ event: 'DISCONNECT' }, '*')
+    runnerIframe()?.contentWindow?.postMessage({ event: 'DISCONNECT' }, '*')
   }
 
   function handleConnect() {
-    runnerIframe()?.contentWindow!.postMessage({ event: 'RECONNECT' }, '*')
+    runnerIframe()?.contentWindow?.postMessage({ event: 'RECONNECT' }, '*')
+  }
+
+  function handleToggleUpdates() {
+    const newValue = !enableUpdates()
+    $enableUpdates.set(newValue)
+    runnerIframe()?.contentWindow?.postMessage({
+      event: 'TOGGLE_UPDATES',
+      value: newValue,
+    }, '*')
   }
 
   return (
@@ -249,15 +265,10 @@ export function Runner() {
                 onClick={connectionState() === 'offline' ? handleConnect : handleDisconnect}
                 class="text-xs"
               >
-                {connectionState() === 'offline' ? (
-                  <LucidePlug
-                    class="mr-2 size-3"
-                  />
-                ) : (
-                  <LucideUnplug
-                    class="mr-2 size-3"
-                  />
-                )}
+                <Dynamic
+                  component={connectionState() === 'offline' ? LucidePlug : LucideUnplug}
+                  class="mr-2 size-3"
+                />
                 {connectionState() === 'offline' ? 'Connect' : 'Disconnect'}
               </DropdownMenuItem>
               <DropdownMenuItem
@@ -269,6 +280,13 @@ export function Runner() {
                 />
                 Restart runner
               </DropdownMenuItem>
+              <DropdownMenuItem class="text-xs" onClick={handleToggleUpdates}>
+                <Dynamic
+                  component={enableUpdates() ? LucideCheckSquare : LucideSquare}
+                  class="mr-2 size-3"
+                />
+                Log updates
+              </DropdownMenuItem>
               <DropdownMenuSeparator />
               <DropdownMenuGroup>
                 <DropdownMenuGroupLabel class="text-xs">

packages/repl/src/components/settings/AccountsTab.tsx

@@ -40,7 +40,6 @@ function AddAccountDialog(props: {
   show: boolean
   testMode: boolean
   onClose: () => void
-  // onAccountCreated: (accountId: string, user: User, dcId: number) => void
 }) {
   const [accountId, setAccountId] = createSignal<string | undefined>(undefined)
   let closeTimeout: timers.Timer | undefined
@@ -51,7 +50,6 @@ function AddAccountDialog(props: {
       finished = false
     } else {
       props.onClose()
-      // client()?.close()
       timers.clearTimeout(closeTimeout)
     }
   }

packages/worker/src/sw/iframe/script.ts

@@ -29,6 +29,7 @@ chobitsu.setOnMessage((message: string) => {
 
 let lastAccountId: string | undefined
 let lastConnectionState: ConnectionState | undefined
+let logUpdates = false
 
 function initClient(accountId: string) {
   lastAccountId = accountId
@@ -58,6 +59,11 @@ function initClient(accountId: string) {
     lastConnectionState = state
     window.parent.postMessage({ event: 'CONNECTION_STATE', value: state }, HOST_ORIGIN)
   })
+  window.tg.onUpdate.add((update) => {
+    if (!logUpdates) return
+    // eslint-disable-next-line no-console
+    console.log('%c[UPDATE]%c %s: %o', 'color: #8d7041', 'color: unset', update.name, update.data)
+  })
 }
 
 window.addEventListener('message', ({ data }) => {
@@ -81,7 +87,9 @@ window.addEventListener('message', ({ data }) => {
     sendToDevtools({ method: 'DOM.documentUpdated' })
 
     initClient(data.accountId)
+    logUpdates = data.logUpdates
     window.tg?.connect()
+    window.tg!.startUpdatesLoop()
 
     setInterval(() => {
       window.parent.postMessage({ event: 'PING' }, HOST_ORIGIN)
@@ -112,6 +120,7 @@ window.addEventListener('message', ({ data }) => {
     if (lastConnectionState !== 'offline') {
       window.parent.postMessage({ event: 'CONNECTION_STATE', value: 'offline' }, HOST_ORIGIN)
       window.tg.connect()
+      window.tg.startUpdatesLoop()
     }
   } else if (data.event === 'DISCONNECT') {
     // todo: we dont have a clean way to disconnect i think
@@ -122,6 +131,9 @@ window.addEventListener('message', ({ data }) => {
     window.parent.postMessage({ event: 'CONNECTION_STATE', value: 'offline' }, HOST_ORIGIN)
   } else if (data.event === 'RECONNECT') {
     window.tg.connect()
+  } else if (data.event === 'TOGGLE_UPDATES') {
+    if (data.value === logUpdates) return
+    logUpdates = data.value
   }
 })