oxe

A mighty tiny web components framework/library

Usage no npm install needed!

<script type="module">
  import oxe from 'https://cdn.skypack.dev/oxe';
</script>

README

Total alerts Language grade: JavaScript

Oxe

A mighty tiny web components framework/library.

Project Goal

  • Easy learning curve
  • Feels like JS and HTML not a framework

Feature Highlight

  • Zero config smart front end routing
  • Dynamic ES6/ESM module rewrites (Use ES6 modules in browsers that don't have native support)
  • Dynamic Template string rewrites (Use template strings in browsers that don't have native support)

Polyfill You Might Need

  • customElements
  • URL, Promise, fetch
  • TMLTemplateElement
  • Event, CustomEvent

Browser Support

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

Overview

Live examples vokeio.github.io/oxe/.

Install

  • npm i oxe --save
  • UMD pro/oxe.min.js

Component Example

// my-component.js

const { Component } = Oxe;

export default MyComponent extends Component {
    static attributes = []
    adopt = false
    shadow = false
    css = '
    '
    html = `
        <h1>{{title}}</h1>
        <button onclick="{{greet()}}">Greet</button>
    `
    data = {
        greeting: '',
        greet () { this.greeting = 'Hola Mundo'; }
    }
    async adopted () {}
    async attributed () {}
    async disconnected () {}
    async connected () {
        this.data.greeting = 'Hello World';
    }
}

Route Example

// routes/index.js

const { Component } = Oxe;

export default Index extends Component {
    title = 'Index Route'
    description = 'Index Description'
    html = `<my-component></my-component>`
    async connected () {
        console.log('route connected');
    }
}

// index.js


await Oxe.define([
    './my-component.js'
]); // or import module and use window.customElements.define();

await Oxe.router.setup({
    target: 'main',
    folder: 'routes'
});

<!-- index.html -->
<html>
<head>
    <script src="/oxe.min.js" defer></script>
    <script src="/index.js" defer></script>
</head>
<body>
    <main></main>
</body>
</html>

Author

vokeio

License

Why You Should Choose MPL-2.0 This project is licensed under the MPL-2.0 License