https://github.com/mariuslundgard/transclusion

An HTML5 superset parser/compiler for JavaScript.
https://github.com/mariuslundgard/transclusion

Last synced: 2 days ago
JSON representation

An HTML5 superset parser/compiler for JavaScript.

• Host: GitHub
• URL: https://github.com/mariuslundgard/transclusion
• Owner: mariuslundgard
• Created: 2014-01-10T17:23:36.000Z (almost 11 years ago)
• Default Branch: develop
• Last Pushed: 2015-02-23T13:30:49.000Z (over 9 years ago)
• Last Synced: 2024-10-09T22:05:10.501Z (30 days ago)
• Language: JavaScript
• Homepage: http://mariuslundgard.com/projects/transclusion
• Size: 523 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
transclusion

============

This is the alpha version of Transclusion.js (available for development and demo use).

Try the demo or check out ```mariuslundgard/folio``` for advanced usage.

### Still to be implemented

* Objects and arrays

* Functions

* Directive rules for various HTML5 elements

## Introduction

Transclusion is a concept for a HTML5 preprocessor (currently implemented in alpha-stage for both PHP and Javascript). It’s an alternative to – and more importantly an extension of – plain vanilla HTML5.

For instance, Transclusion generates valid HTML5 out of minimal markup:

```

Welcome to my page

Hello, world!

```


Which yields:

```html

  Welcome to my page

  
Hello, world!


```

More interestingly, Transclusion enables HTML5 to do things such as printing variables and looping:

```



  
[[ keyword ]]



```


… as well as marking up data transclusions:

```

```

The example above will yield:

```html

  

  

  

  

```

## Directives

Similar to AngularJS’ concept of directives, Transclusion can be extended to manage custom elements:

```js

var doc = new transclusion.Document(),

    api = require('api'); // `api`: some client or server side api for

                          // retrieving stored documents

// add a custom directive called `transclude`

doc.addDirective('transclude', {

  allowedParentElements: [ 'body', '#flow' ],

  compile: function (node, compiler) {

    var src = node.getAttribute('src'),

        select = node.getAttribute('select');

    if (src && src = api.getDocument(src)) {

      if (! select) {

        return compiler.compileNodes(src.bodyElement.childNodes);

      }

      return compiler.compileNodes(src.querySelectorAll(select));

    }

    return compiler.compileNodes(node.childNodes);

  }

});

```

The markup now supports `````` elements:

```

  
This is the fallback content.


```

And the way to compile this in JavaScript:

```js

// continues from the examples above ...

doc.setInput(

  '\n' +

  '  
This is the fallback content
\n' +

  '');


var html = doc.compile();

```