@rsbuild/plugin-mdx 0.7.10 → 1.0.0

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.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,6 +1,3 @@
-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) {
@@ -9,10 +6,6 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
   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
 function createRegExp(exts) {
   const matcher = exts.map((ext) => ext.slice(1)).join("|");

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.0",
+  "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"
   }
 }