@honeydeck/honeydeck 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@honeydeck/honeydeck",
-	"version": "0.1.1",
+	"version": "0.1.2",
 	"description": "MDX and React-based presentation framework for AI-friendly slide decks.",
 	"license": "MIT",
 	"publishConfig": {

package/src/cli/SPEC.md

@@ -43,6 +43,7 @@ Behavior:
 - Generates starter files, including `deck.mdx`, `styles.css`, `.gitignore`, `package.json`, `public/`, and `components/SparkleButton.tsx`
 - Renders `deck.mdx` and `styles.css` from real template files that can also run as a development demo
 - Installs dependencies with npm unless `--skip-install` is used
+- Shows a live process indicator for non-interactive work such as starter file generation and dependency installation; long-running installs keep updating so users know work is still active
 - Asks whether to open the Honeydeck agent skills installer unless `--skip-skill` or `--install-skill` is used, and makes clear that accepting runs `npx skills add`
 - Cancelling any `honeydeck init` prompt or interrupting the spawned skills installer aborts the init flow instead of continuing
 - If cancellation or interruption happens after `honeydeck init` created a new project directory, Honeydeck cleans up that generated project directory before exiting; it never deletes a directory that existed before init started

package/src/cli/dev.ts

@@ -24,7 +24,7 @@
 import { readFileSync } from "node:fs";
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
-import { createServer, type Plugin } from "vite";
+import { createServer, type Plugin, searchForWorkspaceRoot } from "vite";
 import { honeydeckPlugin } from "#vite-plugin/index.ts";
 import { hasHelpFlag } from "./args.ts";
 import { formatCommandBanner } from "./banner.ts";
@@ -58,6 +58,20 @@ const INDEX_HTML_PATH = resolve(APP_SHELL_DIR, "index.html");
  */
 const PACKAGE_ROOT = resolve(__dirname, "../..");
 
+/**
+ * Bare dependencies imported by the Honeydeck app shell/runtime before any
+ * user-authored HTML entry exists. Vite cannot discover these reliably from
+ * its normal HTML scan because `honeydeck dev` serves a custom app shell from
+ * /@fs/, so keep the CommonJS/large ESM deps pre-bundled explicitly.
+ */
+const DEV_OPTIMIZE_DEPS = [
+	"react",
+	"react/jsx-runtime",
+	"react/jsx-dev-runtime",
+	"react-dom/client",
+	"lucide-react",
+] as const;
+
 // ---------------------------------------------------------------------------
 // Arg parsing
 // ---------------------------------------------------------------------------
@@ -156,7 +170,7 @@ export function parseDevArgs(args: string[]): DevOptions {
  *     /@fs/ script src, and lets Vite's `transformIndexHtml` pipeline apply
  *     any further HTML transforms (e.g. inject the HMR client).
  */
-function appShellPlugin(): Plugin {
+function appShellPlugin(projectRoot: string): Plugin {
 	return {
 		name: "honeydeck:app-shell",
 
@@ -164,9 +178,11 @@ function appShellPlugin(): Plugin {
 			return {
 				server: {
 					fs: {
-						// Allow Vite's /@fs/ handler to serve any file under the honeydeck
-						// package root (so src/runtime/app-shell/main.tsx is accessible).
-						allow: [PACKAGE_ROOT],
+						// Setting server.fs.allow replaces Vite's default allow list.
+						// Keep the user's workspace root allowed for normal node_modules
+						// serving, then add the Honeydeck package root so /@fs/ can reach
+						// src/runtime/app-shell/main.tsx when it lives outside that root.
+						allow: [searchForWorkspaceRoot(projectRoot), PACKAGE_ROOT],
 					},
 				},
 			};
@@ -232,9 +248,13 @@ export async function runDev(args: string[]): Promise<void> {
 
 		server: createDevServerConfig(port, open),
 
+		optimizeDeps: {
+			include: [...DEV_OPTIMIZE_DEPS],
+		},
+
 		plugins: [
 			// 1. App shell: serve our index.html + configure fs.allow
-			appShellPlugin(),
+			appShellPlugin(root),
 			// 2. Virtual modules + MDX compilation + Tailwind
 			...honeydeckPlugin({ root, entry }),
 		],

package/src/cli/init.ts

@@ -13,7 +13,7 @@
  *  8. outro() — success message with next steps.
  */
 
-import { execSync } from "node:child_process";
+import { spawn } from "node:child_process";
 import { existsSync, mkdirSync, rmSync, writeFileSync } from "node:fs";
 import { dirname, join, resolve } from "node:path";
 import * as p from "@clack/prompts";
@@ -101,6 +101,29 @@ export function parseInitArgs(args: string[]): InitOptions {
 
 const INSTALL_COMMAND = "npm install";
 
+function runCommand(command: string, cwd: string): Promise<void> {
+	return new Promise((resolveCommand, rejectCommand) => {
+		const child = spawn(command, {
+			cwd,
+			shell: true,
+			stdio: "ignore",
+		});
+
+		child.once("error", rejectCommand);
+		child.once("exit", (code, signal) => {
+			if (code === 0) {
+				resolveCommand();
+				return;
+			}
+
+			const reason = signal
+				? `signal ${signal}`
+				: `exit code ${code ?? "unknown"}`;
+			rejectCommand(new Error(`${command} failed with ${reason}`));
+		});
+	});
+}
+
 // ---------------------------------------------------------------------------
 // Validation
 // ---------------------------------------------------------------------------
@@ -285,10 +308,7 @@ export async function runInit(args: string[]): Promise<void> {
 		installSpinner.start("Installing dependencies with npm…");
 
 		try {
-			execSync(INSTALL_COMMAND, {
-				cwd: projectDir,
-				stdio: "pipe",
-			});
+			await runCommand(INSTALL_COMMAND, projectDir);
 			installSpinner.stop("Dependencies installed ✅");
 		} catch (_err) {
 			installSpinner.stop("Dependency installation failed ⚠️");
@@ -352,7 +372,7 @@ export async function runInit(args: string[]): Promise<void> {
 			`    cd ${projectName}`,
 			"    npm run dev",
 			"",
-			"  Happy presenting! 🎞",
+			"  Happy presenting! 🐝",
 			"",
 		].join("\n"),
 	);

package/src/runtime/SPEC.md

@@ -199,6 +199,7 @@ Observable build/dev behavior:
 - `honeydeck build` produces a static single-page application.
 - Project `public/` assets are served/copied at the web root.
 - Project-local CSS, React components, layout maps, and static image imports work from the selected deck root.
+- In dev, Honeydeck's package app shell may be served from outside the selected deck root, but Vite still allows the user's workspace root for normal dependency serving and pre-bundles Honeydeck runtime browser dependencies such as React, React DOM, and runtime icons.
 - Built decks use hash-based routes and can be deployed to static hosts without server-side routing.
 - The app shell applies the initial effective `data-honeydeck-color-mode` to `<html>` before mounting React so first-render browser defaults and generated assets match the deck mode.