A plugin for Webpack

I’d like to know when an official plugin is released for this. So, maybe provide an update in this issue when there is one?

Here’s a very rudimentary plugin for Webpack 4 based on your LintCommandRunner:

import { Container, BindingScopeEnum, injectable } from "inversify";
import { Compiler, Plugin } from "webpack";
import {
    MessageHandler,
    Failure
} from "@fimbul/ymir";
import {
    CachedFileSystem,
    createCoreModule,
    createDefaultModule,
    FormatterLoader,
    LintOptions,
    Runner
} from "@fimbul/wotan";

export interface LintCommand extends LintOptions {
    formatter: string | undefined;
}

// https://github.com/fimbullinter/wotan/blob/be4483d5885c88a9640869203e46aba58d49e8f7/packages/wotan/src/commands/lint.ts
@injectable()
class LintCommandRunner {
    constructor(
        private runner: Runner,
        private formatterLoader: FormatterLoader,
        private logger: MessageHandler,
        private fs: CachedFileSystem,
    ) {
    }
    public run(options: LintCommand) {
        const formatter = new (this.formatterLoader.loadFormatter(options.formatter === undefined ? 'stylish' : options.formatter))();
        const result = this.runner.lintCollection(options);
        let success = true;
        if (formatter.prefix !== undefined)
            this.logger.log(formatter.prefix);
        for (const [file, summary] of result) {
            if (summary.failures.some(isError))
                success = false;
            const formatted = formatter.format(file, summary);
            if (formatted !== undefined)
                this.logger.log(formatted);
            if (options.fix && summary.fixes)
                this.fs.writeFile(file, summary.content);
        }
        if (formatter.flush !== undefined) {
            const formatted = formatter.flush();
            if (formatted !== undefined)
                this.logger.log(formatted);
        }
        return success;
    }
}

function isError(failure: Failure) {
    return failure.severity === 'error';
}

export default class WotanWebpackPlugin implements Plugin {
    public constructor(private options: LintCommand) {
    }

    public afterCompile(): void {
        const container = new Container({defaultScope: BindingScopeEnum.Request});
        container.load(createCoreModule({}), createDefaultModule());
        container.bind<LintCommandRunner>(LintCommandRunner)
            .toSelf();
        container.get(LintCommandRunner)
            .run(this.options);
    }

    public apply(compiler: Compiler): void {
        compiler.hooks
            .done
            .tap("WotanWebpackPlugin", this.afterCompile.bind(this));
    }
}

Usage:

new WotanWebpackPlugin({
    config: resolve(paths.tools, "wotan.yaml"),
    project: resolve(paths.src, "tsconfig.json"),
    files: [],
    exclude: [],
    fix: false,
    extensions: undefined,
    formatter: undefined
})

[ajafff]

Thank you for the feature request and this example code. I think a webpack plugin would be an awesome addition.

I don’t have any experience with writing webpack plugins. So here are some random thoughts after having a first look at it:

• instead of reading all files from disk again (that’s what the default NodeFileSystem does), there should be a way to use the already loaded files from the current webpack compilation
• it should read and parse .fimbullinter.yaml file like the CLI to load plugin modules and use it for default values
• is there a way to add a watch for files loaded by the linter (tsconfig.json, .wotanrc.yaml, .fimbullinter.yaml, …) so that a new linting run is triggered if the config changes? – I looked it up, you can
• is it allowed (or even encouraged) to write the fixed files directly to disk?
• is there a way to use the same project settings as the typescript-loader used to load the sources?

I’ll look into exposing some utilities so that there’s no need to duplicate all the code.

[ljani]

They’re discussing tslint integration at https://github.com/facebook/create-react-app/issues/5641.

From what I can tell at the moment, yes, the integration should be a webpack plugin. Currently create-react-app is aiming for tslint support via fork-ts-checker-webpack-plugin, which has some form of tslint support.

If the language server plugin could report warnings/errors during build, that would be ideal, but I’ve understood it’s not possible?

EDIT: To be clear, there is no support for adding arbitrary webpack plugins in create-react-app without eject. I don’t know what would be the proper integration at the moment, but it’s likely to be related to webpack.