Refactor/renderers (#19)

* refactor: remove unnecessary renderer registry overrides

* refactor: remove FormContainer renderer and destruct internal props before pass to html elements

* refactor: remove function sanitizePropsForDOM

* refactor: remove component registry overrides

* refactor: rename registry dir to registries

* refactor: extract defaultRenderers definition into a separate file

* fix: type check fail

Author: guynikan

package.json

@@ -5,7 +5,7 @@
   "private": true,
   "scripts": {
     "build": "turbo build",
-    "dev": "turbo dev",
+    "showcases:dev": "turbo --filter showcases dev",
     "test": "turbo test --filter='./packages/*'",
     "test:e2e": "playwright test --config=tests/playwright.config.ts",
     "test:e2e:ui": "playwright test --ui --config=tests/playwright.config.ts",

packages/core/src/defaults/register-default-renderers.ts

@@ -0,0 +1,54 @@
+import { ComponentSpec, ComponentType, RuntimeAdapter } from "../runtime/types";
+
+/**
+ * Renderer function - wraps component rendering with additional logic
+ */
+export type RendererFn = (
+    componentSpec: ComponentSpec,
+    props: Record<string, any>,
+    runtime: RuntimeAdapter,
+    children?: any[]
+) => any;
+
+/**
+ * Default renderers - pass props as is
+ */
+export const defaultRenderers: Record<ComponentType, RendererFn> = {
+    field: (spec, props, runtime, children) => {
+        const propsWithChildren = children && children.length > 0
+            ? { ...props, children }
+            : props;
+        return runtime.create(spec, propsWithChildren);
+    },
+    'field-wrapper': (spec, props, runtime, children) => {
+        const propsWithChildren = children && children.length > 0
+            ? { ...props, children }
+            : props;
+        return runtime.create(spec, propsWithChildren);
+    },
+    'container': (spec, props, runtime, children) => {
+        return runtime.create(spec, { ...props, children });
+    },
+    content: (spec, props, runtime, children) => {
+        const propsWithChildren = children && children.length > 0
+            ? { ...props, children }
+            : props;
+        return runtime.create(spec, propsWithChildren);
+    },
+    addon: (spec, props, runtime) => {
+        return runtime.create(spec, props);
+    },
+    'menu-item': (spec, props, runtime, children) => {
+        const propsWithChildren = children && children.length > 0
+            ? { ...props, children }
+            : props;
+        return runtime.create(spec, propsWithChildren);
+    },
+    'menu-container': (spec, props, runtime, children) => {
+        const propsWithChildren = children && children.length > 0
+            ? { ...props, children }
+            : props;
+        return runtime.create(spec, propsWithChildren);
+    },
+
+}

packages/core/src/index.ts

@@ -11,8 +11,10 @@ export * from './runtime/types';
 export * from './forms/types';
 
 // Registry system
-export * from './registry/component-registry';
-export * from './registry/renderer-registry';
+export * from './registries/component-registry';
+export * from './registries/renderer-registry';
+
+export * from './defaults/register-default-renderers'
 
 // Orchestrator
 export * from './orchestrator/renderer-orchestrator';
@@ -34,7 +36,6 @@ export * from './provider';
 
 // Utils
 export * from './utils/jexl-config';
-export * from './utils/sanitize-props';
 
 // Validation
 export * from './validation';

packages/core/src/orchestrator/renderer-orchestrator.ts

@@ -8,8 +8,8 @@
 import type { RuntimeAdapter, ComponentSpec, DebugContextValue } from '../runtime/types';
 import type { FormAdapter } from '../forms/types';
 import type { MiddlewareFn, MiddlewareContext } from '../middleware/types';
-import { getComponentSpec } from '../registry/component-registry';
-import { getRendererForType } from '../registry/renderer-registry';
+import { getComponentSpec } from '../registries/component-registry';
+import { getRendererForType } from '../registries/renderer-registry';
 import { applyMiddlewares } from '../middleware/types';
 import { processValue } from '../expressions/template-processor';
 import { createDefaultResolver } from '../expressions/variable-resolver';
@@ -200,6 +200,16 @@ export function createRendererOrchestrator(
     // Parse schema (now using processed schema)
     const { 'x-component-props': componentProps = {} } = processedSchema;
 
+    // const componentSpec = getComponentSpec(componentKey, components, undefined, debug?.isEnabled);
+
+    // if(!componentSpec) {
+    //   if (debug?.isEnabled) {
+    //     console.warn(`Component not found: ${componentKey}`);
+    //   }
+    //   // Return error element (framework adapter will handle)
+    //   return null;
+    // }
+
     // Resolve component and renderer
     // Use processedSchema for x-component resolution (in case x-component has templates)
     // components already has provider components merged in the factory

packages/core/src/provider/provider.test.ts

@@ -6,7 +6,7 @@ import { describe, it, expect } from 'vitest';
 import { mergeProviderConfigs, resolveProviderConfig } from './provider';
 import type { ProviderConfig } from './types';
 import type { FormSchema } from '../schema/schema-types';
-import { createComponentSpec } from '../registry/component-registry';
+import { createComponentSpec } from '../registries/component-registry';
 
 describe('Provider Utilities', () => {
   describe('mergeProviderConfigs', () => {

packages/core/src/provider/provider.ts

@@ -6,7 +6,7 @@
 
 import type { ProviderConfig } from './types';
 import { defaultDebugConfig } from './types';
-import { getRendererRegistry } from '../registry/renderer-registry';
+import { getRendererRegistry } from '../registries/renderer-registry';
 
 /**
  * Merge two provider configurations hierarchically

packages/core/src/provider/types.ts

@@ -7,7 +7,7 @@
 import type { ComponentSpec, ComponentType, DebugConfig } from '../runtime/types';
 import type { FormSchema } from '../schema/schema-types';
 import type { MiddlewareFn } from '../middleware/types';
-import type { RendererFn } from '../registry/renderer-registry';
+import { RendererFn } from '../defaults/register-default-renderers';
 
 /**
  * Provider configuration

…/core/src/registry/component-registry.ts …ore/src/registries/component-registry.tspackages/core/src/registry/component-registry.ts renamed to packages/core/src/registries/component-registry.ts packages/core/src/registry/component-registry.ts renamed to packages/core/src/registries/component-registry.ts

@@ -14,7 +14,6 @@ export const defaultTypeProps: Record<ComponentType, Record<string, any>> = {
   field: { fullWidth: true },
   'field-wrapper': {},
   'container': {},
-  'FormContainer': {},
   content: {},
   addon: {},
   'menu-item': {},
@@ -54,21 +53,6 @@ export function getFactoryDefaultComponents(): Record<string, ComponentSpec> {
   return factoryDefaultComponents;
 }
 
-/**
- * Registry overrides (global registrations)
- */
-const registryOverrides = new Map<string, Partial<ComponentSpec>>();
-
-/**
- * Register a component override globally
- */
-export function registerComponent(name: string, config: Partial<ComponentSpec>): void {
-  registryOverrides.set(name, {
-    ...registryOverrides.get(name),
-    ...config,
-  });
-}
-
 /**
  * Get unified component registry
  * 
@@ -101,16 +85,6 @@ export function getComponentRegistry(
     });
   }
 
-  // Apply registry overrides
-  for (const [name, override] of Array.from(registryOverrides.entries())) {
-    const existing = merged[name];
-    merged[name] = {
-      ...existing,
-      ...override,
-      id: override.id || existing?.id || name,
-    } as ComponentSpec;
-  }
-
   return merged;
 }
 

packages/core/src/registries/renderer-registry.ts

@@ -0,0 +1,79 @@
+/**
+ * Renderer Registry
+ * 
+ * Framework-agnostic renderer registration system.
+ * Renderers are functions that wrap components with additional rendering logic.
+ */
+
+import { defaultRenderers, RendererFn } from '../defaults/register-default-renderers';
+import type { ComponentType } from '../runtime/types';
+
+
+/**
+ * Get unified renderer registry with hierarchical merging
+ * 
+ * Priority order: local > global > default
+ */
+export function getRendererRegistry(
+  globalRenderers?: Partial<Record<ComponentType, RendererFn>>,
+  localRenderers?: Partial<Record<ComponentType, RendererFn>>
+): Record<ComponentType, RendererFn> {
+  // Start with built-in renderers
+  let merged = { ...defaultRenderers };
+
+  // Apply global renderers (from provider)
+  if (globalRenderers) {
+    Object.keys(globalRenderers).forEach(type => {
+      const renderer = globalRenderers[type as ComponentType];
+      if (renderer) {
+        merged[type as ComponentType] = renderer;
+      }
+    });
+  }
+
+  // Apply local renderers (maximum priority)
+  if (localRenderers) {
+    Object.keys(localRenderers).forEach(type => {
+      const renderer = localRenderers[type as ComponentType];
+      if (renderer) {
+        merged[type as ComponentType] = renderer;
+      }
+    });
+  }
+
+  return merged;
+}
+
+/**
+ * Get effective renderer for a component type
+ * Includes debug logging
+ */
+export function getRendererForType(
+  type: ComponentType,
+  globalRenderers?: Partial<Record<ComponentType, RendererFn>>,
+  localRenderers?: Partial<Record<ComponentType, RendererFn>>,
+  debugEnabled?: boolean
+): RendererFn {
+  // Local renderers have maximum priority
+  if (localRenderers?.[type]) {
+    if (debugEnabled) {
+      console.log(`Renderer resolved from local: ${type}`);
+    }
+    return localRenderers[type]!;
+  }
+
+  // Global renderers second priority
+  if (globalRenderers?.[type]) {
+    if (debugEnabled) {
+      console.log(`Renderer resolved from global: ${type}`);
+    }
+    return globalRenderers[type]!;
+  }
+
+  // Default renderer last
+  if (debugEnabled) {
+    console.log(`Renderer resolved from default: ${type}`);
+  }
+  return defaultRenderers[type];
+}
+