# =' FX JSX Plugin - Complete Cheat Sheet

## <� **Plugin Overview**

**FX JSX** provides native JSX parsing, rendering, and reactive binding without transpilation. Parse JSX strings at runtime and render them to DOM with automatic FX node reactivity.

### **Core Features**
-  **Native JSX Parsing** - No Babel/webpack needed
-  **Reactive Expressions** - `{$$app.data}` auto-updates
-  **Custom Components** - Register reusable component classes
-  **Event Handling** - Full JavaScript expressions in attributes
-  **Template Literals** - `jsx`` tagged templates
-  **Fragment Support** - Multiple root elements

---

## =� **Installation & Setup**

### **Loading the Plugin**

```html
<script type="module">
import('./fx.js').then(({ fx, $$ }) => {
    window.fx = fx;
    window.$$ = $$;

    // Load FX JSX plugin
    import('./plugins/fx-jsx.ts').then(plugin => {
        const jsx = plugin.default(fx);
        window.jsx = jsx; // Make globally available

        // Plugin is ready - start using JSX
        console.log(' FX JSX ready');
    });
});
</script>
```

### **Basic Usage**

```javascript
// Simple JSX rendering
jsx.render('<div>Hello World!</div>', '#container');

// With FX reactive expressions
jsx.render('<h1>{$$app.title}</h1>', document.body);

// Template literal syntax
const element = jsx`<button onclick={handleClick}>Click me</button>`;
```

---

## =� **Core API Reference**

### **JSX Engine Methods**

| Method | Description | Example |
|--------|-------------|---------|
| `jsx.render(jsxString, container, context)` | Parse and render JSX | `jsx.render('<div>Hello</div>', '#app')` |
| `jsx.component(name, ComponentClass)` | Register custom component | `jsx.component('MyButton', ButtonComponent)` |
| `jsx`` ` | Template literal JSX | `jsx\`<span>{data}</span>\`` |

### **Component Base Class**

```typescript
class MyComponent extends FXJSXComponent {
  constructor(props, children) {
    super(props, children);
    this.state = { count: 0 };
  }

  setState(updates) {
    // Updates both internal state and FX node
    super.setState(updates);
  }

  render() {
    // Return JSX element structure
    return {
      type: 'element',
      tagName: 'div',
      attributes: [
        { name: 'className', value: 'my-component' }
      ],
      children: [
        { type: 'text', content: `Count: ${this.state.count}` }
      ]
    };
  }
}
```

---

## <� **JSX Syntax Guide**

### **Basic Elements**

```jsx
// Simple elements
jsx.render('<div>Hello World</div>', '#container');

// With attributes
jsx.render('<div className="card" id="main">Content</div>', '#app');

// Self-closing tags
jsx.render('<img src="/image.jpg" alt="Description" />', '#gallery');
```

### **Reactive Expressions**

```jsx
// FX node values (reactive)
jsx.render('<h1>{$$app.title}</h1>', '#header');

// Complex expressions
jsx.render(`
  <div className={$$theme.dark ? 'dark-mode' : 'light-mode'}>
    <p>User: {$$user.name || 'Anonymous'}</p>
    <span>Items: {$$data.items.length}</span>
  </div>
`, '#content');

// Calculations
jsx.render('<div>Total: {$$cart.items.reduce((sum, item) => sum + item.price, 0)}</div>');
```

### **Event Handlers**

```jsx
// Simple event handlers
jsx.render(`
  <button onclick={() => $$('counter').set($$('counter').get() + 1)}>
    Increment
  </button>
`);

// With event object
jsx.render(`
  <input
    onchange={(e) => $$('form.name').set(e.target.value)}
    placeholder="Enter name"
  />
`);

// Multiple events
jsx.render(`
  <div
    onmouseover={() => $$('hover').set(true)}
    onmouseleave={() => $$('hover').set(false)}
  >
    Hover me
  </div>
`);
```

---

## >� **Custom Components**

### **Creating Components**

```typescript
// Simple component
class Greeting extends FXJSXComponent {
  render() {
    return {
      type: 'element',
      tagName: 'h1',
      attributes: [],
      children: [
        { type: 'text', content: `Hello ${this.props.name}!` }
      ]
    };
  }
}

// Register component
jsx.component('Greeting', Greeting);

// Use component
jsx.render('<Greeting name="World" />', '#app');
```

### **Stateful Components**

```typescript
class Counter extends FXJSXComponent {
  constructor(props, children) {
    super(props, children);
    this.state = { count: props.initialCount || 0 };
  }

  increment() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return {
      type: 'element',
      tagName: 'div',
      attributes: [{ name: 'className', value: 'counter' }],
      children: [
        {
          type: 'element',
          tagName: 'p',
          attributes: [],
          children: [
            { type: 'text', content: `Count: ${this.state.count}` }
          ]
        },
        {
          type: 'element',
          tagName: 'button',
          attributes: [
            {
              name: 'onclick',
              value: {
                type: 'expression',
                value: '() => this.increment()'
              }
            }
          ],
          children: [
            { type: 'text', content: 'Increment' }
          ]
        }
      ]
    };
  }
}
```

