Package Exports

eno-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (eno-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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 Eno 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 Eno!')
  }
  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.