docs: update descriptions

itsjavi · Sep 5, 2024 · e264f0d · e264f0d
1 parent 9d338d5
commit e264f0d
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -1,11 +1,10 @@
 # JynXS: A tiny custom JSX Runtime
 
-JynXS is a lightweight, JSX runtime that implements the very basics of a modern UI library without relying on React.
+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.
 
-> It will be released on NPM as soon as it's more stable and tested.
-
 ## Core Features
 
 - Custom JSX runtime implementation
@@ -20,36 +19,59 @@ JynXS is a lightweight, JSX runtime that implements the very basics of a modern
 
 ### TO-DO
 
-- [ ] Add `cache()` to avoid expensive tasks on re-renders
-- [ ] Support and handle sync/async functions in form's `action`: `(data: FormData) => Promise<void>`
+- [ ] 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
 - [ ] Add SSR compatibility
+- [ ] Support and handle sync/async functions in form's `action`: `(data: FormData) => Promise<void>`
+- [ ] Implement `cache()` to avoid expensive tasks on re-renders
+
+We won't add support for more complex features like advanced context, portals, style objects, custom hooks, etc.
 
 ## Getting Started
 
-1. Clone the repository:
+1. Install the package with any package manager:
 
    ```
-   git clone https://github.com/itsjavi/jynxs.git
-   cd jynxs
+   pnpm add jynxs
+   # or
+   npm install jynxs
+   # or
+   bun add jynxs
    ```
 
-2. Install dependencies:
+2. Configure your `tsconfig.json` to use the JynXS runtime:
 
-   ```
-   pnpm install
+   ```json
+   {
+     "compilerOptions": {
+       "jsx": "react-jsx",
+       "jsxImportSource": "jynxs"
+     }
+   }
    ```
 
-3. Start the development server:
+3. Configure your Vite project to transpile JSX with esbuild:
 
-   ```
-   pnpm run dev
+   ```ts
+   // vite.config.ts
+   import { defineConfig } from 'vite'
+
+   export default defineConfig({
+     // ...
+     esbuild: {
+       jsxFactory: 'jsx',
+       jsxFragment: 'Fragment',
+     },
+     // ...
+   })
    ```
 
-4. Open your browser and navigate to `http://localhost:5173` to see the project in action.
+That's it!
 
 ## Usage Example
 
-An example of how to use the JynXS runtime can be found in `src/example.tsx`.
+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.

diff --git a/index.html b/index.html
@@ -4,10 +4,10 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="/icon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>JynXS - A very simple JSX runtime with the basics</title>
+    <title>JynXS - A custom JSX runtime in 3KB, inspired by React</title>
     <meta
       name="description"
-      content="JynXS is a lightweight, JSX runtime that implements the very basics of a modern UI library without relying on React."
+      content="JynXS is a lightweight, ~3KB JSX runtime that implements the very basics of a modern UI library like React."
     />
   </head>
   <body>

diff --git a/src/example.tsx b/src/example.tsx
@@ -75,8 +75,8 @@ const App = () => (
       </a>
     </h1>
     <p class="description">
-      JynXS is a lightweight, JSX runtime that implements the very basics of a modern UI library without relying on
-      React.
+      JynXS is a lightweight, ~3KB JSX runtime that implements the very basics of React including state and effects, but
+      adding many extras on top like async components and conditional classNames.
       <br />
       <br />
       Examples: