can-parse

A simple context-free parser generator

Usage

This is similar to use as Jison, but it's designed to be tiny (<1k min+gip) and fast (while being less expressive than Jison).

To create a parser, first create a grammar with lexical tokens and an expression tree as follows:

const grammar = {
	lex: {
		"{": /^\{/,
		"}": /^\}/,
		"<": /^</,
		"/>": /^\/>/,
		"</": /^<\//,
		">": /^>/,
		"SPACE": /^\s/,
		"'": /^'/,
		"\"": /^"/,
		"=": /^=/,
		ALPHA_NUMERIC: /^[A-Za-z0-9]+/,
		TAGNAME: /^[a-z][-:_A-Za-z0-9]*/,
		NOT_END_MAGIC: /^([^\}]*)/,
		NOT_SPACE: /^[^\s\{\}<]+/,
		NOT_SPACE_RIGHT_CARROT: /^[^\s>=\{]+/,
		NOT_MAGIC_OR_DOUBLE: /^[^"\{]+/,
		NOT_MAGIC_OR_SINGLE: /^[^'\{]+/
	},
	tree: {
		EXPRESSION: [
			[ "TAG" ],
			[ "CLOSING" ],
			[ "MAGIC_OR_TEXT" ],
			[ "TAG", "EXPRESSION" ],
			[ "CLOSING", "EXPRESSION" ],
			[ "MAGIC_OR_TEXT", "EXPRESSION" ]
		],
		TAG: [
			[ "<", "TAGNAME", ">" ],
			[ "<", "TAGNAME", "/>" ],
			[ "<", "TAGNAME", "SPACE", ">" ],
			[ "<", "TAGNAME", "SPACE", "/>" ],
			[ "<", "TAGNAME", "SPACE", "ATTRS", ">" ],
			[ "<", "TAGNAME", "SPACE", "ATTRS", "/>" ]
		],
		CLOSING: [
			[ "</", "TAGNAME", ">" ]
		],
		ATTRS: [
			[ "ATTR" ],
			[ "ATTR", "SPACE", "ATTRS" ],
			[ "MAGIC" ],
			[ "MAGIC", "ATTRS" ]
		],
		ATTR: [
			[ "QUOTE", "=", "QUOTE" ],
			[ "NOT_SPACE_RIGHT_CARROT", "=", "QUOTE" ],
			[ "NOT_SPACE_RIGHT_CARROT", "=", "NOT_SPACE_RIGHT_CARROT" ],
			[ "NOT_SPACE_RIGHT_CARROT", "=", "MAGIC" ],
			[ "NOT_SPACE_RIGHT_CARROT" ]
		],
		QUOTE: [
			[ "'", "SINGLE_QUOTE_MAGIC_OR_TEXT", "'" ],
			[ "\"", "DOUBLE_QUOTE_MAGIC_OR_TEXT", "\"" ]
		],
		SINGLE_QUOTE_MAGIC_OR_TEXT: [
			[ "NOT_MAGIC_OR_SINGLE" ],
			[ "NOT_MAGIC_OR_SINGLE", "SINGLE_QUOTE_MAGIC_OR_TEXT" ],
			[ "MAGIC" ],
			[ "MAGIC", "SINGLE_QUOTE_MAGIC_OR_TEXT" ]
		],
		DOUBLE_QUOTE_MAGIC_OR_TEXT: [
			[ "NOT_MAGIC_OR_DOUBLE" ],
			[ "NOT_MAGIC_OR_DOUBLE", "DOUBLE_QUOTE_MAGIC_OR_TEXT" ],
			[ "MAGIC" ],
			[ "MAGIC", "DOUBLE_QUOTE_MAGIC_OR_TEXT" ]
		],
		MAGIC_OR_TEXT: [
			[ "TEXT" ],
			[ "TEXT", "MAGIC_OR_TEXT" ],
			[ "MAGIC" ],
			[ "MAGIC", "MAGIC_OR_TEXT" ]
		],
		MAGIC: [
			[ "{", "NOT_END_MAGIC", "}" ]
		],
		TEXT: [
			[ "SPACE" ],
			[ "SPACE", "TEXT" ],
			[ "NOT_SPACE" ],
			[ "NOT_SPACE", "TEXT" ]
		]
	}
};

EXPRESSION is a key word and is the starting point of the expression tree.

Once you built your grammar, build a parser like:

import parse from "can-parse";

const parser = parse( grammar );

Then parse something:

parser( "<my-element bar='car'/>", function( token, expressions ) {
	token; //-> { lex: "<", match: "<", index: 0 }
	expressions.end; // -> []
	expressions.start;

	// ->[
	//   {
	//    "expression": "EXPRESSION",
	//    "ruleIndexes": [ 0, 3 ]
	//   },
	//   {
	//    "expression": "TAG",
	//    "ruleIndexes": [ 0, 1, 2, 3, 4, 5]
	//   }
	// ]
} );

The parser function takes:

• The string to be parsed
• A callback which will be called back with each lexical token as it's matched , what was matched, and where it's matched, and the expressions that have started and ended with the matching of that token.