refactor: migrate lqip-loader to TS, fix typing for Webpack Loaders (#5779)

This commit is contained in:
Joshua Chen 2021-10-27 22:38:11 +08:00 committed by GitHub
parent ca5d70d7fb
commit 68c970175a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 254 additions and 265 deletions

View file

@ -22,12 +22,7 @@ import transformImage from './remark/transformImage';
import transformLinks from './remark/transformLinks';
import {getFileLoaderUtils} from '@docusaurus/core/lib/webpack/utils';
import type {RemarkAndRehypePluginOptions} from '@docusaurus/mdx-loader';
// TODO temporary until Webpack5 export this type
// see https://github.com/webpack/webpack/issues/11630
interface Loader extends Function {
(this: any, source: string): Promise<string | Buffer | void | undefined>;
}
import type {LoaderContext} from 'webpack';
const {
loaders: {inlineMarkdownImageFileLoader},
@ -40,6 +35,19 @@ const DEFAULT_OPTIONS: RemarkAndRehypePluginOptions = {
beforeDefaultRehypePlugins: [],
};
type Options = RemarkAndRehypePluginOptions & {
staticDir?: string;
isMDXPartial?: (filePath: string) => boolean;
isMDXPartialFrontMatterWarningDisabled?: boolean;
removeContentTitle?: boolean;
metadataPath?: string | ((filePath: string) => string);
createAssets?: (metadata: {
frontMatter: Record<string, unknown>;
metadata: Record<string, unknown>;
}) => Record<string, unknown>;
filepath: string;
};
// When this throws, it generally means that there's no metadata file associated with this MDX document
// It can happen when using MDX partials (usually starting with _)
// That's why it's important to provide the "isMDXPartial" function in config
@ -94,7 +102,10 @@ function createAssetsExportCode(assets: Record<string, unknown>) {
return `{\n${codeLines.join('\n')}\n}`;
}
const docusaurusMdxLoader: Loader = async function (fileString) {
export default async function mdxLoader(
this: LoaderContext<Options>,
fileString: string,
): Promise<void> {
const callback = this.async();
const filePath = this.resourcePath;
const reqOptions = this.getOptions() || {};
@ -107,7 +118,7 @@ const docusaurusMdxLoader: Loader = async function (fileString) {
const hasFrontMatter = Object.keys(frontMatter).length > 0;
const options = {
const options: Options = {
...reqOptions,
remarkPlugins: [
...(reqOptions.beforeDefaultRemarkPlugins || []),
@ -119,7 +130,6 @@ const docusaurusMdxLoader: Loader = async function (fileString) {
rehypePlugins: [
...(reqOptions.beforeDefaultRehypePlugins || []),
...DEFAULT_OPTIONS.rehypePlugins,
...(reqOptions.rehypePlugins || []),
],
filepath: filePath,
@ -129,7 +139,7 @@ const docusaurusMdxLoader: Loader = async function (fileString) {
try {
result = await mdx(content, options);
} catch (err) {
return callback(err);
return callback(err as Error);
}
// MDX partials are MDX files starting with _ or in a folder starting with _
@ -195,6 +205,4 @@ ${result}
`;
return callback(null, code);
};
export default docusaurusMdxLoader;
}

View file

@ -6,9 +6,11 @@
*/
declare module '@docusaurus/mdx-loader' {
type RemarkOrRehypePlugin =
// eslint-disable-next-line @typescript-eslint/ban-types
[Function, Record<string, unknown>] | Function;
import type {Plugin} from 'unified';
export type RemarkOrRehypePlugin =
// eslint-disable-next-line @typescript-eslint/no-explicit-any
[Plugin<any[]>, Record<string, unknown>] | Plugin<any[]>;
export type RemarkAndRehypePluginOptions = {
remarkPlugins: RemarkOrRehypePlugin[];
rehypePlugins: RemarkOrRehypePlugin[];
@ -19,15 +21,16 @@ declare module '@docusaurus/mdx-loader' {
// TODO Types provided by MDX 2.0 https://github.com/mdx-js/mdx/blob/main/packages/mdx/types/index.d.ts
declare module '@mdx-js/mdx' {
import type {Plugin, Processor} from 'unified';
import type {Processor} from 'unified';
import type {RemarkOrRehypePlugin} from '@docusaurus/mdx-loader';
namespace mdx {
interface Options {
filepath?: string;
skipExport?: boolean;
wrapExport?: string;
remarkPlugins?: Plugin[];
rehypePlugins?: Plugin[];
remarkPlugins?: RemarkOrRehypePlugin[];
rehypePlugins?: RemarkOrRehypePlugin[];
}
function sync(content: string, options?: Options): string;