Vidact: React gecompileerd naar VanillaJS

Snelstart: npx vidact my-app

Beta: Vidact compileert een gedocumenteerde subset van React 19 en weigert de rest tijdens het build-proces.

Voorbeelden in actie

De onderstaande voorbeelden zijn geschreven in standaard React, gecompileerd door Vidact en geïmplementeerd op deze pagina:

• Counter
• Form
• Keyed list
• Branches

Voorbeeld: Counter.tsx

import { useState } from 'react'

export function Counter() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
      <output>Count: {count}</output>
    </div>
  )
}

Resultaat:

• Knop: Increment
• Tekst: Count: 0

Analyse:

• Component calls: 1
• DOM mutations: 0
• Tree diffs: 0

Live gemeten door een MutationObserver die deze demo bewaakt.

Bundle-groottes (gzipped)

• Counter app (inclusief runtime): 8.0 kB

tests/runtime-size/fixtures/counter.tsx

• TodoMVC (inclusief runtime): 11.8 kB

examples/todomvc/src/TodoApp.tsx

Belangrijk detail: De component-body wordt slechts één keer uitgevoerd, bij het mounten.

Het overkoepelende framework: Vidact Start

Vidact Start voegt functionaliteiten toe zoals file routes, server loaders, SSR (Server Side Rendering), hydratatie en client-navigatie. Omdat dezelfde compiler zowel de server- als de browser-build produceert, komen de markup die de server verzendt en de DOM die de client hydrateert voort uit één enkele beschrijving van de component.

Voorbeeld: Route-definitie

src/routes/products/$productId.tsx

import { defineFileRoute } from '@vidact/start'

const loader = async ({ params }) => ({
  product: await findProduct(params.productId),
})

export function ProductRoute({ loaderData }) {
  return <h1>{loaderData.product.name}</h1>
}

export const Route = defineFileRoute({
  loader,
  component: ProductRoute,
})

Wat niet wordt ondersteund

Bepaalde onderdelen vallen buiten de ondersteunde subset, waaronder:

• Class components
• createRef
• De meeste Children-helpers
• React DevTools
• Third-party pakketten die vooraf zijn gecompileerd tegen de React-runtime in plaats van tegen React-vormige broncode.

Deze beperkingen leiden niet tot stille fouten. De compiler stopt het build-proces bij de regel die de fout veroorzaakt en specificeert de betreffende API. Er is geen fallback-mechanisme dat in plaats daarvan React laadt.

Voorbeelden van build-output fouten

src/Clock.tsx:3:28: UnsupportedSyntax: React class components are unsupported; use a function component and Vidact errorBoundary

src/Toggle.tsx:5:18: UnsupportedSyntax: unsupported React event prop onWiggle; use a supported React 19 event name