@docusaurus/mdx-loader 2.0.0-beta.7fe2a9891 → 2.0.0-beta.8

package/lib/remark/transformImage/index.js

@@ -0,0 +1,80 @@
+"use strict";
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const unist_util_visit_1 = (0, tslib_1.__importDefault)(require("unist-util-visit"));
+const path_1 = (0, tslib_1.__importDefault)(require("path"));
+const url_1 = (0, tslib_1.__importDefault)(require("url"));
+const fs_extra_1 = (0, tslib_1.__importDefault)(require("fs-extra"));
+const escape_html_1 = (0, tslib_1.__importDefault)(require("escape-html"));
+const utils_1 = require("@docusaurus/core/lib/webpack/utils");
+const utils_2 = require("@docusaurus/utils");
+const { loaders: { inlineMarkdownImageFileLoader }, } = (0, utils_1.getFileLoaderUtils)();
+const createJSX = (node, pathUrl) => {
+    const jsxNode = node;
+    jsxNode.type = 'jsx';
+    jsxNode.value = `<img ${node.alt ? `alt={"${(0, escape_html_1.default)(node.alt)}"} ` : ''}${node.url
+        ? `src={require("${inlineMarkdownImageFileLoader}${(0, utils_2.escapePath)(pathUrl)}").default}`
+        : ''}${node.title ? ` title="${(0, escape_html_1.default)(node.title)}"` : ''} />`;
+    if (jsxNode.url) {
+        delete jsxNode.url;
+    }
+    if (jsxNode.alt) {
+        delete jsxNode.alt;
+    }
+    if (jsxNode.title) {
+        delete jsxNode.title;
+    }
+};
+async function ensureImageFileExist(imagePath, sourceFilePath) {
+    const imageExists = await fs_extra_1.default.pathExists(imagePath);
+    if (!imageExists) {
+        throw new Error(`Image ${(0, utils_2.toMessageRelativeFilePath)(imagePath)} used in ${(0, utils_2.toMessageRelativeFilePath)(sourceFilePath)} not found.`);
+    }
+}
+async function processImageNode(node, { filePath, staticDir }) {
+    if (!node.url) {
+        throw new Error(`Markdown image URL is mandatory in "${(0, utils_2.toMessageRelativeFilePath)(filePath)}" file`);
+    }
+    const parsedUrl = url_1.default.parse(node.url);
+    if (parsedUrl.protocol) {
+        // pathname:// is an escape hatch,
+        // in case user does not want his images to be converted to require calls going through webpack loader
+        // we don't have to document this for now,
+        // it's mostly to make next release less risky (2.0.0-alpha.59)
+        if (parsedUrl.protocol === 'pathname:') {
+            node.url = node.url.replace('pathname://', '');
+        }
+    }
+    // images without protocol
+    else if (path_1.default.isAbsolute(node.url)) {
+        // absolute paths are expected to exist in the static folder
+        const expectedImagePath = path_1.default.join(staticDir, node.url);
+        await ensureImageFileExist(expectedImagePath, filePath);
+        createJSX(node, (0, utils_2.posixPath)(expectedImagePath));
+    }
+    // We try to convert image urls without protocol to images with require calls
+    // going through webpack ensures that image assets exist at build time
+    else {
+        // relative paths are resolved against the source file's folder
+        const expectedImagePath = path_1.default.join(path_1.default.dirname(filePath), node.url);
+        await ensureImageFileExist(expectedImagePath, filePath);
+        createJSX(node, node.url.startsWith('./') ? node.url : `./${node.url}`);
+    }
+}
+const plugin = (options) => {
+    const transformer = async (root) => {
+        const promises = [];
+        (0, unist_util_visit_1.default)(root, 'image', (node) => {
+            promises.push(processImageNode(node, options));
+        });
+        await Promise.all(promises);
+    };
+    return transformer;
+};
+exports.default = plugin;

package/lib/remark/transformLinks/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { Plugin } from 'unified';
+interface PluginOptions {
+    filePath: string;
+    staticDir: string;
+}
+declare const plugin: Plugin<[PluginOptions]>;
+export default plugin;

