what-compiler

0.8.1 verified Fri May 01 auth: no javascript

JSX compiler for What Framework. Transforms JSX into optimized DOM operations via a Babel plugin or Vite plugin. Current stable version is 0.8.1. Development is active with frequent releases. Key differentiators: file-based routing via virtual module, production optimizations, and significant performance improvements (e.g., DOM rendering pipeline optimizations). Compared to other JSX compilers like babel-plugin-transform-react-jsx, it is tightly integrated with What Framework and provides virtual routing.

Common errors

error Cannot find module 'virtual:what-routes' ↓

cause Importing virtual module outside of Vite environment (e.g., in Node script without Vite).

fix

Ensure the import is only used in code processed by Vite (e.g., inside src/).

error Module not found: Error: Can't resolve 'what-compiler/vite' in '/project/vite.config.js' ↓

cause Package not installed or incorrect subpath.

fix

Run 'npm install what-compiler --save-dev' and verify the import path 'what-compiler/vite' (not 'what-compiler/vite-plugin').

error TypeError: what is not a function ↓

cause Default import used instead of named import for Vite plugin.

fix

Use import { what } from 'what-compiler/vite'.

error Error: [BABEL] ...: Plugin .default is not a valid Babel plugin ↓

cause Using default import for Babel plugin instead of named export.

fix

Use import { babelPlugin } from 'what-compiler/babel'.

error Error: 'require' of ES Module not supported ↓

cause Using require() on an ESM-only package.

fix

Convert to ES module or use dynamic import().

Warnings

breaking v0.7.0 changed internal DOM rendering pipeline, may affect custom rendering logic. ↓

fix Ensure custom rendering extensions are updated to work with the new pipeline.

deprecated Deprecated 'what-compiler/runtime' subpath removed in v0.6.0. ↓

fix Use 'what-compiler/file-router' for file router helpers.

gotcha ESM-only package: require() does not work. ↓

fix Use import syntax; if using CommonJS, use dynamic import() or set package type to module.

gotcha Virtual module 'virtual:what-routes' only exists after Vite build/start; cannot be imported directly in Node.js. ↓

fix Only import routes inside Vite-processed code; do not import in Node scripts outside Vite.

Install

npm install what-compiler

yarn add what-compiler

pnpm add what-compiler

Imports

vitePlugin|what
wrong
```
import what from 'what-compiler/vite'
```
correct
```
import { what } from 'what-compiler/vite'
```
The Vite plugin is exported as a named export (what or vitePlugin). Default import is not available.

babelPlugin

wrong

import babelPlugin from 'what-compiler/babel'

correct

import { babelPlugin } from 'what-compiler/babel'

Babel plugin is a named export.

routes
wrong
```
import routes from 'what-compiler/virtual-routes'
```
correct
```
import { routes } from 'virtual:what-routes'
```
Routes are generated at build time from a virtual module, not from the package itself.

scanPages

wrong

const scanPages = require('what-compiler/file-router').scanPages

correct

import { scanPages } from 'what-compiler/file-router'

Package is ESM-only, CommonJS require() will fail.

Quickstart

Configures Vite plugin with file-based routing, then mounts app with routes.

// vite.config.js
import { defineConfig } from 'vite';
import { what } from 'what-compiler/vite';

export default defineConfig({
  plugins: [
    what({
      pages: './src/pages',
      production: process.env.NODE_ENV === 'production',
    }),
  ],
});

// src/App.jsx
import { mount } from 'what-framework';
import { routes } from 'virtual:what-routes';
import { FileRouter } from 'what-router';

const App = () => <FileRouter routes={routes} />;

mount(<App />, document.getElementById('app'));