fusion: A language framework and superset for JavaScript, HTML, and CSS

Framework

Fusion provides a simple and straightforward collection of functions to analyze JavaScript, HTML, and CSS. A syntax highlighter along with other lexer-parser utilities for these languages are available in this framework. Unlike most tokenizers which make heavy use of regular expressions, the lexical analysis phase in fusion is completely hand written. It is compliant with the July 2014 living standards of HTML and CSS along with the ECMAScript 6 Draft. The lexer also provides an optional lightweight parser hack to allow for fast and efficient conversions without using regular expressions. This hack allows for HTML language transitions, smart detection of regexp and object literals, and provides an advanced contextual understanding of the source code with minimal overhead.

Fusion includes JavaScript (fusion.js) and C# distributions (Gaulinsoft.Web.Fusion.dll)

Language

Fusion utilizes various language components of JavaScript, HTML, and CSS to provide more robust and maintainable code. This superset aims for a very natural development platform that seamlessly transitions between each language. It not only makes source code easier to understand and maintain, but can also remove the need for JavaScript libraries such as jQuery to construct DOM elements using document fragments and innerHTML. Since it's designed to work natively with the DOM, fusion can increase performance by assisting front-end libraries or sometimes eliminating the need for them altogether. Otherwise, an optional lightweight DOM library (3KB, gzipped) is also provided to further simplify your code and make working with the DOM a little more intuitive by extending Element and Array objects.

NEW: Visual Studio 2012 Integration (8/9/2014)

Fusion does not have any releases and is still a work in progress. Please feel free to create an issue if you'd like to propose any other language features.

A live demo is currently available at: http://www.fusionlang.org

npm

npm install fusion

NuGet

Install-Package Gaulinsoft.Web.Fusion
Install-Package Gaulinsoft.Web.Optimization

Contents

• Features
  • Syntax Highlighting
  • Lexical Analysis
    • Arguments
  • Converting Fusion to JavaScript
• Language Features
  • Inline HTML
  • Template Strings
  • Attribute Template Strings
  • Inline CSS Styles
  • Inline CSS Selectors
  • HTML Substitutions
  • CSS Style Substitutions
  • CSS Selector Substitutions
• Setup
  • Node.js
  • ASP.NET
  • Optional DOM Library
• Integration
  • Visual Studio 2012
• Reference
• Futures

Features

Syntax highlighting

fusion.highlight(source [, language [, strict]])

Returns: string of HTML

Lists of CSS classes for each language can be found in the class reference.

Lexical analysis

fusion.tokenize(source [, language [, strict]])

Returns: array of { type, start, end } objects

Lists of type strings for each language can be found in the token reference.

Syntax + Semantic analysis

Eventually...

Arguments

• source
  • string of source code
• language
  • string of source code language
  • supports js, html, css, fjs, fhtml, and fcss
  • defaults to fjs
• strict
  • boolean for strict mode, which forces the js, html, and css languages to be context-free
  • removes <script> and <style> language transitions in html
  • removes template strings and advanced regexp and object literal detection in js
  • defaults to false

Converting Fusion to JavaScript

fusion.transpile(source [, create [, find [, query [, attr [, html]]]]])

Returns: string of JavaScript

Arguments

• source
  • string of fusion source code
• create
  • string for a function similar to createElement()
  • defaults to document.__create
• find
  • string for a function similar to querySelector()
  • defaults to document.__find
• query
  • string for a function similar to querySelectorAll()
  • defaults to document.__query
• attr
  • string for a function similar to setAttribute()
  • defaults to __attr
  • must return a reference to this
• html
  • string for a function similar to innerHTML property
  • defaults to __html
  • must return a reference to this

Language Features

The following list outlines the various language features that are currently available in the fusion superset. Each code snippet presents the output provided by the lexer for syntax highlighting and tokenization followed by that of the parser when transpiling fusion to JavaScript.

Inline HTML

Template strings

Template strings in HTML attributes

Inline CSS styles

Inline CSS selectors

Template substitutions in HTML

Template substitutions in CSS styles

Template substitutions in CSS selectors

Setup

If you'd like to natively use the DOM, the following __attr() and __html() functions must be assigned to Element.prototype for inline HTML and CSS:

Element.prototype.__attr = function(n,v){this.setAttribute(n,v);return this};
Element.prototype.__html = function(c){this.innerHTML=c;return this};

The transpile() function can then be called with the first three optional arguments as follows:

fusion.transpile(source, "document.createElement", "document.querySelector", "document.querySelectorAll")

Or they can be omitted if assigned to Document.prototype:

Document.prototype.__create = Document.prototype.createElement;
Document.prototype.__find   = Document.prototype.querySelector;
Document.prototype.__query  = Document.prototype.querySelectorAll;

Otherwise, an optional lightweight DOM plugin (3KB, gzipped) can be included using fusion-dom.js.

Node.js

npm install fusion

The following example configures Node.js to transpile files in the /fjs directory and cache them in memory when requested through the /static url:

var http    = require('http'),
    through = require('through'),
    st      = require('st'),
    fusion  = require('fusion');

var mount  = st({ url:  '/static', path: __dirname + '/fjs' }),
    filter = through(function(data) { this.emit('data', fusion.transpile(data.toString())) });

http.createServer(function(req, res)
{
    res.filter = filter;

    if (mount(req, res))
        res.setHeader('content-type', 'application/javascript');
})
.listen(1337);

console.log('Server running on port 1337...');

This concept can also be applied with the fusion.highlight() function (and either a text/plain or text/html content-type) to serve up highlighted HTML of the source code.

Settings for the st() function can be found here: https://github.com/isaacs/st

ASP.NET

