Build native GPUI desktop apps with Solid 1

  bunfig.toml          babel-preset-solid         @gpuix/native
  preload ──────────►  universal compiler ──────► host mutations ──► GPUI ──► GPU
       │                      │
       ▼                      ▼
  app.tsx              @gpuix/solid renderer
  createSignal()       render(() => <App />)

1bun add --exact @gpuix/solid @gpuix/native solid-js

123456789101112{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "preserve",
    "jsxImportSource": "@gpuix/solid",
    "strict": true,
    "skipLibCheck": true,
    "noEmit": true
  }
}

1preload = ["@gpuix/solid/preload"]

1234preload = ["@gpuix/solid/preload"]

[test]
preload = ["@gpuix/solid/preload"]

123456789101112131415161718192021222324import { createSignal } from 'solid-js'
import { render } from '@gpuix/solid'

function App() {
  const [count, setCount] = createSignal(0)
  return (
    <div style={{ padding: 24, backgroundColor: '#1a1a1a', height: '100%' }}>
      <div
        onClick={() => setCount((value) => value + 1)}
        style={{
          padding: 12,
          borderRadius: 8,
          cursor: 'pointer',
          backgroundColor: '#232323',
          hover: { backgroundColor: '#2c2c2c' },
        }}
      >
        <text style={{ color: '#e2e2e2' }}>Count: {count()}</text>
      </div>
    </div>
  )
}

render(() => <App />, { title: 'Solid GPUIX', width: 800, height: 600 })

12bun app.tsx
bun --hot app.tsx

12345678import solidPlugin from '@gpuix/solid/bun-plugin'

await Bun.build({
  entrypoints: ['./app.tsx'],
  target: 'bun',
  outdir: './dist',
  plugins: [solidPlugin],
})

12bun build --compile dist/app.js --outfile dist/app
./dist/app

123function render(code: () => JSX.Element, options?: RenderOptions): Root
function createRenderer(onEvent?: (event: EventPayload) => void): GpuixRenderer
function resetRender(): void

1234interface RenderOptions extends WindowOptions, RootEventHandlers {
  renderer?: NativeRenderer
  debugFrameOverlay?: 'hidden' | 'minimal' | 'full'
}

123456789render(() => <App />, {
  title: 'Notes',
  width: 800,
  height: 600,
  titlebarTransparent: true,
  windowBackground: 'blurred',
  focus: process.env.GPUIX_BACKGROUND !== '1',
  debugFrameOverlay: 'full',
})

123456789101112function createRoot(
  renderer: NativeRenderer,
  rootHandlers?: RootEventHandlers,
): Root

interface Root {
  render(code: () => JSX.Element): void
  flush(): void
  flushSync<Value>(fn: () => Value): Value
  dispatch(event: EventPayload): boolean
  unmount(): void
}

1234567import { createRoot } from '@gpuix/solid'
import { TestRenderer } from '@gpuix/solid/testing'

const renderer = new TestRenderer()
const root = createRoot(renderer)
root.render(() => <text>hello</text>)
root.flush()

1234567function useGpuix(): GpuixContextValue | undefined
function useGpuixRequired(): NativeRenderer

interface GpuixContextValue {
  renderer: NativeRenderer
  subscribeSelection(callback: (text: string | null) => void): () => void
}

123456789101112131415161718import { useGpuixRequired } from '@gpuix/solid'

function WindowControls() {
  const renderer = useGpuixRequired()
  return (
    <div style={{ display: 'flex', gap: 8 }}>
      <div onClick={() => renderer.minimizeWindow?.()}>
        <text style={{ color: '#e2e2e2' }}>Minimize</text>
      </div>
      <div onClick={() => renderer.zoomWindow?.()}>
        <text style={{ color: '#e2e2e2' }}>Zoom</text>
      </div>
      <div onClick={() => renderer.toggleFullscreen?.()}>
        <text style={{ color: '#e2e2e2' }}>Fullscreen</text>
      </div>
    </div>
  )
}

12345678910111213141516function AttachFiles() {
  const renderer = useGpuixRequired()
  const attach = async () => {
    const paths = await renderer.promptForPaths?.({
      files: true,
      multiple: true,
      prompt: 'Attach',
    })
    if (paths) console.log(paths)
  }
  return (
    <div onClick={attach}>
      <text style={{ color: '#e2e2e2' }}>Attach files</text>
    </div>
  )
}

1234567891011function createWindowSize(options?: ObserverOptions): Accessor<WindowSize>
function createWindowInsets(options?: ObserverOptions): Accessor<WindowInsets>
function createSelectedText(): Accessor<string | null>
function createTextSearch(options: Accessor<TextSearchOptions>): {
  readonly props: Pick<HostProps, 'highlight' | 'onHighlight'>
  readonly total: number
  readonly active: number
  next(): void
  previous(): void
  goTo(index: number): void
}

123interface ObserverOptions {
  intervalMs?: number | false
}

12345678910111213import { createWindowInsets, createWindowSize } from '@gpuix/solid'

