@d1vij/jassm 0.1.1

package/LICENCE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Divij Verma
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,144 @@
+# Just another static site maker
+
+Create content driven sites using mdx (markdown + react) with added support of route safety.
+
+## What is this ??
+
+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.
+
+## Usage
+
+0. Initialize a react app using vite
+
+1. Install jassm
+
+```bash
+npm install @d1vij/jassm
+# OR
+pnpm add @d1vij/jassm
+# OR
+bun add @d1vij/jassm
+```
+
+2. Setup vite plugin in vite config
+
+```ts
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+import jassm from "jassm/plugin";
+
+export default defineConfig({
+    plugins: [
+        jassm(), // Put jassm plugin before react's plugin
+        react(),
+    ],
+});
+```
+
+3. Create a folder with `.mdx` assets
+
+```bash
+mkdir assets/mdx
+cd assets/mdx
+echo "# This is a Heading" > sample.mdx
+```
+
+4. Setup a mdx registry
+
+```ts
+// src/Registry.tsx
+
+import { generateRegistry } from "jassm";
+
+export const registry = generateRegistry({
+    modules: import.meta.glob("/src/assets/mdx/**/*.mdx"),
+    source: "/src/assets/mdx",
+    mountOn: "/root",
+    records: {
+        "/sample": "/example.mdx",
+    },
+});
+```
+
+5. Setup style classes
+
+```ts
+// src/stylesmap.ts
+import type { StyleClassesMap } from "jassm";
+
+// import stylesheet
+import "myStyles.css";
+
+export const stylesmap: StyleClassesMap = {
+    header: "myHeader",
+    paragraph: "pee",
+};
+```
+
+Or using css modules
+
+```ts
+import styles from "myStyles.module.css";
+
+import type { StyleClassesMap } from "jassm";
+
+export const stylesmap: StyleClassesMap = {
+    header: styles.myHeader,
+    paragraph: styles.pee,
+};
+```
+
+6. Using the registry in any other component
+
+```tsx
+// importing defined registry
+import { registry } from "./Registry";
+
+// importing styles map
+import {stylesmap} from "./stylesmap";
+
+import {MDXFromComponent} from "jassm";
+
+export default function Content() {
+    const Component = registry["/root/sample"];
+    return (
+        <div>
+            <MDXFromComponent
+                SourceComponent={Component}
+                styles={stylesmap}
+
+                {/* Optional fallback component for suspense*/}
+                fallback={<div>Loading</div>}
+            />
+        <div/>
+    )
+}
+```
+
+Using `MDXSourceComponent` automatically sets up the required enclosing StyleContext and Suspense component.
+
+The setup can also be done manually as follows
+
+```tsx
+import { StyleContext, Elements } from "jassm";
+
+import { registry } from "./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>
+    );
+}
+```

package/dist/index.d.ts

