@rasenganjs/mdx 1.0.0 → 1.0.2

package/README.md

@@ -1,7 +1,7 @@
 # Rasengan MDX Plugin
 
-[![npm version](https://badge.fury.io/js/@rasenganjs%mdx.svg)](https://badge.fury.io/js/@rasenganjs%mdx)
-![NPM Downloads](https://img.shields.io/npm/dm/%40rasenganjs%mdx)
+[![npm version](https://badge.fury.io/js/@rasenganjs%2Fmdx.svg)](https://badge.fury.io/js/@rasenganjs%2Fmdx)
+![NPM Downloads](https://img.shields.io/npm/dm/%40rasenganjs%2Fmdx)
 [![GitHub license](https://img.shields.io/github/license/rasengan-dev/rasengan-mdx-plugin)](https://github.com/rasengan-dev/rasengan-mdx-plugin/blob/main/LICENSE)
 
 MDX plugin for Rasengan.Js
@@ -40,7 +40,7 @@ export default defineConfig({
   // Define aliases
   vite: {
     plugins: [
-      mdx(),
+      ...mdx(),
     ],
   },
 });
@@ -98,7 +98,7 @@ We also have a [Twitter](https://twitter.com/rasenganjs) account where you can f
 
 ## License
 
-Rasengan.js is [MIT licensed](https://github.com/rasengan-dev/rasengan-image/blob/main/LICENSE).
+[MIT licensed](https://github.com/rasengan-dev/rasengan-image/blob/main/LICENSE).
 
 ## Authors
 

package/lib/index.d.ts

@@ -1,35 +1,10 @@
-export * from './types/index.js';
-export * from "./utils/index.js";
-export * from './components/index.js';
 /**
- * A Vite plugin that transforms MDX files into a format that can be used in a RasenganJs application.
+ * License: MIT
  *
- * The plugin performs the following tasks:
- * - Resolves the Vite configuration and stores it for later use.
- * - Transforms MDX files by applying the `@mdx-js/rollup` transformation.
- * - Extracts frontmatter data from the MDX files and creates a `metadata` object.
- * - Appends the `metadata` object to the transformed MDX content.
+ * Copyright (c) 2024 Dilane Kombou
  *
- * The transformed MDX content can then be used in the RasenganJs application, with the `metadata` object providing additional information about the content.
+ * This package is inspired by @mdx-js/rollup to provide a custom implement of the MDX plugin for RasenganJs.
  */
-export default function rasengan(): {
-    name: string;
-    enforce: string;
-    /**
-     * Stores the resolved Vite configuration for later use.
-     *
-     * @param resolvedConfig - The resolved Vite configuration object.
-     */
-    configResolved(resolvedConfig: unknown): void;
-    /**
-     * Transforms an MDX file by applying the `@mdx-js/rollup` transformation, extracting frontmatter data, and appending a `metadata` object to the transformed content.
-     *
-     * @param code - The content of the MDX file.
-     * @param id - The ID of the MDX file.
-     * @returns An object containing the transformed MDX code and a source map, or `null` if the file is not an MDX file.
-     */
-    transform(code: string, id: string): Promise<{
-        code: string;
-        map: import("rollup").SourceMapInput;
-    }>;
-};
+export * from './types/index.js';
+import { plugin } from "./utils/index.js";
+export default plugin;

package/lib/index.js

@@ -1,72 +1,11 @@
-import mdx from '@mdx-js/rollup';
-import { createFilter } from "@rollup/pluginutils";
-import matter from 'gray-matter';
-export * from './types/index.js';
-export * from "./utils/index.js";
-export * from './components/index.js';
 /**
- * A Vite plugin that transforms MDX files into a format that can be used in a RasenganJs application.
+ * License: MIT
  *
- * The plugin performs the following tasks:
- * - Resolves the Vite configuration and stores it for later use.
- * - Transforms MDX files by applying the `@mdx-js/rollup` transformation.
- * - Extracts frontmatter data from the MDX files and creates a `metadata` object.
- * - Appends the `metadata` object to the transformed MDX content.
+ * Copyright (c) 2024 Dilane Kombou
  *
- * The transformed MDX content can then be used in the RasenganJs application, with the `metadata` object providing additional information about the content.
+ * This package is inspired by @mdx-js/rollup to provide a custom implement of the MDX plugin for RasenganJs.
  */
-export default function rasengan() {
-    let config;
-    const filter = createFilter(/\.mdx?$/);
-    return {
-        name: "vite-plugin-rasengan-mdx",
-        // Apply transformation of the mdx file before other plugins
-        enforce: 'pre',
-        /**
-         * Stores the resolved Vite configuration for later use.
-         *
-         * @param resolvedConfig - The resolved Vite configuration object.
-         */
-        configResolved(resolvedConfig) {
-            // store the resolved config
-            config = resolvedConfig;
-        },
-        /**
-         * Transforms an MDX file by applying the `@mdx-js/rollup` transformation, extracting frontmatter data, and appending a `metadata` object to the transformed content.
-         *
-         * @param code - The content of the MDX file.
-         * @param id - The ID of the MDX file.
-         * @returns An object containing the transformed MDX code and a source map, or `null` if the file is not an MDX file.
-         */
-        async transform(code, id) {
-            if (!filter(id)) {
-                return null;
-            }
-            const { content, data: frontmatter } = matter(code);
-            // Apply transformation of the mdx file
-            const result = await mdx().transform(content, id);
-            // Extract the file name from the path
-            const fileName = id
-                .split("/")
-                .pop()
-                .replace(/.page.mdx?$/, "");
-            // TODO: Consider other params of metadata from frontmatter
-            const metadata = {
-                path: frontmatter.path || `/${fileName}`,
-                metadata: frontmatter.metadata || {
-                    title: fileName,
-                },
-            };
-            return {
-                code: `
-          ${result.code}
-          const metadata = ${JSON.stringify(metadata)};
-          
-          MDXContent.metadata = metadata;
-        `,
-                map: result.map,
-            };
-        },
-    };
-}
+export * from './types/index.js';
+import { plugin } from "./utils/index.js";
+export default plugin;
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,gBAAgB,CAAA;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AAEtC;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ;IAC/B,IAAI,MAAe,CAAC;IACpB,MAAM,MAAM,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAEvC,OAAO;QACN,IAAI,EAAE,0BAA0B;QAEhC,4DAA4D;QAC5D,OAAO,EAAE,KAAK;QAEd;;;;WAIG;QACH,cAAc,CAAC,cAAuB;YACrC,4BAA4B;YAC5B,MAAM,GAAG,cAAc,CAAC;QACzB,CAAC;QAED;;;;;;WAMG;QACH,KAAK,CAAC,SAAS,CAAC,IAAY,EAAE,EAAU;YACvC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC;gBACjB,OAAO,IAAI,CAAC;YACb,CAAC;YAED,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;YAEpD,uCAAuC;YACvC,MAAM,MAAM,GAAG,MAAM,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;YAElD,sCAAsC;YACtC,MAAM,QAAQ,GAAG,EAAE;iBACjB,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,EAAE;iBACL,OAAO,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;YAE7B,2DAA2D;YAC3D,MAAM,QAAQ,GAAG;gBAChB,IAAI,EAAE,WAAW,CAAC,IAAI,IAAI,IAAI,QAAQ,EAAE;gBACxC,QAAQ,EAAE,WAAW,CAAC,QAAQ,IAAI;oBACjC,KAAK,EAAE,QAAQ;iBACf;aACD,CAAC;YAEF,OAAO;gBACN,IAAI,EAAE;YACE,MAAM,CAAC,IAAI;6BACM,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC;;;SAG5C;gBACL,GAAG,EAAE,MAAM,CAAC,GAAG;aACf,CAAC;QACH,CAAC;KACD,CAAC;AACH,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,eAAe,MAAM,CAAC"}

package/lib/types/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type Metadata } from "rasengan";
 /**
  * A React functional component that represents an MDX page.

package/lib/utils/create-filter.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Creates a filter function that can be used to filter a list of IDs based on include and exclude patterns.
+ *
+ * @param include - A string or array of strings representing the patterns to include.
+ * @param exclude - A string or array of strings representing the patterns to exclude.
+ * @returns A function that takes an ID string and returns `true` if the ID should be included, `false` otherwise.
+ */
+export default function createFilter(include: string, exclude?: string): (id: string) => boolean;

package/lib/utils/create-filter.js

@@ -0,0 +1,23 @@
+import micromatch from 'micromatch';
+/**
+ * Creates a filter function that can be used to filter a list of IDs based on include and exclude patterns.
+ *
+ * @param include - A string or array of strings representing the patterns to include.
+ * @param exclude - A string or array of strings representing the patterns to exclude.
+ * @returns A function that takes an ID string and returns `true` if the ID should be included, `false` otherwise.
+ */
+export default function createFilter(include, exclude) {
+    return function (id) {
+        if (typeof id !== "string")
+            return false;
+        const matcher = micromatch.matcher(include);
+        if (exclude) {
+            const excluder = micromatch.matcher(exclude);
+            return matcher(id) && !excluder(id);
+        }
+        else {
+            return matcher(id);
+        }
+    };
+}
+//# sourceMappingURL=create-filter.js.map

package/lib/utils/create-filter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-filter.js","sourceRoot":"","sources":["../../src/utils/create-filter.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CACnC,OAAe,EACf,OAAgB;IAEhB,OAAO,UAAU,EAAU;QAC1B,IAAI,OAAO,EAAE,KAAK,QAAQ;YAAE,OAAO,KAAK,CAAC;QAEvC,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAE5C,IAAI,OAAO,EAAE,CAAC;YACZ,MAAM,QAAQ,GAAG,UAAU,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YAC7C,OAAO,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;QACtC,CAAC;aAAM,CAAC;YACN,OAAO,OAAO,CAAC,EAAE,CAAC,CAAC;QACrB,CAAC;IACJ,CAAC,CAAC;AACH,CAAC"}

package/lib/utils/index.d.ts

@@ -1,2 +1,2 @@
-import generatePage from "./generate-page.js";
-export { generatePage };
+import plugin from "./plugin.js";
+export { plugin };

package/lib/utils/index.js

@@ -1,3 +1,3 @@
-import generatePage from "./generate-page.js";
-export { generatePage };
+import plugin from "./plugin.js";
+export { plugin };
 //# sourceMappingURL=index.js.map

package/lib/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,oBAAoB,CAAC;AAE9C,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/lib/utils/plugin.d.ts

@@ -0,0 +1,33 @@
+/**
+ * A Vite plugin that transforms MDX files into a format that can be used in a RasenganJs application.
+ *
+ * The plugin performs the following tasks:
+ * - Resolves the Vite configuration and stores it for later use.
+ * - Transforms MDX files by applying the `@mdx-js/rollup` transformation.
+ * - Extracts frontmatter data from the MDX files and creates a `metadata` object.
+ * - Appends the `metadata` object to the transformed MDX content.
+ *
+ * The transformed MDX content can then be used in the RasenganJs application, with the `metadata` object providing additional information about the content.
+ */
+export default function plugin(): {
+    name: string;
+    enforce: string;
+    config(config: unknown, env: any): void;
+    /**
+     * Stores the resolved Vite configuration for later use.
+     *
+     * @param resolvedConfig - The resolved Vite configuration object.
+     */
+    configResolved(resolvedConfig: unknown): void;
+    /**
+     * Transforms an MDX file by applying the `@mdx-js/rollup` transformation, extracting frontmatter data, and appending a `metadata` object to the transformed content.
+     *
+     * @param code - The content of the MDX file.
+     * @param id - The ID of the MDX file.
+     * @returns An object containing the transformed MDX code and a source map, or `null` if the file is not an MDX file.
+     */
+    transform(code: string, id: string): Promise<{
+        code: string;
+        map: import("rollup").SourceMapInput;
+    }>;
+};

package/lib/utils/plugin.js

@@ -0,0 +1,73 @@
+import mdx from '@mdx-js/rollup';
+import matter from 'gray-matter';
+import createFilter from './create-filter.js';
+/**
+ * A Vite plugin that transforms MDX files into a format that can be used in a RasenganJs application.
+ *
+ * The plugin performs the following tasks:
+ * - Resolves the Vite configuration and stores it for later use.
+ * - Transforms MDX files by applying the `@mdx-js/rollup` transformation.
+ * - Extracts frontmatter data from the MDX files and creates a `metadata` object.
+ * - Appends the `metadata` object to the transformed MDX content.
+ *
+ * The transformed MDX content can then be used in the RasenganJs application, with the `metadata` object providing additional information about the content.
+ */
+export default function plugin() {
+    let config;
+    const filter = createFilter("**/*.md?(x)");
+    const mdxInstance = mdx();
+    return {
+        name: "vite-plugin-rasengan-mdx",
+        // Apply transformation of the mdx file before other plugins
+        enforce: 'pre',
+        config(config, env) {
+            mdxInstance.config(config, env);
+        },
+        /**
+         * Stores the resolved Vite configuration for later use.
+         *
+         * @param resolvedConfig - The resolved Vite configuration object.
+         */
+        configResolved(resolvedConfig) {
+            // store the resolved config
+            config = resolvedConfig;
+        },
+        /**
+         * Transforms an MDX file by applying the `@mdx-js/rollup` transformation, extracting frontmatter data, and appending a `metadata` object to the transformed content.
+         *
+         * @param code - The content of the MDX file.
+         * @param id - The ID of the MDX file.
+         * @returns An object containing the transformed MDX code and a source map, or `null` if the file is not an MDX file.
+         */
+        async transform(code, id) {
+            if (!filter(id)) {
+                return null;
+            }
+            const { content, data: frontmatter } = matter(code);
+            // Apply transformation of the mdx file
+            const result = await mdxInstance.transform(content, id);
+            // Extract the file name from the path
+            const fileName = id
+                .split("/")
+                .pop()
+                .replace(/.page.mdx?$/, "");
+            // TODO: Consider other params of metadata from frontmatter
+            const metadata = {
+                path: frontmatter.path || `/${fileName}`,
+                metadata: frontmatter.metadata || {
+                    title: fileName,
+                },
+            };
+            return {
+                code: `
+          ${result.code}
+          const metadata = ${JSON.stringify(metadata)};
+          
+          MDXContent.metadata = metadata;
+        `,
+                map: result.map,
+            };
+        },
+    };
+}
+//# sourceMappingURL=plugin.js.map

package/lib/utils/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.js","sourceRoot":"","sources":["../../src/utils/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,gBAAgB,CAAA;AAChC,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,YAAY,MAAM,oBAAoB,CAAC;AAE9C;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM;IAC7B,IAAI,MAAe,CAAC;IACpB,MAAM,MAAM,GAAG,YAAY,CAAC,aAAa,CAAC,CAAC;IAC3C,MAAM,WAAW,GAAI,GAAG,EAAE,CAAC;IAE3B,OAAO;QACN,IAAI,EAAE,0BAA0B;QAEhC,4DAA4D;QAC5D,OAAO,EAAE,KAAK;QAEd,MAAM,CAAC,MAAe,EAAE,GAAQ;YAC/B,WAAW,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QACjC,CAAC;QAED;;;;WAIG;QACH,cAAc,CAAC,cAAuB;YACrC,4BAA4B;YAC5B,MAAM,GAAG,cAAc,CAAC;QACzB,CAAC;QAED;;;;;;WAMG;QACH,KAAK,CAAC,SAAS,CAAC,IAAY,EAAE,EAAU;YACvC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC;gBACjB,OAAO,IAAI,CAAC;YACb,CAAC;YAED,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;YAEpD,uCAAuC;YACvC,MAAM,MAAM,GAAG,MAAM,WAAW,CAAC,SAAS,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;YAExD,sCAAsC;YACtC,MAAM,QAAQ,GAAG,EAAE;iBACjB,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,EAAE;iBACL,OAAO,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;YAE7B,2DAA2D;YAC3D,MAAM,QAAQ,GAAG;gBAChB,IAAI,EAAE,WAAW,CAAC,IAAI,IAAI,IAAI,QAAQ,EAAE;gBACxC,QAAQ,EAAE,WAAW,CAAC,QAAQ,IAAI;oBACjC,KAAK,EAAE,QAAQ;iBACf;aACD,CAAC;YAEF,OAAO;gBACN,IAAI,EAAE;YACE,MAAM,CAAC,IAAI;6BACM,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC;;;SAG5C;gBACL,GAAG,EAAE,MAAM,CAAC,GAAG;aACf,CAAC;QACH,CAAC;KACD,CAAC;AACH,CAAC"}

package/package.json

@@ -1,49 +1,53 @@
 {
-  "name": "@rasenganjs/mdx",
-  "private": false,
-  "version": "1.0.0",
-  "description": "RasenganJS plugin for MDX support",
-  "type": "module",
-  "main": "lib/index.js",
-  "exports": {
-    ".": {
-      "import": "./lib/index.js",
-      "require": "./lib/index.js"
-    }
-  },
-  "author": {
-    "name": "dilane3",
-    "email": "komboudilane125@gmail.com",
-    "url": "https://dilane3.com",
-    "twitter": "https://twitter.com/dilanekombou",
-    "github": "https://github.com/dilane3"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/rasengan-dev/rasengan-mdx-plugin.git",
-    "issues": "https://github.com/rasengan-dev/rasengan-mdx-plugin/issues"
-  },
-  "license": "MIT",
-  "scripts": {
-    "build:clean": "rm -rf ./lib",
-    "build": "npm run build:clean && tsc",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "pack": "npm pack --pack-destination ./../../packages/@rasenganjs/mdx",
-    "deploy": "npm publish --access public"
-  },
-  "devDependencies": {
-    "@types/react": "^18.0.0",
-    "typescript": "^5.2.2"
-  },
-  "dependencies": {
-    "@mdx-js/rollup": "^3.0.1",
-    "@rollup/pluginutils": "^5.1.0",
-    "gray-matter": "^4.0.3",
-    "prism-react-renderer": "^2.3.1",
-    "prismjs": "^1.29.0"
-  },
-  "peerDependencies": {
-    "rasengan": "^1.0.0-beta.35",
-    "react": "^18.3.1"
-  }
+	"name": "@rasenganjs/mdx",
+	"private": false,
+	"version": "1.0.2",
+	"description": "RasenganJS plugin for MDX support",
+	"type": "module",
+	"main": "lib/index.js",
+	"exports": {
+		".": {
+			"import": "./lib/index.js",
+			"require": "./lib/index.js",
+			"types": "./lib/types/index.d.ts"
+		}
+	},
+	"author": {
+		"name": "dilane3",
+		"email": "komboudilane125@gmail.com",
+		"url": "https://dilane3.com",
+		"twitter": "https://twitter.com/dilanekombou",
+		"github": "https://github.com/dilane3"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/rasengan-dev/rasengan-mdx-plugin.git",
+		"issues": "https://github.com/rasengan-dev/rasengan-mdx-plugin/issues"
+	},
+	"license": "MIT",
+	"scripts": {
+		"build:clean": "rm -rf ./lib",
+		"build": "npm run build:clean && tsc",
+		"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+		"pack": "npm pack --pack-destination ./release",
+		"deploy": "npm publish --access public"
+	},
+	"devDependencies": {
+		"@types/micromatch": "^4.0.7",
+		"@types/node": "^22.7.4",
+		"@types/react": "^18.0.0",
+		"typescript": "^5.2.2"
+	},
+	"dependencies": {
+		"@mdx-js/rollup": "^3.0.1",
+		"gray-matter": "^4.0.3",
+		"micromatch": "^4.0.7",
+		"path-browserify": "^1.0.1",
+		"prism-react-renderer": "^2.3.1",
+		"prismjs": "^1.29.0"
+	},
+	"peerDependencies": {
+		"rasengan": "*",
+		"react": "^18.3.1"
+	}
 }

package/lib/utils/generate-page.d.ts

@@ -1,10 +0,0 @@
-import { type PageComponent } from "rasengan";
-import { MDXPageComponent } from "../types/index.js";
-/**
- * Generates a React component from an MDXPageComponent.
- *
- * @param MDXPage - The MDXPageComponent to generate the React component from.
- * @param className - An optional CSS class name to apply to the MDXRenderer component.
- * @returns A React component that renders the MDXPage content using the MDXRenderer.
- */
-export default function generatePage(MDXPage: MDXPageComponent, className?: string): PageComponent;

package/lib/utils/generate-page.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { MDXRenderer } from "../components/index.js";
-/**
- * Generates a React component from an MDXPageComponent.
- *
- * @param MDXPage - The MDXPageComponent to generate the React component from.
- * @param className - An optional CSS class name to apply to the MDXRenderer component.
- * @returns A React component that renders the MDXPage content using the MDXRenderer.
- */
-export default function generatePage(MDXPage, className = "") {
-    const Page = () => {
-        return _jsx(MDXRenderer, { className: className, children: MDXPage });
-    };
-    Page.path = MDXPage.metadata.path;
-    Page.metadata = MDXPage.metadata.metadata;
-    return Page;
-}
-//# sourceMappingURL=generate-page.js.map

package/lib/utils/generate-page.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"generate-page.js","sourceRoot":"","sources":["../../src/utils/generate-page.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CACnC,OAAyB,EACzB,SAAS,GAAG,EAAE;IAEd,MAAM,IAAI,GAAkB,GAAG,EAAE;QAChC,OAAO,KAAC,WAAW,IAAC,SAAS,EAAE,SAAS,YAAG,OAAO,GAAe,CAAC;IACnE,CAAC,CAAC;IAEF,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC;IAClC,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC;IAE1C,OAAO,IAAI,CAAC;AACb,CAAC"}

package/src/components/index.tsx

@@ -1,219 +0,0 @@
-import { themes, Highlight } from "prism-react-renderer";
-import React from "react";
-import { MDXPageComponent } from "../types/index.js";
-
-type ComponentWithTextChildrenProps = {
-	children: string;
-};
-
-type MDXRendererProps = {
-  children: MDXPageComponent;
-  className?: string;
-};
-
-type CodeBlockProps = ComponentWithTextChildrenProps & {
-  className?: string;
-};
-
-
-/**
- * A React component that renders a code block with syntax highlighting and a copy button.
- *
- * The component uses the `prism-react-renderer` library to provide syntax highlighting for the code block.
- * It also includes a copy button that allows the user to copy the code to their clipboard.
- *
- * @param {object} props - The component props.
- * @param {string} props.children - The code content to be displayed in the code block.
- * @param {string} [props.className] - The CSS class name to apply to the code block.
- * @returns {React.ReactElement} - The rendered code block component.
- */
-const CodeBlock = ({ children, className = "" }: CodeBlockProps): React.ReactElement => {
-	const language = className.replace(/language-/, "");
-
-	if (!language) {
-		return <SimpleBlock>{children}</SimpleBlock>;
-	}
-
-	return (
-		<Highlight
-			theme={themes.oneDark}
-			code={children.trim()}
-			language={language}
-		>
-			{({ className, tokens, getLineProps, getTokenProps }: any) => {
-				const [copied, setCopied] = React.useState(false);
-
-				React.useEffect(() => {
-					/**
-					 * Sets the `copied` state to `false` after 2 seconds, effectively hiding the "copied" indicator.
-					 * This function is called after the user's clipboard is updated with the code content.
-					 */
-					const timer = setTimeout(() => {
-						setCopied(false);
-					}, 2000);
-
-					return () => clearTimeout(timer);
-				}, [copied]);
-
-				/**
-				 * Copies the trimmed text content of the `children` prop to the user's clipboard.
-				 * This function is called when the "Copy" button is clicked in the code block component.
-				 * It sets the `copied` state to `true` for 2 seconds to display a "copied" indicator.
-				 */
-				const handleCopy = () => {
-					navigator.clipboard.writeText(children.trim());
-					setCopied(true);
-				};
-
-				return (
-					<pre
-						className={className}
-						style={{
-							color: "#fff",
-							backgroundColor: "#1d2529",
-							borderRadius: "20px",
-							overflow: "hidden",
-							padding: "0px",
-						}}
-					>
-						<div
-							style={{
-								width: "100%",
-								height: "50px",
-								backgroundColor: "#28373f",
-								display: "flex",
-								justifyContent: "space-between",
-								alignItems: "center",
-								paddingLeft: "20px",
-								paddingRight: "20px",
-							}}
-						>
-							<span>Filename</span>
-
-							<button className='copy-button' onClick={handleCopy}>
-								{copied ? (
-									<svg
-										xmlns='http://www.w3.org/2000/svg'
-										viewBox='0 0 24 24'
-										width='24'
-										height='24'
-										color='#f0f0f0'
-										fill='none'
-									>
-										<path
-											d='M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z'
-											stroke='currentColor'
-											strokeWidth='1.5'
-										/>
-										<path
-											d='M8 12.5L10.5 15L16 9'
-											stroke='currentColor'
-											strokeWidth='1.5'
-											strokeLinecap='round'
-											strokeLinejoin='round'
-										/>
-									</svg>
-								) : (
-									<svg
-										xmlns='http://www.w3.org/2000/svg'
-										viewBox='0 0 24 24'
-										width='24'
-										height='24'
-										color='#f0f0f0'
-										fill='none'
-									>
-										<path
-											d='M9 15C9 12.1716 9 10.7574 9.87868 9.87868C10.7574 9 12.1716 9 15 9L16 9C18.8284 9 20.2426 9 21.1213 9.87868C22 10.7574 22 12.1716 22 15V16C22 18.8284 22 20.2426 21.1213 21.1213C20.2426 22 18.8284 22 16 22H15C12.1716 22 10.7574 22 9.87868 21.1213C9 20.2426 9 18.8284 9 16L9 15Z'
-											stroke='currentColor'
-											strokeWidth='1.5'
-											strokeLinecap='round'
-											strokeLinejoin='round'
-										/>
-										<path
-											d='M16.9999 9C16.9975 6.04291 16.9528 4.51121 16.092 3.46243C15.9258 3.25989 15.7401 3.07418 15.5376 2.90796C14.4312 2 12.7875 2 9.5 2C6.21252 2 4.56878 2 3.46243 2.90796C3.25989 3.07417 3.07418 3.25989 2.90796 3.46243C2 4.56878 2 6.21252 2 9.5C2 12.7875 2 14.4312 2.90796 15.5376C3.07417 15.7401 3.25989 15.9258 3.46243 16.092C4.51121 16.9528 6.04291 16.9975 9 16.9999'
-											stroke='currentColor'
-											strokeWidth='1.5'
-											strokeLinecap='round'
-											strokeLinejoin='round'
-										/>
-									</svg>
-								)}
-							</button>
-						</div>
-
-						<div
-							style={{
-								padding: "20px",
-								fontSize: "14px",
-							}}
-						>
-							<code>
-								{tokens.map((line: any, i: number) => (
-									<div key={i} {...getLineProps({ line })}>
-										<span
-											style={{
-												opacity: 0.6,
-												marginRight: "5px",
-											}}
-										>
-											{i + 1}
-										</span>
-										<span> </span>
-										{line.map((token: any, key: number) => (
-											<span key={key} {...getTokenProps({ token })} />
-										))}
-									</div>
-								))}
-							</code>
-						</div>
-					</pre>
-				);
-			}}
-		</Highlight>
-	);
-};
-
-const SimpleBlock = ({ children }: ComponentWithTextChildrenProps): React.ReactElement => {
-	return (
-		<span 
-			className="simple-block"
-			style={{
-				fontSize: "14px",
-				borderRadius: "5px",
-				paddingLeft: "3.6px",
-				paddingRight: "3.6px",
-				paddingTop: "2px",
-				paddingBottom: "2px",
-				marginInline: "0px",
-				backgroundColor: "#f7f7f7",
-				border: "1px solid #f0f0f0",
-			}}
-		>{children}</span>
-	);
-};
-
-/**
- * Renders an MDX content component with a custom code block component.
- *
- * @param {MDXRendererProps} props - The props for the MDX renderer.
- * @param {React.ReactNode} props.children - The MDX content to render.
- * @param {string} [props.className] - An optional CSS class name to apply to the rendered section.
- * @returns {React.ReactElement} - The rendered MDX content with the custom code block component.
- */
-const MDXRenderer = ({ children: MDXContent, className }: MDXRendererProps): React.ReactElement => {
-	return (
-		<section className={"rasengan-markdown-body " + className}>
-			<MDXContent
-				components={{
-					code: CodeBlock,
-				}}
-			/>
-		</section>
-	);
-};
-
-export {
-  MDXRenderer,
-  CodeBlock,
-	SimpleBlock
-}

package/src/index.ts

@@ -1,82 +0,0 @@
-import mdx from '@mdx-js/rollup'
-import { createFilter } from "@rollup/pluginutils";
-import matter from 'gray-matter';
-
-export * from './types/index.js';
-export * from "./utils/index.js";
-export * from './components/index.js';
-
-/**
- * A Vite plugin that transforms MDX files into a format that can be used in a RasenganJs application.
- *
- * The plugin performs the following tasks:
- * - Resolves the Vite configuration and stores it for later use.
- * - Transforms MDX files by applying the `@mdx-js/rollup` transformation.
- * - Extracts frontmatter data from the MDX files and creates a `metadata` object.
- * - Appends the `metadata` object to the transformed MDX content.
- *
- * The transformed MDX content can then be used in the RasenganJs application, with the `metadata` object providing additional information about the content.
- */
-export default function rasengan() {
-	let config: unknown;
-	const filter = createFilter(/\.mdx?$/);
-
-	return {
-		name: "vite-plugin-rasengan-mdx",
-
-		// Apply transformation of the mdx file before other plugins
-		enforce: 'pre',
-
-		/**
-		 * Stores the resolved Vite configuration for later use.
-		 *
-		 * @param resolvedConfig - The resolved Vite configuration object.
-		 */
-		configResolved(resolvedConfig: unknown) {
-			// store the resolved config
-			config = resolvedConfig;
-		},
-
-		/**
-		 * Transforms an MDX file by applying the `@mdx-js/rollup` transformation, extracting frontmatter data, and appending a `metadata` object to the transformed content.
-		 *
-		 * @param code - The content of the MDX file.
-		 * @param id - The ID of the MDX file.
-		 * @returns An object containing the transformed MDX code and a source map, or `null` if the file is not an MDX file.
-		 */
-		async transform(code: string, id: string) {
-			if (!filter(id)) {
-				return null;
-			}
-
-			const { content, data: frontmatter } = matter(code);
-
-			// Apply transformation of the mdx file
-			const result = await mdx().transform(content, id);
-
-			// Extract the file name from the path
-			const fileName = id
-				.split("/")
-				.pop()
-				.replace(/.page.mdx?$/, "");
-
-			// TODO: Consider other params of metadata from frontmatter
-			const metadata = {
-				path: frontmatter.path || `/${fileName}`,
-				metadata: frontmatter.metadata || {
-					title: fileName,
-				},
-			};
-
-			return {
-				code: `
-          ${result.code}
-          const metadata = ${JSON.stringify(metadata)};
-          
-          MDXContent.metadata = metadata;
-        `,
-				map: result.map,
-			};
-		},
-	};
-}

package/src/types/index.ts

@@ -1,15 +0,0 @@
-import {type Metadata } from "rasengan";
-
-/**
- * A React functional component that represents an MDX page.
- *
- * The `MDXPageComponent` type extends the `React.FC<ReactComponentProps>` type, which means it is a React functional component that accepts the standard props for a React component.
- *
- * The `MDXPageComponent` type also has an optional `metadata` property of type `Metadata`, which can be used to store metadata about the page.
- */
-export type MDXPageComponent = React.FC<any> & {
-	metadata?: {
-    path: string;
-    metadata: Metadata;
-  };
-};

package/src/utils/generate-page.tsx

@@ -1,24 +0,0 @@
-import { type PageComponent } from "rasengan";
-import { MDXPageComponent } from "../types/index.js";
-import { MDXRenderer } from "../components/index.js";
-
-/**
- * Generates a React component from an MDXPageComponent.
- *
- * @param MDXPage - The MDXPageComponent to generate the React component from.
- * @param className - An optional CSS class name to apply to the MDXRenderer component.
- * @returns A React component that renders the MDXPage content using the MDXRenderer.
- */
-export default function generatePage(
-	MDXPage: MDXPageComponent,
-	className = ""
-): PageComponent {
-	const Page: PageComponent = () => {
-		return <MDXRenderer className={className}>{MDXPage}</MDXRenderer>;
-	};
-
-	Page.path = MDXPage.metadata.path;
-	Page.metadata = MDXPage.metadata.metadata;
-
-	return Page;
-}

package/src/utils/index.ts

@@ -1,3 +0,0 @@
-import generatePage from "./generate-page.js";
-
-export { generatePage };