feat: implement auto-discovery system for playground components - #306

src/components/playground/auto-discovery.ts (3)

86-96: Harden and simplify snippet extraction regex; avoid variable-pattern pitfalls.

Current pattern is vulnerable to pathological backtracking and can miss self-closing tags. Escape the name and use a single alternation that handles paired/self‑closing tags.

-      const componentPattern = new RegExp(`<${pascalName}[^>]*(?:>|\\/>)[\\s\\S]*?(?:<\\/${pascalName}>|(?=\\n\\s*\\)))`, 'i');
+      const escaped = pascalName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      const componentPattern = new RegExp(
+        `<${escaped}\\b[^>]*>([\\s\\S]*?)<\\/${escaped}>|<${escaped}\\b[^>]*/>`,
+        'i'
+      );

Optionally, apply the same approach to the fallback regex. Based on static analysis hints.

---

112-121: Add camelCase export fallback; improve resilience.

Many modules export camelCase names. Try that before giving up.

     const module = await import(`@/components/billingsdk/${componentName}`);
     const pascalName = toPascalCase(componentName);
+    const camelName = componentName.replace(/-([a-z])/g, (_, c) => c.toUpperCase());

     // Try multiple export patterns
-    const component = module[pascalName] || module.default || module[componentName];
+    const component =
+      module[pascalName] ||
+      module.default ||
+      module[camelName] ||
+      module[componentName];

---

27-36: Add fetch timeouts to avoid hanging UI.

