Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/itsjavi/jynxs
[Experimental] Lightweight ~3KB custom JSX runtime that implements the very basics of React, with extras like async components.
https://github.com/itsjavi/jynxs
jsx jsx-renderer jsx-runtime preact react tsx tsx-renderer typescript
Last synced: about 7 hours ago
JSON representation
[Experimental] Lightweight ~3KB custom JSX runtime that implements the very basics of React, with extras like async components.
- Host: GitHub
- URL: https://github.com/itsjavi/jynxs
- Owner: itsjavi
- License: mit
- Created: 2021-04-26T06:08:03.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-09-05T10:28:47.000Z (2 months ago)
- Last Synced: 2024-10-06T20:03:58.208Z (about 1 month ago)
- Topics: jsx, jsx-renderer, jsx-runtime, preact, react, tsx, tsx-renderer, typescript
- Language: TypeScript
- Homepage: http://itsjavi.com/jynxs/
- Size: 375 KB
- Stars: 46
- Watchers: 4
- Forks: 8
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:
```json
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "jynxs"
}
}
```
3. Configure your Vite project to transpile JSX with esbuild:
```ts
// 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`](./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`
- [ ] 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.