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, dynamic import()
• Lazy Loading - Code splitting and on-demand component loading
• Server-Side Rendering - renderComponentToString API
• Generics - Generic types and functions

Browse All Documentation

Key Features

Language Features

• Native HTML - 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
• Advanced Type Annotations and Inference - Optional type checking with intelligent inference
• Modern JavaScript - ES6+ including optional chaining, nullish coalescing, spread, dynamic import()
• Lazy Loading - Dynamic import() for code splitting and on-demand component loading
• Component System - Built-in lifecycle and state management

Tooling

• SSR Support - renderComponentToString() for server-side rendering
• Hot Module Reloading (HMR) - Instant updates during development
• Chrome DevTools - Inspect Blop components tree
• CLI Tool - Compile, format, and manage Blop projects from the command line
• Vite Compatibility - Seamless integration with modern build tools
• Vitest Integration - Write and run tests with a modern testing framework
• Small Bundle Size - ~15KB gzipped (Snabbdom + Blop runtime)

What's Missing

• 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 — passing either a single file or a whole directory (processed recursively):

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

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

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