@fragments-sdk/cli 0.3.0 → 0.3.2

package/package.json

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

package/src/core/discovery.ts

@@ -296,6 +296,46 @@ export async function discoverComponentsFromBarrel(
   return components;
 }
 
+/**
+ * Discover fragment files from installed packages that declare a "fragments" field
+ * in their package.json. This allows consumer projects to see components from
+ * installed packages (e.g. @fragments-sdk/ui) in the dev viewer.
+ */
+export async function discoverInstalledFragments(
+  projectRoot: string
+): Promise<DiscoveredFile[]> {
+  const pkgJsonPath = resolve(projectRoot, 'package.json');
+  if (!existsSync(pkgJsonPath)) return [];
+
+  const pkgJson = JSON.parse(await readFile(pkgJsonPath, 'utf-8'));
+  const allDeps = { ...pkgJson.dependencies, ...pkgJson.devDependencies };
+  const results: DiscoveredFile[] = [];
+
+  for (const depName of Object.keys(allDeps)) {
+    const depDir = resolve(projectRoot, 'node_modules', depName);
+    const depPkgPath = resolve(depDir, 'package.json');
+    if (!existsSync(depPkgPath)) continue;
+
+    const depPkg = JSON.parse(await readFile(depPkgPath, 'utf-8'));
+    if (!depPkg.fragments) continue;
+
+    // Package declares fragments — scan for source fragment files
+    const files = await fg(
+      [`src/**/*${BRAND.fileExtension}`, 'src/**/*.stories.tsx'],
+      { cwd: depDir, ignore: ['**/node_modules/**'], absolute: false }
+    );
+
+    for (const rel of files) {
+      results.push({
+        relativePath: `${depName}/${rel}`,
+        absolutePath: resolve(depDir, rel),
+      });
+    }
+  }
+
+  return results;
+}
+
 /**
  * Discover all components using multiple strategies
  */

package/src/core/node.ts

