mix extension

extension.ts

import { ClassComponent } from 'laravel-mix/types/component';
import { resolve } from 'path';
import { Options as TSConfig } from 'ts-loader';
import { ModuleKind, ScriptTarget } from 'typescript';
import * as webpack from 'webpack';
import { TransformOptions } from '@babel/core';

let isProd = mix.inProduction();
let isDev  = !mix.inProduction();
declare module 'laravel-mix/types/index' {
    interface Api {
        streams(options?: StreamsMixExtensionOptions): this;
    }
}

interface StreamsMixExtensionOptions {
    name:[string,string]
    ts?: {
        configFile?: string
        declarationDir?: string
        declaration?: boolean
    };
    tsConfig?:Partial<TSConfig>

}

class StreamsMixExtension implements ClassComponent {
    options: StreamsMixExtensionOptions;

    public register(options: StreamsMixExtensionOptions) {
        this.options = {
            tsConfig: {},
            ...options,
            ts: {
                ...options.ts || {}
            },
        };
    }

    public boot() {
        mix.options({
            terser: {
                terserOptions: {
                    keep_classnames: true,
                    keep_fnames    : true,
                },
            },
        });
    }

    public name() {return 'streams';}

    public babelConfig(): TransformOptions {
        return {
            babelrc   : false,
            configFile: false,

            compact   : isProd,
            sourceMaps: isDev,
            comments  : isDev,
            presets   : [
                [ '@babel/preset-env', {
                    'useBuiltIns': false,
                    'targets'    : '> 0.25%, not dead',
                } ],
            ],
            plugins   : [
                '@babel/plugin-syntax-dynamic-import',
            ],
        };
    }

    public tsConfig(): Partial<TSConfig> {
        return {
            transpileOnly  : true,
            logLevel       : 'INFO',
            logInfoToStdOut: true,
            happyPackMode  : true,
            configFile     : resolve(process.cwd(), 'webpack.tsconfig.json'),
            compilerOptions: {
                target              : ScriptTarget.ESNext,
                module              : ModuleKind.ESNext,
                declaration         : false,
                declarationDir      : resolve(process.cwd(), 'resources/public/types'),
                importHelpers       : true,
                sourceMap           : isDev,
                removeComments      : isProd,
                experimentalWatchApi: true,

            },
        };
    };

    public webpackConfig(config: webpack.Configuration) {

        config.devtool      = isDev ? 'inline-cheap-module-source-map' : false;
        config.output       = {
            path                                 : resolve('./resources/public'),
            filename                             : 'js/[name].js',
            chunkFilename                        : 'js/chunk.[name].js',
            library                              : {
                name: [ 'streams', 'core' ],
                type: 'window',
            },
            publicPath                           : '/vendor/streams/core/',
            devtoolFallbackModuleFilenameTemplate: 'webpack:///[resource-path]?[hash]',
            devtoolModuleFilenameTemplate        : info => {
                var $filename = 'sources://' + info.resourcePath;
                $filename     = 'webpack:///' + info.resourcePath; // +'?' + info.hash;
                if ( info.resourcePath.match(/\.vue$/) && !info.allLoaders.match(/type=script/) && !info.query.match(/type=script/) ) {
                    $filename = 'webpack-generated:///' + info.resourcePath; // + '?' + info.hash;
                }
                return $filename;
            },
        };
        config.optimization = {
            ...config.optimization,
            moduleIds: 'named',
            chunkIds : 'named',
            minimize : isProd,
        };
    }

    public webpackRules(): webpack.RuleSetRule | webpack.RuleSetRule[] {
        return [ {
            test   : /\.tsx?$/,
            exclude: /node_modules\//,
            use    : [
                { loader: 'babel-loader', options: this.babelConfig() },
                { loader: 'ts-loader', options: this.tsConfig() },
            ],
        } ];
    }
}

mix.extend('streams', new StreamsMixExtension());