promptslide 0.3.17 → 0.3.19

package/src/utils/deck-config.mjs

@@ -1,6 +1,8 @@
 import { readFileSync, writeFileSync, existsSync } from "node:fs"
 import { join } from "node:path"
 
+import { DEFAULT_LOOP_CONFIG, readLoopConfig, writeLoopConfig } from "./loop-config.mjs"
+
 const DECK_CONFIG_PATH = "src/deck-config.ts"
 
 /**
@@ -224,6 +226,8 @@ export function replaceDeckConfig(cwd, slides, opts = {}) {
   ].join("\n")
 
   writeFileSync(configPath, content, "utf-8")
+  if (opts.loopConfig !== undefined) writeLoopConfig(cwd, opts.loopConfig)
+  else if (!existsSync(join(cwd, "loop-config.json"))) writeLoopConfig(cwd, DEFAULT_LOOP_CONFIG)
   return true
 }
 
@@ -310,6 +314,8 @@ export function parseDeckConfig(cwd) {
   if (slides.length === 0) return null
 
   const result = { slides }
+  const loopConfig = readLoopConfig(cwd)
+  if (loopConfig) result.loopConfig = loopConfig
   if (transition) result.transition = transition
   if (directionalTransition !== undefined) result.directionalTransition = directionalTransition
   return result

package/src/utils/loop-config.mjs

@@ -0,0 +1,70 @@
+import { randomUUID } from "node:crypto"
+import { existsSync, readFileSync, renameSync, unlinkSync, writeFileSync, lstatSync } from "node:fs"
+import { join } from "node:path"
+
+import { DEFAULT_LOOP_CONFIG, validateLoopConfig } from "../core/loop/config.mjs"
+
+export function readLoopConfig(root) {
+  const path = join(root, "loop-config.json")
+  if (!existsSync(path)) return undefined
+  if (lstatSync(path).isSymbolicLink()) throw new Error("loop-config.json must be a regular file")
+  return validateLoopConfig(JSON.parse(readFileSync(path, "utf8")))
+}
+
+export function writeLoopConfig(root, config) {
+  const value = validateLoopConfig(config)
+  const path = join(root, "loop-config.json")
+  if (existsSync(path) && lstatSync(path).isSymbolicLink())
+    throw new Error("loop-config.json must be a regular file")
+  const temporary = join(root, `.loop-config-${randomUUID()}.tmp`)
+  try {
+    writeFileSync(temporary, JSON.stringify(value, null, 2) + "\n", { flag: "wx" })
+    renameSync(temporary, path)
+  } finally {
+    if (existsSync(temporary)) unlinkSync(temporary)
+  }
+}
+
+export function loopConfigMiddleware(root, onSaved = () => {}) {
+  return (req, res, next) => {
+    if (req.url !== "/__promptslide_loop") return next()
+    if (req.method !== "POST") {
+      res.statusCode = 405
+      return res.end()
+    }
+    const host = req.headers.host || ""
+    const remote = req.socket.remoteAddress
+    if (
+      !/^(localhost|127\.0\.0\.1|\[::1\])(?::\d+)?$/.test(host) ||
+      !["127.0.0.1", "::1", "::ffff:127.0.0.1"].includes(remote) ||
+      req.headers.origin !== `http://${host}` ||
+      !req.headers["content-type"]?.startsWith("application/json")
+    ) {
+      res.statusCode = 403
+      return res.end("Loop settings can only be saved from local Studio.")
+    }
+    let body = ""
+    req.on("data", chunk => {
+      body += chunk
+      if (Buffer.byteLength(body) > 65536) {
+        res.statusCode = 413
+        res.end()
+        req.destroy()
+      }
+    })
+    req.on("end", () => {
+      if (res.writableEnded) return
+      try {
+        writeLoopConfig(root, JSON.parse(body))
+        onSaved()
+        res.statusCode = 204
+        res.end()
+      } catch {
+        res.statusCode = 400
+        res.end("Invalid loop settings or project file could not be written.")
+      }
+    })
+  }
+}
+
+export { DEFAULT_LOOP_CONFIG }

package/src/vite/config.mjs

@@ -5,6 +5,7 @@ import { fileURLToPath } from "node:url"
 import tailwindcss from "@tailwindcss/postcss"
 import react from "@vitejs/plugin-react"
 
+import { editorPlugin } from "../editor/plugin.mjs"
 import { promptslidePlugin } from "./plugin.mjs"
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
@@ -17,13 +18,20 @@ const tailwindPath = resolve(dirname(require.resolve("tailwindcss")), "..")
 // Resolve promptslide core from source so Vite uses TS directly without a build step
 const promptslidePath = resolve(__dirname, "../core/index.ts")
 
-export function createViteConfig({ cwd, mode = "development" }) {
+export function createViteConfig({ cwd, mode = "development", editor = true }) {
   return {
     configFile: false,
     root: cwd,
     mode,
-    plugins: [react(), promptslidePlugin({ root: cwd })],
+    plugins: [
+      ...(mode === "development" && editor ? [editorPlugin({ root: cwd })] : []),
+      react(),
+      promptslidePlugin({ root: cwd })
+    ],
     resolve: {
+      // The CLI's core/editor and the deck must share one React dispatcher,
+      // including when the CLI is installed or linked outside the deck root.
+      dedupe: ["react", "react-dom"],
       alias: {
         "@": resolve(cwd, "src"),
         promptslide: promptslidePath,
@@ -31,6 +39,19 @@ export function createViteConfig({ cwd, mode = "development" }) {
         tailwindcss: tailwindPath
       }
     },
+    // These imports live in virtual entry modules, which dependency scanning
+    // cannot discover before the first page loads. Optimize them together so
+    // the viewer and editor never start with different dependency generations.
+    optimizeDeps: {
+      include: [
+        "react",
+        "react-dom/client",
+        "lucide-react",
+        "framer-motion",
+        "clsx",
+        "tailwind-merge"
+      ]
+    },
     css: {
       postcss: {
         plugins: [tailwindcss()]

package/src/vite/plugin.mjs

@@ -2,6 +2,7 @@ import { readFileSync, writeFileSync, existsSync } from "node:fs"
 import { join, resolve, sep, extname } from "node:path"
 
 import { bold, dim } from "../utils/ansi.mjs"
+import { readLoopConfig, DEFAULT_LOOP_CONFIG, loopConfigMiddleware } from "../utils/loop-config.mjs"
 import { projectIdentity } from "../utils/studio-discovery.mjs"
 
 /** Normalize a path to forward slashes so it can be used in ES module import strings on Windows. */