@@ -0,0 +1,78 @@
+import { MDXComponents } from "mdx/types";
+declare const Elements: MDXComponents;
+type JSX = React.JSX.Element | null;
+type HeaderLevels = 1 | 2 | 3 | 4 | 5 | 6;
+import { MDXComponents as MDXComponents2, MDXProps } from "mdx/types";
+/**
+* File extension(s) to accept
+*/
+type MDXFile = `${string}.mdx`;
+/**
+* Generated registry type
+*/
+type LazyRegistry<T extends Record<string, MDXFile>> = { readonly [K in keyof T] : React.LazyExoticComponent<React.ComponentType> };
+type Expand<T> = T extends infer O ? { [K in keyof O] : O[K] } : never;
+type MustStartWithSlash<T extends string> = T extends `/${string}` ? T : never;
+type MustNotEndWithSlash<T extends string> = T extends `${string}/` ? never : T;
+/**
+* Function to generate Registry mappings
+* @param MDXRegistryOptions
+* @returns
+*/
+declare function generateRegistry<
+	S extends string,
+	M extends string,
+	R extends Record<string, string>
+>({ modules, source, mountOn, records }: MDXRegistryOptions<S, M, R>): Expand<LazyRegistry<{ [K in keyof typeof records as `${typeof mountOn}${Extract<K, string>}`] : MDXFile }>>;
+/**
+* Options passed to {@link generateRegistry}
+*/
+type MDXRegistryOptions<
+	S extends string = string,
+	M extends string = string,
+	R extends Record<string, string> = Record<string, string>
+> = {
+	/**
+	* Module object returned from `import.meta.glob`
+	* @example import.module.glob("/src/assets/mdx/**\/*.mdx")
+	*/
+	modules: Record<string, () => Promise<unknown>>;
+	/**
+	*  Directory from which to resolve the source paths in {@link MDXRegistryOptions.records}
+	*/
+	source: MustNotEndWithSlash<S> & MustStartWithSlash<S>;
+	/**
+	* Virtual base path on which to mount the key of {@link MDXRegistryOptions.records}
+	*/
+	mountOn: MustNotEndWithSlash<M> & MustStartWithSlash<M>;
+	/**
+	* Mappings of virtual path to file paths under {@link MDXRegistryOptions.source}
+	*/
+	records: { [K in keyof R] : K extends string ? MustNotEndWithSlash<K> & MustStartWithSlash<K> extends never ? never : R[K] extends MustStartWithSlash<R[K]> & MDXFile ? R[K] : never : never };
+};
+/**
+* List of default style classes
+*/
+declare const StyleClassesList: readonly ["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"];
+type StyleClasses = (typeof StyleClassesList)[number];
+type StyleClassesMap = Partial<{ [K in StyleClasses] : string }>;
+/**
+* Context which defines styles for the loaded component(s)
+*/
+declare const StyleContext: React.Context<StyleClassesMap>;
+/**
+*  Hook to get defined style classes map
+* @returns {@link StyleClassesMap}
+*/
+declare function useStyles(): StyleClassesMap;
+type MDXFromComponentProps = {
+	SourceComponent: React.ComponentType<MDXProps>;
+	styles: StyleClassesMap;
+	elements?: MDXComponents2;
+	fallback?: React.ReactNode;
+};
+/**
+* Simple way to directly load a component from the Registry
+*/
+declare function MDXFromComponent({ SourceComponent, styles, fallback, elements }: MDXFromComponentProps): JSX;
+export { useStyles, generateRegistry, StyleContext, StyleClassesMap, StyleClassesList, StyleClasses, MDXRegistryOptions, MDXFromComponentProps, MDXFromComponent, MDXFile, LazyRegistry, HeaderLevels, Elements };

package/dist/index.js

