Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
img
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

The blop language

Blop is a language for the Web that can natively generates Virtual DOM using a familiar HTML like syntax. The Blop language compiles to ES6 compliant JavaScript. The language is mostly self contained and has very few dependencies. Blop is using snabbdom library to handle the virtual nodes.

Unlike JSX Blop is not limited to expressions and can use the full power of the language to generate Virtual DOM nodes. You can mix any statement, expressions, and HTML like syntax within the same function.

The blop runtime also comes with a Component and Lifecycle system.

Example project from this repository

State management and routing can be up to you, but 2 small libraries provide the basics to get started

How to get get started

Language features

  • Virtual DOM generation is natively supported by the language.
  • Fast compilation (+30'000 lines by second).
  • A linter is integrated into the language: no linter debate.
  • Good integration with Visual Studio Code: linter and syntactic coloration.
  • Source maps.
  • Server Side Rendering in the example.
  • Hot module reloading in the example (HMR)
  • Type annotation with very basic type inference warnings.
  • Similar syntax and features than ES6.
  • 100% Webpack and Jest compatible
  • Very small payload size for Snabbdom and Blop runtime: Parsed size: ~20KB, Gzipped: ~7KB

Language features missing

  • The language is still in beta

Installation

npm install blop-language

Or if you want to use the development version with examples

git clone this repo
npm install
npm start
open http://localhost:3000

Command line usage

To convert a single file

blop -i input.blop -o output.js

Configure Webpack loader for blop

Add this rule into your webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.blop$/,
        use: [
          {
            loader: 'blop-language/src/loader',
            options: {debug: false}
          }
        ]
      }
    ]
  }
};

Configure Jest for blop

// jest.config.js
module.exports = {
  moduleFileExtensions: [
    'blop',
    'js',
  ],
  testMatch: ['**/*.test.blop'],
  transform: {
    '^.+\\.blop$': 'blop-language/src/jest',
  },
};

Install Visual Studio Code extensions

Install them though visualstudio marketplace.

vscode will prompt you to install the extenstion when you open a .blop file

Here is a link to the extensions on the visualstudio marketplace

Install the extensions https://marketplace.visualstudio.com/search?term=blop&target=VSCode&category=All%20categories&sortBy=Relevance

Install them throught github

If you cloned the repository, it is has simple has creating a symbolic link to your ~/.vscode/extensions directory. This function will do it for you:

cd blop-language/
npm run link-extensions

Relaunch vscode and open a .blop file to see if the linter and coloration work

About

Blop is a Web oriented programming language that compiles to JavaScript

Topics

Resources

License

Releases

No releases published

Packages

No packages published