diff --git a/packages/repl/src/components/runner/Runner.tsx b/packages/repl/src/components/runner/Runner.tsx index 644a278..0c75003 100644 --- a/packages/repl/src/components/runner/Runner.tsx +++ b/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() @@ -29,6 +34,7 @@ export function Runner() { const [connectionState, setConnectionState] = createSignal('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' ? ( - - ) : ( - - )} + {connectionState() === 'offline' ? 'Connect' : 'Disconnect'} Restart runner + + + Log updates + diff --git a/packages/repl/src/components/settings/AccountsTab.tsx b/packages/repl/src/components/settings/AccountsTab.tsx index 3fea7c7..148903c 100644 --- a/packages/repl/src/components/settings/AccountsTab.tsx +++ b/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(undefined) let closeTimeout: timers.Timer | undefined @@ -51,7 +50,6 @@ function AddAccountDialog(props: { finished = false } else { props.onClose() - // client()?.close() timers.clearTimeout(closeTimeout) } } diff --git a/packages/worker/src/sw/iframe/script.ts b/packages/worker/src/sw/iframe/script.ts index 0cf522c..49ca1aa 100644 --- a/packages/worker/src/sw/iframe/script.ts +++ b/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 } })