Overview

Synopsis

A mighty tiny web components framework/library.

Features

Small size
Front end routing
Configuration based
Optional module loading
Optional in browser ES6/ESM module rewrites
Optional in browser Template string rewrites

Support

IE10~
IE11
Chrome
Firefox
Safari 7
Mobile Safari
Chrome Android

Polyfill

poly.min.js includes everything need except shadow poly code.
- customElements
- DocumentFragment
- URL, Promise, fetch
- HTMLTemplateElement
- Event, CustomEvent, MouseEvent constructors and Object.assign, Array.from
poly.shadow.min.js includes everything.
- Webcomponentsjs
- DocumentFragment
- URL, Promise, fetch

Install

npm install oxe --save
UMD "dst/oxe.min.js"

Example

    	// home.js
    	exprt default {
    		path: '/',
    		title: 'Home',
    		component: {
    			name: 'r-home',
    			template: \`
    				<h1 o-text="title"></h1>
    				<button o-on-click="greet">Greet</button>
    			\`,
    			model: {
    				greeting: 'Old Hello World'
    			},
    			methods: {
    				greet: function () {
    					console.log(this.model.greeting);
    				}
    			},
    			created: function () {
    				console.log(this.model.greeting);
    				this.model.greeting = 'New Hello World';
    			}
    		}
    	};

    	// index.js

    	imprt './elements/e-menu.js';
    	imprt Home from './home.js';

    	Oxe.setup({
    		loader: {
    			type: 'es' // required to rewrite import exports
    		},
    		router: {
    			routes: [
    				Home,
    				'error' // dynamically loads and resolves to /routes/error.js
    			]
    		}
    	}).catch(console.error);

        
        <html>
        <head>

            <base href="/">
            <script src="./poly.min.js" defer></script>
            <script src="./oxe.min.js" o-setup="./index.js, es" defer></script>

        </head>
        <body>

            <e-menu>
                <ul>
                    <li><a href="/home">Home</a></li>
                </ul>
            </e-menu>

            <o-router></o-router>

        </body>
        </html>