webpack loader for avalonJs
$ npm i avalon-loader
webpack.config.js
var ExtractTextPlugin = require( 'extract-text-webpack-plugin' ); module.exports = { // ... entry: './index.js', module: { loaders: [ { test: /\.avn$/, loader: 'avalon' } ] }, avalon: { loaders: { css: ExtractTextPlugin.extract( 'css' ), js: 'babel-loader?' + JSON.stringify( { presets: [ [ "es2015", { loose: true } ] ], plugins: [ "transform-runtime" ], comments: false } ) } }, plugins: [ // ... new ExtractTextPlugin( 'app.css' ) ] };
index.html
<body> <div id="app" ms-controller="app"> {{name}} <ms-test></ms-test> </div> </body>
index.js
import avalon from 'avalon2' avalon.define( { $id: "app", name: "司徒正美" } ) import './test.avn'
test.avn
<style lang="css"> .container{ border: #f00 2px solid; padding: 10px; } </style> </style> <template> <div class="container"> here is component! <br> {{data}} <ms-inner> <div slot="content">content of inner</div> </ms-inner> </div> </template> <script> import 'inner.avn'; export default { name: 'ms-test', defaults:{ data: "this is data" } } </script>
inner.avn(use scoped style)
<style scoped> .container{ border: green 2px solid; padding: 10px; margin: 10px; } <template> <div class="container" ms-click="@onClick"> {{data}} <slot name="content" /> </div> </template> <script> export default { name: 'ms-inner', defaults:{ data:'inner data. click here', onClick(){ console.log('onclick') } } } </script>
Try it out!