MiniDOM is a lightweight JavaScript framework for building modern web applications. It provides a simple yet powerful API for DOM manipulation, state management, routing, and event handling.
Include the MiniDOM framework in your project:
<script type="module">
import { createApp } from './src/index.js';
// Your application code here
</script>MiniDOM is built around four core concepts:
- Virtual DOM: A lightweight representation of the real DOM, making updates efficient.
- State Management: A predictable state container for your application.
- Routing: Simple URL-based navigation for single-page applications.
- Event System: Custom event handling separate from the DOM.
MiniDOM uses a function called h() (hyperscript) to create virtual DOM elements:
import { h } from './src/index.js';
// Create a simple div
const div = h('div', { class: 'container' }, [
'Hello, World!'
]);
// Create a nested structure
const app = h('div', { class: 'app' }, [
h('header', {}, [
h('h1', {}, ['My App'])
]),
h('main', {}, [
h('p', {}, ['Welcome to my application!'])
])
]);To render a virtual DOM tree to the real DOM:
import { mount } from './src/index.js';
const vnode = h('div', {}, ['Hello, World!']);
mount(vnode, document.getElementById('app'));Attributes are specified as an object in the second parameter of h():
h('input', {
type: 'text',
placeholder: 'Enter your name',
value: 'John',
class: 'input-field',
style: {
color: 'blue',
fontSize: '16px'
},
onClick: () => console.log('Clicked!')
});Child elements are passed as an array in the third parameter of h():
h('ul', { class: 'list' }, [
h('li', {}, ['Item 1']),
h('li', {}, ['Item 2']),
h('li', {}, ['Item 3'])
]);The store is the single source of truth for your application state:
import { createStore } from './src/index.js';
const store = createStore({
todos: [],
filter: 'all'
});const state = store.getState();
console.log(state.todos);// Update with an object
store.setState({
filter: 'active'
});
// Update with a function
store.setState(prevState => ({
todos: [...prevState.todos, { id: 1, text: 'New Todo', completed: false }]
}));const unsubscribe = store.subscribe(state => {
console.log('State changed:', state);
renderApp();
});
// Later, to unsubscribe
unsubscribe();store.connect(
// Selector function
state => state.todos.filter(todo => todo.completed),
// Change handler
completedTodos => {
console.log('Completed todos changed:', completedTodos);
}
);import { createRouter } from './src/index.js';
const router = createRouter({
'/': ()