jsonml-ext v1.0.2
JSON Markup Language - Extended
Extended renderer for JSON Markup Language. Renders JSONML to a HTML string with addition of Emmet's abbreviation expander
Motivation
This project exists to compile JSON Markup language to HTML with the added benefit of using Emmet's abbreviations to simplify the code and workflow.
Installation
yarn add jsonml-ext
This will install the package into your project.
Usage & options
Read the JSONML website for more information on JSONML.
Once installed, you can import and render JSON ML arrays into HTML strings:
const {compile} = require('jsonml-ext');
compile(['div']);
// <div></div>
compile(['button', {class: 'red', disabled: true}]);
// <button class="red" disabled='true'></button>
compile(['div', ['a', {target: '_blank' }]]);
// <div><a href=' target='_blank'></a></div>
The JML Item
The JML item passed in contains up to 3 items:
1. The Emmet abbreviation to be expanded. EG: a#clickme[target='_blank']
2. The attributes as a JSON object, OR a nested array of JML items
3. Array of JML items. This item can only be passed if the attributes in item 2 was passed
EG: Simple usage
// Pass in only the first item
compile(['div#test'])
// '<div id='test'></div>'
Text content usage
// Pass in only the first item
compile(['div#test', 'Lorem Ipsum'])
// '<div id='test'>Lorem Ipsum</div>'
Attribute usage
// Pass in the first item and it's attributes
compile(['div[class="red"]', {class: 'override'}, 'Lorem Ipsum'])
// '<div class="override">Lorem Ipsum</div>'
Nested variation 1
// Omit the attributes
compile(['div[class="red"]', ['span', 'Nested content']])
// '<div class="red"><span>Nested content</span></div>'
Nested variation 2
// Pass in the first item, and it's attributes as the SECOND item. The remaining
// items are just JMLItems
compile(['div[class="red"]', {class: 'override'}, ['span']])
// '<div class="override"><span></span></div>'
Siblings
// You can pass as many JMLItems at the end of the array, and they will be added
// as siblings
compile(['div[class="red"]', ['span.sibling1'], 'text content', ['span.sibling2']])
// '<div class="override"><span class="sibling1"></span>text content<span class="sibling2"></span></div>'
Contributions
All pull requests and contributions are most welcome. Let's make the internet better!
Moving forward / TODO
- Add tests
Issues
If you find a bug, please file an issue on the issue tracker on GitHub.
Credits
This project is built and maintained by Tristan Matthias.