@fragments-sdk/cli 0.2.2 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fragments-sdk/cli",
-  "version": "0.2.2",
+  "version": "0.3.1",
   "description": "CLI, MCP server, and dev tools for Fragments design system",
   "type": "module",
   "bin": {

package/src/viewer/__tests__/viewer-integration.test.ts

@@ -0,0 +1,166 @@
+import { describe, it, expect } from "vitest";
+import { resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import { existsSync } from "node:fs";
+import { readFile } from "node:fs/promises";
+
+/**
+ * Integration tests for the consolidated viewer.
+ *
+ * After packages were merged into @fragments-sdk/cli, the viewer's
+ * path resolution changed. These tests verify that:
+ * - Viewer assets (HTML, TSX entry points) are found at the correct paths
+ * - The @fragments/core alias resolves to the consolidated core source
+ * - The virtual module generates valid import statements
+ * - The Vite config references correct file system locations
+ */
+
+// Simulate the same path resolution used in server.ts and vite-plugin.ts
+// At runtime, __dirname is dist/. In tests (vitest), it's the source dir.
+const testDir = dirname(fileURLToPath(import.meta.url));
+const viewerDir = resolve(testDir, "..");
+const cliPackageRoot = resolve(viewerDir, "../..");
+
+describe("viewer path resolution", () => {
+  it("viewerRoot resolves to a directory containing index.html", () => {
+    // server.ts: viewerRoot = resolve(cliPackageRoot, "src/viewer")
+    const viewerRoot = resolve(cliPackageRoot, "src/viewer");
+    expect(existsSync(resolve(viewerRoot, "index.html"))).toBe(true);
+  });
+
+  it("viewerRoot contains entry.tsx", () => {
+    const viewerRoot = resolve(cliPackageRoot, "src/viewer");
+    expect(existsSync(resolve(viewerRoot, "entry.tsx"))).toBe(true);
+  });
+
+  it("viewerRoot contains preview-frame.html", () => {
+    const viewerRoot = resolve(cliPackageRoot, "src/viewer");
+    expect(existsSync(resolve(viewerRoot, "preview-frame.html"))).toBe(true);
+  });
+
+  it("viewerRoot contains preview-frame-entry.tsx", () => {
+    const viewerRoot = resolve(cliPackageRoot, "src/viewer");
+    expect(existsSync(resolve(viewerRoot, "preview-frame-entry.tsx"))).toBe(true);
+  });
+
+  it("viewerRoot contains render-template.html", () => {
+    const viewerRoot = resolve(cliPackageRoot, "src/viewer");
+    expect(existsSync(resolve(viewerRoot, "render-template.html"))).toBe(true);
+  });
+
+  it("viewerRoot contains tailwind.config.js", () => {
+    const viewerRoot = resolve(cliPackageRoot, "src/viewer");
+    expect(existsSync(resolve(viewerRoot, "tailwind.config.js"))).toBe(true);
+  });
+
+  it("viewerRoot contains postcss.config.js", () => {
+    const viewerRoot = resolve(cliPackageRoot, "src/viewer");
+    expect(existsSync(resolve(viewerRoot, "postcss.config.js"))).toBe(true);
+  });
+
+  it("viewerRoot contains styles/globals.css", () => {
+    const viewerRoot = resolve(cliPackageRoot, "src/viewer");
+    expect(existsSync(resolve(viewerRoot, "styles/globals.css"))).toBe(true);
+  });
+});
+
+describe("@fragments/core alias resolution", () => {
+  it("core/index.ts exists at the expected path", () => {
+    // server.ts: "@fragments/core": resolve(cliPackageRoot, "src/core/index.ts")
+    const corePath = resolve(cliPackageRoot, "src/core/index.ts");
+    expect(existsSync(corePath)).toBe(true);
+  });
+
+  it("core/index.ts exports storyModuleToSegment", async () => {
+    const corePath = resolve(cliPackageRoot, "src/core/index.ts");
+    const content = await readFile(corePath, "utf-8");
+    // The virtual module imports { storyModuleToSegment, setPreviewConfig }
+    expect(content).toContain("storyModuleToSegment");
+  });
+
+  it("core/index.ts exports setPreviewConfig", async () => {
+    const corePath = resolve(cliPackageRoot, "src/core/index.ts");
+    const content = await readFile(corePath, "utf-8");
+    expect(content).toContain("setPreviewConfig");
+  });
+});
+
+describe("virtual module @fragments/core import", () => {
+  it("vite-plugin generates import from @fragments/core (resolved via alias)", async () => {
+    // The virtual module template in vite-plugin.ts must import from @fragments/core
+    // which is resolved by the Vite alias to the consolidated core source
+    const pluginPath = resolve(viewerDir, "vite-plugin.ts");
+    const content = await readFile(pluginPath, "utf-8");
+
+    // The generated virtual module string should reference @fragments/core
+    expect(content).toContain(
+      'import { storyModuleToSegment, setPreviewConfig } from "@fragments/core"'
+    );
+  });
+
+  it("server.ts sets up @fragments/core alias to src/core/index.ts", async () => {
+    const serverPath = resolve(viewerDir, "server.ts");
+    const content = await readFile(serverPath, "utf-8");
+
+    // The alias must resolve @fragments/core to the consolidated core
+    expect(content).toContain('"@fragments/core": resolve(cliPackageRoot, "src/core/index.ts")');
+  });
+
+  it("server.ts sets up @fragments/viewer alias", async () => {
+    const serverPath = resolve(viewerDir, "server.ts");
+    const content = await readFile(serverPath, "utf-8");
+
+    expect(content).toContain('"@fragments/viewer": viewerRoot');
+  });
+});
+
+describe("viewer HTML templates", () => {
+  it("index.html contains entry.tsx script reference", async () => {
+    const htmlPath = resolve(viewerDir, "index.html");
+    const content = await readFile(htmlPath, "utf-8");
+
+    // The HTML references /src/entry.tsx which gets rewritten to an absolute path
+    expect(content).toContain('src="/src/entry.tsx"');
+  });
+
+  it("preview-frame.html contains preview-frame-entry.tsx reference", async () => {
+    const htmlPath = resolve(viewerDir, "preview-frame.html");
+    const content = await readFile(htmlPath, "utf-8");
+
+    expect(content).toContain('src="/src/preview-frame-entry.tsx"');
+  });
+
+  it("vite-plugin rewrites entry paths using viewerAssetsRoot", async () => {
+    const pluginPath = resolve(viewerDir, "vite-plugin.ts");
+    const content = await readFile(pluginPath, "utf-8");
+
+    // The plugin must use viewerAssetsRoot (not __dirname or resolve(__dirname, ".."))
+    // to find viewer HTML and entry files
+    expect(content).toContain("const viewerAssetsRoot = resolve(__dirname,");
+    expect(content).toContain('const viewerRoot = viewerAssetsRoot');
+  });
+});
+
+describe("no stale @fragments/* package references", () => {
+  it("server.ts does not reference old resolveFragmentsPackage for core", async () => {
+    const serverPath = resolve(viewerDir, "server.ts");
+    const content = await readFile(serverPath, "utf-8");
+
+    // Should NOT try to resolve @fragments/core from node_modules
+    expect(content).not.toContain('resolveFragmentsPackage("core"');
+  });
+
+  it("no source files import from @fragments/core as a runtime dependency", async () => {
+    // All source-level imports should use relative paths (../core/).
+    // Only the generated virtual module string uses @fragments/core (resolved via alias).
+    const serverPath = resolve(viewerDir, "server.ts");
+    const content = await readFile(serverPath, "utf-8");
+
+    // server.ts should import from relative paths, not @fragments/core
+    const lines = content.split("\n");
+    const importLines = lines.filter(
+      (l) => l.startsWith("import") && l.includes("@fragments/core")
+    );
+    expect(importLines).toHaveLength(0);
+  });
+});

package/src/viewer/server.ts

@@ -27,10 +27,11 @@ import { loadConfig, discoverSegmentFiles } from "../core/node.js";
 import { segmentsPlugin } from "./vite-plugin.js";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
-const viewerRoot = resolve(__dirname, "..");
+// At runtime, __dirname is dist/. Viewer assets live in src/viewer/.
+const cliPackageRoot = resolve(__dirname, "..");
+const viewerRoot = resolve(cliPackageRoot, "src/viewer");
 const viewerTailwindConfig = resolve(viewerRoot, "tailwind.config.js");
-// The monorepo packages directory (sibling packages)
-const packagesRoot = resolve(viewerRoot, "..");
+const packagesRoot = resolve(cliPackageRoot, "..");
 
 export interface DevServerOptions {
   /** Port to run the server on */
@@ -149,14 +150,14 @@ export async function createDevServer(
       alias: {
         // Allow importing from viewer package
         "@fragments/viewer": viewerRoot,
+        // Resolve @fragments/core to the consolidated core source
+        "@fragments/core": resolve(cliPackageRoot, "src/core/index.ts"),
         // Ensure ALL react imports resolve to project's node_modules
         // This is critical for viewer files loaded from outside project root
         "react": safeRealpath(join(nodeModulesPath, "react")),
         "react-dom": safeRealpath(join(nodeModulesPath, "react-dom")),
         "react/jsx-runtime": safeRealpath(join(nodeModulesPath, "react/jsx-runtime")),
         "react/jsx-dev-runtime": safeRealpath(join(nodeModulesPath, "react/jsx-dev-runtime")),
-        // Resolve @fragments packages - try project's node_modules first, fall back to monorepo
-        "@fragments/core": resolveFragmentsPackage("core", nodeModulesPath),
       },
     },
   };

package/src/viewer/tailwind.config.js

@@ -7,7 +7,7 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
 export default {
   content: [
     resolve(__dirname, 'index.html'),
-    resolve(__dirname, 'src/**/*.{js,ts,jsx,tsx}'),
+    resolve(__dirname, '**/*.{js,ts,jsx,tsx}'),
   ],
   darkMode: 'class',
   theme: {

package/src/viewer/vite-plugin.ts

@@ -98,6 +98,8 @@ interface CompareResponse {
 }
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
+// At runtime, __dirname is dist/. Viewer assets live in src/viewer/.
+const viewerAssetsRoot = resolve(__dirname, "..", "src/viewer");
 
 // Store pending render requests (for internal render page to pick up)
 const pendingRenders = new Map<
@@ -1551,8 +1553,8 @@ async function loadSegmentsForContext(
  * Serve the viewer HTML page.
  */
 async function serveViewerHTML(res: any, server: ViteDevServer): Promise<void> {
-  const viewerRoot = resolve(__dirname, "..");
-  const entryPath = resolve(viewerRoot, "src/entry.tsx");
+  const viewerRoot = viewerAssetsRoot;
+  const entryPath = resolve(viewerRoot, "entry.tsx");
 
   try {
     // Read the viewer HTML template
@@ -1578,12 +1580,12 @@ async function serveViewerHTML(res: any, server: ViteDevServer): Promise<void> {
  * This is used for iframe-based component preview with CSS isolation.
  */
 async function servePreviewFrameHTML(res: any, server: ViteDevServer): Promise<void> {
-  const viewerRoot = resolve(__dirname, "..");
-  const entryPath = resolve(viewerRoot, "src/preview-frame-entry.tsx");
+  const viewerRoot = viewerAssetsRoot;
+  const entryPath = resolve(viewerRoot, "preview-frame-entry.tsx");
 
   try {
     // Read the preview frame HTML template
-    let html = await readFile(resolve(viewerRoot, "src/preview-frame.html"), "utf-8");
+    let html = await readFile(resolve(viewerRoot, "preview-frame.html"), "utf-8");
 
     // Rewrite the entry path to use absolute path to viewer package
     html = html.replace("/src/preview-frame-entry.tsx", entryPath);
@@ -1679,12 +1681,12 @@ async function serveRenderHTML(
   server: ViteDevServer,
   renderScript: string
 ): Promise<void> {
-  const viewerRoot = resolve(__dirname, "..");
+  const viewerRoot = viewerAssetsRoot;
 
   try {
     // Read the render template
     let html = await readFile(
-      resolve(viewerRoot, "src/render-template.html"),
+      resolve(viewerRoot, "render-template.html"),
       "utf-8"
     );