README
Install
webpack loader for Omi Single-File Components
You can use npm install or git clone it
npm install eno-loader --save-dev
What is Omi Loader?
eno-loader
is a loader for webpack that allows you to author Omi components in a format called Single-File Components
<template lang='html'>
<header onClick="${this.test}">${this.data.title}</header>
</template>
<script>
import style from './_oHeader.css'
export default {
css() {
return style
}
test(){
console.log('Hello button!')
}
install() {
this.data = {
title: "Omi"
};
}
};
</script>
<style>
header {
height: 50px;
background-color: #07c160;
color: white;
text-align: center;
line-height: 50px;
width: 100%;
}
</style>
There are many cool features provided by eno-loader
:
- Allows using other webpack loaders for each part of a Omi component, for example Sass for
<style lang="scss">
and JSX/HTML for<template lang="html">
; - Allows custom blocks in a
.omi
or.eno
file that can have custom loader chains applied to them Here Online Demo; - Treat static assets referenced in
<style>
and<template>
as module dependencies and handle them with webpack loaders (Such as htm, to-string-loader); - Simulate scoped CSS for each component (Use Shadow DOM);
- State-preserving hot-reloading during development.
In a nutshell, the combination of webpack and eno-loader
gives you a modern, flexible and extremely powerful front-end workflow for authoring Omi.js applications.