@rsbuild/plugin-mdx 0.7.10 → 1.0.1

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023-present Bytedance, Inc. and its affiliates.
+Copyright (c) 2024 Rspack Contrib
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,19 +1,90 @@
-<p align="center">
-  <a href="https://rsbuild.dev" target="blank"><img src="https://github.com/web-infra-dev/rsbuild/assets/7237365/84abc13e-b620-468f-a90b-dbf28e7e9427" alt="Rsbuild Logo" /></a>
+# @rsbuild/plugin-mdx
+
+An Rsbuild plugin to provide support for [MDX](https://github.com/mdx-js/mdx/).
+
+MDX lets you use JSX in your markdown content. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast.
+
+<p>
+  <a href="https://npmjs.com/package/@rsbuild/plugin-mdx">
+   <img src="https://img.shields.io/npm/v/@rsbuild/plugin-mdx?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" />
+  </a>
+  <img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="license" />
 </p>
 
-# Rsbuild
+## Usage
+
+Install:
+
+```bash
+npm add @rsbuild/plugin-mdx -D
+```
+
+Add plugin to your `rsbuild.config.ts`:
+
+```ts
+// rsbuild.config.ts
+import { pluginMdx } from "@rsbuild/plugin-mdx";
+
+export default {
+  plugins: [pluginMdx()],
+};
+```
+
+After registering the plugin, you can import `.mdx` or `.md` files as components in your code.
+
+## Options
+
+If you need to customize the compilation behavior of MDX, you can use the following configs.
+
+### mdxLoaderOptions
+
+Options passed to `@mdx-js/loader`, please refer to [@mdx-js/loader documentation](https://www.npmjs.com/package/@mdx-js/loader) for detailed usage.
+
+- **Type:** `MdxLoaderOptions`
+- **Default:** `{}`
+- **Example:**
+
+```ts
+pluginMdx({
+  mdxLoaderOptions: {
+    // Use Vue JSX
+    jsxImportSource: "vue",
+  },
+});
+```
+
+### extensions
+
+Specify the file extensions to be compiled with MDX loader, including .md files and .mdx files by default.
+
+- **Type:** `string[]`
+- **Default:** `['.mdx', '.md']`
+
+For example, to only compile .mdx files, you can set it as:
 
-The Rspack-based build tool. It's fast, out-of-the-box and extensible.
+```ts
+pluginMdx({
+  extensions: [".mdx"],
+});
+```
 
-## Documentation
+## Type Declarations
 
-https://rsbuild.dev/
+In a TypeScript project, you need to add type definitions for `*.mdx` files so that TypeScript can recognize them correctly.
 
-## Contributing
+Create `env.d.ts` in the `src` directory and add the following content:
 
-Please read the [Contributing Guide](https://github.com/web-infra-dev/rsbuild/blob/main/CONTRIBUTING.md).
+```ts title="src/env.d.ts"
+declare module "*.md" {
+  let MDXComponent: () => JSX.Element;
+  export default MDXComponent;
+}
+declare module "*.mdx" {
+  let MDXComponent: () => JSX.Element;
+  export default MDXComponent;
+}
+```
 
 ## License
 
-Rsbuild is [MIT licensed](https://github.com/web-infra-dev/rsbuild/blob/main/LICENSE).
+[MIT](./LICENSE).

package/dist/index.cjs

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -34,6 +24,13 @@ __export(src_exports, {
   pluginMdx: () => pluginMdx
 });
 module.exports = __toCommonJS(src_exports);
+
+// node_modules/.pnpm/tsup@8.0.2_postcss@8.4.38_typescript@5.5.2/node_modules/tsup/assets/cjs_shims.js
+var getImportMetaUrl = () => typeof document === "undefined" ? new URL("file:" + __filename).href : document.currentScript && document.currentScript.src || new URL("main.js", document.baseURI).href;
+var importMetaUrl = /* @__PURE__ */ getImportMetaUrl();
+
+// src/index.ts
+var import_node_module = require("module");
 function createRegExp(exts) {
   const matcher = exts.map((ext) => ext.slice(1)).join("|");
   return new RegExp(
@@ -61,7 +58,8 @@ var pluginMdx = (options = {}) => ({
         return false;
       });
       const MDX_REGEXP = createRegExp(extensions);
-      mdxRule.test(MDX_REGEXP).use("mdx").loader(require.resolve("@mdx-js/loader")).options(options.mdxLoaderOptions ?? {});
+      const require2 = (0, import_node_module.createRequire)(importMetaUrl);
+      mdxRule.test(MDX_REGEXP).use("mdx").loader(require2.resolve("@mdx-js/loader")).options(options.mdxLoaderOptions ?? {});
       const { REACT_FAST_REFRESH } = CHAIN_ID.PLUGIN;
       if (chain.plugins.has(REACT_FAST_REFRESH)) {
         chain.plugins.get(REACT_FAST_REFRESH).tap((options2) => {

package/dist/index.d.cts

@@ -0,0 +1,18 @@
+import { Options } from '@mdx-js/loader';
+import { RsbuildPlugin } from '@rsbuild/core';
+
+type PluginMdxOptions = {
+    /**
+     * Options passed to `@mdx-js/loader`.
+     * @see https://npmjs.com/package/@mdx-js/loader#api
+     */
+    mdxLoaderOptions?: Options;
+    /**
+     * @default ['.mdx', '.md']
+     */
+    extensions?: string[];
+};
+declare const PLUGIN_MDX_NAME = "rsbuild:mdx";
+declare const pluginMdx: (options?: PluginMdxOptions) => RsbuildPlugin;
+
+export { PLUGIN_MDX_NAME, type PluginMdxOptions, pluginMdx };

package/dist/index.js

@@ -1,19 +1,5 @@
-import { createRequire } from 'module';
-var require = createRequire(import.meta['url']);
-
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined")
-    return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-
-// ../../node_modules/.pnpm/@modern-js+module-tools@2.52.0_eslint@9.5.0_typescript@5.4.5/node_modules/@modern-js/module-tools/shims/esm.js
-import { fileURLToPath } from "url";
-import path from "path";
-
 // src/index.ts
+import { createRequire } from "node:module";
 function createRegExp(exts) {
   const matcher = exts.map((ext) => ext.slice(1)).join("|");
   return new RegExp(
@@ -41,7 +27,8 @@ var pluginMdx = (options = {}) => ({
         return false;
       });
       const MDX_REGEXP = createRegExp(extensions);
-      mdxRule.test(MDX_REGEXP).use("mdx").loader(__require.resolve("@mdx-js/loader")).options(options.mdxLoaderOptions ?? {});
+      const require2 = createRequire(import.meta.url);
+      mdxRule.test(MDX_REGEXP).use("mdx").loader(require2.resolve("@mdx-js/loader")).options(options.mdxLoaderOptions ?? {});
       const { REACT_FAST_REFRESH } = CHAIN_ID.PLUGIN;
       if (chain.plugins.has(REACT_FAST_REFRESH)) {
         chain.plugins.get(REACT_FAST_REFRESH).tap((options2) => {

package/package.json

@@ -1,13 +1,7 @@
 {
   "name": "@rsbuild/plugin-mdx",
-  "version": "0.7.10",
-  "description": "Mdx plugin for Rsbuild",
-  "homepage": "https://rsbuild.dev",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/web-infra-dev/rsbuild",
-    "directory": "packages/plugin-mdx"
-  },
+  "version": "1.0.1",
+  "repository": "https://github.com/rspack-contrib/rsbuild-plugin-mdx",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -17,29 +11,59 @@
       "require": "./dist/index.cjs"
     }
   },
-  "main": "./dist/index.cjs",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
+  "simple-git-hooks": {
+    "pre-commit": "npx nano-staged"
+  },
+  "nano-staged": {
+    "*.{js,jsx,ts,tsx,mjs,cjs}": [
+      "biome check --write --no-errors-on-unmatched"
+    ]
+  },
   "dependencies": {
-    "@mdx-js/loader": "^3.0.1",
-    "@rsbuild/shared": "0.7.10"
+    "@mdx-js/loader": "^3.0.1"
   },
   "devDependencies": {
-    "typescript": "^5.4.2",
-    "@rsbuild/core": "0.7.10"
+    "@biomejs/biome": "^1.8.3",
+    "@playwright/test": "^1.44.1",
+    "@rsbuild/core": "^0.7.10",
+    "@rsbuild/plugin-preact": "^0.7.10",
+    "@rsbuild/plugin-react": "^0.7.10",
+    "@rsbuild/plugin-svgr": "^0.7.10",
+    "@rsbuild/plugin-vue": "^0.7.10",
+    "@types/node": "^20.14.1",
+    "nano-staged": "^0.8.0",
+    "playwright": "^1.44.1",
+    "preact": "^10.22.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "simple-git-hooks": "^2.11.1",
+    "tsup": "^8.0.2",
+    "typescript": "^5.5.2",
+    "vue": "^3.4.31"
   },
   "peerDependencies": {
-    "@rsbuild/core": "^0.7.10"
+    "@rsbuild/core": "0.x || 1.x"
+  },
+  "peerDependenciesMeta": {
+    "@rsbuild/core": {
+      "optional": true
+    }
   },
   "publishConfig": {
     "access": "public",
-    "provenance": true,
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "build": "modern build",
-    "dev": "modern build --watch"
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "biome check .",
+    "lint:write": "biome check . --write",
+    "test": "playwright test"
   }
 }