bundling

Type Bundling for Monaco Editor

Overview

The project uses a custom type bundling system to provide full TypeScript IntelliSense support in the Monaco editor for @bubblelab/bubble-core and its dependencies. This is necessary because Monaco cannot directly resolve workspace packages or external dependencies.

Architecture

Key Files

• Bundler Script: packages/bubble-core/scripts/bubble-bundler.ts

  • Processes TypeScript declaration files (.d.ts)
  • Inlines all dependencies into a single self-contained bundle
  • Runs as part of the build process: tsc && tsx scripts/bubble-bundler.ts

• Bundle Output: packages/bubble-core/dist/bubble-bundle.d.ts

  • Self-contained TypeScript declarations
  • Includes Zod type stubs for type inference
  • Contains inlined types from @bubblelab/shared-schemas
  • All bubble-core types and classes

• Monaco Integration: apps/bubble-studio/public/bubble-types.txt

  • Copy of the bundle served to the Monaco editor
  • Loaded in apps/bubble-studio/src/components/MonacoEditor.tsx

Bundling Process

1. Compile TypeScript

   tsc  # Generates .d.ts files in dist/
   

2. Bundle Types

   • Start from packages/bubble-core/dist/index.d.ts
   • Recursively process all imports:
     • Relative imports (./types/bubble.js) → inline the file content
     • External imports (@bubblelab/shared-schemas) → bundle separately then inline
     • Zod imports → remove (custom stubs provided)

3. Shared Schemas Handling

   • @bubblelab/shared-schemas is bundled separately via bundleSharedSchemas()
   • Prevents cache key collisions (both packages have index.d.ts)
   • Uses absolute file paths as cache keys to avoid conflicts
   • Inlined content includes all shared types like:
     • BubbleOperationResult
     • BubbleResult<T>
     • BubbleTriggerEventRegistry
     • API schemas, credential types, etc.

4. Bundle Structure

   // Header comment
   
   // Zod type stubs (for z.infer, z.ZodObject, etc.)
   declare namespace z { ... }
   
   // Inlined shared-schemas types
   export interface BubbleOperationResult { ... }
   export interface BubbleResult<T> { ... }
   
   // Bubble-core types and classes
   export class BubbleFlow { ... }
   export class ServiceBubble { ... }