@vimpak/jsx 0.2.0 → 0.4.0

package/README.md

@@ -36,42 +36,26 @@ const html = await render(<Greeting name="World" />);
 // Output: <h1>Hello, World!</h1>
 ```
 
-### Fragments
+### Async Components
 
-```tsx
-function Page() {
-  return (
-    <>
-      <h1>Title</h1>
-      <p>Content</p>
-    </>
-  );
-}
-```
-
-### Safe HTML
-
-Use the `safe` prop to render raw HTML:
+Components can be asynchronous:
 
 ```tsx
-function Component() {
-  return <div safe="<strong>Bold text</strong>" />;
+async function User({ id }: { id: string }) {
+  const user = await fetchUser(id);
+  return <div>{user.name}</div>;
 }
-```
 
-### Styles
-
-```tsx
-function Styled() {
-  return <div style={{ color: "red", fontSize: "16px" }}>Styled</div>;
-}
+const html = await render(<User id="1" />);
 ```
 
+The `render` function awaits all async components automatically.
+
 ### Context
 
 ```tsx
 class AppContext {
-  async getTheme() {
+  getTheme() {
     return "dark";
   }
 }
@@ -79,7 +63,8 @@ class AppContext {
 const ctx = new AppContext();
 
 function Greeting(props: { name: string }, ctx: AppContext) {
-  return <div></div>;
+  const theme = ctx.getTheme();
+  return <div className={theme}>{props.name}</div>;
 }
 
 function App() {
@@ -93,6 +78,24 @@ function App() {
 const html = await render(<App />, ctx);
 ```
 
+### Safe HTML
+
+Use the `safe` prop to render raw HTML:
+
+```tsx
+function Component() {
+  return <div safe="<strong>Bold text</strong>" />;
+}
+```
+
+### Styles
+
+```tsx
+function Styled() {
+  return <div style={{ color: "red", fontSize: "16px" }}>Styled</div>;
+}
+```
+
 ## API
 
 ### `render(element, context?)`
@@ -103,3 +106,7 @@ Renders a JSX element to an HTML string.
 - **context** (optional): A `Context` value for passing values to all components
 
 Returns `Promise<string>`.
+
+## Thanks
+
+- https://github.com/kitajs/html

package/package.json

@@ -1,6 +1,6 @@
 {
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "name": "@vimpak/jsx",
   "collaborators": [
     "Sudesh Yadav <sudeshyadav955@gmail.com>"
@@ -8,6 +8,10 @@
   "files": [
     "./dist"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sudesh955/jsx"
+  },
   "main": "./dist/index.js",
   "exports": {
     ".": {