OneJS V2 Core

Modern, reactive, type-safe JavaScript framework for building SPAs.

🎯 Features

$3

- View System: Enhanced View class với lifecycle management
- Reactive System: Fine-grained reactivity với dependency tracking
- Props Validation: Type-safe props với runtime validation
- Lifecycle Hooks: init, mounted, updated, unmounted
- Style Management: Auto-injection với deduplication
- Error Handling: Graceful error display
- Memory Management: Proper cleanup và unmount

$3

- Compiler: ONE file → JS compilation
- Template Engine: Optimized rendering
- HMR: Hot Module Replacement

📦 Installation

``bash
npm install onelaraveljs
`

🚀 Usage

$3

`javascript
import { App, View } from 'onelaraveljs';

// V1 code continues to work
`

$3

`javascript
import { V2 } from 'onelaraveljs';

// Create reactive state
const state = V2.reactive({
count: 0,
user: { name: 'John' }
});

// Create view
const view = V2.View.create({
name: 'counter',

template(ctx, state, helpers) {
return

;
},

styles:
.counter { padding: 20px; }
button { padding: 10px 20px; }
,

mounted() {
console.log('View mounted!');
}
});

// Initialize and mount
view.initialize({ count: 0 }).mount('#app');
`

🎨 Reactive System

$3

`javascript
import { V2 } from 'onelaraveljs';

// Reactive object
const state = V2.reactive({
count: 0,
user: { name: 'John' }
});

// Auto-tracks dependencies
V2.effect(() => {
console.log('Count:', state.count);
});

state.count++; // Logs: Count: 1
`

$3

`javascript
const state = V2.reactive({ count: 0 });

const doubled = V2.computed(() => state.count * 2);

console.log(doubled.value); // 0
state.count = 5;
console.log(doubled.value); // 10 (cached)
`

$3

`javascript
const count = V2.ref(0);

console.log(count.value); // 0
count.value = 10;
console.log(count.value); // 10
`

$3

`javascript
const state = V2.reactive({ count: 0 });

V2.watch(
() => state.count,
(newVal, oldVal) => {
console.log(Count changed: ${oldVal} → ${newVal});
}
);

state.count = 5; // Logs: Count changed: 0 → 5
`

$3

`javascript
const [count, setCount] = V2.useState(0);

console.log(count()); // 0
setCount(5);
console.log(count()); // 5

// With updater function
setCount(prev => prev + 1);
console.log(count()); // 6
`

🎭 View Lifecycle

`javascript
V2.View.create({
name: 'my-component',

// 1. Called once on creation
init() {
console.log('1. Initializing...');
},

// 2. Setup function - runs before mount
setup() {
const message = 'Hello!';
return { message };
},

// 3. Called when mounted to DOM
mounted() {
console.log('3. Mounted to DOM');
// Access this.$el
},

// 4. Called after each re-render
updated() {
console.log('4. Updated');
},

// 5. Called on cleanup
unmounted() {
console.log('5. Unmounted');
// Cleanup logic
}
});
`

🎨 Template Helpers

`javascript
template(ctx, state, helpers) {
return

Click

Total: ${helpers.count(items)}

Sum: ${helpers.memo('sum', () => items.reduce((a, b) => a + b, 0), [items])}

;
}
`

🔧 Props Validation

`javascript
V2.View.create({
name: 'user-card',

props: {
user: {
type: Object,
required: true
},
count: {
type: Number,
default: 0
},
items: {
type: Array,
default: () => []
}
},

template(ctx) {
return

;
}
});
`

💾 Memory Management

`javascript
const view = V2.View.create({...});

// Initialize
view.initialize({ user: {...} });

// Mount
view.mount('#app');

// Update
view.update({ user: {...} });

// Unmount (cleanup)
view.unmount();
`

📊 Performance

$3

`javascript
template(ctx, state, helpers) {
// Expensive computation - cached
const result = helpers.memo(
'expensive',
() => computeExpensiveValue(state.data),
[state.data] // Dependencies
);

return

;
}
`

$3

`javascript
template(ctx, state, helpers) {
// Handler is cached - not re-created on each render
const handler = helpers.cachedHandler(
'myHandler',
() => console.log('Clicked!')
);

return Click;
}
`

🔄 Batch Updates

`javascript
const scheduler = V2.createBatchScheduler();

// Schedule multiple updates
scheduler.schedule(() => state.count++);
scheduler.schedule(() => state.name = 'John');
scheduler.schedule(() => state.age = 25);

// All updates batched and executed together
// (automatically in next microtask)

// Or flush immediately
scheduler.flush();
`

🎯 TypeScript Support

V2 is fully typed with JSDoc. For TypeScript projects:

`typescript
import { V2 } from 'onelaraveljs';

interface User {
name: string;
email: string;
}

const state = V2.reactive<{ user: User }>({
user: { name: 'John', email: 'john@example.com' }
});

// Type-safe!
state.user.name; // ✅
state.user.age; // ❌ Error
`

🆚 V1 vs V2

| Feature | V1 | V2 |
|---------|----|----|
| Reactivity | Manual | Automatic |
| TypeScript | ❌ | ✅ |
| Lifecycle | Basic | Advanced |
| Props Validation | ❌ | ✅ |
| Memory Management | Manual | Automatic |
| Performance | Good | Better |
| Bundle Size | ~50KB | ~30KB |

📚 More Examples

See /examples for more usage examples.

🐛 Debugging

`javascript
// Check if value is reactive
V2.isReactive(state); // true

// Check if value is ref
V2.isRef(count); // true

// Check if value is computed
V2.isComputed(doubled); // true

// Convert to raw object
const raw = V2.toRaw(state);
``

🚀 Next Steps

- [ ] Implement Template Engine with optimizations
- [ ] Build Compiler (ONE → JS)
- [ ] Add HMR support
- [ ] Add Router
- [ ] Add SSR support

---

Status: ✅ Core Implemented
Version: 2.0.0-alpha
Last Updated: 2026-01-31