function Layout() {
  const size = createWindowSize()
  const insets = createWindowInsets()
  return (
    <div style={{ width: size().width, paddingBottom: insets().ime.bottom }}>
      <text style={{ color: '#e2e2e2' }}>
        {size().width} x {size().height}
      </text>
    </div>
  )
}

123456import { createSelectedText } from '@gpuix/solid'

function SelectionLabel() {
  const selected = createSelectedText()
  return <text style={{ color: '#e2e2e2' }}>{selected() ?? 'none'}</text>
}

123456789101112131415161718192021import { createSignal } from 'solid-js'
import { createTextSearch } from '@gpuix/solid'

function FindBar() {
  const [query, setQuery] = createSignal('')
  const search = createTextSearch(() => ({ query: query() }))
  return (
    <div {...search.props} style={{ height: '100%' }}>
      <input
        value={query()}
        onChange={(event) => setQuery(event.value ?? '')}
      />
      <text style={{ color: '#e2e2e2' }}>
        {search.active + 1} / {search.total}
      </text>
      <div onClick={() => search.next()}>
        <text style={{ color: '#e2e2e2' }}>Next</text>
      </div>
    </div>
  )
}

12345678910111213141516171819202122232425262728293031import { Show } from 'solid-js'
import { AnimatePresence, motion } from '@gpuix/solid'

function WelcomeCard() {
  return (
    <motion.div
      initial={{ width: 0, opacity: 0 }}
      animate={{ width: 320, opacity: 1 }}
      transition={{ duration: 0.25, ease: 'easeOut' }}
      style={{ overflow: 'hidden' }}
    >
      <text style={{ color: '#ffffff' }}>Welcome</text>
    </motion.div>
  )
}

function Toast(props: { visible: boolean }) {
  return (
    <AnimatePresence>
      <Show when={props.visible}>
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
        >
          <text style={{ color: '#e2e2e2' }}>Saved</text>
        </motion.div>
      </Show>
    </AnimatePresence>
  )
}

12function usePresence(): [Accessor<boolean>, () => void]
function useIsPresent(): Accessor<boolean>

123456789101112131415161718192021222324252627282930import { createSignal } from 'solid-js'
import {
  Combobox,
  ComboboxContent,
  ComboboxInput,
  ComboboxItem,
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from '@gpuix/solid'

function Controls() {
  const [value, setValue] = createSignal('a')
  return (
    <Select value={value()} onValueChange={setValue}>
      <SelectTrigger style={{ width: 220, height: 36, backgroundColor: '#1e293b' }}>
        <SelectValue placeholder={<text style={{ color: '#94a3b8' }}>Pick</text>} />
      </SelectTrigger>
      <SelectContent style={{ width: 220, backgroundColor: '#0f172a' }}>
        <SelectItem value="a"><text style={{ color: '#e2e8f0' }}>Alpha</text></SelectItem>
        <SelectItem value="b"><text style={{ color: '#e2e8f0' }}>Beta</text></SelectItem>
      </SelectContent>
    </Select>
  )
}

1234import { Select, SelectTrigger, SelectContent, SelectItem } from '@gpuix/solid/select'
import { Combobox, ComboboxInput, ComboboxContent, ComboboxItem } from '@gpuix/solid/combobox'
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@gpuix/solid/tooltip'
import { FloatingLayer, renderSlot } from '@gpuix/solid/floating'

12345<SelectTrigger
  style={(state) => ({
    backgroundColor: state.open ? '#334155' : '#1e293b',
  })}
/>

1234567891011import { createTestRoot, hasNativeTestRenderer } from '@gpuix/solid/testing'

const app = createTestRoot()
app.render(() => (
  <div testId="bump" onClick={() => {}}>
    <text>hi</text>
  </div>
))
app.renderer.nativeSimulateClick(50, 20)
expect(app.renderer.getAllText()).toEqual(['hi'])
app.unmount()

123456789function createTestRoot(options?: TestRendererOptions): TestRoot

interface TestRoot {
  root: Root
  renderer: TestRenderer
  render(code: () => JSX.Element): void
  flushSync<Value>(fn: () => Value): Value
  unmount(): void
}

1234567891011import { launch } from '@gpuix/solid/automation'

const app = await launch({
  command: 'bun',
  args: ['app.tsx'],
  env: { GPUIX_BACKGROUND: '1' },
})
await app.getByTestId('bump').waitFor()
await app.getByTestId('bump').click()
await app.screenshot({ path: 'tmp/after-click.png' })
await app.close()

1234567import { createTestRoot } from '@gpuix/solid/testing'
import { connectTest } from '@gpuix/solid/automation'

const { renderer, render } = createTestRoot()
render(() => <App />)
const app = await connectTest(renderer)
await app.getByTestId('bump').click()

12import { GpuixRenderer } from '@gpuix/solid'
import type { EventPayload, WindowOptions, StyleDesc } from '@gpuix/solid'

12createElement, createTextNode, insert, insertNode, setProp,
spread, memo, effect, createComponent, mergeProps, use

1import { jsx, jsxs, Fragment } from '@gpuix/solid/jsx-runtime'