| 1 | <!DOCTYPE html>
|
| 2 | <script src="/oxe.js" defer></script>
|
| 3 | <script src="/index.js" type="module" defer></script>
|
| 4 |
|
| 5 | <main>
|
| 6 |
|
| 7 | <h2>Overview</h2>
|
| 8 |
|
| 9 | <strong>Synopsis</strong>
|
| 10 | <p>A mighty tiny web components framework/library.</p>
|
| 11 |
|
| 12 | <strong>Features</strong>
|
| 13 | <ul>
|
| 14 | <li>Small size</li>
|
| 15 | <li>Front end routing</li>
|
| 16 | <li>Configuration based</li>
|
| 17 | <li>Optional module loading</li>
|
| 18 | <li>Optional in browser ES6/ESM module rewrites</li>
|
| 19 | <li>Optional in browser Template string rewrites</li>
|
| 20 | </ul>
|
| 21 |
|
| 22 | <strong>Support</strong>
|
| 23 | <ul>
|
| 24 | <li>IE10~</li>
|
| 25 | <li>IE11</li>
|
| 26 | <li>Chrome</li>
|
| 27 | <li>Firefox</li>
|
| 28 | <li>Safari 7</li>
|
| 29 | <li>Mobile Safari</li>
|
| 30 | <li>Chrome Android</li>
|
| 31 | </ul>
|
| 32 |
|
| 33 | <strong>Polyfill</strong>
|
| 34 | <ul>
|
| 35 | <li>
|
| 36 | <p>
|
| 37 | <a hregf="https://github.com/vokeio/oxe/blob/master/dst/poly.min.js">poly.min.js</a> includes everything need except shadow poly code.
|
| 38 | </p>
|
| 39 | <ul>
|
| 40 | <li>customElements</li>
|
| 41 | <li>DocumentFragment</li>
|
| 42 | <li>URL, Promise, fetch</li>
|
| 43 | <li>HTMLTemplateElement</li>
|
| 44 | <li>Event, CustomEvent, MouseEvent constructors and Object.assign, Array.from</li>
|
| 45 | </ul>
|
| 46 | </li>
|
| 47 | <li>
|
| 48 | <p>
|
| 49 | <a href="https://github.com/vokeio/oxe/blob/master/dst/poly.shadow.min.js">poly.shadow.min.js</a> includes everything.
|
| 50 | </p>
|
| 51 | <ul>
|
| 52 | <li>Webcomponentsjs</li>
|
| 53 | <li>DocumentFragment</li>
|
| 54 | <li>URL, Promise, fetch</li>
|
| 55 | </ul>
|
| 56 | </li>
|
| 57 | </ul>
|
| 58 |
|
| 59 | <strong>Install</strong>
|
| 60 | <ul>
|
| 61 | <li><i>npm install oxe --save</i></li>
|
| 62 | <li>UMD <i>"dst/oxe.min.js"</i></li>
|
| 63 | </ul>
|
| 64 |
|
| 65 | <h2>Example</h2>
|
| 66 | <pre>
|
| 67 | // home.js
|
| 68 | exprt default {
|
| 69 | path: '/',
|
| 70 | title: 'Home',
|
| 71 | component: {
|
| 72 | name: 'r-home',
|
| 73 | template: \`
|
| 74 | <h1 o-text="title"></h1>
|
| 75 | <button o-on-click="greet">Greet</button>
|
| 76 | \`,
|
| 77 | model: {
|
| 78 | greeting: 'Old Hello World'
|
| 79 | },
|
| 80 | methods: {
|
| 81 | greet: function () {
|
| 82 | console.log(this.model.greeting);
|
| 83 | }
|
| 84 | },
|
| 85 | created: function () {
|
| 86 | console.log(this.model.greeting);
|
| 87 | this.model.greeting = 'New Hello World';
|
| 88 | }
|
| 89 | }
|
| 90 | };
|
| 91 | </pre>
|
| 92 |
|
| 93 | <pre>
|
| 94 | // index.js
|
| 95 |
|
| 96 | imprt './elements/e-menu.js';
|
| 97 | imprt Home from './home.js';
|
| 98 |
|
| 99 | Oxe.setup({
|
| 100 | loader: {
|
| 101 | type: 'es' // required to rewrite import exports
|
| 102 | },
|
| 103 | router: {
|
| 104 | routes: [
|
| 105 | Home,
|
| 106 | 'error' // dynamically loads and resolves to /routes/error.js
|
| 107 | ]
|
| 108 | }
|
| 109 | }).catch(console.error);
|
| 110 | </pre>
|
| 111 |
|
| 112 | <pre>
|
| 113 |
|
| 114 | <html>
|
| 115 | <head>
|
| 116 |
|
| 117 | <base href="/">
|
| 118 | <script src="./poly.min.js" defer></script>
|
| 119 | <script src="./oxe.min.js" o-setup="./index.js, es" defer></script>
|
| 120 |
|
| 121 | </head>
|
| 122 | <body>
|
| 123 |
|
| 124 | <e-menu>
|
| 125 | <ul>
|
| 126 | <li><a href="/home">Home</a></li>
|
| 127 | </ul>
|
| 128 | </e-menu>
|
| 129 |
|
| 130 | <o-router></o-router>
|
| 131 |
|
| 132 | </body>
|
| 133 | </html>
|
| 134 | </pre>
|
| 135 |
|
| 136 | </main>
|