Transforms MIMEtype+data to HTML Elements
Intended to be used in context of Jupyter and IPython projects, particularly by display areas.
npm install transformime
Transformime works in the browser (via browserify), converting a mimebundle (MIME type + data) into HTML Elements. transformime.transform
returns promises for all the HTMLElements.
var transformime = require("transformime");
var transform = transformime.createTransform();
transform({
"text/plain": "Hello, World!",
}).then(function onSuccess(result) {
mimeType = result.mimetype;
htmlElement = result.el;
console.log("Tranformime: Result:", mimeType, htmlElement);
}, function onError(err) {
console.error("Transformime: Error:", err);
});
> t = new transformime.Transformime();
> p1 = t.transform({'text/html': '<h1>Woo</h1>'}, document)
Promise { <pending> }
> p1
Promise {
{ mimetype: 'text/html',
el:
{ _events: {},
_childNodes: [Object],
_childNodesList: null,
_ownerDocument: [Object],
_childrenList: null,
_version: 1,
_parentNode: null,
_memoizedQueries: {},
_readonly: false,
_namespaceURI: 'http://www.w3.org/1999/xhtml',
_prefix: null,
_localName: 'div',
_attributes: {},
_settingCssText: false,
_style: [Object] } } }
> p1.then(function(result){
... console.log(result.el.innerHTML);
... console.log(result.el.textContent);
... });
Promise { <pending> }
> <h1>Woo</h1>
Woo
Images get handled as base64 encoded data and become embedded elements.
> // Send an image over
> p2 = t.transform({'image/png': 'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'}, document)
> p2.then(function(result){
... console.log(result.el.src);
... })
data:image/png;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
> var mimes = {'text/html': '<code>import this</code>', 'text/plain': 'import this'}
> var p3 = t.transform(mimes, document);
> p3.then(function(result){
... console.log(result.mimetype + ": " + result.el.innerHTML)
... })
text/html: <code>import this</code>
> // Create an arbitrary iframe and slap it in the body of the document
> var iframe = document.createElement("iframe");
> document.querySelector('body').appendChild(iframe);
> var idoc = iframe.contentDocument;
> // Pass the iframe's document as the document context for the created element
> var p5 = t.transform({'text/html': '<h1>mimetic</h1>'}, idoc);
> p5.then(function(result){
... idoc.querySelector('body').appendChild(result.el);
... })
> idoc.querySelector('body').innerHTML
'<div><h1>mimetic</h1></div>'
The full API documentation can be found here.
git clone https://github.com/nteract/transformime
cd transformime
npm install
npm run build