[refactor] support Custom Configuration files

[add] jsconfig.json for Type Checking

Author: TechQuery

ReadMe.md

@@ -5,6 +5,8 @@ Unofficial [MDX][1] 3 [transformer plugin][2] for [Parcel][3] 2
 [![NPM Dependency](https://img.shields.io/librariesio/github/EasyWebApp/Parcel-transformer-MDX.svg)][4]
 [![CI & CD](https://github.com/EasyWebApp/Parcel-transformer-MDX/actions/workflows/main.yml/badge.svg)][5]
 
+[![NPM](https://nodei.co/npm/parcel-transformer-mdx.png?downloads=true&downloadRank=true&stars=true)][6]
+
 ## Supported features
 
 1. [GitHub flavored Markdown (GFM)](https://github.com/remarkjs/remark-gfm)
@@ -102,3 +104,4 @@ https://github.com/parcel-bundler/parcel/pull/7922
 [3]: https://parceljs.org/
 [4]: https://libraries.io/npm/parcel-transformer-mdx
 [5]: https://github.com/EasyWebApp/Parcel-transformer-MDX/actions/workflows/main.yml
+[6]: https://nodei.co/npm/parcel-transformer-mdx/

index.js

@@ -1,63 +1,58 @@
 import { Transformer } from '@parcel/plugin';
 import { compile } from '@mdx-js/mdx';
-import RemarkGFM from 'remark-gfm';
-import RehypePrism from '@mapbox/rehype-prism';
-import remarkEmbedder from '@remark-embedder/core';
-import oembedTransformer from '@remark-embedder/transformer-oembed';
-import RemarkFrontmatter from 'remark-frontmatter';
-import RemarkMdxFrontmatter from 'remark-mdx-frontmatter';
 
-const RemarkEmbedder = remarkEmbedder['default'],
-    OembedTransformer = oembedTransformer['default'];
+import MDXPreset from './source/preset';
+import { BabelConfigFiles, MDXConfigFiles } from './source/utility';
 
-const ConfigExtensions = ['json', 'js', 'cjs', 'mjs', 'cts'];
-/**
- * @see {@link https://babeljs.io/docs/config-files#configuration-file-types}
- */
-const BabelConfigFiles = [
-    ...ConfigExtensions.map(extension => `babel.config.${extension}`),
-    ...ConfigExtensions.map(extension => `.babelrc.${extension}`),
-    '.babelrc'
-];
+export { MDXPreset };
+export * from './source/utility';
 
 export default new Transformer({
+    /**
+     * @returns {Promise<import('@mdx-js/mdx').CompileOptions>}
+     */
     async loadConfig({ config }) {
-        const { contents } = await config.getConfig(
-            ['tsconfig.json', 'jsconfig.json', ...BabelConfigFiles],
-            { packageKey: 'babel' }
-        );
-        return contents;
-    },
-    async transform({ asset, config }) {
+        const [
+            { contents: TSConfig },
+            { contents: BabelConfig },
+            { contents: MDXConfig }
+        ] = await Promise.all([
+            config.getConfig(['tsconfig.json', 'jsconfig.json']),
+            config.getConfig(BabelConfigFiles, { packageKey: 'babel' }),
+            config.getConfig(MDXConfigFiles, { packageKey: 'mdx' })
+        ]);
         /**
          * @type {import('types-tsconfig').TSConfigJSON['compilerOptions']}
          */
         const { jsx, jsxImportSource, jsxFactory, jsxFragmentFactory } =
-            config.compilerOptions || {};
+            TSConfig?.compilerOptions || {};
         /**
          * @see {@link https://babeljs.io/docs/babel-preset-react#with-a-configuration-file-recommended}
          */
-        const [_, { runtime, importSource, pragma, pragmaFrag } = {}] =
-            config.presets?.find(
+        const [_, ReactPreset = {}] =
+            BabelConfig?.presets?.find(
                 preset =>
                     preset instanceof Array &&
                     preset[0] === '@babel/preset-react'
             ) || [];
-        const source = await asset.getCode();
+        /**
+         * @type {import('./source/utility').BabelReactPreset}
+         */
+        const { runtime, importSource, pragma, pragmaFrag } = ReactPreset;
 
-        const vFile = await compile(source, {
+        return {
             jsxRuntime: runtime || (jsx === 'react' ? 'classic' : 'automatic'),
             jsxImportSource: jsxImportSource || importSource,
             pragma: pragma || jsxFactory,
             pragmaFrag: pragmaFrag || jsxFragmentFactory,
-            remarkPlugins: [
-                RemarkGFM,
-                [RemarkEmbedder, { transformers: [OembedTransformer] }],
-                RemarkFrontmatter,
-                RemarkMdxFrontmatter
-            ],
-            rehypePlugins: [RehypePrism]
-        });
+            ...MDXPreset,
+            ...MDXConfig
+        };
+    },
+    async transform({ asset, config }) {
+        const source = await asset.getCode();
+
+        const vFile = await compile(source, config);
         asset.type = 'jsx';
         asset.setCode(vFile + '');
 

jsconfig.json

@@ -0,0 +1,7 @@
+{
+    "compilerOptions": {
+        "module": "Node16",
+        "moduleResolution": "Node16"
+    },
+    "include": ["**/*"]
+}

package.json

@@ -1,6 +1,6 @@
 {
     "name": "parcel-transformer-mdx",
-    "version": "0.3.4",
+    "version": "0.4.0",
     "license": "LGPL-3.0-or-later",
     "author": "[email protected]",
     "description": "Unofficial MDX 3 transformer plugin for Parcel 2",
@@ -40,7 +40,8 @@
         "husky": "^9.1.4",
         "lint-staged": "^15.2.8",
         "prettier": "^3.3.3",
-        "types-tsconfig": "^2.1.1"
+        "types-tsconfig": "^2.1.1",
+        "typescript": "^5.5.4"
     },
     "prettier": {
         "singleQuote": true,
@@ -53,6 +54,6 @@
     },
     "scripts": {
         "prepare": "husky",
-        "test": "lint-staged"
+        "test": "lint-staged  &&  tsc -p jsconfig.json --noEmit"
     }
 }

pnpm-lock.yaml

@@ -0,0 +1,21 @@
+import RemarkGFM from 'remark-gfm';
+import RehypePrism from '@mapbox/rehype-prism';
+import RemarkFrontmatter from 'remark-frontmatter';
+import RemarkMdxFrontmatter from 'remark-mdx-frontmatter';
+import remarkEmbedder from '@remark-embedder/core';
+import oembedTransformer from '@remark-embedder/transformer-oembed';
+
+const RemarkEmbedder = remarkEmbedder['default'],
+    OembedTransformer = oembedTransformer['default'];
+/**
+ * @type {import('@mdx-js/mdx').CompileOptions}
+ */
+export default {
+    remarkPlugins: [
+        RemarkGFM,
+        [RemarkEmbedder, { transformers: [OembedTransformer] }],
+        RemarkFrontmatter,
+        RemarkMdxFrontmatter
+    ],
+    rehypePlugins: [RehypePrism]
+};

source/preset.js

@@ -0,0 +1,21 @@
+export const JSConfigExtensions = ['js', 'cjs', 'mjs'];
+export const ConfigExtensions = ['json', ...JSConfigExtensions, 'cts'];
+/**
+ * @see {@link https://babeljs.io/docs/config-files#configuration-file-types}
+ */
+export const BabelConfigFiles = [
+    ...ConfigExtensions.map(extension => `babel.config.${extension}`),
+    ...ConfigExtensions.map(extension => `.babelrc.${extension}`),
+    '.babelrc'
+];
+export const MDXConfigFiles = JSConfigExtensions.map(
+    extension => `mdx.config.${extension}`
+);
+
+/**
+ * @typedef {Object} BabelReactPreset
+ * @property {import('@mdx-js/mdx').CompileOptions['jsxRuntime']} runtime
+ * @property {import('@mdx-js/mdx').CompileOptions['jsxImportSource']} importSource
+ * @property {import('@mdx-js/mdx').CompileOptions['pragma']} pragma
+ * @property {import('@mdx-js/mdx').CompileOptions['pragmaFrag']} pragmaFrag
+ */