@rasenganjs/mdx 1.0.0 → 1.0.1

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,34 @@
-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(): {
+/// <reference types="node" />
+export * from './types/index.js';
+import { generatePage } from "./utils/index.js";
+export default function (): ({
     name: string;
     enforce: string;
-    /**
-     * Stores the resolved Vite configuration for later use.
-     *
-     * @param resolvedConfig - The resolved Vite configuration object.
-     */
+    config(config: unknown, env: any): void;
     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;
     }>;
-};
+} | {
+    name: string;
+    config: (config: any, env: any) => {
+        define: {
+            process: NodeJS.Process;
+        };
+        build: {
+            rollupOptions: {
+                plugins: import("rollup").Plugin<any>[];
+            };
+        };
+    };
+    apply: string;
+})[];
+export { generatePage };

package/lib/index.js

@@ -1,72 +1,14 @@
-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, generatePage, globalsPolyfill } from "./utils/index.js";
+export default function () {
+    return [plugin(), globalsPolyfill()];
 }
+export { generatePage };
 //# 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,YAAY,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEzE,MAAM,CAAC,OAAO;IACZ,OAAO,CAAC,MAAM,EAAE,EAAE,eAAe,EAAE,CAAC,CAAC;AACvC,CAAC;AACD,OAAO,EAAE,YAAY,EAAE,CAAC"}

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/globals.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="node" />
+/**
+ * Provides a Vite plugin that polyfills the `process` and `Buffer` global variables for the browser.
+ * This is necessary for certain libraries that expect these global variables to be available.
+ * The plugin is applied during the build phase of the Vite build process.
+ */
+export default function globals(): {
+    name: string;
+    config: (config: any, env: any) => {
+        define: {
+            process: NodeJS.Process;
+        };
+        build: {
+            rollupOptions: {
+                plugins: import("rollup").Plugin<any>[];
+            };
+        };
+    };
+    apply: string;
+};

package/lib/utils/globals.js

@@ -0,0 +1,30 @@
+import inject from "@rollup/plugin-inject";
+/**
+ * Provides a Vite plugin that polyfills the `process` and `Buffer` global variables for the browser.
+ * This is necessary for certain libraries that expect these global variables to be available.
+ * The plugin is applied during the build phase of the Vite build process.
+ */
+export default function globals() {
+    return {
+        name: "vite-plugin-rasengan-global-polyfill",
+        config: function config(config, env) {
+            // test if we are on the browser
+            return {
+                define: {
+                    process: process,
+                },
+                build: {
+                    rollupOptions: {
+                        plugins: [
+                            inject({
+                                Buffer: ["buffer", "Buffer"],
+                            }),
+                        ],
+                    },
+                },
+            };
+        },
+        apply: "build",
+    };
+}
+//# sourceMappingURL=globals.js.map

package/lib/utils/globals.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"globals.js","sourceRoot":"","sources":["../../src/utils/globals.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAE3C;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO;IAC9B,OAAO;QACN,IAAI,EAAE,sCAAsC;QAC5C,MAAM,EAAE,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG;YAClC,gCAAgC;YAChC,OAAO;gBACN,MAAM,EAAE;oBACP,OAAO,EAAE,OAAO;iBAChB;gBAED,KAAK,EAAE;oBACN,aAAa,EAAE;wBACd,OAAO,EAAE;4BACR,MAAM,CAAC;gCACN,MAAM,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;6BAC5B,CAAC;yBACF;qBACD;iBACD;aACD,CAAC;QACH,CAAC;QAED,KAAK,EAAE,OAAO;KACd,CAAC;AACH,CAAC"}

package/lib/utils/index.d.ts

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

package/lib/utils/index.js

@@ -1,3 +1,6 @@
 import generatePage from "./generate-page.js";
