My New Framework Project

A lightweight frontend framework built with Snabbdom for virtual DOM manipulation.

This project is based on the excellent tutorial by Marvin Frachet on building a frontend framework from scratch. Check out the original tutorial to understand the concepts behind this implementation.

Features

• 🚀 Virtual DOM rendering with Snabbdom
• 🧩 Component-based architecture
• 📝 Template literal syntax (JSX-like)
• 🎯 State management
• 🎨 Event handling
• 📦 Parcel bundler for development

Quick Start

Installation

npm install

Development

npm run dev
# or
npm start

Build for Production

npm run build

Project Structure

new-framework/
├── framework/           # Core framework files
│   ├── index.js        # Main framework logic
│   ├── element.js      # DOM element factories
│   └── event.js        # Event handling utilities
├── src/
│   └── components/     # Your components
├── index.html          # Main HTML file
├── index.js            # Application entry point
├── package.json        # Dependencies and scripts
└── .babelrc           # Babel configuration

Creating Components

Components follow this pattern:

import { div, button } from "../framework/element.js";
import { onClick } from "../framework/event.js";
import { createComponent } from "../framework/index.js";

const initialState = { count: 0 };

const methods = {
  increment: (state) => ({ ...state, count: state.count + 1 }),
};

const template = ({ count, methods }) =>
  div`
    ${button`${onClick(() => methods.increment())} Count: ${count}`}
  `;

export const MyComponent = createComponent({
  template,
  methods,
  initialState,
});

Available Elements

• div, p, h1, h2, h3
• span, button, input, form
• label, ul, li, a, img

Event Handlers

• onClick(fn) - Click events
• onChange(fn) - Change events
• onSubmit(fn) - Form submission

State Management

State is managed through methods that receive the current state and return the new state. The framework automatically re-renders components when state changes.

Credits

This framework is based on the tutorial by Marvin Frachet which teaches how to build a frontend framework from scratch. The tutorial covers:

• Template engines and template literals
• Virtual DOM concepts and Snabbdom integration
• State management systems
• Event handling
• Component architecture

License

MIT