Roadmap

This page tracks what developers coming from React, Vue, Svelte or Solid reach for every day that AFW does not have yet: some of it those frameworks build in, the rest comes from their package ecosystems. It complements Comparison, which compares full-stack framework features.

Framework features

These items need compiler or runtime support, so a third-party package cannot add them.

Components and rendering

• Enter and exit transitions.

  • Animate elements as conditionals and lists add or remove them: Transitions, in the next release.

  • Others: Vue <Transition>, Svelte transition:, Framer Motion AnimatePresence.

• List reorder animation and out-in mode.

  • Animate items that move within a list, and let the old element finish leaving before the new one enters.

  • Others: Svelte animate:flip, Vue <TransitionGroup> and mode="out-in".

• Async pending boundaries.

  • <Pending> shows one fallback while the resources inside load, keeps the content during a refetch, and sends a failed first load to the nearest <ErrorBoundary>. In the next release.

  • Others: React and Solid <Suspense> and transitions, Svelte {#await} and <svelte:boundary>.

• Typed data after loading.

  • Inside <Pending>, resource.data is still typed T | undefined.

  • Others: React use(), TanStack useSuspenseQuery.

• Lazy components.

  • const Chart = () => import("./Chart.jsx"), in the next release.

  • Others: React lazy(), Solid lazy(), Vue defineAsyncComponent.

• Server-rendered pages in development.

  • With mode: "ssr", esdev start and the Vite dev server render pages on the server and the client adopts them, in the next release; edits still refresh in place.

  • Left: the same for mode: "ssg", which renders on the client in development.

  • Others: Next.js, SvelteKit, Nuxt, React Router and SolidStart render on the server in development.

• Deferred hydration.

  • Send a component's HTML with the page and load its JavaScript later: after hydration, when it scrolls into view, or when the browser is idle.

  • Others: Astro client:visible / client:idle, Qwik.

• Shadow DOM styles.

  • Opt-in style isolation per component.

  • Today: CSS Modules scope class names.

Routing

• Per-route loading and error files.

  • loading.jsx and error.jsx, in the next release.

• Layout errors.

  • A broken layout shows the error.jsx above it, in the next release.

• Layout loaders.

  • layout.loader.js, in the next release.

• Layout loaders that rerun only when needed.

  • Today they rerun on every navigation beneath their layout.

• Root layout errors.

  • The root layout has nothing above it, so its errors are reported, not caught.

• Route groups and optional segments.

  • Route groups and [[param]] / [[...rest]], in the next release.

• Typed routes.

  • Check <Link href> and navigate() paths, and type params, against the app/ folder.

  • Others: TanStack Router, React Router type generation.

• Validated search params.

  • Parse query with a schema into typed values, and update one value without building the URL by hand.

  • Others: TanStack Router validateSearch, Nuxt useRoute().query.

  • Today: pages receive query as a plain string map.

• Scroll restoration for async pages.

  • Each history entry's position is restored after the page renders, retrying while it grows: Navigation, in the next release.

• View transitions.

  • mountApp({ viewTransitions: true }): Navigation, in the next release.

Data and forms

• Forms without JavaScript.

  • <form action={addTodo}> posts to a server action and works before hydration; actions can redirect.

  • Others: SvelteKit form actions, React Router <Form>, Next.js server actions.

• Query caching and single-flight updates.

  • Opt-in cache and deduplication for query(), and an action response that carries the refreshed data.

• Streaming server rendering.

Configuration and tooling

• Public environment variables.

  • Done: import.meta.env.PUBLIC_* in both toolchains' dev servers, builds and server rendering. See Environment Variables.

  • Left: esdev-workflow static generation through @opentf/afw-cli, esdev test, and esdev's import.meta.env types; each waits on an esdev release.

• Lint rules.

  • An ESLint plugin that flags macro misuse (such as $state outside a component) in the editor instead of at build time.

• Editor support.

  • Complete TSX typings and editor tooling for macros.

• Devtools.

  • Inspect components, signals and network activity.

• Image optimization.

  • An image component plus a build step for responsive sizes and modern formats.

Ecosystem bridges

React, Vue and Svelte developers install these from npm. Many libraries publish a framework-agnostic core; AFW needs a thin adapter or a tested guide for each.

Already covered

• First-party packages: forms, i18n, component testing and the docs theme.

• Components: context, portals, error boundaries, CSS Modules and Tailwind.

• Server: middleware, cookies, API routes, and typed server functions with schema validation and same-origin checks on actions.

• Content: page metadata, sitemap, MDX.

• Development: hot reload that keeps component state.