{"id":18942314,"url":"https://github.com/itsjavi/jynxs","last_synced_at":"2025-03-17T03:08:48.327Z","repository":{"id":41259889,"uuid":"361636603","full_name":"itsjavi/jynxs","owner":"itsjavi","description":"[Experimental] Lightweight ~3KB custom JSX runtime that implements the very basics of React, with extras like async components.","archived":false,"fork":false,"pushed_at":"2024-09-05T10:28:47.000Z","size":384,"stargazers_count":48,"open_issues_count":3,"forks_count":8,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-04T07:33:07.108Z","etag":null,"topics":["jsx","jsx-renderer","jsx-runtime","preact","react","tsx","tsx-renderer","typescript"],"latest_commit_sha":null,"homepage":"http://itsjavi.com/jynxs/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/itsjavi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-04-26T06:08:03.000Z","updated_at":"2024-12-18T11:35:26.000Z","dependencies_parsed_at":"2024-09-05T18:13:04.729Z","dependency_job_id":"18136332-e800-4c0e-b6d2-765bf1d6cbaa","html_url":"https://github.com/itsjavi/jynxs","commit_stats":null,"previous_names":["itsjavi/jynxs","itsjavi/jsx-runtime"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsjavi%2Fjynxs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsjavi%2Fjynxs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsjavi%2Fjynxs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsjavi%2Fjynxs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/itsjavi","download_url":"https://codeload.github.com/itsjavi/jynxs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243965774,"owners_count":20375917,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jsx","jsx-renderer","jsx-runtime","preact","react","tsx","tsx-renderer","typescript"],"created_at":"2024-11-08T12:32:23.688Z","updated_at":"2025-03-17T03:08:48.301Z","avatar_url":"https://github.com/itsjavi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JynXS: A tiny custom JSX Runtime\n\nJynXS is a lightweight, ~3KB JSX runtime that implements the very basics of a modern UI library without relying on\nReact.\n\n\u003e This project is very experimental and a proof of concept. Not recommended for production use.\n\n## Core Features\n\n- Custom JSX runtime implementation, in TypeScript\n- Supports functional components (only)\n- Supports async components, also with a `fallback`. It means you don't need to wrap your components in `Suspense`.\n- Basic hooks implementation:\n  - `useState` for state management\n  - `useEffect` for side effects\n- Event handling\n- Supports `ref` as prop, to access DOM elements\n\n## Getting Started\n\n1. Install the package with any package manager:\n\n   ```\n   pnpm add jynxs\n   # or\n   npm install jynxs\n   # or\n   bun add jynxs\n   ```\n\n2. Configure your `tsconfig.json` to use the JynXS runtime:\n\n   ```json\n   {\n     \"compilerOptions\": {\n       \"jsx\": \"react-jsx\",\n       \"jsxImportSource\": \"jynxs\"\n     }\n   }\n   ```\n\n3. Configure your Vite project to transpile JSX with esbuild:\n\n   ```ts\n   // vite.config.ts\n   import { defineConfig } from 'vite'\n\n   export default defineConfig({\n     // ...\n     esbuild: {\n       jsxFactory: 'jsx',\n       jsxFragment: 'Fragment',\n     },\n     // ...\n   })\n   ```\n\nThat's it!\n\n## Usage Example\n\nAn example of how to use the JynXS runtime can be found in [`src/example.tsx`](./src/example.tsx).\n\nThis file demonstrates the usage of functional components, async components, state management, effects, and event\nhandling.\n\n### TO-DO\n\nThis list is not a roadmap, but more a list of things that would be nice to have, and the order is random.\n\n- [ ] Support both `class` and `className`, and integrate with `clsx`, so arrays and conditional classes are supported.\n- [ ] Add a `useGlobalState` hook to manage and subscribe to global state in a very simple way\n- [ ] Better HTML attribute types\n- [ ] Implement `renderToString()` to render the UI to a string (for SSR)\n- [ ] Support and handle sync/async functions in form's `action`: `(data: FormData) =\u003e Promise\u003cvoid\u003e`\n- [ ] Implement `useFormStatus`\n- [ ] Implement `cache()` to avoid expensive tasks on re-renders\n- [ ] Escape text content to prevent XSS (and maybe support dangerouslySetInnerHTML?)\n- [ ] Error handling and error boundaries\n- [ ] Implement `useDebouncedState` / `useDebouncedCallback` helpers\n\nWe won't add support for more complex features like advanced context, portals, style objects, custom hooks, etc.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsjavi%2Fjynxs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitsjavi%2Fjynxs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsjavi%2Fjynxs/lists"}