| 1 |
|
| 2 | # Oxe
|
| 3 | A mighty tiny web components framework/library.
|
| 4 |
|
| 5 |
|
| 6 | ### API
|
| 7 | Api documentation can be found at [API.md](https://github.com/vokeio/oxe/blob/master/API.md).
|
| 8 |
|
| 9 | ### VERSION
|
| 10 | Breaking version changes can be found at [VERSION.md](https://github.com/vokeio/oxe/blob/master/VERSION.md).
|
| 11 |
|
| 12 | ### Features
|
| 13 | - Small size
|
| 14 | - Front end routing
|
| 15 | - Configuration based
|
| 16 | - Dynamic import polyfill
|
| 17 | - Template string polyfill
|
| 18 | - In browser Template and Import/Export rewrites
|
| 19 |
|
| 20 | ### Polyfill
|
| 21 | - [poly.min.js](https://github.com/vokeio/oxe/blob/master/dst/poly.min.js) includes everything need except shadow poly code.
|
| 22 | - customElements
|
| 23 | - DocumentFragment
|
| 24 | - URL, Promise, fetch
|
| 25 | - HTMLTemplateElement
|
| 26 | - Event, CustomEvent, MouseEvent constructors and Object.assign, Array.from
|
| 27 | - [poly.shadow.min.js](https://github.com/vokeio/oxe/blob/master/dst/poly.shadow.min.js) includes everything.
|
| 28 | - Webcomponentsjs
|
| 29 | - DocumentFragment
|
| 30 | - URL, Promise, fetch
|
| 31 |
|
| 32 |
|
| 33 | ### Support
|
| 34 | - IE10~
|
| 35 | - IE11
|
| 36 | - Chrome
|
| 37 | - Firefox
|
| 38 | - Safari 7
|
| 39 | - Mobile Safari
|
| 40 | - Chrome Android
|
| 41 |
|
| 42 | ### Overview
|
| 43 | Live examples [vokeio.github.io/oxe/](https://vokeio.github.io/oxe/).
|
| 44 |
|
| 45 | ### Install
|
| 46 | - `npm i oxe --save`
|
| 47 | - Script `dst/poly.min.js`
|
| 48 | - UMD `dst/oxe.min.js`
|
| 49 |
|
| 50 | ## Example
|
| 51 | ```js
|
| 52 | // home.js
|
| 53 |
|
| 54 | export default {
|
| 55 | path: '/',
|
| 56 | title: 'Home',
|
| 57 | component: {
|
| 58 | name: 'r-home',
|
| 59 | template: `
|
| 60 | <h1 o-text="title"></h1>
|
| 61 | <button o-on-click="greet">Greet</button>
|
| 62 | `,
|
| 63 | model: {
|
| 64 | greeting: 'Old Hello World'
|
| 65 | },
|
| 66 | methods: {
|
| 67 | greet: function () {
|
| 68 | console.log(this.model.greeting);
|
| 69 | }
|
| 70 | },
|
| 71 | created: function () {
|
| 72 | console.log(this.model.greeting);
|
| 73 | this.model.greeting = 'New Hello World';
|
| 74 | }
|
| 75 | }
|
| 76 | };
|
| 77 | ```
|
| 78 | ```js
|
| 79 | // index.js
|
| 80 |
|
| 81 | import './elements/e-menu.js';
|
| 82 | import Home from './home.js';
|
| 83 |
|
| 84 | Oxe.setup({
|
| 85 | loader: {
|
| 86 | type: 'es' // required to rewrite import exports
|
| 87 | },
|
| 88 | router: {
|
| 89 | routes: [
|
| 90 | Home,
|
| 91 | 'error' // dynamically loads and resolves to /routes/error.js
|
| 92 | ]
|
| 93 | }
|
| 94 | }).catch(console.error);
|
| 95 | ```
|
| 96 | ```html
|
| 97 | <!-- index.html -->
|
| 98 |
|
| 99 | <html>
|
| 100 | <head>
|
| 101 |
|
| 102 | <base href="/">
|
| 103 | <script src="./poly.min.js" defer></script>
|
| 104 | <script src="./oxe.min.js" o-setup="./index.js, es" defer></script>
|
| 105 |
|
| 106 | </head>
|
| 107 | <body>
|
| 108 |
|
| 109 | <e-menu>
|
| 110 | <ul>
|
| 111 | <li><a href="/home">Home</a></li>
|
| 112 | </ul>
|
| 113 | </e-menu>
|
| 114 |
|
| 115 | <o-router></o-router>
|
| 116 |
|
| 117 | </body>
|
| 118 | </html>
|
| 119 | ```
|
| 120 |
|
| 121 | ## Author
|
| 122 | [vokeio](https://github.com/vokeio)
|
| 123 |
|
| 124 | ## License
|
| 125 | [Why You Should Choose MPL-2.0](http://veldstra.org/2016/12/09/you-should-choose-mpl2-for-your-opensource-project.html)
|
| 126 | This project is licensed under the MPL-2.0 License
|