@d1vij/react-mdx-loader 0.1.2 → 0.1.3

package/dist/index.d.ts

@@ -10,14 +10,4 @@ type MDXFromComponentProps = {
 	SourceComponent: MDXSourceComponent;
 };
 declare function MDXFromComponent({ SourceComponent }: MDXFromComponentProps): JSX;
-import { Options as MDXOptions } from "@mdx-js/rollup";
-import { Plugin } from "vite";
-type MDXLoaderPluginOptions = {
-	mdxPluginOptions?: MDXOptions;
-};
-/**
-* Vite plugin to support MDX conversion.
-* Users wont have to explicitly setup their vite config
-*/
-declare function MDXLoaderPlugin({ mdxPluginOptions }: MDXLoaderPluginOptions): Plugin;
-export { StyleContext, MDXLoaderPlugin, MDXFromComponent, HeaderLevels };
+export { StyleContext, MDXFromComponent, HeaderLevels };

package/dist/index.js

@@ -1 +1,259 @@
-import{createContext as U,useContext as G}from"react";var p=U({});function o(){return G(p)}import{cn as R}from"@d1vij/shit-i-always-use";import{useMemo as W,useState as Y}from"react";import{jsxDEV as Z}from"react/jsx-dev-runtime";function h(t){let e=W(()=>new URL(window.location.href).origin.toString(),[]),r=o(),[s]=Y(()=>{if(t.href?.match(/^#.*/))return"_self";return new URL(t.href??"").origin.toString()===e?"_self":"_blank"});return Z("a",{className:R(r.anchor),target:s,href:t.href,children:t.children},void 0,!1,void 0,this)}import{cn as $}from"@d1vij/shit-i-always-use";import{jsxDEV as x}from"react/jsx-dev-runtime";function c(t){let e=o();return x("blockquote",{className:$(e.blockquote),children:t.children},void 0,!1,void 0,this)}import{cn as A}from"@d1vij/shit-i-always-use";import{jsxDEV as Q}from"react/jsx-dev-runtime";function _(t){let e=o();return Q("span",{className:A(e.bold),children:t.children},void 0,!1,void 0,this)}import{cn as T}from"@d1vij/shit-i-always-use";import{jsxDEV as B}from"react/jsx-dev-runtime";function i(t){let e=o(),r=/language-(\w+)/.exec(t.className||"")?.[1];return B("code",{className:T(e.code,r&&`language-${r}`),children:t.children},void 0,!1,void 0,this)}import{cn as I,useClipboardText as H}from"@d1vij/shit-i-always-use";import{useEffect as D,useRef as v,useState as V}from"react";import{jsxDEV as b}from"react/jsx-dev-runtime";function n(t){let e=o(),r=v(null),[s,u]=V(""),{copy:d}=H();async function K(){let X=new URL(`/#${s}`,window.location.origin).toString();console.log("clicked"),await d(X)}return D(()=>{if(!r.current)return;let O=(r.current.textContent??"").toLowerCase().replace(/[^a-z0-9\s-]/g,"").trim().replace(/\s+/g,"-").slice(0,30);u(O)},[]),b("h1",{className:I(e.header,e[`header_${t.level}`]),children:b("button",{onClick:()=>void K(),ref:r,id:s,type:"button",children:t.children},void 0,!1,void 0,this)},void 0,!1,void 0,this)}import{cn as j}from"@d1vij/shit-i-always-use";import{jsxDEV as tt}from"react/jsx-dev-runtime";function y(t){let e=o();return tt("img",{className:j(e.image),alt:t.alt,title:t.title,src:t.src},void 0,!1,void 0,this)}import{cn as et}from"@d1vij/shit-i-always-use";import{jsxDEV as ot}from"react/jsx-dev-runtime";function J(t){let e=o();return ot("span",{className:et(e.italic),children:t.children},void 0,!1,void 0,this)}import{cn as P}from"@d1vij/shit-i-always-use";import{jsxDEV as C}from"react/jsx-dev-runtime";function a(t){let e=o(),r=t.type==="ordered"?"ol":"ul";return C(r,{className:P(e.list,t.type==="ordered"&&e.ordered_list,t.type==="unordered"&&e.unordered_list),children:t.children},void 0,!1,void 0,this)}function g(t){let e=o();return C("li",{className:P(e.list_item),children:t.children},void 0,!1,void 0,this)}import{cn as rt}from"@d1vij/shit-i-always-use";import{jsxDEV as nt}from"react/jsx-dev-runtime";function N(t){let e=o();return nt("p",{className:rt(e.paragraph),children:t.children},void 0,!1,void 0,this)}import{cn as lt}from"@d1vij/shit-i-always-use";import{jsxDEV as mt}from"react/jsx-dev-runtime";function f(t){let e=o();return mt("pre",{className:lt(e.preformatted),children:t.children},void 0,!1,void 0,this)}import{cn as st}from"@d1vij/shit-i-always-use";import{jsxDEV as at}from"react/jsx-dev-runtime";function M(t){let e=o();return at("span",{className:st(e.striked),children:t.children},void 0,!1,void 0,this)}import{cn as l}from"@d1vij/shit-i-always-use";import{jsxDEV as m}from"react/jsx-dev-runtime";function E(t){let e=o();return m("table",{className:l(e.table),children:t.children},void 0,!1,void 0,this)}function L(t){let e=o();return m("thead",{className:l(e.table_head),children:t.children},void 0,!1,void 0,this)}function k(t){let e=o();return m("tbody",{className:l(e.table_body),children:t.children},void 0,!1,void 0,this)}function q(t){let e=o();return m("tr",{className:l(e.table_row),children:t.children},void 0,!1,void 0,this)}function F(t){let e=o();return m("th",{className:l(e.table_head_cell),children:t.children},void 0,!1,void 0,this)}function w(t){let e=o();return m("td",{className:l(e.table_data),children:t.children},void 0,!1,void 0,this)}var pt={h1:(t)=>n({...t,level:1}),h2:(t)=>n({...t,level:2}),h3:(t)=>n({...t,level:3}),h4:(t)=>n({...t,level:4}),h5:(t)=>n({...t,level:5}),h6:(t)=>n({...t,level:6}),a:h,em:J,del:M,strong:_,code:i,blockquote:c,pre:f,p:N,ol:(t)=>a({...t,type:"ordered"}),ul:(t)=>a({...t,type:"unordered"}),li:g,img:y,table:E,thead:L,tbody:k,th:F,tr:q,td:w},S=pt;import{jsxDEV as ct}from"react/jsx-dev-runtime";function z({SourceComponent:t}){return ct(t,{components:S},void 0,!1,void 0,this)}import it from"@mdx-js/rollup";function yt({mdxPluginOptions:t}){return{name:"react-mdx-loader-plugin",enforce:"pre",config(e){return{...e,plugins:[it(t)]}}}}export{p as StyleContext,yt as MDXLoaderPlugin,z as MDXFromComponent};
+// src/StyleContext.ts
+import { createContext, useContext } from "react";
+var StyleContext = createContext({});
+function useStyles() {
+  return useContext(StyleContext);
+}
+// src/components/Elements/Anchor.tsx
+import { cn } from "@d1vij/shit-i-always-use";
+import { useMemo, useState } from "react";
+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,
+      type: "button",
+      children: props.children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/components/Elements/Image.tsx
+import { cn as cn6 } from "@d1vij/shit-i-always-use";
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+function Image(props) {
+  const styles = useStyles();
+  return /* @__PURE__ */ jsxDEV6("img", {
+    className: cn6(styles.image),
+    alt: props.alt,
+    title: props.title,
+    src: props.src
+  }, undefined, false, undefined, this);
+}
+
+// src/components/Elements/Italics.tsx
+import { cn as cn7 } from "@d1vij/shit-i-always-use";
+import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
+function Italics(props) {
+  const styles = useStyles();
+  return /* @__PURE__ */ jsxDEV7("span", {
+    className: cn7(styles.italic),
+    children: props.children
+  }, undefined, false, undefined, this);
+}
+
+// src/components/Elements/List.tsx
+import { cn as cn8 } from "@d1vij/shit-i-always-use";
+import { jsxDEV as jsxDEV8 } from "react/jsx-dev-runtime";
+function List(props) {
+  const styles = useStyles();
+  const L = props.type === "ordered" ? "ol" : "ul";
+  return /* @__PURE__ */ jsxDEV8(L, {
+    className: cn8(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__ */ jsxDEV8("li", {
+    className: cn8(styles.list_item),
+    children: props.children
+  }, undefined, false, undefined, this);
+}
+
+// src/components/Elements/Paragraph.tsx
+import { cn as cn9 } from "@d1vij/shit-i-always-use";
+import { jsxDEV as jsxDEV9 } from "react/jsx-dev-runtime";
+function Paragraph(props) {
+  const styles = useStyles();
+  return /* @__PURE__ */ jsxDEV9("p", {
+    className: cn9(styles.paragraph),
+    children: props.children
+  }, undefined, false, undefined, this);
+}
+
+// src/components/Elements/Preformatted.tsx
+import { cn as cn10 } from "@d1vij/shit-i-always-use";
+import { jsxDEV as jsxDEV10 } from "react/jsx-dev-runtime";
+function Preformatted(props) {
+  const styles = useStyles();
+  return /* @__PURE__ */ jsxDEV10("pre", {
+    className: cn10(styles.preformatted),
+    children: props.children
+  }, undefined, false, undefined, this);
+}
+
+// src/components/Elements/Striked.tsx
+import { cn as cn11 } from "@d1vij/shit-i-always-use";
+import { jsxDEV as jsxDEV11 } from "react/jsx-dev-runtime";
+function Striked(props) {
+  const styles = useStyles();
+  return /* @__PURE__ */ jsxDEV11("span", {
+    className: cn11(styles.striked),
+    children: props.children
+  }, undefined, false, undefined, this);
+}
+
+// src/components/Elements/Table.tsx
+import { cn as cn12 } from "@d1vij/shit-i-always-use";
+import { jsxDEV as jsxDEV12 } from "react/jsx-dev-runtime";
+function Table(props) {
+  const styles = useStyles();
+  return /* @__PURE__ */ jsxDEV12("table", {
+    className: cn12(styles.table),
+    children: props.children
+  }, undefined, false, undefined, this);
+}
+function TableHead(props) {
+  const styles = useStyles();
+  return /* @__PURE__ */ jsxDEV12("thead", {
+    className: cn12(styles.table_head),
+    children: props.children
+  }, undefined, false, undefined, this);
+}
+function TableBody(props) {
+  const styles = useStyles();
+  return /* @__PURE__ */ jsxDEV12("tbody", {
+    className: cn12(styles.table_body),
+    children: props.children
+  }, undefined, false, undefined, this);
+}
+function TableRow(props) {
+  const styles = useStyles();
+  return /* @__PURE__ */ jsxDEV12("tr", {
+    className: cn12(styles.table_row),
+    children: props.children
+  }, undefined, false, undefined, this);
+}
+function TableHeadCell(props) {
+  const styles = useStyles();
+  return /* @__PURE__ */ jsxDEV12("th", {
+    className: cn12(styles.table_head_cell),
+    children: props.children
+  }, undefined, false, undefined, this);
+}
+function TableData(props) {
+  const styles = useStyles();
+  return /* @__PURE__ */ jsxDEV12("td", {
+    className: cn12(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,
+  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
+};
+var Elements_default = Elements;
+// src/components/MDXLoader.tsx
+import { jsxDEV as jsxDEV13 } from "react/jsx-dev-runtime";
+function MDXFromComponent({
+  SourceComponent
+}) {
+  return /* @__PURE__ */ jsxDEV13(SourceComponent, {
+    components: Elements_default
+  }, undefined, false, undefined, this);
+}
+export {
+  StyleContext,
+  MDXFromComponent
+};

package/dist/vitePlugin.d.ts

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

package/dist/vitePlugin.js

@@ -0,0 +1,19 @@
+// src/vitePlugin.ts
+import mdx from "@mdx-js/rollup";
+function MDXLoaderPlugin({
+  mdxPluginOptions
+}) {
+  return {
+    name: "react-mdx-loader-plugin",
+    enforce: "pre",
+    config(c) {
+      return {
+        ...c,
+        plugins: [mdx(mdxPluginOptions)]
+      };
+    }
+  };
+}
+export {
+  MDXLoaderPlugin
+};

package/package.json

@@ -1,16 +1,31 @@
 {
     "name": "@d1vij/react-mdx-loader",
+    "description": "Supporting lib to create content driven sites using MDX",
+    "version": "0.1.3",
+    "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/plugin.js"
+        },
+        "./package.json": "./package.json"
+    },
     "repository": {
         "type": "git",
         "url": "https://github.com/d1vij/react-mdx-loader"
     },
     "homepage": "https://github.com/d1vij/react-mdx-loader",
-    "version": "0.1.2",
-    "description": "Supporting lib to create content driven sites using MDX",
     "license": "MIT",
-    "files": [
-        "dist"
-    ],
     "sideEffects": false,
     "publishConfig": {
         "access": "public"
@@ -49,18 +64,6 @@
             "optional": true
         }
     },
-    "type": "module",
-    "exports": {
-        ".": {
-            "import": {
-                "types": "./dist/index.d.ts",
-                "default": "./dist/index.js"
-            }
-        },
-        "./package.json": "./package.json"
-    },
-    "module": "./dist/index.js",
-    "types": "./dist/index.d.ts",
     "dependencies": {
         "@d1vij/shit-i-always-use": "^0.1.3"
     },