[@types/webpack] loader options are not typed

[reverofevil]

I've made a feature request to TypeScript to add typeof import() by literal string type. Currently it's awaiting feedback, and I thought it would be wise to ask authors of typings it might mostly affect to give it.

As I understand, webpack lacks typing for loaders, because loaders get imported dynamically, and there is no way to put types there without this new language feature. Here's how it could look like:

// example-loader1.d.ts
declare module 'example-loader1' {
    const result: (this: LoaderContext<{limit: number, name: string}>, source: string) => string;
    export = result;
}

// example-loader2.d.ts
declare module 'example-loader2' {
    const result: (this: LoaderContext<{publicPath: string}>, source: string) => string;
    export = result;
}

// hacks
type _FakeTypeofImportMap = {
    'example-loader1': typeof import('example-loader1');
    'example-loader2': typeof import('example-loader2');
    'not-a-loader': {},
}
type _FakeTypeofImport<ModuleName extends string> =
    ModuleName extends keyof _FakeTypeofImportMap
        ? _FakeTypeofImportMap[ModuleName]
        : never

// webpack.d.ts
// loader API v2
type RawSourceMap = never // stub
type Buffer = never // stub

interface LoaderContext<Options> {
    query: any; // string for Options
    // ...
}

interface Loader<Options = never> {
    (this: LoaderContext<Options>, source: string | Buffer, sourceMap?: RawSourceMap): string | Buffer | void | undefined;
    // ...
}

// webpack()
type LoaderRule<LoaderName> = LoaderName extends string ? {
    [L in LoaderName]: {
        readonly loader: L;
        readonly options: string extends L
            ? string | Record<string, any>
            : Readonly<
                _FakeTypeofImport<LoaderName> extends ((this: LoaderContext<infer This>, ...args: infer A) => any)
                    ? This
                    : never
                >;
    }
}[LoaderName] : never

interface OneOfRule<LoaderName> {
    readonly oneOf?: readonly RuleSetRule<LoaderName>[];
}

type RuleSetRule<LoaderName> =
    | LoaderRule<LoaderName>
    | OneOfRule<LoaderName>

interface ModuleOptions<LoaderName> {
	readonly rules?: readonly RuleSetRule<LoaderName>[];
}

interface Configuration<LoaderName> {
    readonly module?: ModuleOptions<LoaderName>;
    // ...
}

type CollectTuple<T extends readonly any[]> = {
    readonly [L in Extract<keyof T, number>]: Collect<T[L]>
}[Extract<keyof T, number>]

type Collect<T> =
    T extends {readonly oneOf: readonly any[]}
    ? CollectTuple<T["oneOf"]>
    : T extends {readonly loader: infer K}
    ? K
    : never

type CollectRules<T> = T extends {readonly module?: {readonly rules?: infer R}}
    ? R extends readonly any[]
        ? CollectTuple<R>
        : never
    : never

type Compiler = any // stub
declare function webpack1<Config, LoaderName = CollectRules<Config>>(
    options: Config extends Configuration<LoaderName> ? Config : Configuration<string>,
): Compiler;
declare function webpack2<LoaderName>(
    options: Configuration<LoaderName>,
): Compiler;

const c: Configuration<string> = {
    module: {
        rules: [
            {oneOf: [
                {
                    loader: 'example-loader1',
                    options: {limit: 5, name: 'blah'},
                },
                {
                    loader: 'example-loader2',
                    options: {publicPath: 5},
                },
            ]}
        ],
    }
} as const;

// webpack.config.ts
// no annotation, backup to string
webpack1({
    module: {
        rules: [
            {oneOf: [
                {
                    loader: 'example-loader1',
                    options: {limit: 5, name: 'blah'},
                },
                {
                    loader: 'example-loader2',
                    options: {publicPath: 5},
                },
            ]}
        ],
    }
} as const);

// requires annotation
webpack2<'example-loader1' | 'example-loader2'>({
    module: {
        rules: [
            {oneOf: [
                {
                    loader: 'example-loader1',
                    options: {limit: 5, name: 'blah'},
                },
                {
                    loader: 'example-loader2',
                    options: {publicPath: '/path'},
                },
            ]}
        ],
    }
} as const);

Live version.

Of course, this is just as good as I managed to throw it in in an hour, and generally typing to get loaders done would look somewhat differently.

Do you think this language feature would help typing webpack? Please, leave any feedback on the mentioned issue. Probably, it would make sense to keep this issue open until it gets implemented.

@tkqubo @bumbleblym @bcherny @tommytroylin @mohsen1 @jcreamer898 @alan-agius4 @dennispg
@christophehurpeau @ZSkycat @johnnyreilly @rwaskiewicz @kuehlein @grgur @rubenspgcavalcante
@andersk @ofhouse @danielthank @sasurau4 @dionshihk @peterblazejewicz @spamshaker