Skip to content

Latest commit

 

History

History
82 lines (62 loc) · 2.42 KB

README.md

File metadata and controls

82 lines (62 loc) · 2.42 KB

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.