Install-Package Gaulinsoft.Web.Fusion
Install-Package Gaulinsoft.Web.Optimization

The following example configures ASP.NET MVC to transpile three fjs files in the /Scripts directory and cache them in memory when requested as /bundle.js:

using System.Web.Optimization;
using Gaulinsoft.Web.Fusion;
using Gaulinsoft.Web.Optimization;

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new FusionBundle("~/bundle.js").Include
        (
            "~/Scripts/file1.fjs",
            "~/Scripts/file2.fjs",
            "~/Scripts/file3.fjs"
        ));
    }
}

DOM Library (optional)

The fusion-dom.js file can be included to extend the Element, Array, and Document prototypes. This file does NOT require fusion.js, and the prototype assignments above are also not required when including this library since it already defines __attr() and __html() functions on the Element prototype and __create(), __find(), and __query() functions on the Document prototype.

These prototype functions can be accessed natively or using the @ operator:

@(div.container).__attr('title', null);
@(div.container)@attr('title', null);

This DOM library allows a seamless transition between arrays and elements. The __find() function returns either an element or null, and the __query() function returns either an array of elements or an empty array.

Element

• after(element)
• append(element)
• attr([name] [, value])
• before(element)
• child(index)
• children([selectors])
• contains(element)
• find(selectors)
• first([selectors])
• html([content])
• last([selectors])
• matches(selectors)
• next([selectors])
• parent([selectors])
• prepend(element)
• prev([selectors])
• query(selectors)
• remove()
• replace(element)
• style([property] [, value])
• text([content])
• document
• length
• tag

Array

• attrs([name] [, value])
• children([selectors])
• filter(selectors)
• find(selectors)
• first([selectors])
• html([content])
• last([selectors])
• matches(selectors)
• next([selectors])
• not(selectors)
• parent([selectors])
• prev([selectors])
• query(selectors)
• remove([selectors])
• styles([property] [, value])
• text([content])

Document

• contains(element)
• create(tagOrHTML)
• find(selectors)
• query(selectors)

[
	<div />,
	<div />,
	<pre />
]
@attrs("data-ready", Date.now())
@prependTo(element) // not yet implemented
@styles(
@{
	-webkit-animation: slide ${duration / 1000}s ease-in-out;
});

document
	@query("span")
	@attrs("style", null)
	@first()
		@attr("data-ready", Date.now())
		@after(<span class="second" />);

Integration

Visual Studio 2012

An extension for Visual Studio 2012 can be installed by running extension.vsix. It adds support for syntax highlighting and IntelliSense (eventually) in fusion files. The image below compares the fusion highlighter to the native Visual Studio highlighter. It demonstrates ECMAScript 6 template strings and shows how fusion has advanced detection of regexp and object literals:

Reference

JavaScript tokens and classes

JavaScriptIdentifier
JavaScriptReservedWord
JavaScriptPunctuator
JavaScriptNumber
JavaScriptDoubleQuotedString
JavaScriptSingleQuotedString
JavaScriptTemplateString
JavaScriptRegExp
JavaScriptBlockComment
JavaScriptLineComment
JavaScriptInvalidCharacter
JavaScriptWhitespace

HTML tokens and classes

HTMLText
HTMLStartTagOpen
HTMLStartTagName
HTMLStartTagSolidus
HTMLStartTagWhitespace
HTMLStartTagClose
HTMLStartTagSelfClose
HTMLEndTagOpen
HTMLEndTagName
HTMLEndTagText
HTMLEndTagWhitespace
HTMLEndTagClose
HTMLCharacterReference
HTMLAttributeName
HTMLAttributeOperator
HTMLAttributeValue
HTMLAttributeDoubleQuotedValue
HTMLAttributeSingleQuotedValue
HTMLCommentOpen
HTMLCommentText
HTMLCommentClose
HTMLBogusCommentOpen
HTMLBogusCommentText
HTMLBogusCommentClose
HTMLDOCTYPEOpen
HTMLDOCTYPEString
HTMLDOCTYPEDoubleQuotedString
HTMLDOCTYPESingleQuotedString
HTMLDOCTYPEWhitespace
HTMLDOCTYPEClose
HTMLCDATAOpen
HTMLCDATAText
HTMLCDATAClose

HTML classes

HTMLDOCTYPEDeclaration

CSS tokens and classes

CSSPunctuator
CSSColon
CSSSemicolon
CSSComment
CSSWhitespace

CSS tokens

CSSIdentifier
CSSNumber
CSSDelimiter
CSSDimension
CSSPercentage
CSSComma
CSSDoubleQuotedString
CSSSingleQuotedString
CSSHash
CSSFunction
CSSAtKeyword
CSSMatch
CSSUrl
CSSColumn
CSSUnicodeRange

CSS classes

CSSSelector
CSSAtRule
CSSDeclarationName
CSSDeclarationValue
CSSDeclarationImportant
CSSInvalidCharacters

Fusion tokens and classes

FusionProperty

FusionStartTagOpen
FusionStartTagClose
FusionStartTagSelfClose
FusionEndTagOpen
FusionEndTagClose
FusionAttributeTemplateString
FusionAttributeTemplateStringHead
FusionAttributeTemplateStringMiddle
FusionAttributeTemplateStringTail
FusionSubstitutionOpen
FusionSubstitutionClose

FusionObjectOpen
FusionObjectClose
FusionObjectSubstitutionOpen
FusionObjectSubstitutionClose
FusionSelectorOpen
FusionSelectorClose
FusionSelectorSubstitutionOpen
FusionSelectorSubstitutionClose
FusionStyleSubstitutionOpen
FusionStyleSubstitutionClose

Futures

• editor plugins for syntax highlighting and autocomplete functionality
  • Sublime
  • VS2012
• fusion view engines