package/lib/remark/transformLinks/index.js

@@ -0,0 +1,104 @@
+"use strict";
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const utils_1 = require("@docusaurus/utils");
+const unist_util_visit_1 = (0, tslib_1.__importDefault)(require("unist-util-visit"));
+const path_1 = (0, tslib_1.__importDefault)(require("path"));
+const url_1 = (0, tslib_1.__importDefault)(require("url"));
+const fs_extra_1 = (0, tslib_1.__importDefault)(require("fs-extra"));
+const escape_html_1 = (0, tslib_1.__importDefault)(require("escape-html"));
+const utils_2 = require("../utils");
+const utils_3 = require("@docusaurus/core/lib/webpack/utils");
+const { loaders: { inlineMarkdownLinkFileLoader }, } = (0, utils_3.getFileLoaderUtils)();
+const hashRegex = /#.*$/;
+async function ensureAssetFileExist(fileSystemAssetPath, sourceFilePath) {
+    const assetExists = await fs_extra_1.default.pathExists(fileSystemAssetPath);
+    if (!assetExists) {
+        throw new Error(`Asset ${(0, utils_1.toMessageRelativeFilePath)(fileSystemAssetPath)} used in ${(0, utils_1.toMessageRelativeFilePath)(sourceFilePath)} not found.`);
+    }
+}
+// transform the link node to a jsx link with a require() call
+function toAssetRequireNode({ node, filePath, requireAssetPath, }) {
+    let relativeRequireAssetPath = (0, utils_1.posixPath)(path_1.default.relative(path_1.default.dirname(filePath), requireAssetPath));
+    const hash = hashRegex.test(node.url)
+        ? node.url.substr(node.url.indexOf('#'))
+        : '';
+    // nodejs does not like require("assets/file.pdf")
+    relativeRequireAssetPath = relativeRequireAssetPath.startsWith('.')
+        ? relativeRequireAssetPath
+        : `./${relativeRequireAssetPath}`;
+    const href = `require('${inlineMarkdownLinkFileLoader}${(0, utils_1.escapePath)(relativeRequireAssetPath)}').default${hash ? ` + '${hash}'` : ''}`;
+    const children = (0, utils_2.stringifyContent)(node);
+    const title = node.title ? ` title="${(0, escape_html_1.default)(node.title)}"` : '';
+    node.type = 'jsx';
+    node.value = `<a target="_blank" href={${href}}${title}>${children}</a>`;
+}
+// If the link looks like an asset link, we'll link to the asset,
+// and use a require("assetUrl") (using webpack url-loader/file-loader)
+// instead of navigating to such link
+async function convertToAssetLinkIfNeeded({ node, staticDir, filePath, }) {
+    const assetPath = node.url.replace(hashRegex, '');
+    const hasSiteAlias = assetPath.startsWith('@site/');
+    const hasAssetLikeExtension = path_1.default.extname(assetPath) && !assetPath.match(/#|.md|.mdx|.html/);
+    const looksLikeAssetLink = hasSiteAlias || hasAssetLikeExtension;
+    if (!looksLikeAssetLink) {
+        return;
+    }
+    function toAssetLinkNode(requireAssetPath) {
+        toAssetRequireNode({
+            node,
+            filePath,
+            requireAssetPath,
+        });
+    }
+    if (assetPath.startsWith('@site/')) {
+        const siteDir = path_1.default.join(staticDir, '..');
+        const fileSystemAssetPath = path_1.default.join(siteDir, assetPath.replace('@site/', ''));
+        await ensureAssetFileExist(fileSystemAssetPath, filePath);
+        toAssetLinkNode(fileSystemAssetPath);
+    }
+    else if (path_1.default.isAbsolute(assetPath)) {
+        const fileSystemAssetPath = path_1.default.join(staticDir, assetPath);
+        if (await fs_extra_1.default.pathExists(fileSystemAssetPath)) {
+            toAssetLinkNode(fileSystemAssetPath);
+        }
+    }
+    else {
+        const fileSystemAssetPath = path_1.default.join(path_1.default.dirname(filePath), assetPath);
+        if (await fs_extra_1.default.pathExists(fileSystemAssetPath)) {
+            toAssetLinkNode(fileSystemAssetPath);
+        }
+    }
+}
+async function processLinkNode({ node, filePath, staticDir, }) {
+    var _a, _b, _c;
+    if (!node.url) {
+        // try to improve error feedback
+        // see https://github.com/facebook/docusaurus/issues/3309#issuecomment-690371675
+        const title = node.title || ((_a = node.children[0]) === null || _a === void 0 ? void 0 : _a.value) || '?';
+        const line = ((_c = (_b = node === null || node === void 0 ? void 0 : node.position) === null || _b === void 0 ? void 0 : _b.start) === null || _c === void 0 ? void 0 : _c.line) || '?';
+        throw new Error(`Markdown link URL is mandatory in "${(0, utils_1.toMessageRelativeFilePath)(filePath)}" file (title: ${title}, line: ${line}).`);
+    }
+    const parsedUrl = url_1.default.parse(node.url);
+    if (parsedUrl.protocol) {
+        return;
+    }
+    await convertToAssetLinkIfNeeded({ node, staticDir, filePath });
+}
+const plugin = (options) => {
+    const transformer = async (root) => {
+        const promises = [];
+        (0, unist_util_visit_1.default)(root, 'link', (node) => {
+            promises.push(processLinkNode({ node, ...options }));
+        });
+        await Promise.all(promises);
+    };
+    return transformer;
+};
+exports.default = plugin;

package/lib/remark/unwrapMdxCodeBlocks/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { Transformer, Processor } from 'unified';
+declare function plugin(this: Processor): Transformer;
+export default plugin;

package/lib/remark/unwrapMdxCodeBlocks/index.js

@@ -0,0 +1,28 @@
+"use strict";
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const unist_util_visit_1 = (0, tslib_1.__importDefault)(require("unist-util-visit"));
+// This plugin is mostly to help integrating Docusaurus with translation systems
+// that do not support well MDX embedded JSX syntax (like Crowdin)
+// We wrap the JSX syntax in code blocks so that translation tools don't mess-up with the markup
+// But the JSX inside such code blocks should still be evaluated as JSX
+// See https://github.com/facebook/docusaurus/pull/4278
+function plugin() {
+    const transformer = (root) => {
+        (0, unist_util_visit_1.default)(root, 'code', (node, _index, parent) => {
+            if (node.lang === 'mdx-code-block') {
+                const newChildren = this.parse(node.value).children;
+                // Replace the mdx code block by its content, parsed
+                parent.children.splice(parent.children.indexOf(node), 1, ...newChildren);
+            }
+        });
+    };
+    return transformer;
+}
+exports.default = plugin;

package/lib/remark/utils/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { Parent } from 'unist';
+import type { StaticPhrasingContent, Heading } from 'mdast';
+export declare function stringifyContent(node: Parent): string;
+export declare function toValue(node: StaticPhrasingContent | Heading): string;

package/lib/remark/utils/index.js

@@ -0,0 +1,39 @@
+"use strict";
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toValue = exports.stringifyContent = void 0;
+const tslib_1 = require("tslib");
+const escape_html_1 = (0, tslib_1.__importDefault)(require("escape-html"));
+const mdast_util_to_string_1 = (0, tslib_1.__importDefault)(require("mdast-util-to-string"));
+function stringifyContent(node) {
+    return (node.children || [])
+        .map(toValue)
+        .join('');
+}
+exports.stringifyContent = stringifyContent;
+function toValue(node) {
+    if (node && node.type) {
+        switch (node.type) {
+            case 'text':
+                return (0, escape_html_1.default)(node.value);
+            case 'heading':
+                return stringifyContent(node);
+            case 'inlineCode':
+                return `<code>${(0, escape_html_1.default)(node.value)}</code>`;
+            case 'emphasis':
+                return `<em>${stringifyContent(node)}</em>`;
+            case 'strong':
+                return `<strong>${stringifyContent(node)}</strong>`;
+            case 'delete':
+                return `<del>${stringifyContent(node)}</del>`;
+            default:
+        }
+    }
+    return (0, mdast_util_to_string_1.default)(node);
+}
+exports.toValue = toValue;

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@docusaurus/mdx-loader",
-  "version": "2.0.0-beta.7fe2a9891",
+  "version": "2.0.0-beta.8",
   "description": "Docusaurus Loader for MDX",
-  "main": "src/index.js",
-  "types": "src/index.d.ts",
+  "main": "lib/index.js",
+  "types": "src/types.d.ts",
   "publishConfig": {
     "access": "public"
   },
@@ -20,14 +20,15 @@
   "dependencies": {
     "@babel/parser": "^7.12.16",
     "@babel/traverse": "^7.12.13",
-    "@docusaurus/core": "2.0.0-beta.7fe2a9891",
-    "@docusaurus/utils": "2.0.0-beta.7fe2a9891",
+    "@docusaurus/core": "2.0.0-beta.8",
+    "@docusaurus/utils": "2.0.0-beta.8",
     "@mdx-js/mdx": "^1.6.21",
     "@mdx-js/react": "^1.6.21",
+    "chalk": "^4.1.2",
     "escape-html": "^1.0.3",
     "file-loader": "^6.2.0",
     "fs-extra": "^10.0.0",
-    "github-slugger": "^1.3.0",
+    "github-slugger": "^1.4.0",
     "gray-matter": "^4.0.3",
     "mdast-util-to-string": "^2.0.0",
     "remark-emoji": "^2.1.0",
@@ -37,7 +38,11 @@
     "webpack": "^5.40.0"
   },
   "devDependencies": {
-    "@docusaurus/types": "2.0.0-beta.7fe2a9891",
+    "@docusaurus/types": "2.0.0-beta.8",
+    "@types/escape-html": "^1.0.1",
+    "@types/mdast": "^3.0.7",
+    "@types/stringify-object": "^3.3.1",
+    "@types/unist": "^2.0.6",
     "remark": "^12.0.0",
     "remark-mdx": "^1.6.21",
     "to-vfile": "^6.0.0",
@@ -51,5 +56,5 @@
   "engines": {
     "node": ">=12.13.0"
   },
-  "gitHead": "16fc4ca84eed792089c77e73584de1e6e0cf0e67"
+  "gitHead": "4f9b8d76d1eab9f20ddfad9865a1388ea2ce1c9c"
 }

package/src/index.ts

@@ -0,0 +1,200 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {readFile} from 'fs-extra';
+import mdx from '@mdx-js/mdx';
+import chalk from 'chalk';
+import emoji from 'remark-emoji';
+import {
+  parseFrontMatter,
+  parseMarkdownContentTitle,
+  escapePath,
+} from '@docusaurus/utils';
+import stringifyObject from 'stringify-object';
+import headings from './remark/headings';
+import toc from './remark/toc';
+import unwrapMdxCodeBlocks from './remark/unwrapMdxCodeBlocks';
+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>;
+}
+
+const {
+  loaders: {inlineMarkdownImageFileLoader},
+} = getFileLoaderUtils();
+
+const DEFAULT_OPTIONS: RemarkAndRehypePluginOptions = {
+  rehypePlugins: [],
+  remarkPlugins: [unwrapMdxCodeBlocks, emoji, headings, toc],
+  beforeDefaultRemarkPlugins: [],
+  beforeDefaultRehypePlugins: [],
+};
+
+// 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
+async function readMetadataPath(metadataPath: string) {
+  try {
+    return await readFile(metadataPath, 'utf8');
+  } catch (e) {
+    throw new Error(
+      `MDX loader can't read MDX metadata file for path ${metadataPath}. Maybe the isMDXPartial option function was not provided?`,
+    );
+  }
+}
+
+// Converts assets an object with Webpack require calls code
+// This is useful for mdx files to reference co-located assets using relative paths
+// Those assets should enter the Webpack assets pipeline and be hashed
+// For now, we only handle that for images and paths starting with ./
+// {image: "./myImage.png"} => {image: require("./myImage.png")}
+function createAssetsExportCode(assets: Record<string, unknown>) {
+  if (Object.keys(assets).length === 0) {
+    return 'undefined';
+  }
+
+  // TODO implementation can be completed/enhanced
+  function createAssetValueCode(assetValue: unknown): string | undefined {
+    if (Array.isArray(assetValue)) {
+      const arrayItemCodes = assetValue.map(
+        (item) => createAssetValueCode(item) ?? 'undefined',
+      );
+      return `[${arrayItemCodes.join(', ')}]`;
+    }
+    // Only process string values starting with ./
+    // We could enhance this logic and check if file exists on disc?
+    if (typeof assetValue === 'string' && assetValue.startsWith('./')) {
+      // TODO do we have other use-cases than image assets?
+      // Probably not worth adding more support, as we want to move to Webpack 5 new asset system (https://github.com/facebook/docusaurus/pull/4708)
+      const inlineLoader = inlineMarkdownImageFileLoader;
+      return `require("${inlineLoader}${escapePath(assetValue)}").default`;
+    }
+    return undefined;
+  }
+
+  const assetEntries = Object.entries(assets);
+
+  const codeLines = assetEntries
+    .map(([key, value]) => {
+      const assetRequireCode = createAssetValueCode(value);
+      return assetRequireCode ? `"${key}": ${assetRequireCode},` : undefined;
+    })
+    .filter(Boolean);
+
+  return `{\n${codeLines.join('\n')}\n}`;
+}
+
+const docusaurusMdxLoader: Loader = async function (fileString) {
+  const callback = this.async();
+  const filePath = this.resourcePath;
+  const reqOptions = this.getOptions() || {};
+
+  const {frontMatter, content: contentWithTitle} = parseFrontMatter(fileString);
+
+  const {content, contentTitle} = parseMarkdownContentTitle(contentWithTitle, {
+    removeContentTitle: reqOptions.removeContentTitle,
+  });
+
+  const hasFrontMatter = Object.keys(frontMatter).length > 0;
+
+  const options = {
+    ...reqOptions,
+    remarkPlugins: [
+      ...(reqOptions.beforeDefaultRemarkPlugins || []),
+      ...DEFAULT_OPTIONS.remarkPlugins,
+      [transformImage, {staticDir: reqOptions.staticDir, filePath}],
+      [transformLinks, {staticDir: reqOptions.staticDir, filePath}],
+      ...(reqOptions.remarkPlugins || []),
+    ],
+    rehypePlugins: [
+      ...(reqOptions.beforeDefaultRehypePlugins || []),
+      ...DEFAULT_OPTIONS.rehypePlugins,
+
+      ...(reqOptions.rehypePlugins || []),
+    ],
+    filepath: filePath,
+  };
+
+  let result;
+  try {
+    result = await mdx(content, options);
+  } catch (err) {
+    return callback(err);
+  }
+
+  // MDX partials are MDX files starting with _ or in a folder starting with _
+  // Partial are not expected to have an associated metadata file or frontmatter
+  const isMDXPartial = options.isMDXPartial && options.isMDXPartial(filePath);
+  if (isMDXPartial && hasFrontMatter) {
+    const errorMessage = `Docusaurus MDX partial files should not contain FrontMatter.
+Those partial files use the _ prefix as a convention by default, but this is configurable.
+File at ${filePath} contains FrontMatter that will be ignored:
+${JSON.stringify(frontMatter, null, 2)}`;
+
+    if (!options.isMDXPartialFrontMatterWarningDisabled) {
+      const shouldError = process.env.NODE_ENV === 'test' || process.env.CI;
+      if (shouldError) {
+        return callback(new Error(errorMessage));
+      } else {
+        console.warn(chalk.yellow(errorMessage));
+      }
+    }
+  }
+
+  function getMetadataPath(): string | undefined {
+    if (!isMDXPartial) {
+      // Read metadata for this MDX and export it.
+      if (options.metadataPath && typeof options.metadataPath === 'function') {
+        return options.metadataPath(filePath);
+      }
+    }
+    return undefined;
+  }
+
+  const metadataPath = getMetadataPath();
+  if (metadataPath) {
+    this.addDependency(metadataPath);
+  }
+
+  const metadataJsonString = metadataPath
+    ? await readMetadataPath(metadataPath)
+    : undefined;
+
+  const metadata = metadataJsonString
+    ? JSON.parse(metadataJsonString)
+    : undefined;
+
+  const assets =
+    reqOptions.createAssets && metadata
+      ? reqOptions.createAssets({frontMatter, metadata})
+      : undefined;
+
+  const exportsCode = `
+export const frontMatter = ${stringifyObject(frontMatter)};
+export const contentTitle = ${stringifyObject(contentTitle)};
+${metadataJsonString ? `export const metadata = ${metadataJsonString};` : ''}
+${assets ? `export const assets = ${createAssetsExportCode(assets)};` : ''}
+`;
+
+  const code = `
+import React from 'react';
+import { mdx } from '@mdx-js/react';
+
+${exportsCode}
+${result}
+`;
+
+  return callback(null, code);
+};
+
+export default docusaurusMdxLoader;

