PMTC Supported TypeScript Surface

The Pyreon Multi-Target Compiler (PMTC) intercepts JSX + TypeScript source in your .tsx files and emits Swift (SwiftUI) and Kotlin (Compose). It does not compile arbitrary TypeScript — Phase 0 deliberately ships a focused subset that covers the seven canonical patterns the TodoMVC + native-counter examples exercise. This page enumerates exactly what works, what silently drops, what fires a warning, and what's planned.

If you hit a shape this page doesn't list, treat it as undefined behavior — file an issue with the source snippet so the matrix can grow.

The accepted-shape catalogue

✅ Type aliases

type Todo = { id: number; text: string; done: boolean }
type Filter = 'all' | 'active' | 'completed'

✅ Module-level bindings

let nextId = 1
const TAX_RATE = 0.08

✅ Functional components

export function Greeting(props: { title: string; count: number }) {
  return <Stack><Text>{props.title}: {props.count}</Text></Stack>
}

✅ Hooks (component-body declarations)

The compiler recognises these hook identifiers and emits per-target equivalents:

Hooks: silent-drop shapes

• useStorage<unknown>('k', '') (no inferred type) — silently emits unbound T. Always pass the generic.

• useFetch('/url') without a generic — silently drops the decode type; emit may compile but result.data is Unknown.

• useForm({ initialValues: x }) where x is not a literal object — silently dropped. Use useForm({ initialValues: { foo: 0 } }).

• usePermissions([myString]) where myString is an identifier — silently dropped. Pass string literals or migrate to runtime permissions.set().

Hooks: warning shapes (PR #1136, A3)

• useLoaderData<T>() — A3 diagnostic (PR #1235). Emits a warning naming the binding because PMTC has no emit yet; the runtime PyreonRouter.setLoaderData() is the only way to populate this signal today. (Real emit lands as Phase B.6.)

• const { copy, copied } = useClipboard() — destructure form unsupported; warns to use const cb = useClipboard() instead.

✅ Custom hooks (same file)

A custom hook — a same-file function useX(…) or const useX = (…) => … that calls other hooks — is inlined into each component that calls it before native compilation. Its state becomes that component's state, which is what a hook means: natively, signal / useQuery / useOidc lower to view state (@State, remember), which only exists inside a component, so a hook has no standalone native form.

function useCounter(start: number) {
  const count = signal(start)
  const increment = () => count.set(count() + 1)
  return { count, increment }
}

export function App() {
  const { count, increment } = useCounter(1)
  return <Button onPress={increment}>{count()}</Button>
}

Each call gets its own state (two useCounter calls are two counters), a hook that calls another same-file hook is inlined through, and a hook nothing calls any more is dropped from the native output. Writing the body directly in the component produces the same Swift and Kotlin, byte for byte.

A function whose name does not start with use is a plain helper and keeps the helper path (a top-level native function).

✅ Function declarations

function deleteAt(index: number) { items.value.splice(index, 1) }

✅ Collections (Map / Set)

type Todo = { id: string; title: string }
const byId = new Map<string, Todo>()
byId.set(t.id, t)
byId.get(id)?.title
const index = new Map(todos().map((t) => [t.id, t]))

✅ Reactive prop access

function Foo(props: { title: string; count: number }) {
  return <Text>{props.title}: {props.count}</Text>
}

The props.X member access is rewritten per target. The annotation type is the source of truth — props.unknown (a field not in the annotation) silently emits an unbound reference. Always type-annotate.

✅ Routing

const router = createRouter({
  routes: [
    { path: '/', component: HomePage },
    { path: '/users/:id', component: UserPage, beforeEnter: () => isAuthed() },
  ],
  beforeEach: [authGuard, logGuard],
  afterEach: [analytics],
})
return <RouterProvider router={router}><RouterView /></RouterProvider>

✅ JSX

<Stack space="md">
  <Text>Hello {name}</Text>
  <For each={items} by={(i) => i.id}>{(item) => <Text>{item.text}</Text>}</For>
</Stack>

Comprehensive silent-drop catalogue

These are shapes the parser walks but doesn't (yet) emit anything for. The compiler doesn't fire a diagnostic — code compiles and runs, but the silently-dropped shape contributes nothing to the native output. Track at parse.ts (search "silently" / "drop" / "Phase").

Diagnostic warnings (already fire today)

These warnings ship in parse.ts and surface via result.warnings from @pyreon/native-compiler's transform(). The CLI builder (pyreon-native build) also prints them to stderr.

1. Untyped props parameter (PR #1136) — function X(props) { ... props.title ... } with no annotation.

2. useClipboard destructure form (PR #1136) — const { copy } = useClipboard().

3. Block-body per-route beforeEnter (PR #1136) — beforeEnter: () => { ... } (only expression-body arrows are extracted).

4. Hook inside render callback (PR #1136) — <For>{(item) => { const x = signal(0); ... }}.

5. Round-1: missing required props (PR #1094) — Icon/Image/Link without name/src/to.

6. Round-2: silent-drop shapes (PR #1099) — Press without onPress, Link prefetch=… on native, Stack/Inline/Layer align="<typo>".

7. A3: useLoaderData<T>() (PR #1235) — silent-drop diagnostic naming the binding; runtime emit is Phase B6.

Consuming compiler diagnostics

import { transform } from '@pyreon/native-compiler'

const result = transform(source, { target: 'swift' })
console.log(result.code)        // emitted Swift
console.log(result.warnings)    // ['Component X has an untyped …', …]

The CLI (pyreon-native build) prints [pyreon-native] N warning(s): to stderr automatically. No Vite-plugin or LSP/editor surfacer exists yet — that's a Phase D6 follow-up.

What's NOT supported (and not planned for Phase 0)

The audit's Phase B/C/D roadmap explicitly does NOT cover:

• Class components — Pyreon's web side hasn't shipped classes either; not a multi-target concern.

• Hooks rules (call-from-render-context-only, etc.) — Pyreon doesn't have React's hook rules; the compiler-level constraint is "hook declarations live at component body scope".

• JSX namespacing (e.g. svg:rect element prefix syntax) — not in v1.

• Generic type parameters on user types — explicitly Phase 3 work.

• Conditional types (T extends U ? A : B) — not parsed; treat as opaque.

• Decorators — not in v1.

• Higher-order components (HOC pattern) — partially possible if the HOC is just a function returning a component, but the type-flow gets lost.

If you need any of the above, file an issue with the source pattern; the matrix grows from real-world demand.

Cross-references

• packages/native/compiler/src/parse.ts — source of truth for what gets extracted

• packages/native/compiler/src/types.ts — DeclIR + ExprIR union shapes

• packages/native/compiler/src/tests/native-audit-warnings.test.ts — locked diagnostic-warning catalogue

• docs/src/content/docs/multiplatform.md — the architectural overview