@@ -0,0 +1,341 @@
+// 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"
+];
+var StyleContext = createContext({});
+function useStyles() {
+  return useContext(StyleContext);
+}
+
+// src/components/Elements/Anchor.tsx
+import { jsxDEV } from "react/jsx-dev-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__ */ jsxDEV("a", {
+    className: cn(styles.anchor),
+    target,
+    href: props.href,
+    children: props.children
+  }, undefined, false, undefined, this);
+}
+
+// src/components/Elements/BlockQuote.tsx
+import { cn as cn2 } from "@d1vij/shit-i-always-use";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+function BlockQuote(props) {
+  const styles = useStyles();
+  return /* @__PURE__ */ jsxDEV2("blockquote", {
+    className: cn2(styles.blockquote),
+    children: props.children
+  }, undefined, false, undefined, this);
+}
+
+// src/components/Elements/Bold.tsx
+import { cn as cn3 } from "@d1vij/shit-i-always-use";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+function Bold(props) {
+  const styles = useStyles();
+  return /* @__PURE__ */ jsxDEV3("span", {
+    className: cn3(styles.bold),
+    children: props.children
+  }, undefined, false, undefined, this);
+}
+
+// src/components/Elements/Code.tsx
+import { cn as cn4 } from "@d1vij/shit-i-always-use";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+function Code(props) {
+  const styles = useStyles();
+  const lang = /language-(\w+)/.exec(props.className || "")?.[1];
+  return /* @__PURE__ */ jsxDEV4("code", {
+    className: cn4(styles.code, lang && `language-${lang}`),
+    children: props.children
+  }, undefined, false, undefined, this);
+}
+
+// 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 { jsxDEV as jsxDEV5 } from "react/jsx-dev-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__ */ jsxDEV5("h1", {
+    className: cn5(styles.header, styles[`header_${props.level}`]),
+    children: /* @__PURE__ */ jsxDEV5("button", {
+      onClick: () => void handleClick(),
+      ref: headerRef,
+      id,
+      className: cn5(styles.header_button),
+      type: "button",
+      children: props.children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/components/Elements/HorizontalLine.tsx
+import { cn as cn6 } from "@d1vij/shit-i-always-use";
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+function HorizontalLine(_) {
+  const styles = useStyles();
+  return /* @__PURE__ */ jsxDEV6("hr", {
+    className: cn6(styles.horizontal_line)
+  }, undefined, false, undefined, this);
+}
+
+// src/components/Elements/Image.tsx
+import { cn as cn7 } from "@d1vij/shit-i-always-use";
+import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
+function Image(props) {
+  const styles = useStyles();
+  return /* @__PURE__ */ jsxDEV7("img", {
+    className: cn7(styles.image),
+    alt: props.alt,
+    title: props.title,
+    src: props.src
+  }, undefined, false, undefined, this);
+}
+
+// src/components/Elements/Italics.tsx
+import { cn as cn8 } from "@d1vij/shit-i-always-use";
+import { jsxDEV as jsxDEV8 } from "react/jsx-dev-runtime";
+function Italics(props) {
+  const styles = useStyles();
+  return /* @__PURE__ */ jsxDEV8("span", {
+    className: cn8(styles.italic),
+    children: props.children
+  }, undefined, false, undefined, this);
+}
+
+// src/components/Elements/List.tsx
+import { cn as cn9 } from "@d1vij/shit-i-always-use";
+import { jsxDEV as jsxDEV9 } from "react/jsx-dev-runtime";
+function List(props) {
+  const styles = useStyles();
+  const L = props.type === "ordered" ? "ol" : "ul";
+  return /* @__PURE__ */ jsxDEV9(L, {
+    className: cn9(styles.list, props.type === "ordered" && styles.ordered_list, props.type === "unordered" && styles.unordered_list),
+    children: props.children
+  }, undefined, false, undefined, this);
+}
+function ListItem(props) {
+  const styles = useStyles();
+  return /* @__PURE__ */ jsxDEV9("li", {
+    className: cn9(styles.list_item),
+    children: props.children
+  }, undefined, false, undefined, this);
+}
+
+// src/components/Elements/Paragraph.tsx
+import { cn as cn10 } from "@d1vij/shit-i-always-use";
+import { jsxDEV as jsxDEV10 } from "react/jsx-dev-runtime";
+function Paragraph(props) {
+  const styles = useStyles();
+  return /* @__PURE__ */ jsxDEV10("p", {
+    className: cn10(styles.paragraph),
+    children: props.children
+  }, undefined, false, undefined, this);
+}
+
+// src/components/Elements/Preformatted.tsx
+import { cn as cn11 } from "@d1vij/shit-i-always-use";
+import { jsxDEV as jsxDEV11 } from "react/jsx-dev-runtime";
+function Preformatted(props) {
+  const styles = useStyles();
+  return /* @__PURE__ */ jsxDEV11("pre", {
+    className: cn11(styles.preformatted),
+    children: props.children
+  }, undefined, false, undefined, this);
+}
+
+// src/components/Elements/Striked.tsx
+import { cn as cn12 } from "@d1vij/shit-i-always-use";
+import { jsxDEV as jsxDEV12 } from "react/jsx-dev-runtime";
+function Striked(props) {
+  const styles = useStyles();
+  return /* @__PURE__ */ jsxDEV12("span", {
+    className: cn12(styles.striked),
+    children: props.children
+  }, undefined, false, undefined, this);
+}
+
+// src/components/Elements/Table.tsx
+import { cn as cn13 } from "@d1vij/shit-i-always-use";
+import { jsxDEV as jsxDEV13 } from "react/jsx-dev-runtime";
+function Table(props) {
+  const styles = useStyles();
+  return /* @__PURE__ */ jsxDEV13("table", {
+    className: cn13(styles.table),
+    children: props.children
+  }, undefined, false, undefined, this);
+}
+function TableHead(props) {
+  const styles = useStyles();
+  return /* @__PURE__ */ jsxDEV13("thead", {
+    className: cn13(styles.table_head),
+    children: props.children
+  }, undefined, false, undefined, this);
+}
+function TableBody(props) {
+  const styles = useStyles();
+  return /* @__PURE__ */ jsxDEV13("tbody", {
+    className: cn13(styles.table_body),
+    children: props.children
+  }, undefined, false, undefined, this);
+}
+function TableRow(props) {
+  const styles = useStyles();
+  return /* @__PURE__ */ jsxDEV13("tr", {
+    className: cn13(styles.table_row),
+    children: props.children
+  }, undefined, false, undefined, this);
+}
+function TableHeadCell(props) {
+  const styles = useStyles();
+  return /* @__PURE__ */ jsxDEV13("th", {
+    className: cn13(styles.table_head_cell),
+    children: props.children
+  }, undefined, false, undefined, this);
+}
+function TableData(props) {
+  const styles = useStyles();
+  return /* @__PURE__ */ jsxDEV13("td", {
+    className: cn13(styles.table_data),
+    children: props.children
+  }, undefined, false, undefined, this);
+}
+
+// src/components/Elements/Elements.tsx
+var Elements = {
+  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/Registry.ts
+import { lazy } from "react";
+function generateRegistry({
+  modules,
+  source,
+  mountOn,
+  records
+}) {
+  const paths = [];
+  for (const [virtual, path] of Object.entries(records)) {
+    const src = `${source}${path}`;
+    const loader = modules[src];
+    if (!loader) {
+      throw new Error(`No such file exsits as ${src}`);
+    }
+    paths.push([`${mountOn}${virtual}`, lazy(loader)]);
+  }
+  return Object.fromEntries(paths);
+}
+// src/components/Loader.tsx
+import { jsxDEV as jsxDEV14 } from "react/jsx-dev-runtime";
+function MDXFromComponent({
+  SourceComponent,
+  styles,
+  fallback,
+  elements = Elements
+}) {
+  return /* @__PURE__ */ jsxDEV14(StyleContext, {
+    value: styles,
+    children: /* @__PURE__ */ jsxDEV14(Suspense, {
+      fallback,
+      children: /* @__PURE__ */ jsxDEV14(SourceComponent, {
+        components: elements
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+export {
+  useStyles,
+  generateRegistry,
+  StyleContext,
+  StyleClassesList,
+  MDXFromComponent,
+  Elements
+};

package/dist/vitePlugin.d.ts

@@ -0,0 +1,8 @@
+import { Options as MDXOptions } from "@mdx-js/rollup";
+import { Plugin } from "vite";
+/**
+* Vite plugin to support MDX conversion.
+* Users wont have to explicitly setup their vite config
+*/
+declare function MDXLoaderPlugin(opts?: MDXOptions): Plugin;
+export { MDXLoaderPlugin as default, MDXLoaderPlugin };

package/dist/vitePlugin.js

@@ -0,0 +1,14 @@
+// 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
+};

package/package.json

@@ -0,0 +1,75 @@
+{
+    "name": "@d1vij/jassm",
+    "description": "Just another static site maker. Create simple content driven sites using MDX and React along with Typescript safety.",
+    "version": "0.1.1",
+    "type": "module",
+    "files": [
+        "dist"
+    ],
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "import": {
+                "types": "./dist/index.d.ts",
+                "default": "./dist/index.js"
+            }
+        },
+        "./plugin": {
+            "import": "./dist/vitePlugin.js",
+            "types": "./dist/vitePlugin.d.ts"
+        },
+        "./package.json": "./package.json"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/d1vij/react-mdx-loader"
+    },
+    "homepage": "https://github.com/d1vij/react-mdx-loader",
+    "license": "MIT",
+    "sideEffects": false,
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "build": "bunup",
+        "dev:ui": "cd test/ui && vite",
+        "dev": "bunup --watch",
+        "prepare": "bun simple-git-hooks",
+        "type-check": "tsc --noEmit",
+        "prepack": "bun run build",
+        "release": "bumpp --commit --push --tag",
+        "lint": "biome check --fix && tsc -b",
+        "format": "biome format --write"
+    },
+    "devDependencies": {
+        "@biomejs/biome": "^2.4.4",
+        "@types/bun": "^1.3.9",
+        "@types/mdx": "^2.0.13",
+        "@types/react": "^19.2.14",
+        "@types/react-dom": "^19.2.3",
+        "bumpp": "^10.4.1",
+        "bunup": "^0.16.29",
+        "simple-git-hooks": "^2.13.1",
+        "typescript": "^5.9.3"
+    },
+    "peerDependencies": {
+        "@mdx-js/rollup": "^3.1.1",
+        "react": "^19.2.4",
+        "react-dom": "^19.2.4",
+        "remark-gfm": "^4.0.1",
+        "typescript": ">=4.5.0",
+        "vite": "^7.3.1"
+    },
+    "peerDependenciesMeta": {
+        "typescript": {
+            "optional": true
+        }
+    },
+    "dependencies": {
+        "@d1vij/shit-i-always-use": "^0.1.3"
+    },
+    "simple-git-hooks": {
+        "pre-commit": "bun run lint && bun run type-check"
+    }
+}