@fragments-sdk/cli 0.7.0 → 0.7.2

package/src/viewer/render-utils.ts

@@ -15,7 +15,7 @@ export interface RenderRequest {
   };
 }
 
-export interface SegmentInfo {
+export interface FragmentInfo {
   name: string;
   path: string;
 }
@@ -60,32 +60,32 @@ export function serializePropsToJsx(props: Record<string, unknown>): string {
 }
 
 /**
- * Find a segment by component name.
- * Returns the segment info if found, null otherwise.
+ * Find a fragment by component name.
+ * Returns the fragment info if found, null otherwise.
  */
-export function findSegmentByName(
+export function findFragmentByName(
   componentName: string,
-  segments: Array<{ path: string; segment: { meta: { name: string } } }>
-): SegmentInfo | null {
-  const match = segments.find(
-    (s) => s.segment.meta.name.toLowerCase() === componentName.toLowerCase()
+  fragments: Array<{ path: string; fragment: { meta: { name: string } } }>
+): FragmentInfo | null {
+  const match = fragments.find(
+    (s) => s.fragment.meta.name.toLowerCase() === componentName.toLowerCase()
   );
 
   if (!match) return null;
 
   return {
-    name: match.segment.meta.name,
+    name: match.fragment.meta.name,
     path: match.path,
   };
 }
 
 /**
- * Get list of available component names from loaded segments.
+ * Get list of available component names from loaded fragments.
  */
 export function getAvailableComponents(
-  segments: Array<{ segment: { meta: { name: string } } }>
+  fragments: Array<{ fragment: { meta: { name: string } } }>
 ): string[] {
-  return segments.map((s) => s.segment.meta.name).sort();
+  return fragments.map((s) => s.fragment.meta.name).sort();
 }
 
 /**
@@ -93,7 +93,7 @@ export function getAvailableComponents(
  * This script imports the component and renders it with the given props.
  */
 export function generateRenderScript(
-  segmentPath: string,
+  fragmentPath: string,
   componentName: string,
   props: Record<string, unknown> = {}
 ): string {
@@ -112,20 +112,20 @@ export function generateRenderScript(
 import React from "react";
 import { createRoot } from "react-dom/client";
 
-// Import the segment to get the component
+// Import the fragment to get the component
 async function render() {
   const root = document.getElementById("render-root");
 
   try {
-    // Dynamic import of the segment file
-    const segmentModule = await import("${segmentPath}");
-    const segment = segmentModule.default;
+    // Dynamic import of the fragment file
+    const fragmentModule = await import("${fragmentPath}");
+    const fragment = fragmentModule.default;
 
-    if (!segment || !segment.component) {
-      throw new Error("Segment does not export a component");
+    if (!fragment || !fragment.component) {
+      throw new Error("Fragment does not export a component");
     }
 
-    const Component = segment.component;
+    const Component = fragment.component;
 
     // Create React root and render
     const reactRoot = createRoot(root);
@@ -166,5 +166,5 @@ render();
  * This creates a unique ID that Vite can resolve.
  */
 export function generateRenderModuleId(componentName: string, requestId: string): string {
-  return `virtual:segments-render-${componentName}-${requestId}`;
+  return `virtual:fragments-render-${componentName}-${requestId}`;
 }

package/src/viewer/server.ts

@@ -1,13 +1,13 @@
 /**
- * Segments Dev Server
+ * Fragments Dev Server
  *
  * Runs a Vite dev server that:
  * 1. Uses the project's existing Vite/build configuration
  * 2. Has access to all project dependencies
  * 3. Can render actual components with proper styling
- * 4. Supports HMR for segment file changes
+ * 4. Supports HMR for fragment file changes
  *
- * This is the "Storybook-like" experience for Segments.
+ * This is the "Storybook-like" experience for Fragments.
  */
 
 import {
@@ -21,8 +21,8 @@ import react from "@vitejs/plugin-react";
 import { resolve, dirname, join } from "node:path";
 import { existsSync, realpathSync } from "node:fs";
 import { fileURLToPath } from "node:url";
-import { loadConfig, discoverSegmentFiles, discoverInstalledFragments } from "../core/node.js";
-import { segmentsPlugin } from "./vite-plugin.js";
+import { loadConfig, discoverFragmentFiles, discoverInstalledFragments } from "../core/node.js";
+import { fragmentsPlugin } from "./vite-plugin.js";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 // At runtime, __dirname is dist/. Viewer assets live in src/viewer/.
@@ -34,7 +34,7 @@ const uiLibRoot = resolve(packagesRoot, "../libs/ui/src");
 export interface DevServerOptions {
   /** Port to run the server on */
   port?: number;
-  /** Path to segments config file */
+  /** Path to fragments config file */
   configPath?: string;
   /** Open browser on start */
   open?: boolean;
@@ -43,7 +43,7 @@ export interface DevServerOptions {
 }
 
 /**
- * Create and start the Segments dev server.
+ * Create and start the Fragments dev server.
  *
  * The server runs WITHIN the project's context, meaning:
  * - All project dependencies are available
@@ -64,14 +64,14 @@ export async function createDevServer(
 
   console.log("\n🔧 Loading configuration...");
 
-  // Load segments config
+  // Load fragments config
   const { config, configDir } = await loadConfig(configPath);
 
-  // Discover segment files (local + installed packages)
-  const segmentFiles = await discoverSegmentFiles(config, configDir);
+  // Discover fragment files (local + installed packages)
+  const fragmentFiles = await discoverFragmentFiles(config, configDir);
   const installedFiles = await discoverInstalledFragments(projectRoot);
-  const allSegmentFiles = [...segmentFiles, ...installedFiles];
-  console.log(`📦 Found ${segmentFiles.length} local + ${installedFiles.length} installed fragment file(s)`);
+  const allFragmentFiles = [...fragmentFiles, ...installedFiles];
+  console.log(`📦 Found ${fragmentFiles.length} local + ${installedFiles.length} installed fragment file(s)`);
 
   // Try to load project's Vite config
   let projectViteConfig: InlineConfig = {};
@@ -112,8 +112,8 @@ export async function createDevServer(
     })
   )];
 
-  // Our Segments-specific configuration
-  const segmentsConfig: InlineConfig = {
+  // Our Fragments-specific configuration
+  const fragmentsConfig: InlineConfig = {
     configFile: false, // Don't load config again
     root: projectRoot, // Run from PROJECT root
     base: "/",
@@ -131,9 +131,9 @@ export async function createDevServer(
       // React support (if not already in project config)
       ...(hasReactPlugin(projectViteConfig) ? [] : [react()]),
 
-      // Segments plugins (array including SVGR)
-      ...segmentsPlugin({
-        segmentFiles: allSegmentFiles,
+      // Fragments plugins (array including SVGR)
+      ...fragmentsPlugin({
+        fragmentFiles: allFragmentFiles,
         config,
         projectRoot,
       }),
@@ -170,7 +170,7 @@ export async function createDevServer(
 
   // Merge project config with our config
   // Project config takes precedence for most things
-  const mergedConfig = mergeConfig(projectViteConfig, segmentsConfig);
+  const mergedConfig = mergeConfig(projectViteConfig, fragmentsConfig);
 
   console.log("🚀 Starting dev server...\n");
 

package/src/viewer/utils/detectRelationships.ts

@@ -9,7 +9,7 @@
  */
 
 import { isValidElement, type ReactNode, type ReactElement, Children } from "react";
-import type { SegmentDefinition, ComponentRelation, RelationshipType } from "../../core/index.js";
+import type { FragmentDefinition, ComponentRelation, RelationshipType } from "../../core/index.js";
 
 interface DetectedRelationship {
   component: string;
@@ -85,32 +85,32 @@ function collectComponentNames(
  * Get cached set of known component names
  */
 function getKnownComponents(
-  allSegments: Array<{ path: string; segment: SegmentDefinition }>
+  allFragments: Array<{ path: string; fragment: FragmentDefinition }>
 ): Set<string> {
-  // Invalidate cache if segment count changed
-  if (!knownComponentsCache || knownComponentsCache.count !== allSegments.length) {
+  // Invalidate cache if fragment count changed
+  if (!knownComponentsCache || knownComponentsCache.count !== allFragments.length) {
     knownComponentsCache = {
-      count: allSegments.length,
-      set: new Set(allSegments.map(s => s.segment.meta.name)),
+      count: allFragments.length,
+      set: new Set(allFragments.map(s => s.fragment.meta.name)),
     };
   }
   return knownComponentsCache.set;
 }
 
 /**
- * Detect composition relationships from a segment's variants
+ * Detect composition relationships from a fragment's variants
  */
 export function detectCompositionRelationships(
-  segment: SegmentDefinition,
-  allSegments: Array<{ path: string; segment: SegmentDefinition }>
+  fragment: FragmentDefinition,
+  allFragments: Array<{ path: string; fragment: FragmentDefinition }>
 ): DetectedRelationship[] {
   const relationships: DetectedRelationship[] = [];
-  const componentName = segment.meta.name;
-  const knownComponents = getKnownComponents(allSegments);
+  const componentName = fragment.meta.name;
+  const knownComponents = getKnownComponents(allFragments);
   const usedComponents = new Set<string>();
 
   // Analyze each variant's render output
-  for (const variant of segment.variants || []) {
+  for (const variant of fragment.variants || []) {
     try {
       const rendered = variant.render();
       const componentNames = collectComponentNames(rendered);
@@ -152,8 +152,8 @@ export function detectCompositionRelationships(
  * - Components share overlapping variant patterns (future enhancement)
  */
 export function detectSiblingRelationships(
-  _segment: SegmentDefinition,
-  _allSegments: Array<{ path: string; segment: SegmentDefinition }>
+  _fragment: FragmentDefinition,
+  _allFragments: Array<{ path: string; fragment: FragmentDefinition }>
 ): DetectedRelationship[] {
   // Disabled: Category-based sibling detection creates noise
   // Meaningful sibling relationships should be defined manually
@@ -174,8 +174,8 @@ export function detectSiblingRelationships(
  * but that requires NLP/semantic analysis which is out of scope.
  */
 export function detectAlternativeRelationships(
-  _segment: SegmentDefinition,
-  _allSegments: Array<{ path: string; segment: SegmentDefinition }>
+  _fragment: FragmentDefinition,
+  _allFragments: Array<{ path: string; fragment: FragmentDefinition }>
 ): DetectedRelationship[] {
   // Disabled: Pattern-based alternative detection is too weak
   // Meaningful alternatives should be defined manually with clear rationale
@@ -187,10 +187,10 @@ export function detectAlternativeRelationships(
  * Uses caching to avoid expensive render() calls on subsequent views
  */
 export function detectAllRelationships(
-  segment: SegmentDefinition,
-  allSegments: Array<{ path: string; segment: SegmentDefinition }>
+  fragment: FragmentDefinition,
+  allFragments: Array<{ path: string; fragment: FragmentDefinition }>
 ): DetectedRelationship[] {
-  const cacheKey = segment.meta.name;
+  const cacheKey = fragment.meta.name;
   const now = Date.now();
 
   // Check cache first
@@ -200,9 +200,9 @@ export function detectAllRelationships(
   }
 
   const all = [
-    ...detectCompositionRelationships(segment, allSegments),
-    ...detectSiblingRelationships(segment, allSegments),
-    ...detectAlternativeRelationships(segment, allSegments),
+    ...detectCompositionRelationships(fragment, allFragments),
+    ...detectSiblingRelationships(fragment, allFragments),
+    ...detectAlternativeRelationships(fragment, allFragments),
   ];
 
   // Deduplicate by component name, keeping highest confidence