The Blop Language

Blop is a modern language for the Web that natively generates Virtual DOM trees using familiar HTML-like syntax.

The Blop language compiles to ES6-compliant JavaScript with minimal dependencies. Unlike JSX, Blop is not limited to expressions – you can mix statements, expressions, and HTML-like syntax within the same function, giving you the full power of the language to generate Virtual DOM trees.

Blop uses the snabbdom library for Virtual DOM rendering and is built with the Meta Parser Generator.

Quick Start

# Install Blop
npm install blop-language

# Or clone and run the example
git clone https://github.com/batiste/blop-language.git
cd blop-language
npm install
npm start

Quick Start Guide · Live Demo

Example

import { mount, Component } from 'blop'

// A simple counter component
Counter = (ctx: Component) => {
  { value, setState } = ctx.state<number>('count', 0)
  
  <div>
    <h2>'Counter: 'value</h2>
    <button on={ click: () => setState(value + 1) }>'Increment'</button>
    <button on={ click: () => setState(value - 1) }>'Decrement'</button>
  </div>
}

// Mount the app
{ init } = mount(document.getElementById('app'), () => <Counter />)
init()

Documentation

Getting Started

• Installation Guide - Complete setup instructions
• Quick Start - Get running in 5 minutes
• Syntax Reference - Complete language syntax

Core Concepts

• Components - Building blocks of Blop applications
• State Management - Proxy-based reactive state
• Routing - Client-side navigation

Advanced Topics

• CLI Usage - Command-line interface
• Modern JS Features - Spread, optional chaining, nullish coalescing
• Generics - Generic types and functions

For Contributors

• Style Guide - Code standards and best practices
• Error Prioritization - Error message system

Browse All Documentation

Key Features

Language Features

• Native Virtual DOM - HTML-like syntax built into the language
• Fast Compilation - Process 30,000+ lines per second
• Enhanced Error Messages - Helpful suggestions and quick fixes
• Integrated Linter and Formatter - No configuration needed, no discussions about rules
• VSCode Integration - Syntax highlighting and real-time error checking
• Source Maps - Debug with original source code
• Hot Module Reloading (HMR) - Instant updates during development
• Type Annotations - Optional type checking with inference warnings
• Modern JavaScript - ES6+ syntax with optional chaining, nullish coalescing, spread operators
• Component System - Built-in lifecycle and state management
• Generics Support - Type-safe generic functions and types

Build & Test

• 100% Vite Compatible - Modern build tooling
• Vitest Integration - Fast, modern testing
• Small Bundle Size - ~15KB gzipped (Snabbdom + Blop runtime)

What's Missing

• Server-Side Rendering (SSR) - Removed in v1.1.0 with migration to Vite
• Still in beta - API may change

Setup

Installation

npm install blop-language

Full Installation Guide

Vite Configuration

Create or update vite.config.js:

import { defineConfig } from 'vite';
import { blopPlugin } from 'blop-language/vite';

export default defineConfig({
  plugins: [blopPlugin()],
});

More Vite Configuration Options

Vitest Configuration

Create vitest.config.js:

import { defineConfig } from 'vitest/config';
import { blopPlugin } from 'blop-language/vitest';

export default defineConfig({
  plugins: [blopPlugin()],
  test: {
    include: ['**/*.test.blop'],
    globals: true,
    environment: 'jsdom',
  },
});

Testing Guide

VSCode Extensions

Install from the marketplace or via command:

# If you cloned the repo
npm run link-extensions

Search for "Blop" in VSCode Extensions for:

• Blop Language - Syntax highlighting
• Blop Linter - Real-time error checking

Extension Setup Guide

CLI Usage

Compile a single file:

npx blop -i input.blop -o output.js

Complete CLI Reference

Development

Running the Example App

git clone https://github.com/batiste/blop-language.git
cd blop-language
npm install
npm start  # Open http://localhost:3000

Building and Testing

# Run tests
npm test

# Build parser
npm run parser

# Build linter extension
npm run linter

Formatting

You can format your Blop source files in place using the CLI:

node src/blop.js --format -i project/path/TodoListItem.blop

If you want to automatically format all staged Blop files before each commit, you can set up a Git pre-commit hook:

mkdir -p .git/hooks
cat > .git/hooks/pre-commit << 'EOF'
#!/bin/bash
git diff --cached --name-only --diff-filter=ACM | grep '\.blop$' | while read file; do
  node src/blop.js --format -i "$file"
done
EOF
chmod +x .git/hooks/pre-commit

Contributing Guide

Example Project Structure

my-blop-app/
├── src/
│   ├── main.blop          # Entry point
│   ├── App.blop           # Root component
│   ├── components/        # Reusable components
│   ├── lib/               # Utilities (state, router)
│   └── pages/             # Page components
├── index.html             # HTML entry
├── vite.config.js         # Vite configuration
├── vitest.config.js       # Test configuration
└── package.json

Links

• Live Demo - See Blop in action
• GitHub Repository - Source code
• NPM Package - Install package
• Documentation - Complete guides
• Issues - Bug reports & features

License

MIT License - see LICENSE.txt

Note on Documentation

The documentation has been migrated from the GitHub Wiki to the main repository (in the /docs folder) for better version control, review process, and maintainability. All wiki content has been preserved and enhanced.

If you're looking for older documentation, the wiki is still available but no longer maintained: https://github.com/batiste/blop-language/wiki

Please use the documentation in the /docs folder instead.