@kustomizer/visual-editor 0.2.0 → 0.2.1

package/fesm2022/kustomizer-visual-editor.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, makeEnvironmentProviders, ViewContainerRef, DestroyRef, input, effect, reflectComponentType, ChangeDetectionStrategy, Component, computed, NgZone, signal, viewChild, output } from '@angular/core';
+import { InjectionToken, inject, Injectable, makeEnvironmentProviders, provideEnvironmentInitializer, signal, ViewContainerRef, DestroyRef, input, effect, reflectComponentType, ChangeDetectionStrategy, Component, computed, NgZone, viewChild, output, isDevMode } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { of, startWith, map, delay, throwError, isObservable, Observable, BehaviorSubject, tap, Subject, filter, firstValueFrom, debounceTime, switchMap as switchMap$1, takeUntil } from 'rxjs';
 import { switchMap, map as map$1, catchError } from 'rxjs/operators';
@@ -2104,6 +2104,17 @@ function provideEditorComponents(definitions) {
             useValue: definitions,
             multi: true,
         },
+        // Fallback: directly register definitions via environment initializer.
+        // This ensures registration works even when the InjectionToken doesn't
+        // match between pre-bundled library code and app code (e.g. ng serve with Vite).
+        provideEnvironmentInitializer(() => {
+            const registry = inject(ComponentRegistryService);
+            for (const def of definitions) {
+                if (!registry.has(def.type)) {
+                    registry.register(def);
+                }
+            }
+        }),
     ]);
 }
 
@@ -2112,10 +2123,28 @@ function provideEditorComponents(definitions) {
  */
 class ComponentRegistryService {
     definitions = new Map();
+    _version = signal(0, ...(ngDevMode ? [{ debugName: "_version" }] : []));
     injectedDefinitions = inject(EDITOR_COMPONENT_DEFINITIONS, { optional: true }) ?? [];
     constructor() {
         this.injectedDefinitions.flat().forEach((def) => this.register(def));
     }
+    /**
+     * Clear all registered definitions
+     */
+    clear() {
+        this.definitions.clear();
+        this._version.update(v => v + 1);
+    }
+    /**
+     * Unregister a single component definition by type
+     */
+    unregister(type) {
+        const deleted = this.definitions.delete(type);
+        if (deleted) {
+            this._version.update(v => v + 1);
+        }
+        return deleted;
+    }
     /**
      * Register a component definition
      */
@@ -2124,6 +2153,7 @@ class ComponentRegistryService {
             console.warn(`ComponentRegistry: Component type "${definition.type}" is already registered. Overwriting.`);
         }
         this.definitions.set(definition.type, definition);
+        this._version.update(v => v + 1);
     }
     /**
      * Register multiple definitions
@@ -2172,6 +2202,7 @@ class ComponentRegistryService {
      * Get all definitions
      */
     getAll() {
+        this._version(); // reactive dependency for signal consumers
         return Array.from(this.definitions.values());
     }
     /**
@@ -2365,8 +2396,7 @@ class DynamicRendererComponent {
     /** Additional context (sectionId, index, etc.) */
     context = input({}, ...(ngDevMode ? [{ debugName: "context" }] : []));
     /** Error state signal */
-    _error = false;
-    error = () => this._error;
+    error = signal(false, ...(ngDevMode ? [{ debugName: "error" }] : []));
     componentRef = null;
     currentType = null;
     currentAvailableInputs = null;
@@ -2392,13 +2422,17 @@ class DynamicRendererComponent {
         this.cleanup();
         const componentType = this.registry.getComponent(element.type);
         if (!componentType) {
-            this._error = true;
+            this.error.set(true);
             this.currentType = null;
             this.currentAvailableInputs = null;
-            console.warn(`DynamicRenderer: No component registered for type "${element.type}"`);
+            const all = this.registry.getAll();
+            const hasType = this.registry.has(element.type);
+            console.warn(`DynamicRenderer: No component registered for type "${element.type}".`, hasType
+                ? `Definition exists but has no "component" class (manifest-only).`
+                : `Registry has ${all.length} definition(s): [${all.map(d => d.type).join(', ')}]`);
             return;
         }
-        this._error = false;
+        this.error.set(false);
         this.currentType = element.type;
         this.previousInputs.clear();
         this.componentRef = this.viewContainerRef.createComponent(componentType);
@@ -7814,22 +7848,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 class ManifestLoaderService {
     http = inject(HttpClient);
     registry = inject(ComponentRegistryService);
+    watchInterval = null;
+    lastManifestHash = '';
+    manifestTypes = new Set();
     /**
      * Fetch the manifest from the given URL and register all components.
      */
     loadManifest(url) {
-        return this.http.get(url).pipe(tap((manifest) => this.registerManifestComponents(manifest)));
+        return this.http.get(url).pipe(tap((manifest) => {
+            this.registerManifestComponents(manifest);
+            this.lastManifestHash = this.hashManifest(manifest);
+        }));
+    }
+    /**
+     * Poll the manifest URL for changes and re-register components when the
+     * content hash differs. Only active in dev mode. No-op in production.
+     */
+    startWatching(manifestUrl, intervalMs = 2000) {
+        if (!isDevMode() || this.watchInterval)
+            return;
+        this.watchInterval = setInterval(() => {
+            this.http.get(manifestUrl).subscribe({
+                next: (manifest) => {
+                    const hash = this.hashManifest(manifest);
+                    if (hash !== this.lastManifestHash) {
+                        console.log('[Kustomizer] Manifest changed, reloading components…');
+                        this.lastManifestHash = hash;
+                        this.registerManifestComponents(manifest);
+                    }
+                },
+                error: () => { }, // silently ignore polling errors
+            });
+        }, intervalMs);
+    }
+    ngOnDestroy() {
+        if (this.watchInterval) {
+            clearInterval(this.watchInterval);
+            this.watchInterval = null;
+        }
     }
     /**
      * Register manifest entries in the ComponentRegistryService.
      * Each entry becomes a ComponentDefinition without a `component` field.
      */
     registerManifestComponents(manifest) {
+        // Remove only previously manifest-loaded definitions, preserving local components
+        for (const type of this.manifestTypes) {
+            this.registry.unregister(type);
+        }
+        this.manifestTypes.clear();
         for (const entry of manifest.components) {
             const definition = this.manifestEntryToDefinition(entry);
             this.registry.register(definition);
+            this.manifestTypes.add(definition.type);
         }
     }
+    hashManifest(manifest) {
+        return JSON.stringify(manifest.components.map(c => c.type + c.name + JSON.stringify(c.props ?? {}) + JSON.stringify(c.slots ?? [])));
+    }
     manifestEntryToDefinition(entry) {
         return {
             type: entry.type,