@d1vij/jassm 0.1.19-beta.1 → 0.1.20

package/README.md

@@ -1,20 +1,38 @@
 # Just another static site maker
 
-Create content driven sites using mdx (markdown + react) with added support typescript based autocompletion for the pages.
+Create content-driven sites using MDX (Markdown + React) with TypeScript-powered
+autocompletion and route awareness.
 
-## What is this ??
+---
+
+## What is this?
+
+JASSM is a lightweight abstraction layer over [mdx-js](https://mdxjs.com/) and
+its Vite plugin for building route-aware MDX registries.
 
-JASSM is a simple abstraction layer over [mdx-js](https://mdxjs.com/) and its vite plugin for creating a route/file aware loader for mdx file.
+It creates a single source of truth for MDX pages and exposes:
 
-Each page is configured at a single source of truth (registry) and thereby provides typesafe access throughout.
+- type-safe route keys
+- lazy React components
+- metadata registries
+- raw module exports
 
-(ps the DX is similar to that of TanstackRouter or Elysia)
+The developer experience is similar to TanStack Router or Elysia where
+route definitions produce strongly typed APIs.
+
+---
 
 ## Usage
 
-0. Initialize a react app using vite
+## 0. Initialize a React app using Vite
+
+```bash
+npm create vite@latest
+```
+
+---
 
-1. Install jassm
+## 1. Install JASSM
 
 ```bash
 npm install @d1vij/jassm
@@ -24,7 +42,9 @@ pnpm add @d1vij/jassm
 bun add @d1vij/jassm
 ```
 
-2. Setup vite plugin in vite config
+---
+
+## 2. Setup the Vite plugin
 
 ```ts
 import { defineConfig } from "vite";
@@ -33,128 +53,248 @@ import react from "@vitejs/plugin-react";
 import jassm from "@d1vij/jassm/plugin";
 
 export default defineConfig({
-  plugins: [
-    jassm(), // Put jassm plugin before react's plugin
-    react(),
-  ],
+    plugins: [
+        jassm(), // must come before react plugin
+        react(),
+    ],
 });
 ```
 
-3. Create a folder with `.mdx` assets
+---
 
-```bash
-mkdir assets/mdx
-cd assets/mdx
-echo "# This is a Heading" > sample.mdx
+## 3. Create a folder with `.mdx` assets
+
+Example project structure:
+
+```text
+src/
+  assets/
+    mdx/
+      sample.mdx
+      sample.meta.ts
+```
+
+Example MDX file:
+
+```mdx
+# Hello world
+
+This is my first mdx page.
 ```
 
-4. Setup a mdx registry
+Example metadata file:
 
 ```ts
-// src/Registry.tsx
+export default {
+    title: "Sample Page",
+};
+```
+
+---
+
+## 4. Create an MDX registry
+
+The registry maps `filesystem MDX files -> route keys`.
+
+```ts
+// src/content/registry.ts
 
 import { Registry } from "@d1vij/jassm";
 
 export const registry = new Registry({
-  modules: import.meta.glob("/src/assets/mdx/**/*.mdx"),
-  source: "/src/assets/mdx",
-  mountOn: "/root",
-  records: {
-    "/sample": "/example.mdx",
-  },
+    modulesGlob: import.meta.glob("/src/assets/mdx/**/*.mdx"),
+
+    metadataGlob: import.meta.glob("/src/assets/mdx/**/*.meta.ts", {
+        eager: true,
+        import: "default",
+    }),
+
+    root: "/src/assets/mdx",
+
+    // virtual mount point for routes
+    virtual: "/blog",
 });
 ```
 
-5. Setup style classes
+Given the file:
+
+```text
+/src/assets/mdx/sample.mdx
+```
+
+The generated route becomes:
+
+```text
+/blog/sample
+```
+
+All routes are available in:
+
+```ts
+registry.keys;
+```
+
+---
+
+## 5. Setup style classes
+
+JASSM maps MDX elements to CSS classes using a StyleClassesMap.
+
+## Using global CSS
 
 ```ts
 // src/stylesmap.ts
-import type { StyleClassesMap } from "jassm";
 
-// import stylesheet
-import "myStyles.css";
+import type { StyleClassesMap } from "@d1vij/jassm";
+
+import "./styles.css";
 
 export const stylesmap: StyleClassesMap = {
-  header: "myHeader",
-  paragraph: "pee",
+    header: "myHeader",
+    paragraph: "myParagraph",
 };
 ```
 
-Or using css modules
+---
+
+### Using CSS modules
 
 ```ts
-import styles from "myStyles.module.css";
+import styles from "./styles.module.css";
 
-import type { StyleClassesMap } from "jassm";
+import type { StyleClassesMap } from "@d1vij/jassm";
 
 export const stylesmap: StyleClassesMap = {
-  header: styles.myHeader,
-  paragraph: styles.pee,
+    header: styles.header,
+    paragraph: styles.paragraph,
 };
 ```
 
-6. Using the registry in any other component
+---
 
-```tsx
-// importing defined registry
-import { registry } from "./Registry";
+## 6. Using the registry in a component
 
-// importing styles map
-import {stylesmap} from "./stylesmap";
+```tsx
+import { registry } from "./content/registry";
+import { stylesmap } from "./stylesmap";
 
-import {MDXFromComponent} from "jassm";
+import { MDXFromComponent } from "@d1vij/jassm";
 
-import {use} from "react";
+import { use } from "react";
 
 type ExportType = {
     meta: {
-        title: string
-    }
+        title: string;
+    };
 };
 
 export default function Content() {
-    const Component = registry.getComponent("/root/sample");
-    const exports = use(registry.getExport<ExportType>("/root/sample")) // consuming the 'import' promise using use
+    const Component = registry.getComponent("/blog/sample");
+
+    const exports = use(registry.getExport<ExportType>("/blog/sample"));
+
     return (
         <div>
-            {exports.meta.title}
+            <h1>{exports.meta.title}</h1>
+
             <MDXFromComponent
                 SourceComponent={Component}
                 styles={stylesmap}
-
-                {/* Optional fallback component for suspense*/}
-                fallback={<div>Loading</div>}
+                fallback={<div>Loading...</div>}
             />
-        <div/>
-    )
+        </div>
+    );
 }
 ```
 
-Using `MDXSourceComponent` automatically sets up the required enclosing StyleContext and Suspense component.
+`MDXFromComponent` automatically provides:
+
+- `StyleContext`
+- `Suspense`
+- MDX element mappings
+
+---
 
-The setup can also be done manually as follows
+## Manual setup (advanced)
+
+You can manually compose the rendering pipeline.
 
 ```tsx
 import { StyleContext, Elements } from "@d1vij/jassm";
 
-import { registry } from "./Registry";
+import { registry } from "./content/registry";
 import { stylesmap } from "./stylesmap";
 
 import { Suspense } from "react";
 
-export default function MyLoader() {
-  const Component = registry["/root/sample"];
-
-  return (
-    <div>
-      <StyleContext styles={stylesmap}>
-        <Suspense>
-          <Component components={Elements} />
-        </Suspense>
-      </StyleContext>
-    </div>
-  );
+export default function Loader() {
+    const Component = registry.getComponent("/blog/sample");
+
+    return (
+        <StyleContext styles={stylesmap}>
+            <Suspense fallback={<div>Loading</div>}>
+                <Component components={Elements} />
+            </Suspense>
+        </StyleContext>
+    );
 }
 ```
 
 ---
+
+## Metadata access
+
+Metadata files (`*.meta.ts`) are eagerly loaded and accessible through the registry.
+
+```ts
+const metadata = registry.getMetadata("/blog/sample");
+
+console.log(metadata.title);
+```
+
+---
+
+## Registry utilities
+
+The registry exposes:
+
+```ts
+registry.keys; // all route keys
+registry.components; // lazy components
+registry.exports; // raw module exports
+registry.metadata; // metadata registry
+```
+
+It also provides a **consistency checker**:
+
+```ts
+registry.diffKeys();
+```
+
+This verifies that:
+
+- components
+- exports
+- metadata
+
+all share the same route keys.
+
+---
+
+## Multiple content directories
+
+Multiple registries can be merged:
+
+```ts
+import { CoalescedRegistry } from "@d1vij/jassm";
+
+const registry = new CoalescedRegistry(
+    blogRegistry,
+    docsRegistry,
+    guidesRegistry,
+);
+```
+
+This produces a single unified registry.
+
+---

package/dist/index.d.ts

@@ -43,7 +43,7 @@ type MustNotEndWithSlash<T extends string> = T extends `${string}/` ? never : T;
 * - starts with `/`
 * - does not end with `/`
 */
-type PathCheck<T extends string> = MustStartWithSlash<T> & MustNotEndWithSlash<T>;
+type PathCheck<T extends string> = T extends "" | "/" ? T : MustStartWithSlash<T> & MustNotEndWithSlash<T>;
 /**
 * Type returned by `import.meta.glob`
 */
@@ -56,7 +56,10 @@ type GlobResult<T> = Record<string, T>;
 * Removes `.mdx` extension from a path
 */
 type StripExtension<T extends string> = T extends `${infer Rest}.mdx` ? Rest : T;
-type ResolveEmptyVirtual<Virtual extends string> = Virtual extends "/" ? "" : Virtual;
+type JoinVirtual<
+	V extends string,
+	P extends string
+> = V extends "" ? P : `${V}/${P}`;
 /**
 * Derives the route keys produced by the registry and
 * replace filesystem root with a virtual route prefix
@@ -73,7 +76,7 @@ type RouteKey<
 	Modules extends Record<string, unknown>,
 	Root extends string,
 	Virtual extends string
-> = keyof { [K in keyof Modules as K extends `${string}${Root}/${infer Rest}.mdx` ? `${ResolveEmptyVirtual<Virtual>}/${Rest}` : never] : true } & string;
+> = Extract<keyof Modules, `${Root}/${string}.mdx`> extends `${Root}/${infer Rest}.mdx` ? JoinVirtual<Virtual, Rest> : never;
 /**
 * Options passed to {@link generateRegistry}
 */
@@ -98,7 +101,7 @@ type RegistryOptions<
 	/**
 	* Virtual route mount point
 	*/
-	virtual: PathCheck<Virtual>;
+	virtual: Virtual;
 };
 /**
 * Internal function used by {@link Registry}.
@@ -175,15 +178,15 @@ declare abstract class AbstractRegistry<
 	/**
 	* Retrieve a React component by route key
 	*/
-	getComponent(key: string): Components[keyof Components];
+	getComponent(key: keyof Components): Components[keyof Components];
 	/**
 	* Retrieve raw module exports for a route
 	*/
-	getExport(key: string): Exports[keyof Exports];
+	getExport(key: keyof Exports): Exports[keyof Exports];
 	/**
 	* Retrieve metadata for a route
 	*/
-	getMetadata(key: string): Metadata[keyof Metadata];
+	getMetadata(key: keyof Metadata): Metadata[keyof Metadata];
 }
 /**
 * Primary registry implementation.
@@ -193,7 +196,7 @@ declare abstract class AbstractRegistry<
 */
 declare class Registry<
 	MetaType,