-export { generatePage };
+import plugin from "./plugin.js";
+// import nodePolyfill from "./polyfills.js";
+import globalsPolyfill from "./globals.js";
+export { generatePage, plugin, globalsPolyfill };
 //# 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,YAAY,MAAM,oBAAoB,CAAC;AAC9C,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,6CAA6C;AAC7C,OAAO,eAAe,MAAM,cAAc,CAAC;AAE3C,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,eAAe,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/lib/utils/polyfills.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="node" />
+/**
+ * A Vite plugin that provides polyfills for Node.js modules and APIs when running in a browser environment.
+ * This plugin is designed to work with the Vite bundler and helps ensure compatibility with Node.js-based code
+ * that is being used in a browser context.
+ *
+ * The plugin configures Vite's resolver to map various Node.js modules and APIs to their browser-compatible
+ * counterparts, allowing the code to run seamlessly in the browser without requiring changes to the original
+ * Node.js-based implementation.
+ *
+ * This plugin is particularly useful when working with libraries or frameworks that rely on Node.js-specific
+ * functionality, such as the `process` object or various built-in modules like `fs`, `crypto`, and `http`.
+ */
+export default function polyfill(): {
+    name: string;
+    config: (config: any, env: any) => {
+        define: {
+            "process.env": NodeJS.ProcessEnv;
+        };
+        resolve: {
+            alias: {
+                find: string;
+                replacement: string;
+            }[];
+        };
+    };
+    enforce: string;
+    apply: string;
+};

package/lib/utils/polyfills.js

@@ -0,0 +1,120 @@
+/**
+ * A Vite plugin that provides polyfills for Node.js modules and APIs when running in a browser environment.
+ * This plugin is designed to work with the Vite bundler and helps ensure compatibility with Node.js-based code
+ * that is being used in a browser context.
+ *
+ * The plugin configures Vite's resolver to map various Node.js modules and APIs to their browser-compatible
+ * counterparts, allowing the code to run seamlessly in the browser without requiring changes to the original
+ * Node.js-based implementation.
+ *
+ * This plugin is particularly useful when working with libraries or frameworks that rely on Node.js-specific
+ * functionality, such as the `process` object or various built-in modules like `fs`, `crypto`, and `http`.
+ */
+export default function polyfill() {
+    return {
+        name: "vite-plugin-rasengan-node-polyfill",
+        config: function config(config, env) {
+            // test if we are on the browser
+            return {
+                define: {
+                    "process.env": process.env,
+                },
+                resolve: {
+                    alias: [
+                        // {
+                        // 	find: "assert",
+                        // 	replacement: "assert",
+                        // },
+                        // {
+                        // 	find: "buffer",
+                        // 	replacement: "buffer/",
+                        // },
+                        // {
+                        // 	find: "process",
+                        // 	replacement: "process/browser.js",
+                        // },
+                        // {
+                        // 	find: "console",
+                        // 	replacement: "console-browserify",
+                        // },
+                        {
+                            find: "fs",
+                            replacement: "browserify-fs",
+                        },
+                        // {
+                        // 	find: "crypto",
+                        // 	replacement: "crypto-browserify",
+                        // },
+                        // {
+                        // 	find: "domain",
+                        // 	replacement: "domain-browser",
+                        // },
+                        // {
+                        // 	find: "events",
+                        // 	replacement: "events",
+                        // },
+                        // {
+                        // 	find: "http",
+                        // 	replacement: "stream-http",
+                        // },
+                        // {
+                        // 	find: "https",
+                        // 	replacement: "https-browserify",
+                        // },
+                        // {
+                        // 	find: "path",
+                        // 	replacement: "path-browserify",
+                        // },
+                        // {
+                        // 	find: "punycode",
+                        // 	replacement: "punycode",
+                        // },
+                        // {
+                        // 	find: "querystring",
+                        // 	replacement: "querystring-es3",
+                        // },
+                        // {
+                        // 	find: "stream",
+                        // 	replacement: "stream-browserify",
+                        // },
+                        // {
+                        // 	find: "string_decoder",
+                        // 	replacement: "string_decoder",
+                        // },
+                        // {
+                        // 	find: "sys",
+                        // 	replacement: "util",
+                        // },
+                        // {
+                        // 	find: "timers",
+                        // 	replacement: "timers-browserify",
+                        // },
+                        // {
+                        // 	find: "tty",
+                        // 	replacement: "tty-browserify",
+                        // },
+                        // {
+                        // 	find: "url",
+                        // 	replacement: "url",
+                        // },
+                        // {
+                        // 	find: "util",
+                        // 	replacement: "util",
+                        // },
+                        // {
+                        // 	find: "vm",
+                        // 	replacement: "vm-browserify",
+                        // },
+                        // {
+                        // 	find: "zlib",
+                        // 	replacement: "browserify-zlib",
+                        // },
+                    ],
+                },
+            };
+        },
+        enforce: "pre",
+        apply: "build",
+    };
+}
+//# sourceMappingURL=polyfills.js.map