### **Components with Props**

```typescript
class UserCard extends FXJSXComponent {
  render() {
    const { name, email, avatar, isOnline } = this.props;

    return {
      type: 'element',
      tagName: 'div',
      attributes: [
        {
          name: 'className',
          value: `user-card ${isOnline ? 'online' : 'offline'}`
        }
      ],
      children: [
        {
          type: 'element',
          tagName: 'img',
          attributes: [
            { name: 'src', value: avatar },
            { name: 'alt', value: name }
          ],
          children: []
        },
        {
          type: 'element',
          tagName: 'div',
          attributes: [{ name: 'className', value: 'user-info' }],
          children: [
            {
              type: 'element',
              tagName: 'h3',
              attributes: [],
              children: [{ type: 'text', content: name }]
            },
            {
              type: 'element',
              tagName: 'p',
              attributes: [],
              children: [{ type: 'text', content: email }]
            }
          ]
        }
      ]
    };
  }
}

// Usage
jsx.render(`
  <UserCard
    name={$$user.name}
    email={$$user.email}
    avatar={$$user.avatar}
    isOnline={$$user.status === 'online'}
  />
`, '#user-profile');
```

---

## � **Reactive Patterns**

### **FX Node Binding**

```jsx
// Reactive text content
jsx.render('<h1>{$$app.title}</h1>', '#header');

// Reactive attributes
jsx.render('<div className={$$theme.current}>Themed content</div>', '#content');

// Reactive styles
jsx.render('<div style={`color: ${$$theme.primaryColor}`}>Colored text</div>');

// Complex reactive expressions
jsx.render(`
  <div className={$$user.isAdmin ? 'admin-panel' : 'user-panel'}>
    <span>{$$user.name} ({$$user.role})</span>
    <em>{$$user.lastLogin ? 'Recently active' : 'Inactive'}</em>
  </div>
`);
```

### **Two-Way Data Binding**

```jsx
// Input to FX node
jsx.render(`
  <input
    type="text"
    value={$$form.username}
    onchange={(e) => $$('form.username').set(e.target.value)}
    placeholder="Username"
  />
`, '#username-input');

// Checkbox binding
jsx.render(`
  <label>
    <input
      type="checkbox"
      checked={$$settings.notifications}
      onchange={(e) => $$('settings.notifications').set(e.target.checked)}
    />
    Enable notifications
  </label>
`);

// Select dropdown
jsx.render(`
  <select onchange={(e) => $$('user.theme').set(e.target.value)}>
    <option value="light" {$$user.theme === 'light' ? 'selected' : ''}>Light</option>
    <option value="dark" {$$user.theme === 'dark' ? 'selected' : ''}>Dark</option>
  </select>
`);
```

### **List Rendering**

