veslx 0.0.28 → 0.1.0

package/src/hooks/use-mdx-content.ts

@@ -0,0 +1,108 @@
+import { useState, useEffect } from 'react'
+import { modules, slides } from 'virtual:content-modules'
+import type { ComponentType } from 'react'
+
+interface MDXModule {
+  default: ComponentType<{ components?: Record<string, ComponentType> }>
+  frontmatter?: {
+    title?: string
+    description?: string
+    date?: string
+    visibility?: string
+  }
+}
+
+type ModuleLoader = () => Promise<MDXModule>
+
+export function useMDXContent(path: string) {
+  const [Content, setContent] = useState<MDXModule['default'] | null>(null)
+  const [frontmatter, setFrontmatter] = useState<MDXModule['frontmatter']>(undefined)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<Error | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    setError(null)
+
+    // Find the matching module - keys are like "/content-dir/path/README.mdx"
+    // We need to match against the path segment
+    const matchingKey = Object.keys(modules).find(key =>
+      key.endsWith(`/${path}/README.mdx`)
+    )
+    const loader = matchingKey ? (modules as Record<string, ModuleLoader>)[matchingKey] : null
+
+    if (!loader) {
+      setError(new Error(`MDX module not found for path: ${path}`))
+      setLoading(false)
+      return
+    }
+
+    loader()
+      .then((mod) => {
+        if (!cancelled) {
+          setContent(() => mod.default)
+          setFrontmatter(mod.frontmatter)
+          setLoading(false)
+        }
+      })
+      .catch((err) => {
+        if (!cancelled) {
+          setError(err)
+          setLoading(false)
+        }
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [path])
+
+  return { Content, frontmatter, loading, error }
+}
+
+export function useMDXSlides(path: string) {
+  const [Content, setContent] = useState<MDXModule['default'] | null>(null)
+  const [frontmatter, setFrontmatter] = useState<MDXModule['frontmatter']>(undefined)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<Error | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    setError(null)
+
+    // Find the matching module - keys are like "/content-dir/path/SLIDES.mdx"
+    const matchingKey = Object.keys(slides).find(key =>
+      key.endsWith(`/${path}/SLIDES.mdx`)
+    )
+    const loader = matchingKey ? (slides as Record<string, ModuleLoader>)[matchingKey] : null
+
+    if (!loader) {
+      setError(new Error(`Slides module not found for path: ${path}`))
+      setLoading(false)
+      return
+    }
+
+    loader()
+      .then((mod) => {
+        if (!cancelled) {
+          setContent(() => mod.default)
+          setFrontmatter(mod.frontmatter)
+          setLoading(false)
+        }
+      })
+      .catch((err) => {
+        if (!cancelled) {
+          setError(err)
+          setLoading(false)
+        }
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [path])
+
+  return { Content, frontmatter, loading, error }
+}

package/src/pages/post.tsx

@@ -1,19 +1,19 @@
-
 import { useParams } from "react-router-dom";
-import { findSlides, isSimulationRunning, useDirectory, useFileContent } from "../../plugin/src/client";
+import { findSlides, isSimulationRunning, useDirectory } from "../../plugin/src/client";
 import Loading from "@/components/loading";
 import { FileEntry } from "plugin/src/lib";
 import { FrontMatter } from "@/components/front-matter";
 import { RunningBar } from "@/components/running-bar";
 import { Header } from "@/components/header";
-import { RuntimeMDX } from "@/components/runtime-mdx";
+import { useMDXContent } from "@/hooks/use-mdx-content";
+import { mdxComponents } from "@/components/mdx-components";
 
 
 export function Post() {
   const { "path": path = "." } = useParams();
   const filePath = `${path}/README.mdx`
-  const { directory, file, loading, error } = useDirectory(filePath)
-  const { content } = useFileContent(filePath);
+  const { directory, loading: dirLoading } = useDirectory(filePath)
+  const { Content, frontmatter, loading: mdxLoading, error } = useMDXContent(path);
   const isRunning = isSimulationRunning();
 
   let slides: FileEntry | null = null;
@@ -21,6 +21,8 @@ export function Post() {
     slides = findSlides(directory);
   }
 
+  const loading = dirLoading || mdxLoading;
+
   if (loading) return <Loading />
 
   if (error) {
@@ -33,11 +35,11 @@ export function Post() {
 
   return (
     <div className="flex min-h-screen flex-col bg-background noise-overlay">
-      <title>{file?.frontmatter?.title}</title>
+      <title>{frontmatter?.title}</title>
       <RunningBar />
       <Header />
       <main className="flex-1 mx-auto w-full max-w-[var(--content-width)] px-[var(--page-padding)]">
-        
+
         {isRunning && (
           <div className="sticky top-0 z-50 px-[var(--page-padding)] py-2 bg-red-500 text-primary-foreground font-mono text-xs text-center tracking-wide">
             <span className="inline-flex items-center gap-3">
@@ -48,18 +50,18 @@ export function Post() {
           </div>
         )}
 
-        {file && (
+        {Content && (
           <article className="my-24 prose dark:prose-invert prose-headings:tracking-tight prose-p:leading-relaxed prose-a:text-primary prose-a:no-underline hover:prose-a:underline max-w-[var(--prose-width)] animate-fade-in">
             <FrontMatter
-              title={file.frontmatter?.title}
-              date={file.frontmatter?.date}
-              description={file.frontmatter?.description}
+              title={frontmatter?.title}
+              date={frontmatter?.date}
+              description={frontmatter?.description}
               slides={slides}
             />
-            {content && <RuntimeMDX content={content} />}
+            <Content components={mdxComponents} />
           </article>
         )}
       </main>
-    </div>    
+    </div>
   )
 }

package/src/pages/slides.tsx

@@ -1,35 +1,23 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { FULLSCREEN_DATA_ATTR } from "@/lib/constants";
-import { useDirectory, useFileContent } from "../../plugin/src/client";
 import { useParams, useSearchParams } from "react-router-dom"
 import Loading from "@/components/loading";
 import { FrontMatter } from "@/components/front-matter";
-import { RuntimeMDX } from "@/components/runtime-mdx";
 import { RunningBar } from "@/components/running-bar";
 import { Header } from "@/components/header";
-
-export function parseSlideContent(content: string): string[] {
-  // Strip frontmatter if present (starts with --- and ends with ---)
-  let processedContent = content;
-  const frontmatterMatch = content.match(/^---\n[\s\S]*?\n---\n/);
-  if (frontmatterMatch) {
-    processedContent = content.slice(frontmatterMatch[0].length);
-  }
-
-  return processedContent
-    .split(/^---$/m)
-    .map((slide) => slide.trim())
-    .filter((slide) => slide.length > 0);
-}
+import { useMDXSlides } from "@/hooks/use-mdx-content";
+import { useSlidesFromMDX, SlideContent } from "@/components/slides-renderer";
 
 
 export function SlidesPage() {
   const { "path": path = "." } = useParams();
   const [searchParams, setSearchParams] = useSearchParams();
-  const filePath = `${path}/SLIDES.mdx`
-  const { file } = useDirectory(filePath)
-  const { content, loading, error } = useFileContent(filePath);
-  const slides = content ? parseSlideContent(content) : [];
+
+  // Load the compiled MDX module
+  const { Content, frontmatter, loading, error } = useMDXSlides(path);
+
+  // Split the MDX content into slides by <hr> elements
+  const { slides } = useSlidesFromMDX({ Content, frontmatter });
 
   // Total slides = 1 (title) + content slides
   const totalSlides = slides.length + 1;
@@ -109,15 +97,13 @@ export function SlidesPage() {
   }, [slides.length, setSearchParams]);
 
   if (loading) {
-    return (
-      <Loading />
-    )
+    return <Loading />
   }
 
   if (error) {
     return (
       <main className="min-h-screen bg-background container mx-auto max-w-4xl py-12">
-        <p className="text-center text-red-600">{error}</p>
+        <p className="text-center text-red-600">{error.message}</p>
       </main>
     )
   }
@@ -132,7 +118,7 @@ export function SlidesPage() {
 
   return (
     <main className="slides-container">
-      <title>{file?.frontmatter?.title}</title>
+      <title>{frontmatter?.title}</title>
       <RunningBar />
       <Header
         slideControls={{
@@ -143,26 +129,27 @@ export function SlidesPage() {
         }}
       />
       <div {...{[FULLSCREEN_DATA_ATTR]: "true"}}>
+        {/* Title slide */}
         <div
           ref={(el) => { slideRefs.current[0] = el; }}
           className="slide-page max-w-xl min-h-[50vh] sm:min-h-[70vh] md:min-h-screen flex items-center justify-center py-8 sm:py-12 md:py-16 px-4 mx-auto"
         >
-          {file && (
-            <FrontMatter
-              title={file.frontmatter?.title}
-              date={file.frontmatter?.date}
-              description={file.frontmatter?.description}
-            />
-          )}
+          <FrontMatter
+            title={frontmatter?.title}
+            date={frontmatter?.date}
+            description={frontmatter?.description}
+          />
         </div>
         <hr className="print:hidden" />
-        {slides.map((content, index) => (
+
+        {/* Content slides */}
+        {slides.map((slideContent, index) => (
           <div key={index}>
             <div
               ref={(el) => { slideRefs.current[index + 1] = el; }}
               className="slide-page min-h-[50vh] sm:min-h-[70vh] md:min-h-screen flex items-center justify-center py-8 sm:py-12 md:py-16 px-4 mx-auto"
             >
-              {content && <RuntimeMDX content={content} size="md" />}
+              <SlideContent>{slideContent}</SlideContent>
             </div>
             {index < slides.length - 1 && <hr className="print:hidden" />}
           </div>

package/src/vite-env.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="vite/client" />
+
+declare module 'virtual:content-modules' {
+  import type { ComponentType } from 'react'
+
+  interface MDXModule {
+    default: ComponentType<{ components?: Record<string, ComponentType> }>
+    frontmatter?: {
+      title?: string
+      description?: string
+      date?: string
+      visibility?: string
+    }
+  }
+
+  type ModuleLoader = () => Promise<MDXModule>
+
+  export const modules: Record<string, ModuleLoader>
+  export const slides: Record<string, ModuleLoader>
+  export const index: Record<string, { default: unknown }>
+}

package/vite.config.ts

@@ -57,10 +57,10 @@ export default defineConfig({
   },
   build: {
     chunkSizeWarningLimit: 1500,
+    reportCompressedSize: false,
   },
   optimizeDeps: {
     entries: [path.join(__dirname, 'src/main.tsx')],
-    // Include all CommonJS dependencies that need ESM conversion
     include: [
       'react',
       'react-dom',
@@ -68,25 +68,7 @@ export default defineConfig({
       'react/jsx-runtime',
       'react/jsx-dev-runtime',
       '@mdx-js/react',
-      '@mdx-js/mdx',
       'react-router-dom',
-      'acorn-jsx',
-      'acorn',
-      'estree-util-to-js',
-      'recma-jsx',
-      'recma-parse',
-      'recma-stringify',
-      'micromark-extension-mdxjs',
-      'style-to-js',
-      'style-to-object',
-      'debug',
-      'unified',
-      'extend',
-      'bail',
-      'trough',
-      'vfile',
-      'format',
-      'fault',
     ],
   },
 })