-	Modules extends Record<`${Root}/${string}.mdx`, WrappedUnknownPromise>,
+	Modules extends Record<string, WrappedUnknownPromise>,
 	Root extends string,
 	Virtual extends string
 > extends AbstractRegistry<RouteKey<Modules, Root, Virtual>, Record<RouteKey<Modules, Root, Virtual>, React.LazyExoticComponent<React.ComponentType>>, Record<RouteKey<Modules, Root, Virtual>, unknown>, Record<RouteKey<Modules, Root, Virtual>, MetaType>> {

package/dist/index.js

@@ -1,661 +1,21 @@
-// src/components/Elements/Anchor.tsx
-import { cn } from "@d1vij/shit-i-always-use";
-import { useMemo, useState } from "react";
-
-// src/lib/StyleContext.ts
-import { createContext, useContext } from "react";
-var StyleClassesList = [
-  "header",
-  "header_button",
-  "header_1",
-  "header_2",
-  "header_3",
-  "header_4",
-  "header_5",
-  "header_6",
-  "header_icon",
-  "anchor",
-  "button",
-  "bold",
-  "italic",
-  "span",
-  "striked",
-  "paragraph",
-  "code",
-  "preformatted",
-  "blockquote",
-  "horizontal_line",
-  "image",
-  "list",
-  "unordered_list",
-  "ordered_list",
-  "list_item",
-  "table",
-  "table_head",
-  "table_head_cell",
-  "table_body",
-  "table_row",
-  "table_data",
-  "table_container",
-  "table_action_buttons_details",
-  "table_action_buttons_summary",
-  "table_action_button",
-  "table_action_button_html",
-  "table_action_button_csv",
-  "table_action_button_json",
-  "table_action_button_markdown"
-];
-var StyleContext = createContext(null);
-function useStyles() {
-  const ctx = useContext(StyleContext);
-  if (ctx === null)
-    throw new Error("No stylesmap found at any parent level. Either you forgot to pass the stylesmap to component loader or didnt wrap your component in StyleContext");
-  return ctx;
-}
-
-// src/components/Elements/Anchor.tsx
-import { jsx } from "react/jsx-runtime";
-function Anchor(props) {
-  const selfOrigin = useMemo(() => new URL(window.location.href).origin.toString(), []);
-  const styles = useStyles();
-  const [target] = useState(() => {
-    const href = props.href;
-    if (href?.match(/^#.*/)) {
-      return "_self";
-    }
-    const targetOrigin = new URL(props.href ?? "").origin.toString();
-    return targetOrigin === selfOrigin ? "_self" : "_blank";
-  });
-  return /* @__PURE__ */ jsx("a", {
-    className: cn(styles.anchor),
-    target,
-    href: props.href,
-    children: props.children
-  });
-}
-
-// src/components/Elements/BlockQuote.tsx
-import { cn as cn2 } from "@d1vij/shit-i-always-use";
-import { jsx as jsx2 } from "react/jsx-runtime";
-function BlockQuote(props) {
-  const styles = useStyles();
-  return /* @__PURE__ */ jsx2("blockquote", {
-    className: cn2(styles.blockquote),
-    children: props.children
-  });
-}
-
-// src/components/Elements/Bold.tsx
-import { cn as cn3 } from "@d1vij/shit-i-always-use";
-import { jsx as jsx3 } from "react/jsx-runtime";
-function Bold(props) {
-  const styles = useStyles();
-  return /* @__PURE__ */ jsx3("span", {
-    className: cn3(styles.bold),
-    children: props.children
-  });
-}
-
-// src/components/Elements/Code.tsx
-import { cn as cn4 } from "@d1vij/shit-i-always-use";
-import { jsx as jsx4 } from "react/jsx-runtime";
-function Code(props) {
-  const styles = useStyles();
-  const lang = /language-(\w+)/.exec(props.className || "")?.[1];
-  return /* @__PURE__ */ jsx4("code", {
-    className: cn4(styles.code, lang && `language-${lang}`),
-    children: props.children
-  });
-}
-
-// src/components/Elements/Heading.tsx
-import { cn as cn5, useClipboardText } from "@d1vij/shit-i-always-use";
-import { useEffect, useRef, useState as useState2 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-function Header(props) {
-  const styles = useStyles();
-  const headerRef = useRef(null);
-  const [id, setId] = useState2("");
-  const { copy } = useClipboardText();
-  async function handleClick() {
-    const url = new URL(`/#${id}`, window.location.origin).toString();
-    console.log("clicked");
-    await copy(url);
-  }
-  useEffect(() => {
-    if (!headerRef.current)
-      return;
-    const raw = headerRef.current.textContent ?? "";
-    const safe = raw.toLowerCase().replace(/[^a-z0-9\s-]/g, "").trim().replace(/\s+/g, "-").slice(0, 30);
-    setId(safe);
-  }, []);
-  return /* @__PURE__ */ jsx5("h1", {
-    className: cn5(styles.header, styles[`header_${props.level}`]),
-    children: /* @__PURE__ */ jsx5("button", {
-      onClick: () => void handleClick(),
-      ref: headerRef,
-      id,
-      className: cn5(styles.header_button),
-      type: "button",
-      children: props.children
-    })
-  });
-}
-
-// src/components/Elements/HorizontalLine.tsx
-import { cn as cn6 } from "@d1vij/shit-i-always-use";
-import { jsx as jsx6 } from "react/jsx-runtime";
-function HorizontalLine(_) {
-  const styles = useStyles();
-  return /* @__PURE__ */ jsx6("hr", {
-    className: cn6(styles.horizontal_line)
-  });
-}
-
-// src/components/Elements/Image.tsx
-import { cn as cn7 } from "@d1vij/shit-i-always-use";
-import { jsx as jsx7 } from "react/jsx-runtime";
-function Image(props) {
-  const styles = useStyles();
-  return /* @__PURE__ */ jsx7("img", {
-    className: cn7(styles.image),
-    alt: props.alt,
-    title: props.title,
-    src: props.src
-  });
-}
-
-// src/components/Elements/Italics.tsx
-import { cn as cn8 } from "@d1vij/shit-i-always-use";
-import { jsx as jsx8 } from "react/jsx-runtime";
-function Italics(props) {
-  const styles = useStyles();
-  return /* @__PURE__ */ jsx8("span", {
-    className: cn8(styles.italic),
-    children: props.children
-  });
-}
-
-// src/components/Elements/List.tsx
-import { cn as cn9 } from "@d1vij/shit-i-always-use";
-import { jsx as jsx9 } from "react/jsx-runtime";
-function List(props) {
-  const styles = useStyles();
-  const L = props.type === "ordered" ? "ol" : "ul";
-  return /* @__PURE__ */ jsx9(L, {
-    className: cn9(styles.list, props.type === "ordered" && styles.ordered_list, props.type === "unordered" && styles.unordered_list),
-    children: props.children
-  });
-}
-function ListItem(props) {
-  const styles = useStyles();
-  return /* @__PURE__ */ jsx9("li", {
-    className: cn9(styles.list_item),
-    children: props.children
-  });
-}
-
-// src/components/Elements/Paragraph.tsx
-import { cn as cn10 } from "@d1vij/shit-i-always-use";
-import { jsx as jsx10 } from "react/jsx-runtime";
-function Paragraph(props) {
-  const styles = useStyles();
-  return /* @__PURE__ */ jsx10("p", {
-    className: cn10(styles.paragraph),
-    children: props.children
-  });
-}
-
-// src/components/Elements/Preformatted.tsx
-import { cn as cn11 } from "@d1vij/shit-i-always-use";
-import { jsx as jsx11 } from "react/jsx-runtime";
-function Preformatted(props) {
-  const styles = useStyles();
-  return /* @__PURE__ */ jsx11("pre", {
-    className: cn11(styles.preformatted),
-    children: props.children
-  });
-}
-
-// src/components/Elements/Striked.tsx
-import { cn as cn12 } from "@d1vij/shit-i-always-use";
-import { jsx as jsx12 } from "react/jsx-runtime";
-function Striked(props) {
-  const styles = useStyles();
-  return /* @__PURE__ */ jsx12("span", {
-    className: cn12(styles.striked),
-    children: props.children
-  });
-}
-
-// src/components/Elements/Table.tsx
-import {
-  cn as cn13,
-  useClipboardText as useClipboardText2
-} from "@d1vij/shit-i-always-use";
-import { useCallback, useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
-import { jsx as jsx13, jsxs } from "react/jsx-runtime";
-function TableActionButton({
-  label,
-  onClick,
-  setOpen
-}) {
-  const styles = useStyles();
-  function handleClick(e) {
-    setOpen(false);
-    onClick(e);
-  }
-  return /* @__PURE__ */ jsx13("button", {
-    onClick: handleClick,
-    className: cn13(styles.table_action_button),
-    type: "button",
-    children: label
-  });
-}
-function getTableAsJson(elm) {
-  const headings = [];
-  const theadElms = elm.querySelectorAll("thead > tr > th");
-  theadElms.forEach((th) => {
-    headings.push(th.innerText.trim());
-  });
-  const rows = [];
-  const rowElms = elm.querySelectorAll("tbody > tr");
-  rowElms.forEach((tr) => {
-    const row = [];
-    tr.querySelectorAll("td").forEach((td, idx) => {
-      row.push({
-        column: headings[idx] ?? idx.toString(),
-        content: td.innerText.trim()
-      });
-    });
-    rows.push(row);
-  });
-  return {
-    meta: {
-      columns: headings.length,
-      rows: rowElms.length
-    },
-    headings,
-    rows
-  };
-}
-function getTableJsonAsCsv(json) {
-  const heading = json.headings.join(",");
-  const rows = json.rows.map((row) => row.map((cell) => cell.content).join(",")).join(`
-`);
-  return [heading, rows].join(`
-`);
-}
-function getTableJsonAsHtml(json) {
-  const heading = json.headings.map((h) => `<th>${h}</th>`).join("");
-  const rows = json.rows.map((row) => {
-    const cells = row.map((c) => `<td>${c.content}</td>`).join("");
-    return `<tr>${cells}</tr>`;
-  });
-  return [
-    "<table>",
-    "<thead>",
-    `<tr>${heading}</tr>`,
-    "</thead>",
-    "<tbody>",
-    ...rows,
-    "</tbody>",
-    "</table>"
-  ].join(`
-`);
-}
-function getTableJsonAsMarkdown(json) {
-  const heading = `|${json.headings.join("|")}|`;
-  const separator = `|${json.headings.map(() => "-----").join("|")}|`;
-  const rows = json.rows.map((row) => `|${row.map((cell) => cell.content).join("|")}|`);
-  return [heading, separator, ...rows].join(`
-`);
-}
-function Table(props) {
-  const styles = useStyles();
-  const ref = useRef2(null);
-  const detailsRef = useRef2(null);
-  const [open, setOpen] = useState3(false);
-  const { copy } = useClipboardText2();
-  useEffect2(() => {
-    const elm = detailsRef.current;
-    if (!elm)
-      return;
-    function handleMouseLeave() {
-      setOpen(false);
-    }
-    function handleMouseEnter() {
-      setOpen(true);
-    }
-    elm.addEventListener("mouseenter", handleMouseEnter);
-    elm.addEventListener("mouseleave", handleMouseLeave);
-    return () => {
-      elm.removeEventListener("mouseenter", handleMouseEnter);
-      elm.removeEventListener("mouseleave", handleMouseLeave);
-    };
-  }, []);
-  const copyAs = useCallback((format) => {
-    return async () => {
-      const elm = ref.current;
-      if (!elm)
-        return;
-      const json = getTableAsJson(elm);
-      let extractedText;
-      switch (format) {
-        case "html":
-          extractedText = getTableJsonAsHtml(json);
-          break;
-        case "csv":
-          extractedText = getTableJsonAsCsv(json);
-          break;
-        case "markdown":
-          extractedText = getTableJsonAsMarkdown(json);
-          break;
-        case "json":
-          extractedText = JSON.stringify(json, null, 4);
-          break;
-        default:
-          return;
-      }
-      await copy(extractedText);
-    };
-  }, [copy]);
-  return /* @__PURE__ */ jsxs("div", {
-    className: cn13(styles.table_container),
-    children: [
-      /* @__PURE__ */ jsx13("table", {
-        ref,
-        className: cn13(styles.table),
-        children: props.children
-      }),
-      /* @__PURE__ */ jsxs("details", {
-        ref: detailsRef,
-        className: cn13(styles.table_action_buttons_details),
-        open,
-        children: [
-          /* @__PURE__ */ jsx13("summary", {
-            className: cn13(styles.table_action_buttons_summary),
-            children: "Copy"
-          }),
-          /* @__PURE__ */ jsx13(TableActionButton, {
-            setOpen,
-            label: "HTML",
-            onClick: copyAs("html")
-          }),
-          /* @__PURE__ */ jsx13(TableActionButton, {
-            setOpen,
-            label: "CSV",
-            onClick: copyAs("csv")
-          }),
-          /* @__PURE__ */ jsx13(TableActionButton, {
-            setOpen,
-            label: "Json",
-            onClick: copyAs("json")
-          }),
-          /* @__PURE__ */ jsx13(TableActionButton, {
-            setOpen,
-            label: "Markdown",
-            onClick: copyAs("markdown")
-          })
-        ]
-      })
-    ]
-  });
-}
-function TableHead(props) {
-  const styles = useStyles();
-  return /* @__PURE__ */ jsx13("thead", {
-    className: cn13(styles.table_head),
-    children: props.children
-  });
-}
-function TableBody(props) {
-  const styles = useStyles();
-  return /* @__PURE__ */ jsx13("tbody", {
-    className: cn13(styles.table_body),
-    children: props.children
-  });
-}
-function TableRow(props) {
-  const styles = useStyles();
-  return /* @__PURE__ */ jsx13("tr", {
-    className: cn13(styles.table_row),
-    children: props.children
-  });
-}
-function TableHeadCell(props) {
-  const styles = useStyles();
-  return /* @__PURE__ */ jsx13("th", {
-    className: cn13(styles.table_head_cell),
-    children: props.children
-  });
-}
-function TableData(props) {
-  const styles = useStyles();
-  return /* @__PURE__ */ jsx13("td", {
-    className: cn13(styles.table_data),
-    children: props.children
-  });
-}
-
-// src/components/Elements/Elements.tsx
-var BaseElementTags = [
-  "h1",
-  "h2",
-  "h3",
-  "h4",
-  "h5",
-  "h6",
-  "a",
-  "em",
-  "del",
-  "strong",
-  "code",
-  "blockquote",
-  "pre",
-  "p",
-  "hr",
-  "ol",
-  "ul",
-  "li",
-  "img",
-  "table",
-  "thead",
-  "tbody",
-  "th",
-  "tr",
-  "td"
-];
-var BaseElements = {
-  h1: (props) => Header({ ...props, level: 1 }),
-  h2: (props) => Header({ ...props, level: 2 }),
-  h3: (props) => Header({ ...props, level: 3 }),
-  h4: (props) => Header({ ...props, level: 4 }),
-  h5: (props) => Header({ ...props, level: 5 }),
-  h6: (props) => Header({ ...props, level: 6 }),
-  a: Anchor,
-  em: Italics,
-  del: Striked,
-  strong: Bold,
-  code: Code,
-  blockquote: BlockQuote,
-  pre: Preformatted,
-  p: Paragraph,
-  hr: HorizontalLine,
-  ol: (props) => List({ ...props, type: "ordered" }),
-  ul: (props) => List({ ...props, type: "unordered" }),
-  li: ListItem,
-  img: Image,
-  table: Table,
-  thead: TableHead,
-  tbody: TableBody,
-  th: TableHeadCell,
-  tr: TableRow,
-  td: TableData
-};
-// src/components/Loader.tsx
-import { Suspense } from "react";
-
-// src/lib/generateElements.ts
-function generateElementsFrom(elements, baseElements = true) {
-  if (baseElements) {
-    return { ...BaseElements, ...elements };
-  } else
-    return { ...elements };
-}
-// src/lib/Registry.ts
-import { lazy } from "react";
-function generateRegistry({
-  modulesGlob,
-  metadataGlob,
-  root,
-  virtual
-}) {
-  const paths = Object.keys(modulesGlob);
-  const keys = [];
-  const _components = [];
-  const _exports = [];
-  const _metadata = [];
-  for (const path of paths) {
-    const route = path.replace(root, virtual).replace(".mdx", "");
-    const loader = modulesGlob[path];
-    keys.push(route);
-    _components.push([route, lazy(loader)]);
-    _exports.push([route, loader()]);
-    const metaLoader = metadataGlob[path.replace(".mdx", ".meta.ts")];
-    console.log(typeof metaLoader);
-    _metadata.push([route, metaLoader]);
-  }
-  return {
-    keys,
-    components: Object.fromEntries(_components),
-    exports: Object.fromEntries(_exports),
-    metadata: Object.fromEntries(_metadata)
-  };
-}
-
-class AbstractRegistry {
-  diffKeys() {
-    const keySet = new Set(this.keys);
-    const exportsSet = new Set(Object.keys(this.exports));
-    const metadataSet = new Set(Object.keys(this.metadata));
-    const exportsDiff = keySet.symmetricDifference(exportsSet);
-    const metadataDiff = keySet.symmetricDifference(metadataSet);
-    const errMsg = [];
-    const diffs = {
-      inComponentsButNotInExports: undefined,
-      inComponentsButNotInMetadata: undefined,
-      inExportsButNotInComponents: undefined,
-      inMetadataButNotInComponents: undefined
-    };
-    if (exportsDiff.size !== 0) {
-      diffs.inComponentsButNotInExports = Array.from(keySet.difference(exportsSet));
-      diffs.inExportsButNotInComponents = Array.from(exportsSet.difference(keySet));
-      errMsg.push(`Exports Registry and Component Registry have ${exportsDiff.size} key mismatches.
+import{cn as Z}from"@d1vij/shit-i-always-use";import{useMemo as R,useState as G}from"react";import{createContext as W,useContext as Y}from"react";var $o=["header","header_button","header_1","header_2","header_3","header_4","header_5","header_6","header_icon","anchor","button","bold","italic","span","striked","paragraph","code","preformatted","blockquote","horizontal_line","image","list","unordered_list","ordered_list","list_item","table","table_head","table_head_cell","table_body","table_row","table_data","table_container","table_action_buttons_details","table_action_buttons_summary","table_action_button","table_action_button_html","table_action_button_csv","table_action_button_json","table_action_button_markdown"],J=W(null);function e(){let o=Y(J);if(o===null)throw Error("No stylesmap found at any parent level. Either you forgot to pass the stylesmap to component loader or didnt wrap your component in StyleContext");return o}import{jsx as x}from"react/jsx-runtime";function H(o){let t=R(()=>new URL(window.location.href).origin.toString(),[]),r=e(),[n]=G(()=>{if(o.href?.match(/^#.*/))return"_self";return new URL(o.href??"").origin.toString()===t?"_self":"_blank"});return x("a",{className:Z(r.anchor),target:n,href:o.href,children:o.children})}import{cn as j}from"@d1vij/shit-i-always-use";import{jsx as oo}from"react/jsx-runtime";function E(o){let t=e();return oo("blockquote",{className:j(t.blockquote),children:o.children})}import{cn as to}from"@d1vij/shit-i-always-use";import{jsx as eo}from"react/jsx-runtime";function _(o){let t=e();return eo("span",{className:to(t.bold),children:o.children})}import{cn as ro}from"@d1vij/shit-i-always-use";import{jsx as no}from"react/jsx-runtime";function P(o){let t=e(),r=/language-(\w+)/.exec(o.className||"")?.[1];return no("code",{className:ro(t.code,r&&`language-${r}`),children:o.children})}import{cn as v,useClipboardText as lo}from"@d1vij/shit-i-always-use";import{useEffect as so,useRef as mo,useState as co}from"react";import{jsx as B}from"react/jsx-runtime";function h(o){let t=e(),r=mo(null),[n,s]=co(""),{copy:l}=lo();async function m(){let a=new URL(`/#${n}`,window.location.origin).toString();console.log("clicked"),await l(a)}return so(()=>{if(!r.current)return;let c=(r.current.textContent??"").toLowerCase().replace(/[^a-z0-9\s-]/g,"").trim().replace(/\s+/g,"-").slice(0,30);s(c)},[]),B("h1",{className:v(t.header,t[`header_${o.level}`]),children:B("button",{onClick:()=>void m(),ref:r,id:n,className:v(t.header_button),type:"button",children:o.children})})}import{cn as ao}from"@d1vij/shit-i-always-use";import{jsx as po}from"react/jsx-runtime";function S(o){let t=e();return po("hr",{className:ao(t.horizontal_line)})}import{cn as io}from"@d1vij/shit-i-always-use";import{jsx as uo}from"react/jsx-runtime";function X(o){let t=e();return uo("img",{className:io(t.image),alt:o.alt,title:o.title,src:o.src})}import{cn as fo}from"@d1vij/shit-i-always-use";import{jsx as ho}from"react/jsx-runtime";function O(o){let t=e();return ho("span",{className:fo(t.italic),children:o.children})}import{cn as q}from"@d1vij/shit-i-always-use";import{jsx as M}from"react/jsx-runtime";function b(o){let t=e(),r=o.type==="ordered"?"ol":"ul";return M(r,{className:q(t.list,o.type==="ordered"&&t.ordered_list,o.type==="unordered"&&t.unordered_list),children:o.children})}function C(o){let t=e();return M("li",{className:q(t.list_item),children:o.children})}import{cn as bo}from"@d1vij/shit-i-always-use";import{jsx as yo}from"react/jsx-runtime";function $(o){let t=e();return yo("p",{className:bo(t.paragraph),children:o.children})}import{cn as To}from"@d1vij/shit-i-always-use";import{jsx as Jo}from"react/jsx-runtime";function g(o){let t=e();return Jo("pre",{className:To(t.preformatted),children:o.children})}import{cn as Eo}from"@d1vij/shit-i-always-use";import{jsx as Po}from"react/jsx-runtime";function k(o){let t=e();return Po("span",{className:Eo(t.striked),children:o.children})}import{cn as u,useClipboardText as So}from"@d1vij/shit-i-always-use";import{useCallback as Xo,useEffect as go,useRef as I,useState as wo}from"react";import{jsx as p,jsxs as z}from"react/jsx-runtime";function y({label:o,onClick:t,setOpen:r}){let n=e();function s(l){r(!1),t(l)}return p("button",{onClick:s,className:u(n.table_action_button),type:"button",children:o})}function No(o){let t=[];o.querySelectorAll("thead > tr > th").forEach((l)=>{t.push(l.innerText.trim())});let n=[],s=o.querySelectorAll("tbody > tr");return s.forEach((l)=>{let m=[];l.querySelectorAll("td").forEach((a,c)=>{m.push({column:t[c]??c.toString(),content:a.innerText.trim()})}),n.push(m)}),{meta:{columns:t.length,rows:s.length},headings:t,rows:n}}function Lo(o){let t=o.headings.join(","),r=o.rows.map((n)=>n.map((s)=>s.content).join(",")).join(`
+`);return[t,r].join(`
+`)}function Ao(o){let t=o.headings.map((n)=>`<th>${n}</th>`).join(""),r=o.rows.map((n)=>{return`<tr>${n.map((l)=>`<td>${l.content}</td>`).join("")}</tr>`});return["<table>","<thead>",`<tr>${t}</tr>`,"</thead>","<tbody>",...r,"</tbody>","</table>"].join(`
+`)}function Ho(o){let t=`|${o.headings.join("|")}|`,r=`|${o.headings.map(()=>"-----").join("|")}|`,n=o.rows.map((s)=>`|${s.map((l)=>l.content).join("|")}|`);return[t,r,...n].join(`
+`)}function Q(o){let t=e(),r=I(null),n=I(null),[s,l]=wo(!1),{copy:m}=So();go(()=>{let c=n.current;if(!c)return;function f(){l(!1)}function i(){l(!0)}return c.addEventListener("mouseenter",i),c.addEventListener("mouseleave",f),()=>{c.removeEventListener("mouseenter",i),c.removeEventListener("mouseleave",f)}},[]);let a=Xo((c)=>{return async()=>{let f=r.current;if(!f)return;let i=No(f),d;switch(c){case"html":d=Ao(i);break;case"csv":d=Lo(i);break;case"markdown":d=Ho(i);break;case"json":d=JSON.stringify(i,null,4);break;default:return}await m(d)}},[m]);return z("div",{className:u(t.table_container),children:[p("table",{ref:r,className:u(t.table),children:o.children}),z("details",{ref:n,className:u(t.table_action_buttons_details),open:s,children:[p("summary",{className:u(t.table_action_buttons_summary),children:"Copy"}),p(y,{setOpen:l,label:"HTML",onClick:a("html")}),p(y,{setOpen:l,label:"CSV",onClick:a("csv")}),p(y,{setOpen:l,label:"Json",onClick:a("json")}),p(y,{setOpen:l,label:"Markdown",onClick:a("markdown")})]})]})}function D(o){let t=e();return p("thead",{className:u(t.table_head),children:o.children})}function U(o){let t=e();return p("tbody",{className:u(t.table_body),children:o.children})}function V(o){let t=e();return p("tr",{className:u(t.table_row),children:o.children})}function F(o){let t=e();return p("th",{className:u(t.table_head_cell),children:o.children})}function K(o){let t=e();return p("td",{className:u(t.table_data),children:o.children})}var jt=["h1","h2","h3","h4","h5","h6","a","em","del","strong","code","blockquote","pre","p","hr","ol","ul","li","img","table","thead","tbody","th","tr","td"],T={h1:(o)=>h({...o,level:1}),h2:(o)=>h({...o,level:2}),h3:(o)=>h({...o,level:3}),h4:(o)=>h({...o,level:4}),h5:(o)=>h({...o,level:5}),h6:(o)=>h({...o,level:6}),a:H,em:O,del:k,strong:_,code:P,blockquote:E,pre:g,p:$,hr:S,ol:(o)=>b({...o,type:"ordered"}),ul:(o)=>b({...o,type:"unordered"}),li:C,img:X,table:Q,thead:D,tbody:U,th:F,tr:V,td:K};import{Suspense as qo}from"react";function ne(o,t=!0){if(t)return{...T,...o};else return{...o}}import{lazy as _o}from"react";function vo({modulesGlob:o,metadataGlob:t,root:r,virtual:n}){let s=Object.keys(o),l=[],m=[],a=[],c=[],f=n==="/"||n===""?"":n;console.log("virtual",f);for(let i of s){let d=i.replace(`${r}/`,f).replace(".mdx","");console.log(d);let L=o[i];l.push(d),m.push([d,_o(L)]),a.push([d,L()]);let A=t[i.replace(".mdx",".meta.ts")];console.log(typeof A),c.push([d,A])}return{keys:l,components:Object.fromEntries(m),exports:Object.fromEntries(a),metadata:Object.fromEntries(c)}}class w{diffKeys(){let o=new Set(this.keys),t=new Set(Object.keys(this.exports)),r=new Set(Object.keys(this.metadata)),n=o.symmetricDifference(t),s=o.symmetricDifference(r),l=[],m={inComponentsButNotInExports:void 0,inComponentsButNotInMetadata:void 0,inExportsButNotInComponents:void 0,inMetadataButNotInComponents:void 0};if(n.size!==0)m.inComponentsButNotInExports=Array.from(o.difference(t)),m.inExportsButNotInComponents=Array.from(t.difference(o)),l.push(`Exports Registry and Component Registry have ${n.size} key mismatches.
                 Keys which are present in Component map but not in Exports
-                	${diffs.inComponentsButNotInExports.join(`
+                	${m.inComponentsButNotInExports.join(`
 	`)}
                 and the keys present in Exports but not in component map are
-                	${diffs.inExportsButNotInComponents.join(`
+                	${m.inExportsButNotInComponents.join(`
 	`)}
-                `);
-    }
-    if (metadataDiff.size !== 0) {
-      diffs.inComponentsButNotInMetadata = Array.from(keySet.difference(metadataSet));
-      diffs.inMetadataButNotInComponents = Array.from(metadataDiff.difference(keySet));
-      errMsg.push(`Metadata Registry and Component Registry have ${metadataDiff.size} key mismatches.
+                `);if(s.size!==0)m.inComponentsButNotInMetadata=Array.from(o.difference(r)),m.inMetadataButNotInComponents=Array.from(s.difference(o)),l.push(`Metadata Registry and Component Registry have ${s.size} key mismatches.
                 Keys which are present in Component map but not in Metadata
-                	${diffs.inComponentsButNotInMetadata.join(`
+                	${m.inComponentsButNotInMetadata.join(`
 	`)}
                 and the keys present in Metadata but not in Component map are
-                	${diffs.inMetadataButNotInComponents.join(`
+                	${m.inMetadataButNotInComponents.join(`
 	`)}
-                `);
-    }
-    if (errMsg.length === 0)
-      return null;
-    return {
-      diffs,
-      error: new Error(errMsg.join(`
-
-`))
-    };
-  }
-  get(_from, key) {
-    const value = _from[key];
-    if (!value) {
-      throw new Error(`Invalid key passed ${key.toString()} to access whatever the fuck we were extractign`);
-    }
-    return value;
-  }
-  getComponent(key) {
-    return this.get(this.components, key);
-  }
-  getExport(key) {
-    return this.get(this.exports, key);
-  }
-  getMetadata(key) {
-    return this.get(this.metadata, key);
-  }
-}
-
-class Registry extends AbstractRegistry {
-  keys;
-  components;
-  exports;
-  metadata;
-  constructor(opts) {
-    super();
-    const result = generateRegistry(opts);
-    this.keys = result.keys;
-    this.components = result.components;
-    this.exports = result.exports;
-    this.metadata = result.metadata;
-  }
-}
+                `);if(l.length===0)return null;return{diffs:m,error:Error(l.join(`
 
-class CoalescedRegistry extends AbstractRegistry {
-  keys = [];
-  components = {};
-  exports = {};
-  metadata = {};
-  constructor(...registries) {
-    super();
-    for (const registry of registries) {
-      this.keys.push(...registry.keys);
-      Object.assign(this.components, registry.components);
-      Object.assign(this.exports, registry.exports);
-      Object.assign(this.metadata, registry.metadata);
-    }
-  }
-}
-// src/components/Loader.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
-function MDXFromComponent({
-  source: SourceComponent,
-  styles,
-  fallback,
-  elements = BaseElements
-}) {
-  return /* @__PURE__ */ jsx14(StyleContext, {
-    value: styles,
-    children: /* @__PURE__ */ jsx14(Suspense, {
-      fallback,
-      children: /* @__PURE__ */ jsx14(SourceComponent, {
-        components: elements
-      })
-    })
-  });
-}
-export {
-  useStyles,
-  generateRegistry,
-  generateElementsFrom,
-  StyleContext,
-  StyleClassesList,
-  Registry,
-  MDXFromComponent,
-  CoalescedRegistry,
-  BaseElements,
-  BaseElementTags
-};
+`))}}get(o,t){let r=o[t];if(!r)throw Error(`Invalid key passed ${t.toString()} to access whatever the fuck we were extractign`);return r}getComponent(o){return this.get(this.components,o)}getExport(o){return this.get(this.exports,o)}getMetadata(o){return this.get(this.metadata,o)}}class Bo extends w{keys;components;exports;metadata;constructor(o){super();let t=vo(o);this.keys=t.keys,this.components=t.components,this.exports=t.exports,this.metadata=t.metadata}}class Oo extends w{keys=[];components={};exports={};metadata={};constructor(...o){super();for(let t of o)this.keys.push(...t.keys),Object.assign(this.components,t.components),Object.assign(this.exports,t.exports),Object.assign(this.metadata,t.metadata)}}import{jsx as N}from"react/jsx-runtime";function Co({source:o,styles:t,fallback:r,elements:n=T}){return N(J,{value:t,children:N(qo,{fallback:r,children:N(o,{components:n})})})}export{e as useStyles,vo as generateRegistry,ne as generateElementsFrom,J as StyleContext,$o as StyleClassesList,Bo as Registry,Co as MDXFromComponent,Oo as CoalescedRegistry,T as BaseElements,jt as BaseElementTags};

package/dist/vitePlugin.js

@@ -1,14 +1 @@
-// src/vitePlugin.ts
-import mdx from "@mdx-js/rollup";
-import remarkGFM from "remark-gfm";
-function MDXLoaderPlugin(opts) {
-  return mdx({
-    ...opts,
-    remarkPlugins: [remarkGFM]
-  });
-}
-var vitePlugin_default = MDXLoaderPlugin;
-export {
-  vitePlugin_default as default,
-  MDXLoaderPlugin
-};
+import q from"@mdx-js/rollup";import z from"remark-gfm";function A(b){return q({...b,remarkPlugins:[z]})}var H=A;export{H as default,A as MDXLoaderPlugin};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@d1vij/jassm",
-    "version": "0.1.19-beta.1",
+    "version": "0.1.20",
     "description": "Just another static site maker. Create simple content driven sites using MDX and React along with Typescript safety.",
     "homepage": "https://github.com/d1vij/jassm",
     "license": "MIT",