Transforms MIMEtypes to HTML Elements
npm install transformime
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.
`javascript
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);
});
`
`javascript`
> t = new transformime.Transformime();
> p1 = t.transform({'text/html': 'Woo
'}, document)
Promise {
> 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 {
> Woo
Woo
Images get handled as base64 encoded data and become embedded elements.
`javascript`
> // 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
javascript
> var mimes = {'text/html': 'import this', 'text/plain': 'import this'}
> var p3 = t.transform(mimes, document);
> p3.then(function(result){
... console.log(result.mimetype + ": " + result.el.innerHTML)
... })
text/html: import this
`$3
`javascript
> // 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': 'mimetic
'}, idoc);
> p5.then(function(result){
... idoc.querySelector('body').appendChild(result.el);
... })
> idoc.querySelector('body').innerHTML
'mimetic
'
`Documentation
The full API documentation can be found here.Development
`
git clone https://github.com/nteract/transformime
cd transformime
npm install
npm run build
``