literaljs 8.0.0 → 8.0.1

package/README.md

@@ -21,24 +21,33 @@ npm install literaljs
 ```
 
 ```js
+/** @jsx h */
 import { h, component, App } from 'literaljs';
 
 const Hello = component({
   name: 'Hello',
   state: { count: 0 },
   render() {
-    return h('div', {}, [
-      h('p', {}, `Count: ${this.getState().count}`),
-      h('button', {
-        events: { click: () => this.setState({ count: this.getState().count + 1 }) }
-      }, 'Increment')
-    ]);
+    const { count } = this.getState();
+    return (
+      <div>
+        <p>Count: {count}</p>
+        <button events={{ click: () => this.setState({ count: count + 1 }) }}>
+          Increment
+        </button>
+      </div>
+    );
   }
 });
 
 new App(Hello, {}).mount('app');
 ```
 
+> **JSX setup**: Configure your build tool to use `h` as the JSX pragma. Babel example:
+> ```json
+> { "plugins": [["@babel/plugin-transform-react-jsx", { "pragma": "h" }]] }
+> ```
+
 ### CDN (UMD)
 
 ```html
@@ -55,7 +64,7 @@ new App(Hello, {}).mount('app');
 
 | Export | Purpose |
 |--------|---------|
-| `h(tag, attrs, ...children)` | Create VNode (JSX/Hyperscript/Object syntax) |
+| `h(tag, attrs, ...children)` | Create VNode (Hyperscript/Object syntax, or JSX pragma) |
 | `component(config)` | Define a component with state, methods, lifecycle |
 | `new App(rootComponent, initialStore)` | Create an app instance |
 | `app.mount(domId)` | Mount to a DOM element |
@@ -124,7 +133,7 @@ Build target: Chrome 90+, Firefox 90+, Safari 14+ (ES2018). No `Object.assign` p
 - **Fast** — Keyed diffing, WeakMap event delegation, render memoization
 - **Simple** — Plain functions + structured components. No classes, no hooks, no magic.
 - **Virtual DOM** — Diffed updates only on state change
-- **Flexible Syntax** — JSX, Hyperscript (`h()`), or Object syntax
+- **Flexible Syntax** — JSX (with `h` pragma), Hyperscript, or Object syntax
 - **Lifecycle Methods** — `mounted`, `updated`, `unmounted`
 - **Global + Component State** — Built-in store; no Redux needed
 - **Event Delegation** — Most events delegated to root for performance
@@ -135,6 +144,9 @@ Build target: Chrome 90+, Firefox 90+, Safari 14+ (ES2018). No `Object.assign` p
 ## Component API
 
 ```js
+/** @jsx h */
+import { h, component, App } from 'literaljs';
+
 const MyComponent = component({
   name: 'MyComponent',           // Required, for debugging
   state: { count: 0 },            // Initial component state
@@ -148,23 +160,28 @@ const MyComponent = component({
   unmounted() { console.log('unmounted'); },
   render() {
     const { count } = this.getState();
-    return h('div', {}, [
-      h('p', {}, `Count: ${count}`),
-      h('button', { events: { click: () => this.increment() } }, 'Add')
-    ]);
+    return (
+      <div>
+        <p>Count: {count}</p>
+        <button events={{ click: () => this.increment() }}>Add</button>
+      </div>
+    );
   }
 });
+
+new App(MyComponent, {}).mount('app');
 ```
 
 ### Props
 
 ```js
+/** @jsx h */
 // Parent passes props
-h(MyComponent, { key: 'unique', title: 'Hello' })
+<MyComponent key="unique" title="Hello" />
 
 // Child accesses via this.props
 render() {
-  return h('h1', {}, this.props.title);
+  return <h1>{this.props.title}</h1>;
 }
 ```
 
@@ -173,9 +190,12 @@ render() {
 Use `key` for list items to enable DOM identity preservation:
 
 ```js
-h('ul', {}, items.map(item =>
-  h('li', { key: item.id }, item.name)
-));
+/** @jsx h */
+<ul>
+  {items.map(item => (
+    <li key={item.id}>{item.name}</li>
+  ))}
+</ul>
 ```
 
 ---
@@ -198,7 +218,7 @@ this.setStore({ theme: 'dark' });  // Update global store
 // Access in render
 render() {
   const theme = this.getStore().theme;
-  return h('div', { class: theme }, ...);
+  return <div class={theme}>...</div>;
 }
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "literaljs",
-	"version": "8.0.0",
+	"version": "8.0.1",
 	"description": "A small JavaScript library for building reactive user interfaces.",
 	"main": "build/index.js",
 	"module": "build/index.m.js",