Normally Pleasant Mixture
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

oxe

3.9.3 • Public • Published

Oxe

A mighty tiny web components framework/library. Command line interface moved to oxe-cli.

API

Api documentation can be found at API.md.

VERSION

Breaking version changes can be found at VERSION.md.

Features

  • Small size
  • Module loading
  • Front end routing
  • Front end auth handling
  • Automatic pollyfilling if required web components v0
  • In browser ES6/ESM Module and Template String pollyfill support (only export default)

Support

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

Overview

Live examples alexanderelias.github.io/oxe/.

Install

  • npm i oxe --save
  • UMD dist/oxe.min.js
  • UMD with Web Component Pollyfill dist/oxe.polly.min.js
  • Web Component Pollyfill dist/webcomponents-lite.min.js

Example

Oxe.component.define({
    name: 'r-home',
    template: `
        <h1 o-text="title"></h1>
    `,
    model: {
        title: 'Old Title'
    },
    methods: {
        log: function () {
            console.log(this.model.title);
        }
    },
    created: function () {
        this.model.title = 'New Title';
    }
});
Oxe.setup({
    keeper: {
        unauthorized: '/sign-in', // string or function
    },
    fetcher: {
        auth: true, // enables keeper for all fetches
    },
    loader: {
        transformers: {
            js: 'es', // enables ES6 module and template string re-writes
        },
        methods: {
            js: 'fetch'
        },
        loads: [
            './index.css',
            './elements/e-menu.js'
        ]
    },
    router: {
        auth: true, // enables keeper for all routes
        routes: [
            {
                auth: false, // individually disable/eneable auth
                path: '/',
                title: 'Home',
                component: 'r-home',
                load: './routes/r-home.js'
            }
        ]
    }
});
<html>
<head>
 
    <base href="/">
    <script src="./oxe.min.js" o-setup="./index.js, es, fetch" async></script> 
 
</head>
<body>
 
    <e-menu>
        <ul>
            <li><a href="/home">Home</a></li>
        </ul>
    </e-menu>
 
    <o-router></o-router>
 
</body>
</html>

Authors

AlexanderElias

License

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

install

npm i oxe

Downloadsweekly downloads

0

version

3.9.3

license

MPL-2.0

repository

githubgithub

last publish

collaborators

  • avatar