Function App

examples/solid/createHotkeySequence/src/index.tsx:13–256

()

import './index.css'

function App() {
  const [lastSequence, setLastSequence] = createSignal<string | null>(null)
  const [history, setHistory] = createSignal<Array<string>>([])
  const [helloSequenceEnabled, setHelloSequenceEnabled] = createSignal(true)
  const addToHistory = (action: string) => {
    setLastSequence(action)
    setHistory((h) => [...h.slice(-9), action])
  }

  createHotkeySequence(['G', 'G'], () => addToHistory('gg → Go to top'))
  createHotkeySequence(['Shift+G'], () => addToHistory('G → Go to bottom'))
  createHotkeySequence(['D', 'D'], () => addToHistory('dd → Delete line'))
  createHotkeySequence(['Y', 'Y'], () => addToHistory('yy → Yank (copy) line'))
  createHotkeySequence(['D', 'W'], () => addToHistory('dw → Delete word'))
  createHotkeySequence(['C', 'I', 'W'], () =>
    addToHistory('ciw → Change inner word'),
  )

  createHotkeySequence(
    ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown'],
    () => addToHistory('↑↑↓↓ → Konami code (partial)'),
    { timeout: 1500 },
  )

  createHotkeySequence(
    ['ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight'],
    () => addToHistory('←→←→ → Side to side!'),
    { timeout: 1500 },
  )

  createHotkeySequence(
    ['H', 'E', 'L', 'L', 'O'],
    () => addToHistory('hello → Hello World!'),
    () => ({ enabled: helloSequenceEnabled() }),
  )

  createHotkeySequence(['Shift+R', 'Shift+T'], () =>
    addToHistory('⇧R ⇧T → Chained Shift+letter (2 steps)'),
  )

  createHotkey('Escape', () => {
    setLastSequence(null)
    setHistory([])
  })

  return (
    <div class="app">
      <header>
        <h1>createHotkeySequence</h1>
        <p>
          Register multi-key sequences (like Vim commands). Keys must be pressed
          within the timeout window (default: 1000ms).
        </p>
      </header>

      <main>
        <section class="demo-section">
          <h2>Vim-Style Commands</h2>