package/lib/utils/polyfills.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"polyfills.js","sourceRoot":"","sources":["../../src/utils/polyfills.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ;IAC/B,OAAO;QACN,IAAI,EAAE,oCAAoC;QAC1C,MAAM,EAAE,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG;YAClC,gCAAgC;YAChC,OAAO;gBACN,MAAM,EAAE;oBACP,aAAa,EAAE,OAAO,CAAC,GAAG;iBAC1B;gBAED,OAAO,EAAE;oBACR,KAAK,EAAE;wBACN,IAAI;wBACJ,mBAAmB;wBACnB,0BAA0B;wBAC1B,KAAK;wBACL,IAAI;wBACJ,mBAAmB;wBACnB,2BAA2B;wBAC3B,KAAK;wBACL,IAAI;wBACJ,oBAAoB;wBACpB,sCAAsC;wBACtC,KAAK;wBACL,IAAI;wBACJ,oBAAoB;wBACpB,sCAAsC;wBACtC,KAAK;wBACL;4BACC,IAAI,EAAE,IAAI;4BACV,WAAW,EAAE,eAAe;yBAC5B;wBACD,IAAI;wBACJ,mBAAmB;wBACnB,qCAAqC;wBACrC,KAAK;wBACL,IAAI;wBACJ,mBAAmB;wBACnB,kCAAkC;wBAClC,KAAK;wBACL,IAAI;wBACJ,mBAAmB;wBACnB,0BAA0B;wBAC1B,KAAK;wBACL,IAAI;wBACJ,iBAAiB;wBACjB,+BAA+B;wBAC/B,KAAK;wBACL,IAAI;wBACJ,kBAAkB;wBAClB,oCAAoC;wBACpC,KAAK;wBACL,IAAI;wBACJ,iBAAiB;wBACjB,mCAAmC;wBACnC,KAAK;wBACL,IAAI;wBACJ,qBAAqB;wBACrB,4BAA4B;wBAC5B,KAAK;wBACL,IAAI;wBACJ,wBAAwB;wBACxB,mCAAmC;wBACnC,KAAK;wBACL,IAAI;wBACJ,mBAAmB;wBACnB,qCAAqC;wBACrC,KAAK;wBACL,IAAI;wBACJ,2BAA2B;wBAC3B,kCAAkC;wBAClC,KAAK;wBACL,IAAI;wBACJ,gBAAgB;wBAChB,wBAAwB;wBACxB,KAAK;wBACL,IAAI;wBACJ,mBAAmB;wBACnB,qCAAqC;wBACrC,KAAK;wBACL,IAAI;wBACJ,gBAAgB;wBAChB,kCAAkC;wBAClC,KAAK;wBACL,IAAI;wBACJ,gBAAgB;wBAChB,uBAAuB;wBACvB,KAAK;wBACL,IAAI;wBACJ,iBAAiB;wBACjB,wBAAwB;wBACxB,KAAK;wBACL,IAAI;wBACJ,eAAe;wBACf,iCAAiC;wBACjC,KAAK;wBACL,IAAI;wBACJ,iBAAiB;wBACjB,mCAAmC;wBACnC,KAAK;qBACL;iBACD;aACD,CAAC;QACH,CAAC;QACD,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,OAAO;KACd,CAAC;AACH,CAAC"}

