add mahal example

Author: ujjwalguptaofficial

mahal/.babelrc

@@ -0,0 +1,21 @@
+{
+    "presets": [
+        [
+            "@babel/preset-env",
+            {
+                "targets": {
+                    "node": "6.10"
+                }
+            }
+        ]
+    ],
+    "plugins": [
+        [
+            "@babel/plugin-proposal-decorators",
+            {
+                "legacy": true
+            }
+        ],
+        "babel-plugin-parameter-decorator-custom"
+    ]
+}

mahal/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+bin
+dist
+build
+logs

mahal/assets/img/mahal-logo.png

@@ -0,0 +1,3 @@
+module.exports = {
+    apiUrl: "/"
+}

mahal/config/env/development.js

@@ -0,0 +1,6 @@
+if (process.env.NODE_ENV == 'production') {
+    module.exports = require('./production.js');
+}
+else {
+    module.exports = require('./development.js');
+}

mahal/config/env/index.js

@@ -0,0 +1,3 @@
+module.exports = {
+    apiUrl: "/"
+}

mahal/config/env/production.js

@@ -0,0 +1,6 @@
+declare module "*.mahal" {
+    // import Vue from "vue";
+    // export default Vue;
+    const value: any; // Add better type definitions here if desired.
+    export default value;
+}

mahal/config/lang/mahal.config.ts

@@ -0,0 +1,120 @@
+const path = require('path');
+const MahalPlugin = require('mahal-webpack-loader/lib/plugin');
+const HtmlWebPackPlugin = require('html-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const webpack = require('webpack');
+
+const rootFolder = path.join(__dirname, '../../');
+
+const isEnvProduction = process.env.NODE_ENV === "production"
+
+module.exports = {
+    entry: './src/index.js',
+    devtool: 'source-map',
+    mode: process.env.NODE_ENV || "development",
+    module: {
+        rules: [
+            {
+                test: /\.mahal?$/,
+                // loader: 'mahal-webpack-loader',
+                use: {
+                    loader: require.resolve('mahal-webpack-loader')
+                },
+                exclude: /node_modules/
+            },
+            {
+                test: /\.js|.jsx?$/,
+                exclude: /(node_modules|bower_components)/,
+                use: {
+                    loader: 'babel-loader'
+                }
+            },
+            {
+                test: /\.css?$/,
+                use: [
+                    {
+                        loader: MiniCssExtractPlugin.loader,
+                        options: {
+                            esModule: false,
+                        },
+                    },
+                    'css-loader'
+                ],
+            },
+            {
+                test: /\.s[ac]ss$/i,
+                use: [
+                    // Creates `style` nodes from JS strings
+                    // "style-loader",
+                    {
+                        loader: MiniCssExtractPlugin.loader,
+                        options: {
+                            esModule: false,
+                        },
+                    },
+                    // Translates CSS into CommonJS
+                    "css-loader",
+                    // Compiles Sass to CSS
+                    "sass-loader",
+                ],
+            },
+            // Images
+            {
+                test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
+                type: 'asset/resource',
+            },
+            // Fonts and SVGs
+            {
+                test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
+                type: 'asset/inline',
+            },
+        ]
+    },
+    resolve: {
+        extensions: ['.ts', '.js', '.css', '.mahal', '.scss'],
+        alias: {
+            "~": rootFolder,
+            "@": path.join(rootFolder, 'src'),
+            "@config": path.join(rootFolder, 'config'),
+            "@components": path.join(rootFolder, 'src', 'components'),
+            process: "process/browser"
+        },
+    },
+    output: {
+        filename: isEnvProduction ? 'js/[name].[contenthash:8].js' : 'js/[name].js',
+        chunkFilename: isEnvProduction ? 'js/[name].[contenthash:8].chunk.js' : 'js/[name].chunk.js',
+        path: path.resolve(rootFolder, 'dist'),
+        publicPath: '/'
+    },
+    plugins: [
+        new MahalPlugin({
+            lang: 'js'
+        }),
+        new HtmlWebPackPlugin({
+            cache: true,
+            hash: true,
+            template: 'src/index.html',
+            minify: {
+                collapseWhitespace: true,
+                removeComments: true,
+                removeRedundantAttributes: true,
+                removeScriptTypeAttributes: true,
+                removeStyleLinkTypeAttributes: true
+            }
+        }),
+        new CleanWebpackPlugin(),
+        new CopyPlugin({
+            patterns: [{
+                from: './assets/',
+                to: ''
+            }]
+        }),
+        new MiniCssExtractPlugin({
+            filename: isEnvProduction ? 'css/[name].[contenthash:8].css' : 'css/[name].css',
+            chunkFilename: isEnvProduction ? 'css/[name].[contenthash:8].chunk.css' : 'css/[name].chunk.css',
+        }),
+
+    ]
+};

mahal/config/webpack/base.config.js

@@ -0,0 +1,9 @@
+const { merge } = require('webpack-merge');
+const path = require('path');
+const baseConfig = require('./base.config');
+
+module.exports = merge(baseConfig, {
+    devServer: {
+        historyApiFallback: true,
+    },
+});

mahal/config/webpack/dev.config.js

@@ -0,0 +1,45 @@
+const { merge } = require('webpack-merge')
+const baseConfig = require('./base.config')
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+
+const prod = merge(baseConfig, {
+    mode: 'production',
+    devtool: false,
+    output: {
+        publicPath: '/',
+        filename: 'js/[name].[contenthash].bundle.js',
+    },
+    optimization: {
+        minimize: true,
+        minimizer: [`...`, new CssMinimizerPlugin()],
+        runtimeChunk: {
+            name: 'runtime',
+        },
+        splitChunks: {
+            chunks: 'all',
+            maxInitialRequests: Infinity,
+            minSize: 100000,
+            maxSize: 1000000,
+            cacheGroups: {
+                vendor: {
+                    test: /[\\/]node_modules[\\/]/,
+                    name(module) {
+                        // get the name. E.g. node_modules/packageName/not/this/part.js
+                        // or node_modules/packageName
+                        const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
+                        // console.log('package', packageName);
+                        // npm package names are URL-safe, but some servers don't like @ symbols
+                        return `npm.${packageName.replace('@', '')}`;
+                    },
+                },
+            },
+        },
+    },
+    performance: {
+        hints: false,
+        maxEntrypointSize: 512000,
+        maxAssetSize: 512000,
+    },
+})
+
+module.exports = prod;