@fragments-sdk/cli 0.3.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fragments-sdk/cli",
-  "version": "0.3.0",
+  "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

@@ -150,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: {