Wrap fetch with AbortController to fail fast.

 async function fetchRegistryManifest(): Promise<RegistryManifest | null> {
   try {
-    const response = await fetch('/r/registry.json');
+    const ac = new AbortController();
+    const t = setTimeout(() => ac.abort(), 10000);
+    const response = await fetch('/r/registry.json', { signal: ac.signal });
+    clearTimeout(t);
     if (!response.ok) return null;
     return await response.json();
   } catch (error) {

 async function fetchComponentMetadata(componentName: string): Promise<any> {
   try {
-    const response = await fetch(`/r/${componentName}.json`);
+    const ac = new AbortController();
+    const t = setTimeout(() => ac.abort(), 10000);
+    const response = await fetch(`/r/${componentName}.json`, { signal: ac.signal });
+    clearTimeout(t);
     if (!response.ok) return null;
     return await response.json();
   } catch (error) {

Also applies to: 41-50

src/components/playground/playground-header.tsx (2)

104-108: Use SelectValue without children.

shadcn/ui SelectValue is self-closing; children are ignored. Rely on placeholder and selected item label.

-            <SelectTrigger className="w-64">
-              <SelectValue placeholder={isLoading ? "Loading components..." : "Select a component"}>
-                {state.selectedComponent?.name || (isLoading ? "Loading..." : "Select a component")}
-              </SelectValue>
+            <SelectTrigger className="w-64">
+              <SelectValue placeholder={isLoading ? "Loading components..." : "Select a component"} />

---

40-43: Minor: remove redundant filtering state.

selectedCategory is fixed to "all"; filteredComponents mirrors components. Simplify by using components directly (or implement category selection).

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

src/components/playground/playground-header.tsx (1)

21-30: Lazy list + on-demand load looks good; resolves earlier eager-import concern.

Switched to getComponentList() on mount and discoverComponent() on selection. This addresses the prior perf warning in the header.

Also applies to: 44-59

src/components/playground/playground-header.tsx (4)

16-16: Remove unused category state and simplify filtering.

selectedCategory is fixed to "all" and never updated; filteredComponents is thus always componentList. Simplify and avoid dead state.

Apply:

-  const [selectedCategory] = useState<string>("all");
-  const filteredComponents = selectedCategory === "all" 
-    ? componentList 
-    : componentList.filter(comp => comp.category === selectedCategory);
+  // Category filtering not yet implemented; use full list.
+  const filteredComponents = componentList;

Also applies to: 40-43, 132-134

---

126-126: Tailwind class likely invalid: use min-w-[16rem] instead of min-w-64.

Tailwind provides w-64 but not min-w-64. Use an arbitrary value class.

-            <SelectContent className="w-64 min-w-64 max-h-96 overflow-y-auto">
+            <SelectContent className="w-64 min-w-[16rem] max-h-96 overflow-y-auto">

---

22-30: Guard setState on unmount.

Add AbortController or a mounted flag to avoid state updates after unmount.

   useEffect(() => {
-    async function loadComponentList() {
+    let cancelled = false;
+    async function loadComponentList() {
       setIsLoading(true);
       const list = await getComponentList();
-      setComponentList(list);
-      setIsLoading(false);
+      if (!cancelled) {
+        setComponentList(list);
+        setIsLoading(false);
+      }
     }
     loadComponentList();
-  }, []);
+    return () => {
+      cancelled = true;
+    };
+  }, []);

---

120-124: SelectValue children are unnecessary with shadcn/ui.

SelectValue typically uses the placeholder prop and renders selected text automatically; custom children here likely won’t render. Keep placeholder logic; drop children to reduce noise.

-              <SelectValue placeholder={isLoading ? "Loading components..." : "Select a component"}>
-                {isLoadingComponent 
-                  ? "Loading component..." 
-                  : state.selectedComponent?.name || (isLoading ? "Loading..." : "Select a component")}
-              </SelectValue>
+              <SelectValue placeholder={isLoading ? "Loading components..." : (isLoadingComponent ? "Loading component..." : "Select a component")} />

src/components/playground/auto-discovery.ts (4)

202-218: Improve name normalization for acronyms and number↔letter boundaries.

Handle “APICard” → “api-card” and “v2Plan”/“plan2X” cases.

-function normalizeComponentName(name: string): string {
-  return name
-    // Insert hyphens between lower→upper transitions (decamelize)
-    .replace(/([a-z])([A-Z])/g, '$1-$2')
-    // Insert hyphens between letter→number transitions
-    .replace(/([a-zA-Z])([0-9])/g, '$1-$2')
-    // Lowercase everything
-    .toLowerCase()
-    // Replace whitespace with hyphens
-    .replace(/\s+/g, '-')
-    // Remove non a-z0-9- characters
-    .replace(/[^a-z0-9-]/g, '')
-    // Collapse multiple hyphens
-    .replace(/-+/g, '-')
-    // Trim leading/trailing hyphens
-    .replace(/^-+|-+$/g, '');
-}
+function normalizeComponentName(name: string): string {
+  return name
+    .trim()
+    // lower/number -> Upper (e.g., "planId" → "plan-Id")
+    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+    // ACRONYM -> Word (e.g., "APIClient" → "API-Client")
+    .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')
+    // number -> letter and letter -> number
+    .replace(/([0-9])([a-zA-Z])/g, '$1-$2')
+    .replace(/([a-zA-Z])([0-9])/g, '$1-$2')
+    // spaces/underscores -> hyphens
+    .replace(/[\s_]+/g, '-')
+    // strip invalid
+    .replace(/[^a-zA-Z0-9-]/g, '')
+    // collapse hyphens
+    .replace(/-+/g, '-')
+    // trim hyphens
+    .replace(/^-+|-+$/g, '')
+    .toLowerCase();
+}

---

151-183: Avoid unbounded parallel fetch/imports; limit concurrency.

Large registries can spike network/CPU and bloat memory. Process in small batches.

-  // Process each component in parallel for better performance
-  const results = await Promise.allSettled(
-    componentItems.map(async (item) => {
-      try {
-        // Fetch detailed metadata
-        const metadata = await fetchComponentMetadata(item.name);
-        
-        // Dynamically import the component
-        const Component = await importComponent(item.name);
-        
-        if (!Component) {
-          console.warn(`Skipping ${item.name}: Component not found`);
-          return null;
-        }
-
-        const config: ComponentConfig = {
-          id: item.name,
-          name: item.title,
-          description: item.description,
-          category: categorizeComponent(item.name),
-          component: Component,
-          imports: [`@/components/billingsdk/${item.name}`],
-          defaultCode: extractUsageSnippet(metadata, item.name),
-          defaultProps: {},
-        };
-
-        return config;
-      } catch (error) {
-        console.error(`Failed to process component ${item.name}:`, error);
-        return null;
-      }
-    })
-  );
+  const concurrency = 6;
+  const results: PromiseSettledResult<ComponentConfig | null>[] = [];
+  for (let i = 0; i < componentItems.length; i += concurrency) {
+    const slice = componentItems.slice(i, i + concurrency);
+    // process a batch
+    const batch = await Promise.allSettled(
+      slice.map(async (item) => {
+        try {
+          const metadata = await fetchComponentMetadata(item.name);
+          const Component = await importComponent(item.name);
+          if (!Component) {
+            console.warn(`Skipping ${item.name}: Component not found`);
+            return null;
+          }
+          return {
+            id: item.name,
+            name: item.title,
+            description: item.description,
+            category: categorizeComponent(item.name),
+            component: Component,
+            imports: [`@/components/billingsdk/${item.name}`],
+            defaultCode: extractUsageSnippet(metadata, item.name),
+            defaultProps: {},
+          } as ComponentConfig;
+        } catch (error) {
+          console.error(`Failed to process component ${item.name}:`, error);
+          return null;
+        }
+      })
+    );
+    results.push(...batch);
+  }

---

27-36: Memoize registry/metadata to reduce redundant fetches.

getComponentList/getComponentNames/discovery all hit the manifest; add module-level caching to cut network calls on the same page load.

+let manifestCache: Promise<RegistryManifest | null> | null = null;
 async function fetchRegistryManifest(): Promise<RegistryManifest | null> {
-  try {
+  try {
-    const response = await fetch('/r/registry.json');
+    if (!manifestCache) {
+      manifestCache = (async () => {
+        const response = await fetch('/r/registry.json');
+        if (!response.ok) return null;
+        return await response.json();
+      })();
+    }
-    if (!response.ok) return null;
-    return await response.json();
+    return await manifestCache;
   } catch (error) {
     console.error('Failed to fetch registry manifest:', error);
     return null;
   }
 }

Optionally cache per-component metadata with a Map<string, Promise>.

Also applies to: 276-296, 301-313

---

149-150: Reduce console noise in production.

Wrap logs behind a debug flag or use a logger with levels to avoid noisy consoles in prod.

Also applies to: 194-196, 229-231, 254-255

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

src/components/playground/auto-discovery.ts (1)

156-220: Note: Eager import function still exported.

The discoverComponents() function imports all components up front (lines 175-183), which past reviews flagged as bloating initial load. While getComponentList() now provides a lightweight alternative, this function remains exported.

If discoverComponents() is no longer needed for the primary use case, consider:

1. Deprecating it with a JSDoc @deprecated tag directing users to getComponentList() + discoverComponent()
2. Documenting when it should be used (e.g., bulk pre-loading scenarios)
3. Making it internal (not exported) if there's no valid use case

Would you like me to generate a deprecation notice or alternative approach?

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

src/components/playground/auto-discovery.ts (5)

134-151: Dynamic import path creates a large context chunk; prefer explicit module map.

import(\@/components/billingsdk/${componentName}`)` makes bundlers include the entire directory in a single context chunk, undermining code‑splitting and bloating first load.

• If using Vite: use import.meta.glob to build a map and load only the matched module.
• If using Next/Webpack: generate a loader map at build time (from the registry) or a narrow require.context.

Please confirm bundler. I can provide a concrete patch (Vite glob or Next/Webpack map) once confirmed. Example (Vite):

// top-level
const modules = import.meta.glob('@/components/billingsdk/**/*.{tsx,jsx,ts,js}', { eager: false });

async function importComponent(componentName: string) {
  const entry = Object.keys(modules).find(
    (k) => k.endsWith(`/${componentName}.tsx`) || k.endsWith(`/${componentName}/index.tsx`)
  );
  return entry ? (await modules[entry]())?.default ?? (await modules[entry]())[toPascalCase(componentName)] : null;
}

---

226-242: Strengthen name normalization (handle acronyms and digit boundaries).

Current regex misses cases like “UIForm”, “XMLHttp”, and number→letter. Use a more robust pipeline.

Apply:

-function normalizeComponentName(name: string): string {
-  return name
-    // Insert hyphens between lower→upper transitions (decamelize)
-    .replace(/([a-z])([A-Z])/g, '$1-$2')
-    // Insert hyphens between letter→number transitions
-    .replace(/([a-zA-Z])([0-9])/g, '$1-$2')
-    // Lowercase everything
-    .toLowerCase()
-    // Replace whitespace with hyphens
-    .replace(/\s+/g, '-')
-    // Remove non a-z0-9- characters
-    .replace(/[^a-z0-9-]/g, '')
-    // Collapse multiple hyphens
-    .replace(/-+/g, '-')
-    // Trim leading/trailing hyphens
-    .replace(/^-+|-+$/g, '');
-}
+function normalizeComponentName(name: string): string {
+  return name
+    .trim()
+    .replace(/[_\s]+/g, '-')
+    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')        // lower/digit → Upper
+    .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')     // ACRONYM→Capitalized
+    .replace(/([a-zA-Z])([0-9])/g, '$1-$2')        // letter → digit
+    .replace(/([0-9])([a-zA-Z])/g, '$1-$2')        // digit → letter
+    .toLowerCase()
+    .replace(/[^a-z0-9-]/g, '')
+    .replace(/-+/g, '-')
+    .replace(/^-+|-+$/g, '');
+}

---

27-36: Add timeout and lightweight cache for fetches; consider SSR-safe URLs.

Avoid hanging fetches and duplicate manifest downloads; also ensure SSR calls don’t use relative “/r/...”.

Apply caching + timeout to manifest; replicate to metadata as needed:

+let manifestCache: { data: RegistryManifest | null; ts: number } = { data: null, ts: 0 };
+const MANIFEST_TTL_MS = 60_000;
+
 async function fetchRegistryManifest(): Promise<RegistryManifest | null> {
-  try {
-    const response = await fetch('/r/registry.json');
+  const now = Date.now();
+  if (manifestCache.data && now - manifestCache.ts < MANIFEST_TTL_MS) return manifestCache.data;
+  try {
+    const controller = new AbortController();
+    const timer = setTimeout(() => controller.abort(), 8000);
+    // If SSR, prefer absolute base (e.g., NEXT_PUBLIC_BASE_URL); keep relative for CSR.
+    const url = typeof window === 'undefined' && process.env.NEXT_PUBLIC_BASE_URL
+      ? new URL('/r/registry.json', process.env.NEXT_PUBLIC_BASE_URL).toString()
+      : '/r/registry.json';
+    const response = await fetch(url, { signal: controller.signal } as RequestInit);
+    clearTimeout(timer);
     if (!response.ok) return null;
-    return await response.json();
+    const data = await response.json();
+    manifestCache = { data, ts: now };
+    return data;
   } catch (error) {
     console.error('Failed to fetch registry manifest:', error);
     return null;
   }
 }

And for metadata:

 async function fetchComponentMetadata(componentName: string): Promise<any> {
   try {
-    const response = await fetch(`/r/${componentName}.json`);
+    const controller = new AbortController();
+    const timer = setTimeout(() => controller.abort(), 8000);
+    const url = typeof window === 'undefined' && process.env.NEXT_PUBLIC_BASE_URL
+      ? new URL(`/r/${componentName}.json`, process.env.NEXT_PUBLIC_BASE_URL).toString()
+      : `/r/${componentName}.json`;
+    const response = await fetch(url, { signal: controller.signal } as RequestInit);
+    clearTimeout(timer);
     if (!response.ok) return null;
     return await response.json();
   } catch (error) {

Confirm runtime (Next vs Vite) so we can align the base URL approach.

Also applies to: 41-50

---

314-320: Return lists in stable, sorted order.

Sorting improves UX and determinism.

Apply:

   return componentItems.map(item => ({
     id: item.name,
     name: item.title,
     description: item.description,
     category: categorizeComponent(item.name),
-  }));
+  })).sort((a, b) => a.name.localeCompare(b.name));

   return manifest.items
     .filter(item => 
       item.type === 'registry:block' && 
       item.name !== 'index' && 
       item.name !== 'all' &&
       item.name !== 'hello-world'
     )
-    .map(item => item.name);
+    .map(item => item.name)
+    .sort((a, b) => a.localeCompare(b));

Also applies to: 329-337

---

173-174: Gate console logs behind a debug flag.

Avoid noisy logs in production; keep them when developing.

Example:

const DEBUG = process.env.NODE_ENV !== 'production';
// then: if (DEBUG) console.log(...)

Also applies to: 218-219, 253-254, 278-279

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

src/components/playground/auto-discovery.ts (1)

94-126: Consider reducing console verbosity in production.

The multi-path import strategy is excellent and the logging helps debugging. However, the extensive console.log statements (lines 97, 102, 111, 116) may clutter production consoles.

Consider wrapping debug logs in a condition:

const DEBUG = process.env.NODE_ENV === 'development';

if (DEBUG) console.log(`[Import] Attempting: @/components/billingsdk/${componentName}`);

Or use a logging library with configurable levels.

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

src/components/playground/auto-discovery.ts (2)

101-133: Consider adding a debug flag or using a logging library.

The function contains extensive console logging (lines 104, 109, 113, 115, 118, 123, 127, 129, 131) that may be verbose in production. Consider wrapping these in a debug flag or using a proper logging library with configurable levels.

---

55-61: Categorization logic could be more maintainable.

The cascading if statements with keyword checks work but could be refactored into a configuration map for easier maintenance and extension.

Example structure:

const categoryPatterns = [
  { patterns: ['pricing-table'], category: 'pricing' },
  { patterns: ['subscription', 'plan', 'cancel', 'update'], category: 'subscription' },
  { patterns: ['payment', 'invoice', 'billing'], category: 'payment' },
  { patterns: ['usage', 'meter', 'proration', 'upcoming-charges', 'detailed-usage'], category: 'usage' },
];

function categorizeComponent(name: string): string {
  for (const { patterns, category } of categoryPatterns) {
    if (patterns.some(p => name.includes(p))) return category;
  }
  return 'ui';
}

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

src/components/proration-preview-demo.tsx (1)

97-104: Add WebKit scrollbar hiding and consider accessibility.

The inline styles hide scrollbars for Firefox and IE/Edge but not for Chrome/Safari (WebKit browsers). Additionally, hiding scrollbars without a visual cue (fade effect, shadow, or indicator) may reduce discoverability for users who need to know additional tabs exist.

To hide scrollbars across all browsers, add a global CSS rule targeting this component:

.scrollable-tabs::-webkit-scrollbar {
  display: none;
}

Then update the JSX:

-        <TabsList className="flex w-full overflow-x-auto gap-1 p-1 rounded-lg" style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
+        <TabsList className="scrollable-tabs flex w-full overflow-x-auto gap-1 p-1 rounded-lg" style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>

Additionally, consider adding a subtle fade or shadow at the edges to indicate scrollability:

-      <div className="overflow-hidden">
+      <div className="relative overflow-hidden after:absolute after:right-0 after:top-0 after:h-full after:w-8 after:bg-gradient-to-l after:from-background after:to-transparent after:pointer-events-none">

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Learnt from: rajdesai17
Repo: dodopayments/billingsdk PR: 278
File: src/registry/billingsdk/demo/limited-offer-dialog-demo.tsx:1-55
Timestamp: 2025-10-03T13:12:09.970Z
Learning: In the dodopayments/billingsdk repository, demo files should be duplicated in both `src/components/` and `src/registry/billingsdk/demo/` directories with identical implementations. Do not suggest re-exporting or consolidating these demo files.