package/lib/utils/test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/utils/test.js

@@ -0,0 +1,6 @@
+import micromatch from 'micromatch';
+const matcher = micromatch.matcher("**/*.md?(x)");
+console.log({
+    test: matcher("/Users/dilanekoumbou/Documents/projects/Personal/Rasengan Framework/projects/mdx/src/app/blog.page.mdx")
+});
+//# sourceMappingURL=test.js.map

package/lib/utils/test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"test.js","sourceRoot":"","sources":["../../src/utils/test.js"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;AAElD,OAAO,CAAC,GAAG,CAAC;IACV,IAAI,EAAE,OAAO,CAAC,wGAAwG,CAAC;CACxH,CAAC,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rasenganjs/mdx",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "RasenganJS plugin for MDX support",
   "type": "module",
   "main": "lib/index.js",
@@ -32,18 +32,23 @@
     "deploy": "npm publish --access public"
   },
   "devDependencies": {
+    "@types/micromatch": "^4.0.7",
     "@types/react": "^18.0.0",
     "typescript": "^5.2.2"
   },
   "dependencies": {
     "@mdx-js/rollup": "^3.0.1",
-    "@rollup/pluginutils": "^5.1.0",
+    "@rollup/plugin-inject": "^5.0.5",
+    "browserify-fs": "^1.0.0",
     "gray-matter": "^4.0.3",
+    "micromatch": "^4.0.7",
+    "path-browserify": "^1.0.1",
     "prism-react-renderer": "^2.3.1",
-    "prismjs": "^1.29.0"
+    "prismjs": "^1.29.0",
+    "stream-browserify": "^3.0.0"
   },
   "peerDependencies": {
-    "rasengan": "^1.0.0-beta.35",
+    "rasengan": "*",
     "react": "^18.3.1"
   }
 }

package/src/index.ts

@@ -1,82 +1,15 @@
-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.
+ * License: MIT
+ * 
+ * Copyright (c) 2024 Dilane Kombou
+ * 
+ * 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: 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,
-				},
-			};
+export * from './types/index.js';
+import { plugin, generatePage, globalsPolyfill } from "./utils/index.js";
 
-			return {
-				code: `
-          ${result.code}
-          const metadata = ${JSON.stringify(metadata)};
-          
-          MDXContent.metadata = metadata;
-        `,
-				map: result.map,
-			};
-		},
-	};
+export default function() {
+  return [plugin(), globalsPolyfill()];
 }
+export { generatePage };

package/src/utils/create-filter.ts

@@ -0,0 +1,26 @@
+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: string,
+	exclude?: string
+) {
+	return function (id: string) {
+		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);
+    }
+	};
+}

package/src/utils/globals.ts

@@ -0,0 +1,32 @@
+import inject from "@rollup/plugin-inject";
+
+/**
+ * Provides a Vite plugin that polyfills the `process` and `Buffer` global variables for the browser.
+ * This is necessary for certain libraries that expect these global variables to be available.
+ * The plugin is applied during the build phase of the Vite build process.
+ */
+export default function globals() {
+	return {
+		name: "vite-plugin-rasengan-global-polyfill",
+		config: function config(config, env) {
+			// test if we are on the browser
+			return {
+				define: {
+					process: process,
+				},
+
+				build: {
+					rollupOptions: {
+						plugins: [
+							inject({
+								Buffer: ["buffer", "Buffer"],
+							}),
+						],
+					},
+				},
+			};
+		},
+
+		apply: "build",
+	};
+}

package/src/utils/index.ts

@@ -1,3 +1,6 @@
 import generatePage from "./generate-page.js";
+import plugin from "./plugin.js";
+// import nodePolyfill from "./polyfills.js";
+import globalsPolyfill from "./globals.js";
 