```jsx
// Simple list
jsx.render(`
  <ul>
    {$$items.map((item, index) =>
      \`<li key="\${index}">\${item.name}</li>\`
    ).join('')}
  </ul>
`);

// Interactive list
jsx.render(`
  <div>
    {$$todos.map((todo, index) => \`
      <div className="todo-item \${todo.completed ? 'completed' : ''}">
        <span>\${todo.text}</span>
        <button onclick={() => {
          const todos = $$('todos').get();
          todos[index].completed = !todos[index].completed;
          $$('todos').set([...todos]);
        }}>
          \${todo.completed ? 'Undo' : 'Complete'}
        </button>
        <button onclick={() => {
          const todos = $$('todos').get();
          todos.splice(index, 1);
          $$('todos').set([...todos]);
        }}>Delete</button>
      </div>
    \`).join('')}
  </div>
`);
```

---

## <� **Template Literal API**

### **Basic Template Literals**

```javascript
// Simple elements
const heading = jsx`<h1>Welcome to FX JSX</h1>`;

// With variables
const name = 'John';
const greeting = jsx`<p>Hello, ${name}!</p>`;

// With FX nodes
const reactive = jsx`<span>Current time: {$$app.currentTime}</span>`;
```

### **Complex Templates**

```javascript
// Multi-line JSX
const form = jsx`
  <form onsubmit={(e) => handleSubmit(e)}>
    <div className="form-group">
      <label>Name:</label>
      <input type="text" value={$$form.name} />
    </div>
    <div className="form-group">
      <label>Email:</label>
      <input type="email" value={$$form.email} />
    </div>
    <button type="submit">Submit</button>
  </form>
`;

// With expressions
const card = jsx`
  <div className="card ${$$theme.dark ? 'dark' : 'light'}">
    <h2>{$$user.name}</h2>
    <p>Member since: {new Date($$user.joinDate).getFullYear()}</p>
    <button onclick={() => $$('user.profile.visible').set(!$$('user.profile.visible').get())}>
      {$$user.profile.visible ? 'Hide' : 'Show'} Profile
    </button>
  </div>
`;
```

---

## <� **Advanced Use Cases**

### **Conditional Rendering**

```jsx
// Simple conditionals
jsx.render(`
  <div>
    {$$user.isLoggedIn ?
      '<div>Welcome back!</div>' :
      '<div>Please log in</div>'
    }
  </div>
`);

// Complex conditionals
jsx.render(`
  <div className="user-status">
    {$$user.isAdmin ? \`
      <div className="admin-panel">
        <h2>Admin Panel</h2>
        <button onclick={() => $$('admin.mode').set(true)}>Enter Admin Mode</button>
      </div>
    \` : $$user.isPremium ? \`
      <div className="premium-panel">
        <h2>Premium Features</h2>
        <button onclick={() => showPremiumFeatures()}>Access Premium</button>
      </div>
    \` : \`
      <div className="basic-panel">
        <h2>Basic Features</h2>
        <button onclick={() => showUpgradeOption()}>Upgrade Account</button>
      </div>
    \`}
  </div>
`);
```

### **Dynamic Component Loading**

```typescript
// Dynamic component registry
const components = {
  'Button': ButtonComponent,
  'Card': CardComponent,
  'Modal': ModalComponent
};

// Register components dynamically
Object.entries(components).forEach(([name, component]) => {
  jsx.component(name, component);
});

// Use dynamic components
jsx.render(`
  <div>
    {$$ui.components.map(comp =>
      \`<\${comp.type} ...props="\${JSON.stringify(comp.props)}" />\`
    ).join('')}
  </div>
`);
```

### **Error Boundaries**

```typescript
class ErrorBoundary extends FXJSXComponent {
  constructor(props, children) {
    super(props, children);
    this.state = { hasError: false, error: null };
  }

  render() {
    if (this.state.hasError) {
      return {
        type: 'element',
        tagName: 'div',
        attributes: [{ name: 'className', value: 'error-boundary' }],
        children: [
          {
            type: 'element',
            tagName: 'h2',
            attributes: [],
            children: [{ type: 'text', content: 'Something went wrong' }]
          },
          {
            type: 'element',
            tagName: 'p',
            attributes: [],
            children: [{ type: 'text', content: this.state.error?.message || 'Unknown error' }]
          }
        ]
      };
    }

    return this.children[0] || { type: 'text', content: '' };
  }
}
```

---

## =
 **Debugging & Development**

### **Debug Mode**

```javascript
// Enable JSX debugging
jsx.debug = true;

// View parsed JSX structure
const parsed = jsx.parse('<div>{$$app.data}</div>');
console.log('Parsed JSX:', parsed);

// Monitor reactive updates
$$('app.data').watch((newValue) => {
  console.log('JSX will re-render with:', newValue);
});
```

### **Performance Optimization**

```javascript
// Minimize re-renders by grouping FX updates
function updateMultipleNodes() {
  // Batch updates to prevent multiple re-renders
  const updates = {
    'user.name': 'New Name',
    'user.email': 'new@email.com',
    'user.status': 'updated'
  };

  Object.entries(updates).forEach(([path, value]) => {
    $$(path).set(value);
  });
}

// Use keys for list items to optimize rendering
jsx.render(`
  <ul>
    {$$items.map(item =>
      \`<li key="\${item.id}">\${item.name}</li>\`
    ).join('')}
  </ul>
`);
```

---

## =� **Common Patterns & Best Practices**

###  **DO: Best Practices**

```jsx
//  Use meaningful component names
jsx.component('UserProfileCard', UserProfileComponent);

//  Keep components small and focused
class Button extends FXJSXComponent {
  render() {
    return {
      type: 'element',
      tagName: 'button',
      attributes: [
        { name: 'className', value: `btn ${this.props.variant || 'primary'}` },
        { name: 'onclick', value: this.props.onClick }
      ],
      children: [
        { type: 'text', content: this.props.children || 'Button' }
      ]
    };
  }
}

//  Use FX nodes for shared state
jsx.render('<div>{$$app.globalMessage}</div>');

//  Batch related updates
function updateUserProfile(userData) {
  Object.entries(userData).forEach(([key, value]) => {
    $$(`user.profile.${key}`).set(value);
  });
}
```

### L **DON'T: Anti-patterns**

```jsx
// L Don't inline complex logic in JSX
jsx.render(`
  <div>
    {(() => {
      // Complex logic here - move to function
      let result = '';
      for (let i = 0; i < items.length; i++) {
        result += `<span>${items[i]}</span>`;
      }
      return result;
    })()}
  </div>
`);

// L Don't forget to escape HTML in dynamic content
jsx.render(`<div>{userInput}</div>`); // Potential XSS

//  DO: Escape or use textContent
jsx.render(`<div>{escapeHtml(userInput)}</div>`);

// L Don't directly manipulate DOM in components
class BadComponent extends FXJSXComponent {
  render() {
    // DON'T: Direct DOM manipulation
    setTimeout(() => {
      document.getElementById('my-element').style.color = 'red';
    }, 1000);

    return { type: 'text', content: 'Bad Component' };
  }
}

//  DO: Use FX nodes and reactive expressions
class GoodComponent extends FXJSXComponent {
  componentDidMount() {
    setTimeout(() => {
      $$('component.color').set('red');
    }, 1000);
  }

  render() {
    return {
      type: 'element',
      tagName: 'div',
      attributes: [
        {
          name: 'style',
          value: {
            type: 'expression',
            value: '`color: ${$$("component.color")}`'
          }
        }
      ],
      children: [{ type: 'text', content: 'Good Component' }]
    };
  }
}
```

---

## <� **Complete Real-World Example**

```typescript
// Todo App with FX JSX
class TodoApp extends FXJSXComponent {
  constructor(props, children) {
    super(props, children);

    // Initialize FX state
    $$('todos.list').set([]);
    $$('todos.newText').set('');
    $$('todos.filter').set('all'); // all, active, completed
  }

  addTodo() {
    const text = $$('todos.newText').get();
    if (!text.trim()) return;

    const todos = $$('todos.list').get();
    todos.push({
      id: Date.now(),
      text: text.trim(),
      completed: false,
      createdAt: new Date()
    });

    $$('todos.list').set([...todos]);
    $$('todos.newText').set('');
  }

  toggleTodo(id) {
    const todos = $$('todos.list').get();
    const index = todos.findIndex(todo => todo.id === id);
    if (index >= 0) {
      todos[index].completed = !todos[index].completed;
      $$('todos.list').set([...todos]);
    }
  }

  deleteTodo(id) {
    const todos = $$('todos.list').get().filter(todo => todo.id !== id);
    $$('todos.list').set(todos);
  }

  render() {
    return {
      type: 'element',
      tagName: 'div',
      attributes: [{ name: 'className', value: 'todo-app' }],
      children: [
        {
          type: 'element',
          tagName: 'header',
          attributes: [],
          children: [
            {
              type: 'element',
              tagName: 'h1',
              attributes: [],
              children: [{ type: 'text', content: 'FX JSX Todo App' }]
            }
          ]
        },
        {
          type: 'element',
          tagName: 'div',
          attributes: [{ name: 'className', value: 'add-todo' }],
          children: [
            {
              type: 'element',
              tagName: 'input',
              attributes: [
                { name: 'type', value: 'text' },
                { name: 'placeholder', value: 'Add a new todo...' },
                {
                  name: 'value',
                  value: { type: 'expression', value: '$$("todos.newText")' }
                },
                {
                  name: 'onchange',
                  value: {
                    type: 'expression',
                    value: '(e) => $$("todos.newText").set(e.target.value)'
                  }
                },
                {
                  name: 'onkeypress',
                  value: {
                    type: 'expression',
                    value: '(e) => e.key === "Enter" && this.addTodo()'
                  }
                }
              ],
              children: []
            },
            {
              type: 'element',
              tagName: 'button',
              attributes: [
                { name: 'className', value: 'btn-primary' },
                {
                  name: 'onclick',
                  value: { type: 'expression', value: '() => this.addTodo()' }
                }
              ],
              children: [{ type: 'text', content: 'Add Todo' }]
            }
          ]
        },
        {
          type: 'element',
          tagName: 'div',
          attributes: [{ name: 'className', value: 'todo-list' }],
          children: [
            {
              type: 'expression',
              content: `$$('todos.list').map(todo => \`
                <div className="todo-item \${todo.completed ? 'completed' : ''}">
                  <input
                    type="checkbox"
                    \${todo.completed ? 'checked' : ''}
                    onchange={() => this.toggleTodo(\${todo.id})}
                  />
                  <span className="todo-text">\${todo.text}</span>
                  <button
                    className="btn-danger btn-sm"
                    onclick={() => this.deleteTodo(\${todo.id})}
                  >Delete</button>
                </div>
              \`).join('')`
            }
          ]
        }
      ]
    };
  }
}

// Register and render the app
jsx.component('TodoApp', TodoApp);
jsx.render('<TodoApp />', '#app');
```

This comprehensive cheat sheet covers all aspects of the FX JSX plugin, from basic usage to advanced patterns and complete real-world examples. The plugin provides a powerful way to use JSX without transpilation while maintaining full reactivity with FX nodes.