package/src/remark/headings/__tests__/{index.test.js → index.test.ts}

@@ -7,8 +7,6 @@
 
 /* Based on remark-slug (https://github.com/remarkjs/remark-slug) and gatsby-remark-autolink-headers (https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-autolink-headers) */
 
-/* eslint-disable no-param-reassign */
-
 import remark from 'remark';
 import u from 'unist-builder';
 import removePosition from 'unist-util-remove-position';

package/src/remark/headings/{index.js → index.ts}

@@ -7,18 +7,25 @@
 
 /* Based on remark-slug (https://github.com/remarkjs/remark-slug) and gatsby-remark-autolink-headers (https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-autolink-headers) */
 
-const {parseMarkdownHeadingId} = require('@docusaurus/utils');
-const visit = require('unist-util-visit');
-const toString = require('mdast-util-to-string');
-const slugs = require('github-slugger')();
+import {parseMarkdownHeadingId} from '@docusaurus/utils';
+import visit, {Visitor} from 'unist-util-visit';
+import toString from 'mdast-util-to-string';
+import Slugger from 'github-slugger';
+import type {Transformer} from 'unified';
+import type {Parent} from 'unist';
+import type {Heading, Text} from 'mdast';
 
-function headings() {
-  const transformer = (ast) => {
+const slugs = new Slugger();
+
+function headings(): Transformer {
+  const transformer: Transformer = (ast) => {
     slugs.reset();
 
-    function visitor(headingNode) {
-      const data = headingNode.data || (headingNode.data = {}); // eslint-disable-line
-      const properties = data.hProperties || (data.hProperties = {});
+    const visitor: Visitor<Heading> = (headingNode) => {
+      const data = headingNode.data || (headingNode.data = {});
+      const properties = (data.hProperties || (data.hProperties = {})) as {
+        id: string;
+      };
       let {id} = properties;
 
       if (id) {
@@ -29,7 +36,7 @@ function headings() {
         );
         const heading = toString(
           headingTextNodes.length > 0
-            ? {children: headingTextNodes}
+            ? ({children: headingTextNodes} as Parent)
             : headingNode,
         );
 
@@ -42,8 +49,9 @@ function headings() {
           // When there's an id, it is always in the last child node
           // Sometimes heading is in multiple "parts" (** syntax creates a child node):
           // ## part1 *part2* part3 {#id}
-          const lastNode =
-            headingNode.children[headingNode.children.length - 1];
+          const lastNode = headingNode.children[
+            headingNode.children.length - 1
+          ] as Text;
 
           if (headingNode.children.length > 1) {
             const lastNodeText = parseMarkdownHeadingId(lastNode.value).text;
@@ -63,7 +71,7 @@ function headings() {
 
       data.id = id;
       properties.id = id;
-    }
+    };
 
     visit(ast, 'heading', visitor);
   };
@@ -71,4 +79,4 @@ function headings() {
   return transformer;
 }
 
-module.exports = headings;
+export default headings;