@@ -84,9 +85,11 @@ import { StrictMode, createElement } from "react"
 import { createRoot } from "react-dom/client"
 import "${r}/src/globals.css"
 import App from "${r}/src/App"
+import { LoopConfigProvider } from "promptslide"
+const loopConfig = ${JSON.stringify(readLoopConfig(root) ?? DEFAULT_LOOP_CONFIG)}
 
 createRoot(document.getElementById("root")).render(
-  createElement(StrictMode, null, createElement(App))
+  createElement(StrictMode, null, createElement(LoopConfigProvider, { config: loopConfig }, createElement(App)))
 )
 `
 }
@@ -256,7 +259,7 @@ export function promptslidePlugin({ root: initialRoot } = {}) {
       return {
         server: {
           watch: {
-            ignored: ["**/annotations.json"]
+            ignored: ["**/annotations.json", "**/.loop-config-*.tmp"]
           }
         }
       }
@@ -284,6 +287,19 @@ export function promptslidePlugin({ root: initialRoot } = {}) {
     },
 
     configureServer(server) {
+      const invalidateLoopConfig = () => {
+        const entry = server.moduleGraph.getModuleById(RESOLVED_VIRTUAL_ENTRY_ID)
+        if (entry) server.moduleGraph.invalidateModule(entry)
+      }
+      const loopFileChanged = path => {
+        if (resolve(path) === resolve(root, "loop-config.json")) invalidateLoopConfig()
+      }
+      // New page loads see the saved file without interrupting the current presentation.
+      server.watcher
+        .on("change", loopFileChanged)
+        .on("add", loopFileChanged)
+        .on("unlink", loopFileChanged)
+      server.middlewares.use(loopConfigMiddleware(root, invalidateLoopConfig))
       server.middlewares.use(async (req, res, next) => {
         if (req.method !== "GET" || req.url !== "/__promptslide_pdf") return next()
         try {
@@ -384,7 +400,7 @@ export function promptslidePlugin({ root: initialRoot } = {}) {
       server.middlewares.use(async (req, res, next) => {
         const url = new URL(req.url, "http://localhost")
         if (url.searchParams.get("pdf") === "true") {
-          const html = await server.transformIndexHtml("/index.html", getPdfHtmlTemplate())
+          const html = await server.transformIndexHtml("/index.html", getPdfHtmlTemplate(), req.url)
           res.setHeader("Content-Type", "text/html")
           res.statusCode = 200
           res.end(html)
@@ -402,7 +418,8 @@ export function promptslidePlugin({ root: initialRoot } = {}) {
         }
         const html = await server.transformIndexHtml(
           "/index.html",
-          getExportHtmlTemplate(slidePath)
+          getExportHtmlTemplate(slidePath),
+          req.url
         )
         res.setHeader("Content-Type", "text/html")
         res.statusCode = 200

package/templates/default/src/deck-config.ts

@@ -3,6 +3,6 @@ import { SlideTitle } from "@/slides/slide-title";
 import { SlideExample } from "@/slides/slide-example";
 
 export const slides: SlideConfig[] = [
-  { id: "title", component: SlideTitle, steps: 0 },
-  { id: "example", component: SlideExample, steps: 2 },
+  { id: "title", title: "Introduction", component: SlideTitle, steps: 0 },
+  { id: "example", title: "Example", component: SlideExample, steps: 2 },
 ];