Polyfillr
  • API
  • GitHub
  • Polyfillr API

    API by Example for everyone.

    The Polyfillr API tries to stay as simple as possible. We value automation by convention more than flexibility for everything.

    Click the Console Icon on the right to toggle the Demo Console.

    Use this Textfield to search the API:

    Polyfillr Console API

    As the Polyfillr.Console supports multiple contexts, the default (global) console instance is identical to a new Console('default').

    new Console(identifier);

    The Console API allows to have multiple Console contexts in parallel. Each context is uniquely identified by an identifier and accessible by multiple instances (handles).

    
    					demo = new Console('demo');
    
    					demo.clear();
    					demo.log('Hello world');
    				
    Console.prototype.assert(condition, ...arguments)

    The assert() method will log the following arguments only if the condition parameter was falsy.

    
    					demo = new Console('demo');
    					rand = Math.random();
    
    					demo.clear();
    					demo.assert(false, 'This will always be shown');
    					demo.assert(rand >= 0.5, 'Math.random() is greater than 0.5');
    					demo.assert(true,  'This will never be shown');
    				
    Console.prototype.clear()

    The clear() method will clear the current context of the console.

    
    					demo = new Console('demo');
    
    					demo.clear();
    					demo.log('This will be cleared.');
    					demo.clear();
    					demo.log('This will be not.');
    				
    Console.prototype.debug(...arguments)

    The debug() method is a symbolic link to log() and is deprecated.

    
    					demo = new Console('demo');
    
    					demo.clear();
    					demo.debug('Test');
    					demo.log('Test');
    				
    Console.prototype.info(...arguments) Console.prototype.log(...arguments) Console.prototype.warn(...arguments) Console.prototype.error(...arguments)

    The Console API in general allows multiple log levels that are highlighted differently and have the same method parameter syntax.

    
    					demo = new Console('demo');
    
    					demo.clear();
    					demo.info('Kernel version 2323.12828494');
    					demo.log('This is a log entry.');
    					demo.warn('This is a warning.');
    					demo.error('This is an error.');
    
    					// All methods can handle all data types
    					demo.info(12.34, null, undefined, "string");
    					demo.log({ foo: 'bar' });
    					demo.warn([ 1, 2, 3, 4 ]);
    					demo.error(new Error('Error with stacktrace'));
    				
    Console.prototype.group(label) Console.prototype.groupEnd()

    The group() and groupEnd() methods allow to further put calls in between into groups. Each context of a console can have multiple groups.

    Note that contexts can be used asynchronously while groups cannot be used in that manner.

    
    					demo = new Console('demo');
    
    					demo.clear();
    					demo.group('This is a group');
    					demo.log('Hello there.');
    					demo.groupEnd();
    					demo.log('This is outside.');
    				
    Console.prototype.table(data [,labels])

    The table() method allows to plot Array or Object data in a pretty and easy-to-understand manner.

    
    					demo = new Console('demo');
    
    					demo.clear();
    					demo.table({
    						first:  { foo: 1, bar: 2 },
    						second: { foo: 3, bar: 4 }
    					});
    
    					demo.table([
    						{ foo: 1, bar: 2, qux: 'this'    },
    						{ foo: 2, bar: 3, qux: 'is'      },
    						{ foo: 3, bar: 4, qux: 'an'      },
    						{ foo: 4, bar: 5, qux: 'example' }
    					], [ 'foo', 'qux', 'bar' ]);
    				
    Console.prototype.time(label) Console.prototype.timeEnd(label)

    The time() and timeEnd() methods allow to stop the time between two calls. It can be used for asynchronous debugging, so you know how much time has passed (in milliseconds).

    
    					demo = new Console('demo');
    
    					demo.clear();
    					demo.time('test');
    
    					setTimeout(function() {
    						demo.log('Test has ended.');
    						demo.timeEnd('test');
    					}, 1000);
    				

    Polyfillr ECMAScript API

    This API is too much to search efficiently through or to talk about. If you want to know what we've already implemented, take a look at the README.md in the Polyfillr ECMAScript Repository.

    Polyfillr Components API

    As the Polyfillr.Component is very flexible in its usage, these API docs focus on help you write your own Web Components that are used via HTML Imports.

    If you have trouble figuring out the relations between HTML files or APIs, you are welcome to take a look at the Polyfillr Boilerplate instead.

    (Component) Polyfillr.define(identifier, template)

    The define() method is called from an imported HTML document. It is used to create new Polyfillr.Component instances and to map them correctly into the DOM with all legacy fallbacks.

    Important Note: The define() method returns null if the Component was already created to prevent recursive cycle loops in wrongly done imports.

    Content of ./index.html:

    
    					<!DOCTYPE html>
    					<!-- ./index.html --!>
    					<head>
    						<script src="./polyfillr.all.es6.js"></script>
    						<link rel="import" href="./my-component.html">
    					</head>
    					<body>
    						<my-component>
    							Awesome, my first Web Component Element!
    						</my-component>
    					</body>
    				

    Content of ./my-component.html:

    
    					<!DOCTYPE html>
    					<!-- ./my-component.html --!>
    					<body>
    					<template id="template">
    						<style>
    						:host { color: black; background: blue; }
    						::content b { color: white; }
    						</style>
    						<content>
    							<b>I'm here by default</b>
    						</content>
    					</template>
    					<script>
    					(function(doc) {
    
    						let template  = doc.querySelector('#template');
    						let component = Polyfillr.define('my-component', template);
    						if (component !== null) {
    
    							component.addEventListener('create', function(e) {
    
    								console.log('Element created!', e.target);
    
    								let b = e.target.querySelector('b');
    								if (b !== null) {
    									b.innerHTML = "I'm not default anymore.";
    								}
    
    							}, true);
    
    							component.addEventListener('destroy', function(e) {
    								console.log('Element destroyed!', e.target);
    							}, true);
    
    							component.addEventListener('render', function(e) {
    								// e.detail = (Object || null)
    								console.log('Element rendering Model!', e.detail);
    							}, true);
    
    							component.addEventListener('change', function(e) {
    								// e.detail = { attribute, oldvalue, newvalue }
    								console.log('Element changed attributes!', e.detail);
    							}, true);
    
    						}
    
    					})(document.currentScript.ownerDocument);
    					</script>
    					</body>
    				
    (Component) Polyfillr.get(identifier)

    The get() method allows to get an already existing Polyfillr.Component definition by its identifier.

    
    					demo = new Console('demo');
    					foo  = Polyfillr.define('my-whatever', null);
    					bar  = Polyfillr.get('my-whatever');
    
    					demo.log(foo === bar);
    					demo.log(foo instanceof Polyfillr.Component);
    					demo.log(foo);
    					demo.log(bar instanceof Polyfillr.Component);
    					demo.log(bar);
    				
    (Element) Polyfillr.create(identifier)

    The create() method is a shorthand method for quickly creating Element instances that are automatically watched and integrated by our "Virtual DOM" observers.

    You can also use the Component.prototype.create() method, which does the same.

    
    					element = Polyfillr.create('my-component');
    					element.fireEventListener('custom', { foo: 'bar' });
    					document.body.appendChild(element);
    				
    Polyfillr.destroy(element)

    The destroy() method is a shorthand method for quickly destroying Element instances.

    You can also use the Component.prototype.destroy() method, which does the same.

    
    					element = document.querySelector('my-component');
    					Polyfillr.destroy(element);
    					document.body.removeChild(element);
    				
    Polyfillr.render(element [, data])

    The render() method is a shorthand method for quickly rendering Element instances with a given (Model) data.

    You can also use the Element.fireEventListener('render', data) method, which does the same.

    
    					element = Polyfillr.create('my-component');
    					model   = { foo: 'bar' };
    
    					Polyfillr.render(element, model);
    
    					// Alternative syntax:
    					// element.fireEventListener('render', model);