OneJS Framework V2 - Modern reactive JavaScript framework with automatic .one file compilation
npm install onejs-v2Modern, reactive, type-safe JavaScript framework for building SPAs.
- 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
- Compiler: ONE file โ JS compilation
- Template Engine: Optimized rendering
- HMR: Hot Module Replacement
``bash`
npm install onelaraveljs
`javascript
import { App, View } from 'onelaraveljs';
// V1 code continues to work
`
`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: ,
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 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 Count: ${ctx.props.count}
;
}
});
`๐พ 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 ;
}
`๐ 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);
``- [ ] 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