@@ -11,6 +11,7 @@ export {
   discoverSegmentFiles,
   discoverRecipeFiles,
   discoverComponentFiles,
+  discoverInstalledFragments,
   extractComponentName,
   // New: Component discovery from source files (no segment files needed)
   discoverComponentsFromSource,

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

@@ -0,0 +1,245 @@
+import { describe, it, expect, beforeAll, afterAll } from "vitest";
+import { resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import { existsSync } from "node:fs";
+import { readFile, mkdtemp, writeFile, mkdir, rm } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { discoverInstalledFragments } from "../../core/discovery.js";
+
+/**
+ * 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("discoverInstalledFragments", () => {
+  let tmpDir: string;
+
+  beforeAll(async () => {
+    tmpDir = await mkdtemp(resolve(tmpdir(), "fragments-test-"));
+
+    // Create a fake project with a dependency that has fragments
+    await writeFile(
+      resolve(tmpDir, "package.json"),
+      JSON.stringify({
+        dependencies: { "@acme/ui": "1.0.0", "some-lib": "2.0.0" },
+      })
+    );
+
+    // @acme/ui declares fragments
+    const acmeDir = resolve(tmpDir, "node_modules/@acme/ui");
+    await mkdir(resolve(acmeDir, "src/components"), { recursive: true });
+    await writeFile(
+      resolve(acmeDir, "package.json"),
+      JSON.stringify({ name: "@acme/ui", fragments: { src: "src" } })
+    );
+    await writeFile(
+      resolve(acmeDir, "src/components/Button.fragment.tsx"),
+      "export default {};"
+    );
+    await writeFile(
+      resolve(acmeDir, "src/components/Card.fragment.tsx"),
+      "export default {};"
+    );
+
+    // some-lib does NOT declare fragments
+    const someLibDir = resolve(tmpDir, "node_modules/some-lib");
+    await mkdir(resolve(someLibDir, "src"), { recursive: true });
+    await writeFile(
+      resolve(someLibDir, "package.json"),
+      JSON.stringify({ name: "some-lib" })
+    );
+    await writeFile(
+      resolve(someLibDir, "src/Foo.fragment.tsx"),
+      "export default {};"
+    );
+  });
+
+  afterAll(async () => {
+    await rm(tmpDir, { recursive: true, force: true });
+  });
+
+  it("finds fragment files from packages with a fragments field", async () => {
+    const results = await discoverInstalledFragments(tmpDir);
+    const paths = results.map((r) => r.relativePath).sort();
+    expect(paths).toEqual([
+      "@acme/ui/src/components/Button.fragment.tsx",
+      "@acme/ui/src/components/Card.fragment.tsx",
+    ]);
+  });
+
+  it("ignores packages without a fragments field", async () => {
+    const results = await discoverInstalledFragments(tmpDir);
+    const hasLib = results.some((r) => r.relativePath.includes("some-lib"));
+    expect(hasLib).toBe(false);
+  });
+
+  it("returns absolutePath that exists on disk", async () => {
+    const results = await discoverInstalledFragments(tmpDir);
+    for (const r of results) {
+      expect(existsSync(r.absolutePath)).toBe(true);
+    }
+  });
+
+  it("returns empty array when no package.json exists", async () => {
+    const emptyDir = await mkdtemp(resolve(tmpdir(), "fragments-empty-"));
+    const results = await discoverInstalledFragments(emptyDir);
+    expect(results).toEqual([]);
+    await rm(emptyDir, { recursive: true, force: true });
+  });
+});
+
+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

@@ -23,7 +23,7 @@ import autoprefixer from "autoprefixer";
 import { resolve, dirname, join } from "node:path";
 import { existsSync, realpathSync } from "node:fs";
 import { fileURLToPath } from "node:url";
-import { loadConfig, discoverSegmentFiles } from "../core/node.js";
+import { loadConfig, discoverSegmentFiles, discoverInstalledFragments } from "../core/node.js";
 import { segmentsPlugin } from "./vite-plugin.js";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
@@ -69,9 +69,11 @@ export async function createDevServer(
   // Load segments config
   const { config, configDir } = await loadConfig(configPath);
 
-  // Discover segment files
+  // Discover segment files (local + installed packages)
   const segmentFiles = await discoverSegmentFiles(config, configDir);
-  console.log(`📦 Found ${segmentFiles.length} fragment file(s)`);
+  const installedFiles = await discoverInstalledFragments(projectRoot);
+  const allSegmentFiles = [...segmentFiles, ...installedFiles];
+  console.log(`📦 Found ${segmentFiles.length} local + ${installedFiles.length} installed fragment file(s)`);
 
   // Try to load project's Vite config
   let projectViteConfig: InlineConfig = {};
@@ -99,6 +101,19 @@ export async function createDevServer(
   const nodeModulesPath = findNodeModules(projectRoot);
   console.log(`📁 Using node_modules: ${nodeModulesPath}`);
 
+  // Collect installed package roots so Vite can serve files from node_modules
+  const installedPkgRoots = [...new Set(
+    installedFiles.map(f => {
+      const idx = f.absolutePath.indexOf('/node_modules/');
+      if (idx === -1) return dirname(f.absolutePath);
+      const afterNm = f.absolutePath.slice(idx + '/node_modules/'.length);
+      const pkgName = afterNm.startsWith('@')
+        ? afterNm.split('/').slice(0, 2).join('/')
+        : afterNm.split('/')[0];
+      return resolve(projectRoot, 'node_modules', pkgName);
+    })
+  )];
+
   // Our Segments-specific configuration
   const segmentsConfig: InlineConfig = {
     configFile: false, // Don't load config again
@@ -110,7 +125,7 @@ export async function createDevServer(
       open: open ? "/fragments/" : false,
       fs: {
         // Allow serving files from viewer package, project, and node_modules root
-        allow: [viewerRoot, projectRoot, configDir, dirname(nodeModulesPath)],
+        allow: [viewerRoot, projectRoot, configDir, dirname(nodeModulesPath), ...installedPkgRoots],
       },
     },
 
@@ -120,7 +135,7 @@ export async function createDevServer(
 
       // Segments plugins (array including SVGR)
       ...segmentsPlugin({
-        segmentFiles,
+        segmentFiles: allSegmentFiles,
         config,
         projectRoot,
       }),
@@ -150,14 +165,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: {