JynXS: A tiny custom JSX Runtime

JynXS is a lightweight, ~3KB JSX runtime that implements the very basics of a modern UI library without relying on React.

This project is very experimental and a proof of concept. Not recommended for production use.

Core Features

• Custom JSX runtime implementation, in TypeScript
• Supports functional components (only)
• Supports async components, also with a fallback. It means you don't need to wrap your components in Suspense.
• Basic hooks implementation:
  • useState for state management
  • useEffect for side effects
• Event handling
• Supports ref as prop, to access DOM elements

Getting Started

1. Install the package with any package manager:

   pnpm add jynxs
   # or
   npm install jynxs
   # or
   bun add jynxs
   

2. Configure your tsconfig.json to use the JynXS runtime:

   {
     "compilerOptions": {
       "jsx": "react-jsx",
       "jsxImportSource": "jynxs"
     }
   }

3. Configure your Vite project to transpile JSX with esbuild:

   // vite.config.ts
   import { defineConfig } from 'vite'
   
   export default defineConfig({
     // ...
     esbuild: {
       jsxFactory: 'jsx',
       jsxFragment: 'Fragment',
     },
     // ...
   })

That's it!

Usage Example

An example of how to use the JynXS runtime can be found in src/example.tsx.

This file demonstrates the usage of functional components, async components, state management, effects, and event handling.

TO-DO

This list is not a roadmap, but more a list of things that would be nice to have, and the order is random.

• Support both class and className, and integrate with clsx, so arrays and conditional classes are supported.
• Add a useGlobalState hook to manage and subscribe to global state in a very simple way
• Better HTML attribute types
• Implement renderToString() to render the UI to a string (for SSR)
• Support and handle sync/async functions in form's action: (data: FormData) => Promise<void>
• Implement useFormStatus
• Implement cache() to avoid expensive tasks on re-renders
• Escape text content to prevent XSS (and maybe support dangerouslySetInnerHTML?)
• Error handling and error boundaries
• Implement useDebouncedState / useDebouncedCallback helpers

We won't add support for more complex features like advanced context, portals, style objects, custom hooks, etc.