diff --git a/Backlog.md b/Backlog.md
index f6a2f0be..f0e17b01 100644
--- a/Backlog.md
+++ b/Backlog.md
@@ -2,85 +2,26 @@
## ordered log (for production release)
-### console log in di-core and vite-plugin
+### fix interface collision & test case
-### remove magic strings
+two interface of the same name and in different files are resolved inproperly
-see `.includes('` `*.*js*,*.md,*.test.ts`
+`should fail with current implementation - interface name collision`
-Magic strings that will cause plugin failures for users and need to be made configurable:
+### [โ
] playground
-#### ๐ด HIGH PRIORITY - Will break plugin functionality:
+> โ
use vite plugin in playground application similarly to https://typia.io/playground/ or others
-**1. File path filtering (affects all users):**
+- โ
fix all builds
+- โ
fix all tests
+- โ
add playground delpoyment to github pages
+- โ
add build and ALL tests to CI
+ - โ
dicore unit & e2e
+ - โ
cross package
+ - โ
e2e
-- `shouldSkipFile` / `shouldProcessFile` in multiple locations:
- - [functional-di-enhanced-transformer.ts:468-471](monorepo/packages/di-core/tools/functional-di-enhanced-transformer/functional-di-enhanced-transformer.ts#L468-L471) - `'generated'`, `'node_modules'`, `'.d.ts'`, `'.tdi2'`
- - [utils.ts:10-15](monorepo/packages/di-core/tools/functional-di-enhanced-transformer/utils.ts#L10-L15) - `'generated'`, `'node_modules'`, `'.d.ts'`, `'.tdi2'`, `'.test.'`, `'.spec.'`
- - [integrated-interface-resolver.ts:346-349](monorepo/packages/di-core/tools/interface-resolver/integrated-interface-resolver.ts#L346-L349) - Same patterns
- - [enhanced-di-transformer.ts:314-317](monorepo/packages/di-core/tools/enhanced-di-transformer.ts#L314-L317) - Same patterns
- - [plugin-core/config.ts:127,132](monorepo/packages/plugin-core/src/config.ts#L127,132) - `'node_modules'`, `'.tdi2'`, `'/generated/'`
-
- **Issue**: Users with custom output directories or non-standard project structures will have their files incorrectly filtered
- **Solution**: Add `excludePatterns?: string[]` to plugin options
-
-**2. DI pattern detection (affects pattern matching):**
-
-- [pattern-detection.ts:36-82](monorepo/packages/plugin-core/src/pattern-detection.ts#L36-L82):
- - Service patterns: `'@Service'`, `'Inject<'`, `'@Inject'`, `'implements'`, `'Interface'`
- - File naming: `'.service.'`, `'/services/'`, `'\\services\\'`, `'.component.'`, `'/components/'`, `'\\components\\'`
-
- **Issue**: Users with different naming conventions won't be detected
- **Solution**: Make pattern detection configurable via plugin options (already partially done via `advanced.diPatterns`)
-
-**3. Marker detection hardcoded strings:**
-
-- [utils.ts:41,88](monorepo/packages/di-core/tools/functional-di-enhanced-transformer/utils.ts#L41,88) - `'Inject<'`, `'InjectOptional<'`
-- [debug-file-generator.ts:144-170](monorepo/packages/di-core/tools/functional-di-enhanced-transformer/debug-file-generator.ts#L144-L170) - `'useService('`, `'useOptionalService('`, `'import'`, `'const {'`, `'} = props'`, etc.
-
- **Issue**: Users with custom DI markers won't be detected
- **Solution**: Already configurable via `advanced.diPatterns.interfaceMarker`
-
-#### ๐ก MEDIUM PRIORITY - May affect some users:
-
-**4. Vite plugin-specific patterns:**
-
-- [vite-plugin-di/plugin.ts:405,494](monorepo/packages/vite-plugin-di/src/plugin.ts#L405,494) - `'.tdi2'` for HMR filtering
-
- **Issue**: Users with custom outputDir won't get proper HMR
- **Solution**: Use `options.outputDir` instead of hardcoded `.tdi2`
-
-**5. HMR message detection:**
-
-- [vite-plugin-di/e2e/helpers.ts:198,217-218](monorepo/packages/vite-plugin-di/e2e/helpers.ts#L198,217-218) - `'[vite] hmr update'`, `'[vite] hot updated'`, `'[vite] page reload'`, `'full-reload'`
-
- **Issue**: Tests only - false positive
-
-#### ACTION ITEMS:
-
-1. **Add to plugin options**:
-
- ```typescript
- export interface DIPluginOptions {
- // ... existing options
- excludePatterns?: string[]; // Default: ['node_modules', '.d.ts', '.test.', '.spec.']
- excludeDirs?: string[]; // Default: ['node_modules']
- // Note: outputDir already configurable, should be used instead of hardcoded '.tdi2'
- }
- ```
-
-2. **Files to update**:
- - Replace hardcoded `'.tdi2'` checks with `options.outputDir` in vite-plugin HMR code
- - Replace hardcoded exclude patterns with `options.excludePatterns` in all `shouldSkipFile` functions
- - Document that `advanced.diPatterns` is available for custom marker detection
-
-3. **Testing**:
- - Add tests for custom `outputDir` with HMR
- - Add tests for custom `excludePatterns`
-
-### [โ] playground
-
-> use vite plugin in playground application similarly to https://typia.io/playground/ or others
+โ
fix preview
+โ
fix comments in PR
### [โ] write state ownership docs section
@@ -756,6 +697,84 @@ evaluate scenarios
## Done
+### โ
console log in di-core and vite-plugin
+
+improve logging with DEBUG and LOG_LEVEL
+
+### โ
remove magic strings
+
+see `.includes('` `*.*js*,*.md,*.test.ts`
+
+Magic strings that will cause plugin failures for users and need to be made configurable:
+
+#### ๐ด HIGH PRIORITY - Will break plugin functionality:
+
+**1. File path filtering (affects all users):**
+
+- `shouldSkipFile` / `shouldProcessFile` in multiple locations:
+ - [functional-di-enhanced-transformer.ts:468-471](monorepo/packages/di-core/tools/functional-di-enhanced-transformer/functional-di-enhanced-transformer.ts#L468-L471) - `'generated'`, `'node_modules'`, `'.d.ts'`, `'.tdi2'`
+ - [utils.ts:10-15](monorepo/packages/di-core/tools/functional-di-enhanced-transformer/utils.ts#L10-L15) - `'generated'`, `'node_modules'`, `'.d.ts'`, `'.tdi2'`, `'.test.'`, `'.spec.'`
+ - [integrated-interface-resolver.ts:346-349](monorepo/packages/di-core/tools/interface-resolver/integrated-interface-resolver.ts#L346-L349) - Same patterns
+ - [enhanced-di-transformer.ts:314-317](monorepo/packages/di-core/tools/enhanced-di-transformer.ts#L314-L317) - Same patterns
+ - [plugin-core/config.ts:127,132](monorepo/packages/plugin-core/src/config.ts#L127,132) - `'node_modules'`, `'.tdi2'`, `'/generated/'`
+
+ **Issue**: Users with custom output directories or non-standard project structures will have their files incorrectly filtered
+ **Solution**: Add `excludePatterns?: string[]` to plugin options
+
+**2. DI pattern detection (affects pattern matching):**
+
+- [pattern-detection.ts:36-82](monorepo/packages/plugin-core/src/pattern-detection.ts#L36-L82):
+ - Service patterns: `'@Service'`, `'Inject<'`, `'@Inject'`, `'implements'`, `'Interface'`
+ - File naming: `'.service.'`, `'/services/'`, `'\\services\\'`, `'.component.'`, `'/components/'`, `'\\components\\'`
+
+ **Issue**: Users with different naming conventions won't be detected
+ **Solution**: Make pattern detection configurable via plugin options (already partially done via `advanced.diPatterns`)
+
+**3. Marker detection hardcoded strings:**
+
+- [utils.ts:41,88](monorepo/packages/di-core/tools/functional-di-enhanced-transformer/utils.ts#L41,88) - `'Inject<'`, `'InjectOptional<'`
+- [debug-file-generator.ts:144-170](monorepo/packages/di-core/tools/functional-di-enhanced-transformer/debug-file-generator.ts#L144-L170) - `'useService('`, `'useOptionalService('`, `'import'`, `'const {'`, `'} = props'`, etc.
+
+ **Issue**: Users with custom DI markers won't be detected
+ **Solution**: Already configurable via `advanced.diPatterns.interfaceMarker`
+
+#### ๐ก MEDIUM PRIORITY - May affect some users:
+
+**4. Vite plugin-specific patterns:**
+
+- [vite-plugin-di/plugin.ts:405,494](monorepo/packages/vite-plugin-di/src/plugin.ts#L405,494) - `'.tdi2'` for HMR filtering
+
+ **Issue**: Users with custom outputDir won't get proper HMR
+ **Solution**: Use `options.outputDir` instead of hardcoded `.tdi2`
+
+**5. HMR message detection:**
+
+- [vite-plugin-di/e2e/helpers.ts:198,217-218](monorepo/packages/vite-plugin-di/e2e/helpers.ts#L198,217-218) - `'[vite] hmr update'`, `'[vite] hot updated'`, `'[vite] page reload'`, `'full-reload'`
+
+ **Issue**: Tests only - false positive
+
+#### ACTION ITEMS:
+
+1. **Add to plugin options**:
+
+ ```typescript
+ export interface DIPluginOptions {
+ // ... existing options
+ excludePatterns?: string[]; // Default: ['node_modules', '.d.ts', '.test.', '.spec.']
+ excludeDirs?: string[]; // Default: ['node_modules']
+ // Note: outputDir already configurable, should be used instead of hardcoded '.tdi2'
+ }
+ ```
+
+2. **Files to update**:
+ - Replace hardcoded `'.tdi2'` checks with `options.outputDir` in vite-plugin HMR code
+ - Replace hardcoded exclude patterns with `options.excludePatterns` in all `shouldSkipFile` functions
+ - Document that `advanced.diPatterns` is available for custom marker detection
+
+3. **Testing**:
+ - Add tests for custom `outputDir` with HMR
+ - Add tests for custom `excludePatterns`
+
### โ
hot reload fixes added path issue
see `src/generated` to src/.tdi2
diff --git a/monorepo/apps/di-playground/README.md b/monorepo/apps/di-playground/README.md
new file mode 100644
index 00000000..5628a9d0
--- /dev/null
+++ b/monorepo/apps/di-playground/README.md
@@ -0,0 +1,164 @@
+# TDI2 Playground
+
+An interactive, browser-based playground for exploring TDI2 (TypeScript Dependency Injection) code transformations. Similar to TypeScript Playground or Typia Playground, this tool provides live visualization of how TDI2 transforms your React components.
+
+## Features
+
+- **Live Code Transformation**: See real-time transformations as you type
+- **Monaco Editor**: Full-featured code editor with TypeScript support
+- **Split-Pane View**: Input code on the left, transformed output on the right
+- **Example Library**: Pre-built examples demonstrating common patterns
+- **Browser-Based**: No backend required - all transformations run in your browser
+
+## Quick Start
+
+### Development
+
+```bash
+# From monorepo root
+bun run playground:dev
+
+# Or directly
+cd monorepo/apps/di-playground
+bun run dev
+```
+
+Visit http://localhost:5174
+
+### Build
+
+```bash
+# From monorepo root
+bun run playground:build
+
+# Or directly
+cd monorepo/apps/di-playground
+bun run build
+```
+
+## Usage
+
+1. **Select an Example**: Use the dropdown to choose from pre-built examples
+2. **Edit Code**: Modify the input code in the left panel
+3. **View Transformation**: See the transformed output in the right panel (updates automatically after 500ms)
+4. **Reset**: Click "Reset" to restore the original example code
+5. **Transform**: Click "Transform" to manually trigger transformation
+
+## Examples
+
+The playground includes several examples:
+
+- **Basic Counter**: Simple counter component with DI marker
+- **Counter with Service**: Counter using dependency injection
+- **Todo List**: Todo list with service injection
+- **User Profile**: Multi-service component with authentication
+- **Shopping Cart**: Complex e-commerce cart example
+
+## How It Works
+
+### Transformation Process
+
+The playground uses the **actual** `FunctionalDIEnhancedTransformer` from `@tdi2/di-core` running in the browser:
+
+1. **In-Memory File System**: Uses ts-morph's in-memory file system for browser compatibility
+2. **Service Registry**: Pre-loads common service interfaces (Counter, Todo, User, Auth, Cart, Product)
+3. **Real Transformation**: Runs the same transformation pipeline used by the Vite plugin
+4. **DI Marker Detection**: Looks for `// @di-inject` comments
+5. **Interface Resolution**: Automatically resolves service interfaces to implementations
+6. **Code Generation**: Generates actual transformed code with proper imports and DI setup
+
+### Features
+
+The playground runs the full production transformer including:
+
+- โ
Full AST-based code transformation
+- โ
Interface resolution and validation
+- โ
Complex prop destructuring handling
+- โ
Service injection transformation
+- โ
Import management and code generation
+- โ
Error reporting and warnings
+
+Note: Configuration class processing and bean factory generation work but require specific setup.
+
+## Project Structure
+
+```
+di-playground/
+โโโ src/
+โ โโโ App.tsx # Main application component
+โ โโโ main.tsx # Application entry point
+โ โโโ transformer.ts # Browser-compatible transformer
+โ โโโ examples.ts # Example code snippets
+โ โโโ styles.css # Global styles
+โโโ index.html # HTML template
+โโโ package.json # Dependencies
+โโโ vite.config.ts # Vite configuration
+โโโ tsconfig.json # TypeScript configuration
+```
+
+## Technologies
+
+- **React 19**: UI framework
+- **Vite 6**: Build tool and dev server
+- **Monaco Editor**: Code editor (powers VS Code)
+- **ts-morph**: TypeScript AST manipulation
+- **@tdi2/di-core**: Core DI transformation logic
+
+## Development Notes
+
+### Adding New Examples
+
+Edit `src/examples.ts` and add a new entry to the `examples` array:
+
+```typescript
+{
+ name: 'My Example',
+ description: 'Brief description',
+ code: `// Your example code here`
+}
+```
+
+### Enhancing Transformations
+
+The transformer logic is in `src/transformer.ts` and uses the real `FunctionalDIEnhancedTransformer`. To add more features:
+
+1. **Add More Services**: Add service definitions in `createCommonServices()` method
+2. **Configuration Options**: Expose transformer options in the UI (e.g., enable/disable features)
+3. **Multiple Files**: Support multiple file transformations in the virtual filesystem
+4. **Advanced Debugging**: Show intermediate transformation steps or AST visualization
+
+### Styling
+
+The playground uses a dark VS Code-inspired theme. Styles are in `src/styles.css` and follow a component-based naming convention.
+
+## Future Enhancements
+
+- [ ] URL-based code sharing (encode input in URL)
+- [ ] Full production transformer integration
+- [ ] Multiple file support
+- [ ] TypeScript diagnostics display
+- [ ] Transformation step visualization
+- [ ] Export transformed code
+- [ ] Customizable transformation options
+- [ ] Side-by-side diff view
+- [ ] Mobile-responsive layout
+
+## Contributing
+
+To contribute to the playground:
+
+1. Make your changes in `monorepo/apps/di-playground`
+2. Test thoroughly with `bun run dev`
+3. Build to verify: `bun run build`
+4. Follow the project's coding conventions
+5. Submit a PR with clear description
+
+## Related Documentation
+
+- [TDI2 Documentation](https://7frank.github.io/tdi2/)
+- [Getting Started Guide](../../apps/docs-starlight/src/content/docs/getting-started/quick-start.md)
+- [Architecture Patterns](../../apps/docs-starlight/src/content/docs/guides/architecture/controller-service-pattern.md)
+
+## License
+
+MIT - See root LICENSE file
diff --git a/monorepo/apps/di-playground/index.html b/monorepo/apps/di-playground/index.html
new file mode 100644
index 00000000..1cb9ee0c
--- /dev/null
+++ b/monorepo/apps/di-playground/index.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
TDI2 Playground - Interactive Code Transformation
+
+
+
+
+
+
+
diff --git a/monorepo/apps/di-playground/package.json b/monorepo/apps/di-playground/package.json
new file mode 100644
index 00000000..6d63d808
--- /dev/null
+++ b/monorepo/apps/di-playground/package.json
@@ -0,0 +1,45 @@
+{
+ "name": "@tdi2/di-playground",
+ "version": "1.0.0",
+ "description": "TDI2 Interactive Playground - Live code transformation preview",
+ "type": "module",
+ "private": true,
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "preview": "vite preview",
+ "test": "vitest run",
+ "test:watch": "vitest",
+ "lint": "echo 'No linting configured yet'",
+ "clean": "rm -rf dist"
+ },
+ "keywords": [
+ "dependency-injection",
+ "typescript",
+ "playground",
+ "interactive"
+ ],
+ "author": "TDI2 Team",
+ "license": "MIT",
+ "dependencies": {
+ "@tdi2/di-core": "workspace:*",
+ "@codesandbox/sandpack-react": "^2.19.10",
+ "@monaco-editor/react": "^4.6.0",
+ "react": "^19.0.0",
+ "react-dom": "^19.0.0",
+ "ts-morph": "^21.0.1",
+ "valtio": "^2.1.2"
+ },
+ "devDependencies": {
+ "@tdi2/vite-plugin-di": "workspace:*",
+ "@types/react": "^19.1.2",
+ "@types/react-dom": "^19.1.2",
+ "@vitejs/plugin-react": "^4.4.1",
+ "typescript": "~5.8.3",
+ "vite": "^6.0.0",
+ "vitest": "^2.1.8"
+ },
+ "engines": {
+ "node": ">=18.0.0"
+ }
+}
diff --git a/monorepo/apps/di-playground/src/App.tsx b/monorepo/apps/di-playground/src/App.tsx
new file mode 100644
index 00000000..f7b9cefe
--- /dev/null
+++ b/monorepo/apps/di-playground/src/App.tsx
@@ -0,0 +1,513 @@
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import Editor from '@monaco-editor/react';
+import { BrowserTransformer } from './transformer';
+import { examples, defaultExample, ProjectExample, ProjectFile } from './examples';
+import { FileTree } from './components/FileTree';
+import { Preview } from './components/Preview';
+import type * as Monaco from 'monaco-editor';
+
+// Configure Monaco editor with type definitions
+const configureMonaco = (monaco: typeof Monaco) => {
+ const reactTypes = `declare module 'react' {
+ export function useState
(initialValue: T): [T, (value: T) => void];
+ export function useEffect(effect: () => void | (() => void), deps?: any[]): void;
+ export function useCallback(callback: T, deps: any[]): T;
+ export const FC: any;
+ export const ReactNode: any;
+ export default React;
+ const React: any;
+ }`;
+
+ const diCoreTypes = `declare module '@tdi2/di-core' {
+ export type Inject = T;
+ export type InjectOptional = T | undefined;
+ export function Service(): ClassDecorator;
+ export const Container: any;
+ }`;
+
+ const compilerOptions = {
+ target: monaco.languages.typescript.ScriptTarget.ES2020,
+ allowNonTsExtensions: true,
+ moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+ module: monaco.languages.typescript.ModuleKind.ESNext,
+ noEmit: true,
+ esModuleInterop: true,
+ jsx: monaco.languages.typescript.JsxEmit.React,
+ reactNamespace: 'React',
+ allowJs: true,
+ typeRoots: ['node_modules/@types'],
+ };
+
+ const diagnosticOptions = {
+ noSemanticValidation: false,
+ noSyntaxValidation: false,
+ diagnosticCodesToIgnore: [
+ 1259, // Top-level 'await' expressions are only allowed when the 'module' option is set to 'esnext' or 'system'
+ 2792, // Cannot find module (we handle this with extra libs)
+ ],
+ };
+
+ // Configure TypeScript (for .ts files)
+ monaco.languages.typescript.typescriptDefaults.addExtraLib(reactTypes, 'file:///node_modules/@types/react/index.d.ts');
+ monaco.languages.typescript.typescriptDefaults.addExtraLib(diCoreTypes, 'file:///node_modules/@tdi2/di-core/index.d.ts');
+ monaco.languages.typescript.typescriptDefaults.setCompilerOptions(compilerOptions);
+ monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions(diagnosticOptions);
+
+ // Configure JavaScript (for JSX highlighting in .tsx files)
+ monaco.languages.typescript.javascriptDefaults.addExtraLib(reactTypes, 'file:///node_modules/@types/react/index.d.ts');
+ monaco.languages.typescript.javascriptDefaults.addExtraLib(diCoreTypes, 'file:///node_modules/@tdi2/di-core/index.d.ts');
+ monaco.languages.typescript.javascriptDefaults.setCompilerOptions(compilerOptions);
+ monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions(diagnosticOptions);
+};
+
+export interface TransformedFile {
+ path: string;
+ originalCode: string;
+ transformedCode: string;
+ error?: string;
+}
+
+export interface EditedFile {
+ path: string;
+ content: string;
+}
+
+type ViewMode = 'before' | 'after';
+
+function App() {
+ const [selectedExample, setSelectedExample] = useState(defaultExample);
+ const [selectedFilePath, setSelectedFilePath] = useState(null);
+ const [transformedFiles, setTransformedFiles] = useState>({});
+ const [editedFiles, setEditedFiles] = useState>({}); // Store user edits
+ const [viewMode, setViewMode] = useState('before');
+ const [error, setError] = useState(null);
+ const [isTransforming, setIsTransforming] = useState(false);
+ const [showPreview, setShowPreview] = useState(false); // Preview closed by default - opens after first transformation
+ const [isTransformerReady, setIsTransformerReady] = useState(false); // Track transformer initialization
+ const transformerRef = useRef(null);
+ const transformTimeoutRef = useRef(null);
+ const isTransformingRef = useRef(false); // Track transforming state in ref to prevent callback recreation
+ const hasInitialTransformRef = useRef(false); // Track if initial transformation is complete
+
+ // Refs to always access latest values (avoid stale closures)
+ const editedFilesRef = useRef(editedFiles);
+ const selectedExampleFilesRef = useRef(selectedExample.files);
+
+ // Keep refs in sync with state
+ useEffect(() => {
+ editedFilesRef.current = editedFiles;
+ }, [editedFiles]);
+
+ useEffect(() => {
+ selectedExampleFilesRef.current = selectedExample.files;
+ }, [selectedExample.files]);
+
+ // Initialize transformer
+ useEffect(() => {
+ console.log('๐ง Initializing BrowserTransformer...');
+ transformerRef.current = new BrowserTransformer();
+ console.log('โ
BrowserTransformer initialized');
+ setIsTransformerReady(true);
+ }, []);
+
+ // Set initial selected file when example changes
+ useEffect(() => {
+ if (selectedExample.files.length > 0) {
+ setSelectedFilePath(selectedExample.files[0].path);
+ }
+ // Clear edits when example changes
+ setEditedFiles({});
+ }, [selectedExample]);
+
+ // Transform all files
+ const transformAllFiles = useCallback(async () => {
+ if (!transformerRef.current || isTransformingRef.current) return;
+
+ console.log('๐ ========== STARTING transformAllFiles ==========');
+ console.log('๐ Files to process:', selectedExampleFilesRef.current.map(f => f.path));
+ console.log('๐ Edited files:', Object.keys(editedFilesRef.current));
+ console.log('๐ฏ Has initial transform?', hasInitialTransformRef.current);
+
+ isTransformingRef.current = true;
+ setIsTransforming(true);
+ setError(null);
+
+ const results: Record = {};
+
+ // CRITICAL: Update virtual files and re-scan interfaces FIRST
+ // This ensures DI_CONFIG generation uses current file content
+ // Use refs to get latest values (avoid stale closures)
+ try {
+ const filesToUpdate = selectedExampleFilesRef.current.map(file => ({
+ path: file.path,
+ content: editedFilesRef.current[file.path] ?? file.content,
+ }));
+ // Batch update all files and re-scan interfaces once (more efficient)
+ await transformerRef.current.updateFilesAndRescan(filesToUpdate);
+ } catch (err) {
+ console.error('Error updating virtual files:', err);
+ }
+
+ // Now transform all files with updated interface mappings
+ for (const file of selectedExampleFilesRef.current) {
+ try {
+ // Use edited content if available, otherwise use original
+ const contentToTransform = editedFilesRef.current[file.path] ?? file.content;
+ const result = await transformerRef.current.transform(contentToTransform, file.path);
+
+ results[file.path] = {
+ path: file.path,
+ originalCode: contentToTransform,
+ transformedCode: result.transformedCode || contentToTransform,
+ error: result.error,
+ };
+
+ if (result.warnings && result.warnings.length > 0) {
+ console.warn(`Warnings for ${file.path}:`, result.warnings);
+ }
+ } catch (err) {
+ const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
+ const contentToTransform = editedFilesRef.current[file.path] ?? file.content;
+ results[file.path] = {
+ path: file.path,
+ originalCode: contentToTransform,
+ transformedCode: `// Transformation failed: ${errorMessage}`,
+ error: errorMessage,
+ };
+ }
+ }
+
+ // CRITICAL: Re-scan interfaces after transformations
+ // Transformations remove/recreate source files, which clears interface mappings
+ // This rebuild ensures generateDIConfig() has the correct mappings
+ console.log('๐ Re-scanning interfaces after transformations...');
+ try {
+ await transformerRef.current.rescanInterfaces();
+ console.log('โ
Re-scanned interfaces after transformations');
+ } catch (err) {
+ console.error('โ Error re-scanning interfaces:', err);
+ }
+
+ console.log('๐ Transformation results:', Object.keys(results));
+ console.log('๐ ========== ENDING transformAllFiles ==========');
+
+ setTransformedFiles(results);
+ setIsTransforming(false);
+ isTransformingRef.current = false;
+
+ // After first successful transformation, mark as ready and open preview
+ if (!hasInitialTransformRef.current) {
+ hasInitialTransformRef.current = true;
+ setShowPreview(true);
+ console.log('โ
Initial transformation complete - preview ready, opening preview');
+ } else {
+ console.log('๐ Subsequent transformation complete');
+ }
+ }, []); // No dependencies - stable callback
+
+ // Debounced transform when edits change
+ useEffect(() => {
+ // Only transform if we have edits
+ if (Object.keys(editedFiles).length === 0) return;
+
+ // Clear any pending transformation
+ if (transformTimeoutRef.current) {
+ clearTimeout(transformTimeoutRef.current);
+ }
+
+ // Debounce transformation (500ms delay)
+ transformTimeoutRef.current = setTimeout(() => {
+ transformAllFiles();
+ }, 500);
+
+ // Cleanup on unmount or before next effect
+ return () => {
+ if (transformTimeoutRef.current) {
+ clearTimeout(transformTimeoutRef.current);
+ }
+ };
+ }, [editedFiles, transformAllFiles]);
+
+ // Transform when transformer is ready or example changes
+ useEffect(() => {
+ if (isTransformerReady) {
+ console.log('๐ข Transformer ready or example changed, triggering transformation');
+ transformAllFiles();
+ } else {
+ console.warn('โ ๏ธ Transformer not ready yet, skipping transformation');
+ }
+ }, [isTransformerReady, selectedExample, transformAllFiles]);
+
+ // Load edited files from URL hash on mount
+ useEffect(() => {
+ const hash = window.location.hash.slice(1);
+ if (hash) {
+ try {
+ const decoded = atob(hash);
+ const data = JSON.parse(decoded);
+ if (data.edits) {
+ setEditedFiles(data.edits);
+ }
+ } catch (e) {
+ console.warn('Failed to load edits from URL:', e);
+ }
+ }
+ }, []);
+
+ // Save edited files to URL hash
+ useEffect(() => {
+ if (Object.keys(editedFiles).length > 0) {
+ const data = { edits: editedFiles };
+ const encoded = btoa(JSON.stringify(data));
+ window.location.hash = encoded;
+ } else {
+ window.location.hash = '';
+ }
+ }, [editedFiles]);
+
+ const handleExampleChange = (index: number) => {
+ setSelectedExample(examples[index]);
+ setShowPreview(false);
+ hasInitialTransformRef.current = false; // Reset for new example
+ };
+
+ const handleFileSelect = (filePath: string) => {
+ setSelectedFilePath(filePath);
+ };
+
+ const handleRun = () => {
+ setShowPreview(true);
+ };
+
+ // Handle code changes with debounced transformation
+ const handleCodeChange = (value: string | undefined) => {
+ if (!selectedFilePath || !value) return;
+
+ // Update edited files immediately
+ setEditedFiles(prev => ({
+ ...prev,
+ [selectedFilePath]: value,
+ }));
+
+ // Debounce transformation (will trigger via useEffect)
+ if (transformTimeoutRef.current) {
+ clearTimeout(transformTimeoutRef.current);
+ }
+ };
+
+ // Generate DI_CONFIG.ts content using the actual transformer logic
+ const generateDIConfig = (): string => {
+ console.log('๐๏ธ generateDIConfig called');
+ console.log(' Transformer ready?', !!transformerRef.current);
+ console.log(' Transformed files:', Object.keys(transformedFiles));
+
+ if (!transformerRef.current) {
+ console.warn('โ ๏ธ Transformer not initialized, returning empty config');
+ return `// Transformer not initialized
+export const DI_CONFIG = {};
+export const SERVICE_TOKENS = {};
+export const INTERFACE_IMPLEMENTATIONS = {};
+`;
+ }
+
+ const config = transformerRef.current.generateDIConfig();
+ console.log('๐๏ธ Generated config length:', config.length);
+ console.log('๐๏ธ Config preview:', config.substring(0, 300));
+ return config;
+ };
+
+ // Memoize DI config to prevent unnecessary Sandpack reloads
+ const diConfigContent = useMemo(() => {
+ console.log('๐ useMemo for diConfigContent triggered');
+ return generateDIConfig();
+ }, [transformedFiles]); // Only regenerate when transformedFiles changes
+
+ // Get files to display based on view mode
+ const getDisplayFiles = (): ProjectFile[] => {
+ if (viewMode === 'before') {
+ return selectedExample.files;
+ } else {
+ // In "after" view, show transformed files + generated files
+ const transformedFilesList: ProjectFile[] = selectedExample.files.map(file => ({
+ ...file,
+ path: file.path,
+ content: transformedFiles[file.path]?.transformedCode || file.content,
+ }));
+
+ // Add generated DI_CONFIG file
+ const diConfigFile: ProjectFile = {
+ path: 'src/.tdi2/DI_CONFIG.ts',
+ language: 'typescript',
+ content: diConfigContent,
+ };
+
+ return [...transformedFilesList, diConfigFile];
+ }
+ };
+
+ const displayFiles = getDisplayFiles();
+
+ const getCurrentFile = (): ProjectFile | null => {
+ if (!selectedFilePath) return null;
+
+ // Check if it's a generated file
+ const generatedFile = displayFiles.find((f) => f.path === selectedFilePath);
+ if (generatedFile && selectedFilePath.includes('.tdi2/')) {
+ return generatedFile;
+ }
+
+ // Otherwise, look in original files
+ return selectedExample.files.find((f) => f.path === selectedFilePath) || null;
+ };
+
+ const getCurrentTransformedFile = (): TransformedFile | null => {
+ if (!selectedFilePath) return null;
+ return transformedFiles[selectedFilePath] || null;
+ };
+
+ const currentFile = getCurrentFile();
+ const currentTransformed = getCurrentTransformedFile();
+
+ // Get current code based on view mode
+ const currentCode = viewMode === 'before'
+ ? (editedFiles[selectedFilePath || ''] ?? currentFile?.content ?? '')
+ : (currentFile?.path.includes('.tdi2/')
+ ? currentFile.content // Show generated file as-is
+ : (currentTransformed?.transformedCode ?? ''));
+
+ const exampleIndex = examples.findIndex(ex => ex.name === selectedExample.name);
+
+ return (
+
+
+
+ ๐ฎ
+ TDI2 Playground
+
+
+
+
+ {showPreview && (
+
+ )}
+
+
+
+
+ {/* Left Panel - File Tree */}
+
+
+
+
+
+
+
+
{selectedExample.description}
+
+ {displayFiles.length} file{displayFiles.length !== 1 ? 's' : ''}
+ {viewMode === 'after' && ' (transformed)'}
+
+
+
+
+ {/* Center Panel - Code Editor */}
+
+
+
+ {currentFile?.path || 'No file selected'}
+
+ {isTransforming && (
+ โก Transforming...
+ )}
+ {currentFile?.path.includes('.tdi2/') && (
+ โ๏ธ Generated
+ )}
+ {viewMode === 'before' && !currentFile?.path.includes('.tdi2/') && (
+ Editable
+ )}
+ {viewMode === 'after' && !currentFile?.path.includes('.tdi2/') && (
+ Read-only
+ )}
+
+
+
+
+
+
+ {/* Right Panel - Live Preview (conditional) */}
+ {showPreview && Object.keys(transformedFiles).length > 0 && (
+
setShowPreview(false)}
+ />
+ )}
+
+
+ {error && (
+
+
โ Transformation Error
+
{error}
+
+ )}
+
+
Count: {counterService.state.count}
+
+
+
+ );
+}
+
+export default Counter;`;
+
+ const result = await transformer.transform(input, 'Counter.tsx');
+
+ // Debug output
+ if (!result.success) {
+ console.log('Transformation failed:', result.error);
+ console.log('Warnings:', result.warnings);
+ }
+
+ // Basic checks
+ expect(result.success).toBe(true);
+ expect(result.error).toBeUndefined();
+ expect(result.transformedCode).toBeDefined();
+
+ // Check transformation occurred
+ expect(result.stats?.transformedComponents).toBeGreaterThan(0);
+
+ // Check transformed code contains service injection
+ const transformed = result.transformedCode!;
+ expect(transformed).toContain('useService');
+ expect(transformed).toContain('CounterServiceInterface');
+
+ // Should NOT contain the original prop destructuring (it should be transformed)
+ // The transformation should add service extraction at the component top
+ expect(transformed.includes('useService') || transformed.includes('props')).toBe(true);
+ });
+
+ it('should handle TodoList component with Inject prop', async () => {
+ const input = `import React from 'react';
+import { Inject } from '@tdi2/di-core';
+import type { TodoServiceInterface } from '../services/TodoService';
+
+function TodoList({todoService}:{todoService:Inject}) {
+ const [newTodo, setNewTodo] = React.useState('');
+
+ const handleAdd = () => {
+ if (newTodo.trim()) {
+ todoService.addTodo(newTodo);
+ setNewTodo('');
+ }
+ };
+
+ return (
+
+
Todo List
+ setNewTodo(e.target.value)}
+ placeholder="What needs to be done?"
+ />
+
+
+ );
+}
+
+export default TodoList;`;
+
+ const result = await transformer.transform(input, 'TodoList.tsx');
+
+ expect(result.success).toBe(true);
+ expect(result.stats?.transformedComponents).toBeGreaterThan(0);
+ expect(result.transformedCode).toContain('useService');
+ expect(result.transformedCode).toContain('TodoServiceInterface');
+ });
+
+ it('should handle ShoppingCart with multiple Inject props', async () => {
+ const input = `import React from 'react';
+import { Inject } from '@tdi2/di-core';
+import type { ProductServiceInterface } from '../services/ProductService';
+import type { CartServiceInterface } from '../services/CartService';
+
+function ShoppingCart({productService, cartService}:{productService:Inject, cartService:Inject}) {
+ React.useEffect(() => {
+ productService.loadProducts();
+ }, []);
+
+ const total = cartService.getTotal();
+
+ return (
+
+
Shop
+
+
+ );
+}
+
+export default ShoppingCart;`;
+
+ const result = await transformer.transform(input, 'ShoppingCart.tsx');
+
+ expect(result.success).toBe(true);
+ expect(result.stats?.transformedComponents).toBeGreaterThan(0);
+
+ const transformed = result.transformedCode!;
+ expect(transformed).toContain('useService');
+ expect(transformed).toContain('ProductServiceInterface');
+ expect(transformed).toContain('CartServiceInterface');
+ });
+
+ it('should not transform components without Inject markers', async () => {
+ const input = `import React from 'react';
+
+function RegularComponent({ title }: { title: string }) {
+ return {title}
;
+}
+
+export default RegularComponent;`;
+
+ const result = await transformer.transform(input, 'RegularComponent.tsx');
+
+ expect(result.success).toBe(true);
+ expect(result.stats?.transformedComponents).toBe(0);
+ expect(result.warnings).toContain('No Inject type markers found in component props. Components need props with Inject types to be transformed.');
+ });
+
+ it('should handle service files without transformation', async () => {
+ const input = `import { Service } from '@tdi2/di-core';
+
+export interface CounterServiceInterface {
+ state: { count: number };
+ increment(): void;
+ decrement(): void;
+}
+
+@Service()
+export class CounterService implements CounterServiceInterface {
+ state = { count: 0 };
+
+ increment() {
+ this.state.count++;
+ }
+
+ decrement() {
+ this.state.count--;
+ }
+}`;
+
+ const result = await transformer.transform(input, 'CounterService.ts');
+
+ expect(result.success).toBe(true);
+ expect(result.stats?.transformedComponents).toBe(0);
+ // Service files should not be transformed
+ expect(result.transformedCode).toBe(input);
+ });
+});
diff --git a/monorepo/apps/di-playground/src/components/FileTree.tsx b/monorepo/apps/di-playground/src/components/FileTree.tsx
new file mode 100644
index 00000000..f02768c0
--- /dev/null
+++ b/monorepo/apps/di-playground/src/components/FileTree.tsx
@@ -0,0 +1,135 @@
+import React from 'react';
+import type { ProjectExample, ProjectFile } from '../examples';
+
+interface FileTreeProps {
+ example: ProjectExample;
+ selectedFile: string | null;
+ onFileSelect: (filePath: string) => void;
+}
+
+interface TreeNode {
+ name: string;
+ path: string;
+ isDirectory: boolean;
+ children?: TreeNode[];
+ file?: ProjectFile;
+}
+
+function buildTree(files: ProjectFile[]): TreeNode {
+ const root: TreeNode = {
+ name: 'root',
+ path: '',
+ isDirectory: true,
+ children: [],
+ };
+
+ files.forEach((file) => {
+ const parts = file.path.split('/');
+ let currentNode = root;
+
+ parts.forEach((part, index) => {
+ const isLastPart = index === parts.length - 1;
+ const currentPath = parts.slice(0, index + 1).join('/');
+
+ if (!currentNode.children) {
+ currentNode.children = [];
+ }
+
+ let existingNode = currentNode.children.find((child) => child.name === part);
+
+ if (!existingNode) {
+ existingNode = {
+ name: part,
+ path: currentPath,
+ isDirectory: !isLastPart,
+ children: isLastPart ? undefined : [],
+ file: isLastPart ? file : undefined,
+ };
+ currentNode.children.push(existingNode);
+ }
+
+ currentNode = existingNode;
+ });
+ });
+
+ return root;
+}
+
+function TreeItem({
+ node,
+ selectedFile,
+ onFileSelect,
+ depth = 0,
+}: {
+ node: TreeNode;
+ selectedFile: string | null;
+ onFileSelect: (filePath: string) => void;
+ depth?: number;
+}) {
+ const [isExpanded, setIsExpanded] = React.useState(true);
+
+ if (node.isDirectory) {
+ return (
+ <>
+ {node.name !== 'root' && (
+ setIsExpanded(!isExpanded)}
+ >
+ {isExpanded ? '๐' : '๐'}
+ {node.name}
+
+ )}
+ {isExpanded &&
+ node.children?.map((child) => (
+
+ ))}
+
+ );
+ }
+
+ const isSelected = selectedFile === node.path;
+ const isGenerated = node.path.includes('.tdi2/');
+
+ const icon = isGenerated
+ ? 'โ๏ธ' // Generated file icon
+ : node.name.endsWith('.tsx')
+ ? 'โ๏ธ'
+ : node.name.endsWith('.ts')
+ ? '๐'
+ : '๐';
+
+ return (
+ onFileSelect(node.path)}
+ >
+ {icon}
+ {node.name}
+ {isGenerated && Generated}
+
+ );
+}
+
+export function FileTree({ example, selectedFile, onFileSelect }: FileTreeProps) {
+ const tree = React.useMemo(() => buildTree(example.files), [example.files]);
+
+ return (
+
+
+ {example.name}
+
+
+
+
+
+
+
+ โถ๏ธ
+ Live Preview
+
+
+
+
+
+
+
+
+
Count: {counterService.state.count}
+
+
+
+ );
+}
+
+export default Counter;
+`,
+ },
+ ],
+ },
+ {
+ name: 'Todo List',
+ description: 'Todo list with CRUD operations',
+ files: [
+ {
+ path: 'src/types/Todo.ts',
+ language: 'typescript',
+ content: `export interface Todo {
+ id: string;
+ text: string;
+ completed: boolean;
+ createdAt: Date;
+}
+`,
+ },
+ {
+ path: 'src/services/TodoService.ts',
+ language: 'typescript',
+ content: `import { Service } from '@tdi2/di-core';
+import type { Todo } from '../types/Todo';
+
+export interface TodoServiceInterface {
+ state: {
+ todos: Todo[];
+ filter: 'all' | 'active' | 'completed';
+ };
+ addTodo(text: string): void;
+ removeTodo(id: string): void;
+ toggleTodo(id: string): void;
+ setFilter(filter: 'all' | 'active' | 'completed'): void;
+ getFilteredTodos(): Todo[];
+}
+
+@Service()
+export class TodoService implements TodoServiceInterface {
+ state = {
+ todos: [] as Todo[],
+ filter: 'all' as 'all' | 'active' | 'completed'
+ };
+
+ addTodo(text: string) {
+ this.state.todos.push({
+ id: Math.random().toString(36).substr(2, 9),
+ text,
+ completed: false,
+ createdAt: new Date(),
+ });
+ }
+
+ removeTodo(id: string) {
+ this.state.todos = this.state.todos.filter(t => t.id !== id);
+ }
+
+ toggleTodo(id: string) {
+ const todo = this.state.todos.find(t => t.id === id);
+ if (todo) {
+ todo.completed = !todo.completed;
+ }
+ }
+
+ setFilter(filter: 'all' | 'active' | 'completed') {
+ this.state.filter = filter;
+ }
+
+ getFilteredTodos(): Todo[] {
+ const { todos, filter } = this.state;
+ if (filter === 'active') return todos.filter(t => !t.completed);
+ if (filter === 'completed') return todos.filter(t => t.completed);
+ return todos;
+ }
+}
+`,
+ },
+ {
+ path: 'src/components/TodoList.tsx',
+ language: 'tsx',
+ content: `import React from 'react';
+import { Inject } from '@tdi2/di-core';
+import type { TodoServiceInterface } from '../services/TodoService';
+
+function TodoList({todoService}:{todoService:Inject}) {
+ const [newTodo, setNewTodo] = React.useState('');
+
+ const handleAdd = () => {
+ if (newTodo.trim()) {
+ todoService.addTodo(newTodo);
+ setNewTodo('');
+ }
+ };
+
+ const filteredTodos = todoService.getFilteredTodos();
+
+ return (
+
+
Todo List
+
+
+ setNewTodo(e.target.value)}
+ onKeyPress={(e) => e.key === 'Enter' && handleAdd()}
+ placeholder="What needs to be done?"
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+ Shop
+
+
+
+
+
Products
+ {productService.state.loading ? (
+
Loading...
+ ) : (
+
+ {productService.state.products.map((product) => (
+
+
{product.name}
+
\${product.price.toFixed(2)}
+
+
+ ))}
+
+ )}
+
+
+ {cartService.state.isOpen && (
+
+
Your Cart
+ {cartService.state.items.length === 0 ? (
+
Cart is empty
+ ) : (
+ <>
+
+
+ Total: \${total.toFixed(2)}
+
+
+
+ )}
+
+ )}
+