A mighty tinny web components framework/library

by Vue.js Examples

Oxe

A mighty tiny web components framework/library.

API

Api documentation can be found at API.md.

VERSION

Breaking version changes can be found at VERSION.md.

Features

  • Small size
  • Front end routing
  • Configuration based
  • Dynamic import polyfill
  • Template string polyfill
  • In browser Template and Import/Export rewrites

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

Support

  • IE10~
  • IE11
  • Chrome
  • Firefox
  • Safari 7
  • Mobile Safari
  • Chrome Android

Overview

Live examples vokeio.github.io/oxe/.

Install

  • npm i oxe --save
  • Script dst/poly.min.js
  • UMD dst/oxe.min.js

Example

// home.js

export 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

import './elements/e-menu.js';
import 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);

<!-- index.html -->

<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>

GitHub