regularjs-loader

webpack loader for regularjs

Usage no npm install needed!

<script type="module">
  import regularjsLoader from 'https://cdn.skypack.dev/regularjs-loader';
</script>

README

regularjs-loader npm package

webpack loader for regularjs

Here is a simple example using regularjs-loader check it out

Installation

$ npm i regularjs-loader

Usage

webpack.config.js

var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    // ...
    entry: './index.js',
    module: {
        loaders: [
            {
                test: /\.rgl$/,
                loader: 'regularjs'
            }
        ]
    },
    regularjs: {
        loaders: {
            css: ExtractTextPlugin.extract( 'css' ),
            mcss: ExtractTextPlugin.extract( 'css!mcss' )
        }
    },
    plugins: [
        // ...
        new ExtractTextPlugin( 'app.css' )
    ]
};

index.js

import App from './App.rgl';
new App().$inject( document.body );

App.rgl

<style>
    html {
        background-color: #F2F2F2;
    }
</style>

<style lang="mcss" scoped>
    .outter {
        .inner {
            color: #000;
        }
    }
</style>

<template>
    <div class="outter">
        <div class="inner">RegularJs is Awesome <Button text="get it"></Button></div>
    </div>
</template>

<script>
    import Button from './Button.rgl';

    // export options here
    export default {
        // shorthand for registering components in current component scope
        components: {
            'Button': Button,
        },
        init() {
            console.log( 'App' );
        }
    }
</script>

Button.rgl

<template>
    <button>{ text }</button>
</template>

<script>
    import Base from 'path/to/Base.rgl';

    // or export component constructor here
    export default Base.extend({
        init() {
            console.log( 'Button' );
        }
    });
</script>

Try it out!

Related

Thanks