-export { generatePage };
+export { generatePage, plugin, globalsPolyfill };

package/src/utils/plugin.ts

@@ -0,0 +1,83 @@
+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: unknown;
+	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: unknown, env: any) {
+			mdxInstance.config(config, env);
+		},
+
+		/**
+		 * 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 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,
+			};
+		},
+	};
+}

package/src/utils/polyfills.ts

@@ -0,0 +1,120 @@
+/**
+ * A Vite plugin that provides polyfills for Node.js modules and APIs when running in a browser environment.
+ * This plugin is designed to work with the Vite bundler and helps ensure compatibility with Node.js-based code
+ * that is being used in a browser context.
+ *
+ * The plugin configures Vite's resolver to map various Node.js modules and APIs to their browser-compatible
+ * counterparts, allowing the code to run seamlessly in the browser without requiring changes to the original
+ * Node.js-based implementation.
+ *
+ * This plugin is particularly useful when working with libraries or frameworks that rely on Node.js-specific
+ * functionality, such as the `process` object or various built-in modules like `fs`, `crypto`, and `http`.
+ */
+export default function polyfill() {
+	return {
+		name: "vite-plugin-rasengan-node-polyfill",
+		config: function config(config, env) {
+			// test if we are on the browser
+			return {
+				define: {
+					"process.env": process.env,
+				},
+
+				resolve: {
+					alias: [
+						// {
+						// 	find: "assert",
+						// 	replacement: "assert",
+						// },
+						// {
+						// 	find: "buffer",
+						// 	replacement: "buffer/",
+						// },
+						// {
+						// 	find: "process",
+						// 	replacement: "process/browser.js",
+						// },
+						// {
+						// 	find: "console",
+						// 	replacement: "console-browserify",
+						// },
+						{
+							find: "fs",
+							replacement: "browserify-fs",
+						},
+						// {
+						// 	find: "crypto",
+						// 	replacement: "crypto-browserify",
+						// },
+						// {
+						// 	find: "domain",
+						// 	replacement: "domain-browser",
+						// },
+						// {
+						// 	find: "events",
+						// 	replacement: "events",
+						// },
+						// {
+						// 	find: "http",
+						// 	replacement: "stream-http",
+						// },
+						// {
+						// 	find: "https",
+						// 	replacement: "https-browserify",
+						// },
+						// {
+						// 	find: "path",
+						// 	replacement: "path-browserify",
+						// },
+						// {
+						// 	find: "punycode",
+						// 	replacement: "punycode",
+						// },
+						// {
+						// 	find: "querystring",
+						// 	replacement: "querystring-es3",
+						// },
+						// {
+						// 	find: "stream",
+						// 	replacement: "stream-browserify",
+						// },
+						// {
+						// 	find: "string_decoder",
+						// 	replacement: "string_decoder",
+						// },
+						// {
+						// 	find: "sys",
+						// 	replacement: "util",
+						// },
+						// {
+						// 	find: "timers",
+						// 	replacement: "timers-browserify",
+						// },
+						// {
+						// 	find: "tty",
+						// 	replacement: "tty-browserify",
+						// },
+						// {
+						// 	find: "url",
+						// 	replacement: "url",
+						// },
+						// {
+						// 	find: "util",
+						// 	replacement: "util",
+						// },
+						// {
+						// 	find: "vm",
+						// 	replacement: "vm-browserify",
+						// },
+						// {
+						// 	find: "zlib",
+						// 	replacement: "browserify-zlib",
+						// },
+					],
+				},
+			};
+		},
+		enforce: "pre",
+		apply: "build",
+	};
+}

package/src/utils/test.js

@@ -0,0 +1,7 @@
+import micromatch from 'micromatch';
+
+const matcher = micromatch.matcher("**/*.md?(x)");
+
+console.log({
+  test: matcher("/Users/dilanekoumbou/Documents/projects/Personal/Rasengan Framework/projects/mdx/src/app/blog.page.mdx")
+})