This directory contains various demos showcasing the capabilities of the Woby framework.

1. Counter - Basic counter component demonstrating custom elements, reactive properties, nested properties, style attributes, and context usage
2. Counter SSR - Server-side rendering version of the counter component
3. More demos coming soon...

For detailed documentation, please see:

• Framework Documentation
• Context API
• Installation Guide
• Basic Demos Overview
• Contributing Guide

To run the demos:

1. Ensure all dependencies are installed
2. Build the Woby framework
3. Serve the demo directory
4. Open in a web browser

Each demo directory contains its own README with specific instructions for running that demo.

This repository contains demo projects showcasing the capabilities of the Woby framework.

Each demo demonstrates different aspects of Woby's functionality:

• Benchmark - Performance benchmarks
• Boxes - Animated 3D boxes using Three.js
• Clock - Real-time digital clock
• Counter - Simple counter application
• Emoji Counter - Counter with emoji display
• HTML - Using HTML template literals
• HyperScript - Using HyperScript instead of JSX
• Playground - Interactive playground
• Spiral - Animated spiral visualization
• Store Counter - Counter using store-based state
• Triangle - Performance test with triangle rendering
• UIBench - UI performance benchmark

All demos showcase Woby's fine-grained reactivity system using observables:

import { $, $$ } from 'woby'

const count = $(0)  // Create reactive state
const increment = () => count(c => c + 1)  // Update state

Woby includes powerful built-in class management that supports complex class expressions similar to classnames and clsx libraries:

// Array of classes
<div class={['red', 'bold']}>Text</div>

// Nested arrays
<div class={['red', ['bold', ['italic']]]}>Text</div>

// Mixed types with reactive expressions
<div class={[
  "base-class",
  () => ($$(value) % 2 === 0 ? "even" : "odd"),
  { hidden: true, italic: false },
  ['hello', ['world']]
]}>Complex classes</div>

// Object syntax for conditional classes
<div class={{
  'active': isActive,
  'disabled': isDisabled,
  'loading': isLoading
}}>Status element</div>

Demos show various component patterns:

import { customElement } from 'woby'

// Custom elements
customElement('my-counter', Counter, 'value')

// Higher-order components
const withLogging = (Component) => (props) => {
  console.log('Component rendered with props:', props)
  return <Component {...props} />
}

Woby's architecture eliminates the need for virtual DOM and provides automatic fine-grained updates:

• No VDOM overhead
• No stale closures
• No dependency arrays
• No props diffing
• No key props needed for lists

Demos utilize Woby's comprehensive hook system:

import { 
  useAnimationLoop, 
  useEventListener, 
  useInterval, 
  usePromise,
  useMemo
} from 'woby'

// Animation loops
useAnimationLoop((time) => {
  // Update animations
})

// Event listeners
useEventListener('resize', handleResize)

// Intervals
useInterval(() => {
  // Periodic updates
}, 1000)

1. Clone this repository:

   git clone https://github.com/wobyjs/demo.git

2. Install dependencies:

   cd demo
   pnpm install

3. Run any demo:

   cd demo/counter
   pnpm dev

You can also view these demos online:

• Playground - Interactive environment
• Counter - Basic counter
• Clock - Real-time clock
• Boxes - Animated boxes
• Triangle - Performance test

For comprehensive documentation about Woby, visit:

• Official Documentation
• API Reference
• Examples Guide

Contributions are welcome! Please read our contributing guidelines before submitting pull requests.

This project is licensed under the MIT License - see the LICENSE file for details.